Bonsoir,
J’ai crée ce widget pour gérer mes actions de type list.
Tu peux essayer si cela te convient.
- Créer un Virtuel selon exemple suivant :
(la commande ModeLabel est optionnelle)
- En utilisant l’exlorateur de fichier de Jeedom, créer un fichier avec le chemin :
html/data/customTemplates/dashboard/cmd.action.select.ListSelect.html
- Copier / Coller le contenu du fichier avec le code suivant :
<div class="cmd cmd-widget reportModeHidden #history#" data-type="action" data-subtype="select" data-version="#version#" data-eqLogic_id="#eqLogic_id#" data-eqLogic_uid="#uid#" data-cmd_id="#id#" data-cmd_uid="#uid#">
<!-- file: /var/www/html/data/customTemplates/dashboard/cmd.action.select.ListSelect.html -->
<!-- @Eridani78 2022 06 03 -->
<!-- Mode Set list : 0|Awake;1|Asleep; -->
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div>
<div class="value">
<span class="timeCmd#uid# timeCmd label label-default value"></span>
</div>
<div class="mainContainer#uid#">
<div class="row1">
<div id="selectedMode"></div>
<div id="coloredStrip"></div>
</div>
<div class="colA colA1">
<div class="rowA" id="indexindexValue">
<div class="colB1">
<div class="LEDIndicator"></div>
</div>
<div class="colB2"></div>
<div class="colB3"></div>
</div>
</div>
<div class="freeSpace"></div>
</div>
<script>
jeedom.cmd.update['#id#'] = function(_options){
let cmd = $('.cmd[data-cmd_id=#id#]');
if('#_time_widget_#' == '1'){
jeedom.cmd.displayDuration(_options.valueDate, cmd.find('.timeCmd'));
}else{
cmd.find('.timeCmd').parent().remove();
}
cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate+'<br/>Valeur : '+_options.display_value+'#unite#');
switch('#Theme#') {
case('light'):
var imgTheme = "light";
break;
case('dark'):
var imgTheme = "dark";
break;
default:
var imgTheme = "light";
}
// Screen resolution
var screenWidth = screen.width;
var screenHeight = screen.height;
// Processing
$(".mainContainer#uid#").find(".colA1").empty();
// Widget value or string value
let inputValue = _options.display_value;
let modeValue = inputValue;
var inputString = '#listValue#'.toString(); // Do not use "#xxx#", use '#xxx#'
const regex1 = /(<option value=(?:.*?)>(?:.*?)<\/option>)/g;
var listArray = inputString.match(regex1);
var listLength = listArray.length-1; // [0]="Aucun", [1]="Option1", [2]="Option2", ..., [3]="", [?]=undefined
var optionArray = new Array();
var optionValue = new Array();
var optionSelected = new Array();
var optionText = new Array();
for (let i = 0; i < listLength; i++) {
let indexValue = i.toString();
const regex2 = /<option value="(.*)"(?:\s*)(.*)>(.*)<\/option>/ig;
optionArray[i] = regex2.exec(listArray[i]); // [0]=Full string
optionValue[i] = optionArray[i][1]; // [1]=Option Value
optionSelected[i] = optionArray[i][2]; // [2]='' or selected
optionText[i] = optionArray[i][3]; // [3]=Option Text
let divrowAa = '<div class="rowA" id="index';
let divrowAb = '"><div class="colB1"><div class="LEDIndicator"></div></div><div class="colB2">';
let divrowAc = '</div><div class="colB3">';
let divrowAd = '</div></div>';
let divrowA = divrowAa+indexValue+divrowAb+optionValue[i]+divrowAc+optionText[i]+divrowAd;
let optionInt = parseInt(optionValue[i], 10);
let selectedColor = "White";
$('.mainContainer#uid#').find('.colA1').append(divrowA);
if (optionValue[i] == modeValue) {
$('.mainContainer#uid#').find('#index'+indexValue).find('.colB1').find('.LEDIndicator').css('background-color','#00fe00');
$('.mainContainer#uid#').find('#coloredStrip').css('background-color', selectedColor);
$('.mainContainer#uid#').find('#selectedMode').css('border', '1px solid '+selectedColor);
$('.mainContainer#uid#').find('#selectedMode').empty().append(optionText[i]);
}
}
}
// Click handling - Set value
$('.mainContainer#uid#').on( 'click', '.rowA', onclickAction );
function onclickAction( event ) {
jeedom.cmd.execute({id: '#id#', value: {select: $(this).find('.colB2').html()}});
}
// Widget update
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
// Theme change
$('body').on('changeThemeEvent', function (event, theme) {
$('.cmd[data-cmd_id=#id#]').trigger('changeThemeEventCmd',theme);
});
</script>
<style>
@media (hover: hover) {
.mainContainer#uid# .colB3:hover {
background-color: Grey;
font-size: 1.2em;
}
}
.mainContainer#uid# {
background-color: var(--form-bg-color) !important;
min-width : max-content;
display: grid;
grid-template-columns: repeat(1,1fr);
grid-template-rows: auto auto auto;
grid-template-areas:
"row1"
"colA1"
"freeSpace";
grid-column-gap: 0px;
grid-row-gap: 6px;
position: relative;
}
.mainContainer#uid# .row1 {
background-color: var(--form-bg-color);
grid-area: row1;
height: 24px;
border-radius: 5px;
display: grid;
align-content: center; /* ^v start, center or end */
justify-content: center; /* <-> start, center or end */
position: relative;
z-index: 1;
}
.mainContainer#uid# #selectedMode {
background-color: var(--form-bg-color) !important;
width: 180px;
height: 20px;
font-size: 1.3em;
font-weight: 500;
color: inherit;
border-radius: 10px;
display: grid;
align-content: center; /* ^v start, center or end */
justify-content: center; /* <-> start, center or end */
position: relative;
z-index: 2;
}
.mainContainer#uid# #coloredStrip {
width: 100%;
height: 4px;
border-radius: 5px;
align-self: center; /* ^v start, center or end */
justify-self: center; /* <-> start, center or end */
position: absolute;
z-index: 1;
}
.mainContainer#uid# .colA {
display: grid;
grid-auto-rows: 24px;
grid-row-gap: 6px;
position: relative;
}
.mainContainer#uid# .rowA {
background-color : transparent;
font-size: inherit;
font-weight: inherit;
color: inherit;
display: grid;
grid-template-columns: 12px 24px 1fr;
column-gap: 6px;
position: relative;
}
.mainContainer#uid# .colB1 {
display: grid;
align-content: center;
justify-content: right;
border-radius: 5px;
}
.mainContainer#uid# .colB2 {
display: grid;
align-content: center;
justify-content: center;
background-color : Grey;
border-radius: 5px;
}
.mainContainer#uid# .colB3 {
display: grid;
align-content: center;
justify-content: left;
padding-left: 10px;
padding-right: 20px;
background-color: rgba(80, 80, 80, 0.4);
border-radius: 5px;
color: var(--link-color) !important;
}
.mainContainer#uid# .LEDIndicator {
width: 6px;
height: 20px;
border: 1px solid Grey;
border-radius: 5px;
}
.mainContainer#uid# .freeSpace {
grid-area: freeSpace;
height: 6px;
}
</style>
- Affecter le widget créé a la commande Mode Set
Le nombre d’éléments de la liste n’est pas limité par le widget.
Je te laisse adapter le code pour le visuel selon ton usage.
Enjoy
EDIT 2022 0603
Code mis a jour pour tenir compte de la remarque constructive de @Phpvarious
Merci a lui.