djsundog/netv-mam
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

start populating schedule grid

Browse Source
This commit is contained in:
Sundog Jones 2024-09-09 12:46:55 -04:00
parent 627f316cb1
commit 65d301ae69
1 changed files with 30 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
layout.html
View File

@ -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);
}
}