Popup geschachtelt für Weckereinstellung

[ToM_ToM]

Hallo Zusammen,

ich bin gerade etwas am verzweifeln.
Für meine Weckereinstellung habe ich mir ein Template erstellt welches ich per Popup aufrufen möchte wenn in meiner Homeseite auf das Wecker-Symbol gedrückt wird.
Jedoch werden alle Popups im Template geöffnet sobald ich es aufrufe (Popups schachtel). Ohne Schachtelung funktioniert alles perfekt.


Der Aufruf des Templates:

Code Auswählen Erweitern


<div class="" data-type="popup" id="popupWecker1" data-width="320px" data-height="528px">
<div data-type="symbol" data-icon="mi-alarm" class="bigger compressed"></div>
<div class="dialog">

<div class="">
<div data-template="../template_alarmclock.html" data-parameter='{"par01_Device":"Wecker1"}'></div>
</div>

</div>
</div>


Das Template:

Code Auswählen Erweitern


<div style="width:160px">
<div data-type="label" data-device="par01_Device" data-get="NAME"></div>
<div class="sheet border-black inline">
<div class="row big">
<div class="cell left-align">
<div data-type="popup" id="popupAlarmClockMonday" data-height="150px" data-width="250px" class="inline top-align">
<div data-type="link">
<div data-type="classchanger"
data-device="par01_Device"
data-get="AlarmTime1_Monday"
data-get-off="off"
data-get-on="(?!off).*"
data-off-class="red"
data-on-class="green"
class="">
<div data-type="label">Mo:</div>
</div>
</div>
<div class="dialog">
<header>Montag</header>
<div class="top-space">
<div data-type="label" class="large">Wecker deaktivieren?</div>
</div>
<div class="top-space-2x">
<div data-type="link"
data-width="100"
data-border-color="black"
class="large inline"
data-fhem-cmd="set par01_Device AlarmOff 1_Monday"
onclick="$('#popupAlarmClockMonday.dialog-close').trigger('click');">
ja
</div>
<div data-type="link"
data-width="100"
data-border-color="black"
class="large inline"
onclick="$('#popupAlarmClockMonday.dialog-close').trigger('click');">
nein
</div>
</div>
</div>
</div>
</div>
<div data-type="datetimepicker"
data-device='par01_Device'
data-get="AlarmTime1_Monday"
data-set="AlarmTime1_Monday"
data-datepicker="false"
data-format="H:i"
data-step="5"
class="inline cell right-align">
</div>
</div>

<div class="row big">
<div class="cell left-align">
<div data-type="popup" id="popupAlarmClockTuesday" data-height="150px" data-width="250px" class="inline top-align">
<div data-type="link">
<div data-type="classchanger"
data-device="par01_Device"
data-get="AlarmTime2_Tuesday"
data-get-off="off"
data-get-on="(?!off).*"
data-off-class="red"
data-on-class="green"
class="">
<div data-type="label">Di:</div>
</div>
</div>
<div class="dialog">
<header>Dienstag</header>
<div class="top-space">
<div data-type="label" class="large">Wecker deaktivieren?</div>
</div>
<div class="top-space-2x">
<div data-type="link"
data-width="100"
data-border-color="black"
class="large inline"
data-fhem-cmd="set par01_Device AlarmOff 2_Tuesday"
onclick="$('#popupAlarmClockTuesday.dialog-close').trigger('click');">
ja
</div>
<div data-type="link"
data-width="100"
data-border-color="black"
class="large inline"
onclick="$('#popupAlarmClockTuesday.dialog-close').trigger('click');">
nein
</div>
</div>
</div>
</div>
</div>
<div data-type="datetimepicker"
data-device='par01_Device'
data-get="AlarmTime2_Tuesday"
data-set="AlarmTime2_Tuesday"
data-datepicker="false"
data-format="H:i"
data-step="5"
class="inline cell right-align">
</div>
</div>

<div class="row big">
<div class="cell left-align">
<div data-type="popup" id="popupAlarmClockWednesday" data-height="150px" data-width="250px" class="inline top-align">
<div data-type="link">
<div data-type="classchanger"
data-device="par01_Device"
data-get="AlarmTime3_Wednesday"
data-get-off="off"
data-get-on="(?!off).*"
data-off-class="red"
data-on-class="green"
class="">
<div data-type="label">Mi:</div>
</div>
</div>
<div class="dialog">
<header>Mittwoch</header>
<div class="top-space">
<div data-type="label" class="large">Wecker deaktivieren?</div>
</div>
<div class="top-space-2x">
<div data-type="link"
data-width="100"
data-border-color="black"
class="large inline"
data-fhem-cmd="set par01_Device AlarmOff 3_Wednesday"
onclick="$('#popupAlarmClockWednesday.dialog-close').trigger('click');">
ja
</div>
<div data-type="link"
data-width="100"
data-border-color="black"
class="large inline"
onclick="$('#popupAlarmClockWednesday.dialog-close').trigger('click');">
nein
</div>
</div>
</div>
</div>
</div>
<div data-type="datetimepicker"
data-device='par01_Device'
data-get="AlarmTime3_Wednesday"
data-set="AlarmTime3_Wednesday"
data-datepicker="false"
data-format="H:i"
data-step="5"
class="inline cell right-align">
</div>
</div>

<div class="row big">
<div class="cell left-align">
<div data-type="popup" id="popupAlarmClockThursday" data-height="150px" data-width="250px" class="inline top-align">
<div data-type="link">
<div data-type="classchanger"
data-device="par01_Device"
data-get="AlarmTime4_Thursday"
data-get-off="off"
data-get-on="(?!off).*"
data-off-class="red"
data-on-class="green"
class="">
<div data-type="label">Do:</div>
</div>
</div>
<div class="dialog">
<header>Donnerstag</header>
<div class="top-space">
<div data-type="label" class="large">Wecker deaktivieren?</div>
</div>
<div class="top-space-2x">
<div data-type="link"
data-width="100"
data-border-color="black"
class="large inline"
data-fhem-cmd="set par01_Device AlarmOff 4_Thursday"
onclick="$('#popupAlarmClockThursday.dialog-close').trigger('click');">
ja
</div>
<div data-type="link"
data-width="100"
data-border-color="black"
class="large inline"
onclick="$('#popupAlarmClockThursday.dialog-close').trigger('click');">
nein
</div>
</div>
</div>
</div>
</div>
<div data-type="datetimepicker"
data-device='par01_Device'
data-get="AlarmTime4_Thursday"
data-set="AlarmTime4_Thursday"
data-datepicker="false"
data-format="H:i"
data-step="5"
class="inline cell right-align">
</div>
</div>

<div class="row big">
<div class="cell left-align">
<div data-type="popup" id="popupAlarmClockFriday" data-height="150px" data-width="250px" class="inline top-align">
<div data-type="link">
<div data-type="classchanger"
data-device="par01_Device"
data-get="AlarmTime5_Friday"
data-get-off="off"
data-get-on="(?!off).*"
data-off-class="red"
data-on-class="green"
class="">
<div data-type="label">Fr:</div>
</div>
</div>
<div class="dialog">
<header>Freitag</header>
<div class="top-space">
<div data-type="label" class="large">Wecker deaktivieren?</div>
</div>
<div class="top-space-2x">
<div data-type="link"
data-width="100"
data-border-color="black"
class="large inline"
data-fhem-cmd="set par01_Device AlarmOff 5_Friday"
onclick="$('#popupAlarmClockFriday.dialog-close').trigger('click');">
ja
</div>
<div data-type="link"
data-width="100"
data-border-color="black"
class="large inline"
onclick="$('#popupAlarmClockFriday.dialog-close').trigger('click');">
nein
</div>
</div>
</div>
</div>
</div>
<div data-type="datetimepicker"
data-device='par01_Device'
data-get="AlarmTime5_Friday"
data-set="AlarmTime5_Friday"
data-datepicker="false"
data-format="H:i"
data-step="5"
class="inline cell right-align">
</div>
</div>


<div class="row big">
<div class="cell left-align">
<div data-type="popup" id="popupAlarmClockSaturday" data-height="150px" data-width="250px" class="inline top-align">
<div data-type="link">
<div data-type="classchanger"
data-device="par01_Device"
data-get="AlarmTime6_Saturday"
data-get-off="off"
data-get-on="(?!off).*"
data-off-class="red"
data-on-class="green"
class="">
<div data-type="label">Sa:</div>
</div>
</div>
<div class="dialog">
<header>Samstag</header>
<div class="top-space">
<div data-type="label" class="large">Wecker deaktivieren?</div>
</div>
<div class="top-space-2x">
<div data-type="link"
data-width="100"
data-border-color="black"
class="large inline"
data-fhem-cmd="set par01_Device AlarmOff 6_Saturday"
onclick="$('#popupAlarmClockSaturday.dialog-close').trigger('click');">
ja
</div>
<div data-type="link"
data-width="100"
data-border-color="black"
class="large inline"
onclick="$('#popupAlarmClockSaturday.dialog-close').trigger('click');">
nein
</div>
</div>
</div>
</div>
</div>
<div data-type="datetimepicker"
data-device='par01_Device'
data-get="AlarmTime6_Saturday"
data-set="AlarmTime6_Saturday"
data-datepicker="false"
data-format="H:i"
data-step="5"
class="inline cell right-align">
</div>
</div>

<div class="row big">
<div class="cell left-align">
<div data-type="popup" id="popupAlarmClockSunday" data-height="150px" data-width="250px" class="inline top-align">
<div data-type="link">
<div data-type="classchanger"
data-device="par01_Device"
data-get="AlarmTime7_Sunday"
data-get-off="off"
data-get-on="(?!off).*"
data-off-class="red"
data-on-class="green"
class="">
<div data-type="label">So:</div>
</div>
</div>
<div class="dialog">
<header>Sonntag</header>
<div class="top-space">
<div data-type="label" class="large">Wecker deaktivieren?</div>
</div>
<div class="top-space-2x">
<div data-type="link"
data-width="100"
data-border-color="black"
class="large inline"
data-fhem-cmd="set par01_Device AlarmOff 7_Sunday"
onclick="$('#popupAlarmClockSunday.dialog-close').trigger('click');">
ja
</div>
<div data-type="link"
data-width="100"
data-border-color="black"
class="large inline"
onclick="$('#popupAlarmClockSunday.dialog-close').trigger('click');">
nein
</div>
</div>
</div>
</div>
</div>
<div data-type="datetimepicker"
data-device='par01_Device'
data-get="AlarmTime7_Sunday"
data-set="AlarmTime7_Sunday"
data-datepicker="false"
data-format="H:i"
data-step="5"
class="inline cell right-align">
</div>
</div>


</div>
<div data-type="switch" data-device="par01_Device"
  data-states='["OK", "deactivated"]'
  data-icons='["fa-clock-o", "fa-clock-o"]'
  data-background-colors='["#aa6900", "#505050"]'
  data-set="disable"
  data-set-on="0"
  data-set-off="1"
  class="">
</div>
</div>


Hat jemand eine Idee?

VG, Thomas

[Standarduser]

Geschachtelte Popups führen schon immer zu Problemen.
Soweit ich das erkennen kann nutzt du das zweite Popup dazu, das Abschalten des Weckers nochmal bestätigen zu müssen. Dafür kann man auch gut die Checkbox nutzen. Man muss zwar nichts bestätigen, sieht aber den Zustand auf den ersten Blick. Wird ja auch bei iOS und Android so gemacht und ist in meinen Augen recht elegant.

[ToM_ToM]

Soweit ich das erkennen kann

Ja genau. Ich kann quasi durch Klick/Touch auf den Wochentag, diesen aktivieren oder deaktivieren.
Laut Wiki soll das ja funktionieren wenn man den Popups IDs verpasst. Aber irgendwie will das bei mir nicht so.
Anbei mal ein Screenshot. Hast du noch eine andere Idee als die Checkbox? Gibt's evtl. ein Widget für das alarmclock Modul welches ich nur noch nicht gefunden habe?

VG, Thomas

[Standarduser]

Hast du noch eine andere Idee als die Checkbox?

Nein. Ich hab mir auch schonmal darüber den Kopf zerbrochen, konnte aber letztlich keinen Sinn darin erkennen.

Meist stelle ich den Wecker, wenn ich schon im Bett liege. Da stehe ich bestimmt nicht nochmal auf und stapfe zum Tablet, nur um den Wecker zu stellen. Klingeln kann mein Handy ja auch.

[ToM_ToM]

Nein. Ich hab mir auch schonmal darüber den Kopf zerbrochen, konnte aber letztlich keinen Sinn darin erkennen.

Naja bei mir ist dort kein simples Klingeln hinterlegt. Dafür dient aktuell weiterhin auch mein Handy.
Hinter dieser Weckzeit in FHEM ist z.B. hinterlegt dass das Bad hochheizen soll, mein Licht über dem Bett als Tageslichwecker fungiert und ganz langsam immer heller wird, die Musik im Nebenraum beginnt, zu spielen und auch langsam immer lauter wird...
Da könnte man natürlich noch mehr hinten dran hängen wie "Kaffeemaschine einschalten", "Rolldaden hochfahren", etc...

VG, Thomas

[Standarduser]

Naja bei mir ist dort kein simples Klingeln hinterlegt. Dafür dient aktuell weiterhin auch mein Handy.
Hinter dieser Weckzeit in FHEM ist z.B. hinterlegt dass das Bad hochheizen soll, mein Licht über dem Bett als Tageslichwecker fungiert und ganz langsam immer heller wird, die Musik im Nebenraum beginnt, zu spielen und auch langsam immer lauter wird...
Da könnte man natürlich noch mehr hinten dran hängen wie "Kaffeemaschine einschalten", "Rolldaden hochfahren", etc...

VG, Thomas

Was hast du denn für ein Telefon? Bei einem Androiden kann man meines Wissens nach den Wecker per AMAD auslesen.
Wäre das nicht was? Da sparst du dir das separate Einstellen eines zweiten Weckers.

Bei iOS geht das leider nicht, weil das in der API nicht vorgesehen ist.