Merge pull request #15 from delefme/time-selection
Merge time selection feature into the master branch
diff --git a/css/bulma-adjustments.css b/css/bulma-adjustments.css
index 07e5e77..ff91e36 100644
--- a/css/bulma-adjustments.css
+++ b/css/bulma-adjustments.css
@@ -22,6 +22,36 @@
.buttons.grid .complex-button {
flex: 1 0 34%;
margin: 15px 10px;
+ min-width: min(100%, 300px);
+}
+
+.buttons.grid .complex-button.is-selected .message-header {
+ background-color: #3273dc;
+ color: #fff;
+}
+
+.buttons.grid .complex-button.is-selected .message-body.is-selected {
+ background-color: #eef3fc;
+ color: #2160c4;
+}
+
+.rooms-container {
+ display: flex;
+ flex-direction: row;
+}
+
+.rooms-container .message-body {
+ border-width: 0;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ flex-grow: 1;
+
+ cursor: pointer;
+}
+
+.rooms-container .message-body:not(:last-child) {
+ border-bottom-right-radius: 0;
+ border-right: solid 1px #4a4a4a;
}
.section {
diff --git a/index.html b/index.html
index 0e65137..7d822a7 100644
--- a/index.html
+++ b/index.html
@@ -3,17 +3,16 @@
<html lang="ca">
<head>
<meta charset="UTF-8">
- <title>Seients DAFME</title>
+ <title>Seients DAFME</title>
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="manifest" href="manifest.json">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="manifest" href="manifest.json">
- <!-- Apple web app -->
- <link rel="apple-touch-icon" href="./images/icon-64.png">
- <meta name="apple-mobile-web-app-title" content="Seients DAFME">
- <meta name="apple-mobile-web-app-capable" content="yes">
- <meta name="apple-mobile-web-app-status-bar-style" content="white">
-
+ <!-- Apple web app -->
+ <link rel="apple-touch-icon" href="./images/icon-64.png">
+ <meta name="apple-mobile-web-app-title" content="Seients DAFME">
+ <meta name="apple-mobile-web-app-capable" content="yes">
+ <meta name="apple-mobile-web-app-status-bar-style" content="white">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">
<link rel="stylesheet" href="./css/bulma-adjustments.css">
@@ -84,14 +83,6 @@
<section id="section-2" class="section is-hidden">
<button class="button is-link is-light" onclick="switchSection('section-1')">Torna enrere (Classe)</button>
- <div id="repeated-subject-warning" class="is-hidden">
- <br><article class="message is-warning">
- <div class="message-body">
- Heu triat una assignatura que es fa en dues aules alhora. Comproveu que sou a l'aula <strong id="repeated-subject-warning-class">aula</strong>.
- </div>
- </article>
- </div> -->
-
<div id="letter-container" class="buttons grid">
<button class="button" id="letter-A" data-letter="A">A</button>
<button class="button" id="letter-B" data-letter="B">B</button>
@@ -127,6 +118,13 @@
<section id="section-send" class="section is-hidden">
<button class="button is-link is-light" onclick="switchSection('section-3')">Torna enrere (Número)</button>
<br/><br/>
+ <div id="repeated-subject-warning" class="is-hidden">
+ <br><article class="message is-warning">
+ <div class="message-body">
+ Heu triat una assignatura que es fa en dues aules alhora. Comproveu que sou a l'aula <strong id="repeated-subject-warning-class">aula</strong>.
+ </div>
+ </article>
+ </div>
<span class="has-text-weight-bold">Assignatura:</span>
<span id="subject-final">ASSIGNATURA ESCOLLIDA</span><br>
<span class="has-text-weight-bold">Aula:</span>
diff --git a/js/build_page.js b/js/build_page.js
index 1e4df98..aedfbdb 100644
--- a/js/build_page.js
+++ b/js/build_page.js
@@ -43,7 +43,7 @@
document.getElementById('subject-final').textContent = final_JSON.class.friendly_name || final_JSON.class.calendar_name;
document.getElementById('classroom-final').textContent = final_JSON.class.room;
- document.getElementById('date-final').textContent = begins.toLocaleDateString();
+ document.getElementById('date-final').textContent = formatDate(begins);
document.getElementById('time-final').textContent = formatTime(begins) + ' - ' + formatTime(ends);
document.getElementById('letter-final').textContent = final_JSON.letter;
document.getElementById('number-final').textContent = final_JSON.number;
@@ -56,17 +56,11 @@
if (parent == "subject-container") {
// Canvi de background del button
var selectedClass = JSON.parse(btn.getAttribute('data-class'));
- $("#subject-container .complex-button").removeClass("is-link")
- btn.classList.add("is-link");
+ $("#subject-container .complex-button, #subject-container .message-body").removeClass("is-selected")
+ btn.classList.add('is-selected');
+ btn.parentNode.parentNode.classList.add('is-selected');
// Canvi JSON
final_JSON["class"] = selectedClass;
- // Missatge advertència classe repetida
- if (repeated_subjects.has(selectedClass.id)) {
- document.getElementById('repeated-subject-warning').classList.remove('is-hidden');
- document.getElementById('repeated-subject-warning-class').textContent = selectedClass.room;
- } else {
- document.getElementById('repeated-subject-warning').classList.add('is-hidden');
- }
// Anchor següent pregunta
switchSection("section-2");
} else if (parent == "number-container") {
@@ -109,80 +103,80 @@
return rep;
}
-function buildSubjectContainer(classes, repeated) {
- var duplicateSubjectBoolNext, duplicateSubjectBoolPrev;
- var duplicateSubjectCounter = 0;
-
- for (var [i, classe] of classes) {
- var hora_inici = formatDate(new Date(parseInt(classe.begins)*1000));
- var hora_final = formatDate(new Date(parseInt(classe.ends)*1000));
+function transformClasses(rawClasses) {
+ var classes = [];
+ rawClasses.forEach(c => {
+ var found = false;
+ for (var i = 0; i < classes.length; ++i) {
+ if ((classes[i][0].friendly_name || classes[i][0].calendar_name) == (c.friendly_name || c.calendar_name)) {
+ classes[i].push(c);
+ found = true;
+ break;
+ }
+ }
+
+ if (!found) {
+ classes.push([c]);
+ }
+ });
+
+ return classes;
+}
+
+function buildSubjectContainer(classes) {
+ // Flush existing classes
+ document.querySelectorAll('#subject-container .message').forEach(function(classe) {
+ classe.parentNode.removeChild(classe);
+ });
+
+ for (var uniqueClasses of classes) {
+ var firstClass = uniqueClasses[0];
+ var hora_inici = formatTime(new Date(parseInt(firstClass.begins)*1000));
+ var hora_final = formatTime(new Date(parseInt(firstClass.ends)*1000));
+
var classeDiv = document.createElement('div');
-
- // Check if the subject is repeated
- duplicateSubjectBoolNext = data.payload.classes[i+1].friendly_name == classe.friendly_name;
- duplicateSubjectBoolPrev = data.payload.classes[i-1].friendly_name == classe.friendly_name;
-
- if(duplicateSubjectBoolNext && i < classes.length - 1 && duplicateSubjectCounter%2 == 1) {
- classeDiv.classList.add('message', 'complex-button-full');
- }
-
- if (duplicateSubjectBoolPrev && i > 0) {
- classeDiv.classList.add('message', 'complex-button2Right');
- } else if(duplicateSubjectBoolNext && i < data.payload.classes.length - 1) {
- classeDiv.classList.add('message', 'complex-button2Left');
- } else {
- classeDiv.classList.add('message', 'complex-button');
- }
-
classeDiv.classList.add('message', 'complex-button');
- classeDiv.id = 'subject-' + classe.subject_id + '-' + classe.room;
- classeDiv.setAttribute('data-class', JSON.stringify(classe));
var header = document.createElement('div');
header.classList.add('message-header');
+ header.textContent = firstClass.friendly_name || firstClass.calendar_name;
- if (!(duplicateSubjectBoolPrev && i > 0)) {
- header.textContent = classe.friendly_name || classe.calendar_name;
- } else {
- header.textContent = classe.friendly_name || classe.calendar_name;;
- header.style.color = "#4A4A4A";
- }
-
- var body = document.createElement('div');
- body.classList.add('message-body');
-
- var div1 = document.createElement('div');
- var span = document.createElement('span');
- span.textContent = classe.room;
-
- div1.classList.add('has-text-weight-bold');
-
- div1.textContent = 'Aula ';
- div1.appendChild(span);
-
- var div2 = document.createElement('div');
- div2.textContent = hora_inici + ' - ' + hora_final;
-
- body.appendChild(div1);
- body.appendChild(div2);
+ var roomsDiv = document.createElement('div');
+ roomsDiv.classList.add('rooms-container');
classeDiv.appendChild(header);
- classeDiv.appendChild(body);
+ for (var classe of uniqueClasses) {
+ if (classe.user_selected) {
+ classeDiv.classList.add('is-primary');
+ }
+
+ var body = document.createElement('div');
+ body.classList.add('message-body');
+ body.setAttribute('data-class', JSON.stringify(classe));
+ body.addEventListener('click', clickButton);
+ body.parent = 'subject-container';
+
+ var div1 = document.createElement('div');
+
+ div1.classList.add('has-text-weight-bold');
+ div1.textContent = 'Aula ';
+
+ var span = document.createElement('span');
+ span.textContent = classe.room;
+ div1.appendChild(span);
+
+ var div2 = document.createElement('div');
+ div2.textContent = hora_inici + ' - ' + hora_final;
+
+ body.appendChild(div1);
+ body.appendChild(div2);
+ roomsDiv.appendChild(body);
+ }
+
+ classeDiv.appendChild(roomsDiv);
document.getElementById("subject-container").appendChild(classeDiv);
- ++duplicateSubjectCounter;
}
-
- var elements = document.getElementsByClassName("button");
- Array.from(elements).forEach(function(element) {
- element.addEventListener('click', clickButton);
- element.parent = element.parentNode.id;
- });
- var elements = document.getElementsByClassName("complex-button");
- Array.from(elements).forEach(function(element) {
- element.addEventListener('click', clickButton);
- element.parent = element.parentNode.id;
- });
}
function getDefaultTime() {
@@ -208,6 +202,13 @@
document.getElementById("time-selector").value = formatTime(date) + " - " + formatTime(end_time);
}
+function isDateAfterTomorrow(potential_time) {
+ var now = new Date();
+ var tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
+
+ return (potential_time >= tomorrow);
+}
+
function addDateEventListeners(date) {
document.getElementById("date-prev").addEventListener('click', function (el) {
current_time = new Date(current_time.getTime() - 24*60*60000);
@@ -215,7 +216,11 @@
fetchClasses();
});
document.getElementById("date-next").addEventListener('click', function (el) {
- current_time = new Date(current_time.getTime() + 24*60*60000);
+ var potential_time = new Date(current_time.getTime() + 24*60*60000);
+
+ if (isDateAfterTomorrow(potential_time)) return;
+ current_time = potential_time;
+
buildTimeSelector(current_time);
fetchClasses();
});
@@ -230,12 +235,16 @@
fetchClasses();
});
document.getElementById("time-next").addEventListener('click', function (el) {
- current_time = new Date(current_time.getTime() + 30*60000);
- if (current_time.getHours() >= MAX_HOUR) {
- current_time = new Date(current_time.getTime() + 24*60*60000);
- current_time.setHours(MIN_HOUR);
- current_time.setMinutes(0);
+ var potential_time = new Date(current_time.getTime() + 30*60000);
+ if (potential_time.getHours() >= MAX_HOUR) {
+ potential_time = new Date(potential_time.getTime() + 24*60*60000);
+ potential_time.setHours(MIN_HOUR);
+ potential_time.setMinutes(0);
}
+
+ if (isDateAfterTomorrow(potential_time)) return;
+ current_time = potential_time;
+
buildTimeSelector(current_time);
fetchClasses();
});
@@ -256,7 +265,6 @@
}
function fetchClasses() {
- console.log(api_url + "getClassesInTime/" + current_time.getTime()/1000);
fetch(api_url + "getClassesInTime/" + current_time.getTime()/1000, {
"mode": "cors",
"credentials": "include"
@@ -268,8 +276,8 @@
document.getElementById('subject-container').classList.add('is-hidden');
document.getElementById('fme-maps-container').classList.add('is-hidden');
} else {
- repeated_subjects = findRepeatedSubjects(data.payload.classes);
- buildSubjectContainer(data.payload.classes, repeated_subjects);
+ var transformedClasses = transformClasses(data.payload.classes);
+ buildSubjectContainer(transformedClasses);
document.getElementById('no-subjects').classList.add('is-hidden');
document.getElementById('subject-container').classList.remove('is-hidden');
document.getElementById('fme-maps-container').classList.remove('is-hidden');