mirror of https://github.com/espruino/BangleApps
Merge pull request #3227 from bobrippling/feat/sched-interface-days
sched: add day selection to interface.htmlpull/3236/head
Rob Pilling
GitHub
commit
54ff865e91
|
|
@ -2,6 +2,26 @@
|
|||
<head>
|
||||
<link rel="stylesheet" href="../../css/spectre.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="https://cdnjs.cloudflare.com/ajax/libs/ical.js/1.5.0/ical.min.js"></script>
|
||||
<script>
|
||||
|
|
@ -115,15 +135,17 @@ function renderAlarm(alarm, exists) {
|
|||
const localDate = alarm.date ? dateFromAlarm(alarm) : null;
|
||||
|
||||
const tr = document.createElement('tr');
|
||||
const tr2 = document.createElement('tr');
|
||||
tr.classList.add('event-row');
|
||||
tr.dataset.uid = alarm.id;
|
||||
|
||||
const tdType = document.createElement('td');
|
||||
tdType.type = "text";
|
||||
tdType.classList.add('event-summary');
|
||||
tr.appendChild(tdType);
|
||||
const inputTime = document.createElement('input');
|
||||
let type;
|
||||
if (localDate) {
|
||||
tdType.textContent = "Event";
|
||||
type = "Event";
|
||||
inputTime.type = "datetime-local";
|
||||
inputTime.value = localDate.toISOString().slice(0,16);
|
||||
inputTime.onchange = (e => {
|
||||
|
|
@ -139,18 +161,19 @@ function renderAlarm(alarm, exists) {
|
|||
inputTime.value = `${hours}:${mins}:${secs}`;
|
||||
|
||||
if (alarm.timer) {
|
||||
tdType.textContent = "Timer";
|
||||
type = "Timer";
|
||||
inputTime.onchange = e => {
|
||||
alarm.timer = hmsToMs(inputTime.value);
|
||||
// alarm.t is set on upload
|
||||
};
|
||||
} else {
|
||||
tdType.textContent = "Alarm";
|
||||
type = "Alarm";
|
||||
inputTime.onchange = e => {
|
||||
alarm.t = hmsToMs(inputTime.value);
|
||||
};
|
||||
}
|
||||
}
|
||||
tdType.textContent = type;
|
||||
if (!exists) {
|
||||
const asterisk = document.createElement('sup');
|
||||
asterisk.textContent = '*';
|
||||
|
|
@ -160,11 +183,33 @@ function renderAlarm(alarm, exists) {
|
|||
inputTime.classList.add('form-input');
|
||||
inputTime.dataset.uid = alarm.id;
|
||||
const tdTime = document.createElement('td');
|
||||
tr.appendChild(tdTime);
|
||||
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');
|
||||
tr.appendChild(tdSummary);
|
||||
const inputSummary = document.createElement('input');
|
||||
inputSummary.type = "text";
|
||||
inputSummary.classList.add('event-summary');
|
||||
|
|
@ -181,9 +226,8 @@ function renderAlarm(alarm, exists) {
|
|||
inputSummary.onchange();
|
||||
|
||||
const tdOptions = document.createElement('td');
|
||||
tr.appendChild(tdOptions);
|
||||
|
||||
const onOffCheck = document.createElement('input');
|
||||
tdOptions.classList.add('btn-center');
|
||||
onOffCheck.type = 'checkbox';
|
||||
onOffCheck.checked = alarm.on;
|
||||
onOffCheck.onchange = e => {
|
||||
|
|
@ -199,8 +243,6 @@ function renderAlarm(alarm, exists) {
|
|||
tdOptions.appendChild(onOff);
|
||||
|
||||
const tdInfo = document.createElement('td');
|
||||
tr.appendChild(tdInfo);
|
||||
|
||||
const buttonDelete = document.createElement('button');
|
||||
buttonDelete.classList.add('btn');
|
||||
buttonDelete.classList.add('btn-action');
|
||||
|
|
@ -212,9 +254,22 @@ function renderAlarm(alarm, exists) {
|
|||
buttonDelete.onclick = (e => {
|
||||
alarms = alarms.filter(a => a !== alarm);
|
||||
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(tr2);
|
||||
document.getElementById('upload').disabled = false;
|
||||
}
|
||||
|
||||
|
|
@ -318,11 +373,9 @@ function onInit() {
|
|||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Type</th>
|
||||
<th>Date/Time</th>
|
||||
<th colspan="3">Time & Options</th>
|
||||
<th>Days</th>
|
||||
<th>Summary</th>
|
||||
<th>On?</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="events">
|
||||
|
|
|
|||
Loading…
Reference in New Issue