From f5ebaa676eb24ddd9fad98c4f7fb7eb2e8d659da Mon Sep 17 00:00:00 2001
From: Sam Hos <sam.hos@hva.nl>
Date: Wed, 27 Mar 2024 20:48:24 +0100
Subject: [PATCH] GaugeGroup class creation

---
 web/new website/GaugGroup.js | 41 ++++++++++++++++++++++++++++++++++++
 web/new website/gauge.js     |  9 --------
 2 files changed, 41 insertions(+), 9 deletions(-)
 create mode 100644 web/new website/GaugGroup.js
 delete mode 100644 web/new website/gauge.js

diff --git a/web/new website/GaugGroup.js b/web/new website/GaugGroup.js
new file mode 100644
index 0000000..47434ef
--- /dev/null
+++ b/web/new website/GaugGroup.js	
@@ -0,0 +1,41 @@
+class GaugeGroup {
+    constructor(nodeId, gaugesCount) {
+        this.nodeId = nodeId;
+        this.gaugesCount = gaugesCount;
+        this.maxGaugeValue = 100; // Maximum value the gauge can display
+
+        // Create a new div element
+        this.element = document.createElement("div");
+        this.element.className = "gaugeGroup";
+
+        // Set the HTML of the new div
+        this.element.innerHTML = `
+            <h2 class="groupTitle">Gauge Group for Node ${this.nodeId}</h2>
+            <div class="Node">
+                ${Array(this.gaugesCount).fill().map((_, i) => `
+                    <div class="Sensorvalues">
+                        <div id="gaugeContainer${this.nodeId}_${i+1}" class="gaugeContainer">
+                            <img src="gauge.png" class="gaugeImage">
+                            <div id="gaugeValue${this.nodeId}_${i+1}" class="gaugeValue"></div>
+                            <div id="needle${this.nodeId}_${i+1}" class="needle"></div>
+                            <div id="gaugeText${this.nodeId}_${i+1}" class="gaugeText">0</div>
+                            <div class="gaugeCover"></div>
+                        </div>
+                    </div>
+                `).join('')}
+            </div>
+        `;
+
+        // Append the new div to the body
+        document.body.appendChild(this.element);
+    }
+
+    updateGauge(gaugeId, value) {
+        const needle = document.getElementById(`needle${this.nodeId}_${gaugeId}`);
+        const gaugeText = document.getElementById(`gaugeText${this.nodeId}_${gaugeId}`);
+        const rotationDegree = ((value / this.maxGaugeValue) * 180) - 90; // Convert value to degree (-90 to 90)
+
+        needle.style.transform = `rotate(${rotationDegree}deg)`;
+        gaugeText.textContent = value; // Update the text
+    }
+}
\ No newline at end of file
diff --git a/web/new website/gauge.js b/web/new website/gauge.js
deleted file mode 100644
index 5a6e9cc..0000000
--- a/web/new website/gauge.js	
+++ /dev/null
@@ -1,9 +0,0 @@
-function updateGauge(gaugeId, value) {
-    const needle = document.getElementById(`needle${gaugeId}`);
-    const gaugeText = document.getElementById(`gaugeText${gaugeId}`);
-    const maxGaugeValue = 100; // Maximum value the gauge can display
-    const rotationDegree = ((value / maxGaugeValue) * 180) - 90; // Convert value to degree (-90 to 90)
-
-    needle.style.transform = `rotate(${rotationDegree}deg)`;
-    gaugeText.textContent = value; // Update the text
-}
\ No newline at end of file