C9Glax/tranga-website#83

Website/apiConnector.js

@@ -237,6 +237,13 @@ Date.prototype.timeNow = function () {
      return ((this.getHours() < 10)?"0":"") + this.getHours() +"_"+ ((this.getMinutes() < 10)?"0":"") + this.getMinutes() +"_"+ ((this.getSeconds() < 10)?"0":"") + this.getSeconds();
 }
 
+function UpdateAprilFoolsMode() { 
+	checkBox = document.getElementById("aprilFoolsMode");
+	var uri = `${apiUri}/Settings/AprilFoolsMode?enabled=${checkBox.checked}`;
+	console.log(uri);
+	PostData(uri);
+}
+
 //Komga
 function UpdateKomga(komgaUrl, komgaAuth){
     var uri = `${apiUri}/LibraryConnectors/Update?libraryConnector=Komga&komgaUrl=${komgaUrl}&komgaAuth=${komgaAuth}`;

Website/index.html

@@ -96,6 +96,13 @@
                   <span class="title">API Settings</span>
                   <row><label for="settingApiUri">API URI:</label><input placeholder="https://" type="text" id="settingApiUri"></row>
                   <row><label for="userAgent">User Agent:</label><input placeholder="UserAgent" id="userAgent" type="text"></row>
+                  <row>
+                    <label for="aprilFoolsMode">Skip Chapters on April 1st:</label>
+                    <label class="switch-toggle">
+                      <input type="checkbox" onclick="UpdateAprilFoolsMode()" id="aprilFoolsMode">
+                      <span class="slider"></span>
+                    </label>
+                  </row>
                   <row>
                     <border-bar-button class="section" onclick="RefreshLibraryMetadata()">Refresh Library Metadata</border-bar-button>
                     <border-bar-button class="section" onclick="DownloadLogs()">Download Logs</border-bar-button>

Website/interaction.js

@@ -73,6 +73,7 @@ const settingNtfyConfigured = document.querySelector("#ntfyConfigured");
 
 const settingUserAgent = document.querySelector("#userAgent");
 const settingApiUri = document.querySelector("#settingApiUri");
+const settingAprilFoolsMode = document.querySelector("#aprilFoolsMode");
 const settingCSSStyle = document.querySelector('#cssStyle');
 const newMangaPopup = document.querySelector("#newMangaPopup");
 const newMangaConnector = document.querySelector("#newMangaConnector");
@@ -562,6 +563,7 @@ function OpenSettings(){
     //console.log(json);
     settingApiUri.value = apiUri;
     settingUserAgent.value = json.userAgent;
+    settingAprilFoolsMode.checked = json.aprilFoolsMode;
     //console.log(json.styleSheet);
   });
   GetRateLimits().then((json) => {

Website/styles/base.css

@@ -421,10 +421,10 @@ popup popup-window {
 }
 
 popup#jobStatusView popup-window {
-    left: 20%;
+    left: 10%;
-    top: 20%;
+    top: 10%;
-    height: 60%;
+    height: 80%;
-    width: 60%;
+    width: 80%;
 }
 
 popup-content{
@@ -958,3 +958,62 @@ footer-tag-popup::before{
   color: var(--secondary-color);
   cursor: pointer;
 }
+
+
+ /* The switch - the box around the slider */
+ .switch-toggle {
+    position: relative;
+    width: 40px;
+    height: 20px;
+    margin-left: auto;
+    float: right;
+    margin-right: 2px;
+  }
+  
+  /* Hide default HTML checkbox */
+  .switch-toggle input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+  
+  /* The slider */
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: .4s;
+    transition: .4s;
+    border-radius: 34px;
+  }
+  
+  .slider:before {
+    position: absolute;
+    content: "";
+    height: 12px;
+    width: 12px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+    border-radius: 50%;
+  }
+  
+  input:checked + .slider {
+    background-color: var(--primary-color);
+  }
+  
+  input:focus + .slider {
+    box-shadow: 0 0 1px var(--primary-color);
+  }
+  
+  input:checked + .slider:before {
+    -webkit-transform: translateX(20px);
+    -ms-transform: translateX(20px);
+    transform: translateX(20px);
+  }