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