Ferran López | a514bea | 2020-10-03 23:02:10 +0200 | [diff] [blame] | 1 | |
Ferran López | f8443fd | 2020-10-03 23:26:49 +0200 | [diff] [blame] | 2 | |
| 3 | const idsFormulari = { |
| 4 | room: "1063142948", |
| 5 | day: "2115504093", |
| 6 | begins: "1749141911", |
| 7 | ends: "1827359679", |
| 8 | rows: { |
| 9 | A: "208184485", |
| 10 | B: "1077148310", |
| 11 | C: "642851281", |
| 12 | D: "1686039024", |
| 13 | E: "697835787", |
| 14 | F: "1511799646", |
| 15 | G: "809853432", |
| 16 | H: "182597499", |
| 17 | I: "1890539481", |
| 18 | J: "529159478", |
| 19 | K: "1615241874", |
| 20 | L: "1334263875" |
| 21 | }, |
| 22 | notes: "1600275159" |
| 23 | }; |
| 24 | |
| 25 | const formBaseUrl = "https://docs.google.com/forms/d/e/1FAIpQLSfT9o287VqLyhwR8LPdloAQWhuqCgA3NfdhgP5vb9_sVQHL-g/viewform"; |
Ferran López | a514bea | 2020-10-03 23:02:10 +0200 | [diff] [blame] | 26 | |
Ferran López | 7a4f60f | 2020-10-04 01:55:47 +0200 | [diff] [blame^] | 27 | const MIN_HOUR = 8; |
| 28 | const MAX_HOUR = 20; |
| 29 | |
Ferran López | a514bea | 2020-10-03 23:02:10 +0200 | [diff] [blame] | 30 | var final_JSON = { |
| 31 | "class": null, |
| 32 | "number": "", |
| 33 | "letter": "" |
| 34 | }; |
| 35 | |
Ferran López | f8443fd | 2020-10-03 23:26:49 +0200 | [diff] [blame] | 36 | var current_section = "section-1"; |
| 37 | |
Ferran López | 4138be8 | 2020-10-03 23:48:54 +0200 | [diff] [blame] | 38 | var repeated_subjects; |
Ferran López | 7a4f60f | 2020-10-04 01:55:47 +0200 | [diff] [blame^] | 39 | var current_time; |
| 40 | |
Ferran López | f8443fd | 2020-10-03 23:26:49 +0200 | [diff] [blame] | 41 | |
Ferran López | a514bea | 2020-10-03 23:02:10 +0200 | [diff] [blame] | 42 | function fillInSummary() { |
Ferran López | 697111d | 2020-10-03 23:08:26 +0200 | [diff] [blame] | 43 | var begins = new Date(parseInt(final_JSON.class.begins)*1000); |
| 44 | var ends = new Date(parseInt(final_JSON.class.ends)*1000); |
Ferran López | a514bea | 2020-10-03 23:02:10 +0200 | [diff] [blame] | 45 | |
Ferran López | 697111d | 2020-10-03 23:08:26 +0200 | [diff] [blame] | 46 | document.getElementById('subject-final').textContent = final_JSON.class.friendly_name || final_JSON.class.calendar_name; |
| 47 | document.getElementById('classroom-final').textContent = final_JSON.class.room; |
| 48 | document.getElementById('date-final').textContent = begins.toLocaleDateString(); |
Ferran López | 7a4f60f | 2020-10-04 01:55:47 +0200 | [diff] [blame^] | 49 | document.getElementById('time-final').textContent = formatTime(begins) + ' - ' + formatTime(ends); |
Ferran López | 697111d | 2020-10-03 23:08:26 +0200 | [diff] [blame] | 50 | document.getElementById('letter-final').textContent = final_JSON.letter; |
| 51 | document.getElementById('number-final').textContent = final_JSON.number; |
Ferran López | a514bea | 2020-10-03 23:02:10 +0200 | [diff] [blame] | 52 | } |
| 53 | |
| 54 | function clickButton(element) { |
| 55 | var btn = element.currentTarget; |
| 56 | var parent = btn.parent; |
| 57 | |
| 58 | if (parent == "subject-container") { |
| 59 | // Canvi de background del button |
| 60 | var selectedClass = JSON.parse(btn.getAttribute('data-class')); |
| 61 | $("#subject-container .complex-button").removeClass("is-link") |
| 62 | btn.classList.add("is-link"); |
| 63 | // Canvi JSON |
| 64 | final_JSON["class"] = selectedClass; |
Ferran López | 4138be8 | 2020-10-03 23:48:54 +0200 | [diff] [blame] | 65 | // Missatge advertència classe repetida |
| 66 | if (repeated_subjects.has(selectedClass.id)) { |
| 67 | document.getElementById('repeated-subject-warning').classList.remove('hidden'); |
| 68 | document.getElementById('repeated-subject-warning-class').textContent = selectedClass.room; |
| 69 | } else { |
| 70 | document.getElementById('repeated-subject-warning').classList.add('hidden'); |
| 71 | } |
Ferran López | a514bea | 2020-10-03 23:02:10 +0200 | [diff] [blame] | 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 | btn.classList.add("is-link", "is-light", "is-active"); |
| 78 | // Canvi JSON |
| 79 | final_JSON["number"] = btn.getAttribute('data-number'); |
| 80 | // Introducció de totes les dades al resum final |
| 81 | fillInSummary(); |
| 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 | btn.classList.add("is-link", "is-light", "is-active"); |
| 88 | // Canvi JSON |
| 89 | final_JSON["letter"] = btn.getAttribute('data-letter'); |
| 90 | // Anchor següent pregunta |
| 91 | switchSection("section-3"); |
| 92 | } |
| 93 | } |
| 94 | |
Ferran López | f8443fd | 2020-10-03 23:26:49 +0200 | [diff] [blame] | 95 | function switchSection(s) { |
| 96 | setTimeout(function(){ |
| 97 | document.getElementById(current_section).classList.add('hidden'); |
| 98 | document.getElementById(s).classList.remove('hidden'); |
| 99 | current_section = s; |
| 100 | }, 75); |
| 101 | } |
| 102 | |
Ferran López | 4138be8 | 2020-10-03 23:48:54 +0200 | [diff] [blame] | 103 | function findRepeatedSubjects(classes) { |
| 104 | var rep = new Set(); |
Ferran López | f8443fd | 2020-10-03 23:26:49 +0200 | [diff] [blame] | 105 | for (var [i, classe] of classes.entries()) { |
Ferran López | 4138be8 | 2020-10-03 23:48:54 +0200 | [diff] [blame] | 106 | if (i > 0 && classes[i-1].calendar_name == classe.calendar_name) { |
| 107 | rep.add(classe.id); |
| 108 | rep.add(classes[i-1].id); |
| 109 | } |
| 110 | } |
| 111 | return rep; |
| 112 | } |
| 113 | |
| 114 | function buildSubjectContainer(classes, repeated) { |
| 115 | for (var classe of classes) { |
Ferran López | 7a4f60f | 2020-10-04 01:55:47 +0200 | [diff] [blame^] | 116 | var hora_inici = formatTime(new Date(parseInt(classe.begins)*1000)); |
| 117 | var hora_final = formatTime(new Date(parseInt(classe.ends)*1000)); |
Ferran López | f8443fd | 2020-10-03 23:26:49 +0200 | [diff] [blame] | 118 | |
| 119 | var classeDiv = document.createElement('div'); |
| 120 | classeDiv.classList.add('message', 'complex-button'); |
| 121 | classeDiv.id = 'subject-' + classe.subject_id + '-' + classe.room; |
| 122 | classeDiv.setAttribute('data-class', JSON.stringify(classe)); |
| 123 | |
| 124 | var header = document.createElement('div'); |
| 125 | header.classList.add('message-header'); |
| 126 | header.textContent = classe.friendly_name || classe.calendar_name; |
| 127 | |
| 128 | var body = document.createElement('div'); |
| 129 | body.classList.add('message-body'); |
| 130 | |
| 131 | var div1 = document.createElement('div'); |
| 132 | var span = document.createElement('span'); |
| 133 | span.textContent = classe.room; |
| 134 | |
Ferran López | 4138be8 | 2020-10-03 23:48:54 +0200 | [diff] [blame] | 135 | if (repeated.has(classe.id)) { |
Ferran López | f8443fd | 2020-10-03 23:26:49 +0200 | [diff] [blame] | 136 | div1.classList.add('has-text-danger', 'has-text-weight-bold'); |
| 137 | } |
| 138 | |
| 139 | div1.textContent = 'Aula '; |
| 140 | div1.appendChild(span); |
| 141 | |
| 142 | var div2 = document.createElement('div'); |
| 143 | div2.textContent = hora_inici + ' - ' + hora_final; |
| 144 | |
| 145 | body.appendChild(div1); |
| 146 | body.appendChild(div2); |
| 147 | |
| 148 | classeDiv.appendChild(header); |
| 149 | classeDiv.appendChild(body); |
| 150 | |
| 151 | document.getElementById("subject-container").appendChild(classeDiv); |
| 152 | } |
| 153 | |
| 154 | var elements = document.getElementsByClassName("button"); |
| 155 | Array.from(elements).forEach(function(element) { |
| 156 | element.addEventListener('click', clickButton); |
| 157 | element.parent = element.parentNode.id; |
| 158 | }); |
| 159 | var elements = document.getElementsByClassName("complex-button"); |
| 160 | Array.from(elements).forEach(function(element) { |
| 161 | element.addEventListener('click', clickButton); |
| 162 | element.parent = element.parentNode.id; |
| 163 | }); |
| 164 | } |
| 165 | |
Ferran López | 7a4f60f | 2020-10-04 01:55:47 +0200 | [diff] [blame^] | 166 | function getDefaultTime() { |
| 167 | var time = new Date(); |
| 168 | time.setSeconds(0); |
| 169 | if (time.getMinutes() < 30) time.setMinutes(0); |
| 170 | else time.setMinutes(30); |
| 171 | if (time.getHours() < MIN_HOUR) { |
| 172 | time.setHours(MIN_HOUR); |
| 173 | time.setMinutes(0); |
| 174 | } |
| 175 | if (time.getHours() >= MAX_HOUR) { |
| 176 | time.setHours(MAX_HOUR - 1); |
| 177 | time.setMinutes(30); |
| 178 | } |
| 179 | return time |
| 180 | } |
| 181 | |
| 182 | function buildTimeSelector(date) { |
| 183 | document.getElementById("date-selector").value = formatDate(date); |
| 184 | var end_time = new Date(date.getTime() + 30*60000); // 1 min = 60000 ms |
| 185 | document.getElementById("time-selector").value = formatTime(date) + " - " + formatTime(end_time); |
| 186 | } |
| 187 | |
| 188 | function addDateEventListeners(date) { |
| 189 | document.getElementById("date-prev").addEventListener('click', function (el) { |
| 190 | current_time = new Date(current_time.getTime() - 24*60*60000); |
| 191 | buildTimeSelector(current_time); |
| 192 | fetchClasses(); |
| 193 | }); |
| 194 | document.getElementById("date-next").addEventListener('click', function (el) { |
| 195 | current_time = new Date(current_time.getTime() + 24*60*60000); |
| 196 | buildTimeSelector(current_time); |
| 197 | fetchClasses(); |
| 198 | }); |
| 199 | document.getElementById("time-prev").addEventListener('click', function (el) { |
| 200 | current_time = new Date(current_time.getTime() - 30*60000); |
| 201 | if (current_time.getHours() < MIN_HOUR) { |
| 202 | current_time = new Date(current_time.getTime() - 24*60*60000); |
| 203 | current_time.setHours(MAX_HOUR - 1); |
| 204 | current_time.setMinutes(30); |
| 205 | } |
| 206 | buildTimeSelector(current_time); |
| 207 | fetchClasses(); |
| 208 | }); |
| 209 | document.getElementById("time-next").addEventListener('click', function (el) { |
| 210 | current_time = new Date(current_time.getTime() + 30*60000); |
| 211 | if (current_time.getHours() >= MAX_HOUR) { |
| 212 | current_time = new Date(current_time.getTime() + 24*60*60000); |
| 213 | current_time.setHours(MIN_HOUR); |
| 214 | current_time.setMinutes(0); |
| 215 | } |
| 216 | buildTimeSelector(current_time); |
| 217 | fetchClasses(); |
| 218 | }); |
| 219 | } |
| 220 | |
| 221 | function formatTime(d) { |
| 222 | return d.toLocaleTimeString("ca", {timeStyle: 'short'}); |
| 223 | /* var str = ""; |
Ferran López | a514bea | 2020-10-03 23:02:10 +0200 | [diff] [blame] | 224 | str += d.getHours(); |
| 225 | str += ":"; |
| 226 | if (d.getMinutes() < 10) str += "0"; |
Ferran López | 7a4f60f | 2020-10-04 01:55:47 +0200 | [diff] [blame^] | 227 | str += d.getMinutes(); |
| 228 | return str; */ |
| 229 | } |
| 230 | |
| 231 | function formatDate(d) { |
| 232 | return d.toLocaleDateString("ca"); |
| 233 | } |
| 234 | |
| 235 | function fetchClasses() { |
| 236 | fetch(api_url + "getCurrentClasses", { |
| 237 | "mode": "cors", |
| 238 | "credentials": "include" |
| 239 | }) |
| 240 | .then(response => response.json()) |
| 241 | .then(data => { |
| 242 | if (data.payload.classes.length == 0) { |
| 243 | document.getElementById('no-subjects').classList.remove('hidden'); |
| 244 | } else { |
| 245 | repeated_subjects = findRepeatedSubjects(data.payload.classes); |
| 246 | buildSubjectContainer(data.payload.classes, repeated_subjects); |
| 247 | document.getElementById('fme-maps-container').classList.remove('hidden'); |
| 248 | } |
| 249 | |
| 250 | }); |
Ferran López | a514bea | 2020-10-03 23:02:10 +0200 | [diff] [blame] | 251 | } |
| 252 | |
Ferran López | f8443fd | 2020-10-03 23:26:49 +0200 | [diff] [blame] | 253 | function onPageLoad() { |
Ferran López | a514bea | 2020-10-03 23:02:10 +0200 | [diff] [blame] | 254 | |
Ferran López | 697111d | 2020-10-03 23:08:26 +0200 | [diff] [blame] | 255 | // Check if user is signed in |
| 256 | if (localStorage.getItem('devMode') == 'true') { |
| 257 | var banner = document.getElementById('dev-mode'); |
| 258 | banner.addEventListener('click', _ => { |
| 259 | localStorage.devMode = 'false'; |
| 260 | location.reload(); |
| 261 | }); |
| 262 | banner.classList.remove('hidden'); |
| 263 | api_url = localStorage.getItem('apiUrl') || 'https://covid-tracability-backend-dev.sandbox.avm99963.com/api/v1/' |
| 264 | } else { |
| 265 | api_url = "https://covid-tracability-backend-prod.sandbox.avm99963.com/api/v1/"; |
| 266 | } |
Ferran López | 7a4f60f | 2020-10-04 01:55:47 +0200 | [diff] [blame^] | 267 | |
| 268 | current_time = getDefaultTime(); |
| 269 | buildTimeSelector(current_time); |
| 270 | |
Ferran López | 697111d | 2020-10-03 23:08:26 +0200 | [diff] [blame] | 271 | fetch(api_url + "isSignedIn", { |
| 272 | "mode": "cors", |
| 273 | "credentials": "include" |
| 274 | }) |
| 275 | .then(response => response.json()) |
| 276 | .then(data => { |
| 277 | if (!data.payload.signedIn) { |
| 278 | console.log("Not signed in!"); |
| 279 | fetch(api_url + "getAuthUrl", { |
| 280 | "mode": "cors", |
| 281 | "credentials": "include" |
| 282 | }) |
| 283 | .then(response => response.json()) |
| 284 | .then(data => { |
| 285 | // TODO: redirect here |
| 286 | // location.href = data.payload.url; |
| 287 | console.warn('Log in here: ', data.payload.url); |
| 288 | }); |
| 289 | } |
| 290 | }); |
Ferran López | a514bea | 2020-10-03 23:02:10 +0200 | [diff] [blame] | 291 | |
Ferran López | 7a4f60f | 2020-10-04 01:55:47 +0200 | [diff] [blame^] | 292 | fetchClasses(); |
Ferran López | f8443fd | 2020-10-03 23:26:49 +0200 | [diff] [blame] | 293 | } |
Ferran López | a514bea | 2020-10-03 23:02:10 +0200 | [diff] [blame] | 294 | |
Ferran López | f8443fd | 2020-10-03 23:26:49 +0200 | [diff] [blame] | 295 | function sendForm() { |
| 296 | // Add subject to user |
| 297 | fetch(api_url + "addUserSubject", { |
| 298 | "method": "POST", |
| 299 | "body": JSON.stringify({ |
| 300 | subject: final_JSON.class.subject_id |
| 301 | }), |
| 302 | "mode": "cors", |
| 303 | "credentials": "include" |
| 304 | }) |
| 305 | .then(res => res.json()) |
| 306 | .then(json => { |
| 307 | console.log("Subject added to user: ", json); |
| 308 | |
| 309 | var begins = new Date(parseInt(final_JSON.class.begins)*1000); |
| 310 | var ends = new Date(parseInt(final_JSON.class.ends)*1000); |
| 311 | |
| 312 | var params = new URLSearchParams(); |
| 313 | params.append("entry." + idsFormulari.room, final_JSON.class.room); // class, number, letter |
| 314 | params.append("entry." + idsFormulari.day, begins.getFullYear().toString() + '-' + (begins.getMonth() + 1).toString().padStart(2, "0") + '-' + begins.getDate().toString().padStart(2, "0")); |
Ferran López | 7a4f60f | 2020-10-04 01:55:47 +0200 | [diff] [blame^] | 315 | params.append("entry." + idsFormulari.begins, formatTime(begins)); |
| 316 | params.append("entry." + idsFormulari.ends, formatTime(ends)); |
Ferran López | f8443fd | 2020-10-03 23:26:49 +0200 | [diff] [blame] | 317 | params.append("entry." + idsFormulari.rows[final_JSON.letter], 'Columna ' + final_JSON.number); |
| 318 | // params.append("entry." + idsFormulari.notes, '[Autogenerat per delefme/covid-tracability -- Assignatura seleccionada: ' + (final_JSON.class.friendly_name || final_JSON.class.calendar_name) + ']'); |
| 319 | |
| 320 | var formulari_link = formBaseUrl + '?' + params.toString() + '#i1'; |
| 321 | window.location.href = formulari_link; |
| 322 | }); |
| 323 | } |
| 324 | |
| 325 | |
| 326 | function addEventListeners() { |
| 327 | window.addEventListener('load', onPageLoad); |
| 328 | |
| 329 | var elements = document.getElementsByClassName("button"); |
| 330 | Array.from(elements).forEach(function(element) { |
| 331 | element.addEventListener('click', clickButton); |
| 332 | element.parent = element.parentNode.id; |
| 333 | }); |
| 334 | |
| 335 | var elements = document.getElementsByClassName("complex-button"); |
| 336 | Array.from(elements).forEach(function(element) { |
| 337 | element.addEventListener('click', clickButton); |
| 338 | element.parent = element.parentNode.id; |
| 339 | }); |
| 340 | |
| 341 | document.getElementById("send-button").addEventListener('click', function (el) { |
Ferran López | bdd3acd | 2020-10-04 00:02:32 +0200 | [diff] [blame] | 342 | document.getElementById("send-button").classList.add('is-loading'); |
Ferran López | f8443fd | 2020-10-03 23:26:49 +0200 | [diff] [blame] | 343 | sendForm(); |
| 344 | }); |
Ferran López | 7a4f60f | 2020-10-04 01:55:47 +0200 | [diff] [blame^] | 345 | |
| 346 | addDateEventListeners(); |
Ferran López | f8443fd | 2020-10-03 23:26:49 +0200 | [diff] [blame] | 347 | } |
| 348 | |
| 349 | addEventListeners(); |