DOM usage in frontend

This commit is contained in:
giomba 2018-11-23 20:58:13 +01:00
parent 6fa37096ea
commit 3c01d42918
2 changed files with 63 additions and 29 deletions

3
.gitignore vendored
View File

@ -1,6 +1,7 @@
__pycache__/
test/
conf/*custom.ini
.directory
*.swp
*~
*.pyc
*.pyc

View File

@ -1,32 +1,65 @@
// Require moment.js (with locales)
function Get(yourUrl){
var Httpreq = new XMLHttpRequest();
Httpreq.open("GET",yourUrl,false);
Httpreq.send(null);
return Httpreq.responseText;
function zerocalcareDisplay() {
zerocalcareOutput = document.getElementById('zerocalcareOutput');
if (xhr.readyState == 4 && xhr.status == 200) {
var json_obj = JSON.parse(xhr.responseText);
for (i in json_obj) {
// Future improvements needed for a better backend output date in ISO format
// Now we have to parse the string :( very very ugly
var datetime = json_obj[i]['DATETIME'];
var moments = datetime.split(' ');
var dateMoments = moments[0].split('-');
var date = {};
date['Y'] = dateMoments[0];
date['M'] = dateMoments[1];
date['MM'] = ['gennaio', 'febbraio', 'marzo', 'aprile', 'maggio', 'giugno', 'luglio', 'agosto', 'settembre', 'ottobre', 'novembre', 'dicembre'][date['M'] - 1];
date['D'] = dateMoments[2];
var time = moments[1];
var eventElement = document.createElement('div');
var titleElement = document.createElement('h5');
titleElement.appendChild(document.createTextNode(json_obj[i]['NAME']));
titleElement.style.fontStyle = 'italic';
titleElement.classList.add('widget-title');
var dateElement = document.createElement('div');
dateElement.appendChild(document.createTextNode('📅 ' + date['D'] + ' ' + date['MM'] + ' ' + date['Y']));
var timeElement = document.createElement('div');
var timeString = (json_obj[i]['ALL_DAY'] == true) ? 'Tutto il giorno' : ('ore ' + time.substring(0, 5));
timeElement.appendChild(document.createTextNode('⏰ ' + timeString));
// add if location is not empty -- default location should be selected by backend
var locationElement = document.createElement('div');
if (typeof json_obj[i]['LOCATION'] !== 'undefined' && json_obj[i]['LOCATION'] != '') {
var locationString = json_obj[i]['LOCATION'];
}
else {
var locationString = 'Officina Informatica';
}
locationElement.appendChild(document.createTextNode('📍 ' + locationString));
eventElement.appendChild(titleElement);
eventElement.appendChild(dateElement);
eventElement.appendChild(timeElement);
eventElement.appendChild(locationElement);
zerocalcareOutput.appendChild(eventElement);
}
}
else {
zerocalcareOutput.childNodes[0].textContent = 'API Error: Calendario non disponibile';
}
}
var json_obj = JSON.parse(Get("https://golem.linux.it/cgi/zerocalcare/main.py?interval=4weeks"));
console.log("this is the JSON: "+JSON.stringify(json_obj));
moment.locale('it');
for (i in json_obj) {
var time_str;
var date = moment(json_obj[i]["DATETIME"])
console.log(JSON.stringify(json_obj[i]));
document.write('<h5 class="widget-title" style="font-style: italic; color: #009000;">'+json_obj[i]["NAME"]+'</h5>');
document.write("<div>📅 "+date.format("ddd D MMMM")+"</div>");
if (json_obj[i]["ALLDAY"] == true)
time_str = "Tutto il giorno"
else
time_str = date.format("H:mm")
document.write("<div>⏰ "+time_str+"</div>");
// Probably is better to get a default location from Python?
if ("LOCATION" in json_obj[i] && json_obj[i]["LOCATION"] != '' )
document.write("<div>📍 "+json_obj[i]["LOCATION"]+"</div>");
else
document.write("<div>📍 Officina Informatica</div>");
function zerocalcareTrigger() {
xhr = new XMLHttpRequest();
xhr.onload = zerocalcareDisplay;
xhr.open('GET', 'https://golem.linux.it/cgi/zerocalcare/main.py?interval=4weeks', true);
xhr.send(null);
}