From 2ae9df63fd6c6b29c428ade5d6a203e4151ec452 Mon Sep 17 00:00:00 2001
From: Frederic <frederic@localhost.localdomain>
Date: Wed, 14 Mar 2018 23:59:03 +0100
Subject: [PATCH] added (optional) comment field

---
 journalmarks/journalmarks.py         | 17 ++++++
 journalmarks/static/journalmarks.js  |  7 ++-
 journalmarks/templates/index.html    | 85 +++++++++++++++++++++++++---
 journalmarks/templates/overview.html | 12 ++++
 4 files changed, 112 insertions(+), 9 deletions(-)

diff --git a/journalmarks/journalmarks.py b/journalmarks/journalmarks.py
index 5b5b5fa..720cf89 100644
--- a/journalmarks/journalmarks.py
+++ b/journalmarks/journalmarks.py
@@ -160,6 +160,23 @@ def create():
     return json.dumps(tag)
 
 
+@journalmarks.route('/update', methods=['POST'])
+@login_required
+def update():
+    if request.json.keys() != {'tag', 'content'}:
+        return ('invalid fields', 400, None)
+    tag, content = request.json['tag'], request.json['content']
+    try:
+        j = Journalmark.select().where(
+                (Journalmark.tag == tag) & (Journalmark.user == flask_g.user)
+            ).get()
+    except DoesNotExist:
+        return ('tag not found', 404, None)
+    j.content = json.dumps(content)
+    j.save()
+    return json.dumps('ok')
+
+
 @journalmarks.route('/overview', methods=['GET'])
 @login_required
 def overview():
diff --git a/journalmarks/static/journalmarks.js b/journalmarks/static/journalmarks.js
index 3c42f19..48e1123 100644
--- a/journalmarks/static/journalmarks.js
+++ b/journalmarks/static/journalmarks.js
@@ -119,9 +119,12 @@ function journalmarks_initkey(username, password) {
 }
 
 
-function journalmarks_encrypturl(url) {
+function journalmarks_encrypturl(url, comment) {
     return new Promise(function(resolve, reject) {
-        var bytes = enc.encode(JSON.stringify({url: url}));
+        var content = {url: url};
+        if(typeof comment === 'string')
+            content.comment = comment;
+        var bytes = enc.encode(JSON.stringify(content));
         encrypt(bytes, userkey).then(function(encurl) {
             resolve(encurl);
         }).catch(function(error) {
diff --git a/journalmarks/templates/index.html b/journalmarks/templates/index.html
index 6157fb2..a254bd9 100644
--- a/journalmarks/templates/index.html
+++ b/journalmarks/templates/index.html
@@ -1,6 +1,8 @@
 {% extends "base.html" %}
 {% block script %}
 <script>
+var new_tag;
+
 function isURL(str) {
     try {
         new URL(str)
@@ -22,7 +24,12 @@ function run() {
             journalmarks_encrypturl(url).then(function (encurl) {
                 return post_object('{{ url_for('journalmarks.create') }}', {content: encurl});
             }).then(function(tag) {
+                new_tag = tag;
                 console.log('ok', tag);
+                document.getElementById('welcome').style.display = 'none';
+                document.getElementById('new-journalmark').style.display = 'block';
+                document.getElementById('new-journalmark-link').innerText = window.location.protocol + '//' + window.location.hostname + '/' + tag;
+                document.getElementById('new-journalmark-link').href = '/' + tag;
             });
          } else if(url.match(/^[a-z0-9]{4}$/)) {
              window.location.href = '/' + url;
@@ -31,6 +38,22 @@ function run() {
          }
     });
 
+    document.getElementById('add-description').addEventListener('click', function() {
+        var url = document.getElementById('url').value;
+        var description = document.getElementById('description').value;
+        if(isURL(url) && (description.length > 0)) {
+            journalmarks_encrypturl(url, description).then(function (encurl) {
+                console.log({tag: new_tag, content: encurl});
+                return post_object('{{ url_for('journalmarks.update') }}', {tag: new_tag, content: encurl});
+            }).then(function() {
+                // TODO
+                console.log('ok');
+            }).catch(function(error) {
+                console.log('could not modify journalmark', error);
+            });
+         }
+    });
+
     document.getElementById('url').addEventListener('keyup', function(e) {
         if(e.keyCode == 13)
             document.getElementById('create').click();
@@ -43,14 +66,62 @@ else document.attachEvent('onreadystatechange', function(){
     if (document.readyState=='complete') run();
 });
 </script>
+<style>
+#new-journalmark {
+    display: none;
+}
+#new-journalmark, #new-journalmark p {
+    margin-top: 2em;
+    text-align: center;
+}
+
+#new-journalmark-link {
+    display: block;
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+    font-size: 2em;
+    text-shadow: 1px 1px 1px lightgrey;
+}
+</style>
 {% endblock %}
 {% block body %}
-<h1>Welcome!</h1>
-<p>You can now create a new Journalmark by simply pasting a URL into the text field. To access an existing Journalmark, enter its tag code. There's also a listing of all your Journalmarks on the <a href="{{ url_for('journalmarks.overview') }}">overview page</a>. Finally, you can also <a href="{{ url_for('journalmarks.logout') }}">logout</a> again.
-</p>
+<div id="welcome">
+    <h1>Welcome!</h1>
+    <p>You can now create a new Journalmark by simply pasting a URL into the text field. To access an existing Journalmark, enter its tag code. There's also a listing of all your Journalmarks on the <a href="{{ url_for('journalmarks.overview') }}">overview page</a>. Finally, you can also <a href="{{ url_for('journalmarks.logout') }}">logout</a> again.
+    </p>
+
+    <div id="action-form" class="pure-form pure-g">
+        <div class="pure-u-3-4">
+            <input id="url" type="text" class="pure-input-1" placeholder="URL or Journalmark tag">
+        </div>
+        <div class="pure-u-1-4">
+            <button id="create" class="pure-button pure-button-primary pure-input-1">Go</button>
+        </div>
+    </div>
+</div>
 
-<form class="pure-form">
-    <input id="url" type="text" placeholder="URL or Journalmark tag">
-    <button id="create" class="pure-button pure-button-primary">Go</button>
-</form>
+<div id="new-journalmark">
+<h1>Journalmark created!</h1>
+Yay! You can access your new Journalmark at:<br>
+
+<a id="new-journalmark-link" href=""></a><br>
+
+<div class="pure-form pure-g">
+    <div class="pure-u-1">
+        <legend>
+        Should you want to add a descriptive text to be displayed on the overview page, you can do so now:
+        </legend>
+     </div>
+    <div class="pure-u-3-4">
+        <input id="description" type="text" class="pure-input-1" placeholder="Description">
+    </div>
+    <div class="pure-u-1-4">
+        <button id="add-description" class="pure-button pure-button-primary pure-input-1">Add</button>
+    </div>
+</div>
+
+<p>
+<a href="{{ url_for('journalmarks.index') }}">Continue to welcome page</a>
+</p>
+</div>
 {% endblock %}
diff --git a/journalmarks/templates/overview.html b/journalmarks/templates/overview.html
index 101e742..4109c2d 100644
--- a/journalmarks/templates/overview.html
+++ b/journalmarks/templates/overview.html
@@ -26,6 +26,8 @@ function run() {
             decrs.push(journalmarks_decrypturl(j.content).then(function(url) {
                 n.getElementsByClassName('url')[0].href = url.url;
                 n.getElementsByClassName('url')[0].innerText = url.url;
+                if(url.hasOwnProperty('comment'))
+                    n.getElementsByClassName('comment')[0].innerText = url.comment;
             }).catch(function(error) {
                 console.log(error);
                 n.getElementsByClassName('url')[0].innerText = 'unable to decrypt url';
@@ -54,13 +56,23 @@ else document.attachEvent('onreadystatechange', function(){
     padding: 1em;
     border: 1px solid grey;
 }
+#back-to-welcome {
+    text-align: center;
+}
 </style>
 {% endblock %}
 {% block body %}
+<h1>Journalmarks Overview</h1>
+
+<p id="back-to-welcome">
+<a href="{{ url_for('journalmarks.index') }}">Back to welcome page</a>
+</p>
+
 <div id="journalmarks">
 <p id="prototype">
 Tag: <a class="tag" href=""></a><br>
 URL: <a class="url" rel="noreferrer" href=""></a><br>
+Comment: <span class="comment"></span><br>
 Created: <span class="date"></span>
 </p>
 </div>