From 8650595ca42879087f496b40f81dcd7ddebcdcc9 Mon Sep 17 00:00:00 2001
From: Erik Andresen <erik@vontaene.de>
Date: Tue, 2 May 2023 22:30:47 +0200
Subject: [PATCH] calendar: Add interface.html for holidays

---
 apps/calendar/interface.html | 186 +++++++++++++++++++++++++++++++++++
 apps/calendar/metadata.json  |   3 +-
 2 files changed, 188 insertions(+), 1 deletion(-)
 create mode 100644 apps/calendar/interface.html
diff --git a/apps/calendar/interface.html b/apps/calendar/interface.html
new file mode 100644
index 000000000..b70b26f9c
--- /dev/null
+++ b/apps/calendar/interface.html
@@ -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>
diff --git a/apps/calendar/metadata.json b/apps/calendar/metadata.json
index bf5c67b09..b7e40a1fd 100644
--- a/apps/calendar/metadata.json
+++ b/apps/calendar/metadata.json
@@ -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"}]
 }
