Gitiles
Code Review Sign In
gerrit.avm99963.com / delefme-covid-tracability / main / 68026c09da0cc7210d9b8f01295b2d8dc0f3366d / . / nova-ui.html
blob: 6a357e2731144c6c551e690140b47d1513fbbb00 [file] [log] [blame]
Andreu Huguet00f83832020-09-27 21:06:54 +0200[diff] [blame]1<!DOCTYPE html>
2<html lang="ca">
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <!-- Load Jquery -->
7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
8
Andreu Huguet68026c02020-09-28 00:59:21 +0200[diff] [blame^]9 <script>
10 // Check if user is signed in
11 var api_url = "https://covid-tracability-backend-dev.sandbox.avm99963.com/api/v1/";
12 fetch(api_url + "isSignedIn")
13 .then(response => response.json())
14 .then(data => {
15 if (!data.payload.signedIn) {
16 console.log("Not signed in!");
17 return fetch(api_url + "getAuthUrl");
18 }
19 })
20 .then(response => response.json())
21 .then(data => {
22 // TODO: redirect here
23 alert(data.payload.url);
24 });
25 </script>
26
Andreu Huguet00f83832020-09-27 21:06:54 +0200[diff] [blame]27 <style>
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]28 body {
29 background-color: lightgray;
30 }
31
32 #outter-container {
33 margin: 40px 20px;
34 }
35
36 #inner-container {
Andreu Huguet00f83832020-09-27 21:06:54 +0200[diff] [blame]37 width: 80%;
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]38 background-color: white;
Andreu Huguet68026c02020-09-28 00:59:21 +0200[diff] [blame^]39 padding: 20px 50px;
Andreu Huguet00f83832020-09-27 21:06:54 +0200[diff] [blame]40 margin: 0 auto;
41 }
42
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]43 .label, .final {
44 font-size: 36px;
45 }
46
Andreu Huguet68026c02020-09-28 00:59:21 +0200[diff] [blame^]47 .label {
48 padding-top: 50px;
49 }
50
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]51 .final {
52 color: gray;
53 }
54
55 section {
56 padding: 10px 0;
57 }
58
59 .container {
Andreu Huguet00f83832020-09-27 21:06:54 +0200[diff] [blame]60 /* flexbox setup */
61 display: -webkit-flex;
62 -webkit-flex-direction: row;
63
64 display: flex;
65 flex-direction: row;
66 flex-wrap: wrap;
67
68 justify-content: center;
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]69 align-items : center;
70
71 height: 75vh;
72 overflow-y: auto;
Andreu Huguet68026c02020-09-28 00:59:21 +0200[diff] [blame^]73 margin: 50px 0;
Andreu Huguet00f83832020-09-27 21:06:54 +0200[diff] [blame]74 }
75
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]76 .button {
77 border: solid 2px #26bdff;
78 color: black;
79 font-size: 5vw;
80
81 flex: 1 0 20%;
Andreu Huguet00f83832020-09-27 21:06:54 +0200[diff] [blame]82 margin: 20px;
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]83 padding: 40px 20px;
Andreu Huguet00f83832020-09-27 21:06:54 +0200[diff] [blame]84
85 vertical-align: middle;
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]86 text-align: center;
87 }
88
89 .selected {
90 background-color: #c3ddff;
91 }
92
93 #subject-container .button {
Andreu Huguet00f83832020-09-27 21:06:54 +0200[diff] [blame]94 text-align: left;
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]95 flex: 1 0 20%;
96 height: auto;
Andreu Huguet00f83832020-09-27 21:06:54 +0200[diff] [blame]97 }
98
99 .current-subject .title {
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]100 font-size: 18px;
Andreu Huguet00f83832020-09-27 21:06:54 +0200[diff] [blame]101 }
102 .current-subject .subtitle {
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]103 font-size: 14px;
Andreu Huguet00f83832020-09-27 21:06:54 +0200[diff] [blame]104 }
Andreu Huguet5c866a12020-09-27 23:59:04 +0200[diff] [blame]105
106 #send-button {
107 font-size: 48px;
108 width: 80%;
Andreu Huguet68026c02020-09-28 00:59:21 +0200[diff] [blame^]109 margin: 50px auto;
Andreu Huguet5c866a12020-09-27 23:59:04 +0200[diff] [blame]110 display: block;
Andreu Huguet5c866a12020-09-27 23:59:04 +0200[diff] [blame]111 padding: 50px 30px;
112 background-color: #26bdff;
113 color: white;
114 }
Andreu Huguet00f83832020-09-27 21:06:54 +0200[diff] [blame]115 </style>
116 </head>
117
118 <body>
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]119 <div id="outter-container">
120 <div id="inner-container">
121 <section id="subject-section">
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]122 <div id="subject-container" class="container">
Andreu Huguet5c866a12020-09-27 23:59:04 +0200[diff] [blame]123 <div class="current-subject button" id="subject-1" onclick="js:clickButton(this.parentNode.id, this.id)">
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]124 <div class="title">Àlgebra Lineal</div>
125 <div class="subtitle">Aula 001</div>
126 <div class="subtitle">9.00 - 10.00</div>
127 </div>
Andreu Huguet5c866a12020-09-27 23:59:04 +0200[diff] [blame]128 <div class="current-subject button" id="subject-2">
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]129 <div class="title">Àlgebra Lineal</div>
130 <div class="subtitle">Aula 001</div>
131 <div class="subtitle">9.00 - 10.00</div>
132 </div>
Andreu Huguet5c866a12020-09-27 23:59:04 +0200[diff] [blame]133 <div class="current-subject button" id="subject-3">
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]134 <div class="title">Àlgebra Lineal</div>
135 <div class="subtitle">Aula 001</div>
136 <div class="subtitle">9.00 - 10.00</div>
137 </div>
Andreu Huguet5c866a12020-09-27 23:59:04 +0200[diff] [blame]138 <div class="current-subject button" id="subject-4">
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]139 <div class="title">Àlgebra Lineal</div>
140 <div class="subtitle">Aula 001</div>
141 <div class="subtitle">9.00 - 10.00</div>
142 </div>
143 </div>
Andreu Huguet68026c02020-09-28 00:59:21 +0200[diff] [blame^]144 <div class="showhide">
145 <span id="subject-label" class="label">Assignatura (Aula):</span>
146 <span id="subject-final" class="final"></span>
147 </div>
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]148 </section>
149 <section id="number-section">
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]150 <div id="number-container" class="container">
Andreu Huguet5c866a12020-09-27 23:59:04 +0200[diff] [blame]151 <div class="number button" id="number-1">1</div>
152 <div class="number button" id="number-2">2</div>
153 <div class="number button" id="number-3">3</div>
154 <div class="number button" id="number-4">4</div>
155 <div class="number button" id="number-5">5</div>
156 <div class="number button" id="number-6">6</div>
157 <div class="number button" id="number-7">7</div>
158 <div class="number button" id="number-8">8</div>
159 <div class="number button" id="number-9">9</div>
160 <div class="number button" id="number-10">10</div>
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]161 </div>
Andreu Huguet68026c02020-09-28 00:59:21 +0200[diff] [blame^]162 <div class="showhide">
163 <span id="number-label" class="label">Número de seient:</span>
164 <span id="number-final" class="final"></span>
165 </div>
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]166 </section>
167 <section id="letter-section">
Andreu Huguet5c866a12020-09-27 23:59:04 +0200[diff] [blame]168 <div id="letter-container" class="container">
169 <div class="letter button" id="letter-A">A</div>
170 <div class="letter button" id="letter-B">B</div>
171 <div class="letter button" id="letter-C">C</div>
172 <div class="letter button" id="letter-D">D</div>
173 <div class="letter button" id="letter-E">E</div>
174 <div class="letter button" id="letter-F">F</div>
175 <div class="letter button" id="letter-G">G</div>
176 <div class="letter button" id="letter-H">H</div>
177 <div class="letter button" id="letter-I">I</div>
178 <div class="letter button" id="letter-J">J</div>
179 <div class="letter button" id="letter-K">K</div>
180 <div class="letter button" id="letter-L">L</div>
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]181 </div>
Andreu Huguet68026c02020-09-28 00:59:21 +0200[diff] [blame^]182 <div class="showhide">
183 <span id="letter-label" class="label">Lletra de seient:</span>
184 <span id="letter-final" class="final"></span>
185 </div>
Andreu Huguet0062c1c2020-09-27 22:52:58 +0200[diff] [blame]186 </section>
187 <section id="date-section">
188 <div class="showhide">
189 <span id="date-label" class="label">Data:</span>
190 <span id="date-final" class="final">16/01/2020</span>
191 </div>
192 </section>
193 <section id="hour-section">
194 <div class="showhide">
195 <span id="hour-label" class="label">Hora:</span>
196 <span id="hour-final" class="final">09.00 - 10.00</span>
197 </div>
198 </section>
Andreu Huguet5c866a12020-09-27 23:59:04 +0200[diff] [blame]199 <button id="send-button">
200 <span>Anar al formulari</span>
201 </button>
Andreu Huguet00f83832020-09-27 21:06:54 +0200[diff] [blame]202 </div>
203 </div>
Andreu Huguet5c866a12020-09-27 23:59:04 +0200[diff] [blame]204
Andreu Huguet68026c02020-09-28 00:59:21 +0200[diff] [blame^]205 <script>
Andreu Huguet5c866a12020-09-27 23:59:04 +0200[diff] [blame]206 var subjects_texts = {
207 "subject-1": "Àlgebra",
208 "subject-2": "Càlcul I",
209 "subject-3": "Topologia",
210 "subject-4": "Informàtica"
211 };
212
Andreu Huguet68026c02020-09-28 00:59:21 +0200[diff] [blame^]213 function sendForm(data) {
214 // Add subject to user
215 fetch(api_url + "addUserSubject", {
216 "method": "POST",
217 "body": JSON.stringify({
218 subject: data["subject"]
219 }),
220 "mode": "cors",
221 "credentials": "include"
222 })
223 .then(res => res.json())
224 .then(json => {
225 console.log("Subject added to user: ", json);
226 // TODO: Redirect to Google Forms
227 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]";
228 window.location.href = formulari_link;
229 });
230 }
231
232 document.getElementById("send-button").addEventListener('click', function (el) {
233 // TODO: emplenar això amb informació real
234 sendForm({
235 "aula": "001",
236 "subject": 1,
237 "data": "16/01/2020",
238 "hora-inici": "9:00",
239 "hora-final": "10:00",
240 "seient": "7D"
241 });
242 });
243 </script>
244
245 <script>
Andreu Huguet5c866a12020-09-27 23:59:04 +0200[diff] [blame]246 var elements = document.getElementsByClassName("button");
247 Array.from(elements).forEach(function(element) {
248 element.addEventListener('click', clickButton);
249 element.parent = element.parentNode.id;
250 console.log(element.id);
251 });
252
253 function clickButton(element) {
254 var parent = element.currentTarget.parent;
255 var id = element.currentTarget.id;
256 var final_text = (id.split("-")[0] == "subject" ? subjects_texts[id] : id.split("-")[1]);
257
258 console.log(parent);
259 console.log(id);
260
261 if (parent == "subject-container") {
262 // Canvi de background del button
263 $(".current-subject").css("background-color", "white");
264 $("#" + id).css("background-color", "#c3ddff");
265 // Canvi del text al final
266 $("#" + parent).parent().find(".final").html(final_text);
267 // Canvi JSON
268 // TODO
269 // Anchor següent pregunta
Andreu Huguet68026c02020-09-28 00:59:21 +0200[diff] [blame^]270 document.getElementById("subject-label").scrollIntoView();
Andreu Huguet5c866a12020-09-27 23:59:04 +0200[diff] [blame]271 } else if (parent == "number-container") {
272 // Canvi de background del button
273 $(".number").css("background-color", "white");
274 $("#" + id).css("background-color", "#c3ddff");
275 // Canvi del text al final
276 $("#" + parent).parent().find(".final").html(final_text);
277 // Canvi JSON
278 // TODO
279 // Anchor següent pregunta
Andreu Huguet68026c02020-09-28 00:59:21 +0200[diff] [blame^]280 document.getElementById("number-label").scrollIntoView();
Andreu Huguet5c866a12020-09-27 23:59:04 +0200[diff] [blame]281 } else if (parent == "letter-container") {
282 // Canvi de background del button
283 $(".letter").css("background-color", "white");
284 $("#" + id).css("background-color", "#c3ddff");
285 // Canvi del text al final
286 $("#" + parent).parent().find(".final").html(final_text);
287 // Canvi JSON
288 // TODO
289 // Anchor següent pregunta
Andreu Huguet68026c02020-09-28 00:59:21 +0200[diff] [blame^]290 document.getElementById("letter-label").scrollIntoView();
Andreu Huguet5c866a12020-09-27 23:59:04 +0200[diff] [blame]291 }
292 }
293 </script>
Andreu Huguet00f83832020-09-27 21:06:54 +0200[diff] [blame]294 </body>
295</html>