Configurable API-location

Website/apiConnector.js

@@ -1,4 +1,23 @@
-const apiUri = "http://localhost:6531";
+let apiUri = `http://${window.location.host.split(':')[0]}:6531`
+
+if(getCookie("apiUri") != ""){
+    apiUri = getCookie("apiUri");
+}
+function getCookie(cname) {
+    let name = cname + "=";
+    let decodedCookie = decodeURIComponent(document.cookie);
+    let ca = decodedCookie.split(';');
+    for(let i = 0; i < ca.length; i++) {
+        let c = ca[i];
+        while (c.charAt(0) == ' ') {
+            c = c.substring(1);
+        }
+        if (c.indexOf(name) == 0) {
+            return c.substring(name.length, c.length);
+        }
+    }
+    return "";
+}
 
 async function GetData(uri){
     let request = await fetch(uri, {

Website/index.html

@@ -82,6 +82,8 @@
   <settingstab id="settingstab">
     <span class="title">Download Location:</span>
     <span id="downloadLocation"></span>
+    <span class="title">API-URI</span>
+    <label for="settingApiUri"></label><input placeholder="https://" type="text" id="settingApiUri">
     <komga-settings>
       <span class="title">Komga</span>
       <div>Configured: <span id="komgaConfigured">✅❌</span></div>
@@ -89,7 +91,7 @@
       <label for="komgaUsername"></label><input placeholder="Username" id="komgaUsername" type="text">
       <label for="komgaPassword"></label><input placeholder="Password" id="komgaPassword" type="password">
       <div><label for="komgaUpdateTime" style="margin-right: 5px;">Update Time</label><input id="komgaUpdateTime" type="time" value="00:01:00" step="10"></div>
-      <input type="submit" value="Update" onclick="UpdateSettingsClick()">
+      <input type="submit" value="Update" onclick="UpdateKomgaSettings()">
     </komga-settings>
   </settingstab>
   

Website/interaction.js

@@ -45,6 +45,7 @@ const settingKomgaUser = document.querySelector("#komgaUsername");
 const settingKomgaPass = document.querySelector("#komgaPassword");
 const settingKomgaTime = document.querySelector("#komgaUpdateTime");
 const settingKomgaConfigured = document.querySelector("#komgaConfigured");
+const settingApiUri = document.querySelector("#settingApiUri");
 
 
 settingsCog.addEventListener("click", () => OpenSettings());
@@ -53,6 +54,18 @@ document.querySelector("#blurBackgroundTaskPopup").addEventListener("click", ()
 document.querySelector("#blurBackgroundPublicationPopup").addEventListener("click", () => HidePublicationPopup());
 publicationDelete.addEventListener("click", () => DeleteTaskClick());
 publicationAdd.addEventListener("click", () => AddTaskClick());
+settingApiUri.addEventListener("keypress", (event) => {
+    if(event.key === "Enter"){
+        apiUri = settingApiUri.value;
+        setTimeout(() => GetSettingsClick(), 100);
+        document.cookie = `apiUri=${apiUri};`;
+    }
+});
+searchPublicationQuery.addEventListener("keypress", (event) => {
+    if(event.key === "Enter"){
+        NewSearch();
+    }
+});
 
 let availableConnectors;
 GetAvailableControllers()
@@ -66,11 +79,6 @@ GetAvailableControllers()
         })
     );
 
-searchPublicationQuery.addEventListener("keypress", (event) => {
-   if(event.key === "Enter"){
-       NewSearch();
-   } 
-});
 
 function NewSearch(){
     //Disable inputs
@@ -210,10 +218,13 @@ function OpenSettings(){
 }
 
 function GetSettingsClick(){
+    settingApiUri.value = "";
     settingKomgaUrl.value = "";
     settingKomgaUser.value = "";
     settingKomgaPass.value = "";
     
+    settingApiUri.placeholder = apiUri;
+    
     GetSettings().then(json => {
         settingDownloadLocation.innerText = json.downloadLocation;
         if(json.komga != null)
@@ -228,7 +239,7 @@ function GetSettingsClick(){
     });
 }
 
-function UpdateSettingsClick(){
+function UpdateKomgaSettings(){
     var auth = utf8_to_b64(`${settingKomgaUser.value}:${settingKomgaPass.value}`);
     console.log(auth);
     UpdateSettings("", settingKomgaUrl.value, auth);

Website/style.css

@@ -132,6 +132,13 @@ settingstab > * {
     margin: 0 20px;
 }
 
+settingstab input {
+    padding: 3px;
+    border-radius: 3px;
+    border: 0;
+    margin: 2px 20px;
+}
+
 settingstab .title {
     font-size: 14pt;
     font-weight: bolder;
@@ -145,14 +152,8 @@ komga-settings {
     flex-wrap: nowrap;
 }
 
-komga-settings > * {
-    margin: 2px 0;
-}
-
 komga-settings input {
-    padding: 3px;
-    border-radius: 3px;
-    border: 0;
+    margin: 2px 0;
 }
 
 #addPublication {