journalmarks/journalmarks/templates/index.html

{% extends "base.html" %}
{% block script %}
<script>
var new_tag;

function isURL(str) {
    try {
        new URL(str)
        return true;
    } catch(e) {
        return false;
    }
}

function run() {
    journalmarks_loadkey().catch(function() {
        deleteKey();
        window.location.href = '{{ url_for('journalmarks.login') }}';
    });

    document.getElementById('create').addEventListener('click', function() {
        var url = document.getElementById('url').value;
        if(isURL(url)) {
            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;
         } else {
             console.log('not a URL and not a tag');
         }
    });

    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() {
                document.getElementById('add-description-form').style.display = 'none';
                document.getElementById('description-added').style.display = 'block';
                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();
    });
}

if (document.readyState!='loading') run();
else if (document.addEventListener) document.addEventListener('DOMContentLoaded', run);
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;
}
#description-added {
    display: none;
}
</style>
{% endblock %}
{% block body %}
<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>

<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 id="add-description-form" 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 id="description-added">
Description added.
</p>

<p>
<a href="{{ url_for('journalmarks.index') }}">Continue to welcome page</a>
</p>
</div>
{% endblock %}