Pear-Trading/Foodloop-Server
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Redo all admin pages for bootstrap 4 beta

Browse source
This commit is contained in:
Tom Bloor 2017-09-29 15:52:34 +01:00
parent cf2c7dcc4b
commit bf74fcc44f
10 changed files with 210 additions and 177 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
templates/admin/feedback/index.html.ep
View file

@ -18,7 +18,7 @@
<div class="card-header">
%= $feedback->user->email;
</div>
<div class="card-block">
<div class="card-body">
<h6 class="card-title">
%= format_human_datetime $feedback->submitted_at;
</h6>

8
templates/admin/feedback/read.html.ep
View file

@ -24,7 +24,7 @@
</li>
<li class="list-group-item justify-content-between">
<span>Submitted At:</span>
<span><%= format_human_datetime$feedback->submitted_at %></span>
<span><%= format_human_datetime $feedback->submitted_at %></span>
</li>
</ul>
</div>
@ -34,8 +34,10 @@
<h4 class="card-header">
Feedback Message
</h4>
<div class="card-block">
<pre class="card-text"><%= $feedback->feedbacktext %></pre>
<div class="card-body">
<div class="card-text">
<pre><%= $feedback->feedbacktext %></pre>
</div>
</div>
</div>
</div>

24
templates/admin/home.html.ep
View file

@ -3,41 +3,41 @@
% content_for javascript => begin
% end
<div class="card-deck">
<div class="card text-center">
<div class="card-header card-inverse card-primary">
<div class="card text-center text-white bg-primary">
<div class="card-header card-inverse">
User Count
</div>
<div class="card-block">
<div class="card-body">
<h2 class="card-title">
%= $user_count
</h2>
</div>
</div>
<div class="card text-center">
<div class="card-header card-inverse card-success">
<div class="card text-center text-white bg-success">
<div class="card-header card-inverse">
Unused Tokens
</div>
<div class="card-block">
<div class="card-body">
<h2 class="card-title">
<%= $tokens->{unused} %> / <%= $tokens->{total} %>
</h2>
</div>
</div>
<div class="card text-center">
<div class="card-header card-inverse card-danger">
<div class="card text-center text-white bg-danger">
<div class="card-header card-inverse">
Pending Organisations
</div>
<div class="card-block">
<div class="card-body">
<h2 class="card-title">
%= $pending_orgs
</h2>
</div>
</div>
<div class="card text-center">
<div class="card-header card-inverse card-danger">
<div class="card text-center text-white bg-danger">
<div class="card-header card-inverse">
Pending Transactions
</div>
<div class="card-block">
<div class="card-body">
<h2 class="card-title">
%= $pending_trans
</h2>

42
templates/admin/organisations/valid_read.html.ep
View file

@ -36,7 +36,7 @@ function initMap() {
<h3 class="card-header">
%= $valid_org->name
</h3>
<div class="card-block">
<div class="card-body">
<form action="<%= url_for %>" method="post">
<div class="form-group row">
<label for="name" class="col-md-4 col-form-label">Organisation Name</label>
@ -93,11 +93,7 @@ function initMap() {
</h3>
</div>
<div id="mapBody" role="tabpanel">
<div class="card-block">
<!-- Yes this is nasty. no i dont care. --!>
<style> #map { width: 100%; height: 400px; background-color: grey; } </style>
<div id="map"></div>
</div>
<div id="map"></div>
</div>
</div>
</div>
@ -106,28 +102,22 @@ function initMap() {
<h3 class="card-header">
Transactions
</h3>
<ul class="list-group list-group-flush">
<div class="list-group list-group-flush">
% for my $transaction ( $transactions->all ) {
<li class="list-group-item">
<div class="container">
<a href="<%= url_for '/admin/transactions/' . $transaction->id %>" class="list-group-item list-group-item-action">
<div class="row text-center">
<div class="col">From: <%= $transaction->buyer->name %></div>
<div class="col">To: <%= $transaction->seller->name %></div>
<div class="col">Value: <%= $transaction->value %></div>
<div class="col">Submitted At: <%= $transaction->submitted_at %></div>
<div class="col">Purchase Time: <%= $transaction->purchase_time %></div>
</div>
</a>
</div>
</li>
<a href="<%= url_for '/admin/transactions/' . $transaction->id %>" class="list-group-item list-group-item-action">
<div class="row text-center">
<div class="col">From: <%= $transaction->buyer->name %></div>
<div class="col">To: <%= $transaction->seller->name %></div>
<div class="col">Value: <%= $transaction->value %></div>
<div class="col">Submitted At: <%= $transaction->submitted_at %></div>
<div class="col">Purchase Time: <%= $transaction->purchase_time %></div>
</div>
</a>
% }
<li class="list-group-item">
<div class="container">
%= bootstrap_pagination( $c->param('page') || 1, $transactions->pager->last_page, { class => 'justify-content-center' } );
</div>
</li>
</ul>
<div class="list-group-item">
%= bootstrap_pagination( $c->param('page') || 1, $transactions->pager->last_page, { class => 'justify-content-center' } );
</div>
</div>
</div>
</div>
</div>

72
templates/admin/reports/transaction_data.html.ep
View file

@ -1,27 +1,27 @@
% layout 'admin';
% title 'Tokens';
% title 'Transaction Report';
% content_for javascript => begin
<script src="//www.gstatic.com/charts/loader.js"></script>
<script>
var raw_data = <%== $transaction_rs %>;
var mapped_data = $.map(raw_data, function( val, i ) {
return [[
new Date(val.quantised_hours),
val.count,
val.average_value / 100000,
val.sum_value / 100000,
val.average_distance / 1000,
val.sum_distance / 1000,
]];
return [
[
new Date(val.quantised_hours),
val.count,
val.average_value / 100000,
val.sum_value / 100000,
val.average_distance / 1000,
val.sum_distance / 1000,
]
];
});
var data;
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(loadData);
function loadData() {
data = new google.visualization.DataTable();
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Hours');
data.addColumn('number', 'Count');
data.addColumn('number', 'Average Value');
@ -31,12 +31,12 @@ function loadData() {
data.addRows(mapped_data);
drawCountChart();
drawDistanceChart();
drawValueChart();
drawCountChart(data);
drawDistanceChart(data);
drawValueChart(data);
}
function drawCountChart() {
function drawCountChart(data) {
var options = {
title: 'Transaction Count',
height: 500,
@ -56,7 +56,7 @@ function drawCountChart() {
chart.draw(chart_data, options);
}
function drawDistanceChart() {
function drawDistanceChart(data) {
var options = {
title: 'Transaction Distance',
height: 500,
@ -77,7 +77,7 @@ function drawDistanceChart() {
chart.draw(chart_data, options);
}
function drawValueChart() {
function drawValueChart(data) {
var options = {
title: 'Transaction Value',
height: 500,
@ -108,9 +108,33 @@ function drawValueChart() {
<strong>Success!</strong> <%= $success %>
</div>
% }
<div id="count_chart_div"></div>
<div id="distance_chart_div"></div>
<div id="value_chart_div"></div>
<pre>
%= $transaction_rs;
</pre>
<div class="card mb-3 text-center">
<div class="card-header">
Transaction Count
</div>
<div id="count_chart_div" class="card-body">
<div class="card-text">
<em>Loading...</em>
</div>
</div>
</div>
<div class="card mb-3 text-center">
<div class="card-header">
Transaction Distance
</div>
<div id="distance_chart_div" class="card-body">
<div class="card-text">
<em>Loading...</em>
</div>
</div>
</div>
<div class="card mb-3 text-center">
<div class="card-header">
Transaction Value
</div>
<div id="value_chart_div" class="card-body">
<div class="card-text">
<em>Loading...</em>
</div>
</div>
</div>

10
templates/admin/tokens/index.html.ep
View file

@ -23,13 +23,9 @@
</form>
<div class="list-group">
% for my $token (@$tokens) {
<a href="<%= url_for . '/' . $token->{id} %>" class="list-group-item list-group-item-action">
<div>
%= $token->{name}
</div>
<div class="ml-auto">
<%= $token->{used} == 1 ? 'Used' : 'Available' %>
</div>
<a href="<%= url_for . '/' . $token->{id} %>" class="list-group-item list-group-item-action d-flex justify-content-between <%= $token->{used} ? 'disabled' : 'list-group-item-success' %>">
<span><%= $token->{name} %></span>
<span><%= $token->{used} == 1 ? 'Used' : 'Available' %></span>
</a>
% }
</div>

12
templates/admin/transactions/index.html.ep
View file

@ -11,10 +11,8 @@
<strong>Success!</strong> <%= $success %>
</div>
% }
<div class="list-group list-group-flush">
<div class="list-group">
% for my $transaction ( $transactions->all ) {
<li class="list-group-item">
<div class="container">
<a href="<%= url_for . '/' . $transaction->id %>" class="list-group-item list-group-item-action">
<div class="row text-center">
<div class="col">From: <%= $transaction->buyer->name %></div>
@ -24,12 +22,8 @@
<div class="col">Purchase Time: <%= $transaction->purchase_time %></div>
</div>
</a>
</div>
</li>
% }
<li class="list-group-item">
<div class="container">
<div class="list-group-item">
%= bootstrap_pagination( $c->param('page') || 1, $transactions->pager->last_page, { class => 'justify-content-center' } );
</div>
</li>
</div>
</div>

12
templates/admin/transactions/read.html.ep
View file

@ -12,15 +12,15 @@
</div>
% }
<div class="card mb-3">
<h3 class="card-header">
<h3 class="card-header d-flex justify-content-between">
Transaction Details
<form action="<%= url_for . '/delete' %>" method="post">
<form class="form-inline" action="<%= url_for . '/delete' %>" method="post">
<div class="form-group">
<button class="btn btn-danger" type="submit" style="float: left">Delete Transaction</button>
<button class="btn btn-danger" type="submit">Delete Transaction</button>
</div>
</form>
</h3>
<div class="card-block">
<div class="card-body">
<form>
<div class="form-group">
<label for="email">Buyer</label>
@ -42,8 +42,8 @@
<label for="email">Purchase Time</label>
<input id="purchase_time" type="text" class="form-control" placeholder="Purchase Time" name="purchase_time" value="<%= $transaction->purchase_time %>" disabled>
</div>
<div class="form-group">
<img src="<%= url_for . '/image' %>"/>
<div class="form-group d-flex justify-content-center">
<img class="mw-100" src="<%= url_for . '/image' %>"/>
</div>
</form>
</div>

158
templates/admin/users/read.html.ep
View file

@ -12,88 +12,98 @@
</div>
% }
<form action="<%= url_for %>" method="post" autocomplete="off">
<h3 class="card-header">
User Details
</h3>
<div class="form-group">
<label for="email">Email Address</label>
<input id="email" type="text" autocomplete="off" class="form-control" placeholder="Email" name="email" value="<%= $user->email %>">
</div>
<div class="form-group">
<label for="joindate">Join Date</label>
<input id="joindate" type="datetime" class="form-control" placeholder="Date" name="joindate" value="<%= $user->join_date %>" disabled>
</div>
<div class="form-group">
<label for="type">Account Type</label>
<input id="type" type="text" class="form-control" value="<%= $user->type eq 'customer' ? 'Customer' : 'Organisation' %>" disabled>
</div>
<div class="form-group">
<label for="new_password">New Password</label>
<input id="new_password" type="password" autocomplete="off" class="form-control" placeholder="New Password" name="new_password">
<p class="help-block">Leave blank unless you want to change their password</p>
<div class="card mb-3">
<h3 class="card-header">
User Details
</h3>
<div class="card-body">
<div class="form-group">
<label for="email">Email Address</label>
<input id="email" type="text" autocomplete="off" class="form-control" placeholder="Email" name="email" value="<%= $user->email %>">
</div>
<div class="form-group">
<label for="joindate">Join Date</label>
<input id="joindate" type="datetime" class="form-control" placeholder="Date" name="joindate" value="<%= $user->join_date %>" disabled>
</div>
<div class="form-group">
<label for="type">Account Type</label>
<input id="type" type="text" class="form-control" value="<%= $user->type eq 'customer' ? 'Customer' : 'Organisation' %>" disabled>
</div>
<div class="form-group">
<label for="new_password">New Password</label>
<input id="new_password" type="password" autocomplete="off" class="form-control" placeholder="New Password" name="new_password">
<p class="help-block">Leave blank unless you want to change their password</p>
</div>
</div>
</div>
<div class="card mb-3">
% if ( my $customer_rs = $user->entity->customer ) {
<h3 class="card-header">
Customer Details
</h3>
<div class="form-group">
<label for="postcode">Customer Postcode</label>
<input id="postcode" type="text" class="form-control" placeholder="Postcode" name="postcode" value="<%= $customer_rs->postcode %>">
</div>
<div class="form-group">
<label for="full_name">Full Name</label>
<input id="full_name" type="text" class="form-control" placeholder="Full Name" name="full_name" value="<%= $customer_rs->full_name %>">
</div>
<div class="form-group">
<label for="display_name">Display Name</label>
<input id="display_name" type="text" class="form-control" placeholder="Display Name" name="display_name" value="<%= $customer_rs->display_name %>">
</div>
<div class="form-group">
<label for="year_of_birth">Year of Birth</label>
<input id="year_of_birth" type="number" class="form-control" placeholder="Year of Birth" name="year_of_birth" value="<%= $customer_rs->year_of_birth %>" disabled>
<h3 class="card-header">
Customer Details
</h3>
<div class="card-body">
<div class="form-group">
<label for="postcode">Customer Postcode</label>
<input id="postcode" type="text" class="form-control" placeholder="Postcode" name="postcode" value="<%= $customer_rs->postcode %>">
</div>
<div class="form-group">
<label for="full_name">Full Name</label>
<input id="full_name" type="text" class="form-control" placeholder="Full Name" name="full_name" value="<%= $customer_rs->full_name %>">
</div>
<div class="form-group">
<label for="display_name">Display Name</label>
<input id="display_name" type="text" class="form-control" placeholder="Display Name" name="display_name" value="<%= $customer_rs->display_name %>">
</div>
<div class="form-group">
<label for="year_of_birth">Year of Birth</label>
<input id="year_of_birth" type="number" class="form-control" placeholder="Year of Birth" name="year_of_birth" value="<%= $customer_rs->year_of_birth %>" disabled>
</div>
</div>
% } elsif ( my $org_rs = $user->entity->organisation ) {
<h3 class="card-header">
Organisation Details
</h3>
<div class="form-group">
<label for="postcode">Organisation Postcode</label>
<input id="postcode" type="text" class="form-control" placeholder="Postcode" name="postcode" value="<%= $org_rs->postcode %>">
</div>
<div class="form-group">
<label for="name">Organisation Name</label>
<input id="name" type="text" class="form-control" placeholder="Organisation Name" name="name" value="<%= $org_rs->name %>">
</div>
<div class="form-group">
<label for="street_name">Street Name</label>
<input id="street_name" type="text" class="form-control" placeholder="Street Name" name="street_name" value="<%= $org_rs->street_name %>">
</div>
<div class="form-group">
<label for="town">Town</label>
<input id="town" type="text" class="form-control" placeholder="Town" name="town" value="<%= $org_rs->town %>">
</div>
<div class="form-group">
<label for="town">Town</label>
<input id="town" type="sector" class="form-control" placeholder="Sector Area Code" name="sector" value="<%= $org_rs->sector %>">
<h3 class="card-header">
Organisation Details
</h3>
<div class="card-body">
<div class="form-group">
<label for="postcode">Organisation Postcode</label>
<input id="postcode" type="text" class="form-control" placeholder="Postcode" name="postcode" value="<%= $org_rs->postcode %>">
</div>
<div class="form-group">
<label for="name">Organisation Name</label>
<input id="name" type="text" class="form-control" placeholder="Organisation Name" name="name" value="<%= $org_rs->name %>">
</div>
<div class="form-group">
<label for="street_name">Street Name</label>
<input id="street_name" type="text" class="form-control" placeholder="Street Name" name="street_name" value="<%= $org_rs->street_name %>">
</div>
<div class="form-group">
<label for="town">Town</label>
<input id="town" type="text" class="form-control" placeholder="Town" name="town" value="<%= $org_rs->town %>">
</div>
<div class="form-group">
<label for="town">Town</label>
<input id="town" type="sector" class="form-control" placeholder="Sector Area Code" name="sector" value="<%= $org_rs->sector %>">
</div>
</div>
% } else {
<h3 class="card-header">
User is not a customer or an organisation
<h3 class="card-header text-white bg-danger">
Warning!
</h3>
% }
<div class="form-group">
<button class="btn btn-primary form-control" type="submit">Edit Account</button>
<div class="card-body">
User is not a customer or an organisation
</div>
% }
</div>
<div class="form-group">
<button class="btn btn-primary form-control" type="submit">Edit Account</button>
</div>
</form>
<div class="card mb-3">
<h3 class="card-header">
Transactions
</h3>
<ul class="list-group list-group-flush">
<div class="list-group list-group-flush">
% for my $transaction ( $transactions->all ) {
<li class="list-group-item">
<div class="container">
<a href="<%= url_for '/admin/transactions/' . $transaction->id %>" class="list-group-item list-group-item-action">
<div class="row text-center">
<div class="col">From: <%= $transaction->buyer->name %></div>
@ -103,13 +113,9 @@
<div class="col">Purchase Time: <%= $transaction->purchase_time %></div>
</div>
</a>
</div>
</li>
% }
<li class="list-group-item">
<div class="container">
%= bootstrap_pagination( $c->param('page') || 1, $transactions->pager->last_page, { class => 'justify-content-center' } );
</div>
</li>
</ul>
<div class="list-group-item">
%= bootstrap_pagination( $c->param('page') || 1, $transactions->pager->last_page, { class => 'justify-content-center' } );
</div>
</div>
</div>

47
templates/layouts/admin.html.ep
View file

@ -6,16 +6,14 @@
<title>LocalLoop Admin - <%= title %></title>
<!-- Bootstrap and jQuery js -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
%= stylesheet '/static/admin/css/main.css';
</head>
<body>
<nav class="navbar navbar-toggleable-md fixed-top navbar-inverse bg-danger">
<nav class="navbar navbar-expand-md fixed-top navbar-dark bg-danger">
<a class="navbar-brand" href="<%= url_for '/admin/home' %>">LocalLoop Admin</a>
<button class="navbar-toggler navbar-toggler-right"
type="button"
data-toggle="collapse"
@ -26,21 +24,44 @@
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="<%= url_for '/admin/home' %>">LocalLoop Admin</a>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link<%= title eq 'Feedback' ? ' active' : '' %>" href="<%= url_for '/admin/feedback' %>">Feedback</a>
<a class="nav-item nav-link<%= title eq 'Tokens' ? ' active' : '' %>" href="<%= url_for '/admin/tokens' %>">Tokens</a>
<a class="nav-item nav-link<%= title eq 'Transactions' ? ' active' : '' %>" href="<%= url_for '/admin/transactions' %>">Transactions</a>
<a class="nav-item nav-link<%= title eq 'Users' ? ' active' : '' %>" href="<%= url_for '/admin/users' %>">Users</a>
<a class="nav-item nav-link<%= title eq 'Organisations' ? ' active' : '' %>" href="<%= url_for '/admin/organisations' %>">Organisations</a>
<a class="nav-item nav-link" href="<%= url_for '/admin/logout' %>">Logout</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">
Reports
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="<%= url_for '/admin/reports/transactions' %>">Transactions</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link<%= title eq 'Feedback' ? ' active' : '' %>" href="<%= url_for '/admin/feedback' %>">Feedback</a>
</li>
<li class="nav-item">
<a class="nav-link<%= title eq 'Tokens' ? ' active' : '' %>" href="<%= url_for '/admin/tokens' %>">Tokens</a>
</li>
<li class="nav-item">
<a class="nav-link<%= title eq 'Transactions' ? ' active' : '' %>" href="<%= url_for '/admin/transactions' %>">Transactions</a>
</li>
<li class="nav-item">
<a class="nav-link<%= title eq 'Users' ? ' active' : '' %>" href="<%= url_for '/admin/users' %>">Users</a>
</li>
<li class="nav-item">
<a class="nav-link<%= title eq 'Organisations' ? ' active' : '' %>" href="<%= url_for '/admin/organisations' %>">Organisations</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<%= url_for '/admin/logout' %>">Logout</a>
</li>
</div>
</div>
</nav>
<div class="container">
<%= content %>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.min.js" integrity="sha256-jpW4gXAhFvqGDD5B7366rIPD7PDbAmqq4CO0ZnHbdM4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
%= content_for 'javascript';
</body>
</html>