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