Bonjour,
Voici le widget à affecter dans un virtuel à la commande reprenant « Vigilance - Json » du plugin MF.
Dev en cours. Ça sera inclus dans le plugin après debug.
NB: La carte du département n’est pas inclue dans la version actuelle du plugin
Une version de Jeedom supérieure ou égale à 4.2 est nécessaire.
cmd.info.string.Vigilance.html
<div class="cmd cmd-widget #history#" data-type="info" data-subtype="string" data-template="custom" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div>
<div class="dateText"></div>
<table>
<tr style="background-color:transparent !important;">
<td>
<div class="vigilanceMap" style="margin-top: -5px;margin-bottom: -5px"></div>
</td>
<td>
<div class="maxDeptColor"></div>
</td>
</tr>
</table>
<div class="weatherAlerts" style="margin-top: 4px"></div>
<div title="Message" class="errorMessage"></div>
<template>
<div>color : rgb(20,20,20) ({{Couleur de fond}})</div>
<div>fontColor : rgb(20,20,20) ({{Couleur du texte}})</div>
<div>displayDate : 0/1 ({{Affichage du jour}})</div>
<div>displayTime : 0/1 ({{Affichage de l'heure}})</div>
<div>displayMapFr : 0/1 ({{Affichage de la carte de France des vigilances du jour}})</div>
<div>displayDeptLevel : 0/1 ({{Affichage du niveau de vigilance du département}})</div>
<div>displayAlerts : 0/1 ({{Affichage des vigilances}})</div>
</template>
<script>
jeedom.cmd.addUpdateFunction('#id#',function(_options) {
const vigilanceColors = [
["Non défini",'<i class="fa fa-circle" style="color: #888888"></i>'],
["Vert",'<i class="fa fa-circle" style="color: #31AA35"></i>'],
["Jaune",'<i class="fa fa-circle" style="color: #FFF600"></i>'],
["Orange",'<i class="fa fa-circle" style="color: #FFB82B"></i>'],
["Rouge",'<i class="fa fa-circle" style="color: #CC0000"></i>']
];
let cmd = $('.cmd[data-cmd_id=#id#]');
cmd.find('.errorMessage').empty(); // clean previous error
let json = _options.display_value.replaceAll('"','"');
try {
let jsonData = JSON.parse(json);
if(jsonData != null) {
if('#displayMapFr#' != '0') {
cmd.find('.vigilanceMap').empty().append('<img style="width:70px" src="plugins/meteofrance/data/' +jsonData.image +'">');
}
let cd = new Date(jsonData.begin_validity_time);
let dateTime = '';
let dayTxt = cd.toLocaleDateString('fr-FR', {month: 'short', day: 'numeric',weekday: 'short'});
let day = dayTxt.charAt(0).toUpperCase() + dayTxt.slice(1); // ucfirst
if('#displayDate#' != '0') dateTime += day;
let vigilanceIconTitle = day;
let cdEnd = new Date(jsonData.end_validity_time);
if('#displayTime#' != '0') {
if(dateTime.length) dateTime += ' ';
dateTime += cd.toLocaleTimeString('fr-FR', {hour: '2-digit'});
dateTime += ' - ' +cdEnd.toLocaleTimeString('fr-FR', {hour: '2-digit'});
}
else {
vigilanceIconTitle += ' ' +cd.toLocaleTimeString('fr-FR', {hour: '2-digit'});
vigilanceIconTitle += ' - ' +cdEnd.toLocaleTimeString('fr-FR', {hour: '2-digit'});
}
cmd.find('.dateText').empty().append(dateTime);
cmd.find('.vigilanceMap').attr('title', vigilanceIconTitle);
cmd.find('.dateText').attr('title', '{{Date de valeur}} : '+_options.valueDate+'<br/>{{Date de collecte}} : '+_options.collectDate);
if('#displayDeptLevel#' != '0') {
let maxColorTxt = '';
switch(jsonData.dept.max_color_id) {
case 1: maxColorTxt = vigilanceColors[1][1]; break;
case 2: maxColorTxt = vigilanceColors[2][1]; break;
case 3: maxColorTxt = vigilanceColors[3][1]; break;
case 4: maxColorTxt = vigilanceColors[4][1]; break;
default: maxColorTxt = vigilanceColors[0][1]; break;
}
if(jsonData.domain_id_picture == 'none')
cmd.find('.maxDeptColor').empty().append(jsonData.dept.domain_id +" " +maxColorTxt);
else
cmd.find('.maxDeptColor').empty().append('<img style="margin-top:4px;width:50px; height:50px" src="plugins/meteofrance/data/' +jsonData.domain_id_picture +'">');
cmd.find('.maxDeptColor').attr('title', "Vigilance du département: " +jsonData.dept.domain_id);
}
}
// Affichage des vigilances météo
let txtWeatherAlerts = '';
if('#displayAlerts#' != '0') {
const vigilanceType = [
["Vent","wi-strong-wind"],
["Pluie-inondation","wi-rain-wind"],
["Orages","wi-lightning"],
["Crues","wi-flood"],
["Neige-verglas","wi-snow"],
["Canicule","wi-hot"],
["Grand-froid","wi-thermometer-exterior"],
["Avalanches","wi-na"],
["Vagues-submersion","wi-tsunami"],
["Incendie","wi-fire"]
];
for(i=0;i<jsonData.dept.phenomenon_items.length;i++) {
phenom = jsonData.dept.phenomenon_items[i];
couleur = phenom.phenomenon_max_color_id;
if(couleur > 1) { // exclude green
id = phenom.phenomenon_id;
txtWeatherAlerts += vigilanceType[parseInt(id)-1][0] +': ' +vigilanceColors[couleur][1] +'<br>';
}
}
if(typeof jsonData.littoral !== "undefined") {
for(i=0;i<jsonData.littoral.phenomenon_items.length;i++) {
phenom = jsonData.littoral.phenomenon_items[i];
couleur = phenom.phenomenon_max_color_id;
if(couleur > 1) { // exclude green
id = phenom.phenomenon_id;
txtWeatherAlerts += vigilanceType[parseInt(id)-1][0] +': ' +vigilanceColors[couleur][1] +'<br>';
}
}
}
}
// alert(txtWeatherAlerts);
cmd.find('.weatherAlerts').empty().append(txtWeatherAlerts);
// Couleur de fond du widget
if ($.issetWidgetOptParam('#color#', 'color')) {
cmd.style('background-color', '#color#', 'important')
}
// Couleur de la police du widget
if ($.issetWidgetOptParam('#fontColor#', 'fontColor')) {
cmd.style('color', '#fontColor#', 'important')
}
}
catch(err) {
cmd.find('.errorMessage').empty().append('<strong>JSON data:' +json.substr(0,30) +'...</strong><br>' +err.message);
}
});
jeedom.cmd.refreshValue([{cmd_id :'#id#',display_value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#', alertLevel: '#alertLevel#', unit: '#unite#'}])
</script>
</div>
