tracman-server/views/admin.html

{% extends 'templates/base.html' %}
{% block title %}Tracman | Invite Requests{% endblock %}

{% block head %}
	{{ super() }}
	<link rel="stylesheet" type="text/css" href="/static/js/jquery-ui-tabs/jquery-ui.min.css">
	<style>
		.container { max-width:90%; }
	</style>
{% endblock %}

{% block main %}
	<section class='dark'>
		<div class='container' id='tabs'>
			<ul class='nav nav-tabs'>
				<li><a href="#users">Users</a></li>
				<li><a href="#requests">Requests</a></li>
			</ul>
			
			<div id='users'>
				<h1>Users</h1>
				<table id='users-table' class='table table-hover'>
						<thead><tr>
							<th>Name</th>
							<th>Slug</th>
							<th>Joined</th>
							<th>Last login</th>
							<th>Moved</th>
							<th>Edit</th>
						</tr></thead>
						<tbody>
						{% for usr in users %}
							<tr>
								<td>{{usr.name}}</td>
								<td><a href="/map/{{usr.slug}}">/{{usr.slug}}</a></td>
								<td id='{{usr.id}}-created'></td>
								<td id='{{usr.id}}-logged'></td>
								<td id='{{usr.id}}-moved'></td>
								<td id='{{usr.id}}-edit'><form action="" method="POST">
									<button type="submit" class='btn btn-block btn-danger' name="delete" value="{{usr.id}}">DELETE</button>
								</form></td>
							</tr>
						{% endfor %}
						</tbody>
					</table>
			</div>
			
			<div id='requests'>		
				<h1>Requests</h1>
				<table id='requests-table' class='table table-hover'>
					<thead><tr>
						<th>Name</th>
						<th>Email</th>
						<th>Message</th>
	
						<th>Requested</th>
						<th>Invited</th>
						<th>User</th>
					</tr></thead>
					<tbody>
					{% for request in requests %}
						<tr class="table-{% if request.userId %}success{% elif request.granted %}info{% else %}danger{% endif %}">
							<td>{{request.name}}</td>
							<td>{{request.email}}</td>
							<td>{{ request.beg | replace("\r\n", "<br>") | safe }}</td>
							<td id='{{request.id}}-requested'></td>
							<td id='{{request.id}}-edit'>
								<form action="" method="POST">
									{% if not request.granted %}
										<button type="submit" class='btn btn-block btn-success' name="invite" value="{{request.id}}">INVITE</button>
									{% endif %}
									<button type="submit" class='btn btn-block btn-danger' name="delete" value="{{request.id}}">DELETE</button>
								</form>
							</td>
							<td>
								{% if request.userId %}
									<a href="/map/id/{{request.userId}}">{{request.userId}}</a>
								{% endif %}
							</td>
						</tr>
					{% endfor %}
					</tbody>
				</table>
			</div>
			
		</div>
	</section>

	<script src="/static/js/moment.min.js"></script>
	<script src="/static/js/jquery-ui-tabs/jquery-ui.min.js"></script>
	<script type="text/javascript">
	
		/* TABS */ {
			
			// Check for location.hash capability (IE9+)
			if (!'onhashchange' in window) {
				if (!confirm("location.hash won't work in IE<9. If you don't know how to fix this, click cancel. ")){
					window.open("https://whatbrowser.org/");
				}
			}
			
			// Match jQuery's .ui-tabs-active with bootstrap's .active
			function setActive() {
				$('.nav-tabs > .active').removeClass('active');
				$('.ui-tabs-active').addClass('active');
			}
			
			// Set tab on hash change
			$(window).on('hashchange', function (){
				$('#tabs > ul > li > a').each(function (index, a) {
					if ($(a).attr('href') == location.hash) {
						$('#tabs').tabs('option', 'active', index);
						setActive();
					}
				});
			});
						
			// Setup tabs
			$('#tabs').tabs({
				active: (location.hash=='#requests')?1:0,
				beforeActivate: function(event,ui){
					location.hash = '#'+ui.newPanel.attr('id');
					setActive();
				}
			});
		}
		
		/* DATE/TIME FORMATS */ {
			
			// Users
			{% for usr in users %}
				{% if usr.created %}
					$('#{{usr.id}}-created').text(
						moment("{{usr.created}}", "ddd MMM DD YYYY HH:mm:ss [GMT]ZZ").format('l')
					);
				{% endif %}
				
				{% if usr.lastLogin %}
					$('#{{usr.id}}-logged').text(
						moment("{{usr.lastLogin}}", "ddd MMM DD YYYY HH:mm:ss [GMT]ZZ").fromNow()
					);
				{% endif %}
				
				{% if usr.last.time %}
					$('#{{usr.id}}-moved').text(
						moment("{{usr.last.time}}", "ddd MMM DD YYYY HH:mm:ss [GMT]ZZ").fromNow()
					);
				{% else %}
					$('#{{usr.id}}-moved').text("never");
				{% endif %}
			{% endfor %}
			
			// Requests
			{% for request in requests %}
				$('#{{request.id}}-requested').text(
					moment("{{request.requestedTime}}", "ddd MMM DD YYYY HH:mm:ss [GMT]ZZ").fromNow()
				);
				{% if request.granted %}
					$('#{{request.id}}-edit').text(
						moment("{{request.granted}}", "ddd MMM DD YYYY HH:mm:ss [GMT]ZZ").fromNow()
					);
				{% endif %}
			{% endfor %}
			
		}
		
	</script>

{% endblock %}