display current note ID in editor (useful in Electron which doesn't have address bar)

public/javascripts/note_editor.js

@@ -6,6 +6,8 @@ const noteEditor = (function() {
     const protectButton = $("#protect-button");
     const unprotectButton = $("#unprotect-button");
     const noteDetailWrapperEl = $("#note-detail-wrapper");
+    const noteIdDisplayEl = $("#note-id-display");
+
     let editor = null;
 
     let currentNote = null;
@@ -101,6 +103,8 @@ const noteEditor = (function() {
             noteTitleEl.focus().select();
         }
 
+        noteIdDisplayEl.html(noteId);
+
         await protected_session.ensureProtectedSession(currentNote.detail.is_protected, false);
 
         if (currentNote.detail.is_protected) {

public/stylesheets/style.css

@@ -177,6 +177,10 @@ div.ui-tooltip {
     box-shadow: none;
 }
 
+#note-id-display {
+    color: lightgrey;
+}
+
 #loader-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;background-color:#fff;opacity:1;transition:opacity 2s ease}
 #loader{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:3px solid transparent;border-top-color:#777;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite}
 #loader:before{content:"";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:50%;border:3px solid transparent;border-top-color:#aaa;-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite}

services/notes.js

@@ -104,8 +104,6 @@ async function protectNote(note, dataKey, protect, sourceId) {
     }
 
     if (changed) {
-        console.log("Updating...");
-
         await sql.execute("UPDATE notes SET note_title = ?, note_text = ?, is_protected = ? WHERE note_id = ?",
             [note.note_title, note.note_text, note.is_protected, note.note_id]);
 

views/index.ejs

@@ -95,6 +95,8 @@
 
           <input autocomplete="off" value="" id="note-title" style="font-size: x-large; border: 0; flex-grow: 100;" tabindex="1">
 
+          <span id="note-id-display" title="Note ID"></span>
+
           <button class="btn btn-xs" style="margin: 10px;" onclick="noteHistory.showCurrentNoteHistory();">Note history</button>
         </div>
       </div>