FOSS
/
BangleApps
mirror of https://github.com/espruino/BangleApps
1
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

noteify: Add interface 

Add web interface to add, edit and delete notes
pull/1806/head
Erik Andresen 2022-05-09 10:32:13 +02:00
parent 9fa406450b
commit 6fc5edf428
3 changed files with 97 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/noteify/README.md
View File

@ -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.

93
apps/noteify/interface.html Normal file
View File

@ -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>

1
apps/noteify/metadata.json
View File

@ -14,6 +14,7 @@
],
"data": [{"name":"noteify.json"}],
"dependencies": {"scheduler":"type","textinput":"type"},
"interface": "interface.html",
"screenshots": [
{"url": "menu.png"},
{"url": "note.png"},