Skip to content

Commit a2db901

Browse files
peterjumapeterjuma
authored
Merge pull request #5 from peterjuma/feature-ago
How long ago?
2 parents ff9fca0 + c8802a6 commit a2db901

File tree

1 file changed

+367
-1
lines changed

1 file changed

+367
-1
lines changed

‎public/javascript/script.js‎

Lines changed: 367 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,372 @@ for (var i = 0; i < editbtns.length; i++) {
3737
});
3838
}
3939

40+
class Notes {
41+
constructor(dbName) {
42+
this.dbName = dbName;
43+
if (!window.indexedDB) {
44+
window.alert("Your browser doesn't support a stable version of IndexedDB. \
45+
Such and such feature will not be available.");
46+
}
47+
}
48+
initialLoad = () => {
49+
const request = indexedDB.open(this.dbName, 1);
50+
51+
request.onerror = (event) => {
52+
console.log('initialLoad - Database error: ', event.target.error.code,
53+
" - ", event.target.error.message);
54+
};
55+
request.onupgradeneeded = (event) => {
56+
console.log('Populating customers...');
57+
const db = event.target.result;
58+
const objectStore = db.createObjectStore('notes', { keyPath: 'noteid' });
59+
objectStore.onerror = (event) => {
60+
console.log('initialLoad - objectStore error: ', event.target.error.code,
61+
" - ", event.target.error.message);
62+
};
63+
// Create an index to search
64+
objectStore.createIndex('title', 'title', { unique: false });
65+
objectStore.createIndex('body', 'body', { unique: false });
66+
objectStore.createIndex('noteid', 'noteid', { unique: true });
67+
objectStore.createIndex('created_at', 'created_at', { unique: true });
68+
objectStore.createIndex('updated_at', 'updated_at', { unique: true });
69+
db.close();
70+
};
71+
}
72+
}
73+
74+
var DBNAME = "notesdb"
75+
var load = document.getElementById("load")
76+
// var clear = document.getElementById("clear")
77+
78+
const loadDB = () => {
79+
console.log('Load the Notes database');
80+
let notes = new Notes(DBNAME);
81+
notes.initialLoad();
82+
// document.getElementById("saveBtn").disabled = true;
83+
}
84+
85+
// clear.addEventListener("click", deleteDB)
86+
87+
function deleteDB() {
88+
var req = indexedDB.deleteDatabase(DBNAME);
89+
window.location.reload();
90+
req.onsuccess = function () {
91+
console.log("Deleted database successfully");
92+
};
93+
req.onerror = function () {
94+
console.log("Couldn't delete database");
95+
};
96+
req.onblocked = function () {
97+
console.log("Couldn't delete database due to the operation being blocked");
98+
};
99+
}
100+
/* Load Data */
101+
var notesGrid = document.getElementById("notes")
102+
const queryDB = () => {
103+
var connection = indexedDB.open(DBNAME);
104+
connection.onsuccess = function () {
105+
db = connection.result;
106+
var tx = db.transaction('notes', "readonly")
107+
var cust = tx.objectStore("notes")
108+
var request = cust.openCursor()
109+
request.onsuccess = (e) => {
110+
var cursor = e.target.result
111+
if (cursor) {
112+
//`{noteid: ${cursor.key}, title: ${cursor.value.title}, body: ${cursor.value.body}}`
113+
// contenteditable
114+
var date_diff = countDown(cursor.value.created_at)
115+
var ago = []
116+
date_diff.days > 0 ? ago[0] = (date_diff.days + "d ago") : date_diff.hours > 0 ? ago[1] = (date_diff.hours + "h ago") : date_diff.minutes > 0 ? ago[2] = (date_diff.minutes + "m") : ago[2] = "now"
117+
console.log(ago)
118+
html = `<div class="column note" id="${cursor.key}" onclick='showNote(this)'>
119+
<h2>${marked(cursor.value.title)}</h2>
120+
<caption>Created ${ago[0]||""} ${ago[1]||""} ${ago[2]||""}</caption>
121+
</div>`;
122+
notesGrid.innerHTML += html;
123+
noteSelect()
124+
cursor.continue()
125+
}
126+
}
127+
}
128+
}
129+
130+
let btnAction = document.getElementsByClassName("btnnote")
131+
var editBox = document.getElementById("editor")
132+
133+
// Show note when grid box clicked
134+
function showNote(notediv){
135+
var noteid = notediv.id || notediv.name || notediv;
136+
// Highlight note when clicked
137+
var connection = indexedDB.open(DBNAME);
138+
connection.onsuccess = function () {
139+
db = connection.result;
140+
var tx = db.transaction('notes', "readonly")
141+
var store = tx.objectStore("notes")
142+
var index = store.index("noteid");
143+
var request = index.get(noteid);
144+
request.onsuccess = (e) => {
145+
var matching = request.result;
146+
if (matching) {
147+
html = `<div name=${matching.noteid} class="editor" id="editpad">
148+
<button onclick='editNote(this)' name="${matching.noteid}" class="btn btnnote" style="float: left;" onMouseOut="this.style.color='black'" onMouseOver="this.style.color='green'"><i class="fa fa-edit fa-lg"></i></button>
149+
<button onclick='deleteNote(this)' name="${matching.noteid}" class="btn btnnote" style="float: right;" onMouseOut="this.style.color='black'" onMouseOver="this.style.color='red'"><i class="fa fa-trash fa-lg"></i></button>
150+
<h1 style="text-align: center;">${marked(matching.title)}</h1>
151+
<p style="text-align: left;">${marked(matching.body)}</p>
152+
</div>`
153+
editBox.style.display = "unset"
154+
editBox.innerHTML = html;
155+
// document.getElementById("saveBtn").disabled = true;
156+
} else{}
157+
}
158+
}
159+
// document.getElementById(notediv.id).classList.add("active")
160+
}
161+
162+
function noteSelect(){
163+
var noteList = document.getElementsByClassName("note");
164+
for (var i = 0; i < noteList.length; i++) {
165+
noteList[i].addEventListener("click", function () {
166+
var current = document.getElementsByClassName("active");
167+
current[0].className = current[0].className.replace(" active", "");
168+
this.className += " active";
169+
});
170+
}
171+
}
172+
173+
var editPad = document.getElementById("editpad")
174+
var newNote = document.getElementById("addBtn")
175+
newNote.addEventListener("click", () => {
176+
html = `<div name="" class="editor" id="editpad" contenteditable="false">
177+
<input name="title" type="text" id="title" placeholder="Note Title">
178+
<textarea name="notebody" cols="30" rows="10" id="notebody" placeholder="Body..."></textarea>
179+
<button onclick='cancelEdit("")' class="btn btnnote" style="float: right; background-color: #ddd;" onMouseOut="this.style.color='crimson'" onMouseOver="this.style.color='green'"><i class="fas fa-window-close fa-lg"></i> Cancel</button>
180+
<button class="btn" id="saveBtn" style="float: left;" onclick="save()"><i class="fas fa-save fa-lg"></i> Save</button>
181+
</div>`
182+
editBox.innerHTML = html;
183+
// document.getElementById("saveBtn").disabled = false;
184+
document.getElementById("editor").style.display = "unset"
185+
// document.getElementById("addBtn").disabled = true;
186+
})
187+
188+
// Delete single note by noteid
189+
function deleteNote(notediv) {
190+
var noteid = notediv.name;
191+
document.getElementById(noteid).style.display = "none"
192+
editBox.innerHTML = "";
193+
console.log(noteid)
194+
var connection = indexedDB.open(DBNAME);
195+
connection.onsuccess = function () {
196+
db = connection.result;
197+
var tx = db.transaction('notes', "readwrite")
198+
var store = tx.objectStore("notes")
199+
store.delete(noteid);
200+
tx.oncomplete = function () {
201+
console.log('Note ' + noteid + ' deleted.');
202+
203+
}
204+
}
205+
}
206+
207+
208+
209+
function countDown(epoch_timestamp) {
210+
var now = new Date().getTime();
211+
// Find the distance between now and the count down date
212+
var distance = now - epoch_timestamp * 1000;
213+
// Time calculations for days, hours, minutes and seconds
214+
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
215+
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
216+
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
217+
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
218+
219+
dateJson = {
220+
days: days,
221+
hours: hours,
222+
minutes: minutes,
223+
seconds: seconds
224+
}
225+
return dateJson
226+
}
227+
// Get new note values from the UI
228+
function save() {
229+
var noteTitle = document.getElementById("title").value
230+
var noteBody = document.getElementById("notebody").value
231+
var id = Math.round(Date.now() / 1000)
232+
const note = {
233+
noteid: id.toString(),
234+
title: noteTitle,
235+
body: noteBody,
236+
created_at: id.toString(),
237+
updated_at: id.toString()
238+
};
239+
console.log(note)
240+
addNote(note)
241+
}
242+
243+
// Add single note to the database
244+
function addNote(note) {
245+
var connection = indexedDB.open(DBNAME);
246+
connection.onsuccess = function () {
247+
db = connection.result;
248+
var tx = db.transaction('notes', "readwrite")
249+
var store = tx.objectStore("notes")
250+
store.add(note);
251+
tx.oncomplete = function () {
252+
console.log('Note added' + note );
253+
}
254+
}
255+
getNote(note.noteid)
256+
// document.getElementById("title").value = ""
257+
// document.getElementById("notebody").value = ""
258+
showNote(note.noteid)
259+
}
260+
261+
// Get updated values from the UI and generate a JSON object
262+
function update(editdiv) {
263+
var id = editdiv.name
264+
var noteTitle = document.getElementById("title").value
265+
var noteBody = document.getElementById("notebody").value
266+
var updated_at = Math.round(Date.now() / 1000)
267+
const note = {
268+
noteid: id.toString(),
269+
title: noteTitle,
270+
body: noteBody,
271+
created_at: id.toString(),
272+
updated_at: updated_at.toString()
273+
};
274+
console.log(note)
275+
updateNote(note)
276+
}
277+
278+
279+
function cancelEdit(notediv){
280+
if(notediv){
281+
showNote(notediv)
282+
} else {
283+
document.getElementById("editor").style.display = "none"
284+
// document.getElementById("saveBtn").disabled = true;
285+
}
286+
}
287+
288+
// Get single note to display in the list and details areas
289+
function getNote(noteid) {
290+
var connection = indexedDB.open(DBNAME);
291+
connection.onsuccess = function () {
292+
db = connection.result;
293+
var tx = db.transaction('notes', "readonly")
294+
var store = tx.objectStore("notes")
295+
var index = store.index("noteid");
296+
var request = index.get(noteid);
297+
request.onsuccess = (e) => {
298+
var matching = request.result;
299+
if (matching) {
300+
// html = `<div class="column note" id="${matching.noteid}" onclick='showNote(this)'>
301+
// <h2>${marked(matching.title)}</h2>
302+
// </div>`;
303+
// notesGrid.innerHTML += html;
304+
notesGrid.innerHTML = "";
305+
queryDB()
306+
html2 = `<div name=${matching.noteid} class="editor" id="editpad">
307+
<button onclick='editNote(this)' name="${matching.noteid}" class="btn btnnote" style="float: left;" onMouseOut="this.style.color='black'" onMouseOver="this.style.color='green'"><i class="fa fa-edit fa-lg"></i></button>
308+
<button onclick='deleteNote(this)' name="${matching.noteid}" class="btn btnnote" style="float: right;" onMouseOut="this.style.color='black'" onMouseOver="this.style.color='red'"><i class="fa fa-trash fa-lg"></i></button>
309+
<h1 style="text-align: center;">${marked(matching.title)}</h1>
310+
<p style="text-align: left;">${marked(matching.body)}</p>
311+
</div>`
312+
editBox.innerHTML = html2;
313+
} else {}
314+
}
315+
}
316+
}
317+
318+
// Update note in the database
319+
function updateNote(note) {
320+
var connection = indexedDB.open(DBNAME);
321+
connection.onsuccess = function () {
322+
db = connection.result;
323+
var tx = db.transaction('notes', "readwrite")
324+
var store = tx.objectStore("notes")
325+
store.put(note);
326+
tx.oncomplete = function () {
327+
console.log('Note updated' + note);
328+
document.getElementById(note.noteid).style.display = "none"
329+
}
330+
}
331+
getNote(note.noteid)
332+
}
333+
334+
const turndownService = new TurndownService();
335+
336+
// Get single note for editing
337+
function editNote(notediv) {
338+
var noteid = notediv.name;
339+
var connection = indexedDB.open(DBNAME);
340+
connection.onsuccess = function () {
341+
db = connection.result;
342+
var tx = db.transaction('notes', "readonly")
343+
var store = tx.objectStore("notes")
344+
var index = store.index("noteid");
345+
var request = index.get(noteid);
346+
request.onsuccess = (e) => {
347+
var matching = request.result;
348+
if (matching) {
349+
html = `<div name=${matching.noteid} class="editor" id="editpad">
350+
<input name="title" type="text" id="title">
351+
<textarea style="margin-top: 20px;" name="notebody" id="notebody"></textarea>
352+
<button onclick='update(this)' name="${matching.noteid}" class="btn btnnote" style="float: left; background-color: #ddd;" onMouseOut="this.style.color='crimson'" onMouseOver="this.style.color='green'"><i class="fa fa-check fa-lg" aria-hidden="true"></i> OK</button>
353+
<button onclick='cancelEdit(this)' name="${matching.noteid}" class="btn btnnote" style="float: right; background-color: #ddd;" onMouseOut="this.style.color='crimson'" onMouseOver="this.style.color='green'"><i class="fas fa-window-close fa-lg"></i> Cancel</button>
354+
</div>`
355+
editBox.innerHTML = html;
356+
document.getElementById("title").value = turndownService.turndown(marked(matching.title));
357+
document.getElementById("notebody").value = turndownService.turndown(marked(matching.body));
358+
// document.getElementById("saveBtn").disabled = true;
359+
} else { }
360+
}
361+
}
362+
}
363+
364+
loadDB()
365+
queryDB()
366+
=======
367+
// alert("Connected!")
368+
// Get the elements with class="column"
369+
var elements = document.getElementsByClassName("column");
370+
371+
// Declare a loop variable
372+
var i;
373+
374+
// List View
375+
function listView() {
376+
for (i = 0; i < elements.length; i++) {
377+
elements[i].style.width = "100%";
378+
}
379+
}
380+
// Grid View
381+
function gridView() {
382+
for (i = 0; i < elements.length; i++) {
383+
elements[i].style.width = "50%";
384+
}
385+
}
386+
387+
var container = document.getElementById("btnContainer");
388+
var btns = container.getElementsByClassName("btn");
389+
for (var i = 0; i < btns.length; i++) {
390+
btns[i].addEventListener("click", function () {
391+
var current = document.getElementsByClassName("active");
392+
current[0].className = current[0].className.replace(" active", "");
393+
this.className += " active";
394+
});
395+
}
396+
var editContainer = document.getElementById("editContainer");
397+
var editbtns = editContainer.getElementsByClassName("btn");
398+
for (var i = 0; i < editbtns.length; i++) {
399+
editbtns[i].addEventListener("click", function () {
400+
var current = document.getElementsByClassName("active");
401+
current[0].className = current[0].className.replace(" active", "");
402+
this.className += " active";
403+
});
404+
}
405+
40406
class Notes {
41407
constructor(dbName) {
42408
this.dbName = dbName;
@@ -340,4 +706,4 @@ function editNote(notediv) {
340706
}
341707

342708
loadDB()
343-
queryDB()
709+
queryDB()

0 commit comments

Comments
 (0)