From ce9a2348a39b30343849fbe88c19046045d90156 Mon Sep 17 00:00:00 2001
From: mario-fliegner <mario.fliegner@feuerwehr-gruenwald.de>
Date: Fri, 12 Nov 2021 12:07:39 +0100
Subject: [PATCH] =?UTF-8?q?v0.5.0=20-=20Erweiterungen=20f=C3=BCr=20Textanz?=
 =?UTF-8?q?eige,=20hinzuf=C3=BCgen=20Beispieldatei=20f=C3=BCr=20Textanzeig?=
 =?UTF-8?q?e=20(text.html),=20JS-Datei=20aufger=C3=A4umt.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ampel.html    |  11 ++-
 css/ampel.css |   2 +-
 js/ampel.js   | 258 ++++++++++++++++++++++++--------------------------
 text.html     | 130 +++++++++++++++++++++++++
 4 files changed, 260 insertions(+), 141 deletions(-)
 create mode 100644 text.html

diff --git a/ampel.html b/ampel.html
index ed75c90..0f235e4 100644
--- a/ampel.html
+++ b/ampel.html
@@ -56,7 +56,7 @@ <h2>COVID-19 Krankenhaus-Ampel f&uuml;r <span class="anzeigeBundeslandName">Baye
                                         <!-- Text fuer Hotspot Landkreis: -->
                                         <br/><strong>Hotspot!</strong> Die Ampel steht auf Rot, da im <span class="anzeigeLandkreisname"></span> die 7-Tages-Inzidenz &uuml;ber 300 liegt und die Auslastung der Intensivbetten mehr als 80% betr&auml;gt.
                                     </span>              
-                                    <br/>Die 7-Tages-Hospitalisierungs-Inzidenz (pro 100.000 Einwohner) betr&auml;gt <span class="anzeigeBundeslandAdverb">bayernweit</span> <span id="anzeige7TageInzidenzHospitalisierung"></span><sup>1</sup>.
+                                    <br/>Die 7-Tages-Hospitalisierungs-Inzidenz (pro 100.000 Einwohner) betr&auml;gt <span class="anzeigeBundeslandAdverb">bayernweit</span> <span class="anzeige7TageInzidenzHospitalisierung"></span><sup>1</sup>.
                               </div>
                           </div>
                       </div>
@@ -73,7 +73,7 @@ <h2>COVID-19 Krankenhaus-Ampel f&uuml;r <span class="anzeigeBundeslandName">Baye
                                       <div class="grenzwert_gelb">
                                           <div class="grenzwertText" id="anzeigeAmpelGrenzwertHospitalisierung">Grenzwert: 1200</div>
                                       </div>                                                        
-                                      <div class="balkenFarbtext farbnameSichtbar" id="balkenFarbeGelb">Gelb</div>
+                                      <div class="balkenFarbtext farbnameSichtbar" id="balkenFarbeGelbHospitalisierteFaelle">Gelb</div>
                                       <div class="aktuellerWert" id="divHospitalisierungBreite"> 
                                           <div class="zeiger_container">
                                               <div class="zeiger"></div>
@@ -93,13 +93,13 @@ <h2>COVID-19 Krankenhaus-Ampel f&uuml;r <span class="anzeigeBundeslandName">Baye
                                         </div>
                                         <div class="grenzwert_rot">
                                             <div class="grenzwertText" id="anzeigeAmpelGrenzwertIntensivRot">600</div>
-                                            <div class="balkenFarbtext farbnameSichtbar" id="balkenFarbeGelb">Gelb</div>
+                                            <div class="balkenFarbtext farbnameSichtbar" id="balkenFarbeGelbIntensivbehandlung">Gelb</div>
                                         </div>
                                         <div class="balkenFarbtext farbnameSichtbar" id="balkenFarbeRot">Rot</div>
                                         <div class="aktuellerWert" id="divBehandlungBreite"> 
                                             <div class="zeiger_container">
                                                 <div class="zeiger"></div>
-                                                <span id="aktuellerWertIntensivmedizinisch" title="F&auml;lle in intensivmedizinischer Behandlung:"><span class="anzeigeFaelleCovidAktuell">DIVI Wert</span></span>
+                                                <span id="aktuellerWertIntensivmedizinisch" title="F&auml;lle in intensivmedizinischer Behandlung:"><span class="anzeigeCOVID19FaelleAktuell">DIVI Wert</span></span>
                                             </div>
                                         </div>
                                   </div>
@@ -139,7 +139,8 @@ <h2>COVID-19 Krankenhaus-Ampel f&uuml;r <span class="anzeigeBundeslandName">Baye
     <footer class="bg-light text-center text-lg-start">
         <div class="row mb-2" style="clear:both;font-size:smaller;text-align:center;padding-top:10pt;color:red;">
             <div class="col">
-                F&uuml;r Landkreise au&szlig;erhalb Bayerns m&uuml;ssen die Grenzwerte der Ampel-Indikatoren in den Zeilen 6, 9 und 12 im Quellcode des <a href="./js/ampel.js" target="_blank" title="">JavaScripts (/js/ampel.js)</a> angepasst werden!
+                F&uuml;r Landkreise au&szlig;erhalb Bayerns m&uuml;ssen die Grenzwerte der Ampel-Indikatoren in den Zeilen 6, 9 und 12 im Quellcode des <a href="./js/ampel.js" target="_blank" title="">JavaScripts (/js/ampel.js)</a> angepasst werden!<br/>
+                Anstatt der grafischen Anzeige der Ampel k&ouml;nnen die Werte auch in Textform angezeigt werden. Ein Beispiel dazu findet sich in der <a href="./text.html" target="_blank" title="">text.html</a>.   
             </div>
         </div>
         <div class="text-center p-3">
diff --git a/css/ampel.css b/css/ampel.css
index cc42e42..6796673 100644
--- a/css/ampel.css
+++ b/css/ampel.css
@@ -247,7 +247,7 @@
     font-weight: bold;
     color: #000;
 }
-.anzeigeFaelleCovidAktuell {
+.anzeigeCOVID19FaelleAktuell {
     font-weight: 700;
     color: gray;
 }
diff --git a/js/ampel.js b/js/ampel.js
index 5012102..3a14abe 100644
--- a/js/ampel.js
+++ b/js/ampel.js
@@ -19,32 +19,9 @@
             var grenzwertHotspotIntensivbettenAuslastung = 80; //in Prozent
 
             ////////////////////////////////////////////////////////////////////////////////////////////////////
-            // Ab hier sind keine Aenderungen mehr erforderlich
+            ////////////////////////////////////////////////////////////////////////////////////////////////////
+            // Ab hier sind keine Aenderungen mehr erforderlich!
 
-            var rkiHospitalisierteFaelle = 0;
-            var diviFaelleCovidAktuell = 0;
-            var rkiDatenstand = "";
-            var diviDatenstand = "";
-            var format = 'json';
-            var rkiLandkreisName = '';
-            var rkiLandkreis7TagesInzidenz = '';
-            var rkiLandkreisLastUpdate = '';
-            var rkiLandkreisBundeslandKurzname = '';
-            var rkiLandkreisBundesland = '';
-            var rkiBundeslandNameAdverb = '';
-    
-            //** Start: Default Werte setzen und Ampel initialisieren */
-            document.getElementById("anzeigeAmpelGrenzwertHospitalisierung").innerHTML ="Grenzwert: " + grenzwertHospitalisierung + "&nbsp;";
-            document.getElementById("anzeigeAmpelGrenzwertIntensivGelb").innerHTML ="Grenzwerte: " + grenzwertIntensivBehandlungGelb + "&nbsp;";
-            document.getElementById("anzeigeAmpelGrenzwertIntensivRot").innerHTML = grenzwertIntensivBehandlungRot + "&nbsp;";
-            document.getElementById("hinweisHotspot").style.display ="none";
-            document.getElementById("hinweis2GRegel").style.display ="none";
-            document.getElementById("hinweis3GRegel").style.display ="none";
-            document.getElementById("hinweis3GplusRegel").style.display ="none";
-            document.getElementById("ampeltext").innerHTML = "";
-            document.getElementById("ampelfarbe").setAttribute("class", "ampelFarbeInitial");
-            //** Ende: Default Werte setzen und Ampel initialisieren */
-    
             var HttpClient = function() {
                 this.get = function(request, callback) {
                     var httpRequest = new XMLHttpRequest();
@@ -56,14 +33,22 @@
                     httpRequest.send(null);
                 }
             }
+            
+            var rkiHospitalisierteFaelle = 0;
+            var diviFaelleCovidAktuell = 0;
+            var rkiLandkreis7TagesInzidenz = '';
+            var format = 'json';
+            //Default Werte
+            defaultWerteSetzen();
     
-            load(gemeindeSchluessel);
+            //Ampelanzeige: Einstiegspunkt
+            ampelAnzeigen(gemeindeSchluessel);
     
             /**
              * Lädt die Ampel initial mit dem Gemeindeschluessel.
              * @param {*} gemeindeSchluessel 
              */
-            function load (gemeindeSchluessel) {
+            function ampelAnzeigen (gemeindeSchluessel) {
                 ladeAmpel(gemeindeSchluessel, null, null, null);
             }
             
@@ -81,7 +66,7 @@
                         grenzwertIntensivBehandlungRot = gwIntensivRot;
                     }
                 }
-                //Zu echten Zahlen parsen
+                //Grenzwerte zu "echten" Zahlen parsen
                 grenzwertHospitalisierung = parseInt(grenzwertHospitalisierung);
                 grenzwertIntensivBehandlungGelb = parseInt(grenzwertIntensivBehandlungGelb);
                 grenzwertIntensivBehandlungRot = parseInt(grenzwertIntensivBehandlungRot);
@@ -94,108 +79,26 @@
                         console.error(data["error"]);
                         return;
                     }
-                    var meta = data['meta'];
                     var landkreisDaten = data['data'][gemeindeSchluessel];
+                    rkiLandkreis7TagesInzidenz = Math.round((landkreisDaten['weekIncidence'] * 100)) / 100;
 
-                    //Start: Alle Werte, die ueber die RKI API api.corona-zahlen.org verfuegbar sind, und verwendet werden koennen,
-                    //d.h., nicht alle Werte werden in der Krankenhausampel verwendet.                
-                    rkiLandkreisName                            = landkreisDaten['county'].replace('LK', 'Landkreis');
-                    rkiLandkreis7TagesInzidenz                  = Math.round((landkreisDaten['weekIncidence'] * 100)) / 100;
-                    rkiLandkreisLastUpdate                      = new Date(meta['lastUpdate']).toLocaleDateString("de-DE", { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' }) + ' Uhr';
-                    rkiLandkreisBundeslandKurzname              = landkreisDaten['stateAbbreviation']; // bspw. BY, SN, RP, BW,...
-                    rkiLandkreisBundesland                      = landkreisDaten['state']; //Bayern, Sachsen, Rheinland-Pfalz,... 
-                    rkiLandkreisEinwohnerAnzahl                 = parseInt(landkreisDaten['population']);
-                    rkiLandkreisCOVID19Faelle                   = parseInt(landkreisDaten['cases']);
-                    rkiLandkreisCOVID19FaelleTod                = parseInt(landkreisDaten['deaths']);
-                    rkiLandkreisCOVID19FaellePro100kEinwohner   = parseInt(landkreisDaten['casesPer100k']);
-                    rkiLandkreisCOVID19FaelleLetzte7Tage        = parseInt(landkreisDaten['casesPerWeek']);
-                    rkiLandkreisCOVID19FaelleLetzte7TageTod     = parseInt(landkreisDaten['deathsPerWeek']);
-                    rkiLandkreisCOVID19FaelleGenesen            = parseInt(landkreisDaten['recovered']);
-                    
-                    //Setzen der ermittelten Werte fuer die Anzeige im HTML Teil.
-                    // Name des Landkreises:  <span id="anzeigeLandkreisname"></span>
-                    var lk = document.querySelectorAll('[class="anzeigeLandkreisname"]');
-                    for(var i = 0; i < lk.length; i++) {
-                        lk[i].innerHTML = rkiLandkreisName;
-                    }
-
-                    // 7-Tages-Inzidenzwert
-                    var inz = document.querySelectorAll('[id="anzeige7TageInzidenzWert"]');
-                    for(var i = 0; i < inz.length; i++) {
-                        inz[i].innerHTML = rkiLandkreis7TagesInzidenz;
-                    }        
-
-                    // Letztes Update RKI Daten 
-                    var letztesUpdate= document.querySelectorAll('[class="anzeigeLetztesUpdateRKI"]');
-                    for(var i = 0; i < letztesUpdate.length; i++) {
-                        letztesUpdate[i].innerHTML = rkiLandkreisLastUpdate;
-                    }
-    
-                    // Inzidenz Grenzwert 3G ersetzen
-                    var grenzwert3G= document.querySelectorAll('[id="anzeigeGrenzeInzidenzWert3G"]');
-                    for(var i = 0; i < grenzwert3G.length; i++) {
-                        grenzwert3G[i].innerHTML = grenzwertInzidenz3GRegel;
-                    }
-    
                     //Rest API Aufrufe muessen verschachtelt werden, da Bundesland erst von der RKI API ermittelt wird
                     var nClient = new HttpClient();
-                    var nRestServiceUrl = 'https://krankenhausampel.info/corona/v3/?bl=' + rkiLandkreisBundeslandKurzname + '&gs=' + gemeindeSchluessel;
-                    nClient.get(nRestServiceUrl, function(response1) {
-                        var result = JSON.parse(response1);
-                        
-                        //Start: Alle Werte, die ueber unsere Krankenausampel API verfuegbar sind, und verwendet werden koennen, 
-                        //d.h., nicht alle Werte werden auch in der Krankenhausampel verwendet - waeren aber verfuegbar.
-                        //Da Aufruf asynchron ist, sollten alle Variablen ausserhalb der Funktion und des Restcalls definiert werden.
+                    var nRestServiceUrl = 'https://krankenhausampel.info/corona/v3/?bl=' + landkreisDaten['stateAbbreviation'] + '&gs=' + gemeindeSchluessel;
+                    nClient.get(nRestServiceUrl, function(apiResponse) {
+                        var result = JSON.parse(apiResponse);
+                        //Nur fuer Berechnungen relevante Werte werden hier zugewiesen, 
+                        //alle anderen Werte fuer eine Anzeige werden unten in der Funktion ausgelesen
                         rkiHospitalisierteFaelle                = parseInt(result["rki_hospitalisierung"]);
-                        rkiInzidenz7TageHospitalisierung        = parseFloat(result["rki_hospitalisierung_inzidenz"]);
-                        rkiDatenstand                           = result["rki_datenstand"];                                            
                         diviFaelleCovidAktuell                  = parseInt(result["divi_intensiv"]);
-                        diviDatenstand                          = result["divi_datenstand"];
-                        diviLandkreisAnzahlStandorte            = parseInt(result["divi_lk_anzahl_standorte"]);
-                        diviLandkreisAnzahlMeldebereich         = parseInt(result["divi_lk_anzahl_meldebereiche"]);
                         diviLandkreisIntensivbettenAuslastung   = parseFloat(result["divi_lk_prozent_anteil_belegte_betten_an_gesamtbetten"]);
-                        diviLandkreisBettenFrei                 = parseInt(result["divi_lk_betten_frei"]);
-                        diviLandkreisBettenBelegt               = parseInt(result["divi_lk_betten_belegt"]);
-                        diviLandkreisCOVIDFaelleAktuell         = parseInt(result["divi_lk_faelle_covid_aktuell"]);
-                        diviLandkreisCOVIDFaelleAktuellBeatmet  = parseInt(result["divi_lk_faelle_covid_aktuell_invasiv_beatmet"]);
-                        rkiBundeslandNameAdverb                 = result['bundesland_name_adverb']
-                        //Ende: Alle verfuegbaren Werte aus der API
 
+                        //Ermitteln ob Landkreis ein Hotspot ist
                         var istHotspot = false;
                         if(rkiLandkreis7TagesInzidenz >= grenzwertHotspotInzidenz7Tage && diviLandkreisIntensivbettenAuslastung >= grenzwertHotspotIntensivbettenAuslastung){
                             istHotspot = true;
-                            console.log('Der ' + rkiLandkreisName + ' wurde als Hotspot identifiziert, da Auslastung der Intensivbetten >= ' + grenzwertHotspotIntensivbettenAuslastung + '% (ist: ' + diviLandkreisIntensivbettenAuslastung + '%) UND 7-Tages-Inzidenzwert >= ' + grenzwertHotspotInzidenz7Tage + ' (ist: ' + rkiLandkreis7TagesInzidenz + ')!');
-                        }
-        
-                        var anzeigeFaelleCovidAktuell= document.querySelectorAll('[class="anzeigeFaelleCovidAktuell"]');
-                        for(var i = 0; i < anzeigeFaelleCovidAktuell.length; i++) {
-                            anzeigeFaelleCovidAktuell[i].innerHTML = diviFaelleCovidAktuell;
-                        }
-                        var anzeigeHospitalisierteFaelle= document.querySelectorAll('[class="anzeigeHospitalisierteFaelle"]');
-                        for(var i = 0; i < anzeigeHospitalisierteFaelle.length; i++) {
-                            anzeigeHospitalisierteFaelle[i].innerHTML = rkiHospitalisierteFaelle;
-                        }
-                        var anzeigeLetztesUpdateDIVI= document.querySelectorAll('[class="anzeigeLetztesUpdateDIVI"]');
-                        for(var i = 0; i < anzeigeLetztesUpdateDIVI.length; i++) {
-                            anzeigeLetztesUpdateDIVI[i].innerHTML = diviDatenstand;
+                            console.log('Der ' + landkreisDaten['county'] + ' wurde als Hotspot identifiziert, da Auslastung der Intensivbetten >= ' + grenzwertHotspotIntensivbettenAuslastung + '% (ist: ' + diviLandkreisIntensivbettenAuslastung + '%) UND 7-Tages-Inzidenzwert >= ' + grenzwertHotspotInzidenz7Tage + ' (ist: ' + rkiLandkreis7TagesInzidenz + ')!');
                         }
-        
-                        var anzeigeLetztesUpdateLGL= document.querySelectorAll('[class="anzeigeLetztesUpdateLGL"]');
-                        for(var i = 0; i < anzeigeLetztesUpdateLGL.length; i++) {
-                            anzeigeLetztesUpdateLGL[i].innerHTML = rkiDatenstand;
-                        }
-
-                        var anzeigeBundeslandName= document.querySelectorAll('[class="anzeigeBundeslandName"]');
-                        for(var i = 0; i < anzeigeBundeslandName.length; i++) {
-                            anzeigeBundeslandName[i].innerHTML = rkiLandkreisBundesland;
-                        }
-
-                        var anzeigeBundeslandAdverb= document.querySelectorAll('[class="anzeigeBundeslandAdverb"]');
-                        for(var i = 0; i < anzeigeBundeslandAdverb.length; i++) {
-                            anzeigeBundeslandAdverb[i].innerHTML = rkiBundeslandNameAdverb;
-                        }
-
-                        document.getElementById("anzeige7TageInzidenzHospitalisierung").innerHTML = rkiInzidenz7TageHospitalisierung;
 
                         /** Setze den Zusatztext unter der Ampel fuer 3G */
                         var ampelzusatztext = "";
@@ -205,25 +108,21 @@
                         } 
                         /** Ampelfarbe setzen (rot schlaegt gelb) */
                         cssClassAmpelfarbe = "ampelgruen"; //default gruen
-                        //cssAmpeltextfarbe = "#fff"; //wenn Gelb, kann man den weissen Text in der Ampel nicht mehr lesen... in dem Fall auf dunklere Farbe setzen
                         ampelfarbeText = "Gr&uuml;n";
                         if(rkiHospitalisierteFaelle >= grenzwertHospitalisierung) {
                             cssClassAmpelfarbe ="ampelgelb";
-                            //cssAmpeltextfarbe = "#000";
                             ampelfarbeText = "Gelb";
                             ampelzusatztext = "3GPlus-Regel";
                             hinweiseAnzeigen("hinweis3GplusRegel");
                         }
                         if (diviFaelleCovidAktuell >= grenzwertIntensivBehandlungGelb) {
                             cssClassAmpelfarbe ="ampelgelb";
-                            //cssAmpeltextfarbe = "#fff";
                             ampelfarbeText = "Gelb";
                             ampelzusatztext = "3G<font style='text-transform:lowercase;'>Plus</font>-Regel";
                             hinweiseAnzeigen("hinweis3GplusRegel");
                         }
                         if (diviFaelleCovidAktuell >= grenzwertIntensivBehandlungRot) {
                             cssClassAmpelfarbe ="ampelrot";
-                            //cssAmpeltextfarbe = "#fff";
                             ampelfarbeText = "Rot";
                             ampelzusatztext = "2G-Regel";
                             hinweiseAnzeigen("hinweis2GRegel");
@@ -231,18 +130,24 @@
                         //Hotspot schlaegt alle Farben:
                         if(istHotspot) {
                             cssClassAmpelfarbe ="ampelrot";
-                            //cssAmpeltextfarbe = "#fff";
                             ampelfarbeText = "Rot";
                             ampelzusatztext = "2G-Regel";
-                            document.getElementById("hinweisHotspot").style.display = "contents";
+                            if(document.getElementById("hinweisHotspot") != null)
+                                document.getElementById("hinweisHotspot").style.display = "contents";
                         }
 
                         /** Zusatztext unter der Ampel je nach Ampelfarbe (2G, 3G, 3GPlus,...) */
-                        document.getElementById("ampelzusatztext").innerHTML = ampelzusatztext;
+                        if(document.getElementById("ampelzusatztext") != null)
+                            document.getElementById("ampelzusatztext").innerHTML = ampelzusatztext;
                 
-                        document.getElementById("ampeltext").setAttribute("style", "display:flex;");
-                        document.getElementById("ampelfarbe").setAttribute("class", cssClassAmpelfarbe);
-                        document.getElementById("ampeltext").innerHTML = ampelfarbeText;
+                        if(document.getElementById("ampeltext") != null)
+                            document.getElementById("ampeltext").setAttribute("style", "display:flex;");
+                        
+                        if(document.getElementById("ampelfarbe") != null)
+                           document.getElementById("ampelfarbe").setAttribute("class", cssClassAmpelfarbe);
+                        
+                        if(document.getElementById("ampeltext") != null)
+                            document.getElementById("ampeltext").innerHTML = ampelfarbeText;
                 
                         /** Berechne Zeigerstellung  (#divHospitalisierungBreite) */
                         var zeigerStellung = 0;
@@ -250,7 +155,8 @@
                         if(zeigerStellung >= 95) { zeigerStellung = 95; } //Verhindern dass Zeigerspitze rechts neben Balken landet...
                         if(zeigerStellung <= 2) { zeigerStellung = 2; } //Verhindern dass Zeigerspitze links neben Balken landet...
                 
-                        document.getElementById("divHospitalisierungBreite").setAttribute("style","width:" + zeigerStellung + "%");
+                        if(document.getElementById("divHospitalisierungBreite") != null)
+                            document.getElementById("divHospitalisierungBreite").setAttribute("style","width:" + zeigerStellung + "%");
                 
                         /** Berechne Zeigerstellung  (#divBehandlungBreite) */
                         zeigerStellung = 0;
@@ -267,8 +173,12 @@
                                 
                         if(zeigerStellung >= 95) { zeigerStellung = 95; } //Verhindern dass Zeigerspitze rechts neben Balken landet...
                         if(zeigerStellung <= 2) { zeigerStellung = 2; } //Verhindern dass Zeigerspitze links neben Balken landet...
-                
-                        document.getElementById("divBehandlungBreite").setAttribute("style","width:" + zeigerStellung + "%");
+
+                        if(document.getElementById("divBehandlungBreite") != null)
+                            document.getElementById("divBehandlungBreite").setAttribute("style","width:" + zeigerStellung + "%");
+
+                        //Alle Daten zur Anzeige und Nutzung im Frontend vorbereiten
+                        anzeigeWerte(gemeindeSchluessel, data, result, ampelfarbeText, istHotspot);
                     });                
                 });
                 console.log('Die angezeigte Krankenhausampel ist kostenlos und konfigurierbar als Skript verfuegbar: www.krankenhausampel.info');
@@ -280,10 +190,10 @@
              * @param {*} hinweisAn - CSS id des Elementes, was angezeigt werden soll (hinweis2GRegel, hinweis3GRegel oder hinweis2GplusRegel)
              */
             function hinweiseAnzeigen(hinweisAn) {
-                document.getElementById("hinweis3GplusRegel").style.display = "none";
-                document.getElementById("hinweis3GRegel").style.display = "none";
-                document.getElementById("hinweis2GRegel").style.display = "none";
-                document.getElementById(hinweisAn).style.display = "contents";
+                if (document.getElementById("hinweis3GplusRegel") != null) { document.getElementById("hinweis3GplusRegel").style.display = "none"; }
+                if (document.getElementById("hinweis3GRegel") != null) { document.getElementById("hinweis3GRegel").style.display = "none"; }
+                if (document.getElementById("hinweis2GRegel") != null) { document.getElementById("hinweis2GRegel").style.display = "none"; }
+                if (document.getElementById(hinweisAn) != null) { document.getElementById(hinweisAn).style.display = "contents"; }
             }
 
             /**
@@ -301,4 +211,82 @@
                     gemeindeSchluessel = '09184'; //Default: Landkreis Muenchen
                 }
                 return gemeindeSchluessel;
+            }
+
+            /**
+             * Default Werte der Ampel setzen. 
+             */
+            function defaultWerteSetzen() {
+                //Grenzwerte setzen
+                if(document.getElementById("anzeigeAmpelGrenzwertHospitalisierung") != null) { document.getElementById("anzeigeAmpelGrenzwertHospitalisierung").innerHTML ="Grenzwert: " + grenzwertHospitalisierung + "&nbsp;"; }
+                if(document.getElementById("anzeigeAmpelGrenzwertIntensivGelb") != null) { document.getElementById("anzeigeAmpelGrenzwertIntensivGelb").innerHTML ="Grenzwerte: " + grenzwertIntensivBehandlungGelb + "&nbsp;"; }
+                if(document.getElementById("anzeigeAmpelGrenzwertIntensivRot") != null) { document.getElementById("anzeigeAmpelGrenzwertIntensivRot").innerHTML = grenzwertIntensivBehandlungRot + "&nbsp;"; }
+                //Hinweise mit Regeltexten (2G/3G/3Gplus/Hotspot) alle nicht sichtbar 
+                if(document.getElementById("hinweisHotspot") != null) { document.getElementById("hinweisHotspot").style.display = "none"; }
+                if(document.getElementById("hinweis2GRegel") != null) { document.getElementById("hinweis2GRegel").style.display = "none"; }
+                if(document.getElementById("hinweis3GRegel") != null) { document.getElementById("hinweis3GRegel").style.display = "none"; }
+                if(document.getElementById("hinweis3GplusRegel") != null) { document.getElementById("hinweis3GplusRegel").style.display = "none"; }
+                //Ampel Farbe + Text setzen
+                if(document.getElementById("ampeltext") != null) { document.getElementById("ampeltext").innerHTML = ""; }
+                if(document.getElementById("ampelfarbe") != null) { document.getElementById("ampelfarbe").setAttribute("class", "ampelFarbeInitial"); }
+            }
+
+            /**
+             * Bereitet alle verfuegbaren Daten fuer eine Anzeige im Frontend vor. 
+             * Der Key im "mapping" Array ist dabei der Name, den ein "class" Attribut in einem HTML-Tag bekommen muss,
+             * damit der Wert angezeigt wird. Bspw: <span class="anzeigeLandkreisname"></span>
+             * @param {*} datenCoronaAPI 
+             * @param {*} datenKHAAPI 
+             * @param {*} ampelFarbe 
+             * @param {*} istHotspot
+             */
+            function anzeigeWerte (gemeindeSchluessel, datenCoronaAPI, datenKHAAPI, ampelFarbe, istHotspot) {
+                var lkDaten = datenCoronaAPI['data'][gemeindeSchluessel];
+                var hotspot = (istHotspot)? "Ja" :  "Nein"; 
+                var hotspotText = "kein Hotspot";
+                if(istHotspot) {
+                    hotspotText = "Hotspot";
+                }
+                //Mapping aller verfuegbarer Daten fuer eine Anzeige.  
+                var mapping = { "anzeigeLandkreisname": lkDaten['county'].replace('LK', 'Landkreis'),
+                                "anzeigeLandkreisEinwohnerzahl": parseInt(lkDaten['population']),
+                                "anzeige7TageInzidenzWert": (Math.round((lkDaten['weekIncidence'] * 100)) / 100).toFixed(2),
+                                "anzeigeLetztesUpdateRKI": new Date( datenCoronaAPI['meta']['lastUpdate']).toLocaleDateString("de-DE", { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' }) + ' Uhr',
+                                "anzeigeBundeslandName": lkDaten['state'],
+                                "anzeigeHospitalisierteFaelle": datenKHAAPI["rki_hospitalisierung"],
+                                "anzeige7TageInzidenzHospitalisierung": parseFloat(datenKHAAPI["rki_hospitalisierung_inzidenz"]).toFixed(2),
+                                "anzeigeCOVID19FaelleAktuell": parseInt(datenKHAAPI["divi_intensiv"]),
+                                "anzeigeLetztesUpdateDIVI": datenKHAAPI["divi_datenstand"],
+                                "anzeigeBundeslandAdverb": datenKHAAPI['bundesland_name_adverb'],
+                                "anzeigeAnzahlStandorte": parseInt(datenKHAAPI["divi_lk_anzahl_standorte"]),
+                                "anzeigeAnzahlMeldebereiche": parseInt(datenKHAAPI["divi_lk_anzahl_meldebereiche"]),
+                                "anzeigeAnzahlBettenFrei": parseInt(datenKHAAPI["divi_lk_betten_frei"]),
+                                "anzeigeAnzahlBettenBelegt": parseInt(datenKHAAPI["divi_lk_betten_belegt"]),
+                                "anzeigeCOVID19FaelleLKAktuell": parseInt(datenKHAAPI["divi_lk_faelle_covid_aktuell"]),
+                                "anzeigeCOVID19FaelleAktuellBeatmet": parseInt(datenKHAAPI["divi_lk_faelle_covid_aktuell_invasiv_beatmet"]),
+                                "anzeigeCOVID19FaelleGesamt": parseInt(lkDaten['cases']),
+                                "anzeigeCOVID19FaelleGesamtTod": parseInt(lkDaten['deaths']),
+                                "anzeigeCOVID19FaellePro100kEinwohner": parseFloat(lkDaten['casesPer100k']).toFixed(2),
+                                "anzeigeCOVID19FaelleLetzte7Tage": parseInt(lkDaten['casesPerWeek']),
+                                "anzeigeCOVID19FaelleLetzte7TageTod": parseInt(lkDaten['deathsPerWeek']),
+                                "anzeigeCOVID19FaelleGesamtGenesen": parseInt(lkDaten['recovered']),
+                                "anzeigeGrenzeInzidenzWert3G": grenzwertInzidenz3GRegel,
+                                "anzeigeGrenzwertHospitalisierung": grenzwertHospitalisierung,
+                                "anzeigeGrenzwertIntensivGelb": grenzwertIntensivBehandlungGelb,
+                                "anzeigeGrenzwertIntensivRot": grenzwertIntensivBehandlungRot,
+                                "anzeigeHotspotInzidenzGrenze7Tage": grenzwertHotspotInzidenz7Tage,
+                                "anzeigeHotspotIntensivbettenAuslastungProzent": grenzwertHotspotIntensivbettenAuslastung,
+                                "anzeigeAmpelfarbe": ampelFarbe,
+                                "anzeigeHotspotJaNein": hotspot,
+                                "anzeigeHotspotText": hotspotText,
+                                "anzeigeGemeindeschluessel": gemeindeSchluessel
+                            };
+                //Alle Elemente mit dem class Wert "key" finden und mit dem Wert ersetzen
+                for (var key in mapping) {
+                    var output= document.querySelectorAll('[class="'+key+'"]');
+                    for(var i = 0; i < output.length; i++) {
+                        output[i].innerHTML = mapping[key];
+                    }
+                }
+                return mapping;
             }
\ No newline at end of file
diff --git a/text.html b/text.html
new file mode 100644
index 0000000..60712e2
--- /dev/null
+++ b/text.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Krankenhaus-Ampel (krankenhausampel.info) - Beispieldarstellung</title>
+    <!--+ 
+        | Einbinden des Bootstrap-Frameworks: 
+        | Wird durch die (eigene) Webseite bereits das Bootstrap-Framework eingebunden sollte die folgende Zeile entfernt werden
+        +-->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
+    <style>
+        body {
+            margin-left: 30px;
+        }
+    </style>
+  </head>
+  <body>
+    <script src="js/ampel.js"></script>
+    <div class="container-fluid">
+      <h1>Krankenhausampel.info</h1>
+      <p>Anstatt die Krankenhausampel grafisch darzustellen (siehe Beispieldatei <a href="ampel.html" target="_blank" title="">ampel.html</a>), k&ouml;nnen die einzelnen Werte auch in einem beliebigen Fließtext angezeigt werden.
+      Dazu m&uuml;ssen der Gemeindeschl&uuml;ssel (und f&uuml;r Landkreise au&szlig;erhalb Bayerns auch die Grenzwerte) in der Datei <a href="js/ampel.js" target="_blank" title="">ampel.js</a> angepasst werden.</p>
+
+      <div class="row mb-3" style="border: 3px solid darkblue;padding: 15px;">
+        <div class="col">
+          <strong>Beispieltext:</strong><p>
+          Die Krankenhausampel steht in <span class="anzeigeBundeslandName"></span> auf <span class="anzeigeAmpelfarbe"></span>! Die 7-Tages-Inzidenz im <span class="anzeigeLandkreisname"></span> betr&auml;gt <span class="anzeige7TageInzidenzWert"></span><sup>1</sup>.
+          In den letzten 7 Tagen wurden <span class="anzeigeBundeslandAdverb"></span> <span class="anzeigeHospitalisierteFaelle"></span><sup>2</sup> Personen mit COVID-19 station&auml;r in Krankenh&auml;user aufgenommen. Intensivmedizinisch behandelt werden derzeit <span class="anzeigeCOVID19FaelleAktuell"></span><sup>2</sup> Personen.
+          Die 7-Tages-Hospitalisierungs-Inzidenz (pro 100.000 Einwohner) betr&auml;gt in <span class="anzeigeBundeslandName"></span> <span class="anzeige7TageInzidenzHospitalisierung"></span><sup>2</sup>.
+          </p>
+          <p><small>
+              <sup>1</sup> Robert-Koch-Institut (RKI), <a href="https://api.corona-zahlen.org/" target="_blank" title="Lizenz: CC-BY-4.0">CC-BY-4.0</a> (Stand: <span class="anzeigeLetztesUpdateRKI"></span>)<br/>
+              <sup>2</sup> DIVI-Intensivregister, <a href="https://www.intensivregister.de/" target="_blank" title="Link zu Intensivregister.de">www.intensivregister.de</a> (Stand: <span class="anzeigeLetztesUpdateDIVI"></span>)</small></p>
+        </div>
+        <div class="col">
+          <strong>Beispieltext HTML-Code:</strong><br/>
+          <textarea id="beispieltext1" class="form-control" rows="6" onClick="this.select();"><p>Die Krankenhausampel steht in <span class="anzeigeBundeslandName"></span> auf <span class="anzeigeAmpelfarbe"></span>! Die 7-Tages-Inzidenz im <span class="anzeigeLandkreisname"></span> betr&amp;auml;gt <span class="anzeige7TageInzidenzWert"></span><sup>1</sup>. In den letzten 7 Tagen wurden <span class="anzeigeBundeslandAdverb"></span> <span class="anzeigeHospitalisierteFaelle"></span><sup>2</sup> Personen mit COVID-19 station&amp;auml;r in Krankenh&amp;auml;user aufgenommen. Intensivmedizinisch behandelt werden derzeit <span class="anzeigeCOVID19FaelleAktuell"></span><sup>2</sup> Personen. Die 7-Tages-Hospitalisierungs-Inzidenz (pro 100.000 Einwohner) betr&amp;auml;gt in <span class="anzeigeBundeslandName"></span> <span class="anzeige7TageInzidenzHospitalisierung"></span><sup>2</sup>.</p><p><small><sup>1</sup> Robert-Koch-Institut (RKI), <a href="https://api.corona-zahlen.org/" target="_blank" title="Lizenz: CC-BY-4.0">CC-BY-4.0</a> (Stand: <span class="anzeigeLetztesUpdateRKI"></span>)<br/><sup>2</sup> DIVI-Intensivregister, <a href="https://www.intensivregister.de/" target="_blank" title="Link zu Intensivregister.de">www.intensivregister.de</a> (Stand: <span class="anzeigeLetztesUpdateDIVI"></span>)</small></p></textarea>
+        </div>
+      </div>    
+      <div class="row">
+        <div class="col">
+          <hr>
+        </div>
+      </div>    
+      <div class="row">
+        <div class="col">
+          <h3>Verf&uuml;gbare Anzeige-Elemente</h3>
+        </div>
+      </div>  
+      <div class="row">
+        <div class="col">
+          Die folgenden <strong>HTML-Tags</strong> stehen zur Verf&uuml;gung und werden bei der <strong>Anzeige</strong> durch die entsprechenden Werte ersetzt. 
+        </div>
+      </div>  
+
+    <table class="table table-striped">
+      <thead>
+        <tr>
+          <th scope="col" style="width:40%;">HTML-Tag</th>
+          <th scope="col">Anzeige</th>
+          <th scope="col">Quelle</th>
+          <th scope="col">Beschreibung</th>
+        </tr>
+      </thead>
+      <tbody>
+        <script>
+            var werte = [
+                        {"name":"anzeigeLandkreisname",                           "source":"RKI","description":"Name des Landkreises, &uuml;ber den Gemeindeschl&uuml;ssel (AGS) ermittelt."},
+                        {"name":"anzeigeBundeslandName",                          "source":"RKI","description":"Name des Bundeslandes, zu dem der Landkreis geh&ouml;rt."},
+                        {"name":"anzeige7TageInzidenzWert",                       "source":"RKI","description":"7-Tages-Inzidenzwert im Landkreis."},
+                        {"name":"anzeigeLandkreisEinwohnerzahl",                  "source":"RKI","description":"Einwohnerzahl bezogen auf den Landkreis."},
+                        {"name":"anzeigeCOVID19FaelleGesamt",                     "source":"RKI","description":"Gesamtanzahl bisher best&auml;tigter COVID-19-F&auml;lle im Landkreis."},
+                        {"name":"anzeigeCOVID19FaelleGesamtTod",                  "source":"RKI","description":"Gesamtanzahl bisher best&auml;tigter Todesf&auml;lle durch/mit COVID-19 im Landkreis."},
+                        {"name":"anzeigeCOVID19FaelleGesamtGenesen",              "source":"RKI","description":"Gesamtanzahl bisher genesener COVID-19-F&auml;lle im Landkreis."},
+                        {"name":"anzeigeCOVID19FaellePro100kEinwohner",           "source":"RKI","description":"Anzahl COVID-19-F&auml;lle pro 100.000 Einwohner."},
+                        {"name":"anzeigeCOVID19FaelleLetzte7Tage",                "source":"RKI","description":"Anzahl COVID-19-F&auml;lle der letzten 7 Tage."},
+                        {"name":"anzeigeCOVID19FaelleLetzte7TageTod",             "source":"RKI","description":"Anzahl Todesf&auml;lle durch/mit COVID-19 der letzten 7 Tage."},
+                        {"name":"anzeigeLetztesUpdateRKI",                        "source":"RKI","description":"Datenstand aller Werte mit Quelle RKI (Robert-Koch-Institut)."},
+                        {"name":"anzeigeHospitalisierteFaelle",                   "source":"DIVI","description":"Hospitalisierte COVID-19-F&auml;lle der letzten 7 Tage."},
+                        {"name":"anzeige7TageInzidenzHospitalisierung",           "source":"DIVI","description":"7-Tages-Hospitalisierungsinzidenz."},
+                        {"name":"anzeigeCOVID19FaelleAktuell",                    "source":"DIVI","description":"Anzahl aller aktuell in intensivmedizinischer Behandlung (beatmet und nicht beatmet) befindlichen COVID-19-Patienten - Bundesland."},
+                        {"name":"anzeigeCOVID19FaelleLKAktuell",                   "source":"DIVI","description":"Anzahl aller aktuell in intensivmedizinischer Behandlung (beatmet und nicht beatmet) befindlichen COVID-19-Patienten - Landkreis."},
+                        {"name":"anzeigeCOVID19FaelleAktuellBeatmet",             "source":"DIVI","description":"Anzahl aktuell invasiv beatmeter COVID-19-Patienten (Erwachsene und Kinder) inintensivmedizinischer Behandlung."},
+                        {"name":"anzeigeAnzahlStandorte",                         "source":"DIVI","description":"Anzahl Standorte im Landkreis, die eine Meldung abgegeben haben welche in den aktuellen Datenstand einflie&szlig;t."},
+                        {"name":"anzeigeAnzahlMeldebereiche",                     "source":"DIVI","description":"Anzahl Meldebereiche im Landkreis, die eine Meldung abgegeben haben, welche  in den aktuellen Datenstand einflie&szlig;t."},
+                        {"name":"anzeigeAnzahlBettenFrei",                        "source":"DIVI","description":"Anzahl freier, betreibbarer Intensivbetten im Landkreis."},
+                        {"name":"anzeigeAnzahlBettenBelegt",                      "source":"DIVI","description":"Anzahl belegter Intensivbetten, unabh&auml;ngig von der Behandlungsursache, im Landkreis."},
+                        {"name":"anzeigeLetztesUpdateDIVI",                       "source":"DIVI","description":"Datenstand aller Werte mit Quelle Divi (Intensivregister)."},
+                        {"name":"anzeigeGemeindeschluessel",                      "source":"KHA","description":"Verwendeter Gemeindesch&uuml;ssel als Grundlage f&uuml;r alle angezeigten Daten."},
+                        {"name":"anzeigeBundeslandAdverb",                        "source":"KHA","description":"Adverb des Bundeslandes."},
+                        {"name":"anzeigeHotspotIntensivbettenAuslastungProzent",  "source":"KHA","description":"Auslastung der Intensivbetten in Prozent."},
+                        {"name":"anzeigeGrenzeInzidenzWert3G",                    "source":"KHA","description":"Grenzwert ab dem 3G-Regel gilt."},
+                        {"name":"anzeigeGrenzwertHospitalisierung",               "source":"KHA","description":"Grenzwert Hospitalisierte F&auml;lle, ab dem Ampel Gelb wird."},
+                        {"name":"anzeigeGrenzwertIntensivGelb",                   "source":"KHA","description":"Grenzwert F&auml;lle in intensivmedizinischer Behandlung, ab dem Ampel Gelb wird."},
+                        {"name":"anzeigeGrenzwertIntensivRot",                    "source":"KHA","description":"Grenzwert F&auml;lle in intensivmedizinischer Behandlung, ab dem Ampel Rot wird."},
+                        {"name":"anzeigeHotspotInzidenzGrenze7Tage",              "source":"KHA","description":"7-Tages-Inzidenz Schwellwert ab dem Landkreis als Hotspot gilt (in Verbindung mit Auslastung Krankenh&auml;user)."},
+                        {"name":"anzeigeHotspotJaNein",                           "source":"KHA","description":"'Ja' oder 'Nein' - ist Landkreis als Hotpot identifiziert?"},
+                        {"name":"anzeigeHotspotText",                             "source":"KHA","description":"Textanzeige 'Hotspot' wenn Landkreis ein Hotspot ist, sonst 'kein Hotspot'."},
+                        {"name":"anzeigeAmpelfarbe",                              "source":"KHA","description":"Aktuelle Ampelfarbe als Text."},
+                    ];
+            var arrayLength = werte.length;
+            for (var i = 0; i < werte.length; i++) {
+                var arrLine = werte[i];
+                document.write('<tr>');
+                    document.write("<td><input size=\"70\" type=\"text\" value=\"&lt;span class=&#34;"+arrLine['name']+"&#34;&gt;&lt;/span&gt;\" onClick=\"this.select();\"/></td>");
+                    document.write('<td><span class=\"'+arrLine['name']+'\"></span></td>');
+                    document.write('<td>' + arrLine['source'] + '</td>');
+                    document.write('<td>' + arrLine['description'] + '</td>');
+                document.write('</tr>');
+            }
+        </script>
+    </tbody>
+    </table>
+    <div class="row mb-5">
+      <div class="col">
+        <small><strong>Quellen:</strong> RKI = <a href="https://api.corona-zahlen.org/" target="_blank" title="">Robert-Koch-Institut</a>, DIVI = <a href="https://www.intensivregister.de/" target="_blank" title="">DIVI-Intensivregister</a>, KHA = bereitgestellt durch dieses Krankenhaus-Ampel Skript.</small>
+      </div>
+    </div>
+    </div><!--container-->
+    <!--+
+        | Der <footer> kann entfernt werden, er dient nur der Vollstaendigkeit. 
+        +-->	
+    <footer class="bg-light text-center text-lg-start">
+        <div class="text-center p-3">
+            Bereitgestellt von <a class="text-dark" href="https://Krankenhausampel.info/" target="_blank">Krankenhausampel.info</a> | Probleme? W&uuml;nsche? Anregungen? <a href="mailto:hilfe@krankenhausampel.info" target="_blank">hilfe@krankenhausampel.info</a> 
+        </div>
+    </footer> 
+  </body>
+</html>
\ No newline at end of file