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