fix: webapp ntp set

Author: Times-Z

README.md

@@ -90,10 +90,10 @@ SmartClimate uses a custom partition table tailored for persistent storage, appl
 - [x] Uptime tracking (seconds to days format)
 - [x] Lightweight JSON API for system status and configuration
 - [x] Graphical user interface built with LVGL
+- [x] NTP-based time synchronization
 
 ## Roadmap
 
-- [ ] NTP-based time synchronization
 - [ ] UI theming & styling system
 - [ ] Internationalization (i18n) support
 - [ ] Better error feedback on failed Wi-Fi connection

main/webserver/html/css/style.css

@@ -67,6 +67,22 @@ main {
   flex-direction: column;
 }
 
+input {
+  width: 100%;
+  padding: 8px;
+  border: 2px solid var(--border-color);
+  border-radius: 6px;
+  background-color: var(--container-bg);
+  color: var(--text-color);
+  font-size: 1rem;
+  margin-bottom: 10px;
+}
+
+input::placeholder {
+  color: rgba(255, 255, 255, 0.6);
+  font-style: italic;
+}
+
 button {
   padding: 0.8rem 1.2rem;
   font-size: 1rem;
@@ -116,10 +132,10 @@ button:active {
 
 .loader {
   display: none;
-  width: 40px;
-  height: 40px;
-  border: 4px solid rgba(255, 255, 255, 0.3);
-  border-top: 4px solid var(--accent-color);
+  width: 30px;
+  height: 30px;
+  border: 3px solid rgba(255, 255, 255, 0.3);
+  border-top: 3px solid var(--accent-color);
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
   margin: 1rem auto;

main/webserver/html/index.html

@@ -27,6 +27,15 @@ <h2>Wi-Fi Management</h2>
           <div id="wifi-loader" class="loader"></div>
           <div id="wifi-output" class="output-container"></div>
         </section>
+
+        <section id="ntp-section" class="container">
+          <h2>NTP Provider</h2>
+          <label for="ntp-input">NTP Server:</label>
+          <input type="text" id="ntp-input" placeholder="ex: pool.ntp.org" />
+          <button id="ntp-set-btn">Set NTP Server</button>
+          <div id="ntp-loader" class="loader"></div>
+          <div id="ntp-output" class="output-container"></div>
+        </section>
       </div>
     </main>
 

main/webserver/html/js/main.js

@@ -6,6 +6,10 @@ document.addEventListener("DOMContentLoaded", () => {
   const wifiOutput = document.getElementById("wifi-output");
   const statusLoader = document.getElementById("status-loader");
   const wifiLoader = document.getElementById("wifi-loader");
+  const ntpInput = document.getElementById("ntp-input");
+  const ntpOutput = document.getElementById("ntp-output");
+  const ntpLoader = document.getElementById("ntp-loader");
+  const ntpSetBtn = document.getElementById("ntp-set-btn");
 
   const showLoader = (loader) => {
     loader.style.display = "block";
@@ -15,6 +19,18 @@ document.addEventListener("DOMContentLoaded", () => {
     loader.style.display = "none";
   };
 
+  const disableButton = (button) => {
+    button.disabled = true;
+    button.style.opacity = "0.6";
+    button.innerText = "Loading...";
+  };
+
+  const enableButton = (button, originalText) => {
+    button.disabled = false;
+    button.style.opacity = "1";
+    button.innerText = originalText;
+  };
+
   const showOutput = (section, html, loader) => {
     hideLoader(loader);
     section.innerHTML = html;
@@ -23,9 +39,7 @@ document.addEventListener("DOMContentLoaded", () => {
   const handleApi = (url, formatter, outputSection, button, loader) => {
     showLoader(loader);
     outputSection.innerHTML = "";
-    button.disabled = true;
-    button.style.opacity = "0.6";
-    button.innerText = "Loading...";
+    disableButton(button);
 
     fetch(url)
       .then((res) => res.json())
@@ -44,9 +58,7 @@ document.addEventListener("DOMContentLoaded", () => {
       })
       .finally(() => {
         hideLoader(loader);
-        button.disabled = false;
-        button.style.opacity = "1";
-        button.innerText = button.dataset.originalText;
+        enableButton(button, button.dataset.originalText);
       });
   };
 
@@ -95,6 +107,38 @@ document.addEventListener("DOMContentLoaded", () => {
     `;
   };
 
+  const handleNtpUpdate = () => {
+    const ntpDomain = ntpInput.value.trim();
+    if (!ntpDomain) {
+      ntpOutput.innerHTML = `<p style="color: var(--error-color);">⚠️ Please enter an NTP server domain.</p>`;
+      return;
+    }
+
+    disableButton(ntpSetBtn);
+    showLoader(ntpLoader);
+    ntpOutput.innerHTML = "";
+
+    fetch("/api/v1/ntp/set", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ ntp_domain: ntpDomain }),
+    })
+      .then((res) => res.json())
+      .then((data) => {
+        if (!data || data.success === false) {
+          throw new Error(data.message || "Unknown error");
+        }
+        ntpOutput.innerHTML = `<p style="color: #4CAF50;">✅ NTP server updated successfully to <strong>${ntpDomain}</strong></p>`;
+      })
+      .catch((err) => {
+        ntpOutput.innerHTML = `<p style="color: var(--error-color);">⚠️ ${err.message}</p>`;
+      })
+      .finally(() => {
+        hideLoader(ntpLoader);
+        enableButton(ntpSetBtn, "Set NTP Server");
+      });
+  };
+
   document.addEventListener("click", (e) => {
     if (e.target.classList.contains("connect-btn")) {
       const ssid = decodeURIComponent(e.target.dataset.ssid);
@@ -147,4 +191,7 @@ document.addEventListener("DOMContentLoaded", () => {
       wifiBtn,
       wifiLoader
     );
+
+  ntpSetBtn.dataset.originalText = ntpSetBtn.innerText;
+  ntpSetBtn.onclick = handleNtpUpdate;
 });