//@liv-in-sky 2024 23.2-15:00
// DAS WIDGET IN DER VIS
// das Standard html-Widget wird genutzt in der VIS - dazu den DP javascript.x.Tabellen@Liv.UNIFIClientsTabelleVIS als binding angeben d.h.
// im html-teil des widgets wird der daten punkt in geschweiften klammern angegeben z.B. {javascript.x.Tabellen@Liv.UNIFIClientsTabelleVIS}
// @ts-ignoreMD
let braucheEinVISWidget=true; // immer true
let dpVIS="UNIFIClientsTabelleVIS" // Name für Tabelle - keine datenpunkte eintragen !!
let dpJSON="UNIFIClientsTabelleJSON" // hier nicht genutzt- ist immer false
let willUnterUserdataSpeichern=false; // die Tabelle wird unter 0_userdata.0.... gespeichert
let braucheMaterialDesignWidget=false; // not in use
let braucheMaterialDesignWidgetList=false; // not in use
let mySchedule=" 1,31 * * * * "; // not in use getrigger durch refresh button in der VIS oder autom., wenn gerät state ändert
//ZUSÄTZLICH VARIABLEN
let mitAlphabet=false; // wenn true wird immer nach namen sortiertiert und eine zeile eingfügt mit dem Anfangsbuchstaben
let sortierenEIN=true;
let mitSearch=true;
let welcheSortierung=0; // Startsortierung - je nach spalte 0: name; 1: ip; 2:dEVICE; 3:mac, $.sat
const schalterUmrahmung="0" //wenn überschriften buttons sind , den rahmen mit 0 wegmachen
let tabletDoppelHilfe=true; // auf tablet geht kein doppelklick - es erschein ein weiterer button in der seitenleiste
let maxWeiteFlexBoxen="140"; // max. Breite für die einzel-flexboxen
let kuerzungNamen=15; //not in use // länge der namen kürzen
let abwesendZeit=187200000 // in millisekunden für länger abwesende clients
const apName = { "b4:fb:e4:f3:96:63" : { aname: "AP-LongR" , afarbe: "#737373"}, // standard #BDBDBD afarbe is not in use !!!!!!
"e0:63:da:b9:ec:2c" : { aname: "AP-Mesh" , afarbe: "#b3b300"}, // standard #BDBDBD
"18:e8:29:56:40:e2" : { aname: "AP-Light" , afarbe: "#D8D8D8"}} // standard #BDBDBD
//const mitYesterday=true; // Für anzeige der yestersay werte bei energie-aufzeichnenden geräten (poe, blitzwolf, teckin, ..)
//const mitLink=true; // link zum sonoff-web-interface
const farbeNichtConnected="lightblue";
const farbeNichtConnectedLong="#5DC5D1";
const powerButtonColorONBkground="lightyellow"; //not in use
const powerButtonColorOFFBkground="red" //not in use
const powerButtonColorONSchrift="black"; //not in use
const powerButtonColorOFFSchrift="white"; //not in use
const ipButtonColorONBkground ="lightyellow" //not in use
const ipButtonColorOFFBkground ="#7090B3" //not in use
let flexboxView=false; // startet im flexbox modus - keine tabelle
//VON ALTEM SCRIPT
const farbeNichtErreichbar="#819FF7"// not in use // farbe für devices, die gerade nicht online sind
// möglich i=schräg, b ist fett und span ist normal - nur eines davon !!!
const materialD_IP_erreichbar="#D8D8D8"; // not in use
const materialD_IP_nichtErreichbar="#F7819F"; // not in use
const bildergroesse=30; // not in use
let pfadFuerBilder="/vis.0/armin/img/" // not in use
//---------------------------------------
//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","IP","DEVICE","MAC","SAT","NET"]; // GLEICHE ANZAHL !! NAME/ÜBERSCHRIFT DER SPALTE
let val= ["true","true","true","true","true","true"]; // bei false wird spalte ausgeblendet// 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= ["left","center","center","center","center","left"] ; // GLEICHE ANZAHL !! AUSRICHTUNG IN DER SPALTE
let htmlSpalte1Weite=["0px","0px","0px","0px","0px","0px"]; // GLEICHE ANZAHL !! BREITE DER SPALTE, wenn "0px" auto
let schalterInSpaltenUeberschrift=[true,true,true,true,true,true,true,true,true,true,true,true,true,true]; // WENN BUTTONS INSTALLIERT WERDEN - sonst false - nicht ÄNDERN !!!
let symbolSchalter= ["na","✓","✗","🗘","⚪","delete!"]; //ONLINE SYMBOLE // SYMBOLE DER BUTTONS
//-----------------------------------
//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=true; // anstatt der Überscghrift eine signature: - kleiner - anliegend
const htmlFeldUeber='UNIFI'; // 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 ichWillAuchRechtsEineLeiste=false;
const nameSeitenLeiste="U N I F I"
const breiteSeitenleiste=35;
const schriftGroesseSeitenleiste=18;
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;
const inputBorderColor="gray";
//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=7; // extra trennungslinie bei mehrfachtabellen - evtl auf 0 stellen, wnn htmlRahmenLinien auf none sind
const farbetrennungsLinie="lightyellow"; // 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=40; // Überschrift bekommt mehr Raum - darunter und darüber - Zellenhöhe
const LinieUnterUeberschrift="2"; //not in use // Liniehoehe nur unter Spaltenüberschrift
const farbeLinieUnterUeberschrift="green"; //not in use // LinienFarbe unter Spaltenüberschrift
const groesseUeberschrift=16;
const UeberschriftStyle="normal" // möglich "bold"
const UeberschriftSpalten=true; //not in use // ein- oder ausblenden der spatlen-überschriften
const htmlGradBkgroundSpalteUeber=[150,5,20]; // einstellung des gradienten für die spaltenüberschrift
const htmlGrad1BkgroundSpalteUeber="#2F2F2F"//"#265686"; // Gradient -farbe 1 für die spaltenüberschrift "#2F2F2F"//
const htmlGrad2BkgroundSpalteUeber="#3c3c3c"//"#5590CA"; // Gradient -farbe 2 für die spaltenüberschrift "#3c3c3c"//
//GANZE TABELLE
const linienRows="0" //Border für rows // LinieUnterUeberschrift gehört dazu
const linienCols="1" //Border für cols
const innenBorder="gray" //Border Farbe
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="700"; // Weite der Tabelle - verhindert das dynamische breiter werden, wenn werte unterschiedliche werte haben
let hoeheTabelle=660;
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="Ubuntu-Regular" // "Jura-DemiBold" //"RobotoCondensed-Bold" //"Helvetica"; .....
const htmlSchriftgroesse="13px"; // schriftgröße in den zellen
//const rahmenBreite="1px"; //not in use //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 htmlGradient=[150,5,20]; // einstellung des gradienten
const htmlFarbTableColorGradient1="#265686"; // Gradient - Hintergrund der Tabelle - Verlauffarbe"#2F2F2F"// "#4D4C4C"//
const htmlFarbTableColorGradient2="#5590CA"; // Gradient - Hintergrund der Tabelle - ist dieser Wert gleich Gradient1 gibt es keinen verlauf "#3c3c3c"// "#4D4C4C"//
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 welcherSpeicherOrt;
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
var aktiv=0; var inaktive=0;
let myButtonUeberschrift; //not in use
let htmlZentriert; //css
let einmalAbstand; //seitenleiste
let myScann="";
let isOnline=false;
/*
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();
//------------------------------------------------------
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 braucheEinJSON=false; // bei true wird ein html-tabelle in einen dp geschrieben - siehe nächste zeile
let triggerBySonoffPower=true;
const styleNichtErreichbar="i"; // möglich i=schräg, b ist fett und span ist normal - nur eines davon !!!
const mitSchalter=true; // für freigabe von schaltern für POWER
let langeGesamt=0;
let htmlTabUeber="";
let htmlOut="";
let htmlUnter=""
let htmlSeitenleisteRechts="";
let htmlSeitenleisteRechts2=";"
let htmlMittelLeiste="";
let mix;
let counter;
//let makeJsonWidget;
let myObject=[];
let myArrMac=[]
const dpPrefix = "javascript."+ instance +".";
var rootcount=true;
var myObjOld=[];
var myJsonWidget=[];
var myJsonWidget2=[];
//var valButton1=1;
var myObj;
//HIER SIND DIE WERTE, DIE IN DER SCHLEIFE GEFILTERET WER%DEN - Jede spalte einen wert - jeder valx muss in dieser schleife gesetzt werden !!
var val1; var val0; var val2;let val3;
var json1; var json2; var json3; var json4; var json5; var json6;
let myObjExtra=[];
let laeuftSchon=false;
var hostDaten="";
willUnterUserdataSpeichern ? welcherSpeicherOrt="0_userdata.0.Tabellen@Liv."+dpVIS : welcherSpeicherOrt="javascript." + instance + ".Tabellen@Liv."+dpVIS
let dpDelete=welcherSpeicherOrt+".DP_Delete"
needDP();
makeMyVisScripte();
let helperLeerzeile=""
let valOnline="false";let valRSSI="0";let valMAC="---";let valButton1="";let valOffline;let valDevice;let valESSID="";let valNET="";
var myReactionArr=[]
var arrTriggerSonoff=[];
async function setReset(){await Sleep(2000);setState(`${welcherSpeicherOrt}.Spalte12`,"iframe_closed"); setState(`${welcherSpeicherOrt}.Spalte13`,0)}
setReset()
async function writeHTML(mitDatenGet){
myReactionArr=[]
arrTriggerSonoff=[];
valESSID=""
aktiv=0; inaktive=0;
//laeuftSchon=true;
let seitenLeistenTest="";
//log(flexboxView.toString())
flexboxView ? htmlTabUeber3=`"+htmlUnter+""+ buttonScript : htmlOutVIS=htmlUeber+searchMe+htmlTabStyle+htmlTabUeber+htmlOut+""+htmlUnter+""+ buttonScript ;
} else {
zentriert ? htmlOutVIS=htmlZentriert+searchMe+htmlTabStyle+htmlTabUeber+htmlOut+""+htmlUnter+""+ buttonScript : htmlOutVIS=searchMe+htmlTabStyle+htmlTabUeber+htmlOut+""+htmlUnter+""+ buttonScript;
}
// log("bin raus aus tabelleBind");
if (braucheEinVISWidget) setStateDelayed(welcherSpeicherOrt+".HTMLTableVis", htmlOutVIS ,1000);
/*
var htmlUnter= ""+htmlFeldUeber+" Last Update: "+formatDate(getDateObject((new Date().getTime())), "SS:mm:ss");+"
"
if (!htmlSignature) htmlUnter="";
var htmlEnd=""+htmlUnter+" ";
*/
}
function flexboxBind(online){
let energyHelper="";
let divHelpi="";
// test= "