auto

energychain · Sep 18, 2024 · 4770632 · 4770632
1 parent bc75a30
commit 4770632
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 38 deletions.
diff --git a/co2ampel.embed.html b/co2ampel.embed.html
@@ -9,13 +9,7 @@
 <body>
     <style>
         footer {
-            margin-top:50px;
-        }
-        .header {
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
-            padding: 20px 0;
-            margin-bottom: 50px;
-            background-color: #fae0c5;
+            margin-top:15px;
         }
         .ampel {
             width: 100px;
@@ -54,12 +48,23 @@
     <script src="https://cdn.jsdelivr.net/npm/moment@^2"></script>
     <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@^1"></script>    
     <div class="container">
-        <div class="card">
+        <div class="card h-100">
             <div class="card-header">
                 <h1 class="text-center" id="headerTitle">CO<sub>2</sub> Ampel - Stromverbrauch</h1>
                 <h2 class="text-center text-muted" id="cityName">&nbsp;</h2>
             </div>
-            <div class="card-body">
+            <div class="card-body h-100" id="appinit" style="min-height:350px;">
+                    Wie lautet Deine Postleizahl (nur Deutschland)?
+                    <form id="zipInputForm">
+                        <div class="input-group"><input class="form-control" type="text" id="reqZip"/>
+                            <button class="btn btn-dark" type="submit">                            
+                                <svg fill="#FFFFFF" height="25px" width="25px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512.002 512.002" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <g> <circle cx="288.498" cy="402.417" r="7.021"></circle> <circle cx="276.089" cy="420.54" r="7.021"></circle> <circle cx="271.027" cy="395.397" r="7.022"></circle> <path d="M400.197,233.866c12.327,0,22.356-10.029,22.356-22.356c0-12.326-10.029-22.355-22.356-22.355h-23.084V93.21h23.084 c12.327,0,22.356-10.029,22.356-22.356c0-12.326-10.029-22.355-22.356-22.355h-23.084v-3.648C377.113,20.12,356.994,0,332.262,0 H179.746c-24.731,0-44.851,20.121-44.851,44.851V48.5h-23.09c-12.327,0-22.356,10.029-22.356,22.355 c0,12.327,10.029,22.356,22.356,22.356h23.09v95.945h-23.09c-12.327,0-22.356,10.029-22.356,22.355 c0,12.327,10.029,22.356,22.356,22.356h23.09v95.945h-23.09c-12.327,0-22.356,10.029-22.356,22.355 c0,12.327,10.029,22.356,22.356,22.356h23.09v92.628c0,24.73,20.12,44.851,44.851,44.851h152.516 c24.731,0,44.851-20.121,44.851-44.851v-92.629h23.084c12.327,0,22.356-10.029,22.356-22.356 c0-12.326-10.029-22.355-22.356-22.355h-23.084v-95.945H400.197z M377.113,64.33h23.084c3.598,0,6.526,2.927,6.526,6.525 c0,3.599-2.927,6.526-6.526,6.526h-23.084V64.33z M377.113,204.985h23.084c3.598,0,6.526,2.927,6.526,6.525 c0,3.599-2.927,6.526-6.526,6.526h-23.084V204.985z M134.895,358.693h-23.09c-3.598,0-6.526-2.927-6.526-6.526 c0-3.598,2.927-6.525,6.526-6.525h23.09V358.693z M134.895,218.036h-23.09c-3.598,0-6.526-2.927-6.526-6.526 c0-3.598,2.927-6.525,6.526-6.525h23.09V218.036z M134.895,77.38h-23.09c-3.598,0-6.526-2.927-6.526-6.526 c0-3.598,2.927-6.525,6.526-6.525h23.09V77.38z M361.284,467.149c0,16.002-13.02,29.021-29.021,29.021H179.746 c-16.002,0-29.021-13.019-29.021-29.021V44.851c0-16.003,13.019-29.021,29.021-29.021h152.516 c16.002,0,29.021,13.02,29.021,29.021V467.149z M400.197,345.642c3.598,0,6.526,2.927,6.526,6.525 c0,3.599-2.927,6.526-6.526,6.526h-23.084v-13.051H400.197z"></path> <circle cx="276.089" cy="151.125" r="7.021"></circle> <circle cx="271.027" cy="125.981" r="7.022"></circle> <circle cx="288.498" cy="133.002" r="7.021"></circle> <path d="M305.913,60.039h-99.815c-11.991,0-21.745,9.754-21.745,21.744c0,9.411,6.021,17.422,14.404,20.443 c-2.708,7.012-4.121,14.495-4.121,22.118c0,33.838,27.529,61.366,61.366,61.366c33.838,0,61.367-27.529,61.367-61.366 c0-7.624-1.412-15.106-4.12-22.116c8.386-3.019,14.408-11.031,14.408-20.445C327.657,69.794,317.902,60.039,305.913,60.039z M256.002,169.881c-25.109,0-45.536-20.428-45.536-45.536c0-7.294,1.751-14.406,5.052-20.816h80.97 c3.301,6.41,5.052,13.522,5.052,20.816C301.539,149.453,281.111,169.881,256.002,169.881z M305.913,87.699h-99.815 c-3.262,0-5.915-2.653-5.915-5.915c0-3.261,2.654-5.914,5.915-5.914h99.815c3.262,0,5.914,2.653,5.914,5.914 S309.174,87.699,305.913,87.699z"></path> <path d="M302.713,29.549h-93.418c-24.731,0-44.851,20.121-44.851,44.851v363.2c0,24.73,20.12,44.851,44.851,44.851h93.418 c24.731,0,44.851-20.121,44.851-44.851V74.4C347.564,49.67,327.445,29.549,302.713,29.549z M331.735,437.6 c0,16.002-13.02,29.021-29.021,29.021h-93.418c-16.002,0-29.021-13.019-29.021-29.021V74.4c0-16.002,13.019-29.021,29.021-29.021 h93.418c16.002,0,29.021,13.018,29.021,29.021V437.6z"></path> <path d="M305.913,329.455h-99.815c-11.991,0-21.745,9.754-21.745,21.744c0,9.411,6.021,17.422,14.404,20.443 c-2.708,7.01-4.121,14.495-4.121,22.12c0,33.837,27.529,61.366,61.366,61.366c33.838,0,61.367-27.529,61.367-61.366 c0-7.624-1.412-15.107-4.12-22.117c8.386-3.019,14.408-11.031,14.408-20.444C327.657,339.209,317.902,329.455,305.913,329.455z M256.002,439.297c-25.109,0-45.536-20.428-45.536-45.536c0-7.294,1.751-14.406,5.052-20.816h80.97 c3.301,6.41,5.052,13.522,5.052,20.816C301.539,418.869,281.111,439.297,256.002,439.297z M305.913,357.115h-99.815 c-3.262,0-5.915-2.653-5.915-5.915c0-3.261,2.654-5.914,5.915-5.914h99.815c3.262,0,5.914,2.653,5.914,5.914 C311.827,354.461,309.174,357.115,305.913,357.115z"></path> <path d="M305.913,194.748h-99.815c-11.991,0-21.745,9.754-21.745,21.745c0,9.411,6.021,17.422,14.404,20.443 c-2.708,7.012-4.121,14.495-4.121,22.12c0,33.837,27.529,61.366,61.366,61.366c33.838,0,61.367-27.529,61.367-61.366 c0-7.624-1.412-15.106-4.12-22.117c8.386-3.019,14.408-11.031,14.408-20.445C327.657,204.502,317.902,194.748,305.913,194.748z M256.002,304.59c-25.109,0-45.536-20.428-45.536-45.536c0-7.294,1.751-14.406,5.052-20.816h80.97 c3.301,6.41,5.052,13.522,5.052,20.816C301.539,284.162,281.111,304.59,256.002,304.59z M305.913,222.407h-99.815 c-3.262,0-5.915-2.653-5.915-5.915c0-3.261,2.654-5.915,5.915-5.915h99.815c3.262,0,5.914,2.653,5.914,5.915 C311.827,219.753,309.174,222.407,305.913,222.407z"></path> <circle cx="276.089" cy="285.832" r="7.021"></circle> <circle cx="271.027" cy="260.688" r="7.022"></circle> <circle cx="288.498" cy="267.709" r="7.021"></circle> </g> </g> </g> </g></svg>
+                                </svg>
+                            </button>
+                        </div>
+                    </form>
+            </div>
+            <div class="card-body" id="appbody" style="display:none;min-height:350px;">
                 <div class="row">
                     <div class="col-md-6">
                         <div class="ampel">
@@ -82,22 +87,18 @@ <h2 class="text-center text-muted" id="cityName">&nbsp;</h2>
                     </select>
                     </span></div>
             </div>
-        </div>
-    </div>
-
-
-    <footer class="text-center py-4">
-        <div class="container">
-            <div class="row">
-                <div class="col">
-                    <p class="text-muted my-2" data-bs-toggle="tooltip" data-bss-tooltip data-bs-placement="bottom"> Daten: <a href="https://gruenstromindex.de/" target="_blank">GrünstromIndex</p>
+            <div class="card-footer" id="initfooter">
+                <div class="row">
+                    <div class="col">
+                        <p class="text-muted" data-bs-toggle="tooltip" data-bss-tooltip data-bs-placement="bottom">Prognose: <a href="https://gruenstromindex.de/" target="_blank">GrünstromIndex</a></p>
+                    </div>
+                    <div class="col">
+                        <p>Lizenz: <a class="text-end float-none" href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a></p>    
+                    </div>
                 </div>
-                <div class="col align-items-lg-end">Lizenz:<a class="text-end float-none" href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a></div>
             </div>
         </div>
-        <div id="rendition"></div>
-    </footer>
-
+    </div>             
     <script src="./co2ampel.embed.js"></script>
 </body>
 </html>
diff --git a/co2ampel.embed.js b/co2ampel.embed.js
@@ -1,5 +1,8 @@
 $(document).ready(function() {
-//    Chart.register(ChartjsAdapterMoment);
+    $('#zipInputForm').submit(function(e) {
+        e.preventDefault();        
+        init($('#reqZip').val());
+    });
     moment.locale('de');
     function getLocation() {
     return new Promise((resolve, reject) => {
@@ -12,7 +15,8 @@ $(document).ready(function() {
 }
 
     function askForPostalCode() {
-        return prompt("Bitte geben Sie Ihre Postleitzahl ein:");
+      $('#appinit').show();
+      $('#appbody').hide();
     }
 
     function fetchDataGeo(lat,lon) {
@@ -37,6 +41,7 @@ $(document).ready(function() {
     }
 
     function updateChart(data) {
+        $('#initfooter').hide();
         $('#qpoll1').show();
         const ctx = $('#chart')[0].getContext('2d');
         new Chart(ctx, {
@@ -118,13 +123,13 @@ $(document).ready(function() {
             let result = "Super!";
             if(value == candytime) { $('#qpoll1').addClass('bg-success'); } else { $('#qpoll1').addClass('bg-danger'); result = "Nicht ganz!"; }
 
-            $('#qpoll1').html('<span><strong>'+result+'</strong> Mit einem Start um '+new Date(candytime).toLocaleTimeString()+' Uhr nutzt du die umweltfreundlichste Energie, die gerade im Netz ist. Ein System wie <a href="https://openems.io/" target="_blank">OpenEMS</a> macht das ganz automatisch für dich.');
+            $('#qpoll1').html('<span><strong>'+result+'</strong> Mit einem Start um '+new Date(candytime).toLocaleTimeString()+' Uhr nutzt du die umweltfreundlichste Energie, die gerade im Netz ist. Ein System wie <strong><a href="https://openems.io/" class="text-dark" target="_blank">OpenEMS</a></strong> macht das ganz automatisch für dich.');
 
         });               
     }
 
-    async function init() {
-
+    async function init(zipcode) {
+            
             let lat, lon,data;                    
             try {
                 const position = await getLocation();
@@ -133,17 +138,29 @@ $(document).ready(function() {
                 data = await fetchDataGeo(lat, lon);
             } catch (error) {
                 console.error("Geolocation error:", error);
-                const postalCode = askForPostalCode();                        
-                data = await fetchData(postalCode);
-            }                                         
-            $('#cityName').text(`für ${data.location.city}`);
-            let index = 0;
-            const now = new Date().getTime();
-            while((index<data.data.length) && (data.data[index++].time < now)) {}
-            index=index-2;                        
-            if(index<0) index=0;
-            updateAmpel(data.data[index].advice, data.data[index].co2, data.info);
-            updateChart(data.data);
+                if((typeof zipcode == 'undefined') || (zipcode == null)) {
+                    const stored = window.localStorage.getItem("zipcode");
+                    if((typeof stored !== 'undefined') && (stored !== null)) { 
+                            $('#reqZip').val(stored);
+                    }
+                    askForPostalCode();  
+                } else {
+                    window.localStorage.setItem("zipcode",zipcode);
+                    data = await fetchData(zipcode);
+                }                                         
+            }  
+            if((typeof data !== 'undefined') && (data !== null)) {
+                $('#appinit').hide();
+                $('#appbody').show();                                       
+                $('#cityName').text(`für ${data.location.city}`);
+                let index = 0;
+                const now = new Date().getTime();
+                while((index<data.data.length) && (data.data[index++].time < now)) {}
+                index=index-2;                        
+                if(index<0) index=0;
+                updateAmpel(data.data[index].advice, data.data[index].co2, data.info);
+                updateChart(data.data);
+            }
     }
     init();
 });