From 6fc5edf4280d3e307e2ff11024c2f50eea2f2aff Mon Sep 17 00:00:00 2001
From: Erik Andresen <erik@vontaene.de>
Date: Mon, 9 May 2022 10:32:13 +0200
Subject: [PATCH] noteify: Add interface

Add web interface to add, edit and delete notes
---
 apps/noteify/README.md      |  3 ++
 apps/noteify/interface.html | 93 +++++++++++++++++++++++++++++++++++++
 apps/noteify/metadata.json  |  1 +
 3 files changed, 97 insertions(+)
 create mode 100644 apps/noteify/interface.html
diff --git a/apps/noteify/README.md b/apps/noteify/README.md
index d3868efcf..c846709de 100644
--- a/apps/noteify/README.md
+++ b/apps/noteify/README.md
@@ -18,3 +18,6 @@ This app uses the [Scheduler library](https://banglejs.com/apps/?id=sched) and r
 ![](note.png)
 
 ![](timer-alert.png)
+
+## Web interface
+You can also add, edit or delete notes in the web interface, accessible with the download button.
diff --git a/apps/noteify/interface.html b/apps/noteify/interface.html
new file mode 100644
index 000000000..027c98860
--- /dev/null
+++ b/apps/noteify/interface.html
@@ -0,0 +1,93 @@
+<html>
+  <head>
+    <link rel="stylesheet" href="../../css/spectre.min.css">
+  </head>
+  <body>
+    <div id="notes" class="container">
+      <div class="columns">
+        <div class="column col-9">
+          <textarea class="form-input" id="note-new" placeholder="New note" rows="3"></textarea>
+        </div>
+        <div class="column col-3">
+          <button class="btn btn-default" id="btnAdd">Add</button>
+        </div>
+      </div>
+    </div>
+    <script src="../../core/lib/interface.js"></script>
+    <script>
+var notesElement = document.getElementById("notes");
+var notes = {};
+
+function getData() {
+  // show loading window
+  Util.showModal("Loading...");
+  Util.readStorage(`noteify.json`,data=>{
+    notes = JSON.parse(data || "[]");
+
+    // remove window
+    Util.hideModal();
+
+    notes.forEach((note, i) => {
+      const divColumn = document.createElement("div");
+      divColumn.classList.add('columns');
+
+      const divColumn1 = document.createElement("div");
+      divColumn1.classList.add('column');
+      divColumn1.classList.add('col-9');
+
+      const textarea = document.createElement("textarea");
+      textarea.id = "note" + i;
+      textarea.classList.add('form-input');
+      textarea.rows = 3;
+      textarea.value = note.note;
+      divColumn1.appendChild(textarea);
+      divColumn.appendChild(divColumn1);
+
+      const divColumn2 = document.createElement("div");
+      divColumn2.classList.add('column');
+      divColumn2.classList.add('col-3');
+
+      const buttonSave = document.createElement("button");
+      buttonSave.textContent = "Save";
+      buttonSave.classList.add('btn');
+      buttonSave.classList.add('btn-default');
+      buttonSave.onclick = function() {
+        notes[i].note = textarea.value;
+        Util.writeStorage("noteify.json", JSON.stringify(notes));
+        location.reload();
+      }
+      divColumn2.appendChild(buttonSave);
+
+      const buttonDelete = document.createElement("button");
+      buttonDelete.classList.add('btn');
+      buttonDelete.textContent = "Delete";
+      buttonDelete.onclick = function() {
+        notes[i].note = textarea.value;
+        notes.splice(i, 1);
+        Util.writeStorage("noteify.json", JSON.stringify(notes));
+        location.reload(); // reload so we see current data
+      }
+      divColumn2.appendChild(buttonDelete);
+      divColumn.appendChild(divColumn2);
+
+      notesElement.prepend(document.createElement("hr"));
+      notesElement.prepend(divColumn);
+    });
+
+    document.getElementById("btnAdd").addEventListener("click", function() {
+      const note = document.getElementById("note-new").value;
+      notes.push({"note": note});
+      Util.writeStorage("noteify.json", JSON.stringify(notes));
+      location.reload(); // reload so we see current data
+    });
+  });
+}
+
+// Called when app starts
+function onInit() {
+  getData();
+}
+
+    </script>
+  </body>
+</html>
diff --git a/apps/noteify/metadata.json b/apps/noteify/metadata.json
index bedff0e5b..7e897d1f0 100644
--- a/apps/noteify/metadata.json
+++ b/apps/noteify/metadata.json
@@ -14,6 +14,7 @@
   ],
   "data": [{"name":"noteify.json"}],
   "dependencies": {"scheduler":"type","textinput":"type"},
+  "interface": "interface.html",
   "screenshots": [
   {"url": "menu.png"},
   {"url": "note.png"},
