Gitiles
Code Review Sign In
gerrit.avm99963.com / delefme-covid-tracability / main / 8f374108bc81ad465e7f90985aa7dd16d9839310 / . / nova-ui.html
blob: b3221e0ca81b137d69d0596fa7ce85af6be147ee [file] [log] [blame]
Andreu Huguet00f83832020-09-27 21:06:54 +0200[diff] [blame]1<!DOCTYPE html>
Ferran López5b9bcfa2020-09-28 13:11:23 +0200[diff] [blame]2
Andreu Huguet00f83832020-09-27 21:06:54 +0200[diff] [blame]3<html lang="ca">
4 <head>
5 <meta charset="utf-8">
Ferran López5b9bcfa2020-09-28 13:11:23 +0200[diff] [blame]6 <meta name="viewport" content="width=device-width, initial-scale=1">
Andreu Huguet00f83832020-09-27 21:06:54 +0200[diff] [blame]7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Ferran López5b9bcfa2020-09-28 13:11:23 +0200[diff] [blame]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;
Andreu Huguetcb95ed02020-09-28 14:15:20 +0200[diff] [blame]25 line-height: 0px;
Ferran López5b9bcfa2020-09-28 13:11:23 +0200[diff] [blame]26 }
27
28 .buttons.grid .complex-button {
Andreu Huguetcb95ed02020-09-28 14:15:20 +0200[diff] [blame]29 flex: 1 0 34%;
Ferran López5b9bcfa2020-09-28 13:11:23 +0200[diff] [blame]30 margin: 15px 10px;
31 }
Andreu Huguetcb95ed02020-09-28 14:15:20 +0200[diff] [blame]32
33 .section {
34 padding-top: 1rem;
35 }
avm999638f374102020-09-28 22:03:56 +0200[diff] [blame^]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 }
Ferran López5b9bcfa2020-09-28 13:11:23 +0200[diff] [blame]61 </style>
Andreu Huguet00f83832020-09-27 21:06:54 +0200[diff] [blame]62
Andreu Huguet99c8fc22020-09-28 19:41:28 +0200[diff] [blame]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 "subject": "",
77 "number": "",
78 "letter": ""
79 };
80
81 function clickButton(element) {
82 var parent = element.currentTarget.parent;
83 var id = element.currentTarget.id;
84 var final_text = (id.split("-")[0] == "subject" ? $("#" + id + " > .message-header").text() : id.split("-")[1]);
85 var room_text = $("#" + id).find(".room").text();
86
87 if (parent == "subject-container") {
88 // Canvi de background del button
89 $(".current-subject").css("background-color", "white");
90 $("#subject-container .complex-button").removeClass("is-link")
91 $("#" + id).addClass("is-link");
92 // Canvi del text al final
93 $("#subject-final").html(final_text);
94 $("#classroom-final").html(room_text);
95 // Canvi JSON
96 final_JSON["subject"] = final_text;
97 // Anchor següent pregunta
98 switchSection("section-2");
99 } else if (parent == "number-container") {
100 // Canvi de background del button
101 $("#number-container .button").removeClass("is-link is-light is-active")
102 $("#" + id).addClass("is-link is-light is-active");
103 // Canvi del text al final
104 $("#number-final").html(final_text);
105 // Canvi JSON
106 final_JSON["number"] = final_text;
107 // Anchor següent pregunta
108 switchSection("section-send");
109 } else if (parent == "letter-container") {
110 // Canvi de background del button
111 $("#letter-container .button").removeClass("is-link is-light is-active")
112 $("#" + id).addClass("is-link is-light is-active");
113 // Canvi del text al final
114 $("#letter-final").html(final_text);
115 // Canvi JSON
116 final_JSON["letter"] = final_text;
117 // Anchor següent pregunta
118 switchSection("section-3");
119 }
120 }
121
122 function formatDate(d) {
123 var str = "";
124 if (d.getHours() < 10) str += "0";
125 str += d.getHours();
126 str += ":";
127 if (d.getMinutes() < 10) str += "0";
128 str += d.getMinutes();
129 return str;
130 }
avm999638f374102020-09-28 22:03:56 +0200[diff] [blame^]131
132 var api_url;
133
134 window.addEventListener('load', _ => {
Andreu Huguet99c8fc22020-09-28 19:41:28 +0200[diff] [blame]135 // Check if user is signed in
avm999638f374102020-09-28 22:03:56 +0200[diff] [blame^]136 if (localStorage.getItem('devMode') == 'true') {
137 var banner = document.getElementById('dev-mode');
138 banner.addEventListener('click', _ => {
139 localStorage.devMode = 'false';
140 location.reload();
141 });
142 banner.classList.remove('hidden');
143 api_url = localStorage.getItem('apiUrl') || 'https://covid-tracability-backend-dev.sandbox.avm99963.com/api/v1/'
144 } else {
145 api_url = "https://covid-tracability-backend-prod.sandbox.avm99963.com/api/v1/";
146 }
Andreu Huguet99c8fc22020-09-28 19:41:28 +0200[diff] [blame]147 fetch(api_url + "isSignedIn")
148 .then(response => response.json())
149 .then(data => {
150 if (!data.payload.signedIn) {
151 console.log("Not signed in!");
avm999638f374102020-09-28 22:03:56 +0200[diff] [blame^]152 fetch(api_url + "getAuthUrl")
153 .then(response => response.json())
154 .then(data => {
155 // TODO: redirect here
156 // alert(data.payload.url);
157 });
Andreu Huguet99c8fc22020-09-28 19:41:28 +0200[diff] [blame]158 }
Andreu Huguet99c8fc22020-09-28 19:41:28 +0200[diff] [blame]159 });
160
161 fetch(api_url + "getCurrentClasses")
162 .then(response => response.json())
163 .then(data => {
164 for (var classe of data.payload.classes) {
165 console.log(classe);
166
167 var hora_inici = formatDate(new Date(parseInt(classe.begins)*1000));
168 var hora_final = formatDate(new Date(parseInt(classe.ends)*1000));
169 var today = new Date().toLocaleDateString();
170
171 // Canvi de final
172 $("#date-final").text(today)
173 $("#time-final").text(hora_inici + " - " + hora_final);
174
175 $("#subject-container").append(
176 "<div class='message complex-button' id='subject-" + classe.subject_id + "-" + classe.room + "'>" +
177 "<div class='message-header'>" + classe.friendly_name + "</div>" +
178 "<div class='message-body'>" +
179 "<div>Aula <span class='room'>" + classe.room + "</span></div>" +
180 "<div>" + hora_inici + " - " + hora_final + "</div>" +
181 "</div>" +
182 "</div>"
183 );
184 }
185
186 var elements = document.getElementsByClassName("button");
187 Array.from(elements).forEach(function(element) {
188 element.addEventListener('click', clickButton);
189 element.parent = element.parentNode.id;
190 });
191 var elements = document.getElementsByClassName("complex-button");
192 Array.from(elements).forEach(function(element) {
193 element.addEventListener('click', clickButton);
194 element.parent = element.parentNode.id;
195 });
196 });
avm999638f374102020-09-28 22:03:56 +0200[diff] [blame^]197 });
Andreu Huguet99c8fc22020-09-28 19:41:28 +0200[diff] [blame]198 </script>
avm999638f374102020-09-28 22:03:56 +0200[diff] [blame^]199
200 <span id="dev-mode" class="hidden">Dev mode</span>
Andreu Huguet99c8fc22020-09-28 19:41:28 +0200[diff] [blame]201
Ferran López5b9bcfa2020-09-28 13:11:23 +0200[diff] [blame]202 <nav class="navbar is-link">
203 <div class="navbar-brand">
204 <div class="navbar-item has-text-weight-bold">Traçabilitat DAFME</div>
205 </div>
206 </nav>
207
208 <section id="section-1" class="section">
Andreu Huguetcb95ed02020-09-28 14:15:20 +0200[diff] [blame]209 <!--
Ferran López5b9bcfa2020-09-28 13:11:23 +0200[diff] [blame]210 <div class="field has-addons">
211 <p class="control">
212 <button class="button">&lt;</button>
213 </p>
214 <p class="control">
215 <input type="date" class="button">
216 </p>
217 <p class="control">
218 <button class="button">&gt;</button>
219 </p>
220 </div>
221 <div class="field has-addons">
222 <p class="control">
223 <button class="button">&lt;</button>
224 </p>
225 <p class="control">
226 <input type="button" class="button" value="08:00 - 08:30">
227 </p>
228 <p class="control">
229 <button class="button">&gt;</button>
230 </p>
231 </div><br>
Andreu Huguetcb95ed02020-09-28 14:15:20 +0200[diff] [blame]232 -->
Andreu Huguet99c8fc22020-09-28 19:41:28 +0200[diff] [blame]233 <div id="subject-container" class="grid buttons"></div><br>
Ferran López5b9bcfa2020-09-28 13:11:23 +0200[diff] [blame]234
235 </section>
236
237 <section id="section-2" class="section" style="display: none;">
Andreu Huguetcb95ed02020-09-28 14:15:20 +0200[diff] [blame]238 <button class="button is-link is-light" onclick="switchSection('section-1')">Torna enrere (Classe)</button>
Ferran López5b9bcfa2020-09-28 13:11:23 +0200[diff] [blame]239
240 <div id="letter-container" class="buttons grid">
241 <button class="button" id="letter-A">A</button>
242 <button class="button" id="letter-B">B</button>
243 <button class="button" id="letter-C">C</button>
244 <button class="button" id="letter-D">D</button>
245 <button class="button" id="letter-E">E</button>
246 <button class="button" id="letter-F">F</button>
247 <button class="button" id="letter-G">G</button>
248 <button class="button" id="letter-H">H</button>
249 <button class="button" id="letter-I">I</button>
250 <button class="button" id="letter-J">J</button>
251 <button class="button" id="letter-K">K</button>
252 <button class="button" id="letter-L">L</button>
253 </div>
Ferran López5b9bcfa2020-09-28 13:11:23 +0200[diff] [blame]254 </section>
255
256 <section id="section-3" class="section" style="display: none;">
Andreu Huguetcb95ed02020-09-28 14:15:20 +0200[diff] [blame]257 <button class="button is-link is-light" onclick="switchSection('section-2')">Torna enrere (Lletra)</button>
258
Ferran López5b9bcfa2020-09-28 13:11:23 +0200[diff] [blame]259 <div id="number-container" class="buttons grid">
260 <button class="button" id="number-1">1</button>
261 <button class="button" id="number-2">2</button>
262 <button class="button" id="number-3">3</button>
263 <button class="button" id="number-4">4</button>
264 <button class="button" id="number-5">5</button>
265 <button class="button" id="number-6">6</button>
266 <button class="button" id="number-7">7</button>
267 <button class="button" id="number-8">8</button>
268 <button class="button" id="number-9">9</button>
269 <button class="button" id="number-10">10</button>
270 </div>
Ferran López5b9bcfa2020-09-28 13:11:23 +0200[diff] [blame]271 </section>
272 <section id="section-send" class="section" style="display: none;">
Andreu Huguetcb95ed02020-09-28 14:15:20 +0200[diff] [blame]273 <button class="button is-link is-light" onclick="switchSection('section-3')">Torna enrere (Número)</button>
274 <br/><br/>
Ferran López5b9bcfa2020-09-28 13:11:23 +0200[diff] [blame]275 <span class="has-text-weight-bold">Assignatura:</span>
276 <span id="subject-final">Àlgebra Lineal</span><br>
277 <span class="has-text-weight-bold">Aula:</span>
278 <span id="classroom-final">Dele</span><br>
279 <span class="has-text-weight-bold">Data:</span>
280 <span id="date-final">14/3/1879</span><br>
281 <span class="has-text-weight-bold">Hora:</span>
282 <span id="time-final">En <strong>algun moment</strong></span><br>
283 <span class="has-text-weight-bold">Posició:</span>
avm999638f374102020-09-28 22:03:56 +0200[diff] [blame^]284 <span id="letter-final">P</span><span id="number-final">2</span><br><br>
Ferran López5b9bcfa2020-09-28 13:11:23 +0200[diff] [blame]285
avm999638f374102020-09-28 22:03:56 +0200[diff] [blame^]286 <button id="send-button" class="button is-link is-large">Omple el formulari</button><br><br>
Ferran López5b9bcfa2020-09-28 13:11:23 +0200[diff] [blame]287
Andreu Huguetcb95ed02020-09-28 14:15:20 +0200[diff] [blame]288 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>
Ferran López5b9bcfa2020-09-28 13:11:23 +0200[diff] [blame]289 </section>
290
Ferran López5b9bcfa2020-09-28 13:11:23 +0200[diff] [blame]291 <script>
292 var current_section = "section-1";
Andreu Huguet00f83832020-09-27 21:06:54 +0200[diff] [blame]293
Ferran López5b9bcfa2020-09-28 13:11:23 +0200[diff] [blame]294 function toggleVisibility(id) {
295 var x = document.getElementById(id);
296 if (x.style.display === "none") {
297 x.style.display = "block";
298 } else {
299 x.style.display = "none";
300 }
Andreu Huguet00f83832020-09-27 21:06:54 +0200[diff] [blame]301 }
Ferran López5b9bcfa2020-09-28 13:11:23 +0200[diff] [blame]302
303 function switchSection(s) {
Andreu Huguetcb95ed02020-09-28 14:15:20 +0200[diff] [blame]304 setTimeout(function(){
305 toggleVisibility(current_section);
306 toggleVisibility(s);
307 current_section = s;
308 }, 75);
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]309 }
Ferran López5b9bcfa2020-09-28 13:11:23 +0200[diff] [blame]310
Andreu Huguet68026c02020-09-28 00:59:21 +0200[diff] [blame]311 function sendForm(data) {
312 // Add subject to user
313 fetch(api_url + "addUserSubject", {
314 "method": "POST",
315 "body": JSON.stringify({
316 subject: data["subject"]
317 }),
318 "mode": "cors",
319 "credentials": "include"
320 })
321 .then(res => res.json())
322 .then(json => {
323 console.log("Subject added to user: ", json);
324 // TODO: Redirect to Google Forms
Andreu Huguetcb95ed02020-09-28 14:15:20 +0200[diff] [blame]325 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";
Andreu Huguet68026c02020-09-28 00:59:21 +0200[diff] [blame]326 window.location.href = formulari_link;
327 });
328 }
329
Andreu Huguet99c8fc22020-09-28 19:41:28 +0200[diff] [blame]330 document.getElementById("send-button").addEventListener('click', function (el) {
avm999638f374102020-09-28 22:03:56 +0200[diff] [blame^]331 document.getElementById('send-button').classList.add('is-loading');
332
Andreu Huguet68026c02020-09-28 00:59:21 +0200[diff] [blame]333 // TODO: emplenar això amb informació real
334 sendForm({
335 "aula": "001",
336 "subject": 1,
337 "data": "16/01/2020",
338 "hora-inici": "9:00",
339 "hora-final": "10:00",
340 "seient": "7D"
341 });
342 });
343 </script>
Andreu Huguet00f83832020-09-27 21:06:54 +0200[diff] [blame]344 </body>
Ferran López5b9bcfa2020-09-28 13:11:23 +0200[diff] [blame]345</html>