calendar: Add interface.html for holidays
Erik Andresen
parent
aa6d7cdbe1
commit
8650595ca4
|
|
@ -0,0 +1,186 @@
|
|||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="../../css/spectre.min.css">
|
||||
<link rel="stylesheet" href="../../css/spectre-icons.min.css">
|
||||
<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>
|
||||
let dataElement = document.getElementById("data");
|
||||
let holidays;
|
||||
|
||||
function sameDay(d1, d2) {
|
||||
return d1.getFullYear() === d2.getFullYear() &&
|
||||
d1.getMonth() === d2.getMonth() &&
|
||||
d1.getDate() === d2.getDate();
|
||||
}
|
||||
|
||||
function render() {
|
||||
holidays.sort((a,b) => new Date(a.date) - new Date(b.date));
|
||||
document.getElementById('events').innerHTML = "";
|
||||
holidays.forEach(holiday => {
|
||||
renderHoliday(holiday);
|
||||
});
|
||||
}
|
||||
|
||||
function readFile(input) {
|
||||
document.getElementById('upload').disabled = true;
|
||||
|
||||
for(let i=0; i<input.files.length; i++) {
|
||||
const reader = new FileReader();
|
||||
reader.addEventListener("load", () => {
|
||||
const jCalData = ICAL.parse(reader.result);
|
||||
const comp = new ICAL.Component(jCalData);
|
||||
// Fetch the VEVENT part
|
||||
comp.getAllSubcomponents('vevent').forEach(vevent => {
|
||||
event = new ICAL.Event(vevent);
|
||||
holidays = holidays.filter(holiday => !sameDay(new Date(holiday.date), event.startDate.toJSDate())); // remove if already exists
|
||||
|
||||
const holiday = eventToHoliday(event);
|
||||
|
||||
holidays.push(holiday);
|
||||
});
|
||||
|
||||
render();
|
||||
}, false);
|
||||
|
||||
reader.readAsText(input.files[i], "UTF-8");
|
||||
}
|
||||
}
|
||||
|
||||
function eventToHoliday(event) {
|
||||
const date = event.startDate.toJSDate();
|
||||
|
||||
const holiday = {
|
||||
date: formatDate(date),
|
||||
name: event.summary,
|
||||
};
|
||||
return holiday;
|
||||
}
|
||||
|
||||
function formatDate(d) {
|
||||
return d.getFullYear() + "-" + (d.getMonth() + 1).toString().padStart(2, '0') + "-" + d.getDate().toString().padStart(2, '0');
|
||||
}
|
||||
|
||||
function upload() {
|
||||
Util.showModal("Saving...");
|
||||
Util.writeStorage("calendar.holiday.json", JSON.stringify(holidays), () => {
|
||||
location.reload(); // reload so we see current data
|
||||
});
|
||||
}
|
||||
|
||||
function renderHoliday(holiday) {
|
||||
const localDate = new Date(holiday.date);
|
||||
|
||||
const tr = document.createElement('tr');
|
||||
tr.classList.add('event-row');
|
||||
const tdTime = document.createElement('td');
|
||||
tr.appendChild(tdTime);
|
||||
const inputTime = document.createElement('input');
|
||||
inputTime.type = "date";
|
||||
inputTime.classList.add('event-date');
|
||||
inputTime.classList.add('form-input');
|
||||
inputTime.value = formatDate(localDate)
|
||||
inputTime.onchange = (e => {
|
||||
const date = new Date(inputTime.value);
|
||||
holiday.date = formatDate(date.toISOString())
|
||||
});
|
||||
tdTime.appendChild(inputTime);
|
||||
|
||||
const tdSummary = document.createElement('td');
|
||||
tr.appendChild(tdSummary);
|
||||
const inputSummary = document.createElement('input');
|
||||
inputSummary.type = "text";
|
||||
inputSummary.classList.add('event-summary');
|
||||
inputSummary.classList.add('form-input');
|
||||
inputSummary.maxLength=40;
|
||||
const summary = (holiday.name?.substring(0, inputSummary.maxLength) || "");
|
||||
inputSummary.value = summary;
|
||||
inputSummary.onchange = (e => {
|
||||
holiday.name = inputSummary.value;
|
||||
});
|
||||
tdSummary.appendChild(inputSummary);
|
||||
inputSummary.onchange();
|
||||
|
||||
const tdInfo = document.createElement('td');
|
||||
tr.appendChild(tdInfo);
|
||||
|
||||
const buttonDelete = document.createElement('button');
|
||||
buttonDelete.classList.add('btn');
|
||||
buttonDelete.classList.add('btn-action');
|
||||
tdInfo.prepend(buttonDelete);
|
||||
const iconDelete = document.createElement('i');
|
||||
iconDelete.classList.add('icon');
|
||||
iconDelete.classList.add('icon-delete');
|
||||
buttonDelete.appendChild(iconDelete);
|
||||
buttonDelete.onclick = (e => {
|
||||
holidays = holidays.filter(a => a !== holiday);
|
||||
document.getElementById('events').removeChild(tr);
|
||||
});
|
||||
|
||||
document.getElementById('events').appendChild(tr);
|
||||
document.getElementById('upload').disabled = false;
|
||||
}
|
||||
|
||||
function addHoliday() {
|
||||
const holiday = {date: formatDate(new Date())};
|
||||
renderHoliday(holiday);
|
||||
holidays.push(holiday);
|
||||
render();
|
||||
}
|
||||
|
||||
function getData() {
|
||||
Util.showModal("Loading...");
|
||||
Util.readStorage('calendar.holiday.json',data=>{
|
||||
holidays = JSON.parse(data || "[]") || [];
|
||||
|
||||
Util.hideModal();
|
||||
holidays.forEach(holiday => {
|
||||
renderHoliday(holiday);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Called when app starts
|
||||
function onInit() {
|
||||
getData();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h4>Holidays</h4>
|
||||
|
||||
<div class="float-right">
|
||||
<button class="btn" onclick="addHoliday();">
|
||||
<i class="icon icon-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
<th>Holiday</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="events">
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="divider"></div>
|
||||
<div class="form-horizontal">
|
||||
<div class="form-group">
|
||||
<div class="col-5 col-xs-12">
|
||||
<label class="form-label" for="fileinput">Add from iCalendar file</label>
|
||||
</div>
|
||||
<div class="col-7 col-xs-12">
|
||||
<input id="fileinput" class="form-input" type="file" onchange="readFile(this)" accept=".ics,.ifb,.ical,.ifbf" multiple/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
|
||||
<button id="upload" class="btn btn-primary" onClick="upload()" disabled>Upload</button>
|
||||
<button id="reload" class="btn" onClick="location.reload()">Reload</button>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -9,10 +9,11 @@
|
|||
"supports": ["BANGLEJS","BANGLEJS2"],
|
||||
"readme": "README.md",
|
||||
"allow_emulator": true,
|
||||
"interface": "interface.html",
|
||||
"storage": [
|
||||
{"name":"calendar.app.js","url":"calendar.js"},
|
||||
{"name":"calendar.settings.js","url":"settings.js"},
|
||||
{"name":"calendar.img","url":"calendar-icon.js","evaluate":true}
|
||||
],
|
||||
"data": [{"name":"calendar.json"}]
|
||||
"data": [{"name":"calendar.json"}, {"name":"calendar.holiday.json"}]
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue