Refactor and organize code structure

.clang-format

@@ -1,4 +1,4 @@
 BasedOnStyle: LLVM
 IndentWidth: 4
-ColumnLimit: 100
+ColumnLimit: 120
 BreakBeforeBraces: Attach

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+    "files.associations": {
+        "*.module": "php",
+        "*.php": "php",
+        "cmath": "cpp"
+    }
+}

data/app.js

@@ -1,71 +1,83 @@
 async function fetchData() {
-    const response = await fetch('/read');
-    return await response.json()        
+  const response = await fetch("/read");
+  return await response.json();
 }
 async function updateUI(data) {
-    let temp, hum, rssi, devicename;
-    try {
-        const data = await fetchData();
+  let temp, hum, rssi, devicename;
+  try {
+    const data = await fetchData();
 
-        let tempValue, tempUnit;
-        if (data.display === 'c') {
-            tempValue = data.celsius.temperature;
-            tempUnit = 'C';
-        } else {
-            tempValue = data.fahrenheit.temperature;
-            tempUnit = 'F';
-        }
-        temp = `${tempValue.toFixed(1)}°${tempUnit}`;
-        hum = `${data.humidity.relative_perc.toFixed(1)}% RH`;
-        rssi = `RSSI: ${data.wifi.rssi} dBm`;
-        devicename = data.devicename;
-    } catch (error) {
-        console.error('Error fetching sensor data:', error);
-        temp = hum = rssi = devicename = 'Error';
+    let tempValue, tempUnit;
+    if (data.display === "c") {
+      tempValue = data.celsius.temperature;
+      tempUnit = "C";
+    } else {
+      tempValue = data.fahrenheit.temperature;
+      tempUnit = "F";
     }
-    document.getElementById('devicename').textContent = devicename;
-    document.getElementById('temperature').textContent = temp;
-    document.getElementById('humidity').textContent = hum;
-    document.getElementById('rssi').textContent = rssi;
-    setTimeout(updateUI, 5000);
+    temp = `${tempValue.toFixed(1)}°${tempUnit}`;
+    hum = `${data.humidity.relative_perc.toFixed(1)}% RH`;
+    rssi = `RSSI: ${data.wifi.rssi} dBm`;
+    devicename = data.devicename;
+  } catch (error) {
+    console.error("Error fetching sensor data:", error);
+    temp = hum = rssi = devicename = "Error";
+  }
+  document.getElementById("devicename").textContent = devicename;
+  document.getElementById("temperature").textContent = temp;
+  document.getElementById("humidity").textContent = hum;
+  document.getElementById("rssi").textContent = rssi;
+  setTimeout(updateUI, 5000);
 }
 
 async function showNotification(message, type) {
-    const notification = document.getElementById('notification');
-    notification.innerHTML = message;
-    notification.className = `notification ${type}`;
-    notification.style.display = 'block';
+  const notification = document.getElementById("notification");
+  notification.innerHTML = message;
+  notification.className = `notification ${type}`;
+  notification.style.display = "block";
 
-    setTimeout(() => { notification.style.display = 'none'; }, 10000);
+  setTimeout(() => {
+    notification.style.display = "none";
+  }, 10000);
 }
 
 async function loadSettings() {
-    try {
-        const settings = await fetchData();
+  try {
+    const settings = await fetchData();
+    const overlay = document.getElementById("loadingOverlay");
 
-        document.getElementById('devicename').value = settings.devicename;
-        document.getElementById('updateinterval').value = settings.updateinterval;
-        document.getElementById('tempoffset').value = settings.celsius.offset;
-        document.getElementById('humidityoffset').value = settings.humidity.relative_perc_offset;
-        document.getElementById('showfahrenheit').checked = settings.display === 'f';
-    } catch (error) {
-        console.error('Error loading settings:', error);
-    }
+    document.getElementById("devicename").value = settings.devicename;
+    document.getElementById("updateinterval").value = settings.updateinterval;
+    document.getElementById("tempoffset").value = settings.celsius.offset;
+    document.getElementById("humidityoffset").value =
+      settings.humidity.relative_perc_offset;
+    document.getElementById("showfahrenheit").checked =
+      settings.display === "f";
+    overlay.classList.add("hidden");
+  } catch (error) {
+    console.error("Error loading settings:", error);
+  }
 }
 
 async function saveSettings(formData) {
-    try {
-        const response = await fetch('/settings', { method: 'POST', body: formData });
-        const data = await response.json();
+  try {
+    const response = await fetch("/settings", {
+      method: "POST",
+      body: formData,
+    });
+    const data = await response.json();
 
-        if (data.status === "success") {
-            showNotification("Settings saved successfully!", "success");
-        } else if (data.status === "error" && data.errors.length > 0) {
-            showNotification("Errors: <ul><li>" + data.errors.join("</li><li>") + "</li></ul>", "error");
-        } else {
-            showNotification("Unexpected response from server", "error");
-        }
-    } catch (error) {
-        showNotification("Failed to save settings: " + error.message, "error");
+    if (data.status === "success") {
+      showNotification("Settings saved successfully!", "success");
+    } else if (data.status === "error" && data.errors.length > 0) {
+      showNotification(
+        "Errors: <ul><li>" + data.errors.join("</li><li>") + "</li></ul>",
+        "error"
+      );
+    } else {
+      showNotification("Unexpected response from server", "error");
     }
-}
+  } catch (error) {
+    showNotification("Failed to save settings: " + error.message, "error");
+  }
+}

data/index.html

@@ -1,32 +1,42 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Temperature Display</title>
-    <link rel="stylesheet" href="/css">
-    <link rel="icon" type="image/svg+xml" href="/favicon.ico">
-</head>
-<body class="main">
+    <link rel="stylesheet" href="/css" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+  </head>
+  <body class="main">
     <a href="/settings">
-        <svg class="settings-icon" version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-            <path d="m22.8 9.3h-2.3c-0.3 0-0.6-0.2-0.8-0.5-0.1-0.3 0-0.7 0.2-0.9l1.6-1.6q0.4-0.4 0.4-0.9 0-0.5-0.4-0.9l-2-2c-0.5-0.5-1.3-0.5-1.8 0l-1.6 1.6c-0.2 0.2-0.6 0.3-0.9 0.2-0.3-0.2-0.5-0.5-0.5-0.8v-2.3c0-0.6-0.6-1.2-1.3-1.2h-2.8c-0.7 0-1.3 0.6-1.3 1.2v2.3c0 0.3-0.2 0.6-0.5 0.8-0.3 0.1-0.7 0-0.9-0.2l-1.6-1.6c-0.5-0.5-1.3-0.5-1.8 0l-2 2q-0.4 0.4-0.4 0.9 0 0.5 0.4 0.9l1.6 1.6c0.2 0.2 0.3 0.6 0.2 0.9-0.2 0.3-0.5 0.5-0.8 0.5h-2.3c-0.6 0-1.2 0.6-1.2 1.3v2.8c0 0.7 0.6 1.3 1.2 1.3h2.3c0.3 0 0.6 0.2 0.8 0.5 0.1 0.3 0 0.7-0.2 0.9l-1.6 1.6q-0.4 0.4-0.4 0.9 0 0.5 0.4 0.9l2 2c0.5 0.5 1.3 0.5 1.8 0l1.6-1.6c0.2-0.2 0.6-0.3 0.9-0.2 0.3 0.2 0.5 0.5 0.5 0.8v2.3c0 0.6 0.6 1.2 1.3 1.2h2.8c0.7 0 1.3-0.6 1.3-1.2v-2.3c0-0.3 0.2-0.6 0.5-0.8 0.3-0.1 0.7 0 0.9 0.2l1.6 1.6c0.5 0.5 1.3 0.5 1.8 0l2-2q0.4-0.4 0.4-0.9 0-0.5-0.4-0.9l-1.6-1.6c-0.2-0.2-0.3-0.6-0.2-0.9 0.2-0.3 0.5-0.5 0.8-0.5h2.3c0.6 0 1.2-0.6 1.2-1.3v-2.8c0-0.7-0.6-1.3-1.2-1.3zm0.3 4.1c0 0.2-0.1 0.4-0.3 0.4h-2.3c-0.7 0-1.3 0.4-1.6 1.1-0.3 0.6-0.1 1.4 0.4 1.9l1.6 1.6c0.1 0.1 0.1 0.3 0 0.4l-2.1 2.1c-0.1 0.1-0.3 0.1-0.4 0l-1.6-1.6c-0.5-0.5-1.3-0.7-1.9-0.4-0.7 0.3-1.1 0.9-1.1 1.6v2.3c0 0.2-0.2 0.3-0.4 0.3h-2.8c-0.2 0-0.4-0.1-0.4-0.3v-2.3c0-0.7-0.4-1.3-1.1-1.6q-0.3-0.1-0.6-0.1c-0.5 0-0.9 0.1-1.3 0.5l-1.6 1.6c-0.1 0.1-0.3 0.1-0.4 0l-2.1-2.1c-0.1-0.1-0.1-0.3 0-0.4l1.6-1.6c0.5-0.5 0.7-1.3 0.4-1.9-0.3-0.7-0.9-1.1-1.6-1.1h-2.3c-0.2 0-0.3-0.2-0.3-0.4v-2.8c0-0.2 0.1-0.4 0.3-0.4h2.3c0.7 0 1.3-0.4 1.6-1.1 0.3-0.6 0.1-1.4-0.4-1.9l-1.6-1.6c-0.1-0.1-0.1-0.3 0-0.4l2.1-2.1c0.1-0.1 0.3-0.1 0.4 0l1.6 1.6c0.5 0.5 1.3 0.7 1.9 0.4 0.7-0.3 1.1-0.9 1.1-1.6v-2.3c0-0.2 0.2-0.3 0.4-0.3h2.8c0.2 0 0.4 0.1 0.4 0.3v2.3c0 0.7 0.4 1.3 1.1 1.6 0.6 0.3 1.4 0.1 1.9-0.4l1.6-1.6c0.1-0.1 0.3-0.1 0.4 0l2.1 2.1c0.1 0.1 0.1 0.3 0 0.4l-1.6 1.6c-0.5 0.5-0.7 1.3-0.4 1.9 0.3 0.7 0.9 1.1 1.6 1.1h2.3c0.2 0 0.3 0.2 0.3 0.4z"/>
-            <path d="m12 8c-2.2 0-4 1.8-4 4 0 2.2 1.8 4 4 4 2.2 0 4-1.8 4-4 0-2.2-1.8-4-4-4zm0 7.1c-1.7 0-3.1-1.4-3.1-3.1 0-1.7 1.4-3.1 3.1-3.1 1.7 0 3.1 1.4 3.1 3.1 0 1.7-1.4 3.1-3.1 3.1z"/>
-        </svg>
+      <svg
+        class="settings-icon"
+        version="1.2"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        width="24"
+        height="24"
+      >
+        <path
+          d="m22.8 9.3h-2.3c-0.3 0-0.6-0.2-0.8-0.5-0.1-0.3 0-0.7 0.2-0.9l1.6-1.6q0.4-0.4 0.4-0.9 0-0.5-0.4-0.9l-2-2c-0.5-0.5-1.3-0.5-1.8 0l-1.6 1.6c-0.2 0.2-0.6 0.3-0.9 0.2-0.3-0.2-0.5-0.5-0.5-0.8v-2.3c0-0.6-0.6-1.2-1.3-1.2h-2.8c-0.7 0-1.3 0.6-1.3 1.2v2.3c0 0.3-0.2 0.6-0.5 0.8-0.3 0.1-0.7 0-0.9-0.2l-1.6-1.6c-0.5-0.5-1.3-0.5-1.8 0l-2 2q-0.4 0.4-0.4 0.9 0 0.5 0.4 0.9l1.6 1.6c0.2 0.2 0.3 0.6 0.2 0.9-0.2 0.3-0.5 0.5-0.8 0.5h-2.3c-0.6 0-1.2 0.6-1.2 1.3v2.8c0 0.7 0.6 1.3 1.2 1.3h2.3c0.3 0 0.6 0.2 0.8 0.5 0.1 0.3 0 0.7-0.2 0.9l-1.6 1.6q-0.4 0.4-0.4 0.9 0 0.5 0.4 0.9l2 2c0.5 0.5 1.3 0.5 1.8 0l1.6-1.6c0.2-0.2 0.6-0.3 0.9-0.2 0.3 0.2 0.5 0.5 0.5 0.8v2.3c0 0.6 0.6 1.2 1.3 1.2h2.8c0.7 0 1.3-0.6 1.3-1.2v-2.3c0-0.3 0.2-0.6 0.5-0.8 0.3-0.1 0.7 0 0.9 0.2l1.6 1.6c0.5 0.5 1.3 0.5 1.8 0l2-2q0.4-0.4 0.4-0.9 0-0.5-0.4-0.9l-1.6-1.6c-0.2-0.2-0.3-0.6-0.2-0.9 0.2-0.3 0.5-0.5 0.8-0.5h2.3c0.6 0 1.2-0.6 1.2-1.3v-2.8c0-0.7-0.6-1.3-1.2-1.3zm0.3 4.1c0 0.2-0.1 0.4-0.3 0.4h-2.3c-0.7 0-1.3 0.4-1.6 1.1-0.3 0.6-0.1 1.4 0.4 1.9l1.6 1.6c0.1 0.1 0.1 0.3 0 0.4l-2.1 2.1c-0.1 0.1-0.3 0.1-0.4 0l-1.6-1.6c-0.5-0.5-1.3-0.7-1.9-0.4-0.7 0.3-1.1 0.9-1.1 1.6v2.3c0 0.2-0.2 0.3-0.4 0.3h-2.8c-0.2 0-0.4-0.1-0.4-0.3v-2.3c0-0.7-0.4-1.3-1.1-1.6q-0.3-0.1-0.6-0.1c-0.5 0-0.9 0.1-1.3 0.5l-1.6 1.6c-0.1 0.1-0.3 0.1-0.4 0l-2.1-2.1c-0.1-0.1-0.1-0.3 0-0.4l1.6-1.6c0.5-0.5 0.7-1.3 0.4-1.9-0.3-0.7-0.9-1.1-1.6-1.1h-2.3c-0.2 0-0.3-0.2-0.3-0.4v-2.8c0-0.2 0.1-0.4 0.3-0.4h2.3c0.7 0 1.3-0.4 1.6-1.1 0.3-0.6 0.1-1.4-0.4-1.9l-1.6-1.6c-0.1-0.1-0.1-0.3 0-0.4l2.1-2.1c0.1-0.1 0.3-0.1 0.4 0l1.6 1.6c0.5 0.5 1.3 0.7 1.9 0.4 0.7-0.3 1.1-0.9 1.1-1.6v-2.3c0-0.2 0.2-0.3 0.4-0.3h2.8c0.2 0 0.4 0.1 0.4 0.3v2.3c0 0.7 0.4 1.3 1.1 1.6 0.6 0.3 1.4 0.1 1.9-0.4l1.6-1.6c0.1-0.1 0.3-0.1 0.4 0l2.1 2.1c0.1 0.1 0.1 0.3 0 0.4l-1.6 1.6c-0.5 0.5-0.7 1.3-0.4 1.9 0.3 0.7 0.9 1.1 1.6 1.1h2.3c0.2 0 0.3 0.2 0.3 0.4z"
+        />
+        <path
+          d="m12 8c-2.2 0-4 1.8-4 4 0 2.2 1.8 4 4 4 2.2 0 4-1.8 4-4 0-2.2-1.8-4-4-4zm0 7.1c-1.7 0-3.1-1.4-3.1-3.1 0-1.7 1.4-3.1 3.1-3.1 1.7 0 3.1 1.4 3.1 3.1 0 1.7-1.4 3.1-3.1 3.1z"
+        />
+      </svg>
     </a>
     <div class="container">
-        <h2 id="devicename">Please wait&hellip;</h2>
-        <div id="temperature">--°</div>
-        <div id="humidity">--% RH</div>
-        <div id="rssi">RSSI: --</div>
+      <h2 id="devicename">Please wait&hellip;</h2>
+      <div id="temperature">--°</div>
+      <div id="humidity">--% RH</div>
+      <div id="rssi">RSSI: --</div>
     </div>
 
-
     <script src="/js"></script>
     <script>
-        document.addEventListener('DOMContentLoaded', () => {
-            updateUI();
-        });
+      document.addEventListener("DOMContentLoaded", () => {
+        updateUI();
+      });
     </script>
-</body>
-</html>
+  </body>
+</html>