From 08e34736703b79cad9d1b36b5b54d3bb08430e75 Mon Sep 17 00:00:00 2001
From: Gabriel <gabriel.richoux@ereca-france.com>
Date: Wed, 11 Jun 2025 14:14:55 +0200
Subject: [PATCH] Finalisation jauge alcool

---
 static/stocks.html | 211 ++++++++++++++++++++++++---------------------
 1 file changed, 115 insertions(+), 96 deletions(-)
diff --git a/static/stocks.html b/static/stocks.html
index 06120e7..6499367 100644
--- a/static/stocks.html
+++ b/static/stocks.html
@@ -1,118 +1,137 @@
 <!DOCTYPE html>
 <html lang="fr">
-<head>
-  <meta charset="UTF-8">
-  <title>Stock alcool</title>
-  <script src="https://cdn.jsdelivr.net/npm/gaugeJS/dist/gauge.min.js"></script>
-  <style>
-    html, body {
-      margin: 0;
-      padding: 0;
-      height: 100%;
-      overflow: hidden;
-      font-family: sans-serif;
-      display: flex;
-      flex-direction: column;
-    }
+    <head>
+        <meta charset="UTF-8">
+        <title>Stock alcool</title>
+        <script src="https://cdn.jsdelivr.net/npm/gaugeJS/dist/gauge.min.js"></script>
+        <style>
+html, body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    overflow: hidden;
+    font-family: sans-serif;
+    display: flex;
+    flex-direction: column;
+}
 
     #gauge-container {
-      flex: 1;
-      position: relative;
-      width: 100%;
-      height: 100%;
+        flex: 1;
+        position: relative;
+        width: 100%;
+        height: 100%;
     }
 
     #gauge-canvas {
-      width: 100%;
-      height: 100%;
-      display: block;
+        width: 100%;
+        height: 100%;
+        display: block;
     }
 
     #value {
-      position: absolute;
-      bottom: 1rem;
-      left: 50%;
-      transform: translateX(-50%);
-      font-size: 2rem;
-      background: rgba(255,255,255,0.7);
-      padding: 0.5rem 1rem;
-      border-radius: 0.5rem;
+        position: absolute;
+        bottom: 1rem;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 2rem;
+        background: rgba(255,255,255,0.7);
+        padding: 0.5rem 1rem;
+        border-radius: 0.5rem;
     }
-  </style>
-</head>
-<body>
+        </style>
+    </head>
+    <body>
 
-  <div id="gauge-container">
-    <canvas id="gauge-canvas"></canvas>
-    <div id="value">Chargement…</div>
-  </div>
+        <div id="gauge-container">
+            <canvas id="gauge-canvas"></canvas>
+            <div id="value">Chargement…</div>
+        </div>
 
-  <script>
-      
-    const DATA_URL = 'https://cloud.richoux.me/f/5c1f3252fbe44f5f9fa1/?dl=1';
+        <script>
 
-    const opts = {
-      angle: 0.15,          
-      lineWidth: 0.44,      
-      radiusScale: 1,
-      pointer: {
-        length: 0.6,
-        strokeWidth: 0.035,
-        color: '#000'
-      },
-      limitMax: false,
-      limitMin: false,
-      colorStart: '#4caf50',
-      colorStop: '#4caf50',
-      strokeColor: '#EEEEEE',
-      generateGradient: false,
-      highDpiSupport: true
-    };
+            const DATA_URL = 'https://cloud.richoux.me/seafhttp/f/2582b44ba453453f8793/?op=view'
 
-    const container = document.getElementById('gauge-container');
-    const canvas = document.getElementById('gauge-canvas');
+            const opts = {
+                angle: 0.15,          
+                lineWidth: 0.44,      
+                radiusScale: 1,
+                pointer: {
+                    length: 0.6,
+                    strokeWidth: 0.035,
+                    color: '#000'
+                },
+                limitMax: false,
+                limitMin: false,
+                colorStart: '#4caf50',
+                colorStop: '#4caf50',
+                strokeColor: '#EEEEEE',
+                generateGradient: false,
+                highDpiSupport: true
+            };
 
-    let gauge;
-    function initGauge() {
-      const { width, height } = container.getBoundingClientRect();
-      canvas.width  = width  * window.devicePixelRatio;
-      canvas.height = height * window.devicePixelRatio;
-      canvas.style.width  = width  + 'px';
-      canvas.style.height = height + 'px';
+            const container = document.getElementById('gauge-container');
+            const canvas = document.getElementById('gauge-canvas');
 
-      gauge = new Gauge(canvas).setOptions(opts);
-      gauge.maxValue = 100;
-      gauge.setMinValue(0);
-      gauge.animationSpeed = 32;
-    }
+            let gauge;
+            function initGauge() {
+                const { width, height } = container.getBoundingClientRect();
+                canvas.width  = width  * window.devicePixelRatio;
+                canvas.height = height * window.devicePixelRatio;
+                canvas.style.width  = width  + 'px';
+                canvas.style.height = height + 'px';
 
-    async function updateGauge() {
-      try {
-        const res = await fetch(DATA_URL, { cache: 'no-store' });
-        if (!res.ok) throw new Error(res.status);
-        const text = await res.text();
-        const pct = Math.min(100, Math.max(0, parseFloat(text)));
-        gauge.set(pct);
-        document.getElementById('value').textContent = pct.toFixed(1) + ' %';
-      } catch (e) {
-        document.getElementById('value').textContent = 'Erreur de chargement';
-        console.error(e);
-      }
-    }
+                gauge = new Gauge(canvas).setOptions(opts);
+                gauge.maxValue = 100;
+                gauge.setMinValue(0);
+                gauge.animationSpeed = 32;
+            }
+            function updateGaugeColor(value) {
+                const color = getColorForValue(value);
+                opts.colorStart = color;
+                opts.colorStop = color;
+                gauge.setOptions(opts);
+            }
 
-    window.addEventListener('load', () => {
-      initGauge();
-      updateGauge();
-      setInterval(updateGauge, 30_000);
-    });
+            function getColorForValue(value) {
+                if (value < 20) {
+                    return '#f44336'; // Rouge
+                } else if (value <= 80) {
+                    return '#ff9800'; // Orange/Jaune
+                } else {
+                    return '#4caf50'; // Vert
+                }
+            }
 
-    window.addEventListener('resize', () => {
-      const last = gauge ? gauge.value : 0;
-      initGauge();
-      gauge.set(last);
-    });
-  </script>
+            async function updateGauge() {
+                try {
+                    const res = await fetch(DATA_URL, { cache: 'no-store' });
+                    if (!res.ok) throw new Error(res.status);
+                    const text = await res.text();
+                    const pct = Math.min(100, Math.max(0, parseFloat(text)));
+                    updateGaugeColor(pct);
+                    gauge.set(pct);
+                    document.getElementById('value').textContent = pct.toFixed(1) + ' %';
+                } catch (e) {
+                    document.getElementById('value').textContent = 'Erreur de chargement';
+                    console.error(e);
+                }
+            }
 
-</body>
+            window.addEventListener('load', () => {
+                initGauge();
+                updateGauge();
+                setInterval(updateGauge, 30_000);
+            });
+
+            window.addEventListener('resize', () => {
+                const last = gauge ? gauge.value : 0;
+                initGauge();
+                if (gauge && last !== undefined) {
+                    updateGaugeColor(last);
+                    gauge.set(last);
+                }
+            });
+        </script>
+
+    </body>
 </html>
-
