<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>In Angulis</title>
<!--<link rel="stylesheet" href="/css/baseline.css">-->
<link rel="stylesheet" href="/static/css/main.css">
<style type="text/css">
// This is here so that javascript-loaded elements don't get displayed '
.hidden {
visibility: hidden;
}
.ready.hidden {
visibility: visible;
}
</style>
</head>
<body>
<h1>In Angulis</h1>
{{#user}}
<div class="userinfo">
<div class="user">{{name}}</div>
<div class="email">{{email}}</div>
{{#moderator}}
<div class="mod">Moderator!</div>
{{/moderator}}
<a id="logout" href="/logout">[Logout]</a>
</div>
{{/user}}
<main id="app">
<form action="/murmuro" id="submission" name="submission" method="POST">
<input type="text" name="headline" placeholder="Headline" v-model="newLink.headline">
<input type="text" name="url" placeholder="URL" v-model="newLink.url">
<input type="submit" value="Go" title='Murmuro'>
</form>
{{#user}}
<h2>Link Queue (all links):</h2>
{{/user}}
{{^user}}
<h2>Link Queue (reviewed links):</h2>
{{/user}}
{{=<% %>=}}
<ul id="submissions">
<li class="in-progress {{ ready }} hidden" v-if="newLink.headline || newLink.url">
<a href="#">
<h2>{{ newLink.headline }}</h2>
<p>{{ newLink.url }}</p>
</a>
</li>
<%={{ }}=%>
{{#links}}
<li class="submission">
{{#user}}
{{#moderator}}
<div class="moderation">
<form action="/curo" method="POST">
<button name="approved" value="+" type="submit">+</button>
<button name="approved" value="-" type="submit">-</button>
<input type="hidden" name="headline" value="{{headline}}" />
<input type="hidden" name="url" value="{{url}}" />
</form>
</div>
{{/moderator}}
{{/user}}
<a href="{{ url }}" class="{{#user}}{{#moderator}}{{ approved }}{{/moderator}}{{/user}}">
<h2>{{ headline }}</h2>
<p>{{ url }}</p>
</a>
</li>
{{/links}}
{{^links}}
<li class="submission" style="text-align:center"><h2>(No links to display)</h2></li>
{{/links}}
</ul>
</main>
<script src="/static/js/jquery.js"></script>
<script src="/static/js/jquery.formalize.js"></script>
<script src="/static/js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
methods: {
submit: function(e) {
e.preventDefault();
this.links.unshift(0,Object.create(this.newLink));
this.newLink = {};
return false;
}
},
data: {
ready: 'ready',
newLink: {
},
}
});
</script>
</body>
</html>
<!-- vim: set ft=mustache: -->