| <!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 => { |
| if (data.payload.classes.length == 0) { |
| document.getElementById('no-subjects').classList.remove('hidden'); |
| } else { |
| document.getElementById('fme-maps-container').classList.remove('hidden'); |
| } |
| |
| for (var [i, classe] of data.payload.classes.entries()) { |
| 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; |
| |
| if (i > 0 && data.payload.classes[i-1].friendly_name == classe.friendly_name) { |
| div1.classList.add('has-text-danger', 'has-text-weight-bold'); |
| } else if (i < data.payload.classes.length - 1 && data.payload.classes[i+1].friendly_name == classe.friendly_name) { |
| div1.classList.add('has-text-danger', 'has-text-weight-bold'); |
| } |
| |
| 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"><</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> |
| <div id="no-subjects" class="hidden">No s'està impartint cap classe en aquests moments.</div> |
| <div id="fme-maps-container" class="hidden"> |
| <h4>Mapes de les aules de l'FME</h4> |
| <div class="maps"> |
| <div class="map"> |
| <img src="img/ps.png"> |
| <div class="map--label">Planta <b>-1</b></div> |
| </div> |
| <div class="map"> |
| <img src="img/p0.png"> |
| <div class="map--label">Planta <b>0</b></div> |
| </div> |
| <div class="map"> |
| <img src="img/p1.png"> |
| <div class="map--label">Planta <b>1</b></div> |
| </div> |
| </div> |
| </div> |
| |
| </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> |