//@liv-in-sky 2021 23.3.-15:40
/*
NEUE LAUTSPRECHER EINBINDEN:
-im main-js-script - Zeile 5
-im Table script zeile 365 - Select angleichen
- die widgets in de vis angleichen
*/
// DAS WIDGET IN DER VIS
// das Standard html-Widget wird genutzt in der VIS - dazu den DP javascript.x.Tabellen@Liv.TestTabelleVIS.HTMLTableVis als binding angeben d.h.
// im html-teil des widgets wird dier daten punkt in geschweiften klammern angegeben z.B. {javascript.0.Tabellen@Liv.TestTabelleVIS.HTMLTableVis}
// @ts-ignore
let braucheEinVISWidget=true; // bei true wird ein html-tabelle in einen dp geschrieben - siehe nächste zeile
let dpVIS="SongsTabelleVIS" // WICHTIG wenn braucheEinVISWidget auf true gesetzt !! Ist der Name zum datenpunkt anlegen
let braucheEinJSON=false; // bei true wird ein html-tabelle in einen dp geschrieben - siehe nächste zeile
let dpJSON="SongsTabelleJSON" // WICHTIG wenn braucheEinJSON auf true gesetzt !! Ist der Name zum datenpunkt anlegen
let mySchedule=" */15 * * * * "; // jede minute
//ZUSÄTZLICH VARIABLEN
let sortierenEIN=false;
let farbeInaktiverShelly="#5590CA"
let welcheSortierung=1; // je nach spalte von 0 bis 6
let geteiteVersionsAnzeige=true; // version in spalte 7 wird 2-zeilig
const schalterUmrahmung="0" //wenn überschriften buttons sind , den rahmen mit 0 wegmachen
let mitSearch=true;
let ipButtonColorONBkground="#CBCBCA";
let powerButtonColorONSchrift="black";
let ipButtonColorONBkground2="#5590CA";
let powerButtonColorONSchrift2="white";
let flexboxView=false; // startet im flexbox modus - keine tabelle
//---------------------------------------
//HIER DIE SPALTEN ANZAHL DEFINIEREN - jede Spalte einen Wert - in diesem Beispiel sind es 3 - es MÜSSEN in allen Arrays die GLEICHE Anzahl für die Werte sein
let htmlFeld= ["","NAME","PLAY","ADD",""]; // GLEICHE ANZAHL !! NAME/ÜBERSCHRIFT DER SPALTE
let val= ["true","true","true","true","true"]; // GLEICHE ANZAHL !! SPALTE ANZEIGEN/AUSBLENDEN UND HIER SIND DIE WERTE, DIE IN DER SCHLEIFE GEFILTERET WERDEN - jeder val[x] muss unten in der schleife gesetzt werden !!
let Feld1lAlign= ["center","left","center","center","center"]; // GLEICHE ANZAHL !! AUSRICHTUNG IN DER SPALTE
let htmlSpalte1Weite=["25px","150px","25px","95px","0px"]; // GLEICHE ANZAHL !! BREITE DER SPALTE, wenn "0px" auto
let schalterInSpaltenUeberschrift=[true,true,true,true,true,true,true]; // WENN BUTTONS INSTALLIERT WERDEN - sonst false
let symbolSchalter= ["na","✓","✗"]; //ONLINE SYMBOLE // SYMBOLE DER BUTTONS - standardmäßig sind die spaltennamen (htmlFeld) genutzt - werden im standard nicht genutzt
//-----------------------------------
//Symbole für Tabelle z.b.: ⚪ ⚫ ⭕ ➕ ➖ 🎵 🔴 🔵 ⏱ 💀 👍 👎 📑 💲 👀 🔹 ✅ ❌ ⚠️ mehr: https://emojiterra.com/de/ oder https://unicode-table.com/de/html-entities/
//hier werden die styles für die tabelle definiert
//ÜBERSCHRIFT ÜBER TABELLE
const htmlUberschrift=false; // mit Überschrift über der tabelle
const htmlSignature=false; // anstatt der Überscghrift eine signature: - kleiner - anliegend
const htmlFeldUeber='BlueSound Library'; // für Überschrift und Signature falls htmlUberschrift und htmlSignature ist true
const htmlFarbUber="white"; // Farbe der Überschrift
const htmlSchriftWeite="normal"; // bold, normal - Fettschrift für Überschrift
const htmlUEberFontGroesse="18px"; // schriftgröße überschrift
//SEITENLEISTE
const ichWillSeitenLeiste=true; // links einblenden einer Seitenleiste
const nameSeitenLeiste="BLUESOUND"
const breiteSeitenleiste=35;
const schriftGroesseSeitenleiste=14;
const abstandSeitentextVonOben=4;
const htmlFarbSeiteSchrift="white";
const htmlBackgroundFarbeSeitenliste="blue";
//BUTTON ÜBERSCHRIFT
const htmlBackgroundButtonUeberschrift="transparent";
//SUCHE
let bkgroundSearch=1; // hintergrund für suche-ergebnis und flexboxen // 1: carbon; 2: iobroker; 3: colored bubbles; 4: gradient farben von htmlFarbTableColorGradient1; 5: gradient farben wie farbeUngeradeZeilen; 6: heller hintergrund
const sucheEin=true;
const sucheHoehe=25;
//MEHRERE TABELLEN NEBENEINANDER
let mehrfachTabelle=1; // bis zu 3 Tabellen werden nebeneinander geschrieben- verkürzt das Ganze, dafür etwas breiter - MÖGLICH 1,2,3 !!!
const trennungsLinie=1; // extra trennungslinie bei mehrfachtabellen - evtl auf 0 stellen, wnn htmlRahmenLinien auf none sind
const farbetrennungsLinie="#5590CA"; // bei mehreren Tabellen nebeneinander wird ein Strich zw. den Tabellen gezogen
const htmlFarbTableColorUber="white" // Spalten-Überschrift in der tabelle - für die einzelnen Spalten //"#BDBDBD";
const htmlFarbZweiteTabelle="white"; // Farbe der Spalten-Überschrift bei jeder 2.ten Tabelle
//ÜBERSCHRIFT SPALTEN - OBERSTE ZEILE IN TAB
const UeberSchriftHoehe=30; // Überschrift bekommt mehr Raum - darunter und darüber - Zellenhöhe
const LinieUnterUeberschrift="1"; // Liniehoehe nur unter Spaltenüberschrift
const farbeLinieUnterUeberschrift="#233E58"; // LinienFarbe unter Spaltenüberschrift
const groesseUeberschrift=12;
const UeberschriftStyle="normal" // möglich "bold"
const UeberschriftSpalten=true; // ein- oder ausblenden der spatlen-überschriften
//GANZE TABELLE
const abstandZelle="7"; // legt den abstand in den zellen zum rahmen fest
const zeilenAbstand=20; // legt den abstand zwischen den zeilen fest
const farbeUngeradeZeilen="#2F2F2F"; // Farbe für ungerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2 - bei "transparent" gewinnt htmlFarbTableColorGradient1
const farbeGeradeZeilen="#3c3c3c"//"#151515"; // Farbe für gerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2 - bei "transparent" gewinnt htmlFarbTableColorGradient2
let weite="600"; // Weite der Tabelle - verhindert das dynamische breiter werden, wenn werte unterschiedliche werte haben
let hoeheTabelle=387;
const zentriert=true; // ganze tabelle zentriert im html Widget - muss in pixel angegeben werden oder "auto"
const backgroundAll="#000000"; // Hintergrund für die ganze Seite - für direkten aufruf oder iqontrol sichtber - keine auswirkung auf vis-widget
const htmlSchriftart="Helvetica"//"Ubuntu-Regular" // "Jura-DemiBold" //"RobotoCondensed-Bold" //"Helvetica"; .....
const htmlSchriftgroesse="12px"; // schriftgröße in den zellen
const rahmenBreite="1px"; //mit 0 ist äußerer rahmen weg
//FELDER UND RAHMEN
const htmlFarbFelderschrift="#CBCBCA"; // SchriftFarbe der Felder
const htmlFarbFelderschrift2="#CBCBCA"; // SchriftFarbe der Felder für jede 2te Tabelle
const htmlGragient=[150,30,70]; // einstellung des gradienten
const htmlFarbTableColorGradient1="#0F263D"; // Gradient - Hintergrund der Tabelle - Verlauffarbe
const htmlFarbTableColorGradient2= "#233E58"//"#5590CA"; // Gradient - Hintergrund der Tabelle - ist dieser Wert gleich Gradient1 gibt es keinen verlauf
const htmlFarbTableBorderColor="grey"; // Farbe des Rahmen - ist dieser gleich den gradienten, sind die rahmen unsichtbar
let htmlRahmenLinien="none"; // Format für Rahmen: MÖGLICH: "none" oder "all" oder "cols" oder "rows"
// AB HIER NICHTS ÄNDERN -------------------------------------------------------------------------------------------------
// AB HIER NICHTS ÄNDERN -------------------------------------------------------------------------------------------------
// AB HIER NICHTS ÄNDERN ---------------------------------erst wieder ab Zeile 134----------------------------------------
let borderHelpBottum;
let borderHelpRight;
let htmlcenterHelp;
let htmlcenterHelp2;
let trHelperClass=" ";
let htmlTabUeber4;
let htmlTabUeber2;
let htmlTabUeber2_1;
let searchMe;
let htmlSeitenleiste;
let htmlTabStyle;
let htmlTabUeber3=""; //wird in function writeHTML gesetzt - wegen umschalten views
let buttonScript; //scripte am ende einfügen
let bkgDiv; //background scroll-div
let scrollBar; //dünne scrollbar
let aktiv=-1; let inaktiv=0;
let myButtonUeberschrift; //not in use
let htmlZentriert; //css
let einmalAbstand; //seitenleiste
if(String(htmlRahmenLinien)=="rows") {borderHelpBottum=1;borderHelpRight=0;}
if(String(htmlRahmenLinien)=="cols") {borderHelpBottum=0;borderHelpRight=1;}
if(String(htmlRahmenLinien)=="none") {borderHelpBottum=0;borderHelpRight=0;}
if(String(htmlRahmenLinien)=="all") {borderHelpBottum=1;borderHelpRight=1;}
zentriert ? htmlcenterHelp="auto" : htmlcenterHelp="left";
zentriert ? htmlcenterHelp2="center" : htmlcenterHelp2="left";
if(weite=="auto") {weite="100%"} else {weite=String(Number(weite)*mehrfachTabelle)}
makeMyCSS();
makeMySearch_Seitenleiste();
makeMyVisScripte();
//------------------------------------------------------
if ( !(val.length == Feld1lAlign.length && htmlSpalte1Weite.length == htmlFeld.length && val.length == htmlFeld.length) || (mehrfachTabelle<1 || mehrfachTabelle>3) )
{ log("Anzahle der Definitions Arrays sind ungleich ODER mehrfachTabelle ist falsch - Script wurde gestoppt !!!","error");
// @ts-ignore
stopScript();}
let langeGesamt=0;
let htmlTabUeber="";
let htmlOut="";
let mix;
let counter;
let makeJsonWidget;
let myObject=[];
let mitAlphabet=false;
if(getState("0_userdata.0.Rookie.SHORTCUT.Data").val==undefined) setState("0_userdata.0.Rookie.SHORTCUT.Data",[])
needDP();
function writeHTML(){
// rückkopplung zu vis -werteliste
setTimeout(function () { setState("0_userdata.0.Rookie.VIEW.SEUERUNG.toPlay",false);
setState("0_userdata.0.Rookie.VIEW.SEUERUNG.addNext",false);
setState("0_userdata.0.Rookie.VIEW.SEUERUNG.addLast",false);
}, 500);
aktiv=-1; inaktiv=0;
let seitenLeistenTest="";
//log(flexboxView.toString())
flexboxView ? htmlTabUeber3=`
` :
htmlTabUeber3=` `;
let htmlTabUeber1=htmlTabUeber4
myObject=[]
let helperLeerzeile=""
let makeJsonWidget=[];
htmlOut="";
counter=-1;
//--------------------------------------------------------------------------------------------------------------------------------------------------
//---------hier kommt eure schleife rein counter++, tabelleBind() und tabelleFinish() müssen so integriert bleiben !!!------------------------------
//---------alle val[x] werte müssen von euch bestimmt werden - val[0],val[1],val[2] !!!-------------------------------------------------------------
//--------------------------------------------------------------------------------------------------------------------------------------------------
let valueuptime
let myReturnJson=[]
let myDataJson=JSON.parse(getState("0_userdata.0.Rookie.VIEW.JSON").val)
myReturnJson.push({
"nummer": "0",
"anzeige":"return",
"value" : "Return",
"file" : "⏱"
})
let myJSONDATA =myReturnJson.concat(myDataJson)
//log(JSON.stringify(myJSONDATA))
for (let i=0; i b[i] )
return 1;} return 0;} );
} else {
switch (welcheSortierung) {
case 0: sortMe("alpha","value0");break;
case 1: break;
case 2: sortMe("bool","value2");break;
case 3: break;
case 4: break;
case 5: sortMe("alpha","value5");break;
case 6: sortMe("alpha","value6");break;
} }
// log("1-- :"+myObject[1].value3)
if(myObject[1].value3.includes(`//`)) myObject[0].value3="root"
for(let zz=0;zz"+"➡️" + ""
val[4]= ""//"" //myObject[zz].value3;
// let helpfirstReturn=false
//log(myObject[zz].value3)
let valButton=myObject[zz].value1;
if (myObject[zz].value2.includes("📁")) { let valButton=myObject[zz].value1;
val[0]=""
valButton=encodeURI(getState("0_userdata.0.Rookie.braucheNeueDatenNeu").val+"/"+myObject[zz].value3)
val[2]=""
val[3]=""
val[3]=val[3]+""
if (myObject[zz].value3.includes(`//`)) val[4] =val[3] = val[2]="" ;
}
if (myObject[zz].value2.includes("⏱")) {val[0]=""
val[2]=""; val[4]=decodeURIComponent(getState("0_userdata.0.Rookie.braucheNeueDatenNeu").val.replace(/^.+\/(.+)$/,"$1"))
val[3]=""
if (myObject[zz].value3.includes(`root`)) val[4] ="Root";
}
if (myObject[zz].value2.includes("🎵")) {val[0]= ""+" ♪"+" " //+ myObject[zz].value2+" "+val[0]
let valButton=encodeURI(myObject[zz].value3)
val[2]=""
val[3]=""
// val[3]=val[3]+""
val[3]=val[3]+""
}
/* 🎶
if (!myObject[zz].value2) {val[2]=symbolSchalter[2];inaktiv++}
if (myObject[zz].value2) {val[2]=symbolSchalter[1];aktiv++}
if (!myObject[zz].value2) { val[0]=""+val[0]+"";
val[1]=""+val[1]+"";
val[2]=""+val[2]+"";
val[3]=""+val[3]+"";
val[4]=""+val[4]+"";
val[5]=""+val[5]+"";
val[6]=""+val[6]+"";
} */
counter++; // SEHR WICHTIG - MUSS IN JEDER SCHLEIFE INTEGRIERT SEIN
flexboxView ? flexboxBind() : tabelleBind(); // HIER NICHTS ÄNDERN : HIER WERDEN DIE DATEN DER SCHLEIFE ZUSAMMENGESETZT
langeGesamt++; // WICHTIG Seitenleiste
}
if(myObject[1].value3.includes(`//`)) {
// log("yes")
let shortcutData= JSON.parse(getState("0_userdata.0.Rookie.SHORTCUT.Data").val)
for (let i=0;i"+"💙" + ""+""
val[4]=shortcutData[zz].art
counter++;
tabelleBind();
}
}
//-------------------------------------------------------------------------------------------------------------------------------------------------
//--------------------------------------------------Ende der schleife------------------------------------------------------------------------------
//-------------------------------------------------------------------------------------------------------------------------------------------------
htmlTabUeber2=""
let mySelected=getState("0_userdata.0.Rookie.dieIP").val //getObject("0_userdata.0.Rookie.dieIP").common.states[getState("0_userdata.0.Rookie.dieIP").val];
// log(mySelected)
let addSelect=[] // selected="selected"
for(let k =0;k<3;k++) {
k==mySelected ? addSelect.push(`selected="selected"`) : addSelect.push("")
}
let theInput=``
//SpaltenÜberschrift
for (let ue=0;ue"+htmlFeld[ue]+"")}
else {let valButton="javascript." + instance + ".Tabellen@Liv."+dpVIS+".Spalte"+ue;
if(ue==htmlSpalte1Weite.length-1) {htmlTabUeber2=htmlTabUeber2.concat("
"+
""+" "+theInput+" "+aktiv+"
")} else{
htmlTabUeber2=htmlTabUeber2.concat("
"+""
+"
")} } //symbolSchalter[ue]
}
//SpaltenÜberschrift bei mehrfachtabelle
if (!flexboxView){ htmlTabUeber2_1=""
for (let ue=0;ue"+""
+"")}
else{ if(ue==0){htmlTabUeber2_1=htmlTabUeber2_1.concat("
"); } } break;
}
} //switch ende
}
function tabelleAusbessern() { // bessert mei mehrfachtabellen die nicht vollen zeilenn aus - bevor die unterüberschriften kommen
switch (mehrfachTabelle) {
case 1: break;
case 2: let helpMehrfach="";
for(let w=0;w ")};helpMehrfach=helpMehrfach.concat("")
if(counter%2==0) htmlOut = htmlOut.replace(/<\/td>$/, helpMehrfach);
break;
case 3: let helpMehrfach2="";
for(let w=0;w ")};helpMehrfach2=helpMehrfach2.concat("")
if(counter%3==2) htmlOut = htmlOut.replace(/<\/td>$/, "");
if(counter%3==1) htmlOut = htmlOut.replace(/<\/td>$/, helpMehrfach2);
let helpMehrfach3="";
let helpMehrfach31="";for(let w=0;w ")}
for(let w=0;w ")} else
{helpMehrfach3=helpMehrfach3.concat("
"+helpMehrfach31)}
};helpMehrfach3=helpMehrfach3.concat("")
if(counter%3==0) htmlOut = htmlOut.replace(/<\/td>$/, helpMehrfach3); break; }}
function tabelleFinish() {
switch (mehrfachTabelle) {
case 1: break;
case 2: let helpMehrfach="";
for(let w=0;w ")};helpMehrfach=helpMehrfach.concat("")
if(counter%2==0) htmlOut = htmlOut.replace(/<\/td>$/, helpMehrfach);
break;
case 3: let helpMehrfach2="";
for(let w=0;w ")};helpMehrfach2=helpMehrfach2.concat("")
if(counter%3==2) htmlOut = htmlOut.replace(/<\/td>$/, "");
if(counter%3==1) htmlOut = htmlOut.replace(/<\/td>$/, helpMehrfach2);
let helpMehrfach3="";
let helpMehrfach31="";for(let w=0;w ")}
for(let w=0;w ")} else
{helpMehrfach3=helpMehrfach3.concat("
"+htmlFeldUeber+" Last Update: "+formatDate(getDateObject((new Date().getTime())), 'SS:mm:ss')+"
";
if(mitSearch) htmlUeber=htmlUeber+searchMe
var htmlUnter= "
"+htmlFeldUeber+" Last Update: "+formatDate(getDateObject((new Date().getTime())), "SS:mm:ss");"
";
if (!htmlSignature) htmlUnter="";
var htmlOutVIS="";
if (htmlUberschrift)
{ zentriert ? htmlOutVIS=htmlZentriert+htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"
"+htmlFeldUeber+" Last Update: "+formatDate(getDateObject((new Date().getTime())), "SS:mm:ss");+"
"
if (!htmlSignature) htmlUnter="";
var htmlEnd=""+htmlUnter+"
";
//mit oder ohne überschrift - zentriert oder links
//htmlUberschrift ? htmlOut=htmlStart+htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd : htmlOut=htmlStart+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd;
//log(htmlOut);
}
function flexboxBind(){
htmlOut=htmlOut+"