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