From 65d301ae69541f1b22dd0e1e006634b5aa305efe Mon Sep 17 00:00:00 2001
From: Sundog <sundog@reclaim.technology>
Date: Mon, 9 Sep 2024 12:46:55 -0400
Subject: [PATCH] start populating schedule grid

---
 layout.html | 53 ++++++++++++++++++++++++++++++-----------------------
 1 file changed, 30 insertions(+), 23 deletions(-)

diff --git a/layout.html b/layout.html
index e5c9cde..0f324cd 100644
--- a/layout.html
+++ b/layout.html
@@ -303,16 +303,16 @@
 		</template>
 		<template id="schedule_header_row_template">
 			<th>
-				<td>&nbsp;</td>
-				<td id="header_1"></td>
-				<td id="header_2"></td>
-				<td id="header_3"></td>
-				<td id="header_4"></td>
-				<td id="header_5"></td>
-				<td id="header_6"></td>
-				<td id="header_0"></td>
+				<td class="schedule_row_time_header">Time</td>
+				<td class="schedule_row_program_header">Program</td>
 			</th>
 		</template>
+		<template id="schedule_row_template">
+			<tr class="schedule_row">
+				<td class="schedule_row_time"></td>
+				<td class="schedule_row_program"></td>
+			</tr>
+		</template>
 		<script>
 			const init_library = () => {
 				// set up handler for library filtering
@@ -623,21 +623,28 @@
 			const init_schedules = (day) => {
 				const day_of_schedule = day ? new Date(Date.parse(day)) : new Date();
 
-				for (let i = 0; i < 8; i++) {
-					if (i === 0) {
-						// first column of schedule, set up the grid
-						const current_day_indicator = document.querySelector("#current_day_indicator");
-						current_day_indicator.innerHTML = `<center>Schedule for <strong>${day_of_schedule.toDateString()}</strong></center>`;
-						current_day_indicator.setAttribute("data-day", day_of_schedule.toISOString());
-						// set up previous/next buttons
-						document.querySelector('#previous_day_button').addEventListener("click", previous_day_schedule);
-						document.querySelector('#next_day_button').addEventListener("click", next_day_schedule);
-						// init grid structure itself
-						const template = document.querySelector("#schedule_header_row_template");
-						const template_clone = template.content.cloneNode(true);
-						const grid = document.querySelector("#schedule_grid");
-						grid.appendChild(template_clone);	
-					}
+				// set up header
+				const current_day_indicator = document.querySelector("#current_day_indicator");
+				current_day_indicator.innerHTML = `<center>Schedule for <strong>${day_of_schedule.toDateString()}</strong></center>`;
+				current_day_indicator.setAttribute("data-day", day_of_schedule.toISOString());
+				// set up previous/next buttons
+				document.querySelector('#previous_day_button').addEventListener("click", previous_day_schedule);
+				document.querySelector('#next_day_button').addEventListener("click", next_day_schedule);
+				// init grid structure itself
+				const template = document.querySelector("#schedule_header_row_template");
+				const template_clone = template.content.cloneNode(true);
+				const grid = document.querySelector("#schedule_grid");
+				grid.appendChild(template_clone);	
+
+				for (var i = 0; i < 24 * 2; i++) {
+					const hour = Math.floor(i / 2);
+					const minutes = i % 2 === 0 ? 0 : 30;
+					const template = document.querySelector("#schedule_row_template");
+					const template_clone = template.content.cloneNode(true);
+					const grid = document.querySelector("#schedule_grid");
+					template_clone.firstElementChild.innerHTML = ``;
+					template_clone.firstElementChild.setAttribute('data-time', hour + ":" + minutes);
+					grid.appendChild(template_clone);
 				}
 			}