blob: b3221e0ca81b137d69d0596fa7ce85af6be147ee [file] [log] [blame]
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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">
</head>
<body>
<style>
.buttons.grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items : center;
}
.buttons.grid .button {
flex: 1 0 20%;
margin: 10px;
padding: 40px 20px;
line-height: 0px;
}
.buttons.grid .complex-button {
flex: 1 0 34%;
margin: 15px 10px;
}
.section {
padding-top: 1rem;
}
#dev-mode {
background: #d23f31;
border: 1px solid #3e2723;
box-shadow: 0 0 4px rgba(0,0,0,.14), 0 2px 4px rgba(0,0,0,.28);
color: #fff;
font-size: 10px;
font-weight: 700;
right: 20px;
line-height: 18px;
margin: -9px -50px;
opacity: .87;
position: absolute;
text-align: center;
text-shadow: 1px 1px 0 #4e342e;
top: 20px;
transform: rotate(45deg);
width: 100px;
z-index: 99;
cursor: pointer;
}
#dev-mode.hidden {
display: none;
}
</style>
<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 = {
"subject": "",
"number": "",
"letter": ""
};
function clickButton(element) {
var parent = element.currentTarget.parent;
var id = element.currentTarget.id;
var final_text = (id.split("-")[0] == "subject" ? $("#" + id + " > .message-header").text() : id.split("-")[1]);
var room_text = $("#" + id).find(".room").text();
if (parent == "subject-container") {
// Canvi de background del button
$(".current-subject").css("background-color", "white");
$("#subject-container .complex-button").removeClass("is-link")
$("#" + id).addClass("is-link");
// Canvi del text al final
$("#subject-final").html(final_text);
$("#classroom-final").html(room_text);
// Canvi JSON
final_JSON["subject"] = final_text;
// 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")
$("#" + id).addClass("is-link is-light is-active");
// Canvi del text al final
$("#number-final").html(final_text);
// Canvi JSON
final_JSON["number"] = final_text;
// 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")
$("#" + id).addClass("is-link is-light is-active");
// Canvi del text al final
$("#letter-final").html(final_text);
// Canvi JSON
final_JSON["letter"] = final_text;
// Anchor següent pregunta
switchSection("section-3");
}
}
function formatDate(d) {
var str = "";
if (d.getHours() < 10) str += "0";
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")
.then(response => response.json())
.then(data => {
if (!data.payload.signedIn) {
console.log("Not signed in!");
fetch(api_url + "getAuthUrl")
.then(response => response.json())
.then(data => {
// TODO: redirect here
// alert(data.payload.url);
});
}
});
fetch(api_url + "getCurrentClasses")
.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 today = new Date().toLocaleDateString();
// Canvi de final
$("#date-final").text(today)
$("#time-final").text(hora_inici + " - " + hora_final);
$("#subject-container").append(
"<div class='message complex-button' id='subject-" + classe.subject_id + "-" + classe.room + "'>" +
"<div class='message-header'>" + classe.friendly_name + "</div>" +
"<div class='message-body'>" +
"<div>Aula <span class='room'>" + classe.room + "</span></div>" +
"<div>" + hora_inici + " - " + hora_final + "</div>" +
"</div>" +
"</div>"
);
}
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">A</button>
<button class="button" id="letter-B">B</button>
<button class="button" id="letter-C">C</button>
<button class="button" id="letter-D">D</button>
<button class="button" id="letter-E">E</button>
<button class="button" id="letter-F">F</button>
<button class="button" id="letter-G">G</button>
<button class="button" id="letter-H">H</button>
<button class="button" id="letter-I">I</button>
<button class="button" id="letter-J">J</button>
<button class="button" id="letter-K">K</button>
<button class="button" id="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">1</button>
<button class="button" id="number-2">2</button>
<button class="button" id="number-3">3</button>
<button class="button" id="number-4">4</button>
<button class="button" id="number-5">5</button>
<button class="button" id="number-6">6</button>
<button class="button" id="number-7">7</button>
<button class="button" id="number-8">8</button>
<button class="button" id="number-9">9</button>
<button class="button" id="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">Àlgebra Lineal</span><br>
<span class="has-text-weight-bold">Aula:</span>
<span id="classroom-final">Dele</span><br>
<span class="has-text-weight-bold">Data:</span>
<span id="date-final">14/3/1879</span><br>
<span class="has-text-weight-bold">Hora:</span>
<span id="time-final">En <strong>algun moment</strong></span><br>
<span class="has-text-weight-bold">Posició:</span>
<span id="letter-final">P</span><span id="number-final">2</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>
</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);
}
function sendForm(data) {
// Add subject to user
fetch(api_url + "addUserSubject", {
"method": "POST",
"body": JSON.stringify({
subject: data["subject"]
}),
"mode": "cors",
"credentials": "include"
})
.then(res => res.json())
.then(json => {
console.log("Subject added to user: ", json);
// TODO: Redirect to Google Forms
var formulari_link = "https://docs.google.com/forms/d/e/1FAIpQLSfT9o287VqLyhwR8LPdloAQWhuqCgA3NfdhgP5vb9_sVQHL-g/viewform?entry.1063142948=S03&entry.2115504093=2020-09-14&entry.1749141911=9:00&entry.1827359679=10:00&entry.208184485=Columna+3&entry.1600275159=[Autogenerat+per+delefme/covid-tracability]#i1";
window.location.href = formulari_link;
});
}
document.getElementById("send-button").addEventListener('click', function (el) {
document.getElementById('send-button').classList.add('is-loading');
// TODO: emplenar això amb informació real
sendForm({
"aula": "001",
"subject": 1,
"data": "16/01/2020",
"hora-inici": "9:00",
"hora-final": "10:00",
"seient": "7D"
});
});
</script>
</body>
</html>