Reveil sous jeedom par virtuel et widget

[Phpvarious]

Bon, il y a bien 2/3 petites erreurs, mais rien qui n’a l’air d’empêcher le widget de fonctionner.
Je te propose de tester ce widget :

Code

<div class="cmd cmd-widget" data-type="action" data-subtype="slider" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
  <!--
Base du widget récuperé sur le community :
https://community.jeedom.com/t/reveil-sous-jeedom-par-virtuel-et-widget/84693
ChangeLog :
2022-05-22 - @Phpvarious : 
- Modification/adaptation V4.
- Ajout paramètres optionnels.

-->
  <template>
    <div>checkBoxStyle : Effet sur la checkbox. (Ex: 1 | Défaut : 0)</div>
    <div>checkBoxColor : Couleur contour de la checkBox. (Ex: red, #ffffff | Défaut : #C3C3C3)</div>
    <div>checkBoxBackground : Couleur de fond de la checkBox. (Ex: red, #ffffff | Défaut : transparent)</div>
    <div>checkBoxRadius : défini les coins arrondis (Ex : 5 | Défaut : 0)</div>
    <div>checkColor : Couleur "V" de la checkbox. (Ex: red, #ffffff | Défaut : #C3C3C3)</div>
    <div>marginBottom : Espace entre les checkbox. (Ex: 10 | Défaut : 17)</div>
  </template>
  <div class="widgetCheckBox#id#">
    <div class="displayDay#id#">#valueName#</div>
    <span class="customcheckbox#id#">
      <input class="Toggle#uid#" type="checkbox" id="ccb0#uid#" />
      <label for="ccb0#uid#"></label>
    </span>
  </div>
  <style>
    :root {
      --size#id#: 17px;
      --checkboxcolor#id#: #C3C3C3;
      --checkboxBackground#id#: transparent;
      --checkBoxRadius#id#: 0px;
      --checkcolor#id#: #C3C3C3;
      --marginBottom#id#: 17px;
      --height#id#: 0.375;
      --width#id#: 0.5625;
      --left#id#: 0.22;
      --top#id#: 0.2;
    }
    .widgetCheckBox#id# {
       /* height: 30px;*/
      margin-bottom: var(--marginBottom#id#);
    }
    .displayDay#id# {
      display: inline-block;
      width: 100px;
      line-height: 15px;
      font-size: 15px;
      font-weight: bold;
      text-align: right;
      padding-right: 10px;
    }
    .customcheckbox#id# {
      width: 40px;
      position: relative;
    }
    .customcheckbox#id# input[type="checkbox"] {
      visibility: hidden;
    }
    .customcheckbox#id# label {
      position:absolute;
      top:0;
      left:0;
      cursor:pointer;
    }
    .customcheckbox#id# label::before, .customcheckbox#id# label::after {
      content: "";
      display:inline-block;
      position:absolute;
    }
    .customcheckbox#id# label::before {
      height:var(--size#id#);
      width:var(--size#id#);
      background-color: var(--checkboxBackground#id#);
      border-radius : var(--checkBoxRadius#id#);
    }
    .customcheckbox#id# label::after {
      height:calc(var(--size#id#) * var(--height#id#));
      width:calc(var(--size#id#) * var(--width#id#));
      border-left:3px solid var(--checkcolor#id#);
      border-bottom:2px solid var(--checkcolor#id#);
      transform: rotate(-45deg);
      left:calc(var(--size#id#) * var(--left#id#));
      top:calc(var(--size#id#) * var(--top#id#));
    }
    .customcheckbox#id# input[type="checkbox"] + label::after {
      content:none;
    }
    .customcheckbox#id# input[type="checkbox"]:checked + label::after {
      content:"";
    }
    .customcheckbox#id# input[type="checkbox"] + label::before {
  border:2px solid var(--checkboxcolor#id#);
}
  </style>
  <script>
    jeedom.cmd.update['#id#'] = function(_options){
      if ($.issetWidgetOptParam('#checkBoxStyle#', 'checkBoxStyle') && !isNaN('#checkBoxStyle#')) {
        if ('#checkBoxStyle#' == 1) {
        document.documentElement.style.setProperty('--width#id#', 1.2)
        document.documentElement.style.setProperty('--left#id#', 0.1)
        document.documentElement.style.setProperty('--top#id#', 0)
        }
      }
      if ($.issetWidgetOptParam('#marginBottom#', 'marginBottom')) {
        document.documentElement.style.setProperty('--marginBottom#id#', '#marginBottom#'+'px')
      }
      if ($.issetWidgetOptParam('#checkBoxColor#', 'checkBoxColor')) {
        document.documentElement.style.setProperty('--checkboxcolor#id#', '#checkBoxColor#')
      }
      if ($.issetWidgetOptParam('#checkBoxBackground#', 'checkBoxBackground')) {
        document.documentElement.style.setProperty('--checkboxBackground#id#', '#checkBoxBackground#')
      }
      if ($.issetWidgetOptParam('#borderRadius#', 'checkBoxRadius') && !isNaN('#checkBoxRadius#')) {
        document.documentElement.style.setProperty('--checkBoxRadius#id#', '#checkBoxRadius#'+'px')
      }
      if ($.issetWidgetOptParam('#checkColor#', 'checkColor')) {
        document.documentElement.style.setProperty('--checkcolor#id#', '#checkColor#')
      }
      
      if (_options.display_value == '0' || _options.display_value == 0 || _options.display_value == '') {
         $('.Toggle#uid#').prop('checked', false);
      } else {
        $('.Toggle#uid#').prop('checked', true);
      }
      /*
      if (_options.display_value >= '1' || _options.display_value >= 1) {
         $('.Toggle#uid#').prop('checked', false);
      } else {
        $('.Toggle#uid#').prop('checked', true);
      }*/
    }
    jeedom.cmd.update['#id#']({
      display_value: '#state#',
      valueDate: '#valueDate#',
      collectDate: '#collectDate#',
      alertLevel: '#alertLevel#'
    });
    $('.Toggle#uid#').on('click', function() {
      if ( $('.Toggle#uid#').is( ":checked" ) ){
        jeedom.cmd.execute({id: '#id#', value: {slider: 1}});
      } else {
        jeedom.cmd.execute({id: '#id#', value: {slider: 0}});
      }
    });
  </script>
</div>

Détails

Je te conseil dans un premier temps de tester le widget sans aucun paramètre, ensuite si il n’y a pas de soucis, tu pourras jouer avec les paramètres optionnels :

Exemple pour le Lundi :

Edit :

Widget dispo sur mon Github :
https://phpvarious.github.io/documentation/widget/fr_FR/action/slider/cmd.action.slider.Widget_Checkbox1/