bryan
/
BangleApps
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #3227 from bobrippling/feat/sched-interface-days 

sched: add day selection to interface.html
master
Rob Pilling 2024-03-04 08:57:58 +00:00 committed by GitHub
parent a9b4417574 91adcb859a
commit 54ff865e91
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 67 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
apps/sched/interface.html
View File

@ -2,6 +2,26 @@
<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 {
/* e.g. day <select> */
height: 100%;
}
td.single-row {
/* no border between single rowspans */
border-bottom: none;
}
.btn-center {
justify-content: center;
display: flex;
}
.event-summary {
text-align: center;
}
</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,15 +135,17 @@ 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);
const inputTime = document.createElement('input'); const inputTime = document.createElement('input');
let type;
if (localDate) { if (localDate) {
tdType.textContent = "Event"; type = "Event";
inputTime.type = "datetime-local"; inputTime.type = "datetime-local";
inputTime.value = localDate.toISOString().slice(0,16); inputTime.value = localDate.toISOString().slice(0,16);
inputTime.onchange = (e => { inputTime.onchange = (e => {
@ -139,18 +161,19 @@ function renderAlarm(alarm, exists) {
inputTime.value = `${hours}:${mins}:${secs}`; inputTime.value = `${hours}:${mins}:${secs}`;
if (alarm.timer) { if (alarm.timer) {
tdType.textContent = "Timer"; type = "Timer";
inputTime.onchange = e => { inputTime.onchange = e => {
alarm.timer = hmsToMs(inputTime.value); alarm.timer = hmsToMs(inputTime.value);
// alarm.t is set on upload // alarm.t is set on upload
}; };
} else { } else {
tdType.textContent = "Alarm"; type = "Alarm";
inputTime.onchange = e => { inputTime.onchange = e => {
alarm.t = hmsToMs(inputTime.value); alarm.t = hmsToMs(inputTime.value);
}; };
} }
} }
tdType.textContent = type;
if (!exists) { if (!exists) {
const asterisk = document.createElement('sup'); const asterisk = document.createElement('sup');
asterisk.textContent = '*'; asterisk.textContent = '*';
@ -160,11 +183,33 @@ 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);
tdTime.appendChild(inputTime); tdTime.appendChild(inputTime);
let tdDays;
if (type === "Alarm") {
tdDays = document.createElement('td');
const selectDays = document.createElement('select');
selectDays.multiple = true;
selectDays.classList.add('form-input', 'multi-select');
selectDays.dataset.uid = alarm.id;
const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
const options = days.map((day, i) => {
const option = document.createElement('option');
option.value = day;
option.text = day;
option.selected = alarm.dow & (1 << i);
if(day !== "Sun")
selectDays.appendChild(option);
return option;
});
selectDays.appendChild(options.find(o => o.text === "Sun"));
selectDays.onchange = (e => {
alarm.dow = options.reduce((bits, opt, i) => bits | (opt.selected ? 1 << i : 0), 0);
});
tdDays.appendChild(selectDays);
}
const tdSummary = document.createElement('td'); const tdSummary = document.createElement('td');
tr.appendChild(tdSummary);
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');
@ -181,9 +226,8 @@ function renderAlarm(alarm, exists) {
inputSummary.onchange(); inputSummary.onchange();
const tdOptions = document.createElement('td'); const tdOptions = document.createElement('td');
tr.appendChild(tdOptions);
const onOffCheck = document.createElement('input'); const onOffCheck = document.createElement('input');
tdOptions.classList.add('btn-center');
onOffCheck.type = 'checkbox'; onOffCheck.type = 'checkbox';
onOffCheck.checked = alarm.on; onOffCheck.checked = alarm.on;
onOffCheck.onchange = e => { onOffCheck.onchange = e => {
@ -199,8 +243,6 @@ function renderAlarm(alarm, exists) {
tdOptions.appendChild(onOff); tdOptions.appendChild(onOff);
const tdInfo = document.createElement('td'); const tdInfo = document.createElement('td');
tr.appendChild(tdInfo);
const buttonDelete = document.createElement('button'); const buttonDelete = document.createElement('button');
buttonDelete.classList.add('btn'); buttonDelete.classList.add('btn');
buttonDelete.classList.add('btn-action'); buttonDelete.classList.add('btn-action');
@ -212,9 +254,22 @@ function renderAlarm(alarm, exists) {
buttonDelete.onclick = (e => { buttonDelete.onclick = (e => {
alarms = alarms.filter(a => a !== alarm); alarms = alarms.filter(a => a !== alarm);
document.getElementById('events').removeChild(tr); document.getElementById('events').removeChild(tr);
document.getElementById('events').removeChild(tr2);
}); });
tr.appendChild(tdTime); tdTime.colSpan = 3; tdTime.classList.add('single-row');
tr2.appendChild(tdType);
tr2.appendChild(tdOptions);
tr2.appendChild(tdInfo);
if (tdDays) {
tr.appendChild(tdDays); tdDays.rowSpan = 2;
} else {
tdSummary.colSpan = 2;
}
tr.appendChild(tdSummary); tdSummary.rowSpan = 2;
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;
} }
@ -318,11 +373,9 @@ function onInit() {
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>
<th>Type</th> <th colspan="3">Time & Options</th>
<th>Date/Time</th> <th>Days</th>
<th>Summary</th> <th>Summary</th>
<th>On?</th>
<th></th>
</tr> </tr>
</thead> </thead>
<tbody id="events"> <tbody id="events">