Merge pull request #4 from delefme/hotfix-form-url
Redirecció formulari
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..06095a4
--- /dev/null
+++ b/index.html
@@ -0,0 +1,401 @@
+<!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 = {
+ "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;
+ 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 = "";
+ 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", {
+ "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;
+
+ 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"><</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" 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">À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);
+ }
+
+ 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 + ']');
+
+ var formulari_link = formBaseUrl + '?' + params.toString();
+ 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>
diff --git a/nova-ui.html b/nova-ui.html
deleted file mode 100644
index 6924f08..0000000
--- a/nova-ui.html
+++ /dev/null
@@ -1,313 +0,0 @@
-<!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>