journalmarks/journalmarks/templates/overview.html

{% extends "base.html" %}
{% block script %}
<script>
function run() {
        /*
        var encurl = JSON.parse();
        journalmarks_decrypturl(encurl).then(function (url) {
            document.getElementById('url').href = url.url;
            document.getElementById('url').innerText = url.url;
            document.getElementById('url').click();
        });
        */
    journalmarks_loadkey().then(function() {
        return post_object('{{ url_for('journalmarks.overview_get_journalmarks') }}', {});
    }).then(function(jms) {
        var decrs = [];
        jms.forEach(function(j) {
            var p = document.getElementById('prototype');
            var n = p.cloneNode(true);
            n.id = 'journalmark_' + j.tag;
            var created = new Date(j.created);
            n.getElementsByClassName('date')[0].innerText =  created.getDate().toString() + '.' + (created.getMonth()+1).toString() + '.' + created.getFullYear().toString();
            n.getElementsByClassName('tag')[0].innerText = j.tag;
            n.getElementsByClassName('tag')[0].href = '/' + j.tag;
            n.getElementsByClassName('url')[0].innerText = 'decrypting...';
            n.getElementsByClassName('really-delete-yes')[0].dataset.tag = j.tag;
            document.getElementById('journalmarks').appendChild(n);
            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;
                    n.getElementsByClassName('comment-row')[0].style.display = 'table-row';
                }
            }).catch(function(error) {
                console.log(error);
                n.getElementsByClassName('url')[0].innerText = 'unable to decrypt url';
            }));
        });
        return Promise.all(decrs);
    }).then(function() {
        Array.from(document.getElementsByClassName('delete')).forEach(function(elem) { elem.addEventListener('click', function(e) {
            e.target.style.display = 'none';
            e.target.parentElement.getElementsByClassName('really-delete')[0].style.display = 'inline';
        })});
        Array.from(document.getElementsByClassName('really-delete-yes')).forEach(function(elem) { elem.addEventListener('click', function(e) {
            post_object('{{ url_for('journalmarks.delete') }}', {tag: e.target.dataset.tag}).then(function() {
                window.location.href = '{{ url_for('journalmarks.overview') }}';
            });
        })});
        Array.from(document.getElementsByClassName('really-delete-no')).forEach(function(elem) { elem.addEventListener('click', function(e) {
            e.target.parentElement.style.display = 'none';
            e.target.parentElement.parentElement.getElementsByClassName('delete')[0].style.display = 'inline';
        })});
    }).catch(function(error) {
        console.log(error);
        //deleteKey();
        //window.location.href = '{{ url_for('journalmarks.login') }}';
    });
}

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>
#prototype {
    display: none;
}
.journalmark {
    margin: 1em;
    padding: 1em;
    border: 1px solid grey;
}
#back-to-welcome {
    text-align: center;
}
.tag {
    font-size: 2em;
}
.comment-row {
    display: none;
}
.journalmark td:first-child {
    font-size: 0.8em;
    color: #7e7e7e;
    vertical-align: bottom;
    text-align: right;
    padding-right: 1em;

}
.actionlinks {
    text-align: right;
    margin-bottom: 0;
}
td {
    padding-top: 0.3em;
}
td div {
    word-break: break-all;
}
.really-delete {
    display: none;
}
</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">
    <div class="journalmark" id="prototype">
        <table>
            <tr><td>Tag:</td><td><a class="tag" href=""></a></td></tr>
            <tr><td>URL:</td><td><div><a class="url" rel="noreferrer" href=""></a></div></td></tr>
            <tr><td>Created:</td><td><span class="date"></td></tr>
            <tr class="comment-row"><td>Comment:</td><td><div><span class="comment"></span></div></td></tr>
        </table>
        <p class="actionlinks">
            <!--<button class="pure-button">edit comment</button>-->
            <button class="pure-button delete">Delete</button>
            <span class="really-delete">
                Really delete?
                <button class="pure-button really-delete-yes">Yes!</button>
                <button class="pure-button really-delete-no">No!</button>
            </span>
        </p>
    </div>
</div>
{% endblock %}