Implementato handler per API zerocalcare #5
146
counters.js
146
counters.js
|
@ -1,5 +1,151 @@
|
|||
const MONTHNAME = [ "gennaio", "febbraio", "marzo", "aprile", "maggio", "giugno", "luglio", "agosto", "settembre", "ottobre", "novembre", "dicembre"];
|
||||
|
||||
function fetch_calendar() {
|
||||
const class_prefix = 'zerocalcare-'
|
||||
let ul = document.getElementById(class_prefix+"latest-events");
|
||||
fetch("https://golem.linux.it/cgi/zerocalcare-test/main.py?interval=4weeks")
|
||||
.then(response => response.json())
|
||||
.then(json => {
|
||||
for (let i = 0; i < Math.min(3, json.length) ; ++i) {
|
||||
// Do not display private events
|
||||
if (typeof json[i]['CLASS'] === 'string' && json[i]['CLASS'] == 'PRIVATE') {
|
||||
continue;
|
||||
}
|
||||
|
||||
// Future improvements needed for a better backend output date in ISO format
|
||||
// Now we have to parse the string :( very very ugly
|
||||
let date = new Date(json[i]['DATETIME']);
|
||||
|
||||
let m = new moment(date);
|
||||
m.locale('it');
|
||||
|
||||
let eventElement = document.createElement('li');
|
||||
|
||||
let titleElement = document.createElement('div');
|
||||
titleElement.appendChild(document.createTextNode(decodeURI(json[i]['SUMMARY'])));
|
||||
titleElement.classList.add(class_prefix+'title');
|
||||
eventElement.appendChild(titleElement);
|
||||
|
||||
let contentEventElement = document.createElement('div');
|
||||
contentEventElement.classList.add(class_prefix+'details')
|
||||
eventElement.appendChild(contentEventElement);
|
||||
|
||||
// Check if event is not confirmed
|
||||
if (typeof json[i]['STATUS'] === 'string') {
|
||||
if (json[i]['STATUS'] == 'TENTATIVE') {
|
||||
// Make the text a bit lighter and italic
|
||||
contentEventElement.style.fontStyle = 'italic';
|
||||
contentEventElement.style.color = 'gray';
|
||||
// Add note
|
||||
let unconfirmedElement = document.createElement('div');
|
||||
unconfirmedElement.style.fontWeight = 'bold';
|
||||
unconfirmedElement.appendChild(document.createTextNode('⚠️ Non confermato!'));
|
||||
contentEventElement.appendChild(unconfirmedElement);
|
||||
}
|
||||
else if (json[i]['STATUS'] == 'CANCELLED') {
|
||||
// Strike time, date and location to remark this concept
|
||||
dateText.style.textDecoration = 'line-through';
|
||||
timeText.style.textDecoration = 'line-through';
|
||||
locationText.style.textDecoration = 'line-through';
|
||||
// Add note
|
||||
let unconfirmedElement = document.createElement('div');
|
||||
unconfirmedElement.style.fontWeight = 'bold';
|
||||
unconfirmedElement.appendChild(document.createTextNode('⚠️ Cancellato!'));
|
||||
contentEventElement.appendChild(unconfirmedElement);
|
||||
}
|
||||
}
|
||||
|
||||
let dateElement = document.createElement('div');
|
||||
let dateText = document.createElement('time');
|
||||
dateText.appendChild(document.createTextNode(m.format('dddd D MMMM YYYY')));
|
||||
dateElement.appendChild(document.createTextNode('📅 '));
|
||||
dateElement.appendChild(dateText);
|
||||
contentEventElement.appendChild(dateElement);
|
||||
|
||||
let timeElement = document.createElement('div');
|
||||
let timeText = document.createElement('time');
|
||||
let timeString = (json[i]['ALLDAY'] == true) ? 'Tutto il giorno' : ('ore ' + m.format('HH:mm'));
|
||||
timeText.appendChild(document.createTextNode(timeString));
|
||||
timeElement.appendChild(document.createTextNode('⏰ '));
|
||||
timeElement.appendChild(timeText);
|
||||
contentEventElement.appendChild(timeElement);
|
||||
|
||||
// add if location is not empty -- default location should be selected by backend
|
||||
let locationElement = document.createElement('div');
|
||||
let locationText = document.createElement('span');
|
||||
if (json[i]['LOCATION'] !== undefined && json[i]['LOCATION'] != '') {
|
||||
let text = decodeURI(json[i]['LOCATION']);
|
||||
let textNode = document.createTextNode(text);
|
||||
if (text.match("^(http|https):\\/\\/.*$")) {
|
||||
let anchorElement = document.createElement('a');
|
||||
anchorElement.href = text;
|
||||
anchorElement.appendChild(textNode);
|
||||
locationText.appendChild(anchorElement);
|
||||
} else {
|
||||
locationText.appendChild(textNode);
|
||||
}
|
||||
}
|
||||
else {
|
||||
locationText.appendChild(document.createTextNode('Officina Informatica'));
|
||||
}
|
||||
locationElement.appendChild(document.createTextNode('📍 '));
|
||||
locationElement.appendChild(locationText);
|
||||
contentEventElement.appendChild(locationElement);
|
||||
|
||||
if (json[i]['DESCRIPTION'] !== undefined && json[i]['DESCRIPTION'] != '') {
|
||||
let descriptionElement = document.createElement('div');
|
||||
let descriptionText = document.createElement('span');
|
||||
descriptionText.appendChild(document.createTextNode(decodeURI(json[i]['DESCRIPTION'])));
|
||||
descriptionElement.appendChild(document.createTextNode('📝 '));
|
||||
descriptionElement.appendChild(descriptionText);
|
||||
descriptionElement.style.display = "none";
|
||||
|
||||
// Display a clickable "..." button.
|
||||
let moreElement = document.createElement('div');
|
||||
let moreShowText = document.createElement('a');
|
||||
let moreHideText = document.createElement('a');
|
||||
|
||||
moreShowText.appendChild(document.createTextNode('⬇️ Più informazioni...'));
|
||||
moreElement.appendChild(moreShowText);
|
||||
moreHideText.appendChild(document.createTextNode('⬆️ Nascondi informazioni...'));
|
||||
moreHideText.style.display = "none";
|
||||
moreElement.appendChild(moreHideText);
|
||||
|
||||
moreElement.onclick = () => {
|
||||
if (descriptionElement.style.display == "none") {
|
||||
descriptionElement.style.display =
|
||||
moreHideText.style.display = "block";
|
||||
moreShowText.style.display = "none";
|
||||
} else {
|
||||
descriptionElement.style.display =
|
||||
moreHideText.style.display = "none";
|
||||
moreShowText.style.display = "block";
|
||||
}
|
||||
};
|
||||
contentEventElement.appendChild(moreElement);
|
||||
contentEventElement.appendChild(descriptionElement);
|
||||
}
|
||||
|
||||
ul.appendChild(eventElement);
|
||||
atLeastOne = true;
|
||||
}
|
||||
|
||||
if (atLeastOne == false) {
|
||||
let warn = document.createElement('span');
|
||||
warn.textContent = 'Nessun appuntamento in programma';
|
||||
ul.appendChild(warn);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
let warn = document.createElement('span');
|
||||
warn.textContent = 'Errore nella connessione alle API zerocalcare.';
|
||||
console.log(class_prefix+"error: "+err);
|
||||
ul.appendChild(warn);
|
||||
});;
|
||||
}
|
||||
|
||||
function counters() {
|
||||
fetch_calendar();
|
||||
|
||||
fetch("https://golem.linux.it/wp/wp-json/wp/v2/posts")
|
||||
.then(response => response.json())
|
||||
|
|
|
@ -13,6 +13,7 @@
|
|||
|
||||
<script type="text/javascript" src="lug.js"></script>
|
||||
<script type="text/javascript" src="counters.js"></script>
|
||||
<script type="text/javascript" src="moment-with-locales.js"></script>
|
||||
<script type="text/javascript" src="animations.js"></script>
|
||||
</head>
|
||||
<body onload="lugtoscana(); counters(); animations();">
|
||||
|
@ -56,6 +57,7 @@
|
|||
<h2>News</h2>
|
||||
<div>
|
||||
<h3>Calendario</h3>
|
||||
<ul id="zerocalcare-latest-events"></ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Ultimi post</h3>
|
||||
|
|
File diff suppressed because it is too large
Load Diff
29
style.css
29
style.css
|
@ -47,7 +47,7 @@ section.nobg h1, section.nobg h2, section.nobg h3 {
|
|||
text-shadow: 0 0 1px green;
|
||||
}
|
||||
|
||||
section div {
|
||||
section > div {
|
||||
transition-duration: 0.5s;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
|
@ -56,12 +56,12 @@ section div {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
section.bg div:hover {
|
||||
section.bg > div:hover {
|
||||
transition-duration: 0.5s;
|
||||
background-color: rgba(10,10,10,0.5);
|
||||
}
|
||||
|
||||
section div img {
|
||||
section > div img {
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
|
@ -71,7 +71,7 @@ section#chisiamo {
|
|||
url(img/murale.jpeg);
|
||||
}
|
||||
@media (min-width: 800px) {
|
||||
section#chisiamo div {
|
||||
section#chisiamo > div {
|
||||
width: 33%;
|
||||
}
|
||||
}
|
||||
|
@ -82,7 +82,7 @@ section#news {
|
|||
url(img/gadgets.jpeg);
|
||||
}
|
||||
@media (min-width: 800px) {
|
||||
section#news div {
|
||||
section#news > div {
|
||||
width: 24%;
|
||||
}
|
||||
}
|
||||
|
@ -93,7 +93,7 @@ section#attivita {
|
|||
url(img/elettronica.jpeg);
|
||||
}
|
||||
@media (min-width: 800px) {
|
||||
section#attivita div {
|
||||
section#attivita > div {
|
||||
width: 24%;
|
||||
}
|
||||
}
|
||||
|
@ -106,7 +106,7 @@ section#servizi {
|
|||
}
|
||||
*/
|
||||
@media (min-width: 800px) {
|
||||
section#servizi div {
|
||||
section#servizi > div {
|
||||
width: 19%;
|
||||
}
|
||||
}
|
||||
|
@ -117,13 +117,13 @@ section#contatti {
|
|||
url(img/cena.jpeg);
|
||||
}
|
||||
@media (min-width: 800px) {
|
||||
section#contatti div {
|
||||
section#contatti > div {
|
||||
width: 19%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 800px) {
|
||||
section#lug div {
|
||||
section#lug > div {
|
||||
width: 33%;
|
||||
}
|
||||
}
|
||||
|
@ -165,4 +165,15 @@ ul > li {
|
|||
a:link.anchor, a:visited.anchor {
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
/* Calendar styles */
|
||||
/*
|
||||
.zerocalcare-title {
|
||||
|
||||
}
|
||||
*/
|
||||
|
||||
.zerocalcare-details {
|
||||
font-size: smaller;
|
||||
}
|
Loading…
Reference in New Issue