Browse Source

Implementato handler per API zerocalcare

* incluso moments.js per localizzazione, formattazione e conversione
  timestamp
* aggiunti stili per eventi calendario
* gestiti errori CORS in modo "gradevole"
pull/5/head
giuliof 2 years ago
parent
commit
52c4617d4e
  1. 146
      counters.js
  2. 2
      index.html
  3. 14380
      moment-with-locales.js
  4. 29
      style.css

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())

2
index.html

@ -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>
</head>
<body onload="lugtoscana(); counters();">
@ -49,6 +50,7 @@
<h2>News</h2>
<div>
<h3>Calendario</h3>
<ul id="zerocalcare-latest-events"></ul>
</div>
<div>
<h3>Ultimi post</h3>

14380
moment-with-locales.js

File diff suppressed because it is too large

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%;
}
}
@ -160,4 +160,15 @@ ul > li {
.golem_font {
font-family: GOLEM, comfortaa, "Arial", sans-serif;
}
/* Calendar styles */
/*
.zerocalcare-title {
}
*/
.zerocalcare-details {
font-size: smaller;
}
Loading…
Cancel
Save