Bonjour Mips,
Si je passe par un widget cela va le modifier aussi dans le dashboard, il n’y a pas d’option pour activé le widget pour un design (ou je ne la connais pas).
Je ne suis pas développeur mais quand je vois des codes comme celui ci :
https://codepen.io/pavelvaravko/pen/qjojOr/
-->
<body>
<div class="wrap">
<!--Select with pure css-->
<div class="select">
<select class="select-text" required>
<option value="elem_24h" selected>24 heures</option>
<option value="elem_1ans">1 ans</option>
<option value="elem_2ans">2 ans</option>
</select>
<span class="select-highlight"></span>
<span class="select-bar"></span>
<label class="select-label">Mini/Maxi Temp. Ext. </label>
</div>
<div class="result">Pour cette periode <br/>
le minimal est de <span class="mini">--</span><br/>(<span class="minidate">--</span>) <br/>
le maximal est de <span class="max">--</span><br/>(<span class="maxdate">--</span>) <br/>
et il faisait <span class="lastyear">--</span><br/>
à <span class="lastyeardate">--</span>
</div>
<script>
var stateTemp=825; // Id à définir
var date = new Date();
var d = date.getDate();
var m = date.getMonth() + 1; //Month from 0 to 11
var y = date.getFullYear();
var hh = date.getHours();
var mn = date.getMinutes();
var ss = date.getSeconds();
var d_1 = (date.getDate()-1);
var y_1 = (date.getFullYear()-1);
var y_2 = (date.getFullYear()-2);
var hh_1 = (date.getHours()-1);
var now = (y + '-' + (m<=9 ? '0' + m : m) + '-' + (d <= 9 ? '0' + d : d)+' '+(hh<=9 ? '0' + hh : hh)+':'+(mn<=9 ? '0' + mn : mn)+':'+(ss<=9 ? '0' + ss : ss));
var oneyear = (y_1 + '-' + (m<=9 ? '0' + m : m) + '-' + (d <= 9 ? '0' + d : d)+' '+(hh_1<=9 ? '0' + hh_1 : hh_1)+':'+(mn<=9 ? '0' + mn : mn)+':'+(ss<=9 ? '0' + ss : ss));
var lastday = (y + '-' + (m<=9 ? '0' + m : m) + '-' + (d_1 <= 9 ? '0' + d_1 : d_1)+' '+(hh<=9 ? '0' + hh : hh)+':'+(mn<=9 ? '0' + mn : mn)+':'+(ss<=9 ? '0' + ss : ss));
var twoyear = (y_2 + '-' + (m<=9 ? '0' + m : m) + '-' + (d <= 9 ? '0' + d : d)+' '+(hh_1<=9 ? '0' + hh_1 : hh_1)+':'+(mn<=9 ? '0' + mn : mn)+':'+(ss<=9 ? '0' + ss : ss));
var options = {timeZone: "UTC",hour:"2-digit", minute:"2-digit"};
history(lastday,now);
$("select.select-text").on('change', function () {
var data =($(this).val());
if (data == "elem_24h") {
options = {timeZone: "UTC",hour:"2-digit", minute:"2-digit"};
history(lastday,now);
}
else if (data == "elem_1ans") {
options = {timeZone: "UTC",month: "long", day: "numeric"};
history(oneyear,now);
}
else if (data == "elem_2ans") {
options = {timeZone: "UTC",year:"numeric",month: "long", day: "numeric"};
history(twoyear,now);
}
});
function history(start, end) {
jeedom.history.get ({
cmd_id: stateTemp,
// dateStart:this.lastday,
// dateEnd:this.now,
dateStart:start,
dateEnd:end,
success: function(resulat) {
$('.mini').empty().text(resulat.minValue+" °C");
$('.max').empty().text(resulat.maxValue+" °C");
$('.lastyear').empty().text(resulat.data[0][1]+" °C");
var lastyeardate = new Date(resulat.data[0][0]);
lastyeardate=lastyeardate.toLocaleString('fr-FR',{timeZone: "UTC",hour:"2-digit"});
$('.lastyeardate').empty().text(lastyeardate);
$( resulat.data ).each(function( index ) {
var num = resulat.data[index][1];
if (num == resulat.maxValue) {
// console.log( $( this ).text(resulat.data[index][1]));
var maxdate = new Date(resulat.data[index][0]);
maxdate=maxdate.toLocaleString('fr-FR',options);
$('.maxdate').empty().text(maxdate);
}
if (num == resulat.minValue) {
// console.log( $( this ).text(resulat.data[index][1]));
var minidate = new Date(resulat.data[index][0]);
minidate=minidate.toLocaleString('fr-FR',options);
$('.minidate').empty().text(minidate);
}
});
}
})
}
</script>
<style>
.result {
font-weight: 400;font-size: 12.5px;text-align: center;
}
.mini,.minidate,.max,.maxdate,.lastyear,.lastyeardate {
font-weight: 600;font-size: 15.5px;
}
.wrap {
font-size: 15.5px;
font-family:'Roboto','Helvetica','Arial',sans-serif;
font-weight: 400;
position: absolute;
right: 0;
top: 0%;
width: 100%;
left: 0;
margin: 0 auto;
}
/* select starting stylings ------------------------------*/
.select {
position: relative;
width: 100%;
}
.select-text {
position: relative;
font-family: inherit;
background-color: transparent;
width: 100%;
padding: 2px 2px 2px 0;
font-size: 15px;
border-radius: 0;
border: none;
border-bottom: 1px solid rgba(0,0,0, 0.12);
}
/* Remove focus */
.select-text:focus {
outline: none;
border-bottom: 1px solid rgba(0,0,0, 0);
}
/* Use custom arrow */
.select .select-text {
appearance: none;
-webkit-appearance:none
}
.select:after {
position: absolute;
top: 8px;
right: 10px;
/* Styling the down arrow */
width: 0;
height: 0;
padding: 0;
content: '';
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid rgba(0, 0, 0, 0.12);
pointer-events: none;
}
/* LABEL ======================================= */
.select-label {
color: rgba(0,0,0, 0.26);
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 0;
top: 10px;
transition: 0.2s ease all;
}
/* active state */
.select-text:focus ~ .select-label, .select-text:valid ~ .select-label {
color: #2F80ED;
top: -20px;
transition: 0.2s ease all;
font-size: 14px;
}
/* BOTTOM BARS ================================= */
.select-bar {
position: relative;
display: block;
width: 100%;
}
.select-bar:before, .select-bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #2F80ED;
transition: 0.2s ease all;
}
.select-bar:before {
left: 50%;
}
.select-bar:after {
right: 50%;
}
/* active state */
.select-text:focus ~ .select-bar:before, .select-text:focus ~ .select-bar:after {
width: 50%;
}
/* HIGHLIGHTER ================================== */
.select-highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
</style>
</div>
</body>
qui fonctionne parfaitement bien dans un bloc HTML, permets moi de douter sur le fait que l’on ne peut pas afficher une valeur sans passer par un widget…