Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Skripten / Logik
    4. JavaScript
    5. HTML Tabelle Calendar Adapter

    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

    HTML Tabelle Calendar Adapter

    This topic has been deleted. Only users with topic management privileges can see it.
    • liv-in-sky
      liv-in-sky @Stephan Schleich last edited by liv-in-sky

      @Stephan-Schleich wenn überhaupt auch nicht auf die schnelle - da muss ich verschiedene json zusammenlegen und sortieren sonst werden die einfach untereinander geschrieben - du willst aber alle gesamt-sortiert anzeigen- bei einem ical brauche ich nicht sortieren, weil die daten schon sortiert sind

      teste mal als erstes dieses script hier - ist eine kopie vom trashschedule script - daher finden sich teile darin. du musst eigentlich nur dpVIS erstellen und eintragen. dpTSJson sollt für die instanz 0 passen

      wichtig ist das setting in der instanz: darf nicht ausgewählt sein:

      Image 4.png

       //@liv-in-sky 2020  3.1.2020 10:00
      
      
      //HIER WIRD PFAD UND FILENAME DEFINIERT
      const path = "/htmlexample.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
      let   braucheEinVISWidget=true;                     // bei true wird ein html-tabelle in einen dp geschrieben - siehe nächste zeile
      let   braucheMaterialDesignWidget=false;             // bei true wird ein json in einen dp geschrieben - MUSS ANGELEGT WERDEN !!!
      let   braucheMaterialDesignWidgetTable=false;        // bei true wird ein json in einen dp geschrieben - MUSS ANGELEGT WERDEN !!!
      let dpVIS="0_userdata.0.Tabellen.iCALTermine";         //WICHTIG wenn "braucheEinVISWidget" auf true gesetzt !!  dp zusätzlich für VIS-HTML-Basic-Widget
      let dpTSJson=["ical.0.data.table","ical.1.data.table"];                        //WICHTIG wenn "braucheEinVISWidget" auf true gesetzt !! wähle den dp der trashschedule instanz
      let dpMaterialWidget="0_userdata.0.Tabellen.TrashScheduleMaterialWidget";            // WICHTIG wenn braucheMaterialDesignWidget auf true MATERIALDESIGN List Widget - datenpunkt anlegen : zeichenkette  
      let dpMaterialWidgetTable="0_userdata.0.Tabellen.TrashScheduleMaterialWidgetTable";  // WICHTIG wenn braucheMaterialDesignWidgetTable auf true MATERIALDESIGN Table Widget - datenpunkt anlegen: zeichenkette  
       
      let wievielTage=7
      //im MD List Widget
       let farbeNurEinTag="yellow"                               //statusBarColor im MD List Widget wenn nur noch ein tag
       let farbeStandardBar="#d5d3b4"                            ////statusBarColor im MD List Widget wenn normal
      //im HTML Widget
       let bildergröße=24
       let farbeEinTagHTML="#CB9529"                             // Farbe der zeile wenn unter einem tag:
       let styleEinTagHTML="span"                                  // style der zeile wenn unter einem tag:  möglich b fett; i kursiv; span normal
      
      //HIER WERDEN DIE TONNENNAMEN und BILDERPFADE definiert
      /*const apName = {  "RESTMÜLL"     : { aname: "/vis.0/armin/img/muelltonneSchwarz.png"},
                       "BIOMÜLL"      : { aname: "/vis.0/armin/img/muelltonneBraun.png"},
                       "GELBER SACK"  : { aname: "/vis.0/armin/img/muelltonneGelb.png"},
                       "PAPIER TONNE" : { aname: "/vis.0/armin/img/muelltonneGruen.png"},
                       "nochwas"      : { aname: "/vis.0/armin/img/info.png"},
                       "irgendwas"    : { aname: "/vis.0/armin/img/info.png"}}*/
      
      
      
       let mySchedule="  35 * * * * ";                       //jede stunde um 35 minuten
      
      //---------------------------------------
      
      //HIER DIE SPALTEN ANZAHL DEFINIEREN - jede Spalte einen Wert - in diesem Beispiel sind es 4
      var htmlFeld1='EVENT';       var Feld1lAlign="left";                     // überschrift Tabellen Spalte1 und  Ausrichtung left,right or center
      var htmlFeld2='ZEIT';        var Feld2lAlign="left";                      // überschrift Tabellen Spalte2 und  Ausrichtung left,right or center
      var htmlFeld3='DATUM';         var Feld3lAlign="center";                    // überschrift Tabellen Spalte3 und  Ausrichtung left,right or center
      var htmlFeld4='TAG';        var Feld4lAlign="center";                    // überschrift Tabellen Spalte4 und  Ausrichtung left,right or center
      //-----------------------------------
      
      
      //ÜBERSCHRIFT ÜBER TABELLE
      let   htmlUberschrift=false;                           // mit Überschrift über der tabelle
      let   htmlSignature=false;                              // anstatt der Überscghrift eine signature: - kleiner - anliegend
      const htmlFeldUeber='Trash Schedule';              // Überschrift und Signature
      const htmlFarbUber="black";                         // 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 htmlFarbZweiteTabelle="black";                // Farbe der Überschrift bei jeder 2.ten Tabelle
      const htmlFarbTableColorUber="black";               // Überschrift in der tabelle - der einzelnen Spalten BDBDBD
      //ÜBERSCHRIFT SPALTEN
      const UeberSchriftHöhe=25;                          //Überschrift bekommt mehr Raum - darunter und darüber - Zellenhöhe
      const LinieUnterUeberschrift="2";                   // Linie nur unter Spaltenüberschrift - 
      const farbetrennungsLinie="white";
      const farbeLinieUnterUeberschrift="black";
      const groesseUeberschrift=16;
      const UeberschriftStyle="normal"                     // möglich "bold"
      //GANZE TABELLE
      let abstandZelle="2";
      let farbeUngeradeZeilen="#333333"//"#1C1C1C";                     //Farbe für ungerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2
      let farbeGeradeZeilen="black"//"black";                        //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=""     //"Jura-DemiBold"   //"RobotoCondensed-Bold"   //"Helvetica";
      const htmlSchriftgroesse="16px";
      //FELDER UND RAHMEN
      let   UeberschriftSpalten=true;                // ein- oder ausblenden der spatlen-überschriften
      const htmlFarbFelderschrift="#D8D8D8";                  // SchriftFarbe der Felder
      const htmlFarbFelderschrift2="#D8D8D8";                 // SchriftFarbe der Felder für jede 2te Tabelle
      const htmlFarbTableColorGradient1="orange";          //  Gradient - Hintergrund der Tabelle - Verlauffarbe
      const htmlFarbTableColorGradient2="green";          //  Gradient - Hintergrund der Tabelle - ist dieser Wert gleich Gradient1 gibt es keinen verlauf
      const htmlFarbTableBorderColor="transparent";             // 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>";
      
      
      
      
      //NICHTS ÄNDERN - abhängig von den oben definierten _Spalten - in diesem Beispiel sind es 4
      
      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><td align="+Feld4lAlign+">&ensp;"+htmlFeld4+"&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><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld4+
                         "&ensp;</td>";
      //------------------------------------------------------
      
      
      var htmlOut="";
      var mix;
      var counter;
      var val1; var val2; var val0; var val3;
      var htmlTabUeber="";
      var wochentag = ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag' ]
      var myJsonWidget=[]; 
      var myJsonWidget2=[];
      var json1; var json2; var json3; var json4; var json5;
      
      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+htmlTabUeber2+htmlTabUeber3; break;
         case 4: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break;
      }; 
      if (!UeberschriftSpalten) {htmlTabUeber=""} 
      
      //--------------------------------------------------------------------------------------------------------------------------------------------------
      //---------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,val3 !!!---------------------------------------------------------------------
      //--------------------------------------------------------------------------------------------------------------------------------------------------
      
      var myData=[]
      for (let i=0;i<dpTSJson.length;i++) {
         myData=myData.concat(getState(dpTSJson[i]).val)
      }
      myData.sort(function(a, b){
                                     return new Date(a._date).getTime() - new Date(b._date).getTime();      // return parseInt(new Date(b.date).getTime()) - parseInt(a.date);
                                     });
      
      //myData=getState(dpTSJson).val;
      for (var index in myData ) {             // hier eigene schleife definieren
           if(Math.ceil(Math.floor( ((new Date(myData[index]._date).getTime() - new Date().getTime())/60/60/24) )/1000 )-1 <=wievielTage){
              counter++
             val0=myData[index].event
             let val2help=myData[index].date
             val2=val2help.replace(/(.+?) .+/,"$1")//myData[index].daysLeft     
             //log(myData[index].nextDate) 
            // val3=wochentag[getDateObject(myData[index].nextDate).getDay()]+"  "+formatDate(getDateObject(myData[index].nextDate), "DD.MM.")
              val1=val2help.replace(/.+? (.+)/,"$1")
              let val3help=2;
              if (formatDate(getDateObject(myData[index]._date), "DD.MM") == formatDate(getDateObject((new Date().getTime())), "DD.MM") ) 
                     val3help=Math.ceil(Math.floor( ((new Date(myData[index]._date).getTime() - new Date().getTime())/60/60/24) )/1000 )-1
      
              log(     (Math.ceil(Math.floor( ((new Date(myData[index]._date).getTime() - new Date().getTime())/60/60/24) )/1000 )-1).toString()                  )
             // log(val3help.toString())
      
              val3=formatDate(getDateObject(myData[index]._date), "W")
            //  log((new Date(myFFF[4]._date).getTime() - new Date().getTime()).toString())
      
      
      //log((Math.floor( ((new Date(myFFF[4]._date).getTime() - new Date().getTime())/60/60/24) )/1000).toString())
       
           //  for(let device_name in apName) {                            //Abfrage welches bild
                           // log(myData[index].name+"   "+device_name+"  "+ apName[device_name].aname)
             //              if (myData[index].name==device_name) {val0="<img src="+apName[device_name].aname+" height=\""+bildergröße+"\" width=\""+bildergröße+"\">"; json1=apName[device_name].aname}}; 
                           
                                                             
          //   if (myData[index].name=="RESTMÜLL") {/*val0="⬛"; */       val0="<img src=/vis.0/armin/img/muelltonneSchwarz.png height=\""+bildergröße+"\" width=\""+bildergröße+"\">"; json1="/vis.0/armin/img/muelltonneSchwarz.png"}
          //   if (myData[index].name=="GELBER SACK") {/*val0="🟨"; */    val0="<img src=/vis.0/armin/img/muelltonneGelb.png height=\""+bildergröße+"\" width=\""+bildergröße+"\">"; json1="/vis.0/armin/img/muelltonneGelb.png"}
          //   if (myData[index].name=="BIOMÜLL") {/*val0="🟫";  */       val0="<img src=/vis.0/armin/img/muelltonneBraun.png height=\""+bildergröße+"\" width=\""+bildergröße+"\">";json1="/vis.0/armin/img/muelltonneBraun.png"}
          //   if (myData[index].name=="PAPIER TONNE") {/* val0="🟩"; */  val0="<img src=/vis.0/armin/img/muelltonneGruen.png height=\""+bildergröße+"\" width=\""+bildergröße+"\">";json1="/vis.0/armin/img/muelltonneGruen.png"}
          //   if (myData[index].name=="irgendwas") {/*val0="☢️";  */     val0="<img src=/vis.0/armin/img/irgendwas.jpg height=\""+bildergröße+"\" width=\""+bildergröße+"\">";json1="/vis.0/armin/img/irgendwas.png"}
      
              if (braucheMaterialDesignWidget || braucheMaterialDesignWidgetTable) {
                  json2=val1; json3=val2; json4=val3;json5=farbeStandardBar;
                  makeJsonWidget(json1,json2,json3,json4,json5);}
      
              if(val3help<=1){
                  val3="<font color=\""+farbeEinTagHTML +"\"><"+styleEinTagHTML+">"+val3;
                  val1="<font color=\""+farbeEinTagHTML +"\"><"+styleEinTagHTML+">"+val1;
                  val2="<font color=\""+farbeEinTagHTML +"\"><"+styleEinTagHTML+">"+val2;
                  val0="<font color=\""+farbeEinTagHTML +"\"><"+styleEinTagHTML+">"+val0}
              
         
           tabelleBind(); //HIER NICHTS ÄNDERN : HIER WERDEN DIE DATEN DER SCHLEIFE ZUSAMMENGESETZT  - diese function muss als letztes in der eigenen schleife aufgerufen werden
           }
         }; //Schleifen Ende - je nach schleifenart muss hier etwas geändert werden !!!!!!!!!
      
      //-------------------------------------------------------------------------------------------------------------------------------------------------
      //--------------------------------------------------Ende der schleife------------------------------------------------------------------------------
      //-------------------------------------------------------------------------------------------------------------------------------------------------
      
            tabelleFinish(); // AB HIER NICHTS ÄNDERN - tabelle fertigstellen
           
      } // function ende
      
      //MAIN:
      
       
      schedule(mySchedule,  function () {
       writeHTML();
       if (braucheEinFile) {writeFile(home, path ,htmlOut, function (error) { /* log('file written');*/  });}
      }); 
      writeHTML();
      
      
      function tabelleBind(){
           //HIER WERDEN DIE DATEN DER SCHLEIFE ZUSAMMENGESETZT - hat man oben 4 Felder definiert, braucht man hier 4 Werte 
         
             switch (mehrfachTabelle) {  
              case 1:  if(counter%2==0){  htmlOut=htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+">"+val0+"</td><td align="+Feld2lAlign+">"+val1+"</td><td align="+Feld3lAlign+">"+val2+"</td><td align="+Feld4lAlign+">"+val3+"</td></tr>"; break;} else
                                       {  htmlOut=htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+">"+val0+"</td><td align="+Feld2lAlign+">"+val1+"</td><td align="+Feld3lAlign+">"+val2+"</td><td align="+Feld4lAlign+">"+val3+"</td></tr>"; break;}
              case 2: if(counter%4==0){ 
                       if(counter%2==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+">"+val0+"</td><td align="+Feld2lAlign+">"+val1+"</td><td align="+Feld3lAlign+">"+val2+"</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                          ";\"align="+Feld4lAlign+">"+val3+"</td>"; } 
                                    else {htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val0+"</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val1+"</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val2+"</td><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val3+"</td></tr>";} break;
                          }else{
                       if(counter%2==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+">"+val0+"</td><td align="+Feld2lAlign+">"+val1+"</td><td align="+Feld3lAlign+">"+val2+"</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                          ";\" align="+Feld4lAlign+">"+val3+"</td>"; } 
                                    else {htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val0+"</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val1+"</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val2+"</td><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val3+"</td></tr>";} break;}                  
              case 3:  if(counter%2==0)   {
                        if(counter%3==0 )  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+">"+val0+"</td><td align="+Feld2lAlign+">"+val1+"</td><td align="+Feld3lAlign+">"+val2+"</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                                              ";\" align="+Feld4lAlign+">"+val3+"</td>"; } 
                                    else { if(counter%3==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val0+"</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val1+"</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val2+"</td><td  align="+Feld4lAlign+" style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                                              ";color:"+htmlFarbFelderschrift2+"\">"+val3+"</td>";} 
                                                     else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+">"+val0+"</td><td align="+Feld2lAlign+">"+val1+"</td><td align="+Feld3lAlign+">"+val2+"</td><td align="+Feld4lAlign+">"+val3+"</td></tr>";}
                                               } break;}else{
                        if(counter%3==0 )  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+">"+val0+"</td><td align="+Feld2lAlign+">"+val1+"</td><td align="+Feld3lAlign+">"+val2+"</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                                              ";\" align="+Feld4lAlign+">"+val3+"</td>"; } 
                                    else { if(counter%3==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val0+"</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val1+"</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val2+"</td><td  align="+Feld4lAlign+" style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                                              ";color:"+htmlFarbFelderschrift2+"\">"+val3+"</td>";} 
                                                     else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+">"+val0+"</td><td align="+Feld2lAlign+">"+val1+"</td><td align="+Feld3lAlign+">"+val2+"</td><td align="+Feld4lAlign+">"+val3+"</td></tr>";}
                                               } break;}
      
              case 4:  if(counter%8==0)   {
                       if(counter%4==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+">"+val0+"</td><td align="+Feld2lAlign+">"+val1+"</td><td align="+Feld3lAlign+">"+val2+"</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+ ";\" align="+Feld4lAlign+">"+val3+"</td>"; } 
                                        else {if(counter%4==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val0+"</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val1+"</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val2+"</td><td  align="+Feld4lAlign+" style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"; color:"+htmlFarbFelderschrift2+"\">"+val3+"</td>";} 
                                                     else    {if(counter%4==3)  { htmlOut= htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val0+"</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val1+"</td><td align="+Feld3lAlign+" style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";color:"+htmlFarbFelderschrift2+"\">"+val2+"</td><td  align="+Feld4lAlign+" style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+ "color:"+htmlFarbFelderschrift2+"\">"+val3+"</td></tr>";} 
                                                                       else    {htmlOut  = htmlOut+"<td align="+Feld1lAlign+">"+val0+"</td><td align="+Feld2lAlign+">"+val1+"</td><td align="+Feld3lAlign+">"+val2+"</td><td  style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\"align="+Feld4lAlign+">"+val3+"</td>";}}
                                               } break;}else{
                       if(counter%4==0)   {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+">"+val0+"</td><td align="+Feld2lAlign+">"+val1+"</td><td align="+Feld3lAlign+">"+val2+"</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+ ";\" align="+Feld4lAlign+">"+val3+"</td>"; } 
                                        else {if(counter%4==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val0+"</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val1+"</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val2+"</td><td  align="+Feld4lAlign+" style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+ ";color:"+htmlFarbFelderschrift2+"\">"+val3+"</td>";} 
                                                     else    {if(counter%4==3)  { htmlOut= htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val0+"</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val1+"</td><td align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">"+val2+"</td><td  align="+Feld4lAlign+"  color:"+htmlFarbFelderschrift2+"\">"+val3+"</td></tr>";} 
                                                                       else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+">"+val0+"</td><td align="+Feld2lAlign+">"+val1+"</td><td align="+Feld3lAlign+">"+val2+"</td><td  style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\"align="+Feld4lAlign+">"+val3+"</td>";}}
                                               } break;     }                   
      
           } //switch ende
      
      }
      
      
      function tabelleFinish() {
      
           // tabelle fertigstellen
      
      
             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><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><td>&ensp;</td></tr>');      
                       if(counter%3==0)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&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><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><td>&ensp;</td></tr>");
                       if(counter%4==1)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&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><td>&ensp;</td></tr>");    
                       if(counter%4==0)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&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><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td><td>&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 : htmlOutVIS=htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter ;
      
                    } else {
                     zentriert ?  htmlOutVIS=htmlZentriert+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter :  htmlOutVIS=htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter;
      
                       }
      
        // 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);
      if (braucheMaterialDesignWidget) {
           
             setState(dpMaterialWidget,JSON.stringify(myJsonWidget2)); 
             myJsonWidget2=[];
      }
      if (braucheMaterialDesignWidgetTable) {
        
        setState(dpMaterialWidgetTable,JSON.stringify(myJsonWidget)); 
           myJsonWidget=[];
      }
      }
      
      
      
      
      function makeJsonWidget(vax1,vax2,vax3,vax4,vax5) {
      //log(vax3+vax6+htmlFeld1)
         if ( braucheMaterialDesignWidgetTable) {
         myJsonWidget.push({
             Device : vax1,
             Wert : vax2,
             Status : vax4,
             Hersteller : vax3       
         }
      
         );}
      
      //	log(myJsonWidget)
      if (braucheMaterialDesignWidget) {
      let mysubText = `<div style="display: flex; flex-direction: row; line-height: 1.3; padding-left: 1px; padding-right: 8px; align-items: center;">
                      <div style="flex: 1;">${vax4}</div>
                      <div style="color: black; font-size: 18px; font-family: RobotoCondensed-LightItalic; text-align: right;">${vax3}</div>
                      </div>`
             if(vax3<=1)   vax5=farbeNurEinTag               
        
           myJsonWidget2.push({
                     text: vax2,
                     subText: mysubText,
                     statusBarColor: vax5,
                     image: vax1,
                     imageColor: "",
                     listType: "text",
                     showValueLabel: false,
                     name: vax2,
                     status: vax3,
                     Wert : vax3,
                     Hersteller : vax4
                 });
      }
       }
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      

      bergjet 1 Reply Last reply Reply Quote 1
      • liv-in-sky
        liv-in-sky @Stephan Schleich last edited by

        @Stephan-Schleich

        habe es mal probiert mit mehreren instanzen - habe das script oben ausgetauscht - änderung ist :

        Image 5.png

        hier musst du deine datenpunkte der verschiedenene instanzen eintragen

        komma ist wichtig - wenn du nur eines willst schaut es so aus:

        let dpTSJson=["ical.0.data.table"];     
        
        Stephan Schleich 1 Reply Last reply Reply Quote 1
        • Stephan Schleich
          Stephan Schleich @liv-in-sky last edited by

          @liv-in-sky Vielen Dank, schaut super aus 👍

          Stephan Schleich 1 Reply Last reply Reply Quote 0
          • Stephan Schleich
            Stephan Schleich @Stephan Schleich last edited by

            @liv-in-sky einen kleinen Fehler hät ich noch gefunden

            260e1c22-64bc-4fda-bd05-feacbaa99cf0-image.png

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

              @Stephan-Schleich du hast da das setting in der instanz falsch https://forum.iobroker.net/post/530687

              Stephan Schleich 1 Reply Last reply Reply Quote 1
              • Stephan Schleich
                Stephan Schleich @liv-in-sky last edited by

                @liv-in-sky aaah, dankeschön 🙂

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

                  @liv-in-sky Also mich würde diese Tabelle für ical sehr interessieren. Aber, welche Datenpunkte genau muss ich wo anlegen?

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

                    @bergjet ausgehend von dieser tabelle: https://forum.iobroker.net/post/530687

                    Image 4.png

                    schwarze pfeile müssen angelegt werden - du kannst den pfad bestimmen, wie du willst und dann im script angleichen. was im script angegeben ist, muss auch existieren. alle als zeichenkette.
                    roter pfeil: die datenpunkte von deinen ical instanzen eintragen. hier im script sind 2 eingetragen, in anführungszeichen und komma getrennt. diese datenpunkte existieren, wenn du ical installiert hast

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

                      @liv-in-sky So, ich habe alles angelegt und das Script so belassen. Aber wie bringe ich die HTML Tabelle (0_userdata.0.Tabellen.iCALTermine) in VIS angezeigt, womit?

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

                        @bergjet ein normales html widget

                        und du gibst ein binding des dp an im htmlteil des widgets - -bedeutet: das widget soll den inhalt des datenpunktes anzeigen

                        {0_userdata.0.Tabellen.iCALTermine}

                        ist nur in runtime sichtbar - nicht im editor

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

                          @liv-in-sky sagte in HTML Tabelle Calendar Adapter:

                          ist nur in runtime sichtbar - nicht im editor

                          Ah, das wars.
                          Jedoch wird mir in der Spalte Zeit nichts angezeigt.
                          Bildschirmfoto 2021-01-06 um 12.11.45.png

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

                            @bergjet

                            https://forum.iobroker.net/post/530687

                            gemacht ?

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

                              @liv-in-sky Ersetze Datum mit Worten, der Hacken ist nicht gesetzt.

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

                                @bergjet sind das evtl einträge ohne uhrzeit - also ganztägig ?

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

                                  @liv-in-sky sagte in HTML Tabelle Calendar Adapter:

                                  sind das evtl einträge ohne uhrzeit - also ganztägig

                                  Nein, sind Termine mit Zeitangaben.
                                  Aber stehen hier nicht die Tage bis zum Termin?

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

                                    @bergjet trage mal die drei logs ein und schau mal, ob da die zeit drinsteht

                                    Image 3.png

                                    log(JSON.stringify(myData))
                                      log(val2help)
                                        log(val1)
                                    
                                    
                                    bergjet 1 Reply Last reply Reply Quote 0
                                    • bergjet
                                      bergjet @liv-in-sky last edited by

                                      @liv-in-sky

                                      javascript.0	2021-01-06 18:34:18.570	info	(32557) Stop script script.js.common.ical_Abfrage
                                      javascript.0	2021-01-06 18:34:11.798	info	(32557) script.js.common.ical_Abfrage: registered 0 subscriptions and 1 schedule
                                      javascript.0	2021-01-06 18:34:11.796	info	(32557) script.js.common.ical_Abfrage: 4
                                      javascript.0	2021-01-06 18:34:11.796	info	(32557) script.js.common.ical_Abfrage:
                                      javascript.0	2021-01-06 18:34:11.795	info	(32557) script.js.common.ical_Abfrage: 11.01.2021
                                      javascript.0	2021-01-06 18:34:11.793	info	(32557) script.js.common.ical_Abfrage: 0
                                      javascript.0	2021-01-06 18:34:11.792	info	(32557) script.js.common.ical_Abfrage:
                                      javascript.0	2021-01-06 18:34:11.792	info	(32557) script.js.common.ical_Abfrage: 07.01.2021
                                      javascript.0	2021-01-06 18:34:11.791	info	(32557) script.js.common.ical_Abfrage: [{"date":"07.01.2021 ","event":"Bio-M","_class":"ical_Müll ical_tomorrow","_date":"2021-01-06T23:00:00.000Z","_end":"2021-01-07T23:00:00.000Z","_IDID":"542EBA0
                                      javascript.0	2021-01-06 18:34:11.760	info	(32557) Start javascript script.js.common.ical_Abfrage
                                      
                                      
                                      liv-in-sky 2 Replies Last reply Reply Quote 0
                                      • liv-in-sky
                                        liv-in-sky @bergjet last edited by

                                        @bergjet so sieht es bei mir aus:

                                        Image 6.png

                                        was nicht da ist, kann das script nicht anzeigen - muss mal drüber nachdenken, woran das liegt - ist aber eher ein ical thema

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

                                          @bergjet zeig mal das setting von ical unter html-einstellungen

                                          Image 7.png

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

                                            @liv-in-sky Du schiesst aber scharf. Ich habe "Start-Endzeit verbergen" angekreuzt. Also wird es auch nicht angezeigt. Jetzt stimmt es, danke. Kann ich statt der Zeit auch die Tage bis zum Termin anzeigen lassen?

                                            liv-in-sky 1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            934
                                            Online

                                            31.7k
                                            Users

                                            79.9k
                                            Topics

                                            1.3m
                                            Posts

                                            javascript template
                                            6
                                            81
                                            6684
                                            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