Gitiles
Code Review Sign In
gerrit.avm99963.com / delefme-covid-tracability / main / 8c648fc3fb750596e1aa747772adeac51c0aaa96 / . / index.html
blob: fd34ad3f90ee0eb52bd45ed85601777d704556c5 [file] [log] [blame]
avm999634f7c03c2020-09-29 00:08:12 +0200[diff] [blame]1<!DOCTYPE html>
2
3<html lang="ca">
4 <head>
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
8 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">
Andreu Huguet898768a2020-09-29 00:30:23 +0200[diff] [blame]9 <link rel="stylesheet" href="./css/bulma-adjustments.css">
avm999634f7c03c2020-09-29 00:08:12 +0200[diff] [blame]10 </head>
11 <body>
avm999634f7c03c2020-09-29 00:08:12 +0200[diff] [blame]12 <script>
13 var elements = document.getElementsByClassName("button");
14 Array.from(elements).forEach(function(element) {
15 element.addEventListener('click', clickButton);
16 element.parent = element.parentNode.id;
17 });
18 var elements = document.getElementsByClassName("complex-button");
19 Array.from(elements).forEach(function(element) {
20 element.addEventListener('click', clickButton);
21 element.parent = element.parentNode.id;
22 });
23
24 var final_JSON = {
25 "class": null,
26 "number": "",
27 "letter": ""
28 };
29
30 function fillInSummary() {
31 var begins = new Date(parseInt(final_JSON.class.begins)*1000);
32 var ends = new Date(parseInt(final_JSON.class.ends)*1000);
33
34 document.getElementById('subject-final').textContent = final_JSON.class.friendly_name;
35 document.getElementById('classroom-final').textContent = final_JSON.class.room;
36 document.getElementById('date-final').textContent = begins.toLocaleDateString();
37 document.getElementById('time-final').textContent = formatDate(begins) + ' - ' + formatDate(ends);
38 document.getElementById('letter-final').textContent = final_JSON.letter;
39 document.getElementById('number-final').textContent = final_JSON.number;
40 }
41
42 function clickButton(element) {
43 var btn = element.currentTarget;
44 var parent = btn.parent;
45
46 if (parent == "subject-container") {
47 // Canvi de background del button
48 var selectedClass = JSON.parse(btn.getAttribute('data-class'));
49 $("#subject-container .complex-button").removeClass("is-link")
50 btn.classList.add("is-link");
51 // Canvi JSON
52 final_JSON["class"] = selectedClass;
53 // Anchor següent pregunta
54 switchSection("section-2");
55 } else if (parent == "number-container") {
56 // Canvi de background del button
57 $("#number-container .button").removeClass("is-link is-light is-active")
58 btn.classList.add("is-link", "is-light", "is-active");
59 // Canvi JSON
60 final_JSON["number"] = btn.getAttribute('data-number');
61 // Introducció de totes les dades al resum final
62 fillInSummary();
63 // Anchor següent pregunta
64 switchSection("section-send");
65 } else if (parent == "letter-container") {
66 // Canvi de background del button
67 $("#letter-container .button").removeClass("is-link is-light is-active")
68 btn.classList.add("is-link", "is-light", "is-active");
69 // Canvi JSON
70 final_JSON["letter"] = btn.getAttribute('data-letter');
71 // Anchor següent pregunta
72 switchSection("section-3");
73 }
74 }
75
76 function formatDate(d) {
77 var str = "";
avm999634f7c03c2020-09-29 00:08:12 +0200[diff] [blame]78 str += d.getHours();
79 str += ":";
80 if (d.getMinutes() < 10) str += "0";
81 str += d.getMinutes();
82 return str;
83 }
84
85 var api_url;
86
87 window.addEventListener('load', _ => {
88 // Check if user is signed in
89 if (localStorage.getItem('devMode') == 'true') {
90 var banner = document.getElementById('dev-mode');
91 banner.addEventListener('click', _ => {
92 localStorage.devMode = 'false';
93 location.reload();
94 });
95 banner.classList.remove('hidden');
96 api_url = localStorage.getItem('apiUrl') || 'https://covid-tracability-backend-dev.sandbox.avm99963.com/api/v1/'
97 } else {
98 api_url = "https://covid-tracability-backend-prod.sandbox.avm99963.com/api/v1/";
99 }
100 fetch(api_url + "isSignedIn", {
101 "mode": "cors",
102 "credentials": "include"
103 })
104 .then(response => response.json())
105 .then(data => {
106 if (!data.payload.signedIn) {
107 console.log("Not signed in!");
108 fetch(api_url + "getAuthUrl", {
109 "mode": "cors",
110 "credentials": "include"
111 })
112 .then(response => response.json())
113 .then(data => {
114 // TODO: redirect here
115 // location.href = data.payload.url;
116 console.warn('Log in here: ', data.payload.url);
117 });
118 }
119 });
120
121 fetch(api_url + "getCurrentClasses", {
122 "mode": "cors",
123 "credentials": "include"
124 })
125 .then(response => response.json())
126 .then(data => {
Ferran López8c648fc2020-09-30 11:27:40 +0200[diff] [blame^]127 for (var [i, classe] of data.payload.classes.entries()) {
avm999634f7c03c2020-09-29 00:08:12 +0200[diff] [blame]128 console.log(classe);
129
130 var hora_inici = formatDate(new Date(parseInt(classe.begins)*1000));
131 var hora_final = formatDate(new Date(parseInt(classe.ends)*1000));
132
133 var classeDiv = document.createElement('div');
134 classeDiv.classList.add('message', 'complex-button');
135 classeDiv.id = 'subject-' + classe.subject_id + '-' + classe.room;
136 classeDiv.setAttribute('data-class', JSON.stringify(classe));
137
138 var header = document.createElement('div');
139 header.classList.add('message-header');
140 header.textContent = classe.friendly_name;
141
142 var body = document.createElement('div');
143 body.classList.add('message-body');
144
145 var div1 = document.createElement('div');
146 var span = document.createElement('span');
147 span.textContent = classe.room;
148
Ferran López8c648fc2020-09-30 11:27:40 +0200[diff] [blame^]149 if (i > 0 && data.payload.classes[i-1].friendly_name == classe.friendly_name) {
150 div1.classList.add('has-text-danger', 'has-text-weight-bold');
151 } else if (data.payload.classes.length >= i && data.payload.classes[i+1].friendly_name == classe.friendly_name) {
152 div1.classList.add('has-text-danger', 'has-text-weight-bold');
153 }
154
avm999634f7c03c2020-09-29 00:08:12 +0200[diff] [blame]155 div1.textContent = 'Aula ';
156 div1.appendChild(span);
157
158 var div2 = document.createElement('div');
159 div2.textContent = hora_inici + ' - ' + hora_final;
160
161 body.appendChild(div1);
162 body.appendChild(div2);
163
164 classeDiv.appendChild(header);
165 classeDiv.appendChild(body);
166
167 document.getElementById("subject-container").appendChild(classeDiv);
168 }
169
170 var elements = document.getElementsByClassName("button");
171 Array.from(elements).forEach(function(element) {
172 element.addEventListener('click', clickButton);
173 element.parent = element.parentNode.id;
174 });
175 var elements = document.getElementsByClassName("complex-button");
176 Array.from(elements).forEach(function(element) {
177 element.addEventListener('click', clickButton);
178 element.parent = element.parentNode.id;
179 });
180 });
181 });
182 </script>
183
184 <span id="dev-mode" class="hidden">Dev mode</span>
185
186 <nav class="navbar is-link">
187 <div class="navbar-brand">
188 <div class="navbar-item has-text-weight-bold">Traçabilitat DAFME</div>
189 </div>
190 </nav>
191
192 <section id="section-1" class="section">
193 <!--
194 <div class="field has-addons">
195 <p class="control">
196 <button class="button">&lt;</button>
197 </p>
198 <p class="control">
199 <input type="date" class="button">
200 </p>
201 <p class="control">
202 <button class="button">&gt;</button>
203 </p>
204 </div>
205 <div class="field has-addons">
206 <p class="control">
207 <button class="button">&lt;</button>
208 </p>
209 <p class="control">
210 <input type="button" class="button" value="08:00 - 08:30">
211 </p>
212 <p class="control">
213 <button class="button">&gt;</button>
214 </p>
215 </div><br>
216 -->
217 <div id="subject-container" class="grid buttons"></div><br>
218
219 </section>
220
221 <section id="section-2" class="section" style="display: none;">
222 <button class="button is-link is-light" onclick="switchSection('section-1')">Torna enrere (Classe)</button>
223
224 <div id="letter-container" class="buttons grid">
225 <button class="button" id="letter-A" data-letter="A">A</button>
226 <button class="button" id="letter-B" data-letter="B">B</button>
227 <button class="button" id="letter-C" data-letter="C">C</button>
228 <button class="button" id="letter-D" data-letter="D">D</button>
229 <button class="button" id="letter-E" data-letter="E">E</button>
230 <button class="button" id="letter-F" data-letter="F">F</button>
231 <button class="button" id="letter-G" data-letter="G">G</button>
232 <button class="button" id="letter-H" data-letter="H">H</button>
233 <button class="button" id="letter-I" data-letter="I">I</button>
234 <button class="button" id="letter-J" data-letter="J">J</button>
235 <button class="button" id="letter-K" data-letter="K">K</button>
236 <button class="button" id="letter-L" data-letter="L">L</button>
237 </div>
238 </section>
239
240 <section id="section-3" class="section" style="display: none;">
241 <button class="button is-link is-light" onclick="switchSection('section-2')">Torna enrere (Lletra)</button>
242
243 <div id="number-container" class="buttons grid">
244 <button class="button" id="number-1" data-number="1">1</button>
245 <button class="button" id="number-2" data-number="2">2</button>
246 <button class="button" id="number-3" data-number="3">3</button>
247 <button class="button" id="number-4" data-number="4">4</button>
248 <button class="button" id="number-5" data-number="5">5</button>
249 <button class="button" id="number-6" data-number="6">6</button>
250 <button class="button" id="number-7" data-number="7">7</button>
251 <button class="button" id="number-8" data-number="8">8</button>
252 <button class="button" id="number-9" data-number="9">9</button>
253 <button class="button" id="number-10" data-number="10">10</button>
254 </div>
255 </section>
256 <section id="section-send" class="section" style="display: none;">
257 <button class="button is-link is-light" onclick="switchSection('section-3')">Torna enrere (Número)</button>
258 <br/><br/>
259 <span class="has-text-weight-bold">Assignatura:</span>
Andreu Huguet898768a2020-09-29 00:30:23 +0200[diff] [blame]260 <span id="subject-final">ASSIGNATURA ESCOLLIDA</span><br>
avm999634f7c03c2020-09-29 00:08:12 +0200[diff] [blame]261 <span class="has-text-weight-bold">Aula:</span>
Andreu Huguet898768a2020-09-29 00:30:23 +0200[diff] [blame]262 <span id="classroom-final">AULA ESCOLLIDA</span><br>
avm999634f7c03c2020-09-29 00:08:12 +0200[diff] [blame]263 <span class="has-text-weight-bold">Data:</span>
Andreu Huguet898768a2020-09-29 00:30:23 +0200[diff] [blame]264 <span id="date-final">DD/MM/YYYY</span><br>
avm999634f7c03c2020-09-29 00:08:12 +0200[diff] [blame]265 <span class="has-text-weight-bold">Hora:</span>
Andreu Huguet898768a2020-09-29 00:30:23 +0200[diff] [blame]266 <span id="time-final">HH:MM - HH:MM</span><br>
avm999634f7c03c2020-09-29 00:08:12 +0200[diff] [blame]267 <span class="has-text-weight-bold">Posició:</span>
Andreu Huguet898768a2020-09-29 00:30:23 +0200[diff] [blame]268 <span id="letter-final">A</span><span id="number-final">1</span><br><br>
avm999634f7c03c2020-09-29 00:08:12 +0200[diff] [blame]269
270 <button id="send-button" class="button is-link is-large">Omple el formulari</button><br><br>
271
272 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>
273 </section>
274
275 <script>
276 var current_section = "section-1";
277
278 function toggleVisibility(id) {
279 var x = document.getElementById(id);
Ferran López8c648fc2020-09-30 11:27:40 +0200[diff] [blame^]280 if (x.style.display == "none") {
avm999634f7c03c2020-09-29 00:08:12 +0200[diff] [blame]281 x.style.display = "block";
282 } else {
283 x.style.display = "none";
284 }
285 }
286
287 function switchSection(s) {
288 setTimeout(function(){
289 toggleVisibility(current_section);
290 toggleVisibility(s);
291 current_section = s;
292 }, 75);
293 }
294
295 const idsFormulari = {
296 room: "1063142948",
297 day: "2115504093",
298 begins: "1749141911",
299 ends: "1827359679",
300 rows: {
301 A: "208184485",
302 B: "1077148310",
303 C: "642851281",
304 D: "1686039024",
305 E: "697835787",
306 F: "1511799646",
307 G: "809853432",
308 H: "182597499",
309 I: "1890539481",
310 J: "529159478",
311 K: "1615241874",
312 L: "1334263875"
313 },
314 notes: "1600275159"
315 };
316 const formBaseUrl = "https://docs.google.com/forms/d/e/1FAIpQLSfT9o287VqLyhwR8LPdloAQWhuqCgA3NfdhgP5vb9_sVQHL-g/viewform";
317
318 function sendForm() {
319 // Add subject to user
320 fetch(api_url + "addUserSubject", {
321 "method": "POST",
322 "body": JSON.stringify({
323 subject: final_JSON.class.subject_id
324 }),
325 "mode": "cors",
326 "credentials": "include"
327 })
328 .then(res => res.json())
329 .then(json => {
330 console.log("Subject added to user: ", json);
331
332 var begins = new Date(parseInt(final_JSON.class.begins)*1000);
333 var ends = new Date(parseInt(final_JSON.class.ends)*1000);
334
335 var params = new URLSearchParams();
336 params.append("entry." + idsFormulari.room, final_JSON.class.room); // class, number, letter
337 params.append("entry." + idsFormulari.day, begins.getFullYear().toString() + '-' + (begins.getMonth() + 1).toString().padStart(2, "0") + '-' + begins.getDate().toString().padStart(2, "0"));
338 params.append("entry." + idsFormulari.begins, formatDate(begins));
339 params.append("entry." + idsFormulari.ends, formatDate(ends));
340 params.append("entry." + idsFormulari.rows[final_JSON.letter], 'Columna ' + final_JSON.number);
avm9996356f28532020-09-29 01:06:17 +0200[diff] [blame]341 // params.append("entry." + idsFormulari.notes, '[Autogenerat per delefme/covid-tracability -- Assignatura seleccionada: ' + final_JSON.class.friendly_name + ']');
avm999634f7c03c2020-09-29 00:08:12 +0200[diff] [blame]342
avm99963dbdc9652020-09-29 01:09:25 +0200[diff] [blame]343 var formulari_link = formBaseUrl + '?' + params.toString() + '#i1';
avm999634f7c03c2020-09-29 00:08:12 +0200[diff] [blame]344 window.location.href = formulari_link;
345 });
346 }
347
348 document.getElementById("send-button").addEventListener('click', function (el) {
349 document.getElementById('send-button').classList.add('is-loading');
350
351 sendForm();
352 });
353 </script>
354 </body>
355</html>