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