From 908e2257f8f8bc32c68b44cfa912ba6c4d01cc99 Mon Sep 17 00:00:00 2001 From: Jade Buckwalter Date: Wed, 24 Mar 2021 16:25:58 -0400 Subject: [PATCH 1/3] Add times to the schedule For each period, display the start and end time in the schedule. --- public/js/clock.js | 15 ++++++++++++++- public/js/home.js | 7 +++++++ 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/public/js/clock.js b/public/js/clock.js index 1d7c27e7..c5744a6e 100755 --- a/public/js/clock.js +++ b/public/js/clock.js @@ -43,6 +43,14 @@ function schedulesCallback(response) { redraw_clock_with_timestamp(); } +// Takes a time from schedule.json and formats it to hours:minutes +function formatTime(time) { + let minutes = time / 60000; + let hours = Math.floor(minutes / 60); + minutes = minutes - (hours * 60); + return (hours % 12 === 0 ? 12 : hours % 12) + ":" + (minutes < 10 ? "0" + minutes : minutes); +} + function update_formattedSchedule() { if (selected_day_of_week < 0) { const now = date_override ? new Date(date_override) : new Date(); @@ -54,9 +62,13 @@ function update_formattedSchedule() { currentTableData.formattedSchedule = schedules[current_schedule] .map(({ name }, i) => { - let room = ""; + let room, time = ""; let class_name = get_period_name(name, day_of_week); for (entry of currentTableData.schedule[bs_day]) { + time = schedules[current_schedule][i].name !== "After School" ? + formatTime(schedules[current_schedule][i].start) + "-" + + formatTime(schedules[current_schedule][i].end) : formatTime + (schedules[current_schedule][i].start); if (entry.class.startsWith(class_name)) { class_name = entry.class; room = entry.room; @@ -76,6 +88,7 @@ function update_formattedSchedule() { return { period: name, room: room, + time: time, class: class_name, color: color, }; diff --git a/public/js/home.js b/public/js/home.js index c2f413c2..894787fb 100644 --- a/public/js/home.js +++ b/public/js/home.js @@ -604,6 +604,12 @@ let scheduleTable = new Tabulator("#scheduleTable", { headerSort: false, formatter: "html", }, + { + title: "Time", + field: "time", + width: 150, + headerSort: false, + }, { title: "Room", field: "room", @@ -613,6 +619,7 @@ let scheduleTable = new Tabulator("#scheduleTable", { { title: "Class", field: "class", + width: 400, headerSort: false, formatter: "html", }, From 46e467694bab6c36b29a0edc0733b6cdb0c893a9 Mon Sep 17 00:00:00 2001 From: psvenk <45520974+psvenk@users.noreply.github.com> Date: Wed, 24 Mar 2021 16:55:59 -0400 Subject: [PATCH 2/3] Refactor time formatting code Finding the time for a period is independent of the periods in a student's schedule because the start and end times are in schedule.json; also, remove usage of the comma operator. --- public/js/clock.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/public/js/clock.js b/public/js/clock.js index c5744a6e..55fc7139 100755 --- a/public/js/clock.js +++ b/public/js/clock.js @@ -61,14 +61,10 @@ function update_formattedSchedule() { const bs_day = [1, 4].includes(day_of_week) ? "silver" : "black"; currentTableData.formattedSchedule = schedules[current_schedule] - .map(({ name }, i) => { - let room, time = ""; + .map(({ name, start, end }, i) => { + let room = ""; let class_name = get_period_name(name, day_of_week); for (entry of currentTableData.schedule[bs_day]) { - time = schedules[current_schedule][i].name !== "After School" ? - formatTime(schedules[current_schedule][i].start) + "-" + - formatTime(schedules[current_schedule][i].end) : formatTime - (schedules[current_schedule][i].start); if (entry.class.startsWith(class_name)) { class_name = entry.class; room = entry.room; @@ -76,6 +72,10 @@ function update_formattedSchedule() { } } + let time = formatTime(start); + if (name !== "After School") + time += "-" + formatTime(end); + // The index (1 to 8) of the color to use for this class const color_number = i < 8 ? i + 1 : 8; let color; From e4b3dd91cfc6cafdb93b9c9550612ce5b93111d2 Mon Sep 17 00:00:00 2001 From: psvenk <45520974+psvenk@users.noreply.github.com> Date: Wed, 24 Mar 2021 17:23:17 -0400 Subject: [PATCH 3/3] Use toLocaleTimeString() to format times This not only resolves ambiguity arising from 12-hour time without "AM" or "PM" but also localizes the time format (so that, e.g., 24-hour time will be used when the locale specifies it). --- public/js/clock.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/public/js/clock.js b/public/js/clock.js index 55fc7139..9141934f 100755 --- a/public/js/clock.js +++ b/public/js/clock.js @@ -43,12 +43,14 @@ function schedulesCallback(response) { redraw_clock_with_timestamp(); } -// Takes a time from schedule.json and formats it to hours:minutes +// Takes a time from schedule.json and formats it as a string function formatTime(time) { - let minutes = time / 60000; - let hours = Math.floor(minutes / 60); - minutes = minutes - (hours * 60); - return (hours % 12 === 0 ? 12 : hours % 12) + ":" + (minutes < 10 ? "0" + minutes : minutes); + const hours = Math.floor(time / 1000 / 60 / 60); + const minutes = time / 1000 / 60 % 60; + return new Date(2000, 1, 1, hours, minutes).toLocaleTimeString([], { + hour: "numeric", + minute: "numeric", + }); } function update_formattedSchedule() { @@ -74,7 +76,7 @@ function update_formattedSchedule() { let time = formatTime(start); if (name !== "After School") - time += "-" + formatTime(end); + time += "–" + formatTime(end); // The index (1 to 8) of the color to use for this class const color_number = i < 8 ? i + 1 : 8;