Merge pull request #257 from Aspine/day-of-week-picker

Add day-of-week picker

public/home.html

@@ -284,6 +284,14 @@ <h3 id="import_modal_title">Import Data</h3>
       <span class="slider round"></span>
       <p id="schedule_title" class="unselectable">Black</p>
     </label>-->
+    <select id="day-select" onchange="schedule_toggle(value);">
+      <option value="-1">Select Day</option>
+      <option value="1">Monday (Silver)</option>
+      <option value="2">Tuesday (Black)</option>
+      <option value="3">Wednesday</option>
+      <option value="4">Thursday (Silver)</option>
+      <option value="5">Friday (Black)</option>
+    </select>
     <div id="scheduleTable"></div>
   </div>
   <div id="clock" class="tabcontent">

public/js/clock.js

@@ -18,6 +18,8 @@ logo = document.getElementById("logo");
 // Controls whether to use the covid-19 schedule or the regular schedule
 const covid_schedule = true;
 let current_schedule = covid_schedule ? "covid-mt" : "regular";
+// For covid-19 schedule
+let selected_day_of_week = -1;
 
 // For testing.
 // If this is set to a valid date/time string, that will be used instead of the
@@ -40,6 +42,46 @@ function schedulesCallback(response) {
     redraw_clock_with_timestamp();
 }
 
+function update_formattedSchedule() {
+    let day_of_week;
+    if (selected_day_of_week < 0) {
+        const now = date_override ? new Date(date_override) : new Date();
+        day_of_week = now.getDay();
+    } else {
+        day_of_week = selected_day_of_week;
+    }
+    const bs_day = [1, 4].includes(day_of_week) ? "silver" : "black";
+
+    currentTableData.formattedSchedule = schedules[current_schedule]
+        .map(({ name }, i) => {
+            let room = "";
+            let class_name = get_period_name(name, day_of_week);
+            for (entry of currentTableData.schedule[bs_day]) {
+                if (entry.class.startsWith(class_name)) {
+                    class_name = entry.class;
+                    room = entry.room;
+                    break;
+                }
+            }
+
+            // The index (1 to 8) of the color to use for this class
+            const color_number = i < 8 ? i + 1 : 8;
+            let color;
+            if (bs_day === "black") {
+                color = `var(--schedule${color_number}`;
+            } else {
+                color = `var(--schedule${9 - color_number})`;
+            }
+
+            return {
+                period: name,
+                room: room,
+                class: class_name,
+                color: color,
+            };
+        });
+}
+
 //#ifndef lite
 $.ajax({
     url: "schedule.json",
@@ -178,13 +220,13 @@ function get_period_name(default_name, day_of_week) {
     if (covid_schedule) {
         bs_day = [1, 4].includes(day_of_week) ? "silver" : "black";
 
-        // Determine which covid schedule to use
-        if ([1, 2].includes(day_of_week)) {
-            current_schedule = "covid-mt";
+        // Determine which covid schedule to use (default to Mon/Tue)
+        if (day_of_week === 3) {
+            current_schedule = "covid-w";
         } else if ([4, 5].includes(day_of_week)) {
             current_schedule = "covid-rf";
         } else {
-            current_schedule = "covid-w";
+            current_schedule = "covid-mt";
         }
     } else {
         bs_day = document.getElementById("schedule_title").innerHTML
@@ -201,8 +243,14 @@ function get_period_name(default_name, day_of_week) {
 
 function redraw_clock() {
     const now = date_override ? new Date(date_override) : new Date();
+    let day_of_week;
+    if (selected_day_of_week < 0) {
+        day_of_week = now.getDay();
+    } else {
+        day_of_week = selected_day_of_week;
+    }
     // Fake call to get_period_name to set current_schedule
-    get_period_name("Period 1", now.getDay());
+    get_period_name("Period 1", day_of_week);
     let number = 0;
     let period_name = "";
     // Time of day
@@ -233,13 +281,13 @@ function redraw_clock() {
             }
         }
         else if (tod > current_period.end) { // Between classes
-            period_name = get_period_name(current_period.name, now.getDay()) +
-            " ➡ " + get_period_name(next_period.name, now.getDay());
+            period_name = get_period_name(current_period.name, day_of_week) +
+            " ➡ " + get_period_name(next_period.name, day_of_week);
             pos = (tod - current_period.end) / (next_period.start - current_period.end);
             number = next_period.start - tod;
         }
         else { // In class
-            period_name = get_period_name(current_period.name, now.getDay());
+            period_name = get_period_name(current_period.name, day_of_week);
             pos = (tod - current_period.start) / (current_period.end - current_period.start);
             number = current_period.end - tod;
         }

public/js/home.js

@@ -941,7 +941,6 @@ function responseCallback(response, includedTerms) {
         initialize_tableData_dropdown();
     }
 
-    // scheduleTable.setData(tableData.schedule.black);
     recentActivity.setData(currentTableData.recent.recentActivityArray);
     recentAttendance.setData(currentTableData.recent.recentAttendanceArray);
 
@@ -984,7 +983,7 @@ function responseCallbackPartial(response) {
     }
     */
 
-    scheduleTable.setData(currentTableData.schedule.black);
+    // scheduleTable.setData(currentTableData.schedule.black);
 
     $("#classesTable").show();
 
@@ -1027,7 +1026,8 @@ function scheduleCallback(response) {
         }
     }
 
-    scheduleTable.setData(currentTableData.schedule.black);
+    update_formattedSchedule(new Date().getDay());
+    scheduleTable.setData(currentTableData.formattedSchedule);
     redraw_clock();
 }
 
@@ -1063,16 +1063,20 @@ function recent_toggle() {
 }
 */
 
-function schedule_toggle() {
-    if (document.getElementById("schedule_toggle").checked) {
-        scheduleTable.setData(currentTableData.schedule.silver);
-        document.getElementById("schedule_title").innerHTML = "Silver";
-        redraw_clock();
-    } else {
-        scheduleTable.setData(currentTableData.schedule.black);
-        document.getElementById("schedule_title").innerHTML = "Black";
-        redraw_clock();
+function schedule_toggle(day) {
+    if (covid_schedule) {
+        selected_day_of_week = parseInt(day);
     }
+    else {
+        if (document.getElementById("schedule_toggle").checked) {
+            document.getElementById("schedule_title").innerHTML = "Silver";
+        } else {
+            document.getElementById("schedule_title").innerHTML = "Black";
+        }
+    }
+    redraw_clock();
+    update_formattedSchedule();
+    scheduleTable.setData(currentTableData.formattedSchedule);
 }
 
 function openTab(evt, tab_name) {

public/schedule.json

@@ -2,8 +2,8 @@
     "regular":[
 		{
 			"name": "Before School",
-			"start": 2430000,
-			"end": 2790000
+			"start": 24300000,
+			"end": 27900000
 		},
         {
             "name":"Period 1",
@@ -39,13 +39,18 @@
             "name":"Period 4",
             "start": 47400000,
             "end": 52200000
-        }
+        },
+		{
+			"name": "After School",
+			"start": 52200000,
+			"end": 52200001
+		}
     ],
     "regular-a":[
 		{
 			"name": "Before School",
-			"start": 2430000,
-			"end": 2790000
+			"start": 24300000,
+			"end": 27900000
 		},
         {
             "name":"Period 1",
@@ -76,13 +81,18 @@
             "name":"Period 4",
             "start": 47400000,
             "end": 52200000
-        }
+        },
+		{
+			"name": "After School",
+			"start": 52200000,
+			"end": 52200001
+		}
     ],
     "regular-b":[
 		{
 			"name": "Before School",
-			"start": 2430000,
-			"end": 2790000
+			"start": 24300000,
+			"end": 27900000
 		},
         {
             "name":"Period 1",
@@ -118,13 +128,18 @@
             "name":"Period 4",
             "start": 47400000,
             "end": 52200000
-        }
+        },
+		{
+			"name": "After School",
+			"start": 52200000,
+			"end": 52200001
+		}
     ],
     "regular-c":[
 		{
 			"name": "Before School",
-			"start": 2430000,
-			"end": 2790000
+			"start": 24300000,
+			"end": 27900000
 		},
         {
             "name":"Period 1",
@@ -155,7 +170,12 @@
             "name":"Period 4",
             "start": 47400000,
             "end": 52200000
-        }
+        },
+		{
+			"name": "After School",
+			"start": 52200000,
+			"end": 52200001
+		}
     ],
     "covid":[
 		{
@@ -187,7 +207,12 @@
             "name":"Period 4",
             "start": 46800000,
             "end": 49800000
-        }
+        },
+		{
+			"name": "After School",
+			"start": 49800000,
+			"end": 49800001
+		}
     ],
 	"covid-mt": [
 		{
@@ -224,6 +249,11 @@
 			"name": "Period 4",
 			"start": 51000000,
 			"end": 54000000
+		},
+		{
+			"name": "After School",
+			"start": 54000000,
+			"end": 54000001
 		}
 	],
 	"covid-w": [
@@ -273,6 +303,11 @@
 			"name": "Period 2",
 			"start": 51000000,
 			"end": 54000000
+		},
+		{
+			"name": "After School",
+			"start": 54000000,
+			"end": 54000001
 		}
 	]
 }