jeedom_widget_v4/commandIconAndValueIcon/cmd.info.binary.commandIconAndValueIcon.html at master · Heliospeed/jeedom_widget_v4 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<div class="cmd cmd-widget #history#" data-type="info" data-subtype="binary" data-template="tmplicon" data-cmd_id="#id#"
  data-cmd_uid="#uid#" data-version="#version#">
  <!--
	  Name: cmd.info.binary.commandIconAndValueIcon.html
    Jeedom Compatibility: v4.4.5
    Version 2.0.0 - 2024-05-01
  -->
  <div class="title #hide_name#">
    <div class="cmdName">#name_display#</div>
  </div>
  <div class="content">
    <span class="iconCmd"></span>
  </div>
  <div class="state">
    <span class="value"></span>
  </div>
  <div class="timeCmd label label-default #history#" data-type="info"></div>
  <template>
    <div>time : duration|date ({{Affiche durée ou date de la valeur}})</div>
    <div>timeMobileOff : 0|1 ({{Masque la durée ou la date pour l'affichage mobile}})</div>
    <div>iconOn : balise i à afficher ({{par défaut &lt;i class="fas fa-circle"&gt;&lt;/i&gt;}})</div>
    <div>iconOff : balise i à afficher ({{par défaut &lt;i class="far fa-circle"&gt;&lt;/i&gt;}})</div>
    <div>iconColor : nom ou code couleur</div>
  </template>
  <script>
    jeedom.cmd.addUpdateFunction('#id#', function (_options) {
      if (is_object(cmd = document.querySelector('.cmd[data-cmd_uid="#uid#"]'))) {
        cmd.querySelector('.content').setAttribute('title', '{{Date de valeur}}: ' + _options.valueDate + '<br>{{Date de collecte}}: ' + _options.collectDate)
        if ('#_time_widget_#' == '1' || '#time#' == 'duration' || '#time#' == 'date') {
          jeedom.cmd.displayDuration(_options.valueDate, cmd.querySelector('.timeCmd'), '#time#')
        }

        var iconOn = (`#iconOn#` != `#` + `iconOn#`) ? `#iconOn#` : `<i class="fas fa-circle"></i>`;
        var iconOff = (`#iconOff#` != `#` + `iconOff#`) ? `#iconOff#` : `<i class="far fa-circle"></i>`;
        var iconColor = (`#iconColor#` != `#` + `iconColor#`) ? `#iconColor#` : ``;
        var timeMobileOff = (`#timeMobileOff#` != `#` + `timeMobileOff#`) ? `#timeMobileOff#` : `0`;

        if ('#version#' === 'mobile') {
          if (timeMobileOff === '1' || timeMobileOff === 'true') {
            cmd.querySelector('.timeCmd').innerHTML = '';
            cmd.querySelector('.timeCmd').classList.remove('timeCmd');
          }
        }

        // Récupération de l'icone de la commande
        var tagIconName = '';
        var icon = cmd.querySelector('.title div.cmdName i');
        if (icon !== null) {
          tagIconName = document.createElement('i');
          tagIconName.className = icon.className;
          tagIconName.style.cssText += "font-size: 30px !important";
          if (iconColor.length > 0) {
            tagIconName.style.color = iconColor;
          }
        }

        // Récupération du nom de la commande
        var cmdName = '';
        var divName = cmd.querySelector('.title div.cmdName');
        if (divName !== null) {
          cmdName = divName.innerText;
        }

        if (tagIconName.length !== 0) {
          divIcon = document.createElement('div');
          divIcon.style.paddingTop = "10px";
          divIcon.appendChild(tagIconName);
          divName.innerHTML = '';
          divName.append(cmdName);
          divName.append(divIcon);
        }

        var iconState = cmd.querySelector('.iconCmd');
        iconState.style.cssText += "font-size: 12px !important";
        iconState.parentElement.style.minHeight = "12px";
        iconState.parentElement.style.paddingBottom = "5px";
        iconState.parentElement.style.paddingTop = "10px";
        if (_options.display_value == 1) {
          iconState.innerHTML = iconOn
        } else if (_options.display_value == 0) {
          iconState.innerHTML = iconOff
        } else {
          cmd.querySelector('.value').innerHTML = '<span class="label label-danger">' + _options.value + '</span>'
        }

        if (_options.alertLevel == 'warning') {
          cmd.querySelector('.value').innerHTML = '<span class="label label-warning"><i class="fas fa-bell"></i> ' + _options.value + '</span>'
        } else if (_options.alertLevel == 'danger') {
          cmd.querySelector('.value').innerHTML = '<span class="label label-danger"><i class="fas fa-exclamation"></i> ' + _options.value + '</span>'
        }
        iconState.querySelector('i').style.cssText += "font-size: 12px !important";
      }
    })

    jeedom.cmd.refreshValue([{ cmd_id: '#id#', value: '#value#', display_value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#', alertLevel: '#alertLevel#', unit: '#unite#' }])
  </script>
</div>