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

start populating schedule grid

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>
<template id="schedule_header_row_template"> <template id="schedule_header_row_template">
<th> <th>
<td>&nbsp;</td> <td class="schedule_row_time_header">Time</td>
<td id="header_1"></td> <td class="schedule_row_program_header">Program</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>
</th> </th>
</template> </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> <script>
const init_library = () => { const init_library = () => {
// set up handler for library filtering // set up handler for library filtering
@ -623,21 +623,28 @@
const init_schedules = (day) => { const init_schedules = (day) => {
const day_of_schedule = day ? new Date(Date.parse(day)) : new Date(); const day_of_schedule = day ? new Date(Date.parse(day)) : new Date();
for (let i = 0; i < 8; i++) { // set up header
if (i === 0) { const current_day_indicator = document.querySelector("#current_day_indicator");
// first column of schedule, set up the grid current_day_indicator.innerHTML = `<center>Schedule for <strong>${day_of_schedule.toDateString()}</strong></center>`;
const current_day_indicator = document.querySelector("#current_day_indicator"); current_day_indicator.setAttribute("data-day", day_of_schedule.toISOString());
current_day_indicator.innerHTML = `<center>Schedule for <strong>${day_of_schedule.toDateString()}</strong></center>`; // set up previous/next buttons
current_day_indicator.setAttribute("data-day", day_of_schedule.toISOString()); document.querySelector('#previous_day_button').addEventListener("click", previous_day_schedule);
// set up previous/next buttons document.querySelector('#next_day_button').addEventListener("click", next_day_schedule);
document.querySelector('#previous_day_button').addEventListener("click", previous_day_schedule); // init grid structure itself
document.querySelector('#next_day_button').addEventListener("click", next_day_schedule); const template = document.querySelector("#schedule_header_row_template");
// init grid structure itself const template_clone = template.content.cloneNode(true);
const template = document.querySelector("#schedule_header_row_template"); const grid = document.querySelector("#schedule_grid");
const template_clone = template.content.cloneNode(true); grid.appendChild(template_clone);
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);
} }
} }