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"

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

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>

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;
 }