Widget Liste déroulante

Salon des Développeurs Aide Programmation
1

Bonjour à tous,
Le plugin Livebox possède plusieurs commandes (type info subtype string) qui produisent des tableaux (liste des appels et dans le future liste des équipements connectés qui est pour le moment une simple liste séparée par des virgules mais c’est très moche si on a beaucoup d’équipements
Un utilisateur a proposé le widget suivant avec un ascenseur pour que ces tableaux prennent moins de place sur le Dashboard.

<div style="padding:5px; min-width:30px; min-height:30px;" class="cmd #history# container-fluid tooltips cmd-widget" data-type="info" data-version="#version#" data-eqLogic_id="#eqLogic_id#" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#">
	<center>
      <span class="cmdName #hide_name#">#name_display# </span>
      <div class="cmdInfo#uid#">#state# #unite#</div>
	</center>
  <style>
    div.cmdInfo#uid# {
		overflow-y:scroll;
      	border:#000000 1px solid;
      	font-size : 14px;
      	width:450px;
      	min-height:15px;
      	max-height:150px;
      	font-size:12px;
      	font-weight: bold;
      	word-wrap: break-word;
      	text-align: left
    }
  </style>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
			$('.cmdInfo#uid#').html(_options.display_value);
			$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

Je ne suis pas fort du tout en widgets donc je m’adresse aux gourous de ce domaine

  • Voyez-vous comment l’améliorer
  • en particulier comment faire pour que dans les paramètres optionnels l’utilisateur puisse configurer la largeur, la hauteur min, …

Merci de votre aide.
Jean-Michel
PS : j’ai aussi inclus dans le plugin Livebox un Widget « duree » pour transformer une durée en seconde en nombre de jours, heures, minutes, secondes. A mon avis un tel widget serait très utile dans d’autres plugins.

2

Bonjour @vedrine,

Je t’ai fait un petit bout de code pour optimiser tout ça et inclure les paramètres optionnels que tu souhaites:

<div style="padding:5px; min-width:30px; min-height:30px;" class="cmd #history# container-fluid tooltips cmd-widget" data-type="info" data-subtype="string" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
	<center>
      <div class="title #hide_name#">
		<div class="cmdName">#name_display#</div>
		</div>
      <div class="cmdInfo"></div>
	</center>
  <style>
    div.cmdInfo {
		overflow-y:scroll;
      	border:#000000 1px solid;
      	font-size : 14px;
      	max-height:150px;
      	font-size:12px;
      	font-weight: bold;
      	word-wrap: break-word;
      	text-align: left
    }
  </style>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
		var cmd = $('.cmd[data-cmd_id=#id#]')
		var valueH = is_numeric('#hauteurMin#') ? parseFloat('#hauteurMin#'):15;
		var valueL = is_numeric('#largeur#') ? parseFloat('#largeur#'):450;
			cmd.find('.cmdInfo').html(_options.display_value).css({"width":valueL+'px',"min-height":valueH+'px'});
			cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate);
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#'});
	</script>
</div>
  • 2 paramètres optionnels: largeur et hauteurMin qui attendent tous 2 un chffre en valeur.

Je te laisse tester…

EDIT: j’ai laissé le balise <center></center> au début pour être sûr que l’affichage soit OK en V3 mais c’est inutile en V4.

3

Merci @Salvialf et meilleurs vœux pour 2020.