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.
    • Stephan Schleich
      Stephan Schleich @liv-in-sky last edited by Stephan Schleich

      @liv-in-sky Vielen dank, das wäre ein Traum 😊

      Edit: Evtl. lässt es sich auf bewerkstelligen manuell mehrere ical Instanzen für die Tabelle zu definieren?

      liv-in-sky 2 Replies Last reply Reply Quote 0
      • 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
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            756
                                            Online

                                            31.8k
                                            Users

                                            79.9k
                                            Topics

                                            1.3m
                                            Posts

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