WIP on the dialog for history

history.sql

@@ -0,0 +1,6 @@
+CREATE TABLE `notes_history` (
+	`id`	INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+	`note_id`	INTEGER NOT NULL,
+	`note_text`	TEXT NOT NULL,
+	`date_modified`	INTEGER NOT NULL
+);

src/notes_history_api.py

@@ -17,6 +17,6 @@ notes_history_api = Blueprint('notes_history_api', __name__)
 @notes_history_api.route('/notes-history/<string:note_id>', methods = ['GET'])
 @login_required
 def getNoteHistory(note_id):
-    history = getResults("select * from notes_history where note_id = ?", [note_id])
+    history = getResults("select * from notes_history where note_id = ? order by date_modified desc", [note_id])
 
     return jsonify(history)

src/templates/app.html

@@ -171,6 +171,16 @@
       </div>
     </div>
 
+    <div id="noteHistoryDialog" title="Note history" style="display: none;">
+      <div style="display: flex;">
+        <select id="noteHistoryList" size="25" style="flex-grow: 1;">
+        </select>
+
+        <div id="noteHistoryContent" style="flex-grow: 3;">
+        </div>
+      </div>
+    </div>
+
     <script type="text/javascript">
       const baseUrl = '';
     </script>
@@ -230,6 +240,7 @@
     <script src="stat/js/add_link.js"></script>
     <script src="stat/js/jump_to_note.js"></script>
     <script src="stat/js/settings.js"></script>
+    <script src="stat/js/note_history.js"></script>
 
     <script src="stat/js/utils.js"></script>
     <script src="stat/js/convert2html.js"></script>

static/js/init.js

@@ -20,25 +20,29 @@ $(function() {
 jQuery.hotkeys.options.filterInputAcceptingElements = true;
 jQuery.hotkeys.options.filterContentEditable = true;
 
-$(document).bind('keydown', 'alt+h', function() {
-    const toggle = $(".hide-toggle");
-    const hidden = toggle.css('display') === 'none';
-
-    toggle.css('display', hidden ? 'block' : 'none');
-
-    $("#noteDetailWrapper").css("width", hidden ? "750px" : "100%");
-});
+// $(document).bind('keydown', 'alt+h', function() {
+//     const toggle = $(".hide-toggle");
+//     const hidden = toggle.css('display') === 'none';
+//
+//     toggle.css('display', hidden ? 'block' : 'none');
+//
+//     $("#noteDetailWrapper").css("width", hidden ? "750px" : "100%");
+// });
 
 $(document).bind('keydown', 'alt+s', function() {
     $("input[name=search]").focus();
 });
 
+function formatDate(date) {
+    const dateString = date.getDate() + ". " + (date.getMonth() + 1) + ". " + date.getFullYear() + " " +
+        date.getHours() + ":" + date.getMinutes();
+    return dateString;
+}
+
 // hide (toggle) everything except for the note content for distraction free writing
 $(document).bind('keydown', 'alt+t', function() {
     const date = new Date();
-
-    const dateString = date.getDate() + ". " + (date.getMonth() + 1) + ". " + date.getFullYear() + " " +
-        date.getHours() + ":" + date.getMinutes();
+    const dateString = formatDate(date);
 
     $('#noteDetail').summernote('insertText', dateString);
 });

static/js/note_history.js

@@ -0,0 +1,28 @@
+$(document).bind('keydown', 'alt+h', function() {
+    $("#noteHistoryDialog").dialog({
+        modal: true,
+        width: 800,
+        height: 700
+    });
+
+    $("#noteHistoryList").empty();
+    $("#noteHistoryContent").empty();
+
+    $.ajax({
+        url: baseUrl + 'notes-history/' + globalCurrentNote.detail.note_id,
+        type: 'GET',
+        success: function (result) {
+            if (result.length > 0) {
+                $("#noteHistoryContent").html(result[0]["note_text"]);
+            }
+
+            for (row of result) {
+                const dateModified = new Date(row['date_modified'] * 1000);
+                const optionHtml = '<option value="' + row['note_id'] + '">' + formatDate(dateModified) + '</option>';
+
+                $("#noteHistoryList").append(optionHtml);
+            }
+        },
+        error: () => alert("Error getting note history.")
+    });
+});