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