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