Merge pull request #256 from blatinier/issue-10/admin-interface
Add a basic admin interface (Fix issue #10) There are more to add in the interface but it's a good start.pull/359/head
commit
d2b573a4d5
@ -0,0 +1,134 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
}
|
||||
input {
|
||||
text-align: center;
|
||||
}
|
||||
.header::before, .header::after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
.header::after {
|
||||
clear: both;
|
||||
}
|
||||
.header::before, .header::after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
.header {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 68em;
|
||||
padding-bottom: 1em;
|
||||
padding-top: 1em;
|
||||
}
|
||||
.header header {
|
||||
display: block;
|
||||
float: left;
|
||||
font-weight: normal;
|
||||
margin-right: 16.0363%;
|
||||
width: 41.9818%;
|
||||
}
|
||||
.header header .logo {
|
||||
float: left;
|
||||
max-height: 60px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
.header header h1 {
|
||||
font-size: 1.55em;
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
.header header h2 {
|
||||
font-size: 1.05em;
|
||||
}
|
||||
.header a, .header a:visited {
|
||||
color: #4d4c4c;
|
||||
text-decoration: none;
|
||||
}
|
||||
.outer {
|
||||
background-color: #eeeeee;
|
||||
box-shadow: 0 0 0.5em #c0c0c0 inset;
|
||||
}
|
||||
.outer .filters::before, .outer .filters::after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
.outer .filters::after {
|
||||
clear: both;
|
||||
}
|
||||
.outer .filters::before, .outer .filters::after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
.outer .filters {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 68em;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #4d4c4c;
|
||||
}
|
||||
.label {
|
||||
background-color: #ddd;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
cursor: pointer;
|
||||
line-height: 1.4em;
|
||||
outline: 0 none;
|
||||
padding: calc(0.6em - 1px);
|
||||
}
|
||||
.active {
|
||||
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6) inset;
|
||||
}
|
||||
.label-valid {
|
||||
background-color: #cfc;
|
||||
border-color: #cfc;
|
||||
}
|
||||
.label-pending {
|
||||
background-color: #ffc;
|
||||
border-color: #ffc;
|
||||
}
|
||||
.mode {
|
||||
float: left;
|
||||
}
|
||||
.pagination {
|
||||
float: right;
|
||||
}
|
||||
.note .label {
|
||||
margin: 9px;
|
||||
padding: 3px;
|
||||
}
|
||||
#login {
|
||||
margin-top: 40px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.isso-comment-footer a {
|
||||
cursor: pointer;
|
||||
}
|
||||
.thread-title {
|
||||
margin-left: 3em;
|
||||
}
|
||||
.group {
|
||||
float: left;
|
||||
margin-left: 2em;
|
||||
}
|
||||
.editable {
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 5px;
|
||||
margin: 10px;
|
||||
padding: 5px;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
After Width: | Height: | Size: 11 KiB |
@ -0,0 +1,253 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Isso admin</title>
|
||||
<link type="text/css" href="/css/isso.css" rel="stylesheet">
|
||||
<link type="text/css" href="/css/admin.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript">
|
||||
function ajax(req) {
|
||||
var r = new XMLHttpRequest();
|
||||
r.open(req.method, req.url, true);
|
||||
r.onreadystatechange = function () {
|
||||
if (r.readyState != 4 || r.status != 200) {
|
||||
if (req.failure) {
|
||||
req.failure();
|
||||
}
|
||||
return;
|
||||
}
|
||||
req.success(r.responseText);
|
||||
};
|
||||
r.send(req.data);
|
||||
}
|
||||
function fade(element) {
|
||||
var op = 1; // initial opacity
|
||||
var timer = setInterval(function () {
|
||||
if (op <= 0.1){
|
||||
clearInterval(timer);
|
||||
element.style.display = 'none';
|
||||
}
|
||||
element.style.opacity = op;
|
||||
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
|
||||
op -= op * 0.1;
|
||||
}, 10);
|
||||
}
|
||||
function moderate(com_id, hash, action) {
|
||||
ajax({method: "POST",
|
||||
url: "/id/" + com_id + "/" + action + "/" + hash,
|
||||
success: function(){
|
||||
fade(document.getElementById("isso-" + com_id));
|
||||
}});
|
||||
}
|
||||
function edit(com_id, hash, author, email, website, comment) {
|
||||
ajax({method: "POST",
|
||||
url: "/id/" + com_id + "/edit/" + hash,
|
||||
data: JSON.stringify({text: comment,
|
||||
author: author,
|
||||
email: email,
|
||||
website: website}),
|
||||
success: function(ret){
|
||||
console.log("edit successed: ", ret);// TODO display some pretty stuff & update msg
|
||||
},
|
||||
error: function(ret){
|
||||
console.log("Error: ", ret); // TODO flash msg/notif
|
||||
}});
|
||||
}
|
||||
function validate_com(com_id, hash) {
|
||||
moderate(com_id, hash, "activate");
|
||||
}
|
||||
function delete_com(com_id, hash) {
|
||||
moderate(com_id, hash, "delete");
|
||||
}
|
||||
function unset_editable(elt_id) {
|
||||
var elt = document.getElementById(elt_id);
|
||||
if (elt) {
|
||||
elt.contentEditable = false;
|
||||
elt.classList.remove("editable");
|
||||
}
|
||||
}
|
||||
function set_editable(elt_id) {
|
||||
var elt = document.getElementById(elt_id);
|
||||
if (elt) {
|
||||
elt.contentEditable = true;
|
||||
elt.classList.add("editable");
|
||||
}
|
||||
}
|
||||
function start_edit(com_id) {
|
||||
var editable_elements = ['isso-author-' + com_id,
|
||||
'isso-email-' + com_id,
|
||||
'isso-website-' + com_id,
|
||||
'isso-text-' + com_id];
|
||||
for (var idx=0; idx <= editable_elements.length; idx++) {
|
||||
set_editable(editable_elements[idx]);
|
||||
}
|
||||
document.getElementById('edit-btn-' + com_id).classList.toggle('hidden');
|
||||
document.getElementById('stop-edit-btn-' + com_id).classList.toggle('hidden');
|
||||
document.getElementById('send-edit-btn-' + com_id).classList.toggle('hidden');
|
||||
}
|
||||
function stop_edit(com_id) {
|
||||
var editable_elements = ['isso-author-' + com_id,
|
||||
'isso-email-' + com_id,
|
||||
'isso-website-' + com_id,
|
||||
'isso-text-' + com_id];
|
||||
for (var idx=0; idx <= editable_elements.length; idx++) {
|
||||
unset_editable(editable_elements[idx]);
|
||||
}
|
||||
document.getElementById('edit-btn-' + com_id).classList.toggle('hidden');
|
||||
document.getElementById('stop-edit-btn-' + com_id).classList.toggle('hidden');
|
||||
document.getElementById('send-edit-btn-' + com_id).classList.toggle('hidden');
|
||||
}
|
||||
function send_edit(com_id, hash) {
|
||||
var author = document.getElementById('isso-author-' + com_id).textContent;
|
||||
var email = document.getElementById('isso-email-' + com_id).textContent;
|
||||
var website = document.getElementById('isso-website-' + com_id).textContent;
|
||||
var comment = document.getElementById('isso-text-' + com_id).textContent;
|
||||
edit(com_id, hash, author, email, website, comment);
|
||||
stop_edit(com_id);
|
||||
}
|
||||
</script>
|
||||
<div class="wrapper">
|
||||
<div class="header">
|
||||
<header>
|
||||
<img class="logo" src="/img/isso.svg" alt="Wynaut by @veekun"/>
|
||||
<div class="title">
|
||||
<a href="./">
|
||||
<h1>Isso</h1>
|
||||
<h2>Administration</h2>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
<div class="outer">
|
||||
<div class="filters">
|
||||
<div class="mode">
|
||||
<a href="?mode=1&page={{page}}&order_by={{order_by}}">
|
||||
<span class="label label-valid {% if mode == 1 %}active{% endif %}">
|
||||
Valid ({{counts.get(1, 0)}})
|
||||
</span>
|
||||
</a>
|
||||
<a href="?mode=2&page={{page}}&order_by={{order_by}}">
|
||||
<span class="label label-pending {% if mode == 2 %}active{% endif %}">
|
||||
Pending ({{counts.get(2, 0)}})
|
||||
</span>
|
||||
</a>
|
||||
<a href="?mode=4&page={{page}}&order_by={{order_by}}">
|
||||
<span class="label label-staled {% if mode == 4 %}active{% endif %}">
|
||||
Staled ({{counts.get(4, 0)}})
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="group">
|
||||
Group by thread: <input type="checkbox" {% if order_by == "tid" %}checked{% endif %} onClick="javascript:window.location='?mode={{mode}}&page={{page}}&order_by={% if order_by == "tid" %}id{% else %}tid{% endif %}';" />
|
||||
</div>
|
||||
<div class="pagination">
|
||||
Pages:
|
||||
{% if page > 0 %}
|
||||
<a href="?mode={{mode}}&page={{page - 1}}">
|
||||
«
|
||||
</a>
|
||||
{% endif %}
|
||||
<input type="text" size="1" name="page" value="{{page}}" />
|
||||
{% if page < max_page %}
|
||||
<a href="?mode={{mode}}&page={{page + 1}}">
|
||||
»
|
||||
</a>
|
||||
{% endif %}
|
||||
/ {{ max_page }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="filters order">
|
||||
Order:
|
||||
{% for order in ['id', 'created', 'modified', 'likes', 'dislikes'] %}
|
||||
<a href="?mode={{mode}}&page={{page}}&order_by={{order}}&asc={{1 - asc}}">
|
||||
<span class="label label-valid {% if order == order_by %}active{% endif %}">
|
||||
{{ order }}
|
||||
{% if order == order_by %}
|
||||
{% if asc %} ↑ {% else %} ↓ {% endif %}
|
||||
{% else %}
|
||||
↓
|
||||
{% endif %}
|
||||
</span>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<main>
|
||||
{% set thread_id = "no_id" %}
|
||||
{% for comment in comments %}
|
||||
{% if order_by == "tid" %}
|
||||
{% if thread_id != comment.tid %}
|
||||
{% set thread_id = comment.tid %}
|
||||
<h2 class="thread-title">{{comment.title}} (<a href="{{comment.uri}}">{{comment.uri}}</a>)</h2>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
<div class='isso-comment' id='isso-{{comment.id}}'>
|
||||
{% if conf.avatar %}
|
||||
<div class='avatar'>
|
||||
svg(data-hash='#{{comment.hash}}')
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class='text-wrapper'>
|
||||
<div class='isso-comment-header' role='meta'>
|
||||
{% if order_by != "tid" %}
|
||||
<div>Thread: {{comment.title}} (<a href="{{comment.uri}}">{{comment.uri}}</a>)</div><br />
|
||||
{% endif %}
|
||||
{% if comment.author %}
|
||||
<span class='author' id="isso-author-{{comment.id}}">{{comment.author}}</span>
|
||||
{% else %}
|
||||
<span class='author' id="isso-author-{{comment.id}}">Anonymous</span>
|
||||
{% endif %}
|
||||
{% if comment.email %}
|
||||
(<span id="isso-email-{{comment.id}}">{{comment.email}}</span> <a href="mailto:{{comment.email}}" rel='nofollow' class='email'>mailto</a>)
|
||||
{% else %}
|
||||
<span id="isso-email-{{comment.id}}"></span>
|
||||
{% endif %}
|
||||
{% if comment.website %}
|
||||
(<span id="isso-website-{{comment.id}}">{{comment.website}}</span> <a href="{{comment.website}}" rel='nofollow' class='website'>open</a>)
|
||||
{% else %}
|
||||
<span id="isso-website-{{comment.id}}"></span>
|
||||
{% endif %}
|
||||
<span class="spacer"> •</span>
|
||||
<time>{{comment.created | datetimeformat}}</time>
|
||||
<span class='note'>
|
||||
{% if comment.mode == 1 %}
|
||||
<span class="label label-valid">Valid</span>
|
||||
{% elif comment.mode == 2 %}
|
||||
<span class="label label-pending">Pending</span>
|
||||
{% elif comment.mode == 4 %}
|
||||
<span class="label label-staled">Staled</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
<div class='text'>
|
||||
{% if comment.mode == 4 %}
|
||||
<strong>HIDDEN</strong>. Original text: <br />
|
||||
{% endif %}
|
||||
<div id="isso-text-{{comment.id}}">{{comment.text}}</div>
|
||||
</div>
|
||||
<div class='isso-comment-footer'>
|
||||
{% if conf.votes and comment.likes - comment.dislikes != 0 %}
|
||||
<span class='votes'>{{comment.likes - comment.dislikes}}</span>
|
||||
{% endif %}
|
||||
<span class='spacer'></span>
|
||||
<a id="edit-btn-{{comment.id}}" class="edit" onClick="javascript:start_edit({{comment.id}})">Edit</a>
|
||||
<a id="stop-edit-btn-{{comment.id}}" class="hidden edit" onClick="javascript:stop_edit({{comment.id}})">Cancel</a>
|
||||
<a id="send-edit-btn-{{comment.id}}" class="hidden edit" onClick="javascript:send_edit({{comment.id}}, '{{comment.hash}}')">Send</a>
|
||||
{% if comment.mode != 4 %}
|
||||
<a class="delete"
|
||||
onClick="javascript:delete_com({{comment.id}}, '{{comment.hash}}')">
|
||||
Delete
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if comment.mode == 2 %}
|
||||
<a class='validate'
|
||||
onClick="javascript:validate_com({{comment.id}}, '{{comment.hash}}')">Validate</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
@ -0,0 +1,30 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Isso admin</title>
|
||||
<link type="text/css" href="/css/isso.css" rel="stylesheet">
|
||||
<link type="text/css" href="/css/admin.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div class="header">
|
||||
<header>
|
||||
<img class="logo" src="/img/isso.svg" alt="Wynaut by @veekun"/>
|
||||
<div class="title">
|
||||
<a href="./">
|
||||
<h1>Isso</h1>
|
||||
<h2>Administration</h2>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
<main>
|
||||
<div id="login">
|
||||
Administration secured by password:
|
||||
<form method="POST" action="/login">
|
||||
<input type="password" name="password" />
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in new issue