blob: d9ef1160cecd802a235dc8e9453e24fb8e947b25 [file] [log] [blame]
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<title>Seients DAFME</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="manifest.json">
<!-- Apple web app -->
<link rel="apple-touch-icon" href="./images/icon-64.png">
<meta name="apple-mobile-web-app-title" content="Seients DAFME">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="white">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">
<link rel="stylesheet" href="./css/bulma-adjustments.css">
</head>
<body>
<script>
var elements = document.getElementsByClassName("button");
Array.from(elements).forEach(function(element) {
element.addEventListener('click', clickButton);
element.parent = element.parentNode.id;
});
var elements = document.getElementsByClassName("complex-button");
Array.from(elements).forEach(function(element) {
element.addEventListener('click', clickButton);
element.parent = element.parentNode.id;
});
var final_JSON = {
"class": null,
"number": "",
"letter": ""
};
function fillInSummary() {
var begins = new Date(parseInt(final_JSON.class.begins)*1000);
var ends = new Date(parseInt(final_JSON.class.ends)*1000);
document.getElementById('subject-final').textContent = final_JSON.class.friendly_name || final_JSON.class.calendar_name;
document.getElementById('classroom-final').textContent = final_JSON.class.room;
document.getElementById('date-final').textContent = begins.toLocaleDateString();
document.getElementById('time-final').textContent = formatDate(begins) + ' - ' + formatDate(ends);
document.getElementById('letter-final').textContent = final_JSON.letter;
document.getElementById('number-final').textContent = final_JSON.number;
}
function clickButton(element) {
var btn = element.currentTarget;
var parent = btn.parent;
if (parent == "subject-container") {
// Canvi de background del button
var selectedClass = JSON.parse(btn.getAttribute('data-class'));
$("#subject-container .complex-button").removeClass("is-link")
btn.classList.add("is-link");
// Canvi JSON
final_JSON["class"] = selectedClass;
// Anchor següent pregunta
switchSection("section-2");
} else if (parent == "number-container") {
// Canvi de background del button
$("#number-container .button").removeClass("is-link is-light is-active")
btn.classList.add("is-link", "is-light", "is-active");
// Canvi JSON
final_JSON["number"] = btn.getAttribute('data-number');
// Introducció de totes les dades al resum final
fillInSummary();
// Anchor següent pregunta
switchSection("section-send");
} else if (parent == "letter-container") {
// Canvi de background del button
$("#letter-container .button").removeClass("is-link is-light is-active")
btn.classList.add("is-link", "is-light", "is-active");
// Canvi JSON
final_JSON["letter"] = btn.getAttribute('data-letter');
// Anchor següent pregunta
switchSection("section-3");
}
}
function formatDate(d) {
var str = "";
str += d.getHours();
str += ":";
if (d.getMinutes() < 10) str += "0";
str += d.getMinutes();
return str;
}
var api_url;
window.addEventListener('load', _ => {
// Check if user is signed in
if (localStorage.getItem('devMode') == 'true') {
var banner = document.getElementById('dev-mode');
banner.addEventListener('click', _ => {
localStorage.devMode = 'false';
location.reload();
});
banner.classList.remove('hidden');
api_url = localStorage.getItem('apiUrl') || 'https://covid-tracability-backend-dev.sandbox.avm99963.com/api/v1/'
} else {
api_url = "https://covid-tracability-backend-prod.sandbox.avm99963.com/api/v1/";
}
fetch(api_url + "isSignedIn", {
"mode": "cors",
"credentials": "include"
})
.then(response => response.json())
.then(data => {
if (!data.payload.signedIn) {
console.log("Not signed in!");
fetch(api_url + "getAuthUrl", {
"mode": "cors",
"credentials": "include"
})
.then(response => response.json())
.then(data => {
// TODO: redirect here
// location.href = data.payload.url;
console.warn('Log in here: ', data.payload.url);
});
}
});
fetch(api_url + "getCurrentClasses", {
"mode": "cors",
"credentials": "include"
})
.then(response => response.json())
.then(data => {
for (var classe of data.payload.classes) {
console.log(classe);
var hora_inici = formatDate(new Date(parseInt(classe.begins)*1000));
var hora_final = formatDate(new Date(parseInt(classe.ends)*1000));
var classeDiv = document.createElement('div');
classeDiv.classList.add('message', 'complex-button');
classeDiv.id = 'subject-' + classe.subject_id + '-' + classe.room;
classeDiv.setAttribute('data-class', JSON.stringify(classe));
var header = document.createElement('div');
header.classList.add('message-header');
header.textContent = classe.friendly_name || classe.calendar_name;
var body = document.createElement('div');
body.classList.add('message-body');
var div1 = document.createElement('div');
var span = document.createElement('span');
span.textContent = classe.room;
div1.textContent = 'Aula ';
div1.appendChild(span);
var div2 = document.createElement('div');
div2.textContent = hora_inici + ' - ' + hora_final;
body.appendChild(div1);
body.appendChild(div2);
classeDiv.appendChild(header);
classeDiv.appendChild(body);
document.getElementById("subject-container").appendChild(classeDiv);
}
var elements = document.getElementsByClassName("button");
Array.from(elements).forEach(function(element) {
element.addEventListener('click', clickButton);
element.parent = element.parentNode.id;
});
var elements = document.getElementsByClassName("complex-button");
Array.from(elements).forEach(function(element) {
element.addEventListener('click', clickButton);
element.parent = element.parentNode.id;
});
});
});
</script>
<span id="dev-mode" class="hidden">Dev mode</span>
<nav class="navbar is-link">
<div class="navbar-brand">
<div class="navbar-item has-text-weight-bold">Traçabilitat DAFME</div>
</div>
</nav>
<section id="section-1" class="section">
<!--
<div class="field has-addons">
<p class="control">
<button class="button">&lt;</button>
</p>
<p class="control">
<input type="date" class="button">
</p>
<p class="control">
<button class="button">&gt;</button>
</p>
</div>
<div class="field has-addons">
<p class="control">
<button class="button">&lt;</button>
</p>
<p class="control">
<input type="button" class="button" value="08:00 - 08:30">
</p>
<p class="control">
<button class="button">&gt;</button>
</p>
</div><br>
-->
<div id="subject-container" class="grid buttons"></div><br>
</section>
<section id="section-2" class="section" style="display: none;">
<button class="button is-link is-light" onclick="switchSection('section-1')">Torna enrere (Classe)</button>
<div id="letter-container" class="buttons grid">
<button class="button" id="letter-A" data-letter="A">A</button>
<button class="button" id="letter-B" data-letter="B">B</button>
<button class="button" id="letter-C" data-letter="C">C</button>
<button class="button" id="letter-D" data-letter="D">D</button>
<button class="button" id="letter-E" data-letter="E">E</button>
<button class="button" id="letter-F" data-letter="F">F</button>
<button class="button" id="letter-G" data-letter="G">G</button>
<button class="button" id="letter-H" data-letter="H">H</button>
<button class="button" id="letter-I" data-letter="I">I</button>
<button class="button" id="letter-J" data-letter="J">J</button>
<button class="button" id="letter-K" data-letter="K">K</button>
<button class="button" id="letter-L" data-letter="L">L</button>
</div>
</section>
<section id="section-3" class="section" style="display: none;">
<button class="button is-link is-light" onclick="switchSection('section-2')">Torna enrere (Lletra)</button>
<div id="number-container" class="buttons grid">
<button class="button" id="number-1" data-number="1">1</button>
<button class="button" id="number-2" data-number="2">2</button>
<button class="button" id="number-3" data-number="3">3</button>
<button class="button" id="number-4" data-number="4">4</button>
<button class="button" id="number-5" data-number="5">5</button>
<button class="button" id="number-6" data-number="6">6</button>
<button class="button" id="number-7" data-number="7">7</button>
<button class="button" id="number-8" data-number="8">8</button>
<button class="button" id="number-9" data-number="9">9</button>
<button class="button" id="number-10" data-number="10">10</button>
</div>
</section>
<section id="section-send" class="section" style="display: none;">
<button class="button is-link is-light" onclick="switchSection('section-3')">Torna enrere (Número)</button>
<br/><br/>
<span class="has-text-weight-bold">Assignatura:</span>
<span id="subject-final">ASSIGNATURA ESCOLLIDA</span><br>
<span class="has-text-weight-bold">Aula:</span>
<span id="classroom-final">AULA ESCOLLIDA</span><br>
<span class="has-text-weight-bold">Data:</span>
<span id="date-final">DD/MM/YYYY</span><br>
<span class="has-text-weight-bold">Hora:</span>
<span id="time-final">HH:MM - HH:MM</span><br>
<span class="has-text-weight-bold">Posició:</span>
<span id="letter-final">A</span><span id="number-final">1</span><br><br>
<button id="send-button" class="button is-link is-large">Omple el formulari</button><br><br>
Hi ha errors? <br /><a class="button is-link is-light" href="https://docs.google.com/forms/d/e/1FAIpQLSfT9o287VqLyhwR8LPdloAQWhuqCgA3NfdhgP5vb9_sVQHL-g/viewform">Completa el formulari manualment</a>
<br><br><article class="message is-warning">
<div class="message-body">
Aquest primers dies estem de prova! Mireu bé la informació, si hi ha res malament <a href="https://docs.google.com/forms/d/e/1FAIpQLScZliauRiLzGCn7DrnKZCjGwiefNltI9N8-hUtO_Q0NGInHsg/viewform">envieu-nos un missatge</a>.
</div>
</article>
</section>
<script>
var current_section = "section-1";
function toggleVisibility(id) {
var x = document.getElementById(id);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function switchSection(s) {
setTimeout(function(){
toggleVisibility(current_section);
toggleVisibility(s);
current_section = s;
}, 75);
}
const idsFormulari = {
room: "1063142948",
day: "2115504093",
begins: "1749141911",
ends: "1827359679",
rows: {
A: "208184485",
B: "1077148310",
C: "642851281",
D: "1686039024",
E: "697835787",
F: "1511799646",
G: "809853432",
H: "182597499",
I: "1890539481",
J: "529159478",
K: "1615241874",
L: "1334263875"
},
notes: "1600275159"
};
const formBaseUrl = "https://docs.google.com/forms/d/e/1FAIpQLSfT9o287VqLyhwR8LPdloAQWhuqCgA3NfdhgP5vb9_sVQHL-g/viewform";
function sendForm() {
// Add subject to user
fetch(api_url + "addUserSubject", {
"method": "POST",
"body": JSON.stringify({
subject: final_JSON.class.subject_id
}),
"mode": "cors",
"credentials": "include"
})
.then(res => res.json())
.then(json => {
console.log("Subject added to user: ", json);
var begins = new Date(parseInt(final_JSON.class.begins)*1000);
var ends = new Date(parseInt(final_JSON.class.ends)*1000);
var params = new URLSearchParams();
params.append("entry." + idsFormulari.room, final_JSON.class.room); // class, number, letter
params.append("entry." + idsFormulari.day, begins.getFullYear().toString() + '-' + (begins.getMonth() + 1).toString().padStart(2, "0") + '-' + begins.getDate().toString().padStart(2, "0"));
params.append("entry." + idsFormulari.begins, formatDate(begins));
params.append("entry." + idsFormulari.ends, formatDate(ends));
params.append("entry." + idsFormulari.rows[final_JSON.letter], 'Columna ' + final_JSON.number);
// params.append("entry." + idsFormulari.notes, '[Autogenerat per delefme/covid-tracability -- Assignatura seleccionada: ' + (final_JSON.class.friendly_name || final_JSON.class.calendar_name) + ']');
var formulari_link = formBaseUrl + '?' + params.toString() + '#i1';
window.location.href = formulari_link;
});
}
document.getElementById("send-button").addEventListener('click', function (el) {
document.getElementById('send-button').classList.add('is-loading');
sendForm();
});
</script>
</body>
</html>