Bonjour,
J’ai mis à jour le widget pour l’utiliser sur un équipement du plugin « mode ». En effet je voulais utiliser ce module, parce que le slider c’est un numérique, et tester un chiffre dans mes scénarios pour savoir quel mode est activé ce n’était pas la meilleure idée…
Donc, plugin « mode », on crée un équipement, on crée tous les modes qu’on veut… Et on applique ce widget sur la commande « info » de l’équipement:
<div class="cmd cmd-widget #history#" data-type="info" data-subtype="string" data-template="default" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<fieldset><legend style="font-weight:bold;font-size:12px;visibility:#hide_name#">#name_display#</legend>
<div class="classSwitch6Ways#uid#">loading...</div>
</fieldset>
<template>
<p>Appliquer ce widget sur un équipement du plugin mode. Masquer les commandes, ne laisser visible que celle d'info.</p>
</template>
<script>
// string.format: '{0} {{0}} {{{0}}} {1} {2}'.format(3.14, 'a{2}bc', 'foo');
// result: 3.14 {0} {3.14} a{2}bc foo
String.prototype.format = function () {
var args = arguments;
return this.replace(/\{\{|\}\}|\{(\d+)\}/g, function (m, n) {
if (m == "{{") { return "{"; }
if (m == "}}") { return "}"; }
return args[n];
});
};
utils = {}
// rechercher l'id de la commande selon la classe...
utils.searchIdByClass = function(classes, obj){
for(const p in obj){
if(classes.includes(obj[p].color)) return p;
}
return "";
}
// cmds contient id et color de chaque commande:
var cmds#uid# = {}
// affichage de la valeur sélectionnée + date collecte + date valeur
jeedom.cmd.update['#id#'] = function(_options) {
// clean selected class
$(".classSwitch6Ways#uid# label").removeClass("ui-checkboxradio-checked");
var cmd = $('.cmd[data-cmd_id=#id#]');
cmd.attr('title', '{{Date de valeur}} : '+_options.valueDate+'<br/>{{Date de collecte}} : '+_options.collectDate);
cleanText = _options.value.replace(/<\/?[^>]+(>|$)/g, ""); // remove html tags
if(cleanText == ''){
cleanText = _options.value.replace(/<i class="([^"]+)".*/g, "$1"); // class de l'option dans balise <i>
cleanText = utils.searchIdByClass(cleanText.split(' '), cmds#uid#);
}
// ajouter la classe sur le label
$("#label" + cmds#uid#[cleanText].id).addClass("ui-checkboxradio-checked");
}
console.log('commande #name# état #state# le #valueDate# (collecte #collectDate#) (uid=#uid#)');
// récupérer l'objet (eqLogic) concerné - 1er traitement asynchrone
jeedom.eqLogic.byId({id: '#eqLogic_id#',
success: function(result){
// enregistrer toutes les commandes (les modes) et les couleurs
result.configuration.modes.forEach(mode => cmds#uid#[mode.name] = {id: 0, color: mode.modecolor});
// rechercher toutes les commandes de l'objet - 2e traitement asynchrone
jeedom.eqLogic.getCmd({id: '#eqLogic_id#',
success: function(result){
var index = 0;
// vider le div 'loading...'
$(".classSwitch6Ways#uid#").empty();
// template à appliquer sur chaque commande
var html = '<input type="radio" name="key{0}" id="key{1}{0}" value="{3}"/><label id="label{1}{0}" for="key{1}{0}">{2}</label>';
result.forEach(cmd => {
// filtrer les commandes qui ne sont pas des modes du plugin mode
if(cmds#uid#[cmd.logicalId] != undefined){
// enregistrer l'id de l'input de chaque commande
cmds#uid#[cmd.logicalId].id = '{1}{0}'.format('#uid#', index);
// utiliser le nom ou l'icône de la commande
var label = cmd.display.icon ? cmd.display.icon : cmd.logicalId;
// ajouter le template html dans le div
$(".classSwitch6Ways#uid#").append( $.parseHTML(html.format('#uid#', index, label, cmd.id)));
// ajouter la classe couleur sur le label
$('#label{1}{0} > i'.format('#uid#', index)).addClass(cmds#uid#[cmd.logicalId].color);
// on click: execute jeedom command
$('#key{1}{0}'.format('#uid#', index)).on('click', function(){
jeedom.cmd.execute({id: cmd.id});
});
index+=1;
}})
// remove radio button
$( ".classSwitch6Ways#uid# input" ).checkboxradio({icon: false});
// mode horizontal
$('.classSwitch6Ways#uid# label').css('display','inline');
// update widget avec la valeur courante
jeedom.cmd.update['#id#']({display_value: '#state#', value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#', alertLevel: '#alertLevel#'})
},
error: function(x, status, error){
console.log('Error calling #eqLogic_id# commands {0} {1}'.format(status, error))
}
});
}
});
</script>
<style>
.classSwitch6Ways#uid# {
margin:5px 5px 5px 5px;
padding: 0px;
color:#D0D0D0;
border:solid 1px #5B5B5B;
font-size:1em;
font-weight:bold;
line-height:2em;
border-radius:0.3em;
background:grey;
position:relative;
display:block;
box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.75) inset,0px 2px 2px 0px rgba(255, 255, 255, 0.5);
}
.classSwitch6Ways#uid# label {
cursor:pointer;
position:relative;
display:block;
-webkit-transition: 300ms ease-out;
-moz-transition: 300ms ease-out;
transition: 300ms ease-out;
padding: 0 1em;
border:none;
}
.classSwitch6Ways#uid# .ui-checkboxradio-checked {
border:solid 0.5px red!important;
color:red;
text-shadow: 1px 1px 3px #000;
}
</style>
</div>
Le code est assez long et complexe, je l’ai abondamment commenté et si vous avez des améliorations / optimisations je suis preneur 
Je rajouterais un paramètre pour le passer en mode vertical, voici le rendu pour le mode horizontal qui récupère les icones paramétrés dans chaque commande du plugin, j’ai masqué toutes les autres commandes pour ne laisser que la commande « info » (qui est pour le coup aussi une commande):
il est en vertical; à voir si ça intéresse qq1 de le mettre horizontal?
…)