From b0da30133eafdd5f7418093c6099551c4ae3f377 Mon Sep 17 00:00:00 2001
From: KOWX712 <leecc0503@gmail.com>
Date: Mon, 9 Dec 2024 21:55:58 +0800
Subject: [PATCH] webui: add update toggle enable/disable

webui support for
https://github.com/backslashxx/bindhosts/issues/23
---
 module/webroot/index.html | 12 +++++-
 module/webroot/index.js   | 76 ++++++++++++++++++++++++---------
 module/webroot/styles.css | 88 +++++++++++++++++++++++++++++++++++++++
 3 files changed, 156 insertions(+), 20 deletions(-)

diff --git a/module/webroot/index.html b/module/webroot/index.html
index ff28210..2e86341 100644
--- a/module/webroot/index.html
+++ b/module/webroot/index.html
@@ -24,7 +24,17 @@
 			</button>
 		</div>
 		<div class="box" id="status-box">
-			<h2>Status</h2>
+			<div class="status">
+				<h2 id="status-header">Status</h2>
+				<div class="toggle-container">
+					<i id="update-icon" class="fa fa-download"></i>
+					<span id="update-text">Update</span>
+					<label class="toggle-switch">
+						<input type="checkbox" id="toggle-version" disabled>
+						<span class="slider round"></span>
+					</label>
+				</div>
+			</div>
 			<p id="status-text">Initializing...</p>
 		</div>
 		<div class="box">
diff --git a/module/webroot/index.js b/module/webroot/index.js
index c82b71a..381c964 100644
--- a/module/webroot/index.js
+++ b/module/webroot/index.js
@@ -11,6 +11,8 @@ const headerBlock = document.querySelector('.header-block');
 const header = document.querySelector('.header');
 const inputs = document.querySelectorAll('input');
 const focusClass = 'input-focused';
+const toggleContainer = document.querySelector('.toggle-container');
+const toggleVersion = document.getElementById('toggle-version');
 
 let clickCount = 0;
 let timeout;
@@ -42,6 +44,7 @@ async function loadFile(fileType) {
         await getCurrentMode();
         await updateStatusFromModuleProp();
         await loadVersionFromModuleProp();
+        checkUpdateStatus();
     } catch (error) {
         console.error(`Failed to load ${fileType} file: ${error}`);
     }
@@ -83,6 +86,20 @@ function updateVersion(versionText) {
     versionElement.textContent = versionText;
 }
 
+// Function to check module update status
+async function checkUpdateStatus() {
+    try {
+        const result = await execCommand("grep -q '^updateJson' /data/adb/modules/bindhosts/module.prop");
+        if (result.includes('updateJson')) {
+            toggleVersion.checked = false;
+        } else {
+            toggleVersion.checked = true;
+        }
+    } catch (error) {
+        console.error('Error checking update status:', error);
+    }
+}
+
 // Function to get the status from module.prop and update the status in the WebUI
 async function updateStatusFromModuleProp() {
     try {
@@ -233,26 +250,27 @@ document.getElementById("mode-btn").addEventListener("click", async () => {
 });
 
 // Event listener to enable developer option
-document.getElementById("status-box").addEventListener("click", async () => {
-    clickCount++;
-    clearTimeout(clickTimeout);
-
-    clickTimeout = setTimeout(() => {
-        clickCount = 0;
-    }, 2000);
-    if (clickCount === 5) {
-        clickCount = 0;
-        await checkDevOption();
-        if (!developerOption) {
-            try {
-                developerOption = true;
-                showPrompt("Developer option enabled", true);
-            } catch (error) {
-                console.error("Error enabling developer option:", error);
-                showPrompt("Error enabling developer option", false);
+document.getElementById("status-box").addEventListener("click", async (event) => {
+    if (!event.target.closest('.toggle-container')) {
+        clickCount++;
+        clearTimeout(clickTimeout);
+        clickTimeout = setTimeout(() => {
+            clickCount = 0;
+        }, 2000);
+        if (clickCount === 5) {
+            clickCount = 0;
+            await checkDevOption();
+            if (!developerOption) {
+                try {
+                    developerOption = true;
+                    showPrompt("Developer option enabled", true);
+                } catch (error) {
+                    console.error("Error enabling developer option:", error);
+                    showPrompt("Error enabling developer option", false);
+                }
+            } else {
+                showPrompt("Developer option already enabled", true);
             }
-        } else {
-            showPrompt("Developer option already enabled", true);
         }
     }
 });
@@ -295,6 +313,7 @@ async function updateModeSelection() {
 
 // function to open and close mode option
 function openOverlay(overlay) {
+    updateModeSelection();
     overlay.classList.add("active");
     document.body.style.overflow = "hidden";
 }
@@ -435,6 +454,25 @@ document.getElementById("reset-mode").addEventListener("click", () => {
     saveModeSelection("reset");
 });
 
+// Event listener for the toggle switch
+toggleContainer.addEventListener('click', async function() {
+    try {
+        toggleVersion.checked = !toggleVersion.checked;
+        const result = await execCommand("su -c 'sh /data/adb/modules/bindhosts/action.sh --toggle-updatejson'");
+        const lines = result.split("\n");
+        lines.forEach(line => {
+            if (line.includes("[+]")) {
+                showPrompt(line, true);
+            } else if (line.includes("[x]")) {
+                showPrompt(line, false);
+            }
+        });        
+        checkUpdateStatus();
+    } catch (error) {
+        console.error("Failed to execute action.sh", error);
+    }
+});
+
 // Initial load
 window.onload = () => {
     adjustHeaderForMMRL();
diff --git a/module/webroot/styles.css b/module/webroot/styles.css
index 999f2d7..280f0fd 100644
--- a/module/webroot/styles.css
+++ b/module/webroot/styles.css
@@ -103,10 +103,94 @@ body.input-focused {
     margin-bottom: 10px;
 }
 
+.status {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+}
+
 #status-text {
     font-size: 14px;
 }
 
+.toggle-container {
+    display: inline-flex;
+    align-items: center;
+    margin-left: auto;
+    background-color: #EFEFEF;
+    padding: 0 10px;
+    border-radius: 10px;
+    height: 38px;
+}
+
+#update-text {
+    font-size: 16px;
+    font-weight: bold;
+    padding-right: 7px;
+    padding-left: 5px;
+}
+
+#update-icon {
+    padding-top: 5px;
+    font-size: 20px;
+}
+
+.toggle-switch {
+    position: relative;
+    display: inline-block;
+    width: 40px;
+    height: 25px;
+}
+
+.toggle-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 19px;
+    width: 19px;
+    left: 3px;
+    bottom: 3px;
+    background-color: white;
+    transition: .4s;
+}
+
+input:checked + .slider {
+    background-color: #007bff;
+}
+
+input:focus + .slider {
+    box-shadow: 0 0 1px #007bff;
+}
+
+input:checked + .slider:before {
+    transform: translateX(15px);
+}
+
+.slider.round {
+    border-radius: 25px;
+}
+
+.slider.round:before {
+    border-radius: 50%;
+}
+
 .category-container {
     display: flex;
     align-items: center;
@@ -406,4 +490,8 @@ label {
         background-color: #232323;
         border: 1px solid #6E6E6E;
     }
+    
+    .toggle-container {
+        background-color: #676767;
+    }
 }
\ No newline at end of file