Salut
Le plugin ici est nickel maisle widget ne me convient pas et ne va pas sur mon design.
Je suis donc en train d’essayer de développer le widget mais j’aimerais savoir si je peux réutiliser une fonction de la class pour récupérer les x prochains évennements?
Voici mon objectif :
Merci d’avance?
Bonjour à tous
Bon du coup, je me suis pas mal document et j’ai fait un « widget » qui convient pratiquement à ce que je voulais.
Je l’ai mis sur mon design via le plugin html display. Bon je vais le faire évoluer un peu car j’aimerais que les heures changes due couleur lorsque l’on approche de l’échéance.
Par contre pour le moment, il ne se met pas à jour automatiquement. Je sais qu’avec les widgets, il faut utiliser la commande javascript :
jeedom.cmd.update['#id#']
Mais je ne sais pas quel id mettre. Sur d’autre widget, pas de souci, il suffit de mettre le numéro de la commande info. J’ai tenté de mettre laid de l’équipement mais cela ne fonctionne pas.
Comment rafraîchir l’équipement html toutes les minutes?
Voici le code :
<div id="calendrier">
</div>
<script>
//Paramètres passé au widget
var nbreJours = ('#nbreJours#' != '#' + 'nbreJours#') ? "#nbreJours#" : 7;
var events = null;
//Fonction Ajax permettant de récupérer les données du calendrier
function RecupererEvents () {
$.ajax({// fonction permettant de faire de l'ajax
type: "POST", // methode de transmission des données au fichier php
url: "plugins/ics/core/ajax/ics.ajax.php", // url du fichier php
global:false,
data: {
action: "getEvents",
eqLogic_id: 292,
type:"local",
eqFile: true
},
error: function() {
console.log("Alert");
},
success: function(events) {
calendarCreate (events);
}
});
}
function calendarCreate(events){
var tab_jour=new Array("Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi");
var date = new Date();
var dayName = null;
var eventsFilter = null;
for (let day = 0; day < 7; day++) {
switch (day){
case 0 :
dayName = "Aujourd'hui";
break;
case 1 :
dayName = "Demain";
break;
default :
dayName = tab_jour[date.getDay()];
}
eventsFilter = events.filter(event => event.start.substring(0,10) === date.toISOString().substring(0,10));
eventsFilter.length == 0 ? null : createCardBlock(dayName, eventsFilter) ;
date.setDate(date.getDate()+1);
}
}
function createCardBlock(dayName, events){
let cardBlock = $('<div>').addClass("card").appendTo(calendrier);
$('<div>').addClass("dayBlock").text(dayName).appendTo(cardBlock);
let eventBlock = $('<div>').addClass("eventBlock").appendTo(cardBlock);
events.forEach(function(eventDetail){
let event = $('<div>').addClass("event").text(eventDetail.title).appendTo(eventBlock);
$('<div>').addClass("eventHour").text(eventDetail.start.substring(11,16)).appendTo(event);
});
}
jeedom.cmd.update['#id#'] = function(_options){
var calendrier = document.getElementById("calendrier");
RecupererEvents();
}
//setInterval(RecupererEvents(), 30000);
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
<style>
div.bandeau {
display: block;
font-size: 12px;
border-width: 1px;
border-style: solid;
border-color: red;
}
.card{
width: 245px;
min-height : 50px;
position: relative;
background-color: rgba(0,0,0,0.45);
border-radius: 10px;
padding: 2px;
background-size: cover;
background-repeat: no-repeat;
display : flex;
margin-bottom : 12px;
}
.dayBlock {
margin-top : 12px;
opacity: 1;
flex-basis : 35%;
color : white;
font-size: 15px;
text-decoration: underline;
text-align: center;
}
.eventBlock{
margin-top : 5px;
margin-bottom : 5px;
flex-basis : 65%;
color : white;
text-align: left;
}
.event{
margin-bottom : 15px;
margin-top : 5px;
padding-top : 2px;
padding-left : 5px;
border-left : solid;
border-color : #9b59b6;
color : white;
text-align: left;
font-size: 12px;
}
.eventHour{
padding-top : 5px;
padding-left : 10px;
font-size: 12px;
}
</style>
Fred
Bonjour
Je me réponds à moi même, j’ai mis un
setInterval (RecupererEvents , 30000);
J’ai rajouté une fonction qui ajoute une animation lorsque l’on est à moins de 2 heures de l’échéance.
Je suis satisfait de mon widget pour une première.
Je vous ferai quelques screenshot lorsque j’aurais terminé mon design.
Bonjour, merci pour le widget, je suis bien curieux de voir le résultat final. Merci du partage en tout cas.
Jpjobe
Voici le code final que j’ai mis dans un html display.
C’est surement perfectible mais la semaine dernière, je ne savais pas faire du javascript et assez peu de html et css.
<div id="calendrier">
</div>
<script>
//Paramètres passé au widget
var nbreJours = ('#nbreJours#' != '#' + 'nbreJours#') ? "#nbreJours#" : 7;
var events = null;
var calendrier = document.getElementById("calendrier");
function hourFormat(date) {
//Formatte l'heure et ajoute des 0 si les minutes sont inférieures à 10
let h = date.getHours();
let m = date.getMinutes();
let hourFormat = null;
m<10 ? hourFormat = h +":0" +m : hourFormat = h +":" +m ;
return hourFormat
}
//Fonction Ajax permettant de récupérer les données du calendrier
function WidgetCreate () {
while (calendrier.firstChild) {
calendrier.removeChild(calendrier.firstChild);
}
$.ajax({// fonction permettant de faire de l'ajax
type: "POST", // methode de transmission des données au fichier php
url: "plugins/ics/core/ajax/ics.ajax.php", // url du fichier php
global:false,
data: {
action: "getEvents",
eqLogic_id: 292,
type:"local",
eqFile: true
},
error: function() {
console.log("Alert");
},
success: function(events) {
events.forEach(event => event.start = new Date(event.start.replace(" " , "T")));
events.forEach(event => event.end = new Date(event.end.replace(" " , "T")));
events = events.filter(event => event.end > new Date());
calendarCreate (events);
}
});
}
function calendarCreate(events){
var tab_jour=new Array("Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi");
var date = new Date();
var dayName = null;
var eventsFilter = null;
for (let day = 0; day < 7; day++) {
switch (day){
case 0 :
dayName = "Aujourd'hui";
break;
case 1 :
dayName = "Demain";
break;
default :
dayName = tab_jour[date.getDay()];
}
eventsFilter = events.filter(event => event.start.getDate() === date.getDate());
eventsFilter.length == 0 ? null : createCardBlock(dayName, eventsFilter) ;
date.setDate(date.getDate()+1);
}
}
function createCardBlock(dayName, events){
let cardBlock = $('<div>').addClass("card").appendTo(calendrier);
$('<div>').addClass("dayBlock").text(dayName).appendTo(cardBlock);
let eventBlock = $('<div>').addClass("eventBlock").appendTo(cardBlock);
events.forEach(function(eventDetail){
let event = $('<div>').addClass("event").text(eventDetail.title).appendTo(eventBlock);
let hour = $('<div>').addClass("eventHour").text(eventDetail.allDay? "Toute la journée" : hourFormat(eventDetail.start)).appendTo(event);
(((eventDetail.start - new Date())/3600000)<2 && !eventDetail.allDay)? event.addClass("eventAlert") : null;
});
}
setInterval (WidgetCreate , 60000);
jeedom.cmd.update['#id#'] = function(_options){
WidgetCreate();
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
<style>
div.bandeau {
display: block;
font-size: 12px;
border-width: 1px;
border-style: solid;
border-color: red;
}
.card{
width: 245px;
min-height : 40px;
position: relative;
background-color: rgba(0,0,0,0.45);
border-radius: 10px;
padding: 2px;
background-size: cover;
background-repeat: no-repeat;
display : flex;
margin-bottom : 12px;
}
.dayBlock {
margin-top : 5px;
opacity: 1;
flex-basis : 35%;
color : white;
font-size: 15px;
text-decoration: underline;
text-align: center;
}
.eventBlock{
margin-top : 0px;
margin-bottom : 5px;
flex-basis : 65%;
color : white;
text-align: left;
}
.event{
margin-bottom : 10px;
margin-top : 5px;
padding-top : 2px;
padding-left : 5px;
border-left : solid;
border-color : #9b59b6;
color : white;
text-align: left;
font-size: 12px;
}
.eventHour{
padding-left : 10px;
font-size: 12px;
}
.eventAlert{
font-weight: bold;
border-color : red;
animation: clignote 2s linear infinite;
}
@keyframes clignote {
50% { opacity: 0; }
}
</style>
Voici un gif (ca ne clignote pas aussi vite en vrai 
Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.