sched: interface.html rowspan

master
Rob Pilling 2024-03-02 18:29:47 +00:00
parent d28d696dea
commit b4b047d0cb
1 changed files with 15 additions and 9 deletions

View File

@ -2,6 +2,11 @@
<head> <head>
<link rel="stylesheet" href="../../css/spectre.min.css"> <link rel="stylesheet" href="../../css/spectre.min.css">
<link rel="stylesheet" href="../../css/spectre-icons.min.css"> <link rel="stylesheet" href="../../css/spectre-icons.min.css">
<style>
.multi-select {
height: 100%;
}
</style>
<script src="../../core/lib/interface.js"></script> <script src="../../core/lib/interface.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ical.js/1.5.0/ical.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ical.js/1.5.0/ical.min.js"></script>
<script> <script>
@ -115,12 +120,13 @@ function renderAlarm(alarm, exists) {
const localDate = alarm.date ? dateFromAlarm(alarm) : null; const localDate = alarm.date ? dateFromAlarm(alarm) : null;
const tr = document.createElement('tr'); const tr = document.createElement('tr');
const tr2 = document.createElement('tr');
tr.classList.add('event-row'); tr.classList.add('event-row');
tr.dataset.uid = alarm.id; tr.dataset.uid = alarm.id;
const tdType = document.createElement('td'); const tdType = document.createElement('td');
tdType.type = "text"; tdType.type = "text";
tdType.classList.add('event-summary'); tdType.classList.add('event-summary');
tr.appendChild(tdType); tr.appendChild(tdType); tdType.rowSpan = 2;
const inputTime = document.createElement('input'); const inputTime = document.createElement('input');
if (localDate) { if (localDate) {
tdType.textContent = "Event"; tdType.textContent = "Event";
@ -160,14 +166,14 @@ function renderAlarm(alarm, exists) {
inputTime.classList.add('form-input'); inputTime.classList.add('form-input');
inputTime.dataset.uid = alarm.id; inputTime.dataset.uid = alarm.id;
const tdTime = document.createElement('td'); const tdTime = document.createElement('td');
tr.appendChild(tdTime); tr.appendChild(tdTime); tdTime.rowSpan = 2;
tdTime.appendChild(inputTime); tdTime.appendChild(inputTime);
const tdDays = document.createElement('td'); const tdDays = document.createElement('td');
tr.appendChild(tdDays); tr.appendChild(tdDays); tdDays.rowSpan = 2;
const selectDays = document.createElement('select'); const selectDays = document.createElement('select');
selectDays.multiple = true; selectDays.multiple = true;
selectDays.classList.add('form-input'); selectDays.classList.add('form-input', 'multi-select');
selectDays.dataset.uid = alarm.id; selectDays.dataset.uid = alarm.id;
const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
const options = days.map((day, i) => { const options = days.map((day, i) => {
@ -186,7 +192,7 @@ function renderAlarm(alarm, exists) {
tdDays.appendChild(selectDays); tdDays.appendChild(selectDays);
const tdSummary = document.createElement('td'); const tdSummary = document.createElement('td');
tr.appendChild(tdSummary); tr.appendChild(tdSummary); tdSummary.rowSpan = 2;
const inputSummary = document.createElement('input'); const inputSummary = document.createElement('input');
inputSummary.type = "text"; inputSummary.type = "text";
inputSummary.classList.add('event-summary'); inputSummary.classList.add('event-summary');
@ -203,7 +209,7 @@ function renderAlarm(alarm, exists) {
inputSummary.onchange(); inputSummary.onchange();
const tdOptions = document.createElement('td'); const tdOptions = document.createElement('td');
tr.appendChild(tdOptions); tr.appendChild(tdOptions); tdOptions.rowSpan = 1;
const onOffCheck = document.createElement('input'); const onOffCheck = document.createElement('input');
onOffCheck.type = 'checkbox'; onOffCheck.type = 'checkbox';
@ -221,7 +227,7 @@ function renderAlarm(alarm, exists) {
tdOptions.appendChild(onOff); tdOptions.appendChild(onOff);
const tdInfo = document.createElement('td'); const tdInfo = document.createElement('td');
tr.appendChild(tdInfo); tr2.appendChild(tdInfo); tdInfo.rowSpan = 1;
const buttonDelete = document.createElement('button'); const buttonDelete = document.createElement('button');
buttonDelete.classList.add('btn'); buttonDelete.classList.add('btn');
@ -237,6 +243,7 @@ function renderAlarm(alarm, exists) {
}); });
document.getElementById('events').appendChild(tr); document.getElementById('events').appendChild(tr);
document.getElementById('events').appendChild(tr2);
document.getElementById('upload').disabled = false; document.getElementById('upload').disabled = false;
} }
@ -344,8 +351,7 @@ function onInit() {
<th>Date/Time</th> <th>Date/Time</th>
<th>Days</th> <th>Days</th>
<th>Summary</th> <th>Summary</th>
<th>On?</th> <th>State</th>
<th></th>
</tr> </tr>
</thead> </thead>
<tbody id="events"> <tbody id="events">