| <!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; |
| } |
| </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; |
| } |
| </script> |
| |
| <script> |
| // Check if user is signed in |
| var api_url = "https://covid-tracability-backend-dev.sandbox.avm99963.com/api/v1/"; |
| fetch(api_url + "isSignedIn") |
| .then(response => response.json()) |
| .then(data => { |
| if (!data.payload.signedIn) { |
| console.log("Not signed in!"); |
| return 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> |
| |
| <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"><</button> |
| </p> |
| <p class="control"> |
| <input type="date" class="button"> |
| </p> |
| <p class="control"> |
| <button class="button">></button> |
| </p> |
| </div> |
| <div class="field has-addons"> |
| <p class="control"> |
| <button class="button"><</button> |
| </p> |
| <p class="control"> |
| <input type="button" class="button" value="08:00 - 08:30"> |
| </p> |
| <p class="control"> |
| <button class="button">></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="number-final">2</span><span id="letter-final">P</span><br><br> |
| |
| <button id="send-button" onclick="js: document.getElementById('send-button').classList.add('is-loading');" 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); |
| } |
| |
| </script> |
| <script> |
| var subjects_texts = { |
| "subject-1": "Àlgebra", |
| "subject-2": "Càlcul I", |
| "subject-3": "Topologia", |
| "subject-4": "Informàtica" |
| }; |
| |
| 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) { |
| // 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> |