Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Skripten / Logik
    4. JavaScript
    5. Script: Alexa Listen pflegen und Anzeigen

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    Script: Alexa Listen pflegen und Anzeigen

    This topic has been deleted. Only users with topic management privileges can see it.
    • L
      lucajordi last edited by

      Ok, aber dann scheint mein Widget nicht zu passen...
      Sieht anders aus:

      2cbefef0-920c-4656-8a6e-ca7ac2d49a31-image.png

      script ist folgendes:

      //@liv-in-sky 2022  14.2.-16:09
       
       const dpPrefix = "javascript."+ instance +".";
      createState("Alexa_Listen.ALEXALists.Einkauf.Anlegen"             , "",{ name: 'Anlegen_VIS',  type: 'string', read:  true,  write: true,});
      createState("Alexa_Listen.ALEXALists.Einkauf.ALEXAEinkauf"           , { name: 'ALEXAEinkauf_VIS',  type: 'string', read:  true,  write: true,});
      createState("Alexa_Listen.ALEXALists.Einkauf.AuswahlDeleteWerte"   , { name: 'AuswahlDeleteWert_VIS',  type: 'string', read:  true,  write: true,});
      createState("Alexa_Listen.ALEXALists.Einkauf.AuswahlDeleteTexte"  , { name: 'AuswahlDeleteTexte_VIS',  type: 'string', read:  true,  write: true,});
      createState("Alexa_Listen.ALEXALists.Einkauf.Anzahl"  , { name: 'Einkauf_Anzahl_VIS',  type: 'number', read:  true,  write: true,});
      createState("Alexa_Listen.ALEXALists.Einkauf.DeleteALL"  , { name: 'Einkauf_DeleteALL',  type: 'boolean', role: 'switch', read:  true,  write: true,});
      createState("Alexa_Listen.ALEXALists.Einkauf.Refresh"  , { name: 'Refresh',  type: 'boolean', role: 'switch', read:  true,  write: true,});
      createState("Alexa_Listen.ALEXALists.Einkauf.AuswahlDelete"       , { name: 'AuswahlDelete_VIS',  type: 'number', read:  true,  write: true,});
       
      createState("Alexa_Listen.ALEXALists.Einkauf.AuswahlDelete", {
      name: 'AuswahlDelete',
       role: "state",
       type: "number",
       states: "0:choose ...;1:eeee;2:test1;3:test;",
       min: 0,
       max: 50,
       def: 0,
       read: true,
       write: true});
       
       
       
       
      //HIER WIRD PFAD UND FILENAME DEFINIERT
      const path = "/htmltelegram.html";                   //FIlenamen definieren
      const home ='vis.0'                                 //wo soll das file im iobroker-file-system liegen ? (oder z.b auch iqontrol.meta)
      let   braucheEinFile=false;                          // bei true wird ein file geschrieben - für iqontrol
      let   braucheEinVISWidget=true;                     // bei true wird ein html-tabelle in einen dp geschrieben 
      let   braucheTelegram=true;
      let dpVIS=dpPrefix+"Alexa_Listen.ALEXALists.Einkauf.ALEXAEinkauf";                      // dp  für VIS-HTML-Basic-Widget // Datentyp: String
      let dPDELETE=dpPrefix+"Alexa_Listen.ALEXALists.Einkauf.AuswahlDelete";                  // Datentyp: Werteliste
      let dPDELETEWert=dpPrefix+"Alexa_Listen.ALEXALists.Einkauf.AuswahlDeleteWerte";         // Datentyp: String
      let dPDELETEAuswahl=dpPrefix+"Alexa_Listen.ALEXALists.Einkauf.AuswahlDeleteTexte";      // Datentyp: String
      let dpANLEGEN=dpPrefix+"Alexa_Listen.ALEXALists.Einkauf.Anlegen";                       // Datentyp: String
      let dpAnzahl=dpPrefix+"Alexa_Listen.ALEXALists.Einkauf.Anzahl";                         // Datentyp: Number
      let dpDelAll=dpPrefix+"Alexa_Listen.ALEXALists.Einkauf.DeleteALL";                      // Datentyp: Boolean
      let dpRefresh=dpPrefix+"Alexa_Listen.ALEXALists.Einkauf.Refresh";                      // Datentyp: Boolean
      let mySchedule=" */30 * * * * * ";                       
      let sortList=1;                                                                         // SORTIERUNG 1=nach datum; 2 nach Einkauf's
      let mitErstelldatum=false;
      var symbolLink="⚪";                                                                    //  👎  💀 ❌  ⚪  ⚫ ⭕  🔴 🔵
      let farbeSchalterON="blue";
      //---------------------------------------
       
      //HIER DIE SPALTEN ANZAHL DEFINIEREN - jede Spalte einen Wert - in diesem Beispiel sind es 3
      var htmlFeld1='Einkauf';       var Feld1lAlign="left";                     // überschrift Tabellen Spalte1 und  Ausrichtung left or center
      var htmlFeld2='Del';        var Feld2lAlign="center";                      // überschrift Tabellen Spalte2 und  Ausrichtung left,right or center
      var htmlFeld3='Erstellt vor';         var Feld3lAlign="center";                    // überschrift Tabellen Spalte3 und  Ausrichtung left,right or center
      //-----------------------------------
       
       
      //hier werden die styles für die tabelle definiert
      //ÜBERSCHRIFT ÜBER TABELLE
      let   htmlUberschrift=false;                           // mit Überschrift über der tabelle
      let   htmlSignature=false;                              // anstatt der Überscghrift eine signature: - kleiner - anliegend
      const htmlFeldUeber='ALEXA Einkaufsliste';              // Überschrift und Signature
      const htmlFarbUber="white";                         // Farbe der Überschrift
      const htmlSchriftWeite="normal";                       // bold, normal - Fettschrift für Überschrift
      const htmlÜberFontGroesse="18px";                       // schriftgröße überschrift
      //MEHRERE TABELLEN NEBENEINANDER
      let   mehrfachTabelle=1;                              // bis zu 4 Tabellen werden nebeneinander geschrieben-  verkürzt das Ganze, dafür etwas breiter - MÖGLICH 1,2,3,oder 4 !!!
      const trennungsLinie="2";                             //extra trennungslinie bei mehrfachtabellen - evtl auf 0 stellen, wnn htmlRahmenLinien auf none sind
      const farbetrennungsLinie="white";
      const htmlFarbZweiteTabelle="white";                // Farbe der Überschrift bei jeder 2.ten Tabelle
      const htmlFarbTableColorUber="#BDBDBD";               // Überschrift in der tabelle - der einzelnen Spalten
      //ÜBERSCHRIFT SPALTEN
      const UeberSchriftHöhe="35";                          //Überschrift bekommt mehr Raum - darunter und darüber - Zellenhöhe
      const LinieUnterUeberschrift="3";                   // Linie nur unter Spaltenüberschrift - 
      const farbeLinieUnterUeberschrift="white";
      const groesseUeberschrift=16;
      const UeberschriftStyle="normal"                     // möglich "bold"
      //GANZE TABELLE
      let abstandZelle="3";
      let farbeUngeradeZeilen="#000000";                     //Farbe für ungerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2
      let farbeGeradeZeilen="#2E2E2E";                        //Farbe für gerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2
      let weite="auto";                                     //Weite der Tabelle
      let zentriert=true;                                   //ganze tabelle zentriert
      const backgroundAll="#000000";                        //Hintergrund für die ganze Seite - für direkten aufruf oder iqontrol sichtber - keine auswirkung auf vis-widget
      const htmlSchriftart="Helvetica";
      const htmlSchriftgroesse="14px";
      //FELDER UND RAHMEN
      let   UeberschriftSpalten=true;                // ein- oder ausblenden der spatlen-überschriften
      const htmlFarbFelderschrift="lightblue";                  // SchriftFarbe der Felder
      const htmlFarbFelderschrift2="#D8D8D8";                 // SchriftFarbe der Felder für jede 2te Tabelle
      const htmlFarbTableColorGradient1="#424242";          //  Gradient - Hintergrund der Tabelle - Verlauffarbe
      const htmlFarbTableColorGradient2="#424242";          //  Gradient - Hintergrund der Tabelle - ist dieser Wert gleich Gradient1 gibt es keinen verlauf
      const htmlFarbTableBorderColor="grey";             // Farbe des Rahmen - is tdieser gleich den gradienten, sind die rahmen unsichtbar
      let htmlRahmenLinien="none";                            // Format für Rahmen: MÖGLICH: "none" oder "all" oder "cols" oder "rows"
      const htmlSpalte1Weite="auto";                   //  Weite der ersten beiden  Spalten oder z.b. 115px
       
      // HIER NICHTS  ÄNDERN
       
      let borderHelpBottum;
      let borderHelpRight;
      let htmlcenterHelp;
      let htmlcenterHelp2;
       
      if(htmlRahmenLinien=="rows") {borderHelpBottum=1;borderHelpRight=0;}
      if(htmlRahmenLinien=="cols") {borderHelpBottum=0;borderHelpRight=1;}
      if(htmlRahmenLinien=="none") {borderHelpBottum=0;borderHelpRight=0;}
      if(htmlRahmenLinien=="all")  {borderHelpBottum=1;borderHelpRight=1;}
      zentriert ? htmlcenterHelp="auto" : htmlcenterHelp="left";
      zentriert ? htmlcenterHelp2="center" : htmlcenterHelp2="left";
       
       
      const htmlZentriert='<center>'
      const htmlStart=    "<!DOCTYPE html><html lang=\"de\"><head><title>Vorlage</title><meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\">"+
                         "<style> * {  margin: 0;} body {background-color: "+backgroundAll+"; margin: 0 auto;  }"+
                         " p {padding-top: 10px; padding-bottom: 10px; text-align: "+htmlcenterHelp2+"}"+
                        // " div { margin: 0 auto;  margin-left: auto; margin-right: auto;}"+
                         " td { padding:"+abstandZelle+"px; border:0px solid "+htmlFarbTableBorderColor+";  border-right:"+borderHelpRight+"px solid "+htmlFarbTableBorderColor+";border-bottom:"+borderHelpBottum+"px solid "+htmlFarbTableBorderColor+";}"+ 
                         " table { width: "+weite+";  margin: 0 "+htmlcenterHelp+"; border:1px solid "+htmlFarbTableBorderColor+"; border-spacing=\""+abstandZelle+"0px\" ; }"+   // margin macht center
                         "td:nth-child(1) {width: "+htmlSpalte1Weite+"}"+"td:nth-child(2) {width:"+htmlSpalte1Weite+"}"+
                         " </style></head><body> <div>";
      //const htmlUeber=    "<p style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-weight: bold\">"+htmlFeldUeber+"</p>";                    
      const htmlTabStyle= "<table bordercolor=\""+htmlFarbTableBorderColor+"\" border=\"2px\" cellspacing=\""+abstandZelle+"\" cellpadding=\""+abstandZelle+"\" width=\""+weite+"\" rules=\""+htmlRahmenLinien+"\" style=\"color:"+htmlFarbFelderschrift+";  font-size:"+htmlSchriftgroesse+
                            "; font-family:"+htmlSchriftart+";background-image: linear-gradient(42deg,"+htmlFarbTableColorGradient2+","+htmlFarbTableColorGradient1+");\">";
      const htmlTabUeber1="<tr height=\""+UeberSchriftHöhe+"\" style=\"color:"+htmlFarbTableColorUber+"; font-size: "+groesseUeberschrift+"px; font-weight: "+UeberschriftStyle+" ;  border-bottom: "+LinieUnterUeberschrift+"px solid "+farbeLinieUnterUeberschrift+" \">";
      const htmlTabUeber3="</tr>";
      /*
      table td:first-child {}  //1
      table td:nth-child(2) {} //2
      table td:nth-child(3) {} //3
      table td:last-child {}   //4
      */
       
      const buttonScript =  '<script> function setOnDblClickCustomShop( myvalue ) {	var Self = this; var objID = myvalue;	vis.setValue(myvalue,true);  var2 = \"' + dpPrefix + 'Alexa_Listen.ALEXALists.Einkauf.Refresh\"; vis.setValue(var2,true);  console.log("www")  } </script>'
       
      // const buttonScript =  '<script> function setOnDblClickCustom( myvalue ) {	var Self = this; var objID = myvalue;	Self.servConn.getStates(objID, (error, states) => {  console.log(states);  Self.servConn.setState(objID, true);  }); var2 = \"javascript.0.Alexa_Listen.ALEXALists.Einkauf.Refresh\"; Self.servConn.setState(var2, true); console.log("www")} </script>'
       
      //NICHTS ÄNDERN - abhängig von den oben definierten _Spalten - in diesem Beispiel sind es 3
       
         	var htmlTabUeber2="<td width="+htmlSpalte1Weite+" align="+Feld1lAlign+">&ensp;"+htmlFeld1+"&ensp;</td><td width="+htmlSpalte1Weite+" align="+Feld2lAlign+">&ensp;"+htmlFeld2+"&ensp;</td><td  align="+Feld3lAlign+">&ensp;"+htmlFeld3+"&ensp;</td>";
      var htmlTabUeber2_1="<td width="+htmlSpalte1Weite+" align="+Feld1lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld1+"&ensp;</td><td width="+htmlSpalte1Weite+"  align="+Feld2lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld2+
                         "&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld3+"&ensp;</td>";
      //------------------------------------------------------
       
       
      var htmlTabUeber="";
      var htmlOut="";
      var mix;
      var counter;
      var warte;
      var myIDArr=[];
      let myDeleterArr;
      var myRememberList="";
      var myTelegram=false;
      var telegramString="telegram.0";
      //HIER SIND DIE  WERTE, DIE IN DER SCHLEIFE GEFILTERET WER%DEN - Jede spalte einen wert - jeder valx muss in dieser schleife gesetzt werden !!
      var val1; var val2; var val0; var val3; var valSort; 
       
      function writeHTML(){
       
       
      htmlOut="";
       
      counter=-1;
      htmlTabUeber="";
      switch (mehrfachTabelle) { 
         case 1: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber3;  break;
         case 2: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break;
         case 3: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber2+htmlTabUeber3; break;
         case 4: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break;
      };   
      if (!UeberschriftSpalten) {htmlTabUeber=""}
       
      var valID; var myListWerte=""; var myListAuswahl="";
      //--------------------------------------------------------------------------------------------------------------------------------------------------
      //---------hier kommt eure schleife rein counter++, tabelleBind() und tabelleFinish() müssen so integriert bleiben !!!------------------------------
      //---------alle valx werte müssen von euch bestimmt werden - val0,val1,val2 !!!---------------------------------------------------------------------
      //--------------------------------------------------------------------------------------------------------------------------------------------------
      var myArr=[]; var myList=""; var myListArr=[]; myIDArr=[]; myDeleterArr=[];
       
       let myhelerArr=getState("alexa2.0.Lists.SHOPPING_LIST.json").val;
       myDeleterArr.push("alexa2.0.Lists.SHOPPING_LIST.json")
       
      myListArr.push('0'+":"+'choose ...'+";");
                  myListWerte=myListWerte+"choose ..."+";";
                 myListAuswahl=myListAuswahl+(0+";");
                 myIDArr.push("dummy");
      $('alexa2.0.Lists.SHOPPING_LIST.items.*.value').each(function(id, i) {           // hier eigene schleife definierenalexa2.0.Lists.SHOPPING_LIST.items.0f43141e-029c-4860-bcd0-828702b0dc86.value
              
              let ida=id.split('.')
             // log(myhelerArr)
             // log(myhelerArr.includes(ida[5]))
               if(myhelerArr.includes(ida[5])) {
               
                if(!getState(id.replace("value","completed")).val) {
                 val0=getState(id).val;
                 val1=getState(id.replace("value","completed")).val; 
                 val2=valSort=getState(id.replace("value","updatedDateTime")).val; 
                 valID=getState(id.replace("value","id")).val; 
                 myIDArr.push(valID);
                 var yy= (Math.round((new Date()).getTime() / 1000))-Math.round(val2/1000);
                 val2=formatDate(getDateObject(val2), "TT.MM(SS:mm)")
                 val3=(Math.floor( ((yy)/60/60/24) )+"d "+ Math.floor(((yy)/60/60) % 24) +"h "+ Math.floor( ((yy)/60) % 60 )+"m")
              //   if (val1==false) {val1="❌"} else{val1="✅"}
                  let valButton=id.replace("value","#delete")
                  myDeleterArr.push(id.replace("value","#delete"))
                 //log(valButton)
                 val1="<button style\=\"border:none\; background-color\:transparent\; color\:white\; font\-size\:1em\; text\-align:left\" value=\"toggle\" onclick=\"setOnDblClickCustomShop\(\'"+valButton+"\')\">"+symbolLink + "</button> <font color=\""+farbeSchalterON+"\">";
                 myArr.push([val0,val1,val2,val3,valSort]);
                 val0=val0.replace(/,/g,'-');  
                 myListArr.push((i+1)+":"+val0+";");
                 myListWerte=myListWerte+val0+";";
                 myListAuswahl=myListAuswahl+(i+1)+";";
                }} else{ //log('alexa2.0.Lists.SHOPPING_LIST.items.'+ida[5]);
                         deleteObject('alexa2.0.Lists.SHOPPING_LIST.items.'+ida[5], true);
                }
      });
           //  log(myIDArr.toString())
       
              //log (myListArr.toString());
             for (var x=0;x<myListArr.length;x++){
               myList=myList.concat(myListArr[x]);
              // log(myListArr[x]);
               //log(myList);
       
             }
            // log("-----------myList : "+myList)
             if(myList!=myRememberList){
                 myTelegram=true; //log("ist true")
                 setStateDelayed(dPDELETEWert, myListAuswahl,500);        
                 setStateDelayed(dPDELETEAuswahl,  myListWerte,500);
               var timeout = setTimeout(function () {
                 // var obj = getObject(dPDELETE);
                  // log("11---"+myList);
                 // obj.common.states=myList;
                  myRememberList=myList;
                  //log("22---"+myList);
                 extendObject(dPDELETE, {common: {states: myList}});   
               }, 400);
             }
       //SORT
       
         if (sortList==1) {
                       myArr.sort(function (alpha, beta) {
                    if (alpha[4] > beta[4])
                       return -1;
                    if (beta[4] > alpha[4])
                       return 1;
                    return 0;
                   });
                          } else
             {          myArr.sort(function (alpha, beta) {
                    if (alpha[0].toUpperCase() > beta[0].toUpperCase())
                       return 1;
                    if (beta[0].toUpperCase() > alpha[0].toUpperCase())
                       return -1;
                    return 0;
                   });
       
                          }
       
                          telegramString="";
        for (var x=0 ; x<myArr.length ; x++) {
            counter++;
           //HIER WERDEN DIE DATEN DER SCHLEIFE ZUSAMMENGESETZT - hat man oben 2 Felder definiert, braucht man hier 2 Werte
             val0=myArr[x][0];
             val1=myArr[x][1];
             var val2help=myArr[x][2]
             var val3help=myArr[x][3];
             if (mitErstelldatum) {val2=val3help+" am "+val2help;} else {val2=val3help}
            
               
             if (backgroundAll) {
                telegramString=telegramString+ myArr[x][0] + " - "+myArr[x][2] + '\n';   // "-"+ myArr[x][1]  +
               
             }  
              tabelleBind(); 
        }
      //-------------------------------------------------------------------------------------------------------------------------------------------------
      //--------------------------------------------------Ende der schleife------------------------------------------------------------------------------
      //-------------------------------------------------------------------------------------------------------------------------------------------------
       
            tabelleFinish(); // AB HIER NICHTS ÄNDERN - tabelle fertigstellen
           
      } // function ende
       
      //MAIN:
       
      schedule(mySchedule,  function () { 
        var timeout = setTimeout(function () {
        if(!getState(dpDelAll).val) writeHTML();
          if (braucheEinFile) {writeFile(home, path ,htmlOut, function (error) { /* log('file written');*/  });}
          }, 500);
       
      }); 
       var timeout = setTimeout(function () {
      writeHTML(); 
       }, 2000);                                  //     <tdalign
       
       function tabelleBind(){
         //  counter=counter+mehrfachTabelle;
             switch (mehrfachTabelle) { 
       
               case 1: if(counter%2==0)         {  htmlOut=htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td></tr>"; break;}else    
                                                {  htmlOut=htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td></tr>"; break;}
               case 2: if(counter%4==0){
                          if(counter%2==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                                              ";\" align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>"; } 
                                     else {htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td></tr>";} break;
                            }else{
                                      if(counter%2==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                                              ";\"align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>"; } 
                                     else {htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td></tr>";} break;}
                                          
               case 3:if(counter%2==0)   {
                          if(counter%3==0 )  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                                              ";\"align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>"; } //Teil1 c=0
                                     else { if(counter%3==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                                              "; \"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td>";} //Teil 2 c=1
                                                      else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td></tr>";} //Teil 3 c=3
                                                } break;}else{
                          if(counter%3==0 )  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                                              ";\"align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>"; } 
                                     else { if(counter%3==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                                              ";\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td>";} 
                                                      else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td></tr>";}
                                                } break;}                                          
       
       
               case 4:  // counter=counter+8;
                         if(counter%8==0)   {
                         if(counter%4==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td  style=\" border-right: "+trennungsLinie+"px solid "+ farbetrennungsLinie+";\" align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>"; } // teil1
                                         else {if(counter%4==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td>";} //teil 2
                                                      else    {if(counter%4==3)  { htmlOut= htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td></tr>";} //teil 4
                                                                        else    {htmlOut  = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\"  align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>";}} //teil 3
                                                } break;}else{
                         if(counter%4==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td  style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\" align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>"; } //teil 1
                                         else {if(counter%4==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td>";} // teil 2
                                                      else    {if(counter%4==3)  { htmlOut= htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td></tr>";} // teil 4
                                                                        else    {htmlOut  = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\"align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>";}} //teil 3
                                                } break;}                                    
              } //switch ende
       
      }
       
      function tabelleFinish() {
       
      switch (mehrfachTabelle) {  
             case 1:    break;
       
             case 2:    
                        if(counter%2==0)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');
                      
                        break;
       
             case 3:   if(counter%3==2)  htmlOut = htmlOut.replace(/<\/td>$/, "</td></tr>");
                       if(counter%3==1)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");        
                       if(counter%3==0)      htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td  style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");
                     
                        break;
             case 4:   if(counter%4==3)  htmlOut = htmlOut.replace(/<\/td>$/, "</td></tr>");
                       if(counter%4==2)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");
                       if(counter%4==1)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");    
                       if(counter%4==0)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td><td>&ensp;</td><td>&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");      
                       break; }
           
               var htmlUeber=    "<p style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: "+htmlÜberFontGroesse+"; font-weight:"+htmlSchriftWeite+ "\">"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</p>"; 
             var htmlUnter= "<div  style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: 70%; text-align: right;\" >"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</div>";
              
              if (!htmlSignature) htmlUnter="";
                //Ausgabe über VIS html widget - tabelle in datenpunkt schreiben - html tabelle ohne html header und body
                 var htmlOutVIS="";
               //  htmlUberschrift ? htmlOutVIS=htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>" : htmlOutVIS=htmlTabStyle+htmlTabUeber+htmlOut+"</table>";
                  if (htmlUberschrift) 
                      { zentriert ? htmlOutVIS=htmlZentriert+htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter+ buttonScript : htmlOutVIS=htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter+ buttonScript ;
       
                    } else {
                     zentriert ?  htmlOutVIS=htmlZentriert+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter+ buttonScript :  htmlOutVIS=htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter+ buttonScript;
       
                       }
                       
       
        // log("bin raus aus tabelleBind");
                 if (braucheEinVISWidget) setState(dpVIS, htmlOutVIS );
       
       var htmlUnter= "<div  style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: 80%;  text-align: center; \" >"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</div>"
       
       if (!htmlSignature) htmlUnter="";
        var htmlEnd="</table>"+htmlUnter+"</div></body>";
       //mit oder ohne überschrift - zentriert oder links
      htmlUberschrift ? htmlOut=htmlStart+htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd : htmlOut=htmlStart+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd;
       //log(htmlOut);
       setState(dpANLEGEN,"");
       setState(dpAnzahl,(counter+1));
       setState(dPDELETE,0);
       
       
       if(myTelegram && braucheTelegram){ 
           //log("sende");
           myTelegram=false;
           
          sendTo('telegram.0', {
              
         text: (telegramString),
         type: 'text'
         });
       
      telegramString="";
       
      }
      } // function ende
       
      setTimeout(function () {
      on({id: dPDELETE, ack: false, change: "ne"}, function (obj) { 
        
         let a=getState(dPDELETE).val;
         if (a!=0){
         let toDelete=myIDArr[getState(dPDELETE).val];
         var stateHelp="alexa2.0.Lists.SHOPPING_LIST.items."+toDelete+".#delete"
         setState(stateHelp,true);
         var timeout = setTimeout(function () {
         writeHTML(); }, 4000);
       
       
         }
        // log("1+bin im on !!!+++!"+a+stateHelp)
         });
       
         on({id: dpANLEGEN, ack: false, change: "ne"}, function (obj) { 
            // log(getState(dpANLEGEN).val+"----aa");
             if(getState(dpANLEGEN).val!="") {
          setState("alexa2.0.Lists.SHOPPING_LIST.#New",getState(dpANLEGEN).val)
             var timeout = setTimeout(function () {
         writeHTML(); }, 2000);
             } 
             
         });
       
             on({id: dpRefresh, ack: false, change: "any"}, function (obj) { 
             //log(getState(dpANLEGEN).val+"----refresh");
             var timeout2 = setTimeout(function () {
         writeHTML(); }, 4000);
            // }
         
         });  
       
            on({id: myDeleterArr, ack: false, change: "any"}, function (obj) { 
             //log(getState(dpANLEGEN).val+"----refresh");
             var timeout2 = setTimeout(function () {
         writeHTML(); }, 4000);
        
            // }
         
         });
       
         
           on({id: dpDelAll, ack: false,val: true}, function (obj) { 
       let i;
       for (i=0;i<myIDArr.length;i++) {//log("hier : "+myIDArr[i]);
         if (myIDArr[i]!="dummy") {
         let toDelete=myIDArr[i];
            setTimeout( function timer(){
            var stateHelp="alexa2.0.Lists.SHOPPING_LIST.items."+toDelete+".#delete"
         log("Statehelp: "+stateHelp)
         setState(stateHelp,true);
         }, i*2500 );
       
        
         }
         }
         log(i.toString())
         var timeout = setTimeout(function () {
              setState(dpDelAll,false);
              writeHTML(); }, (1+myIDArr.length)*1500);
        
        // log(stateHelp)
       
       });
       
      }, 5000);
       
       
       
       
       
      
      
      liv-in-sky 1 Reply Last reply Reply Quote 0
      • L
        lucajordi last edited by lucajordi

        Kommando zurück!

        Hatte das falsche Widget!
        Richtiges importiert, Werte angepasst und funktioniert!
        Danke dir!

        1 Reply Last reply Reply Quote 0
        • L
          lucajordi last edited by

          Kann ich das "Choose" irgendwo in einen anderen Text wandeln?

          1 Reply Last reply Reply Quote 0
          • liv-in-sky
            liv-in-sky @lucajordi last edited by

            @lucajordi probier mal das widget

            [{"tpl":"tplJquiSelectList","data":{"oid":"javascript.0.Alexa_Listen.ALEXALists.Einkauf.AuswahlDelete","g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","values":"{javascript.0.Alexa_Listen.ALEXALists.Einkauf.AuswahlDeleteWerte}","texts":"{javascript.0.Alexa_Listen.ALEXALists.Einkauf.AuswahlDeleteTexte}","height":"234","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"open":false,"no_style":false},"style":{"left":"186px","top":"112px","width":"253px","height":"20px","text-align":"center","z-index":"500","font-size":"12px","color":"#5ff1ee"},"widgetSet":"jqui"}]
            

            L 1 Reply Last reply Reply Quote 0
            • L
              lucajordi @liv-in-sky last edited by

              @liv-in-sky
              Funktioniert, aber steht immer noch "choose"...
              Hätte gerne "Auswahl" oder ähnliches da stehen...

              liv-in-sky 2 Replies Last reply Reply Quote 0
              • liv-in-sky
                liv-in-sky @lucajordi last edited by

                @lucajordi eigentlich brauchst du das nicht - du jkannst ja direkt in der zeile löschen

                1 Reply Last reply Reply Quote 0
                • liv-in-sky
                  liv-in-sky @lucajordi last edited by

                  @lucajordi

                  ansonsten muss t du überall im script das wort choose ersetzen

                  mit Strg-f kannst du im script suchen

                  L 1 Reply Last reply Reply Quote 0
                  • L
                    lucajordi @liv-in-sky last edited by

                    @liv-in-sky
                    Vielen Dank!
                    Hat funktioniert...

                    Nächste Frage:

                    wie bekomme ich die Spalte erstellt vor komplett weg?
                    mit auskommentieren gibt es einen Fehler...

                    e4f2845b-3810-4741-aeb5-b9efc4fc94cc-image.png

                    liv-in-sky 1 Reply Last reply Reply Quote 0
                    • liv-in-sky
                      liv-in-sky @lucajordi last edited by

                      @lucajordi

                      probiere es so:

                      diese 3 zeilen ändern

                      Image 8.png Image 7.png

                      L 1 Reply Last reply Reply Quote 0
                      • L
                        lucajordi @liv-in-sky last edited by

                        @liv-in-sky
                        Sorry für die späte Rückmeldung!

                        Leider noch das gleiche...:

                        0d660cdf-8b87-4d9b-a363-3e081edf9c2a-image.png

                        liv-in-sky 1 Reply Last reply Reply Quote 0
                        • liv-in-sky
                          liv-in-sky @lucajordi last edited by liv-in-sky

                          @lucajordi

                          hast du das script neu runter geladen ? - ich weiß ja nicht, was du alles geändert hast

                          L 1 Reply Last reply Reply Quote 0
                          • L
                            lucajordi @liv-in-sky last edited by

                            @liv-in-sky
                            habe die 3 Zeilen auskommentiert, sonst nichts!

                            liv-in-sky 1 Reply Last reply Reply Quote 0
                            • liv-in-sky
                              liv-in-sky @lucajordi last edited by

                              @lucajordi

                              teste mal das

                               //@liv-in-sky 2022  14.2.-16:09
                               
                               const dpPrefix = "javascript."+ instance +".";
                              createState("Alexa_Listen.ALEXALists.Einkauf.Anlegen"             , "",{ name: 'Anlegen_VIS',  type: 'string', read:  true,  write: true,});
                              createState("Alexa_Listen.ALEXALists.Einkauf.ALEXAEinkauf"           , { name: 'ALEXAEinkauf_VIS',  type: 'string', read:  true,  write: true,});
                              createState("Alexa_Listen.ALEXALists.Einkauf.AuswahlDeleteWerte"   , { name: 'AuswahlDeleteWert_VIS',  type: 'string', read:  true,  write: true,});
                              createState("Alexa_Listen.ALEXALists.Einkauf.AuswahlDeleteTexte"  , { name: 'AuswahlDeleteTexte_VIS',  type: 'string', read:  true,  write: true,});
                              createState("Alexa_Listen.ALEXALists.Einkauf.Anzahl"  , { name: 'Einkauf_Anzahl_VIS',  type: 'number', read:  true,  write: true,});
                              createState("Alexa_Listen.ALEXALists.Einkauf.DeleteALL"  , { name: 'Einkauf_DeleteALL',  type: 'boolean', role: 'switch', read:  true,  write: true,});
                              createState("Alexa_Listen.ALEXALists.Einkauf.Refresh"  , { name: 'Refresh',  type: 'boolean', role: 'switch', read:  true,  write: true,});
                              //createState("Alexa_Listen.ALEXALists.Einkauf.AuswahlDelete"       , { name: 'AuswahlDelete_VIS',  type: 'number', read:  true,  write: true,});
                              
                              createState("Alexa_Listen.ALEXALists.Einkauf.AuswahlDelete", {
                              name: 'AuswahlDelete',
                               role: "state",
                               type: "number",
                               states: "0:choose ...;1:eeee;2:test1;3:test;",
                               min: 0,
                               max: 50,
                               def: 0,
                               read: true,
                               write: true});
                              
                              
                              
                              
                              //HIER WIRD PFAD UND FILENAME DEFINIERT
                              const path = "/htmltelegram.html";                   //FIlenamen definieren
                              const home ='vis.0'                                 //wo soll das file im iobroker-file-system liegen ? (oder z.b auch iqontrol.meta)
                              let   braucheEinFile=false;                          // bei true wird ein file geschrieben - für iqontrol
                              let   braucheEinVISWidget=true;                     // bei true wird ein html-tabelle in einen dp geschrieben 
                              let   braucheTelegram=true;
                              let dpVIS=dpPrefix+"Alexa_Listen.ALEXALists.Einkauf.ALEXAEinkauf";                      // dp  für VIS-HTML-Basic-Widget // Datentyp: String
                              let dPDELETE=dpPrefix+"Alexa_Listen.ALEXALists.Einkauf.AuswahlDelete";                  // Datentyp: Werteliste
                              let dPDELETEWert=dpPrefix+"Alexa_Listen.ALEXALists.Einkauf.AuswahlDeleteWerte";         // Datentyp: String
                              let dPDELETEAuswahl=dpPrefix+"Alexa_Listen.ALEXALists.Einkauf.AuswahlDeleteTexte";      // Datentyp: String
                              let dpANLEGEN=dpPrefix+"Alexa_Listen.ALEXALists.Einkauf.Anlegen";                       // Datentyp: String
                              let dpAnzahl=dpPrefix+"Alexa_Listen.ALEXALists.Einkauf.Anzahl";                         // Datentyp: Number
                              let dpDelAll=dpPrefix+"Alexa_Listen.ALEXALists.Einkauf.DeleteALL";                      // Datentyp: Boolean
                              let dpRefresh=dpPrefix+"Alexa_Listen.ALEXALists.Einkauf.Refresh";                      // Datentyp: Boolean
                              let mySchedule=" */30 * * * * * ";                       
                              let sortList=1;                                                                         // SORTIERUNG 1=nach datum; 2 nach Einkauf's
                              let mitErstelldatum=false;
                              var symbolLink="⚪";                                                                    //  👎  💀 ❌  ⚪  ⚫ ⭕  🔴 🔵
                              let farbeSchalterON="blue";
                              //---------------------------------------
                              
                              //HIER DIE SPALTEN ANZAHL DEFINIEREN - jede Spalte einen Wert - in diesem Beispiel sind es 3
                              var htmlFeld1='Einkauf';       var Feld1lAlign="left";                     // überschrift Tabellen Spalte1 und  Ausrichtung left or center
                              var htmlFeld2='Del';        var Feld2lAlign="center";                      // überschrift Tabellen Spalte2 und  Ausrichtung left,right or center
                              var htmlFeld3='';         var Feld3lAlign="center";                    // überschrift Tabellen Spalte3 und  Ausrichtung left,right or center
                              //-----------------------------------
                              
                              
                              //hier werden die styles für die tabelle definiert
                              //ÜBERSCHRIFT ÜBER TABELLE
                              let   htmlUberschrift=false;                           // mit Überschrift über der tabelle
                              let   htmlSignature=false;                              // anstatt der Überscghrift eine signature: - kleiner - anliegend
                              const htmlFeldUeber='ALEXA Einkaufsliste';              // Überschrift und Signature
                              const htmlFarbUber="white";                         // Farbe der Überschrift
                              const htmlSchriftWeite="normal";                       // bold, normal - Fettschrift für Überschrift
                              const htmlÜberFontGroesse="18px";                       // schriftgröße überschrift
                              //MEHRERE TABELLEN NEBENEINANDER
                              let   mehrfachTabelle=1;                              // bis zu 4 Tabellen werden nebeneinander geschrieben-  verkürzt das Ganze, dafür etwas breiter - MÖGLICH 1,2,3,oder 4 !!!
                              const trennungsLinie="2";                             //extra trennungslinie bei mehrfachtabellen - evtl auf 0 stellen, wnn htmlRahmenLinien auf none sind
                              const farbetrennungsLinie="white";
                              const htmlFarbZweiteTabelle="white";                // Farbe der Überschrift bei jeder 2.ten Tabelle
                              const htmlFarbTableColorUber="#BDBDBD";               // Überschrift in der tabelle - der einzelnen Spalten
                              //ÜBERSCHRIFT SPALTEN
                              const UeberSchriftHöhe="35";                          //Überschrift bekommt mehr Raum - darunter und darüber - Zellenhöhe
                              const LinieUnterUeberschrift="3";                   // Linie nur unter Spaltenüberschrift - 
                              const farbeLinieUnterUeberschrift="white";
                              const groesseUeberschrift=16;
                              const UeberschriftStyle="normal"                     // möglich "bold"
                              //GANZE TABELLE
                              let abstandZelle="3";
                              let farbeUngeradeZeilen="#000000";                     //Farbe für ungerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2
                              let farbeGeradeZeilen="#2E2E2E";                        //Farbe für gerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2
                              let weite="auto";                                     //Weite der Tabelle
                              let zentriert=true;                                   //ganze tabelle zentriert
                              const backgroundAll="#000000";                        //Hintergrund für die ganze Seite - für direkten aufruf oder iqontrol sichtber - keine auswirkung auf vis-widget
                              const htmlSchriftart="Helvetica";
                              const htmlSchriftgroesse="14px";
                              //FELDER UND RAHMEN
                              let   UeberschriftSpalten=true;                // ein- oder ausblenden der spatlen-überschriften
                              const htmlFarbFelderschrift="lightblue";                  // SchriftFarbe der Felder
                              const htmlFarbFelderschrift2="#D8D8D8";                 // SchriftFarbe der Felder für jede 2te Tabelle
                              const htmlFarbTableColorGradient1="#424242";          //  Gradient - Hintergrund der Tabelle - Verlauffarbe
                              const htmlFarbTableColorGradient2="#424242";          //  Gradient - Hintergrund der Tabelle - ist dieser Wert gleich Gradient1 gibt es keinen verlauf
                              const htmlFarbTableBorderColor="grey";             // Farbe des Rahmen - is tdieser gleich den gradienten, sind die rahmen unsichtbar
                              let htmlRahmenLinien="none";                            // Format für Rahmen: MÖGLICH: "none" oder "all" oder "cols" oder "rows"
                              const htmlSpalte1Weite="auto";                   //  Weite der ersten beiden  Spalten oder z.b. 115px
                              
                              // HIER NICHTS  ÄNDERN
                              
                              let borderHelpBottum;
                              let borderHelpRight;
                              let htmlcenterHelp;
                              let htmlcenterHelp2;
                              
                              if(htmlRahmenLinien=="rows") {borderHelpBottum=1;borderHelpRight=0;}
                              if(htmlRahmenLinien=="cols") {borderHelpBottum=0;borderHelpRight=1;}
                              if(htmlRahmenLinien=="none") {borderHelpBottum=0;borderHelpRight=0;}
                              if(htmlRahmenLinien=="all")  {borderHelpBottum=1;borderHelpRight=1;}
                              zentriert ? htmlcenterHelp="auto" : htmlcenterHelp="left";
                              zentriert ? htmlcenterHelp2="center" : htmlcenterHelp2="left";
                              
                              
                              const htmlZentriert='<center>'
                              const htmlStart=    "<!DOCTYPE html><html lang=\"de\"><head><title>Vorlage</title><meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\">"+
                                                 "<style> * {  margin: 0;} body {background-color: "+backgroundAll+"; margin: 0 auto;  }"+
                                                 " p {padding-top: 10px; padding-bottom: 10px; text-align: "+htmlcenterHelp2+"}"+
                                                // " div { margin: 0 auto;  margin-left: auto; margin-right: auto;}"+
                                                 " td { padding:"+abstandZelle+"px; border:0px solid "+htmlFarbTableBorderColor+";  border-right:"+borderHelpRight+"px solid "+htmlFarbTableBorderColor+";border-bottom:"+borderHelpBottum+"px solid "+htmlFarbTableBorderColor+";}"+ 
                                                 " table { width: "+weite+";  margin: 0 "+htmlcenterHelp+"; border:1px solid "+htmlFarbTableBorderColor+"; border-spacing=\""+abstandZelle+"0px\" ; }"+   // margin macht center
                                                 "td:nth-child(1) {width: "+htmlSpalte1Weite+"}"+"td:nth-child(2) {width:"+htmlSpalte1Weite+"}"+
                                                 " </style></head><body> <div>";
                              //const htmlUeber=    "<p style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-weight: bold\">"+htmlFeldUeber+"</p>";                    
                              const htmlTabStyle= "<table bordercolor=\""+htmlFarbTableBorderColor+"\" border=\"2px\" cellspacing=\""+abstandZelle+"\" cellpadding=\""+abstandZelle+"\" width=\""+weite+"\" rules=\""+htmlRahmenLinien+"\" style=\"color:"+htmlFarbFelderschrift+";  font-size:"+htmlSchriftgroesse+
                                                    "; font-family:"+htmlSchriftart+";background-image: linear-gradient(42deg,"+htmlFarbTableColorGradient2+","+htmlFarbTableColorGradient1+");\">";
                              const htmlTabUeber1="<tr height=\""+UeberSchriftHöhe+"\" style=\"color:"+htmlFarbTableColorUber+"; font-size: "+groesseUeberschrift+"px; font-weight: "+UeberschriftStyle+" ;  border-bottom: "+LinieUnterUeberschrift+"px solid "+farbeLinieUnterUeberschrift+" \">";
                              const htmlTabUeber3="</tr>";
                              /*
                              table td:first-child {}  //1
                              table td:nth-child(2) {} //2
                              table td:nth-child(3) {} //3
                              table td:last-child {}   //4
                              */
                              
                              const buttonScript =  '<script> function setOnDblClickCustomShop( myvalue ) {	var Self = this; var objID = myvalue;	vis.setValue(myvalue,true);  var2 = \"' + dpPrefix + 'Alexa_Listen.ALEXALists.Einkauf.Refresh\"; vis.setValue(var2,true);  console.log("www")  } </script>'
                              
                              // const buttonScript =  '<script> function setOnDblClickCustom( myvalue ) {	var Self = this; var objID = myvalue;	Self.servConn.getStates(objID, (error, states) => {  console.log(states);  Self.servConn.setState(objID, true);  }); var2 = \"javascript.0.Alexa_Listen.ALEXALists.Einkauf.Refresh\"; Self.servConn.setState(var2, true); console.log("www")} </script>'
                              
                              //NICHTS ÄNDERN - abhängig von den oben definierten _Spalten - in diesem Beispiel sind es 3
                              
                                 	var htmlTabUeber2="<td width="+htmlSpalte1Weite+" align="+Feld1lAlign+">&ensp;"+htmlFeld1+"&ensp;</td><td width="+htmlSpalte1Weite+" align="+Feld2lAlign+">&ensp;"+htmlFeld2+"&ensp;</td><td  align="+Feld3lAlign+">&ensp;"+htmlFeld3+"&ensp;</td>";
                              var htmlTabUeber2_1="<td width="+htmlSpalte1Weite+" align="+Feld1lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld1+"&ensp;</td><td width="+htmlSpalte1Weite+"  align="+Feld2lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld2+
                                                 "&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld3+"&ensp;</td>";
                              //------------------------------------------------------
                              
                              
                              var htmlTabUeber="";
                              var htmlOut="";
                              var mix;
                              var counter;
                              var warte;
                              var myIDArr=[];
                              let myDeleterArr;
                              var myRememberList="";
                              var myTelegram=false;
                              var telegramString="telegram.0";
                              //HIER SIND DIE  WERTE, DIE IN DER SCHLEIFE GEFILTERET WER%DEN - Jede spalte einen wert - jeder valx muss in dieser schleife gesetzt werden !!
                              var val1; var val2; var val0; var val3; var valSort; 
                              
                              function writeHTML(){
                              
                              
                              htmlOut="";
                              
                              counter=-1;
                              htmlTabUeber="";
                              switch (mehrfachTabelle) { 
                                 case 1: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber3;  break;
                                 case 2: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break;
                                 case 3: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber2+htmlTabUeber3; break;
                                 case 4: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break;
                              };   
                              if (!UeberschriftSpalten) {htmlTabUeber=""}
                              
                              var valID; var myListWerte=""; var myListAuswahl="";
                              //--------------------------------------------------------------------------------------------------------------------------------------------------
                              //---------hier kommt eure schleife rein counter++, tabelleBind() und tabelleFinish() müssen so integriert bleiben !!!------------------------------
                              //---------alle valx werte müssen von euch bestimmt werden - val0,val1,val2 !!!---------------------------------------------------------------------
                              //--------------------------------------------------------------------------------------------------------------------------------------------------
                              var myArr=[]; var myList=""; var myListArr=[]; myIDArr=[]; myDeleterArr=[];
                              
                               let myhelerArr=getState("alexa2.0.Lists.SHOPPING_LIST.json").val;
                               myDeleterArr.push("alexa2.0.Lists.SHOPPING_LIST.json")
                              
                              myListArr.push('0'+":"+'choose ...'+";");
                                          myListWerte=myListWerte+"choose ..."+";";
                                         myListAuswahl=myListAuswahl+(0+";");
                                         myIDArr.push("dummy");
                              $('alexa2.0.Lists.SHOPPING_LIST.items.*.value').each(function(id, i) {           // hier eigene schleife definierenalexa2.0.Lists.SHOPPING_LIST.items.0f43141e-029c-4860-bcd0-828702b0dc86.value
                                      
                                      let ida=id.split('.')
                                     // log(myhelerArr)
                                     // log(myhelerArr.includes(ida[5]))
                                       if(myhelerArr.includes(ida[5])) {
                                       
                                        if(!getState(id.replace("value","completed")).val) {
                                         val0=getState(id).val;
                                         val1=getState(id.replace("value","completed")).val; 
                                         val2=valSort=getState(id.replace("value","updatedDateTime")).val; 
                                         valID=getState(id.replace("value","id")).val; 
                                         myIDArr.push(valID);
                                         var yy= (Math.round((new Date()).getTime() / 1000))-Math.round(val2/1000);
                                         val2=formatDate(getDateObject(val2), "TT.MM(SS:mm)")
                                         val3=(Math.floor( ((yy)/60/60/24) )+"d "+ Math.floor(((yy)/60/60) % 24) +"h "+ Math.floor( ((yy)/60) % 60 )+"m")
                                      //   if (val1==false) {val1="❌"} else{val1="✅"}
                                          let valButton=id.replace("value","#delete")
                                          myDeleterArr.push(id.replace("value","#delete"))
                                         //log(valButton)
                                         val1="<button style\=\"border:none\; background-color\:transparent\; color\:white\; font\-size\:1em\; text\-align:left\" value=\"toggle\" onclick=\"setOnDblClickCustomShop\(\'"+valButton+"\')\">"+symbolLink + "</button> <font color=\""+farbeSchalterON+"\">";
                                         myArr.push([val0,val1,val2,val3,valSort]);
                                         val0=val0.replace(/,/g,'-');  
                                         myListArr.push((i+1)+":"+val0+";");
                                         myListWerte=myListWerte+val0+";";
                                         myListAuswahl=myListAuswahl+(i+1)+";";
                                        }} else{ //log('alexa2.0.Lists.SHOPPING_LIST.items.'+ida[5]);
                                                 deleteObject('alexa2.0.Lists.SHOPPING_LIST.items.'+ida[5], true);
                                        }
                              });
                                   //  log(myIDArr.toString())
                              
                                      //log (myListArr.toString());
                                     for (var x=0;x<myListArr.length;x++){
                                       myList=myList.concat(myListArr[x]);
                                      // log(myListArr[x]);
                                       //log(myList);
                              
                                     }
                                    // log("-----------myList : "+myList)
                                     if(myList!=myRememberList){
                                         myTelegram=true; //log("ist true")
                                         setStateDelayed(dPDELETEWert, myListAuswahl,500);        
                                         setStateDelayed(dPDELETEAuswahl,  myListWerte,500);
                                       var timeout = setTimeout(function () {
                                         // var obj = getObject(dPDELETE);
                                          // log("11---"+myList);
                                         // obj.common.states=myList;
                                          myRememberList=myList;
                                          //log("22---"+myList);
                                         extendObject(dPDELETE, {common: {states: myList}});   
                                       }, 400);
                                     }
                               //SORT
                              
                                 if (sortList==1) {
                                               myArr.sort(function (alpha, beta) {
                                            if (alpha[4] > beta[4])
                                               return -1;
                                            if (beta[4] > alpha[4])
                                               return 1;
                                            return 0;
                                           });
                                                  } else
                                     {          myArr.sort(function (alpha, beta) {
                                            if (alpha[0].toUpperCase() > beta[0].toUpperCase())
                                               return 1;
                                            if (beta[0].toUpperCase() > alpha[0].toUpperCase())
                                               return -1;
                                            return 0;
                                           });
                              
                                                  }
                              
                                                  telegramString="";
                                for (var x=0 ; x<myArr.length ; x++) {
                                    counter++;
                                   //HIER WERDEN DIE DATEN DER SCHLEIFE ZUSAMMENGESETZT - hat man oben 2 Felder definiert, braucht man hier 2 Werte
                                     val0=myArr[x][0];
                                     val1=myArr[x][1];
                                     var val2help=''//myArr[x][2]
                                     var val3help=''//myArr[x][3];
                                     if (mitErstelldatum) {val2=val3help+" am "+val2help;} else {val2=val3help}
                                    
                                       
                                     if (backgroundAll) {
                                        telegramString=telegramString+ myArr[x][0] + " - "+myArr[x][2] + '\n';   // "-"+ myArr[x][1]  +
                                       
                                     }  
                                      tabelleBind(); 
                                }
                              //-------------------------------------------------------------------------------------------------------------------------------------------------
                              //--------------------------------------------------Ende der schleife------------------------------------------------------------------------------
                              //-------------------------------------------------------------------------------------------------------------------------------------------------
                              
                                    tabelleFinish(); // AB HIER NICHTS ÄNDERN - tabelle fertigstellen
                                   
                              } // function ende
                              
                              //MAIN:
                               
                              schedule(mySchedule,  function () { 
                                var timeout = setTimeout(function () {
                                if(!getState(dpDelAll).val) writeHTML();
                                  if (braucheEinFile) {writeFile(home, path ,htmlOut, function (error) { /* log('file written');*/  });}
                                  }, 500);
                              
                              }); 
                               var timeout = setTimeout(function () {
                              writeHTML(); 
                               }, 2000);                                  //     <tdalign
                              
                               function tabelleBind(){
                                 //  counter=counter+mehrfachTabelle;
                                     switch (mehrfachTabelle) { 
                              
                                       case 1: if(counter%2==0)         {  htmlOut=htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td></tr>"; break;}else    
                                                                        {  htmlOut=htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td></tr>"; break;}
                                       case 2: if(counter%4==0){
                                                  if(counter%2==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                                                                      ";\" align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>"; } 
                                                             else {htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td></tr>";} break;
                                                    }else{
                                                              if(counter%2==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                                                                      ";\"align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>"; } 
                                                             else {htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td></tr>";} break;}
                                                                  
                                       case 3:if(counter%2==0)   {
                                                  if(counter%3==0 )  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                                                                      ";\"align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>"; } //Teil1 c=0
                                                             else { if(counter%3==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                                                                      "; \"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td>";} //Teil 2 c=1
                                                                              else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td></tr>";} //Teil 3 c=3
                                                                        } break;}else{
                                                  if(counter%3==0 )  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                                                                      ";\"align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>"; } 
                                                             else { if(counter%3==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                                                                      ";\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td>";} 
                                                                              else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td></tr>";}
                                                                        } break;}                                          
                              
                              
                                       case 4:  // counter=counter+8;
                                                 if(counter%8==0)   {
                                                 if(counter%4==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td  style=\" border-right: "+trennungsLinie+"px solid "+ farbetrennungsLinie+";\" align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>"; } // teil1
                                                                 else {if(counter%4==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td>";} //teil 2
                                                                              else    {if(counter%4==3)  { htmlOut= htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td></tr>";} //teil 4
                                                                                                else    {htmlOut  = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\"  align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>";}} //teil 3
                                                                        } break;}else{
                                                 if(counter%4==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td  style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\" align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>"; } //teil 1
                                                                 else {if(counter%4==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td>";} // teil 2
                                                                              else    {if(counter%4==3)  { htmlOut= htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td></tr>";} // teil 4
                                                                                                else    {htmlOut  = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\"align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>";}} //teil 3
                                                                        } break;}                                    
                                      } //switch ende
                              
                              }
                              
                              function tabelleFinish() {
                              
                              switch (mehrfachTabelle) {  
                                     case 1:    break;
                              
                                     case 2:    
                                                if(counter%2==0)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');
                                              
                                                break;
                              
                                     case 3:   if(counter%3==2)  htmlOut = htmlOut.replace(/<\/td>$/, "</td></tr>");
                                               if(counter%3==1)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");        
                                               if(counter%3==0)      htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td  style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");
                                             
                                                break;
                                     case 4:   if(counter%4==3)  htmlOut = htmlOut.replace(/<\/td>$/, "</td></tr>");
                                               if(counter%4==2)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");
                                               if(counter%4==1)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");    
                                               if(counter%4==0)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td><td>&ensp;</td><td>&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");      
                                               break; }
                                   
                                       var htmlUeber=    "<p style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: "+htmlÜberFontGroesse+"; font-weight:"+htmlSchriftWeite+ "\">"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</p>"; 
                                     var htmlUnter= "<div  style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: 70%; text-align: right;\" >"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</div>";
                                      
                                      if (!htmlSignature) htmlUnter="";
                                        //Ausgabe über VIS html widget - tabelle in datenpunkt schreiben - html tabelle ohne html header und body
                                         var htmlOutVIS="";
                                       //  htmlUberschrift ? htmlOutVIS=htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>" : htmlOutVIS=htmlTabStyle+htmlTabUeber+htmlOut+"</table>";
                                          if (htmlUberschrift) 
                                              { zentriert ? htmlOutVIS=htmlZentriert+htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter+ buttonScript : htmlOutVIS=htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter+ buttonScript ;
                              
                                            } else {
                                             zentriert ?  htmlOutVIS=htmlZentriert+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter+ buttonScript :  htmlOutVIS=htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter+ buttonScript;
                              
                                               }
                                               
                              
                                // log("bin raus aus tabelleBind");
                                         if (braucheEinVISWidget) setState(dpVIS, htmlOutVIS );
                              
                               var htmlUnter= "<div  style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: 80%;  text-align: center; \" >"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</div>"
                              
                               if (!htmlSignature) htmlUnter="";
                                var htmlEnd="</table>"+htmlUnter+"</div></body>";
                               //mit oder ohne überschrift - zentriert oder links
                              htmlUberschrift ? htmlOut=htmlStart+htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd : htmlOut=htmlStart+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd;
                               //log(htmlOut);
                               setState(dpANLEGEN,"");
                               setState(dpAnzahl,(counter+1));
                               setState(dPDELETE,0);
                              
                               
                               if(myTelegram && braucheTelegram){ 
                                   //log("sende");
                                   myTelegram=false;
                                   
                                  sendTo('telegram.0', {
                                      
                                 text: (telegramString),
                                 type: 'text'
                                 });
                              
                              telegramString="";
                              
                              }
                              } // function ende
                              
                              setTimeout(function () {
                              on({id: dPDELETE, ack: false, change: "ne"}, function (obj) { 
                                
                                 let a=getState(dPDELETE).val;
                                 if (a!=0){
                                 let toDelete=myIDArr[getState(dPDELETE).val];
                                 var stateHelp="alexa2.0.Lists.SHOPPING_LIST.items."+toDelete+".#delete"
                                 setState(stateHelp,true);
                                 var timeout = setTimeout(function () {
                                 writeHTML(); }, 4000);
                               
                              
                                 }
                                // log("1+bin im on !!!+++!"+a+stateHelp)
                                 });
                              
                                 on({id: dpANLEGEN, ack: false, change: "ne"}, function (obj) { 
                                    // log(getState(dpANLEGEN).val+"----aa");
                                     if(getState(dpANLEGEN).val!="") {
                                  setState("alexa2.0.Lists.SHOPPING_LIST.#New",getState(dpANLEGEN).val)
                                     var timeout = setTimeout(function () {
                                 writeHTML(); }, 2000);
                                     } 
                                     
                                 });
                              
                                     on({id: dpRefresh, ack: false, change: "any"}, function (obj) { 
                                     //log(getState(dpANLEGEN).val+"----refresh");
                                     var timeout2 = setTimeout(function () {
                                 writeHTML(); }, 4000);
                                    // }
                                 
                                 });  
                              
                                    on({id: myDeleterArr, ack: false, change: "any"}, function (obj) { 
                                     //log(getState(dpANLEGEN).val+"----refresh");
                                     var timeout2 = setTimeout(function () {
                                 writeHTML(); }, 4000);
                                
                                    // }
                                 
                                 });
                              
                                 
                                   on({id: dpDelAll, ack: false,val: true}, function (obj) { 
                               let i;
                               for (i=0;i<myIDArr.length;i++) {//log("hier : "+myIDArr[i]);
                                 if (myIDArr[i]!="dummy") {
                                 let toDelete=myIDArr[i];
                                    setTimeout( function timer(){
                                    var stateHelp="alexa2.0.Lists.SHOPPING_LIST.items."+toDelete+".#delete"
                                 log("Statehelp: "+stateHelp)
                                 setState(stateHelp,true);
                                 }, i*2500 );
                              
                                
                                 }
                                 }
                                 log(i.toString())
                                 var timeout = setTimeout(function () {
                                      setState(dpDelAll,false);
                                      writeHTML(); }, (1+myIDArr.length)*1500);
                                
                                // log(stateHelp)
                              
                               });
                              
                              }, 5000);
                              
                              
                              

                              L 1 Reply Last reply Reply Quote 0
                              • L
                                lucajordi @liv-in-sky last edited by

                                @liv-in-sky
                                Vielen Dank!
                                FUNKTIONIERT!

                                1 Reply Last reply Reply Quote 0
                                • BananaJoe
                                  BananaJoe Most Active last edited by

                                  Verdammt, da schau ich nur zufällig in diesen Artikel weil er unter den neuen, ungelesenen Stand .. und schon wieder 3h rumspielt bis alles lief wie ich wollte:
                                  5ae5b566-a330-4ebb-bc71-7f2b707dada8-image.png

                                  Und wieder viel über CSS gelernt ...
                                  @liv-in-sky Danke für die reduzierte "Nur Einkaufsliste mit 2 Spalten" Version

                                  L 1 Reply Last reply Reply Quote 1
                                  • L
                                    lucajordi @BananaJoe last edited by

                                    Wie kann ich den dem grünen Haken ein "enter" mitgeben?

                                    Würde gerne den neuen Artikel eingeben und mit dem grünen Haken eintragen

                                    51bc2e8c-42e4-4a45-92ee-a81889bb420b-image.png

                                    liv-in-sky 2 Replies Last reply Reply Quote 0
                                    • liv-in-sky
                                      liv-in-sky @lucajordi last edited by

                                      @lucajordi einfach enter magst du nicht ?

                                      BananaJoe 1 Reply Last reply Reply Quote 0
                                      • liv-in-sky
                                        liv-in-sky @lucajordi last edited by

                                        @lucajordi

                                        wenn der haken von dir ist, mußt du mit jquery arbeiten - sonst wäre der haken und das input feld nicht miteiander verbunden

                                        ich glaube,es gibt ein inputfeld mit so einer bestätigung als widget

                                        1 Reply Last reply Reply Quote 0
                                        • BananaJoe
                                          BananaJoe Most Active last edited by BananaJoe

                                          @liv-in-sky Ich habe mal rumgepfuscht und die "Nur Einkaufsliste mit 2 Spalten" Version so erweitert das diese zusätzlich auch ein JSON erzeugt.
                                          So kann ich wie gewohnt das vis-inventwo - JSON Table Widget nutzen.
                                          Alle von mir dafür geänderten Zeilen habe ich jeweils mit // Start Change by BananaJoe und // End Change by BananaJoe gekennzeichnet.
                                          Letztendlich habe einen neuen Datenpunkt hinzugefügt, den Code der das rote X erzeugt so Escaped das man ihn in einen JSON packen kann und schreibe halt zusätzlich den JSON Datenpunkt:

                                          //@liv-in-sky 2022  14.2.-16:09
                                          
                                          const dpPrefix = "javascript."+ instance +".";
                                          createState("Alexa_Listen.ALEXALists.Einkauf.Anlegen"             , "",{ name: 'Anlegen_VIS',  type: 'string', read:  true,  write: true,});
                                          createState("Alexa_Listen.ALEXALists.Einkauf.ALEXAEinkauf"           , { name: 'ALEXAEinkauf_VIS',  type: 'string', read:  true,  write: true,});
                                          createState("Alexa_Listen.ALEXALists.Einkauf.AuswahlDeleteWerte"   , { name: 'AuswahlDeleteWert_VIS',  type: 'string', read:  true,  write: true,});
                                          createState("Alexa_Listen.ALEXALists.Einkauf.AuswahlDeleteTexte"  , { name: 'AuswahlDeleteTexte_VIS',  type: 'string', read:  true,  write: true,});
                                          createState("Alexa_Listen.ALEXALists.Einkauf.Anzahl"  , { name: 'Einkauf_Anzahl_VIS',  type: 'number', read:  true,  write: true,});
                                          createState("Alexa_Listen.ALEXALists.Einkauf.DeleteALL"  , { name: 'Einkauf_DeleteALL',  type: 'boolean', role: 'switch', read:  true,  write: true,});
                                          createState("Alexa_Listen.ALEXALists.Einkauf.Refresh"  , { name: 'Refresh',  type: 'boolean', role: 'switch', read:  true,  write: true,});
                                          //createState("Alexa_Listen.ALEXALists.Einkauf.AuswahlDelete"       , { name: 'AuswahlDelete_VIS',  type: 'number', read:  true,  write: true,});
                                          
                                          // Start Change by BananaJoe
                                          createState("Alexa_Listen.ALEXALists.Einkauf.ALEXAEinkauf-JSON", { name: 'ALEXAEinkauf_VIS_JSON',  type: 'string', read:  true,  write: true,});
                                          // End Change by BananaJoe
                                          
                                          createState("Alexa_Listen.ALEXALists.Einkauf.AuswahlDelete", {
                                          name: 'AuswahlDelete',
                                          role: "state",
                                          type: "number",
                                          states: "0:choose ...;1:eeee;2:test1;3:test;",
                                          min: 0,
                                          max: 50,
                                          def: 0,
                                          read: true,
                                          write: true});
                                          
                                          
                                          
                                          
                                          //HIER WIRD PFAD UND FILENAME DEFINIERT
                                          const path = "/htmltelegram.html";                   //FIlenamen definieren
                                          const home ='vis.0'                                 //wo soll das file im iobroker-file-system liegen ? (oder z.b auch iqontrol.meta)
                                          let   braucheEinFile=false;                          // bei true wird ein file geschrieben - für iqontrol
                                          let   braucheEinVISWidget=true;                     // bei true wird ein html-tabelle in einen dp geschrieben 
                                          let   braucheTelegram=false;
                                          let dpVIS=dpPrefix+"Alexa_Listen.ALEXALists.Einkauf.ALEXAEinkauf";                      // dp  für VIS-HTML-Basic-Widget // Datentyp: String
                                          // Start Change by BananaJoe
                                          let dpVIS_JSON=dpPrefix+"Alexa_Listen.ALEXALists.Einkauf.ALEXAEinkauf-JSON";                 // dp  für VIS-inventwo-JSON-Table // Datentyp: String
                                          // End Change by BananaJoe
                                          let dPDELETE=dpPrefix+"Alexa_Listen.ALEXALists.Einkauf.AuswahlDelete";                  // Datentyp: Werteliste
                                          let dPDELETEWert=dpPrefix+"Alexa_Listen.ALEXALists.Einkauf.AuswahlDeleteWerte";         // Datentyp: String
                                          let dPDELETEAuswahl=dpPrefix+"Alexa_Listen.ALEXALists.Einkauf.AuswahlDeleteTexte";      // Datentyp: String
                                          let dpANLEGEN=dpPrefix+"Alexa_Listen.ALEXALists.Einkauf.Anlegen";                       // Datentyp: String
                                          let dpAnzahl=dpPrefix+"Alexa_Listen.ALEXALists.Einkauf.Anzahl";                         // Datentyp: Number
                                          let dpDelAll=dpPrefix+"Alexa_Listen.ALEXALists.Einkauf.DeleteALL";                      // Datentyp: Boolean
                                          let dpRefresh=dpPrefix+"Alexa_Listen.ALEXALists.Einkauf.Refresh";                      // Datentyp: Boolean
                                          let mySchedule=" */30 * * * * * ";                       
                                          let sortList=1;                                                                         // SORTIERUNG 1=nach datum; 2 nach Einkauf's
                                          let mitErstelldatum=false;
                                          var symbolLink="❌";                                                                    //  👎  💀 ❌  ⚪  ⚫ ⭕  🔴 🔵
                                          let farbeSchalterON="blue";
                                          //---------------------------------------
                                          
                                          //HIER DIE SPALTEN ANZAHL DEFINIEREN - jede Spalte einen Wert - in diesem Beispiel sind es 3
                                          var htmlFeld1='Artikel';       var Feld1lAlign="left";                     // überschrift Tabellen Spalte1 und  Ausrichtung left or center
                                          var htmlFeld2='Löschen';        var Feld2lAlign="center";                      // überschrift Tabellen Spalte2 und  Ausrichtung left,right or center
                                          var htmlFeld3='';         var Feld3lAlign="center";                    // überschrift Tabellen Spalte3 und  Ausrichtung left,right or center
                                          //-----------------------------------
                                          
                                          
                                          //hier werden die styles für die tabelle definiert
                                          //ÜBERSCHRIFT ÜBER TABELLE
                                          let   htmlUberschrift=false;                           // mit Überschrift über der tabelle
                                          let   htmlSignature=false;                              // anstatt der Überscghrift eine signature: - kleiner - anliegend
                                          const htmlFeldUeber='ALEXA Einkaufsliste';              // Überschrift und Signature
                                          const htmlFarbUber="white";                         // Farbe der Überschrift
                                          const htmlSchriftWeite="normal";                       // bold, normal - Fettschrift für Überschrift
                                          const htmlÜberFontGroesse="18px";                       // schriftgröße überschrift
                                          //MEHRERE TABELLEN NEBENEINANDER
                                          let   mehrfachTabelle=1;                              // bis zu 4 Tabellen werden nebeneinander geschrieben-  verkürzt das Ganze, dafür etwas breiter - MÖGLICH 1,2,3,oder 4 !!!
                                          const trennungsLinie="2";                             //extra trennungslinie bei mehrfachtabellen - evtl auf 0 stellen, wnn htmlRahmenLinien auf none sind
                                          const farbetrennungsLinie="white";
                                          const htmlFarbZweiteTabelle="white";                // Farbe der Überschrift bei jeder 2.ten Tabelle
                                          const htmlFarbTableColorUber="#76D2F4";               // Überschrift in der tabelle - der einzelnen Spalten
                                          //ÜBERSCHRIFT SPALTEN
                                          const UeberschriftenHoehe="10px";                          //Überschrift bekommt mehr Raum - darunter und darüber - Zellenhöhe
                                          const LinieUnterUeberschrift="3";                   // Linie nur unter Spaltenüberschrift - 
                                          const farbeLinieUnterUeberschrift="#000000";
                                          const groesseUeberschrift=45;
                                          const UeberschriftStyle="normal"                     // möglich "bold"
                                          //GANZE TABELLE
                                          let abstandZelle="3";
                                          let farbeUngeradeZeilen="none";                     //Farbe für ungerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2
                                          let farbeGeradeZeilen="#00aa00";                        //Farbe für gerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2
                                          let weite="auto";                                     //Weite der Tabelle
                                          let zentriert=true;                                   //ganze tabelle zentriert
                                          const backgroundAll="#333333";                        //Hintergrund für die ganze Seite - für direkten aufruf oder iqontrol sichtber - keine auswirkung auf vis-widget
                                          const htmlSchriftart="Oxanium";
                                          const htmlSchriftgroesse="45px";
                                          //FELDER UND RAHMEN
                                          let   UeberschriftSpalten=false;                // ein- oder ausblenden der spatlen-überschriften
                                          const htmlFarbFelderschrift="#eeece1";                  // SchriftFarbe der Felder
                                          const htmlFarbFelderschrift2="#eeece1";                 // SchriftFarbe der Felder für jede 2te Tabelle
                                          const htmlFarbTableColorGradient1="#424242";          //  Gradient - Hintergrund der Tabelle - Verlauffarbe
                                          const htmlFarbTableColorGradient2="#424242";          //  Gradient - Hintergrund der Tabelle - ist dieser Wert gleich Gradient1 gibt es keinen verlauf
                                          const htmlFarbTableBorderColor="#000000";             // Farbe des Rahmen - is tdieser gleich den gradienten, sind die rahmen unsichtbar
                                          let htmlRahmenLinien="none";                            // Format für Rahmen: MÖGLICH: "none" oder "all" oder "cols" oder "rows"
                                          const htmlSpalte1Weite="1154px";                   //  Weite der ersten beiden  Spalten oder z.b. 115px
                                          const htmlSpalte2Weite="312px";                   //  Weite der ersten beiden  Spalten oder z.b. 115px
                                          
                                          // HIER NICHTS  ÄNDERN
                                          
                                          let borderHelpBottum;
                                          let borderHelpRight;
                                          let htmlcenterHelp;
                                          let htmlcenterHelp2;
                                          
                                          if(htmlRahmenLinien=="rows") {borderHelpBottum=1;borderHelpRight=0;}
                                          if(htmlRahmenLinien=="cols") {borderHelpBottum=0;borderHelpRight=1;}
                                          if(htmlRahmenLinien=="none") {borderHelpBottum=0;borderHelpRight=0;}
                                          if(htmlRahmenLinien=="all")  {borderHelpBottum=1;borderHelpRight=1;}
                                          zentriert ? htmlcenterHelp="auto" : htmlcenterHelp="left";
                                          zentriert ? htmlcenterHelp2="center" : htmlcenterHelp2="left";
                                          
                                          
                                          const htmlZentriert='<center>'
                                          const htmlStart=    "<!DOCTYPE html><html lang=\"de\"><head><title>Vorlage</title><meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\">"+
                                                            "<style> * {  margin: 0;} body {background-color: "+backgroundAll+"; margin: 0 auto;  }"+
                                                            " p {padding-top: 10px; padding-bottom: 10px; text-align: "+htmlcenterHelp2+"}"+
                                                           // " div { margin: 0 auto;  margin-left: auto; margin-right: auto;}"+
                                                            " td { padding:"+abstandZelle+"px; border:0px solid "+htmlFarbTableBorderColor+";  border-right:"+borderHelpRight+"px solid "+htmlFarbTableBorderColor+";border-bottom:"+borderHelpBottum+"px solid "+htmlFarbTableBorderColor+";}"+ 
                                                            " table { width: "+weite+";  margin: 0 "+htmlcenterHelp+"; border:1px solid "+htmlFarbTableBorderColor+"; border-spacing=\""+abstandZelle+"0px\" ; }"+   // margin macht center
                                                            "td:nth-child(1) {width: "+htmlSpalte1Weite+"}"+"td:nth-child(2) {width:"+htmlSpalte2Weite+"}"+
                                                            " </style></head><body> <div>";
                                          //const htmlUeber=    "<p style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-weight: bold\">"+htmlFeldUeber+"</p>";                    
                                          //const htmlTabStyle= "<table bordercolor=\""+htmlFarbTableBorderColor+"\" border=\"2px\" cellspacing=\""+abstandZelle+"\" cellpadding=\""+abstandZelle+"\" width=\""+weite+"\" rules=\""+htmlRahmenLinien+"\" style=\"color:"+htmlFarbFelderschrift+";  font-size:"+htmlSchriftgroesse+
                                          //                      "; font-family:"+htmlSchriftart+";background-image: linear-gradient(42deg,"+htmlFarbTableColorGradient2+","+htmlFarbTableColorGradient1+");\">";
                                          const htmlTabStyle= "<table bordercolor=\""+htmlFarbTableBorderColor+"\" border=\"2px\" cellspacing=\""+abstandZelle+"\" cellpadding=\""+abstandZelle+"\" width=\""+weite+"\" rules=\""+htmlRahmenLinien+"\" style=\"color:"+htmlFarbFelderschrift+";  font-size:"+htmlSchriftgroesse+
                                                               "; font-family:"+htmlSchriftart+";\">";
                                          const htmlTabUeber1="<tr height=\""+UeberschriftenHoehe+"\" style=\"color:"+htmlFarbTableColorUber+"; font-size: "+groesseUeberschrift+"px; font-weight: "+UeberschriftStyle+" ;  border-bottom: "+LinieUnterUeberschrift+"px solid "+farbeLinieUnterUeberschrift+" \">";
                                          const htmlTabUeber3="</tr>";
                                          /*
                                          table td:first-child {}  //1
                                          table td:nth-child(2) {} //2
                                          table td:nth-child(3) {} //3
                                          table td:last-child {}   //4
                                          */
                                          
                                          // Start Change by BananaJoe
                                          var jsonString = "[";
                                          // End Change by BananaJoe
                                          
                                          const buttonScript =  '<script> function setOnDblClickCustomShop( myvalue ) {	var Self = this; var objID = myvalue;	vis.setValue(myvalue,true);  var2 = \"' + dpPrefix + 'Alexa_Listen.ALEXALists.Einkauf.Refresh\"; vis.setValue(var2,true);  console.log("www")  } </script>'
                                          
                                          // const buttonScript =  '<script> function setOnDblClickCustom( myvalue ) {	var Self = this; var objID = myvalue;	Self.servConn.getStates(objID, (error, states) => {  console.log(states);  Self.servConn.setState(objID, true);  }); var2 = \"javascript.0.Alexa_Listen.ALEXALists.Einkauf.Refresh\"; Self.servConn.setState(var2, true); console.log("www")} </script>'
                                          
                                          //NICHTS ÄNDERN - abhängig von den oben definierten _Spalten - in diesem Beispiel sind es 3
                                          
                                            	var htmlTabUeber2="<td width="+htmlSpalte1Weite+" align="+Feld1lAlign+">&ensp;"+htmlFeld1+"&ensp;</td><td width="+htmlSpalte2Weite+" align="+Feld2lAlign+">&ensp;"+htmlFeld2+"&ensp;</td><td  align="+Feld3lAlign+">&ensp;"+htmlFeld3+"&ensp;</td>";
                                          var htmlTabUeber2_1="<td width="+htmlSpalte1Weite+" align="+Feld1lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld1+"&ensp;</td><td width="+htmlSpalte2Weite+"  align="+Feld2lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld2+
                                                            "&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld3+"&ensp;</td>";
                                          //------------------------------------------------------
                                          
                                          
                                          var htmlTabUeber="";
                                          var htmlOut="";
                                          var mix;
                                          var counter;
                                          var warte;
                                          var myIDArr=[];
                                          let myDeleterArr;
                                          var myRememberList="";
                                          var myTelegram=false;
                                          var telegramString="telegram.0";
                                          //HIER SIND DIE  WERTE, DIE IN DER SCHLEIFE GEFILTERET WER%DEN - Jede spalte einen wert - jeder valx muss in dieser schleife gesetzt werden !!
                                          var val1; var val2; var val0; var val3; var valSort; 
                                          
                                          function writeHTML(){
                                          
                                          
                                          htmlOut="";
                                          
                                          counter=-1;
                                          htmlTabUeber="";
                                          switch (mehrfachTabelle) { 
                                            case 1: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber3;  break;
                                            case 2: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break;
                                            case 3: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber2+htmlTabUeber3; break;
                                            case 4: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break;
                                          };   
                                          if (!UeberschriftSpalten) {htmlTabUeber=""}
                                          
                                          var valID; var myListWerte=""; var myListAuswahl="";
                                          //--------------------------------------------------------------------------------------------------------------------------------------------------
                                          //---------hier kommt eure schleife rein counter++, tabelleBind() und tabelleFinish() müssen so integriert bleiben !!!------------------------------
                                          //---------alle valx werte müssen von euch bestimmt werden - val0,val1,val2 !!!---------------------------------------------------------------------
                                          //--------------------------------------------------------------------------------------------------------------------------------------------------
                                          var myArr=[]; var myList=""; var myListArr=[]; myIDArr=[]; myDeleterArr=[];
                                          
                                          let myhelerArr=getState("alexa2.0.Lists.SHOPPING_LIST.json").val;
                                          myDeleterArr.push("alexa2.0.Lists.SHOPPING_LIST.json")
                                          
                                          myListArr.push('0'+":"+'choose ...'+";");
                                                     myListWerte=myListWerte+"choose ..."+";";
                                                    myListAuswahl=myListAuswahl+(0+";");
                                                    myIDArr.push("dummy");
                                          $('alexa2.0.Lists.SHOPPING_LIST.items.*.value').each(function(id, i) {           // hier eigene schleife definierenalexa2.0.Lists.SHOPPING_LIST.items.0f43141e-029c-4860-bcd0-828702b0dc86.value
                                                 
                                                 let ida=id.split('.')
                                                // log(myhelerArr)
                                                // log(myhelerArr.includes(ida[5]))
                                                  if(myhelerArr.includes(ida[5])) {
                                                  
                                                   if(!getState(id.replace("value","completed")).val) {
                                                    val0=getState(id).val;
                                                    val1=getState(id.replace("value","completed")).val; 
                                                    val2=valSort=getState(id.replace("value","updatedDateTime")).val; 
                                                    valID=getState(id.replace("value","id")).val; 
                                                    myIDArr.push(valID);
                                                    var yy= (Math.round((new Date()).getTime() / 1000))-Math.round(val2/1000);
                                                    val2=formatDate(getDateObject(val2), "TT.MM(SS:mm)")
                                                    val3=(Math.floor( ((yy)/60/60/24) )+"d "+ Math.floor(((yy)/60/60) % 24) +"h "+ Math.floor( ((yy)/60) % 60 )+"m")
                                                 //   if (val1==false) {val1="❌"} else{val1="✅"}
                                                     let valButton=id.replace("value","#delete")
                                                     myDeleterArr.push(id.replace("value","#delete"))
                                                    //log(valButton)
                                                    val1="<button style\=\"border:none\; background-color\:transparent\; color\:white\; font\-size\:1em\; text\-align:left\" value=\"toggle\" onclick=\"setOnDblClickCustomShop\(\'"+valButton+"\')\">"+symbolLink + "</button> <font color=\""+farbeSchalterON+"\">";
                                                    // Start Change by BananaJoe
                                                    val1JSON="<button style\=\"border:none\; background-color\:transparent\; color\:white\; font\-size\:1em\; text\-align:center\" value=\"toggle\" onclick=\"setOnDblClickCustomShop\(\'"+valButton+"\')\">"+symbolLink + "</button> <font color=\""+farbeSchalterON+"\">";
                                                    // End Change by BananaJoe
                                                    myArr.push([val0,val1,val2,val3,valSort]);
                                                    val0=val0.replace(/,/g,'-');  
                                                    myListArr.push((i+1)+":"+val0+";");
                                                    myListWerte=myListWerte+val0+";";
                                                    myListAuswahl=myListAuswahl+(i+1)+";";
                                                   }} else{ //log('alexa2.0.Lists.SHOPPING_LIST.items.'+ida[5]);
                                                            deleteObject('alexa2.0.Lists.SHOPPING_LIST.items.'+ida[5], true);
                                                   }
                                          });
                                              //  log(myIDArr.toString())
                                          
                                                 //log (myListArr.toString());
                                                for (var x=0;x<myListArr.length;x++){
                                                  myList=myList.concat(myListArr[x]);
                                                 // log(myListArr[x]);
                                                  //log(myList);
                                          
                                                }
                                               // log("-----------myList : "+myList)
                                                if(myList!=myRememberList){
                                                    myTelegram=true; //log("ist true")
                                                    setStateDelayed(dPDELETEWert, myListAuswahl,500);        
                                                    setStateDelayed(dPDELETEAuswahl,  myListWerte,500);
                                                  var timeout = setTimeout(function () {
                                                    // var obj = getObject(dPDELETE);
                                                     // log("11---"+myList);
                                                    // obj.common.states=myList;
                                                     myRememberList=myList;
                                                     //log("22---"+myList);
                                                    extendObject(dPDELETE, {common: {states: myList}});   
                                                  }, 400);
                                                }
                                          //SORT
                                          
                                            if (sortList==1) {
                                                          myArr.sort(function (alpha, beta) {
                                                       if (alpha[4] > beta[4])
                                                          return -1;
                                                       if (beta[4] > alpha[4])
                                                          return 1;
                                                       return 0;
                                                      });
                                                             } else
                                                {          myArr.sort(function (alpha, beta) {
                                                       if (alpha[0].toUpperCase() > beta[0].toUpperCase())
                                                          return 1;
                                                       if (beta[0].toUpperCase() > alpha[0].toUpperCase())
                                                          return -1;
                                                       return 0;
                                                      });
                                          
                                                             }
                                          
                                                             telegramString="";
                                             // Start Change by BananaJoe
                                             jsonString = "["
                                             // End Change by BananaJoe
                                           for (var x=0 ; x<myArr.length ; x++) {
                                               counter++;
                                              //HIER WERDEN DIE DATEN DER SCHLEIFE ZUSAMMENGESETZT - hat man oben 2 Felder definiert, braucht man hier 2 Werte
                                                val0=myArr[x][0];
                                                val1=myArr[x][1];
                                                var val2help=''//myArr[x][2]
                                                var val3help=''//myArr[x][3];
                                                if (mitErstelldatum) {val2=val3help+" am "+val2help;} else {val2=val3help}
                                               
                                                  
                                                if (backgroundAll) {
                                                   telegramString=telegramString+ myArr[x][0] + " - "+myArr[x][2] + '\n';   // "-"+ myArr[x][1]  +
                                                  
                                                }  
                                                 tabelleBind(); 
                                           }
                                          //-------------------------------------------------------------------------------------------------------------------------------------------------
                                          //--------------------------------------------------Ende der schleife------------------------------------------------------------------------------
                                          //-------------------------------------------------------------------------------------------------------------------------------------------------
                                          
                                               tabelleFinish(); // AB HIER NICHTS ÄNDERN - tabelle fertigstellen
                                              
                                          } // function ende
                                          
                                          //MAIN:
                                          
                                          schedule(mySchedule,  function () { 
                                           var timeout = setTimeout(function () {
                                           if(!getState(dpDelAll).val) writeHTML();
                                             if (braucheEinFile) {writeFile(home, path ,htmlOut, function (error) { /* log('file written');*/  });}
                                             }, 500);
                                          
                                          }); 
                                          var timeout = setTimeout(function () {
                                          writeHTML(); 
                                          }, 2000);                                  //     <tdalign
                                          
                                          function tabelleBind(){
                                            //  counter=counter+mehrfachTabelle;
                                                 // Start Change by BananaJoe
                                                 let valJSON = val1JSON.replace(/"/g, '\\"');
                                                 let myArtikel = val0.replace(/(^|\s)\S/g, l => l.toUpperCase());
                                                 jsonString = jsonString + '{"Artikel":"' + myArtikel + '","Delete":"' + valJSON + '"},'
                                                 // End Change by BananaJoe
                                                switch (mehrfachTabelle) { 
                                          
                                                  case 1: if(counter%2==0)         {  htmlOut=htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td></tr>"; break;}else    
                                                                                   {  htmlOut=htmlOut+"<tr bgcolor=rgba(69,136,24,0.5)><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td></tr>"; break;}
                                          
                                                  case 2: if(counter%4==0){
                                                             if(counter%2==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                                                                                 ";\" align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>"; } 
                                                                        else {htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td></tr>";} break;
                                                               }else{
                                                                         if(counter%2==0)  {htmlOut = htmlOut+"<tr ><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                                                                                 ";\"align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>"; } 
                                                                        else {htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td></tr>";} break;}
                                                                             
                                                  case 3:if(counter%2==0)   {
                                                             if(counter%3==0 )  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                                                                                 ";\"align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>"; } //Teil1 c=0
                                                                        else { if(counter%3==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                                                                                 "; \"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td>";} //Teil 2 c=1
                                                                                         else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td></tr>";} //Teil 3 c=3
                                                                                   } break;}else{
                                                             if(counter%3==0 )  {htmlOut = htmlOut+"<tr><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                                                                                 ";\"align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>"; } 
                                                                        else { if(counter%3==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                                                                                 ";\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td>";} 
                                                                                         else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td></tr>";}
                                                                                   } break;}                                          
                                          
                                          
                                                  case 4:  // counter=counter+8;
                                                            if(counter%8==0)   {
                                                            if(counter%4==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td  style=\" border-right: "+trennungsLinie+"px solid "+ farbetrennungsLinie+";\" align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>"; } // teil1
                                                                            else {if(counter%4==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td>";} //teil 2
                                                                                         else    {if(counter%4==3)  { htmlOut= htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td></tr>";} //teil 4
                                                                                                           else    {htmlOut  = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\"  align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>";}} //teil 3
                                                                                   } break;}else{
                                                            if(counter%4==0)  {htmlOut = htmlOut+"<tr><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td  style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\" align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>"; } //teil 1
                                                                            else {if(counter%4==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td>";} // teil 2
                                                                                         else    {if(counter%4==3)  { htmlOut= htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td></tr>";} // teil 4
                                                                                                           else    {htmlOut  = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\"align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>";}} //teil 3
                                                                                   } break;}                                    
                                                 } //switch ende
                                          
                                          }
                                          
                                          function tabelleFinish() {
                                          
                                          switch (mehrfachTabelle) {  
                                                case 1:    break;
                                          
                                                case 2:    
                                                           if(counter%2==0)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');
                                                         
                                                           break;
                                          
                                                case 3:   if(counter%3==2)  htmlOut = htmlOut.replace(/<\/td>$/, "</td></tr>");
                                                          if(counter%3==1)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");        
                                                          if(counter%3==0)      htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td  style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");
                                                        
                                                           break;
                                                case 4:   if(counter%4==3)  htmlOut = htmlOut.replace(/<\/td>$/, "</td></tr>");
                                                          if(counter%4==2)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");
                                                          if(counter%4==1)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");    
                                                          if(counter%4==0)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td><td>&ensp;</td><td>&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");      
                                                          break; }
                                              
                                                  var htmlUeber=    "<p style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: "+htmlÜberFontGroesse+"; font-weight:"+htmlSchriftWeite+ "\">"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</p>"; 
                                                var htmlUnter= "<div  style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: 70%; text-align: right;\" >"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</div>";
                                                 
                                                 if (!htmlSignature) htmlUnter="";
                                                   //Ausgabe über VIS html widget - tabelle in datenpunkt schreiben - html tabelle ohne html header und body
                                                    var htmlOutVIS="";
                                                  //  htmlUberschrift ? htmlOutVIS=htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>" : htmlOutVIS=htmlTabStyle+htmlTabUeber+htmlOut+"</table>";
                                                     if (htmlUberschrift) 
                                                         { zentriert ? htmlOutVIS=htmlZentriert+htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter+ buttonScript : htmlOutVIS=htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter+ buttonScript ;
                                          
                                                       } else {
                                                        zentriert ?  htmlOutVIS=htmlZentriert+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter+ buttonScript :  htmlOutVIS=htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter+ buttonScript;
                                          
                                                          }
                                                          
                                          
                                           // log("bin raus aus tabelleBind");
                                                    if (braucheEinVISWidget) setState(dpVIS, htmlOutVIS );
                                                     // Start Change by BananaJoe
                                                     jsonString = jsonString.slice(0, -1);
                                                     jsonString = jsonString + ']';
                                                     setState(dpVIS_JSON, jsonString);
                                                     //Ende Change by BananaJoe
                                          
                                          var htmlUnter= "<div  style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: 80%;  text-align: center; \" >"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</div>"
                                          
                                          if (!htmlSignature) htmlUnter="";
                                           var htmlEnd="</table>"+htmlUnter+"</div></body>";
                                          //mit oder ohne überschrift - zentriert oder links
                                          htmlUberschrift ? htmlOut=htmlStart+htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd : htmlOut=htmlStart+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd;
                                          //log(htmlOut);
                                          setState(dpANLEGEN,"");
                                          setState(dpAnzahl,(counter+1));
                                          setState(dPDELETE,0);
                                          
                                          
                                          if(myTelegram && braucheTelegram){ 
                                              //log("sende");
                                              myTelegram=false;
                                              
                                             sendTo('telegram.0', {
                                                 
                                            text: (telegramString),
                                            type: 'text'
                                            });
                                          
                                          telegramString="";
                                          
                                          }
                                          } // function ende
                                          
                                          setTimeout(function () {
                                          on({id: dPDELETE, ack: false, change: "ne"}, function (obj) { 
                                           
                                            let a=getState(dPDELETE).val;
                                            if (a!=0){
                                            let toDelete=myIDArr[getState(dPDELETE).val];
                                            var stateHelp="alexa2.0.Lists.SHOPPING_LIST.items."+toDelete+".#delete"
                                            setState(stateHelp,true);
                                            var timeout = setTimeout(function () {
                                            writeHTML(); }, 4000);
                                          
                                          
                                            }
                                           // log("1+bin im on !!!+++!"+a+stateHelp)
                                            });
                                          
                                            on({id: dpANLEGEN, ack: false, change: "ne"}, function (obj) { 
                                               // log(getState(dpANLEGEN).val+"----aa");
                                                if(getState(dpANLEGEN).val!="") {
                                             setState("alexa2.0.Lists.SHOPPING_LIST.#New",getState(dpANLEGEN).val)
                                                var timeout = setTimeout(function () {
                                            writeHTML(); }, 2000);
                                                } 
                                                
                                            });
                                          
                                          on({id: "javascript.0.echos.Alexa_Einkaufsliste.JSON_uncompleted", ack: false, change: "any"}, function (obj) { 
                                             var timeout2 = setTimeout(function () {
                                                 writeHTML(); 
                                             }, 4000);
                                          });
                                          
                                          
                                          
                                               // on({id: dpRefresh, ack: false, change: "any"}, function (obj) { 
                                                on({id: dpRefresh, ack: false, val:true }, function (obj) { 
                                                //log(getState(dpANLEGEN).val+"----refresh");
                                                var timeout2 = setTimeout(function () {
                                                 writeHTML(); }, 4000);
                                                 setState("javascript.0.Alexa_Listen.ALEXALists.Einkauf.Refresh", false);
                                               // }
                                            
                                            });  
                                          
                                               on({id: myDeleterArr, ack: false, change: "any"}, function (obj) { 
                                                //log(getState(dpANLEGEN).val+"----refresh");
                                                var timeout2 = setTimeout(function () {
                                            writeHTML(); }, 4000);
                                           
                                               // }
                                            
                                            });
                                          
                                            
                                              on({id: dpDelAll, ack: false,val: true}, function (obj) { 
                                          let i;
                                          for (i=0;i<myIDArr.length;i++) {//log("hier : "+myIDArr[i]);
                                            if (myIDArr[i]!="dummy") {
                                            let toDelete=myIDArr[i];
                                               setTimeout( function timer(){
                                               var stateHelp="alexa2.0.Lists.SHOPPING_LIST.items."+toDelete+".#delete"
                                            log("Statehelp: "+stateHelp)
                                            setState(stateHelp,true);
                                            }, i*2500 );
                                          
                                           
                                            }
                                            }
                                            log(i.toString())
                                            var timeout = setTimeout(function () {
                                                 setState(dpDelAll,false);
                                                 writeHTML(); }, (1+myIDArr.length)*1500);
                                           
                                           // log(stateHelp)
                                          
                                          });
                                          
                                          }, 5000);
                                          

                                          Mir ist natürlich nicht gelungen das Script mit in den JSON zu packen welches die Löschfunktion aufruft.
                                          Deshalb habe ich dieses direkt im Projekt unter Skriptehinterlegt:

                                          /* Alexa Einkaufsliste JSON */
                                          function setOnDblClickCustomShop( myvalue ) {
                                              var Self = this; 
                                              var objID = myvalue;
                                              vis.setValue(myvalue,true);
                                              var2 = "javascript.0.Alexa_Listen.ALEXALists.Einkauf.Refresh"; 
                                              vis.setValue(var2,true);
                                              }
                                          

                                          Das Widget dazu braucht die folgenden Einstellungen (sonst aktualisiert es irgendwie nicht ordentlich:
                                          f45c1164-1f68-4778-a8ef-c1e64977a7fa-image.png

                                          Hier auch noch mal Export:

                                          [{"tpl":"i-vis-jsontable","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","iTblRowLimit":"200","iTableRefreshRate":"1","iColCount":"2","iColShow1":"true","iTblTextAlign1":"left","iTblCellFormat1":"normal","iTblCellImageSize1":"200","iTblCellBooleanCheckbox1":"false","iTblCellBooleanColorFalse1":"#ff0000","iTblCellBooleanColorTrue1":"#00ff00","iTblCellNumberDecimals1":"2","iTblCellNumberDecimalSeperator1":".","iTblCellNumberThousandSeperator1":",","iTblCellThresholdsDp1":"","iTblCellThresholdsText1":"","iOpacityAll":"1","iTblRowEvenColor":"rgba(51, 51, 51, 0.3)","iTblRowUnevenColor":"rgba(69, 136, 24, 0.3)","iTblHeaderColor":"#333333","iRowSpacing":"10","iTblRowEvenTextColor":"#eeece1","iTblRowUnevenTextColor":"#eeece1","iTblHeaderTextColor":"#05e8ff","iBorderSize":"1","iBorderStyleLeft":"outset","iBorderStyleRight":"outset","iBorderStyleUp":"outset","iBorderStyleDown":"outset","iBorderColor":"#666666","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"oid":"javascript.0.Alexa_Listen.ALEXALists.Einkauf.ALEXAEinkauf-JSON","iTblShowHead":true,"iHorScroll":false,"iColShow2":"true","iTblTextAlign2":"left","iTblCellFormat2":"normal","iTblCellImageSize2":"200","iTblCellBooleanCheckbox2":"false","iTblCellBooleanColorFalse2":"#ff0000","iTblCellBooleanColorTrue2":"#00ff00","iTblCellNumberDecimals2":"2","iTblCellNumberDecimalSeperator2":".","iTblCellNumberThousandSeperator2":",","iTblCellThresholdsDp2":"","iTblCellThresholdsText2":"","iColShow3":"true","iTblTextAlign3":"center","iTblCellFormat3":"normal","iTblCellImageSize3":"200","iTblCellBooleanCheckbox3":"false","iTblCellBooleanColorFalse3":"#ff0000","iTblCellBooleanColorTrue3":"#00ff00","iTblCellNumberDecimals3":"2","iTblCellNumberDecimalSeperator3":".","iTblCellNumberThousandSeperator3":",","iTblCellThresholdsDp3":"","iTblCellThresholdsText3":"","iColShow4":"true","iTblTextAlign4":"center","iTblCellFormat4":"normal","iTblCellImageSize4":"200","iTblCellBooleanCheckbox4":"false","iTblCellBooleanColorFalse4":"#ff0000","iTblCellBooleanColorTrue4":"#00ff00","iTblCellNumberDecimals4":"2","iTblCellNumberDecimalSeperator4":".","iTblCellNumberThousandSeperator4":",","iTblCellThresholdsDp4":"","iTblCellThresholdsText4":"","iColShow5":"true","iTblTextAlign5":"center","iTblCellFormat5":"normal","iTblCellImageSize5":"200","iTblCellBooleanCheckbox5":"false","iTblCellBooleanColorFalse5":"#ff0000","iTblCellBooleanColorTrue5":"#00ff00","iTblCellNumberDecimals5":"2","iTblCellNumberDecimalSeperator5":".","iTblCellNumberThousandSeperator5":",","iTblCellThresholdsDp5":"","iTblCellThresholdsText5":"","iColShow6":"true","iTblTextAlign6":"center","iTblCellFormat6":"normal","iTblCellImageSize6":"200","iTblCellBooleanCheckbox6":"false","iTblCellBooleanColorFalse6":"#ff0000","iTblCellBooleanColorTrue6":"#00ff00","iTblCellNumberDecimals6":"2","iTblCellNumberDecimalSeperator6":".","iTblCellNumberThousandSeperator6":",","iTblCellThresholdsDp6":"","iTblCellThresholdsText6":"","iColShow7":"true","iTblTextAlign7":"left","iTblCellFormat7":"normal","iTblCellImageSize7":"200","iTblCellBooleanCheckbox7":"false","iTblCellBooleanColorFalse7":"#ff0000","iTblCellBooleanColorTrue7":"#00ff00","iTblCellNumberDecimals7":"2","iTblCellNumberDecimalSeperator7":".","iTblCellNumberThousandSeperator7":",","iTblCellThresholdsDp7":"","iTblCellThresholdsText7":"","iColShow8":"true","iTblTextAlign8":"left","iTblCellFormat8":"normal","iTblCellImageSize8":"200","iTblCellBooleanCheckbox8":"false","iTblCellBooleanColorFalse8":"#ff0000","iTblCellBooleanColorTrue8":"#00ff00","iTblCellNumberDecimals8":"2","iTblCellNumberDecimalSeperator8":".","iTblCellNumberThousandSeperator8":",","iTblCellThresholdsDp8":"","iTblCellThresholdsText8":"","iColShow9":"true","iTblTextAlign9":"left","iTblCellFormat9":"normal","iTblCellImageSize9":"200","iTblCellBooleanCheckbox9":"false","iTblCellBooleanColorFalse9":"#ff0000","iTblCellBooleanColorTrue9":"#00ff00","iTblCellNumberDecimals9":"2","iTblCellNumberDecimalSeperator9":".","iTblCellNumberThousandSeperator9":",","iTblCellThresholdsDp9":"","iTblCellThresholdsText9":"","iColShow10":"true","iTblTextAlign10":"left","iTblCellFormat10":"normal","iTblCellImageSize10":"200","iTblCellBooleanCheckbox10":"false","iTblCellBooleanColorFalse10":"#ff0000","iTblCellBooleanColorTrue10":"#00ff00","iTblCellNumberDecimals10":"2","iTblCellNumberDecimalSeperator10":".","iTblCellNumberThousandSeperator10":",","iTblCellThresholdsDp10":"","iTblCellThresholdsText10":"","iColShow11":"true","iTblTextAlign11":"left","iTblCellFormat11":"normal","iTblCellImageSize11":"200","iTblCellBooleanCheckbox11":"false","iTblCellBooleanColorFalse11":"#ff0000","iTblCellBooleanColorTrue11":"#00ff00","iTblCellNumberDecimals11":"2","iTblCellNumberDecimalSeperator11":".","iTblCellNumberThousandSeperator11":",","iTblCellThresholdsDp11":"","iTblCellThresholdsText11":"","iColShow12":"true","iTblTextAlign12":"left","iTblCellFormat12":"normal","iTblCellImageSize12":"200","iTblCellBooleanCheckbox12":"false","iTblCellBooleanColorFalse12":"#ff0000","iTblCellBooleanColorTrue12":"#00ff00","iTblCellNumberDecimals12":"2","iTblCellNumberDecimalSeperator12":".","iTblCellNumberThousandSeperator12":",","iTblCellThresholdsDp12":"","iTblCellThresholdsText12":"","iColShow13":"true","iTblTextAlign13":"left","iTblCellFormat13":"normal","iTblCellImageSize13":"200","iTblCellBooleanCheckbox13":"false","iTblCellBooleanColorFalse13":"#ff0000","iTblCellBooleanColorTrue13":"#00ff00","iTblCellNumberDecimals13":"2","iTblCellNumberDecimalSeperator13":".","iTblCellNumberThousandSeperator13":",","iTblCellThresholdsDp13":"","iTblCellThresholdsText13":"","iColShow14":"true","iTblTextAlign14":"left","iTblCellFormat14":"normal","iTblCellImageSize14":"200","iTblCellBooleanCheckbox14":"false","iTblCellBooleanColorFalse14":"#ff0000","iTblCellBooleanColorTrue14":"#00ff00","iTblCellNumberDecimals14":"2","iTblCellNumberDecimalSeperator14":".","iTblCellNumberThousandSeperator14":",","iTblCellThresholdsDp14":"","iTblCellThresholdsText14":"","iColAttr1":"Artikel","iColName1":"Artikel","iColAttr2":"Delete","iColName2":"Löschen","iColAttr3":"caller","iColName3":"Rufnummer","iColAttr4":"sym","iColAttr5":"name","iColName4":" ","iColName5":"Name","iTblCellDatetimeFormat1":"dd.mm.yy HH:ii","iBorderRemoveDouble":false,"iTblFixedHead":true,"iVertScroll":true,"iColAttr6":"device","iColName6":"Telefoniegerät","iTblSortOrder":"asc","iTblHeadTextAlign1":"left","iTblHeadTextAlign2":"left","iTblHeadTextAlign3":"center","iTblHeadTextAlign4":"center","iTblHeadTextAlign5":"center","iTblHeadTextAlign6":"center"},"style":{"left":"0px","top":"0px","width":"1144px","height":"800px","z-index":"12","text-shadow":"1px 1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, -1px -1px 0 #000000, 1px 0px 0 #000000, 0px 1px 0 #000000, -1px 0px 0 #000000, 0px -1px 0 #000000, 1px 1px 4px #000000, 2px 2px 4px #000000","font-family":"Oxanium","font-size":"50px","overflow-x":"hidden","overflow-y":"scroll","text-align":"left"},"widgetSet":"vis-inventwo"}]
                                          

                                          Das ganze sieht dann so im Betrieb aus:
                                          f2af01f1-b320-4800-8d5d-0a17a2eae442-image.png
                                          Also eigentlich wie in meinem vorherigen Artikel. Nur eben als JSON Tabelle dargestellt. So könnte man die Formatierungen in der VIS / am Widget vornehmen und auch dort nach belieben Spalten ausblenden oder die Reihenfolge ändern. Nachteil ist das man dann das Skript extra unterbringen muss.

                                          Du hast ja jede Menge Skripte auf ähnlicher Basis geschrieben - eventuell lohnt es sich ebenfalls das ein oder andere zusätzlich als JSON auszugeben.

                                          liv-in-sky 1 Reply Last reply Reply Quote 0
                                          • BananaJoe
                                            BananaJoe Most Active @liv-in-sky last edited by

                                            @liv-in-sky sagte in Script: Alexa Listen pflegen und Anzeigen:

                                            @lucajordi einfach enter magst du nicht ?

                                            @lucajordi
                                            jepp, das jqui - ctrl - Input + Set-Button kann das. Mann kann auch Symbole reinkopieren (ich hab eines aus deinen Quelltexten genommen):
                                            7bb72271-fd67-4f62-96b2-9e56224d50b7-image.png
                                            jetzt bräuchte man einen grünen Haken zum kopieren 🙂 Woher hast du die Symbole aus dem Quelltext?

                                            liv-in-sky L 2 Replies Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            417
                                            Online

                                            31.9k
                                            Users

                                            80.1k
                                            Topics

                                            1.3m
                                            Posts

                                            javascript template
                                            29
                                            409
                                            61524
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo