initial commit

static/script.js

@@ -0,0 +1,92 @@
+var toggleStatus = true; // Initial value of the toggle status
+
+// Initialize the indicator and toggleStatus values using an API request
+fetch('/get-status')
+    .then(response => response.json())
+    .then(data => {
+        updateIndicator(data.isRoutineRunning);
+        toggleStatus = data.isRoutineRunning;
+        updateToggleButton();
+    })
+    .catch(error => {
+        // Handle error if the request fails
+        console.error("Failed to retrieve graph update status:", error);
+    });
+
+function fetchToggleUpdates() {
+    // Fetch action based on the toggle status
+    var action = toggleStatus ? 'enable' : 'disable';
+
+    fetch('/toggle-updates')
+        .then(response => {
+            if (response.ok) {
+                toggleStatus = !toggleStatus; // Reverse the toggle status
+                updateToggleButton();
+                if (toggleStatus) {
+                    alert("Graph updates enabled.");
+                } else {
+                    alert("Graph updates disabled.");
+                }
+            } else {
+                alert("Failed to toggle graph updates.");
+            }
+            return response.json(); // Parse the response as JSON
+        })
+        .then(data => {
+            toggleStatus = data.isRoutineRunning;
+            updateIndicator(data.isRoutineRunning); // Update the indicator based on the returned value
+        });
+}
+
+function updateToggleButton() {
+    var toggleButton = document.getElementById("toggleButton");
+
+    if (toggleStatus) {
+        toggleButton.textContent = "Disable Graph Updates";
+        toggleButton.style.backgroundColor = "#007bff";
+    } else {
+        toggleButton.textContent = "Enable Graph Updates";
+        toggleButton.style.backgroundColor = "#dc3545";
+    }
+}
+
+function updateIndicator(isRunning) {
+    var indicator = document.getElementById("indicator");
+
+    if (isRunning) {
+        indicator.classList.add("green");
+        indicator.classList.remove("red");
+    } else {
+        indicator.classList.add("red");
+        indicator.classList.remove("green");
+    }
+}
+
+function disableButtons() {
+    document.getElementById("resetButton").disabled = true;
+    document.getElementById("toggleButton").disabled = true;
+}
+
+function enableButtons() {
+    document.getElementById("resetButton").disabled = false;
+    document.getElementById("toggleButton").disabled = false;
+}
+
+document.getElementById("resetButton").onclick = function () {
+    alert("Graph reset initiated.");
+    disableButtons(); // Disable buttons when the request is initiated
+    fetch('/reset-graph').then(response => {
+        if (response.ok) {
+            alert("Graph reset OK.");
+        } else {
+            alert("Failed to initiate graph reset.");
+        }
+        enableButtons(); // Enable buttons when the request is completed
+    });
+};
+
+document.getElementById("toggleButton").onclick = function () {
+    fetchToggleUpdates();
+};
+
+updateToggleButton();

static/style.css

@@ -0,0 +1,54 @@
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background-color: #f4f4f4;
+}
+
+.container {
+    text-align: center;
+}
+
+h1 {
+    margin-bottom: 20px;
+}
+
+.buttons {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+}
+
+button {
+    padding: 10px 20px;
+    font-size: 16px;
+    color: white;
+    background-color: #007bff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+button:hover {
+    background-color: #0056b3;
+}
+
+#indicator {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    margin-left: 10px;
+}
+
+#indicator.green {
+    background-color: green;
+}
+
+#indicator.red {
+    background-color: red;
+}