Community Forum

Your browser does not seem to support JavaScript. As a result, your viewing experience will be diminished, and you have been placed in read-only mode.

Please download a browser that supports JavaScript, or enable it if it's disabled (i.e. NoScript).

NEWS

UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
A
apollon77

48

3

8.7k
Monatsrückblick – September 2025
B
Bluefox

13

1

2.2k
Neues Video "KI im Smart Home" - ioBroker plus n8n
B
Bluefox

16

1

3.2k

Script: Alexa Listen pflegen und Anzeigen

JavaScript

409 Beiträge 29 Kommentatoren 80.7k Aufrufe 42 Watching

L liv-in-sky

@senger1985 in der instanz von javascript gibt es so eine einstellung - vielleicht ist das hier gemeint
S Offline
S Offline
senger1985

schrieb am zuletzt editiert von

#144

@liv-in-sky THX, das wars, was ich noch einstellen musste.
1 Antwort Letzte Antwort

0
? Ein ehemaliger Benutzer

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

wenn sowas reicht - in diesem script wäre das integriert - einkaufslist

Das sieht schonmal sehr gut aus.
Allerdings verschickt er bei jeder Änderung ein Telegramm.
Ich bräuchte das nur aus VIS zum manuellen versenden.
L Offline
L Offline
liv-in-sky

schrieb am zuletzt editiert von

#145

@Yetiberg

dann müßte man noch einen datenpunkt anlegen lassen - ist auch machbar - ich habe mich schon gewundert - das bei jeder änderung zu senden wäre zuviel

wenn ich morgen zeit habe , werd ichs mal probieren - dann kann man das über die vis aktivieren oder über ein anderes script
nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html
? 1 Antwort Letzte Antwort

0
L liv-in-sky

@Yetiberg

dann müßte man noch einen datenpunkt anlegen lassen - ist auch machbar - ich habe mich schon gewundert - das bei jeder änderung zu senden wäre zuviel

wenn ich morgen zeit habe , werd ichs mal probieren - dann kann man das über die vis aktivieren oder über ein anderes script
? Offline
? Offline
Ein ehemaliger Benutzer

schrieb am zuletzt editiert von Ein ehemaliger Benutzer

#146

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

dann müßte man noch einen datenpunkt anlegen lassen - ist auch machbar - ich habe mich schon gewundert - das bei jeder änderung zu senden wäre zuviel

Schau Dir mal dieses Posting von @Agria4800 hier an:
https://forum.iobroker.net/post/357652
Das funktioniert bei mir.
1 Antwort Letzte Antwort

0

A Agria4800

@Yetiberg sagte in Script: Alexa Listen pflegen und Anzeigen:

@Agria4800
Wie versendest Du die Liste mit Telegramm?
Das muss nicht in HTML sein.
Nur das simple.
Kannst Du mir einen Tipp geben?
Das Drucken habe ich auf meinem RockPro64 hinbekommen.

Hallo Yetiberg,
einmal kann ich nur die eingetragenen Namen aus der Einkaufsliste senden per Telegramm; Blockly Import im Spoiler

<xml xmlns="http://www.w3.org/1999/xhtml">
 <variables>
   <variable type="" id="h!=BXv^X?0znFOj5|.T[">sendT</variable>
   <variable type="" id="!t(_s6!A^|$7hHkJs}AV">test</variable>
   <variable type="" id=":kI@a,4j*7?IgGv-BV0a">j</variable>
 </variables>
 <block type="comment" id="Mc,/e+L!nRrHjzrwhucV" x="-337" y="37">
   <field name="COMMENT">ToDo Liste</field>
   <next>
     <block type="variables_set" id="xRtk=4Km-~~B~ubn8JzM">
       <field name="VAR" id="h!=BXv^X?0znFOj5|.T[" variabletype="">sendT</field>
       <value name="VALUE">
         <block type="text" id="/0wH3NbM@B0SL]w{cG[O">
           <field name="TEXT"></field>
         </block>
       </value>
       <next>
         <block type="variables_set" id="R|RzH{):.@3/=RapN9_|">
           <field name="VAR" id="!t(_s6!A^|$7hHkJs}AV" variabletype="">test</field>
           <value name="VALUE">
             <block type="convert_json2object" id="!C06}j5#^9n-$Co{:tVA">
               <value name="VALUE">
                 <block type="get_value" id="x?V?cDIG1mf@Pt+A}_^(">
                   <field name="ATTR">val</field>
                   <field name="OID">alexa2.0.Lists.TO_DO.json</field>
                 </block>
               </value>
             </block>
           </value>
           <next>
             <block type="controls_forEach" id="//2RtUry(QAj*$heFfKj">
               <field name="VAR" id=":kI@a,4j*7?IgGv-BV0a" variabletype="">j</field>
               <value name="LIST">
                 <block type="variables_get" id="{u3xeVS8RM[+L4t1]k6=">
                   <field name="VAR" id="!t(_s6!A^|$7hHkJs}AV" variabletype="">test</field>
                 </block>
               </value>
               <statement name="DO">
                 <block type="variables_set" id="-oZJ963qgT5QS`ACo*I%">
                   <field name="VAR" id="h!=BXv^X?0znFOj5|.T[" variabletype="">sendT</field>
                   <value name="VALUE">
                     <block type="text_join" id="*$)I;]oLshOce#X}d5|L">
                       <mutation items="3"></mutation>
                       <value name="ADD0">
                         <block type="variables_get" id="^jrCcgC^:DI1lPEG[s|k">
                           <field name="VAR" id="h!=BXv^X?0znFOj5|.T[" variabletype="">sendT</field>
                         </block>
                       </value>
                       <value name="ADD1">
                         <block type="get_attr" id="gzv)^uOHg~.hD,-VZXo8">
                           <value name="PATH">
                             <shadow type="text" id="6I~4dD)w{ji]E]HOk:.|">
                               <field name="TEXT">value</field>
                             </shadow>
                           </value>
                           <value name="OBJECT">
                             <block type="variables_get" id="JL|B5$~[;6IcaIEtgi{X">
                               <field name="VAR" id=":kI@a,4j*7?IgGv-BV0a" variabletype="">j</field>
                             </block>
                           </value>
                         </block>
                       </value>
                       <value name="ADD2">
                         <block type="text" id="l,`XM]H.5rM9H3O}vNa=">
                           <field name="TEXT">, </field>
                         </block>
                       </value>
                     </block>
                   </value>
                 </block>
               </statement>
               <next>
                 <block type="debug" id="{2`V/P?WQpOP}w$n:H;k">
                   <field name="Severity">log</field>
                   <value name="TEXT">
                     <shadow type="text" id="d+q.({zATE2%rD*Uko)r">
                       <field name="TEXT">test</field>
                     </shadow>
                     <block type="variables_get" id="AOmupxw(tOl)?-?F(iH+">
                       <field name="VAR" id="h!=BXv^X?0znFOj5|.T[" variabletype="">sendT</field>
                     </block>
                   </value>
                   <next>
                     <block type="telegram" id="!P.P[IHub2g0h9*b.v0E">
                       <field name="INSTANCE">.0</field>
                       <field name="LOG"></field>
                       <field name="SILENT">FALSE</field>
                       <field name="PARSEMODE">default</field>
                       <value name="MESSAGE">
                         <shadow type="text" id="PA,`]^*J.9_=VN:QH@t$">
                           <field name="TEXT">/opt/iobroker//iobroker-data/files//vis.0/htmlexample.html</field>
                         </shadow>
                         <block type="variables_get" id="GG/OaPAZP2hPx%KJ8|ae">
                           <field name="VAR" id="h!=BXv^X?0znFOj5|.T[" variabletype="">sendT</field>
                         </block>
                       </value>
                       <next>
                         <block type="comment" id="|l!;QjS^9oV8K{~p]|$2">
                           <field name="COMMENT">Einkaufsliste</field>
                           <next>
                             <block type="variables_set" id="nKaMcjH{m_1z4A2C~dfz">
                               <field name="VAR" id="h!=BXv^X?0znFOj5|.T[" variabletype="">sendT</field>
                               <value name="VALUE">
                                 <block type="text" id="~M@jM_q$lI/l-J@YTF!5">
                                   <field name="TEXT"></field>
                                 </block>
                               </value>
                               <next>
                                 <block type="variables_set" id="J|rU2BWw.iHvfh+YYbh~">
                                   <field name="VAR" id="!t(_s6!A^|$7hHkJs}AV" variabletype="">test</field>
                                   <value name="VALUE">
                                     <block type="convert_json2object" id=";I*2jRK-9c2`,~Ax;Pv!">
                                       <value name="VALUE">
                                         <block type="get_value" id="m.!}$Y^0_[pBiYfPGVP-">
                                           <field name="ATTR">val</field>
                                           <field name="OID">alexa2.0.Lists.SHOPPING_LIST.json</field>
                                         </block>
                                       </value>
                                     </block>
                                   </value>
                                   <next>
                                     <block type="controls_forEach" id="7-pH3ft4,+Themy?-14#">
                                       <field name="VAR" id=":kI@a,4j*7?IgGv-BV0a" variabletype="">j</field>
                                       <value name="LIST">
                                         <block type="variables_get" id="yrz)9c4`{Tvx2YizK(#v">
                                           <field name="VAR" id="!t(_s6!A^|$7hHkJs}AV" variabletype="">test</field>
                                         </block>
                                       </value>
                                       <statement name="DO">
                                         <block type="variables_set" id="u_J6|Y1,EvU%ZFcGpiyF">
                                           <field name="VAR" id="h!=BXv^X?0znFOj5|.T[" variabletype="">sendT</field>
                                           <value name="VALUE">
                                             <block type="text_join" id="25}OYFEpJrJCp`tW$9X?">
                                               <mutation items="3"></mutation>
                                               <value name="ADD0">
                                                 <block type="variables_get" id="LKaQRHW8[PcCc@wp%NKO">
                                                   <field name="VAR" id="h!=BXv^X?0znFOj5|.T[" variabletype="">sendT</field>
                                                 </block>
                                               </value>
                                               <value name="ADD1">
                                                 <block type="get_attr" id=",Y3S3/-+XxNi.,=nZ57C">
                                                   <value name="PATH">
                                                     <shadow type="text" id=",Ref0eK;FaU|1Lj+%Y/7">
                                                       <field name="TEXT">value</field>
                                                     </shadow>
                                                   </value>
                                                   <value name="OBJECT">
                                                     <block type="variables_get" id="wlSureM+,7_^^ujZ#)._">
                                                       <field name="VAR" id=":kI@a,4j*7?IgGv-BV0a" variabletype="">j</field>
                                                     </block>
                                                   </value>
                                                 </block>
                                               </value>
                                               <value name="ADD2">
                                                 <block type="text" id="CD@^BQFd0S,CY!p5DA1W">
                                                   <field name="TEXT">, </field>
                                                 </block>
                                               </value>
                                             </block>
                                           </value>
                                         </block>
                                       </statement>
                                       <next>
                                         <block type="debug" id=";]W!thbkiT]Tmc$W!|Fo">
                                           <field name="Severity">log</field>
                                           <value name="TEXT">
                                             <shadow type="text" id="d+q.({zATE2%rD*Uko)r">
                                               <field name="TEXT">test</field>
                                             </shadow>
                                             <block type="variables_get" id="vv#S!!b__s6aMtg(J88p">
                                               <field name="VAR" id="h!=BXv^X?0znFOj5|.T[" variabletype="">sendT</field>
                                             </block>
                                           </value>
                                           <next>
                                             <block type="telegram" id="]MAP0iLY2Rw~ME14yYIY">
                                               <field name="INSTANCE">.0</field>
                                               <field name="LOG"></field>
                                               <field name="SILENT">FALSE</field>
                                               <field name="PARSEMODE">default</field>
                                               <value name="MESSAGE">
                                                 <shadow type="text" id="PA,`]^*J.9_=VN:QH@t$">
                                                   <field name="TEXT">/opt/iobroker//iobroker-data/files//vis.0/htmlexample.html</field>
                                                 </shadow>
                                                 <block type="variables_get" id="rs3D_iC8/UKKG*}h;A;v">
                                                   <field name="VAR" id="h!=BXv^X?0znFOj5|.T[" variabletype="">sendT</field>
                                                 </block>
                                               </value>
                                             </block>
                                           </next>
                                         </block>
                                       </next>
                                     </block>
                                   </next>
                                 </block>
                               </next>
                             </block>
                           </next>
                         </block>
                       </next>
                     </block>
                   </next>
                 </block>
               </next>
             </block>
           </next>
         </block>
       </next>
     </block>
   </next>
 </block>
</xml>

oder aber die HTML als Bild per Telegramm

Javascript, einfach copy & past

sendTo('telegram.0', {
   text: ('/opt/iobroker/iobroker-data/files/vis.0/ToDo.html'),
   type: 'document'
})

sendTo('telegram.0', {
   text: ('/opt/iobroker/iobroker-data/files/vis.0/Einkaufliste.html'),
   type: 'document'
})

und hier beide Widget´s

[{"tpl":"tplHqButton","data":{"oid":"javascript.0.scriptEnabled.Alexa.Telegramm_HTML_Bild_Listen_senden","min":"false","max":"true","iconName":"/icons-mfd-png/control_cancel.png","btIconWidth":"73","offsetAuto":false,"leftOffset":"16","topOffset":"12","caption":"Listen HTML per Telegramm schicken","captionOn":"wird gestartet","iconOn":"/icons-mfd-png/control_reload.png","gestures-offsetX":0,"gestures-offsetY":0,"pushButton":true,"usejQueryStyle":true,"g_visibility":false,"styleActive":"hq-button-no-background","name":"Listen HTML drucken","gestures-swipeLeft-limit":"-1","gestures-rotateLeft-limit":"2","styleNormal":"hq-button-no-background","lc-type":"last-change","lc-is-interval":true,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-is-moment":false,"lc-zindex":0,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","g_leftRight":true,"timeAsInterval":"true","infoLeftFontSize":"12","infoFontRightSize":"12","infoLeftPaddingLeft":"15","infoLeftPaddingRight":"50","infoRightPaddingRight":"15","descriptionLeft":"Pause","descriptionLeftDisabled":true,"oid-working":"","g_signals":false,"signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false},"style":{"left":"838px","top":"877px","width":"100px","height":"100px","border-width":"","border-style":"none","border-color":"","border-radius":"360px","z-index":12,"text-align":"center","font-size":"small","box-shadow":"2px 2px 3px rgba(20, 20, 20, 50)","background-color":"","color":"#FFFFFF"},"widgetSet":"hqwidgets"},{"tpl":"tplHqButton","data":{"oid":"javascript.0.scriptEnabled.Alexa.Telegramm_Simple_Listen_senden","min":"false","max":"true","iconName":"/icons-mfd-png/control_cancel.png","btIconWidth":"73","offsetAuto":false,"leftOffset":"16","topOffset":"12","caption":"Listen simple per Telegramm schicken","captionOn":"wird gestartet","iconOn":"/icons-mfd-png/control_reload.png","gestures-offsetX":0,"gestures-offsetY":0,"pushButton":true,"usejQueryStyle":true,"g_visibility":false,"styleActive":"hq-button-no-background","name":"Listen drucken","gestures-swipeLeft-limit":"-1","gestures-rotateLeft-limit":"2","styleNormal":"hq-button-no-background","lc-type":"last-change","lc-is-interval":true,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-is-moment":false,"lc-zindex":0,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","g_leftRight":true,"timeAsInterval":"true","infoLeftFontSize":"12","infoFontRightSize":"12","infoLeftPaddingLeft":"15","infoLeftPaddingRight":"50","infoRightPaddingRight":"15","descriptionLeft":"Pause","descriptionLeftDisabled":true,"oid-working":"","g_signals":false,"signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false},"style":{"left":"639px","top":"877px","width":"100px","height":"100px","border-width":"","border-style":"none","border-color":"","border-radius":"360px","z-index":12,"text-align":"center","font-size":"small","box-shadow":"2px 2px 3px rgba(20, 20, 20, 50)","background-color":"","color":"#FFFFFF"},"widgetSet":"hqwidgets"}]

Ein ehemaliger Benutzer

schrieb am

#147

@Agria4800

Danke, läuft Perfekt.

? Ein ehemaliger Benutzer

@Agria4800

Danke, läuft Perfekt.
L Offline
L Offline
liv-in-sky

schrieb am zuletzt editiert von

#148

@Yetiberg bedeutet das, wir brauchen telegram nicht in mein script zu integrieren - wäre auch kein problem, dann lassen wir das script so wie es ist
nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html
? 1 Antwort Letzte Antwort

0
L liv-in-sky

@Yetiberg bedeutet das, wir brauchen telegram nicht in mein script zu integrieren - wäre auch kein problem, dann lassen wir das script so wie es ist
? Offline
? Offline
Ein ehemaliger Benutzer

schrieb am zuletzt editiert von Ein ehemaliger Benutzer

#149

@liv-in-sky
Naja, ein Allincl.ist natürlich ne feine sache.
Aber mit dem Blockly von @Agria4800 läuft das schon perfekt.
Ist dann halt noch selber Hand anlegen gefragt.

So sieht das dann auf meiner Uhr aus:
L S 2 Antworten Letzte Antwort

0
? Ein ehemaliger Benutzer

@liv-in-sky
Naja, ein Allincl.ist natürlich ne feine sache.
Aber mit dem Blockly von @Agria4800 läuft das schon perfekt.
Ist dann halt noch selber Hand anlegen gefragt.

So sieht das dann auf meiner Uhr aus:
L Offline
L Offline
liv-in-sky

schrieb am zuletzt editiert von

#150

@Yetiberg schaut gut aus
nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html
1 Antwort Letzte Antwort

0
? Ein ehemaliger Benutzer

@liv-in-sky
Naja, ein Allincl.ist natürlich ne feine sache.
Aber mit dem Blockly von @Agria4800 läuft das schon perfekt.
Ist dann halt noch selber Hand anlegen gefragt.

So sieht das dann auf meiner Uhr aus:
S Offline
S Offline
skokarl

schrieb am zuletzt editiert von skokarl

#151

@Yetiberg

würdest Du die View hier zur Verfügung stellen ?

sieht super aus.
IOBroker mit Proxmox auf Celeron Nuc mit 16 GB und Debian11, Sonos API, Echo Show 15 als Wandtablet, Homematic IP, HUE, Sonos, Echos, DS718+ als Backup
1 Antwort Letzte Antwort

0
L liv-in-sky

@skokarl wegen telegram - ich kann ein html file an telegram senden - aber dieses muss dann über einen browser geöffnet werden - warum nutzt du nicht die alexa app - telegram dient dann nur als erinnerung - " es gibt was neues"

oder direkt den text - sieht aber nicht gut aus
S Offline
S Offline
skokarl

schrieb am zuletzt editiert von skokarl

#152

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

@skokarl - warum nutzt du nicht die alexa app

Das ist genau dass was ich eigentlich nicht will.
So toll ist die APP auch nicht, und wir bräuchten ein Familienkonto da meine Frau sonst nicht an meine Liste
kommt.

datenpunkt für die anzahl ( @skokarl hast du das gemeint ?)

Ja, super. Vielen Dank.

Das ist jetzt mein erster Schritt, wenn Einkaufswünsche, dann zeigt der Button das an.
Das Dialogfenster folgt.
IOBroker mit Proxmox auf Celeron Nuc mit 16 GB und Debian11, Sonos API, Echo Show 15 als Wandtablet, Homematic IP, HUE, Sonos, Echos, DS718+ als Backup
1 Antwort Letzte Antwort

0

L liv-in-sky

dies ist ein script zur anzeige der alexa (echo) einkaufs- und todo-liste in der vis und iqontrol. es können einträge angelegt und gelöscht werden - die tabellen kann verschiedene einstellungen haben (schriftfarbe, hinterrundfarbe, überschrift, nebeneinander-tabellen-anzeige, ...)

vielen dank an @apollon77 für die integration in den alexa2 adapter

dieses script entsand aus einem tabellenerzeugungs-script, welches hier als grundlage dient: https://forum.iobroker.net/topic/28021/html-table-für-vis-oder-iqontrol-js-und-blockly

es muss auch das schedule eingestellt werden - wann werden die daten gelesen - standard jede minute
anschliessend werden die tabellen-einstellungen definiert
zum löschen wurde das standard list widget und zum anlegen das standard input widget gewählt - diese müssen mit den datenpunkten von euch "gefüttert" werden
die tabelle wird über ein standard html widget über binding eingebunden

[{"tpl":"tplJquiInput","data":{"oid":"controll-own.0.AAATEST.Neues_ObjektTestHTMLAnlegen","g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","label":"Input","digits":"0","size":"10","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"asString":true},"style":{"left":"262px","top":"18px","z-index":"200","width":"273px","height":"24px"},"widgetSet":"jqui"},{"tpl":"tplJquiSelectList","data":{"oid":"controll-own.0.AAATEST.TestHTMLAuswahlDelete","g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","values":"{controll-own.0.AAATEST.TestHTMLAuswahlDeleteAuswahl}","texts":"{controll-own.0.AAATEST.TestHTMLAuswahlDeleteWert}","height":"234","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"open":false,"no_style":false},"style":{"left":"300px","top":"50px","width":"253px","height":"20px","text-align":"center","z-index":"200","font-size":"12px","color":"#5ff1ee"},"widgetSet":"jqui"},{"tpl":"tplHtml","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html":"{controll-own.0.AAATEST.TestHTML}"},"style":{"left":"18px","top":"34px","color":"","font-family":"SEGMENT","font-size":"large","width":"624px","height":"539px"},"widgetSet":"basic"}]

was kann man alles einstellen:

tabelle zentrieren
schriftart, schriftgröße
größe der zellen beispiele: https://forum.iobroker.net/post/348791
tabelle aufteilen - nebeneinander - 1,2,3 oder4
farben: hintergrund allgemein, hintergrund tabelle (verlauf), felderfarbe, ...
gitterlinien - alle, nur spalten, nur zeilen, keine
eine gesamtüberschrift
tabellenwert-überschrift
schedule - wie oft wird geprüft
ob man eine datei möchte - z.b. für iqontrol
überschriften der spalten in der tabelle ein- und abschalten

 //@liv-in-sky 2022  14.2.-16:09
 
 const dpPrefix = "javascript."+ instance +".";
createState("Alexa_Listen.ALEXALists.Einkauf.Anlegen"             , "",{ name: 'Anlegen_VIS',  type: 'string', read:  true,  write: true,});
createState("Alexa_Listen.ALEXALists.Einkauf.ALEXAEinkauf"           , { name: 'ALEXAEinkauf_VIS',  type: 'string', read:  true,  write: true,});
createState("Alexa_Listen.ALEXALists.Einkauf.AuswahlDeleteWerte"   , { name: 'AuswahlDeleteWert_VIS',  type: 'string', read:  true,  write: true,});
createState("Alexa_Listen.ALEXALists.Einkauf.AuswahlDeleteTexte"  , { name: 'AuswahlDeleteTexte_VIS',  type: 'string', read:  true,  write: true,});
createState("Alexa_Listen.ALEXALists.Einkauf.Anzahl"  , { name: 'Einkauf_Anzahl_VIS',  type: 'number', read:  true,  write: true,});
createState("Alexa_Listen.ALEXALists.Einkauf.DeleteALL"  , { name: 'Einkauf_DeleteALL',  type: 'boolean', role: 'switch', read:  true,  write: true,});
createState("Alexa_Listen.ALEXALists.Einkauf.Refresh"  , { name: 'Refresh',  type: 'boolean', role: 'switch', read:  true,  write: true,});
//createState("Alexa_Listen.ALEXALists.Einkauf.AuswahlDelete"       , { name: 'AuswahlDelete_VIS',  type: 'number', read:  true,  write: true,});

createState("Alexa_Listen.ALEXALists.Einkauf.AuswahlDelete", {
name: 'AuswahlDelete',
 role: "state",
 type: "number",
 states: "0:choose ...;1:eeee;2:test1;3:test;",
 min: 0,
 max: 50,
 def: 0,
 read: true,
 write: true});




//HIER WIRD PFAD UND FILENAME DEFINIERT
const path = "/htmltelegram.html";                   //FIlenamen definieren
const home ='vis.0'                                 //wo soll das file im iobroker-file-system liegen ? (oder z.b auch iqontrol.meta)
let   braucheEinFile=false;                          // bei true wird ein file geschrieben - für iqontrol
let   braucheEinVISWidget=true;                     // bei true wird ein html-tabelle in einen dp geschrieben 
let   braucheTelegram=true;
let dpVIS=dpPrefix+"Alexa_Listen.ALEXALists.Einkauf.ALEXAEinkauf";                      // dp  für VIS-HTML-Basic-Widget // Datentyp: String
let dPDELETE=dpPrefix+"Alexa_Listen.ALEXALists.Einkauf.AuswahlDelete";                  // Datentyp: Werteliste
let dPDELETEWert=dpPrefix+"Alexa_Listen.ALEXALists.Einkauf.AuswahlDeleteWerte";         // Datentyp: String
let dPDELETEAuswahl=dpPrefix+"Alexa_Listen.ALEXALists.Einkauf.AuswahlDeleteTexte";      // Datentyp: String
let dpANLEGEN=dpPrefix+"Alexa_Listen.ALEXALists.Einkauf.Anlegen";                       // Datentyp: String
let dpAnzahl=dpPrefix+"Alexa_Listen.ALEXALists.Einkauf.Anzahl";                         // Datentyp: Number
let dpDelAll=dpPrefix+"Alexa_Listen.ALEXALists.Einkauf.DeleteALL";                      // Datentyp: Boolean
let dpRefresh=dpPrefix+"Alexa_Listen.ALEXALists.Einkauf.Refresh";                      // Datentyp: Boolean
let mySchedule=" */30 * * * * * ";                       
let sortList=1;                                                                         // SORTIERUNG 1=nach datum; 2 nach Einkauf's
let mitErstelldatum=false;
var symbolLink="⚪";                                                                    //  👎  💀 ❌  ⚪  ⚫ ⭕  🔴 🔵
let farbeSchalterON="blue";
//---------------------------------------

//HIER DIE SPALTEN ANZAHL DEFINIEREN - jede Spalte einen Wert - in diesem Beispiel sind es 3
var htmlFeld1='Einkauf';       var Feld1lAlign="left";                     // überschrift Tabellen Spalte1 und  Ausrichtung left or center
var htmlFeld2='Del';        var Feld2lAlign="center";                      // überschrift Tabellen Spalte2 und  Ausrichtung left,right or center
var htmlFeld3='Erstellt vor';         var Feld3lAlign="center";                    // überschrift Tabellen Spalte3 und  Ausrichtung left,right or center
//-----------------------------------


//hier werden die styles für die tabelle definiert
//ÜBERSCHRIFT ÜBER TABELLE
let   htmlUberschrift=false;                           // mit Überschrift über der tabelle
let   htmlSignature=false;                              // anstatt der Überscghrift eine signature: - kleiner - anliegend
const htmlFeldUeber='ALEXA Einkaufsliste';              // Überschrift und Signature
const htmlFarbUber="white";                         // Farbe der Überschrift
const htmlSchriftWeite="normal";                       // bold, normal - Fettschrift für Überschrift
const htmlÜberFontGroesse="18px";                       // schriftgröße überschrift
//MEHRERE TABELLEN NEBENEINANDER
let   mehrfachTabelle=1;                              // bis zu 4 Tabellen werden nebeneinander geschrieben-  verkürzt das Ganze, dafür etwas breiter - MÖGLICH 1,2,3,oder 4 !!!
const trennungsLinie="2";                             //extra trennungslinie bei mehrfachtabellen - evtl auf 0 stellen, wnn htmlRahmenLinien auf none sind
const farbetrennungsLinie="white";
const htmlFarbZweiteTabelle="white";                // Farbe der Überschrift bei jeder 2.ten Tabelle
const htmlFarbTableColorUber="#BDBDBD";               // Überschrift in der tabelle - der einzelnen Spalten
//ÜBERSCHRIFT SPALTEN
const UeberSchriftHöhe="35";                          //Überschrift bekommt mehr Raum - darunter und darüber - Zellenhöhe
const LinieUnterUeberschrift="3";                   // Linie nur unter Spaltenüberschrift - 
const farbeLinieUnterUeberschrift="white";
const groesseUeberschrift=16;
const UeberschriftStyle="normal"                     // möglich "bold"
//GANZE TABELLE
let abstandZelle="3";
let farbeUngeradeZeilen="#000000";                     //Farbe für ungerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2
let farbeGeradeZeilen="#2E2E2E";                        //Farbe für gerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2
let weite="auto";                                     //Weite der Tabelle
let zentriert=true;                                   //ganze tabelle zentriert
const backgroundAll="#000000";                        //Hintergrund für die ganze Seite - für direkten aufruf oder iqontrol sichtber - keine auswirkung auf vis-widget
const htmlSchriftart="Helvetica";
const htmlSchriftgroesse="14px";
//FELDER UND RAHMEN
let   UeberschriftSpalten=true;                // ein- oder ausblenden der spatlen-überschriften
const htmlFarbFelderschrift="lightblue";                  // SchriftFarbe der Felder
const htmlFarbFelderschrift2="#D8D8D8";                 // SchriftFarbe der Felder für jede 2te Tabelle
const htmlFarbTableColorGradient1="#424242";          //  Gradient - Hintergrund der Tabelle - Verlauffarbe
const htmlFarbTableColorGradient2="#424242";          //  Gradient - Hintergrund der Tabelle - ist dieser Wert gleich Gradient1 gibt es keinen verlauf
const htmlFarbTableBorderColor="grey";             // Farbe des Rahmen - is tdieser gleich den gradienten, sind die rahmen unsichtbar
let htmlRahmenLinien="none";                            // Format für Rahmen: MÖGLICH: "none" oder "all" oder "cols" oder "rows"
const htmlSpalte1Weite="auto";                   //  Weite der ersten beiden  Spalten oder z.b. 115px

// HIER NICHTS  ÄNDERN

let borderHelpBottum;
let borderHelpRight;
let htmlcenterHelp;
let htmlcenterHelp2;

if(htmlRahmenLinien=="rows") {borderHelpBottum=1;borderHelpRight=0;}
if(htmlRahmenLinien=="cols") {borderHelpBottum=0;borderHelpRight=1;}
if(htmlRahmenLinien=="none") {borderHelpBottum=0;borderHelpRight=0;}
if(htmlRahmenLinien=="all")  {borderHelpBottum=1;borderHelpRight=1;}
zentriert ? htmlcenterHelp="auto" : htmlcenterHelp="left";
zentriert ? htmlcenterHelp2="center" : htmlcenterHelp2="left";


const htmlZentriert='<center>'
const htmlStart=    "<!DOCTYPE html><html lang=\"de\"><head><title>Vorlage</title><meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\">"+
                   "<style> * {  margin: 0;} body {background-color: "+backgroundAll+"; margin: 0 auto;  }"+
                   " p {padding-top: 10px; padding-bottom: 10px; text-align: "+htmlcenterHelp2+"}"+
                  // " div { margin: 0 auto;  margin-left: auto; margin-right: auto;}"+
                   " td { padding:"+abstandZelle+"px; border:0px solid "+htmlFarbTableBorderColor+";  border-right:"+borderHelpRight+"px solid "+htmlFarbTableBorderColor+";border-bottom:"+borderHelpBottum+"px solid "+htmlFarbTableBorderColor+";}"+ 
                   " table { width: "+weite+";  margin: 0 "+htmlcenterHelp+"; border:1px solid "+htmlFarbTableBorderColor+"; border-spacing=\""+abstandZelle+"0px\" ; }"+   // margin macht center
                   "td:nth-child(1) {width: "+htmlSpalte1Weite+"}"+"td:nth-child(2) {width:"+htmlSpalte1Weite+"}"+
                   " </style></head><body> <div>";
//const htmlUeber=    "<p style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-weight: bold\">"+htmlFeldUeber+"</p>";                    
const htmlTabStyle= "<table bordercolor=\""+htmlFarbTableBorderColor+"\" border=\"2px\" cellspacing=\""+abstandZelle+"\" cellpadding=\""+abstandZelle+"\" width=\""+weite+"\" rules=\""+htmlRahmenLinien+"\" style=\"color:"+htmlFarbFelderschrift+";  font-size:"+htmlSchriftgroesse+
                      "; font-family:"+htmlSchriftart+";background-image: linear-gradient(42deg,"+htmlFarbTableColorGradient2+","+htmlFarbTableColorGradient1+");\">";
const htmlTabUeber1="<tr height=\""+UeberSchriftHöhe+"\" style=\"color:"+htmlFarbTableColorUber+"; font-size: "+groesseUeberschrift+"px; font-weight: "+UeberschriftStyle+" ;  border-bottom: "+LinieUnterUeberschrift+"px solid "+farbeLinieUnterUeberschrift+" \">";
const htmlTabUeber3="</tr>";
/*
table td:first-child {}  //1
table td:nth-child(2) {} //2
table td:nth-child(3) {} //3
table td:last-child {}   //4
*/

const buttonScript =  '<script> function setOnDblClickCustomShop( myvalue ) {	var Self = this; var objID = myvalue;	vis.setValue(myvalue,true);  var2 = \"' + dpPrefix + 'Alexa_Listen.ALEXALists.Einkauf.Refresh\"; vis.setValue(var2,true);  console.log("www")  } </script>'

// const buttonScript =  '<script> function setOnDblClickCustom( myvalue ) {	var Self = this; var objID = myvalue;	Self.servConn.getStates(objID, (error, states) => {  console.log(states);  Self.servConn.setState(objID, true);  }); var2 = \"javascript.0.Alexa_Listen.ALEXALists.Einkauf.Refresh\"; Self.servConn.setState(var2, true); console.log("www")} </script>'

//NICHTS ÄNDERN - abhängig von den oben definierten _Spalten - in diesem Beispiel sind es 3

   	var htmlTabUeber2="<td width="+htmlSpalte1Weite+" align="+Feld1lAlign+">&ensp;"+htmlFeld1+"&ensp;</td><td width="+htmlSpalte1Weite+" align="+Feld2lAlign+">&ensp;"+htmlFeld2+"&ensp;</td><td  align="+Feld3lAlign+">&ensp;"+htmlFeld3+"&ensp;</td>";
var htmlTabUeber2_1="<td width="+htmlSpalte1Weite+" align="+Feld1lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld1+"&ensp;</td><td width="+htmlSpalte1Weite+"  align="+Feld2lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld2+
                   "&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld3+"&ensp;</td>";
//------------------------------------------------------


var htmlTabUeber="";
var htmlOut="";
var mix;
var counter;
var warte;
var myIDArr=[];
let myDeleterArr;
var myRememberList="";
var myTelegram=false;
var telegramString="telegram.0";
//HIER SIND DIE  WERTE, DIE IN DER SCHLEIFE GEFILTERET WER%DEN - Jede spalte einen wert - jeder valx muss in dieser schleife gesetzt werden !!
var val1; var val2; var val0; var val3; var valSort; 

function writeHTML(){


htmlOut="";

counter=-1;
htmlTabUeber="";
switch (mehrfachTabelle) { 
   case 1: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber3;  break;
   case 2: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break;
   case 3: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber2+htmlTabUeber3; break;
   case 4: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break;
};   
if (!UeberschriftSpalten) {htmlTabUeber=""}

var valID; var myListWerte=""; var myListAuswahl="";
//--------------------------------------------------------------------------------------------------------------------------------------------------
//---------hier kommt eure schleife rein counter++, tabelleBind() und tabelleFinish() müssen so integriert bleiben !!!------------------------------
//---------alle valx werte müssen von euch bestimmt werden - val0,val1,val2 !!!---------------------------------------------------------------------
//--------------------------------------------------------------------------------------------------------------------------------------------------
var myArr=[]; var myList=""; var myListArr=[]; myIDArr=[]; myDeleterArr=[];

 let myhelerArr=getState("alexa2.0.Lists.SHOPPING_LIST.json").val;
 myDeleterArr.push("alexa2.0.Lists.SHOPPING_LIST.json")

myListArr.push('0'+":"+'choose ...'+";");
            myListWerte=myListWerte+"choose ..."+";";
           myListAuswahl=myListAuswahl+(0+";");
           myIDArr.push("dummy");
$('alexa2.0.Lists.SHOPPING_LIST.items.*.value').each(function(id, i) {           // hier eigene schleife definierenalexa2.0.Lists.SHOPPING_LIST.items.0f43141e-029c-4860-bcd0-828702b0dc86.value
        
        let ida=id.split('.')
       // log(myhelerArr)
       // log(myhelerArr.includes(ida[5]))
         if(myhelerArr.includes(ida[5])) {
         
          if(!getState(id.replace("value","completed")).val) {
           val0=getState(id).val;
           val1=getState(id.replace("value","completed")).val; 
           val2=valSort=getState(id.replace("value","updatedDateTime")).val; 
           valID=getState(id.replace("value","id")).val; 
           myIDArr.push(valID);
           var yy= (Math.round((new Date()).getTime() / 1000))-Math.round(val2/1000);
           val2=formatDate(getDateObject(val2), "TT.MM(SS:mm)")
           val3=(Math.floor( ((yy)/60/60/24) )+"d "+ Math.floor(((yy)/60/60) % 24) +"h "+ Math.floor( ((yy)/60) % 60 )+"m")
        //   if (val1==false) {val1="❌"} else{val1="✅"}
            let valButton=id.replace("value","#delete")
            myDeleterArr.push(id.replace("value","#delete"))
           //log(valButton)
           val1="<button style\=\"border:none\; background-color\:transparent\; color\:white\; font\-size\:1em\; text\-align:left\" value=\"toggle\" onclick=\"setOnDblClickCustomShop\(\'"+valButton+"\')\">"+symbolLink + "</button> <font color=\""+farbeSchalterON+"\">";
           myArr.push([val0,val1,val2,val3,valSort]);
           val0=val0.replace(/,/g,'-');  
           myListArr.push((i+1)+":"+val0+";");
           myListWerte=myListWerte+val0+";";
           myListAuswahl=myListAuswahl+(i+1)+";";
          }} else{ //log('alexa2.0.Lists.SHOPPING_LIST.items.'+ida[5]);
                   deleteObject('alexa2.0.Lists.SHOPPING_LIST.items.'+ida[5], true);
          }
});
     //  log(myIDArr.toString())

        //log (myListArr.toString());
       for (var x=0;x<myListArr.length;x++){
         myList=myList.concat(myListArr[x]);
        // log(myListArr[x]);
         //log(myList);

       }
      // log("-----------myList : "+myList)
       if(myList!=myRememberList){
           myTelegram=true; //log("ist true")
           setStateDelayed(dPDELETEWert, myListAuswahl,500);        
           setStateDelayed(dPDELETEAuswahl,  myListWerte,500);
         var timeout = setTimeout(function () {
           // var obj = getObject(dPDELETE);
            // log("11---"+myList);
           // obj.common.states=myList;
            myRememberList=myList;
            //log("22---"+myList);
           extendObject(dPDELETE, {common: {states: myList}});   
         }, 400);
       }
 //SORT

   if (sortList==1) {
                 myArr.sort(function (alpha, beta) {
              if (alpha[4] > beta[4])
                 return -1;
              if (beta[4] > alpha[4])
                 return 1;
              return 0;
             });
                    } else
       {          myArr.sort(function (alpha, beta) {
              if (alpha[0].toUpperCase() > beta[0].toUpperCase())
                 return 1;
              if (beta[0].toUpperCase() > alpha[0].toUpperCase())
                 return -1;
              return 0;
             });

                    }

                    telegramString="";
  for (var x=0 ; x<myArr.length ; x++) {
      counter++;
     //HIER WERDEN DIE DATEN DER SCHLEIFE ZUSAMMENGESETZT - hat man oben 2 Felder definiert, braucht man hier 2 Werte
       val0=myArr[x][0];
       val1=myArr[x][1];
       var val2help=myArr[x][2]
       var val3help=myArr[x][3];
       if (mitErstelldatum) {val2=val3help+" am "+val2help;} else {val2=val3help}
      
         
       if (backgroundAll) {
          telegramString=telegramString+ myArr[x][0] + " - "+myArr[x][2] + '\n';   // "-"+ myArr[x][1]  +
         
       }  
        tabelleBind(); 
  }
//-------------------------------------------------------------------------------------------------------------------------------------------------
//--------------------------------------------------Ende der schleife------------------------------------------------------------------------------
//-------------------------------------------------------------------------------------------------------------------------------------------------

      tabelleFinish(); // AB HIER NICHTS ÄNDERN - tabelle fertigstellen
     
} // function ende

//MAIN:
 
schedule(mySchedule,  function () { 
  var timeout = setTimeout(function () {
  if(!getState(dpDelAll).val) writeHTML();
    if (braucheEinFile) {writeFile(home, path ,htmlOut, function (error) { /* log('file written');*/  });}
    }, 500);

}); 
 var timeout = setTimeout(function () {
writeHTML(); 
 }, 2000);                                  //     <tdalign

 function tabelleBind(){
   //  counter=counter+mehrfachTabelle;
       switch (mehrfachTabelle) { 

         case 1: if(counter%2==0)         {  htmlOut=htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td></tr>"; break;}else    
                                          {  htmlOut=htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td></tr>"; break;}
         case 2: if(counter%4==0){
                    if(counter%2==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                                        ";\" align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>"; } 
                               else {htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td></tr>";} break;
                      }else{
                                if(counter%2==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                                        ";\"align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>"; } 
                               else {htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td></tr>";} break;}
                                    
         case 3:if(counter%2==0)   {
                    if(counter%3==0 )  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                                        ";\"align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>"; } //Teil1 c=0
                               else { if(counter%3==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                                        "; \"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td>";} //Teil 2 c=1
                                                else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td></tr>";} //Teil 3 c=3
                                          } break;}else{
                    if(counter%3==0 )  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                                        ";\"align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>"; } 
                               else { if(counter%3==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                                        ";\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td>";} 
                                                else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td></tr>";}
                                          } break;}                                          


         case 4:  // counter=counter+8;
                   if(counter%8==0)   {
                   if(counter%4==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td  style=\" border-right: "+trennungsLinie+"px solid "+ farbetrennungsLinie+";\" align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>"; } // teil1
                                   else {if(counter%4==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td>";} //teil 2
                                                else    {if(counter%4==3)  { htmlOut= htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td></tr>";} //teil 4
                                                                  else    {htmlOut  = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\"  align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>";}} //teil 3
                                          } break;}else{
                   if(counter%4==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td  style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\" align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>"; } //teil 1
                                   else {if(counter%4==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td>";} // teil 2
                                                else    {if(counter%4==3)  { htmlOut= htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td></tr>";} // teil 4
                                                                  else    {htmlOut  = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\"align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>";}} //teil 3
                                          } break;}                                    
        } //switch ende

}

function tabelleFinish() {

switch (mehrfachTabelle) {  
       case 1:    break;

       case 2:    
                  if(counter%2==0)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');
                
                  break;

       case 3:   if(counter%3==2)  htmlOut = htmlOut.replace(/<\/td>$/, "</td></tr>");
                 if(counter%3==1)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");        
                 if(counter%3==0)      htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td  style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");
               
                  break;
       case 4:   if(counter%4==3)  htmlOut = htmlOut.replace(/<\/td>$/, "</td></tr>");
                 if(counter%4==2)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");
                 if(counter%4==1)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");    
                 if(counter%4==0)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td><td>&ensp;</td><td>&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");      
                 break; }
     
         var htmlUeber=    "<p style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: "+htmlÜberFontGroesse+"; font-weight:"+htmlSchriftWeite+ "\">"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</p>"; 
       var htmlUnter= "<div  style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: 70%; text-align: right;\" >"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</div>";
        
        if (!htmlSignature) htmlUnter="";
          //Ausgabe über VIS html widget - tabelle in datenpunkt schreiben - html tabelle ohne html header und body
           var htmlOutVIS="";
         //  htmlUberschrift ? htmlOutVIS=htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>" : htmlOutVIS=htmlTabStyle+htmlTabUeber+htmlOut+"</table>";
            if (htmlUberschrift) 
                { zentriert ? htmlOutVIS=htmlZentriert+htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter+ buttonScript : htmlOutVIS=htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter+ buttonScript ;

              } else {
               zentriert ?  htmlOutVIS=htmlZentriert+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter+ buttonScript :  htmlOutVIS=htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter+ buttonScript;

                 }
                 

  // log("bin raus aus tabelleBind");
           if (braucheEinVISWidget) setState(dpVIS, htmlOutVIS );

 var htmlUnter= "<div  style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: 80%;  text-align: center; \" >"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</div>"

 if (!htmlSignature) htmlUnter="";
  var htmlEnd="</table>"+htmlUnter+"</div></body>";
 //mit oder ohne überschrift - zentriert oder links
htmlUberschrift ? htmlOut=htmlStart+htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd : htmlOut=htmlStart+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd;
 //log(htmlOut);
 setState(dpANLEGEN,"");
 setState(dpAnzahl,(counter+1));
 setState(dPDELETE,0);

 
 if(myTelegram && braucheTelegram){ 
     //log("sende");
     myTelegram=false;
     
    sendTo('telegram.0', {
        
   text: (telegramString),
   type: 'text'
   });

telegramString="";

}
} // function ende

setTimeout(function () {
on({id: dPDELETE, ack: false, change: "ne"}, function (obj) { 
  
   let a=getState(dPDELETE).val;
   if (a!=0){
   let toDelete=myIDArr[getState(dPDELETE).val];
   var stateHelp="alexa2.0.Lists.SHOPPING_LIST.items."+toDelete+".#delete"
   setState(stateHelp,true);
   var timeout = setTimeout(function () {
   writeHTML(); }, 4000);
 

   }
  // log("1+bin im on !!!+++!"+a+stateHelp)
   });

   on({id: dpANLEGEN, ack: false, change: "ne"}, function (obj) { 
      // log(getState(dpANLEGEN).val+"----aa");
       if(getState(dpANLEGEN).val!="") {
    setState("alexa2.0.Lists.SHOPPING_LIST.#New",getState(dpANLEGEN).val)
       var timeout = setTimeout(function () {
   writeHTML(); }, 2000);
       } 
       
   });

       on({id: dpRefresh, ack: false, change: "any"}, function (obj) { 
       //log(getState(dpANLEGEN).val+"----refresh");
       var timeout2 = setTimeout(function () {
   writeHTML(); }, 4000);
      // }
   
   });  

      on({id: myDeleterArr, ack: false, change: "any"}, function (obj) { 
       //log(getState(dpANLEGEN).val+"----refresh");
       var timeout2 = setTimeout(function () {
   writeHTML(); }, 4000);
  
      // }
   
   });

   
     on({id: dpDelAll, ack: false,val: true}, function (obj) { 
 let i;
 for (i=0;i<myIDArr.length;i++) {//log("hier : "+myIDArr[i]);
   if (myIDArr[i]!="dummy") {
   let toDelete=myIDArr[i];
      setTimeout( function timer(){
      var stateHelp="alexa2.0.Lists.SHOPPING_LIST.items."+toDelete+".#delete"
   log("Statehelp: "+stateHelp)
   setState(stateHelp,true);
   }, i*2500 );

  
   }
   }
   log(i.toString())
   var timeout = setTimeout(function () {
        setState(dpDelAll,false);
        writeHTML(); }, (1+myIDArr.length)*1500);
  
  // log(stateHelp)

 });

}, 5000);

 //@liv-in-sky 2022  14.2.-16:09

 const dpPrefix = "javascript."+ instance +".";
createState("Alexa_Listen.ALEXALists.ToDo.Anlegen"             , "",{ name: 'Anlegen_VIS',  type: 'string', read:  true,  write: true,});
createState("Alexa_Listen.ALEXALists.ToDo.ALEXAToDo"           , { name: 'ALEXAToDo_VIS',  type: 'string', read:  true,  write: true,});
createState("Alexa_Listen.ALEXALists.ToDo.AuswahlDeleteWerte"   , { name: 'AuswahlDeleteWert_VIS',  type: 'string', read:  true,  write: true,});
createState("Alexa_Listen.ALEXALists.ToDo.AuswahlDeleteTexte"  , { name: 'AuswahlDeleteTexte_VIS',  type: 'string', read:  true,  write: true,});
createState("Alexa_Listen.ALEXALists.ToDo.Anzahl"  , { name: 'ToDo_Anzahl_VIS',  type: 'number', read:  true,  write: true,});
createState("Alexa_Listen.ALEXALists.ToDo.DeleteALL"  , { name: 'ToDo_DeleteALL',  type: 'boolean', role: 'switch', read:  true,  write: true,});
createState("Alexa_Listen.ALEXALists.ToDo.Refresh"  , { name: 'Refresh',  type: 'boolean', role: 'switch', read:  true,  write: true,});
//createState("Alexa_Listen.ALEXALists.ToDo.AuswahlDelete"       , { name: 'AuswahlDelete_VIS',  type: 'number', read:  true,  write: true,});

createState("Alexa_Listen.ALEXALists.ToDo.AuswahlDelete", {
name: 'AuswahlDelete',
 role: "state",
 type: "number",
 states: "0:choose ...;1:eeee;2:test1;3:test;",
 min: 0,
 max: 50,
 def: 0,
 read: true,
 write: true});




//HIER WIRD PFAD UND FILENAME DEFINIERT
const path = "/htmltelegram.html";                   //FIlenamen definieren
const home ='vis.0'                                 //wo soll das file im iobroker-file-system liegen ? (oder z.b auch iqontrol.meta)
let   braucheEinFile=false;                          // bei true wird ein file geschrieben - für iqontrol
let   braucheEinVISWidget=true;                     // bei true wird ein html-tabelle in einen dp geschrieben 
let   braucheTelegram=false;
let dpVIS=dpPrefix+"Alexa_Listen.ALEXALists.ToDo.ALEXAToDo";                      // dp  für VIS-HTML-Basic-Widget // Datentyp: String
let dPDELETE=dpPrefix+"Alexa_Listen.ALEXALists.ToDo.AuswahlDelete";                  // Datentyp: Werteliste
let dPDELETEWert=dpPrefix+"Alexa_Listen.ALEXALists.ToDo.AuswahlDeleteWerte";         // Datentyp: String
let dPDELETEAuswahl=dpPrefix+"Alexa_Listen.ALEXALists.ToDo.AuswahlDeleteTexte";      // Datentyp: String
let dpANLEGEN=dpPrefix+"Alexa_Listen.ALEXALists.ToDo.Anlegen";                       // Datentyp: String
let dpAnzahl=dpPrefix+"Alexa_Listen.ALEXALists.ToDo.Anzahl";                         // Datentyp: Number
let dpDelAll=dpPrefix+"Alexa_Listen.ALEXALists.ToDo.DeleteALL";                      // Datentyp: Boolean
let dpRefresh=dpPrefix+"Alexa_Listen.ALEXALists.ToDo.Refresh";                      // Datentyp: Boolean
let mySchedule=" * * * * * ";                       
let sortList=1;                                                                         // SORTIERUNG 1=nach datum; 2 nach ToDo's
let mitErstelldatum=false;
var symbolLink="⚪";                                                                    //  👎  💀 ❌  ⚪  ⚫ ⭕  🔴 🔵
let farbeSchalterON="blue";
//---------------------------------------

//HIER DIE SPALTEN ANZAHL DEFINIEREN - jede Spalte einen Wert - in diesem Beispiel sind es 3
var htmlFeld1='ToDo';       var Feld1lAlign="left";                     // überschrift Tabellen Spalte1 und  Ausrichtung left or center
var htmlFeld2='Del';        var Feld2lAlign="center";                      // überschrift Tabellen Spalte2 und  Ausrichtung left,right or center
var htmlFeld3='Erstellt vor';         var Feld3lAlign="center";                    // überschrift Tabellen Spalte3 und  Ausrichtung left,right or center
//-----------------------------------


//hier werden die styles für die tabelle definiert
//ÜBERSCHRIFT ÜBER TABELLE
let   htmlUberschrift=false;                           // mit Überschrift über der tabelle
let   htmlSignature=false;                              // anstatt der Überscghrift eine signature: - kleiner - anliegend
const htmlFeldUeber='ALEXA ToDosliste';              // Überschrift und Signature
const htmlFarbUber="white";                         // Farbe der Überschrift
const htmlSchriftWeite="normal";                       // bold, normal - Fettschrift für Überschrift
const htmlÜberFontGroesse="18px";                       // schriftgröße überschrift
//MEHRERE TABELLEN NEBENEINANDER
let   mehrfachTabelle=1;                              // bis zu 4 Tabellen werden nebeneinander geschrieben-  verkürzt das Ganze, dafür etwas breiter - MÖGLICH 1,2,3,oder 4 !!!
const trennungsLinie="2";                             //extra trennungslinie bei mehrfachtabellen - evtl auf 0 stellen, wnn htmlRahmenLinien auf none sind
const farbetrennungsLinie="white";
const htmlFarbZweiteTabelle="white";                // Farbe der Überschrift bei jeder 2.ten Tabelle
const htmlFarbTableColorUber="#BDBDBD";               // Überschrift in der tabelle - der einzelnen Spalten
//ÜBERSCHRIFT SPALTEN
const UeberSchriftHöhe="35";                          //Überschrift bekommt mehr Raum - darunter und darüber - Zellenhöhe
const LinieUnterUeberschrift="3";                   // Linie nur unter Spaltenüberschrift - 
const farbeLinieUnterUeberschrift="white";
const groesseUeberschrift=16;
const UeberschriftStyle="normal"                     // möglich "bold"
//GANZE TABELLE
let abstandZelle="3";
let farbeUngeradeZeilen="#000000";                     //Farbe für ungerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2
let farbeGeradeZeilen="#2E2E2E";                        //Farbe für gerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2
let weite="auto";                                     //Weite der Tabelle
let zentriert=true;                                   //ganze tabelle zentriert
const backgroundAll="#000000";                        //Hintergrund für die ganze Seite - für direkten aufruf oder iqontrol sichtber - keine auswirkung auf vis-widget
const htmlSchriftart="Helvetica";
const htmlSchriftgroesse="14px";
//FELDER UND RAHMEN
let   UeberschriftSpalten=true;                // ein- oder ausblenden der spatlen-überschriften
const htmlFarbFelderschrift="lightblue";                  // SchriftFarbe der Felder
const htmlFarbFelderschrift2="#D8D8D8";                 // SchriftFarbe der Felder für jede 2te Tabelle
const htmlFarbTableColorGradient1="#424242";          //  Gradient - Hintergrund der Tabelle - Verlauffarbe
const htmlFarbTableColorGradient2="#424242";          //  Gradient - Hintergrund der Tabelle - ist dieser Wert gleich Gradient1 gibt es keinen verlauf
const htmlFarbTableBorderColor="grey";             // Farbe des Rahmen - is tdieser gleich den gradienten, sind die rahmen unsichtbar
let htmlRahmenLinien="none";                            // Format für Rahmen: MÖGLICH: "none" oder "all" oder "cols" oder "rows"
const htmlSpalte1Weite="auto";                   //  Weite der ersten beiden  Spalten oder z.b. 115px

// HIER NICHTS  ÄNDERN

let borderHelpBottum;
let borderHelpRight;
let htmlcenterHelp;
let htmlcenterHelp2;

if(htmlRahmenLinien=="rows") {borderHelpBottum=1;borderHelpRight=0;}
if(htmlRahmenLinien=="cols") {borderHelpBottum=0;borderHelpRight=1;}
if(htmlRahmenLinien=="none") {borderHelpBottum=0;borderHelpRight=0;}
if(htmlRahmenLinien=="all")  {borderHelpBottum=1;borderHelpRight=1;}
zentriert ? htmlcenterHelp="auto" : htmlcenterHelp="left";
zentriert ? htmlcenterHelp2="center" : htmlcenterHelp2="left";


const htmlZentriert='<center>'
const htmlStart=    "<!DOCTYPE html><html lang=\"de\"><head><title>Vorlage</title><meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\">"+
                   "<style> * {  margin: 0;} body {background-color: "+backgroundAll+"; margin: 0 auto;  }"+
                   " p {padding-top: 10px; padding-bottom: 10px; text-align: "+htmlcenterHelp2+"}"+
                  // " div { margin: 0 auto;  margin-left: auto; margin-right: auto;}"+
                   " td { padding:"+abstandZelle+"px; border:0px solid "+htmlFarbTableBorderColor+";  border-right:"+borderHelpRight+"px solid "+htmlFarbTableBorderColor+";border-bottom:"+borderHelpBottum+"px solid "+htmlFarbTableBorderColor+";}"+ 
                   " table { width: "+weite+";  margin: 0 "+htmlcenterHelp+"; border:1px solid "+htmlFarbTableBorderColor+"; border-spacing=\""+abstandZelle+"0px\" ; }"+   // margin macht center
                   "td:nth-child(1) {width: "+htmlSpalte1Weite+"}"+"td:nth-child(2) {width:"+htmlSpalte1Weite+"}"+
                   " </style></head><body> <div>";
//const htmlUeber=    "<p style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-weight: bold\">"+htmlFeldUeber+"</p>";                    
const htmlTabStyle= "<table bordercolor=\""+htmlFarbTableBorderColor+"\" border=\"2px\" cellspacing=\""+abstandZelle+"\" cellpadding=\""+abstandZelle+"\" width=\""+weite+"\" rules=\""+htmlRahmenLinien+"\" style=\"color:"+htmlFarbFelderschrift+";  font-size:"+htmlSchriftgroesse+
                      "; font-family:"+htmlSchriftart+";background-image: linear-gradient(42deg,"+htmlFarbTableColorGradient2+","+htmlFarbTableColorGradient1+");\">";
const htmlTabUeber1="<tr height=\""+UeberSchriftHöhe+"\" style=\"color:"+htmlFarbTableColorUber+"; font-size: "+groesseUeberschrift+"px; font-weight: "+UeberschriftStyle+" ;  border-bottom: "+LinieUnterUeberschrift+"px solid "+farbeLinieUnterUeberschrift+" \">";
const htmlTabUeber3="</tr>";
/*
table td:first-child {}  //1
table td:nth-child(2) {} //2
table td:nth-child(3) {} //3
table td:last-child {}   //4
*/

const buttonScript =  '<script> function setOnDblClickCustomToDo( myvalue ) {	var Self = this; var objID = myvalue;	vis.setValue(myvalue,true);  var2 = \"' + dpPrefix + 'Alexa_Listen.ALEXALists.ToDo.Refresh\"; vis.setValue(var2,true);  console.log("www")  } </script>'

// const buttonScript =  '<script> function setOnDblClickCustom( myvalue ) {	var Self = this; var objID = myvalue;	Self.servConn.getStates(objID, (error, states) => {  console.log(states);  Self.servConn.setState(objID, true);  }); var2 = \"javascript.0.Alexa_Listen.ALEXALists.ToDo.Refresh\"; Self.servConn.setState(var2, true); console.log("www")} </script>'

//NICHTS ÄNDERN - abhängig von den oben definierten _Spalten - in diesem Beispiel sind es 3

   	var htmlTabUeber2="<td width="+htmlSpalte1Weite+" align="+Feld1lAlign+">&ensp;"+htmlFeld1+"&ensp;</td><td width="+htmlSpalte1Weite+" align="+Feld2lAlign+">&ensp;"+htmlFeld2+"&ensp;</td><td  align="+Feld3lAlign+">&ensp;"+htmlFeld3+"&ensp;</td>";
var htmlTabUeber2_1="<td width="+htmlSpalte1Weite+" align="+Feld1lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld1+"&ensp;</td><td width="+htmlSpalte1Weite+"  align="+Feld2lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld2+
                   "&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld3+"&ensp;</td>";
//------------------------------------------------------


var htmlTabUeber="";
var htmlOut="";
var mix;
var counter;
var warte;
var myIDArr=[];
let myDeleterArr;
var myRememberList="";
var myTelegram=false;
var telegramString="";
//HIER SIND DIE  WERTE, DIE IN DER SCHLEIFE GEFILTERET WER%DEN - Jede spalte einen wert - jeder valx muss in dieser schleife gesetzt werden !!
var val1; var val2; var val0; var val3; var valSort; 

function writeHTML(){


htmlOut="";

counter=-1;
htmlTabUeber="";
switch (mehrfachTabelle) { 
   case 1: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber3;  break;
   case 2: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break;
   case 3: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber2+htmlTabUeber3; break;
   case 4: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break;
};   
if (!UeberschriftSpalten) {htmlTabUeber=""}

var valID; var myListWerte=""; var myListAuswahl="";
//--------------------------------------------------------------------------------------------------------------------------------------------------
//---------hier kommt eure schleife rein counter++, tabelleBind() und tabelleFinish() müssen so integriert bleiben !!!------------------------------
//---------alle valx werte müssen von euch bestimmt werden - val0,val1,val2 !!!---------------------------------------------------------------------
//--------------------------------------------------------------------------------------------------------------------------------------------------
var myArr=[]; var myList=""; var myListArr=[]; myIDArr=[]; myDeleterArr=[];

let myhelerArr=getState("alexa2.0.Lists.TO_DO.json").val;
  myDeleterArr.push("alexa2.0.Lists.TO_DO.json")
myListArr.push('0'+":"+'choose ...'+";");
            myListWerte=myListWerte+"choose ..."+";";
           myListAuswahl=myListAuswahl+(0+";");
           myIDArr.push("dummy");


$('alexa2.0.Lists.TO_DO.items.*.value').each(function(id, i) {           // hier eigene schleife definierenalexa2.0.Lists.SHOPPING_LIST.items.0f43141e-029c-4860-bcd0-828702b0dc86.value

       let ida=id.split('.')
       // log(myhelerArr)
       // log(myhelerArr.includes(ida[5]))
         if(myhelerArr.includes(ida[5])) {
         
          if(!getState(id.replace("value","completed")).val) {    
           val0=getState(id).val;
           val1=getState(id.replace("value","completed")).val; 
           val2=valSort=getState(id.replace("value","updatedDateTime")).val; 
           valID=getState(id.replace("value","id")).val; 
           myIDArr.push(valID);
           var yy= (Math.round((new Date()).getTime() / 1000))-Math.round(val2/1000);
           val2=formatDate(getDateObject(val2), "TT.MM(SS:mm)")
           val3=(Math.floor( ((yy)/60/60/24) )+"d "+ Math.floor(((yy)/60/60) % 24) +"h "+ Math.floor( ((yy)/60) % 60 )+"m")
        //   if (val1==false) {val1="?"} else{val1="?"}
            let valButton=id.replace("value","#delete")
           //log(valButton)
           val1="<button style\=\"border:none\; background-color\:transparent\; color\:white\; font\-size\:1em\; text\-align:left\" value=\"toggle\" onclick=\"setOnDblClickCustomToDo\(\'"+valButton+"\')\">"+symbolLink + "</button> <font color=\""+farbeSchalterON+"\">";
           myArr.push([val0,val1,val2,val3,valSort]);
           val0=val0.replace(/,/g,'-');  
           myListArr.push((i+1)+":"+val0+";");
           myListWerte=myListWerte+val0+";";
           myListAuswahl=myListAuswahl+(i+1)+";";
       }} else{ //log('alexa2.0.Lists.SHOPPING_LIST.items.'+ida[5]);
                   deleteObject('alexa2.0.Lists.TO_DO.items.'+ida[5], true);
          }
});
       //log(myIDArr.toString())

        //log (myListArr.toString());
       for (var x=0;x<myListArr.length;x++){
         myList=myList.concat(myListArr[x]);
        // log(myListArr[x]);
         //log(myList);

       }
      // log("-----------myList : "+myList)
       if(myList!=myRememberList){
           myTelegram=true; //log("ist true")
           setStateDelayed(dPDELETEWert, myListAuswahl,500);        
           setStateDelayed(dPDELETEAuswahl,  myListWerte,500);
         var timeout = setTimeout(function () {
         //  var obj = getObject(dPDELETE);
            // log("11---"+myList);
           // obj.common.states=myList;
            myRememberList=myList;
            //log("22---"+myList);
          extendObject(dPDELETE, {common: {states: myList}});  
         }, 400);
       }
 //SORT

   if (sortList==1) {
                 myArr.sort(function (alpha, beta) {
              if (alpha[4] > beta[4])
                 return -1;
              if (beta[4] > alpha[4])
                 return 1;
              return 0;
             });
                    } else
       {          myArr.sort(function (alpha, beta) {
              if (alpha[0].toUpperCase() > beta[0].toUpperCase())
                 return 1;
              if (beta[0].toUpperCase() > alpha[0].toUpperCase())
                 return -1;
              return 0;
             });

                    }

                    telegramString="";
  for (var x=0 ; x<myArr.length ; x++) {
      counter++;
     //HIER WERDEN DIE DATEN DER SCHLEIFE ZUSAMMENGESETZT - hat man oben 2 Felder definiert, braucht man hier 2 Werte
       val0=myArr[x][0];
       val1=myArr[x][1];
       var val2help=myArr[x][2]
       var val3help=myArr[x][3];
       if (mitErstelldatum) {val2=val3help+" am "+val2help;} else {val2=val3help}
      
         
       if (backgroundAll) {
          telegramString=telegramString+ myArr[x][0] + " - "+myArr[x][2] + '\n';   // "-"+ myArr[x][1]  +
         
       }  
        tabelleBind(); 
  }
//-------------------------------------------------------------------------------------------------------------------------------------------------
//--------------------------------------------------Ende der schleife------------------------------------------------------------------------------
//-------------------------------------------------------------------------------------------------------------------------------------------------

      tabelleFinish(); // AB HIER NICHTS ÄNDERN - tabelle fertigstellen
     
} // function ende

//MAIN:
 
schedule(mySchedule,  function () { 
  var timeout = setTimeout(function () {
  if(!getState(dpDelAll).val) writeHTML();
    if (braucheEinFile) {writeFile(home, path ,htmlOut, function (error) { /* log('file written');*/  });}
    }, 500);

}); 
 var timeout = setTimeout(function () {
writeHTML(); 
 }, 2000);                                  //     <tdalign

 function tabelleBind(){
   //  counter=counter+mehrfachTabelle;
       switch (mehrfachTabelle) { 

         case 1: if(counter%2==0)         {  htmlOut=htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td></tr>"; break;}else    
                                          {  htmlOut=htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td></tr>"; break;}
         case 2: if(counter%4==0){
                    if(counter%2==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                                        ";\" align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>"; } 
                               else {htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td></tr>";} break;
                      }else{
                                if(counter%2==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                                        ";\"align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>"; } 
                               else {htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td></tr>";} break;}
                                    
         case 3:if(counter%2==0)   {
                    if(counter%3==0 )  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                                        ";\"align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>"; } //Teil1 c=0
                               else { if(counter%3==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                                        "; \"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td>";} //Teil 2 c=1
                                                else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td></tr>";} //Teil 3 c=3
                                          } break;}else{
                    if(counter%3==0 )  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                                        ";\"align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>"; } 
                               else { if(counter%3==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+
                                                        ";\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td>";} 
                                                else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td></tr>";}
                                          } break;}                                          


         case 4:  // counter=counter+8;
                   if(counter%8==0)   {
                   if(counter%4==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td  style=\" border-right: "+trennungsLinie+"px solid "+ farbetrennungsLinie+";\" align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>"; } // teil1
                                   else {if(counter%4==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td>";} //teil 2
                                                else    {if(counter%4==3)  { htmlOut= htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td></tr>";} //teil 4
                                                                  else    {htmlOut  = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\"  align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>";}} //teil 3
                                          } break;}else{
                   if(counter%4==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td  style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\" align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>"; } //teil 1
                                   else {if(counter%4==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td>";} // teil 2
                                                else    {if(counter%4==3)  { htmlOut= htmlOut+"<td align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td></tr>";} // teil 4
                                                                  else    {htmlOut  = htmlOut+"<td align="+Feld1lAlign+">&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\"align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td>";}} //teil 3
                                          } break;}                                    
        } //switch ende

}

function tabelleFinish() {

switch (mehrfachTabelle) {  
       case 1:    break;

       case 2:    
                  if(counter%2==0)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');
                
                  break;

       case 3:   if(counter%3==2)  htmlOut = htmlOut.replace(/<\/td>$/, "</td></tr>");
                 if(counter%3==1)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");        
                 if(counter%3==0)      htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td  style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");
               
                  break;
       case 4:   if(counter%4==3)  htmlOut = htmlOut.replace(/<\/td>$/, "</td></tr>");
                 if(counter%4==2)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");
                 if(counter%4==1)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");    
                 if(counter%4==0)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td><td>&ensp;</td><td>&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");      
                 break; }
     
         var htmlUeber=    "<p style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: "+htmlÜberFontGroesse+"; font-weight:"+htmlSchriftWeite+ "\">"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</p>"; 
       var htmlUnter= "<div  style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: 70%; text-align: right;\" >"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</div>";
        
        if (!htmlSignature) htmlUnter="";
          //Ausgabe über VIS html widget - tabelle in datenpunkt schreiben - html tabelle ohne html header und body
           var htmlOutVIS="";
         //  htmlUberschrift ? htmlOutVIS=htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>" : htmlOutVIS=htmlTabStyle+htmlTabUeber+htmlOut+"</table>";
            if (htmlUberschrift) 
                { zentriert ? htmlOutVIS=htmlZentriert+htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter+ buttonScript : htmlOutVIS=htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter+ buttonScript ;

              } else {
               zentriert ?  htmlOutVIS=htmlZentriert+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter+ buttonScript :  htmlOutVIS=htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter+ buttonScript;

                 }
                 

  // log("bin raus aus tabelleBind");
           if (braucheEinVISWidget) setState(dpVIS, htmlOutVIS );

 var htmlUnter= "<div  style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: 80%;  text-align: center; \" >"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</div>"

 if (!htmlSignature) htmlUnter="";
  var htmlEnd="</table>"+htmlUnter+"</div></body>";
 //mit oder ohne überschrift - zentriert oder links
htmlUberschrift ? htmlOut=htmlStart+htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd : htmlOut=htmlStart+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd;
 //log(htmlOut);
 setState(dpANLEGEN,"");
 setState(dpAnzahl,(counter+1));
 setState(dPDELETE,0);

 
 if(myTelegram && braucheTelegram){ 
     //log("sende");
     myTelegram=false;
     
    sendTo('telegram.0', {
        
   text: (telegramString),
   type: 'text'
   });

telegramString="";

}
} // function ende


setTimeout(function () {
    
on({id: dPDELETE, ack: false, change: "ne"}, function (obj) { 

   let a=getState(dPDELETE).val;
   if (a!=0){
   let toDelete=myIDArr[getState(dPDELETE).val];
   var stateHelp="alexa2.0.Lists.TO_DO.items."+toDelete+".#delete"
   setState(stateHelp,true);
   var timeout = setTimeout(function () {
   writeHTML(); }, 4000);
   }
  // log("1+bin im on !!!+++!"+a+stateHelp)
   });

   on({id: dpANLEGEN, ack: false, change: "ne"}, function (obj) { 
       //log(getState(dpANLEGEN).val+"----aa");
       if(getState(dpANLEGEN).val!="") {
    setState("alexa2.0.Lists.TO_DO.#New",getState(dpANLEGEN).val)
       var timeout = setTimeout(function () {
   writeHTML(); }, 2000);
       } 
       
   });

       on({id: dpRefresh, ack: false, change: "any"}, function (obj) { 
       //log(getState(dpANLEGEN).val+"----refresh");
       var timeout2 = setTimeout(function () {
   writeHTML(); }, 4000);
      // }
   
   });

 on({id: myDeleterArr, ack: false, change: "any"}, function (obj) { 
       //log(getState(dpANLEGEN).val+"----refresh");
       var timeout2 = setTimeout(function () {
   writeHTML(); }, 4000);
  
      // }
   
   });

   
     on({id: dpDelAll, ack: false,val: true}, function (obj) { 
       let i;
 for (i=0;i<myIDArr.length;i++) {//log("hier : "+myIDArr[i]);
   if (myIDArr[i]!="dummy") {
   let toDelete=myIDArr[i];
          setTimeout( function timer(){
   var stateHelp="alexa2.0.Lists.TO_DO.items."+toDelete+".#delete"
  // log("Statehelp: "+stateHelp)
   setState(stateHelp,true);
     }, i*1500);
   }
   }
   var timeout = setTimeout(function () {
        setState(dpDelAll,false);
        writeHTML(); }, (1+myIDArr.length)*1500);
  
  // log(stateHelp)

 });

}, 5000);

sigi234

Forum Testing Most Active

schrieb am

#153

@liv-in-sky

Hallo, wie kann ich die Überschrift beeinflussen? Größe, Ausrichtung, Schriftart.
Also auch die Anzeige von Anzahl nicht sichtbar.

S sigi234

@liv-in-sky

Hallo, wie kann ich die Überschrift beeinflussen? Größe, Ausrichtung, Schriftart.
Also auch die Anzeige von Anzahl nicht sichtbar.
L Offline
L Offline
liv-in-sky

schrieb am zuletzt editiert von

#154

@sigi234 am besten überschrift auf false setzen - ca zeile 53

dafür gib es keine ausrichtung, daher auf false und eigene verwenden in vis

die anzahl hast du ja als datenpunkt
nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html
S 1 Antwort Letzte Antwort

0
L liv-in-sky

@sigi234 am besten überschrift auf false setzen - ca zeile 53

dafür gib es keine ausrichtung, daher auf false und eigene verwenden in vis

die anzahl hast du ja als datenpunkt
S Online
S Online
sigi234
Forum Testing Most Active
schrieb am zuletzt editiert von

#155

@liv-in-sky
So Widget fertig. Danke für deine tolle Arbeit! :+1:
Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
Immer Daten sichern!
S 1 Antwort Letzte Antwort

1
S sigi234

@liv-in-sky
So Widget fertig. Danke für deine tolle Arbeit! :+1:
S Offline
S Offline
skokarl

schrieb am zuletzt editiert von

#156

@sigi234 sagte in Script: Alexa Listen pflegen und Anzeigen:

@liv-in-sky
So Widget fertig. Danke für deine tolle Arbeit! :+1:

Was liegt hinter dem Mülleimer ? ein Blockly ?
IOBroker mit Proxmox auf Celeron Nuc mit 16 GB und Debian11, Sonos API, Echo Show 15 als Wandtablet, Homematic IP, HUE, Sonos, Echos, DS718+ als Backup
L 1 Antwort Letzte Antwort

0
S skokarl

@sigi234 sagte in Script: Alexa Listen pflegen und Anzeigen:

@liv-in-sky
So Widget fertig. Danke für deine tolle Arbeit! :+1:

Was liegt hinter dem Mülleimer ? ein Blockly ?
L Offline
L Offline
liv-in-sky

schrieb am zuletzt editiert von

#157

@skokarl der mülleimer schaltet einen datenpunkt auf true, der alles löscht - ist im script enthalten
nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html
S 2 Antworten Letzte Antwort

0
L liv-in-sky

@skokarl der mülleimer schaltet einen datenpunkt auf true, der alles löscht - ist im script enthalten
S Offline
S Offline
skokarl

schrieb am zuletzt editiert von

#158

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

@skokarl der mülleimer schaltet einen datenpunkt auf true, der alles löscht - ist im script enthalten

boah,..hab ich eben nicht gesehen. Jipp, funktioniert super.
IOBroker mit Proxmox auf Celeron Nuc mit 16 GB und Debian11, Sonos API, Echo Show 15 als Wandtablet, Homematic IP, HUE, Sonos, Echos, DS718+ als Backup
1 Antwort Letzte Antwort

0
L liv-in-sky

@skokarl der mülleimer schaltet einen datenpunkt auf true, der alles löscht - ist im script enthalten
S Offline
S Offline
skokarl

schrieb am zuletzt editiert von

#159

@liv-in-sky

Kann ich versuchen das einfach aus dem Script zu streichen ? :grimacing:
IOBroker mit Proxmox auf Celeron Nuc mit 16 GB und Debian11, Sonos API, Echo Show 15 als Wandtablet, Homematic IP, HUE, Sonos, Echos, DS718+ als Backup
L 1 Antwort Letzte Antwort

0
? Ein ehemaliger Benutzer

@Agria4800
Wie versendest Du die Liste mit Telegramm?
Das muss nicht in HTML sein.
Nur das simple.
Kannst Du mir einen Tipp geben?
Das Drucken habe ich auf meinem RockPro64 hinbekommen.
S Offline
S Offline
skokarl

schrieb am zuletzt editiert von skokarl

#160

@Yetiberg sagte in Script: Alexa Listen pflegen und Anzeigen:

@Agria4800
Wie versendest Du die Liste mit Telegramm?
Das muss nicht in HTML sein.
Nur das simple.
Kannst Du mir einen Tipp geben?
Das Drucken habe ich auf meinem RockPro64 hinbekommen

Wie hast Du das mit dem Ausdruck realisiert ?
Jetzt will meine Frau allen ernstes nen kleinen Bondrucker neben dem Tablet
um die Einkaufsliste Handtaschengerecht zu auszudrucken....... ich werd irre :grimacing:
obwohl die Idee schon was hat .... :grinning:
IOBroker mit Proxmox auf Celeron Nuc mit 16 GB und Debian11, Sonos API, Echo Show 15 als Wandtablet, Homematic IP, HUE, Sonos, Echos, DS718+ als Backup
L S 2 Antworten Letzte Antwort

0
S skokarl

@liv-in-sky

Kann ich versuchen das einfach aus dem Script zu streichen ? :grimacing:
L Offline
L Offline
liv-in-sky

schrieb am zuletzt editiert von

#161

@skokarl die überschrift kannst du abschalten im setting der tabelle- das andere wäre ein eigenes script - entweder mit nur 2 werten oder das existierende script mit leerzeichen in spalte2 und 4
nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html
1 Antwort Letzte Antwort

0
S skokarl

@Yetiberg sagte in Script: Alexa Listen pflegen und Anzeigen:

@Agria4800
Wie versendest Du die Liste mit Telegramm?
Das muss nicht in HTML sein.
Nur das simple.
Kannst Du mir einen Tipp geben?
Das Drucken habe ich auf meinem RockPro64 hinbekommen

Wie hast Du das mit dem Ausdruck realisiert ?
Jetzt will meine Frau allen ernstes nen kleinen Bondrucker neben dem Tablet
um die Einkaufsliste Handtaschengerecht zu auszudrucken....... ich werd irre :grimacing:
obwohl die Idee schon was hat .... :grinning:
L Offline
L Offline
liv-in-sky

schrieb am zuletzt editiert von

#162

@skokarl so schnell kanns gehen :)
nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html
S 2 Antworten Letzte Antwort

0
L liv-in-sky

@skokarl so schnell kanns gehen :)
S Offline
S Offline
skokarl

schrieb am zuletzt editiert von

#163

@liv-in-sky

wegen dem Bondrucker ?....

Da hast Du was geiles programmiert .... :grin:
IOBroker mit Proxmox auf Celeron Nuc mit 16 GB und Debian11, Sonos API, Echo Show 15 als Wandtablet, Homematic IP, HUE, Sonos, Echos, DS718+ als Backup
1 Antwort Letzte Antwort

0

Anmelden zum Antworten

Support us

817

Online

32.4k

Benutzer

81.5k

Themen

1.3m

Beiträge