various mostly smaller tweaks

app.py

@@ -76,7 +76,9 @@ class Notes(Resource):
     def put(self, note_id):
         note = request.get_json(force=True)
 
-        execute("update notes set note_text = ?, note_title = ? where note_id = ?", [note['detail']['note_text'], note['detail']['note_title'], note_id])
+        now = math.floor(time.time())
+
+        execute("update notes set note_text = ?, note_title = ?, date_modified = ? where note_id = ?", [note['detail']['note_text'], note['detail']['note_title'], now, note_id])
 
         delete("formatting", note_id)
 

frontend/index.html

@@ -11,17 +11,33 @@
     </div>
 
     <div style="margin-left: auto; margin-right: auto; width: 1000px">
-      <div id="tree" style="width: 200px; float: left;">
+      <div style="width: 200px; float: left;">
+        <button type="button" class="btn" onclick="createNewTopLevelNote()">Create new note</button>
+
+        <div id="tree">
+        </div>
       </div>
 
-    <div style="width: 750px; float: left; margin-left: 20px;">
+      <div style="width: 750px; float: left; margin-left: 20px;">
-      <div>
+        <div>
-        <input type="text" value="" id="noteTitle" style="font-size: x-large; border: 0;">
+          <input type="text" autocomplete="off" value="Welcome to Notecase web app!" id="noteTitle" style="font-size: x-large; border: 0;">
-      </div>
+        </div>
 
-      <div id="noteDetail">
+        <div id="noteDetail">
-        Nothing here right now!
+          <p>This prototype version supports basic editing, including some formatting (bold, italic, strike-through, underscore), images (just paste it into editor) and links. To edit the note, just click on title or content and you can directly modify it. Changes are saved immediatelly.</p>
-      </div>
+
+          <p>You can work with the tree using following keyboard shortcuts:</p>
+
+          <ul>
+            <li>insert - create new note on current tree level</li>
+            <li>shift + insert - create new sub-note</li>
+            <li>delete - delete current note (and it's sub-notes)</li>
+            <li>shift + up - move current note up in the current tree level</li>
+            <li>shift + down - move current note down in the current tree level</li>
+            <li>shift + left - move current note up in the tree hierarchy</li>
+            <li>shift + right - move current note down in the tree hierarchy</li>
+          </ul>
+        </div>
       </div>
     </div>
     
@@ -40,6 +56,8 @@
     <script src="lib/jquery.hotkeys.js"></script>
     <script src="lib/jquery.fancytree.hotkeys.js"></script>
 
+    <link href="style.css" rel="stylesheet">
+
     <script type="text/javascript">
       const baseUrl = '../';
     </script>

frontend/note.js

@@ -9,7 +9,13 @@ let tags = {
     10: "</s>"
 };
 
+let noteChangeDisabled = false;
+
 function noteChanged() {
+    if (noteChangeDisabled) {
+        return;
+    }
+
     let note = globalNote;
 
     let contents = $('#noteDetail').summernote('code');
@@ -40,6 +46,7 @@ $(document).ready(function() {
 
     $('#noteDetail').summernote({
         airMode: true,
+        height: 300,
         callbacks: {
             onChange: noteChanged
         }
@@ -61,6 +68,12 @@ function setParent(noteId, newParentKey, successCallback) {
     });
 }
 
+function createNewTopLevelNote() {
+    let rootNode = $("#tree").fancytree("getRootNode");
+
+    createNote(rootNode, "root", "into");
+}
+
 function createNote(node, parentKey, target) {
     let newNoteName = "new note";
 
@@ -103,6 +116,10 @@ function loadNote(noteId) {
 
         let noteText = notecase2html(note);
 
+        noteChangeDisabled = true;
+
         $('#noteDetail').summernote('code', noteText);
+
+        noteChangeDisabled = false;
     });
 }

frontend/style.css

@@ -0,0 +1,12 @@
+.note-editable {
+    /* This is because with empty content height of editor is 0 and it's impossible to click into it */
+    min-height: 400px;
+}
+
+#top-message {
+    display: none; /* initial state is hidden */
+    background-color: greenyellow;
+    color: green;
+    padding: 5px;
+    border-radius: 10px;
+}