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"> <div class="card-header">
%= $feedback->user->email; %= $feedback->user->email;
</div> </div>
<div class="card-block"> <div class="card-body">
<h6 class="card-title"> <h6 class="card-title">
%= format_human_datetime $feedback->submitted_at; %= format_human_datetime $feedback->submitted_at;
</h6> </h6>

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

@ -34,8 +34,10 @@
<h4 class="card-header"> <h4 class="card-header">
Feedback Message Feedback Message
</h4> </h4>
<div class="card-block"> <div class="card-body">
<pre class="card-text"><%= $feedback->feedbacktext %></pre> <div class="card-text">
<pre><%= $feedback->feedbacktext %></pre>
</div>
</div> </div>
</div> </div>
</div> </div>

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

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

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

@ -36,7 +36,7 @@ function initMap() {
<h3 class="card-header"> <h3 class="card-header">
%= $valid_org->name %= $valid_org->name
</h3> </h3>
<div class="card-block"> <div class="card-body">
<form action="<%= url_for %>" method="post"> <form action="<%= url_for %>" method="post">
<div class="form-group row"> <div class="form-group row">
<label for="name" class="col-md-4 col-form-label">Organisation Name</label> <label for="name" class="col-md-4 col-form-label">Organisation Name</label>
@ -93,23 +93,17 @@ function initMap() {
</h3> </h3>
</div> </div>
<div id="mapBody" role="tabpanel"> <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 id="map"></div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="col-12"> <div class="col-12">
<div class="card mb-3"> <div class="card mb-3">
<h3 class="card-header"> <h3 class="card-header">
Transactions Transactions
</h3> </h3>
<ul class="list-group list-group-flush"> <div class="list-group list-group-flush">
% for my $transaction ( $transactions->all ) { % 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"> <a href="<%= url_for '/admin/transactions/' . $transaction->id %>" class="list-group-item list-group-item-action">
<div class="row text-center"> <div class="row text-center">
<div class="col">From: <%= $transaction->buyer->name %></div> <div class="col">From: <%= $transaction->buyer->name %></div>
@ -119,15 +113,11 @@ function initMap() {
<div class="col">Purchase Time: <%= $transaction->purchase_time %></div> <div class="col">Purchase Time: <%= $transaction->purchase_time %></div>
</div> </div>
</a> </a>
</div>
</li>
% } % }
<li class="list-group-item"> <div class="list-group-item">
<div class="container">
%= bootstrap_pagination( $c->param('page') || 1, $transactions->pager->last_page, { class => 'justify-content-center' } ); %= bootstrap_pagination( $c->param('page') || 1, $transactions->pager->last_page, { class => 'justify-content-center' } );
</div> </div>
</li> </div>
</ul>
</div> </div>
</div> </div>
</div> </div>

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

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

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

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

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

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

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

@ -12,9 +12,11 @@
</div> </div>
% } % }
<form action="<%= url_for %>" method="post" autocomplete="off"> <form action="<%= url_for %>" method="post" autocomplete="off">
<div class="card mb-3">
<h3 class="card-header"> <h3 class="card-header">
User Details User Details
</h3> </h3>
<div class="card-body">
<div class="form-group"> <div class="form-group">
<label for="email">Email Address</label> <label for="email">Email Address</label>
<input id="email" type="text" autocomplete="off" class="form-control" placeholder="Email" name="email" value="<%= $user->email %>"> <input id="email" type="text" autocomplete="off" class="form-control" placeholder="Email" name="email" value="<%= $user->email %>">
@ -32,10 +34,14 @@
<input id="new_password" type="password" autocomplete="off" class="form-control" placeholder="New Password" name="new_password"> <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> <p class="help-block">Leave blank unless you want to change their password</p>
</div> </div>
</div>
</div>
<div class="card mb-3">
% if ( my $customer_rs = $user->entity->customer ) { % if ( my $customer_rs = $user->entity->customer ) {
<h3 class="card-header"> <h3 class="card-header">
Customer Details Customer Details
</h3> </h3>
<div class="card-body">
<div class="form-group"> <div class="form-group">
<label for="postcode">Customer Postcode</label> <label for="postcode">Customer Postcode</label>
<input id="postcode" type="text" class="form-control" placeholder="Postcode" name="postcode" value="<%= $customer_rs->postcode %>"> <input id="postcode" type="text" class="form-control" placeholder="Postcode" name="postcode" value="<%= $customer_rs->postcode %>">
@ -52,10 +58,12 @@
<label for="year_of_birth">Year of Birth</label> <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> <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>
</div>
% } elsif ( my $org_rs = $user->entity->organisation ) { % } elsif ( my $org_rs = $user->entity->organisation ) {
<h3 class="card-header"> <h3 class="card-header">
Organisation Details Organisation Details
</h3> </h3>
<div class="card-body">
<div class="form-group"> <div class="form-group">
<label for="postcode">Organisation Postcode</label> <label for="postcode">Organisation Postcode</label>
<input id="postcode" type="text" class="form-control" placeholder="Postcode" name="postcode" value="<%= $org_rs->postcode %>"> <input id="postcode" type="text" class="form-control" placeholder="Postcode" name="postcode" value="<%= $org_rs->postcode %>">
@ -76,12 +84,16 @@
<label for="town">Town</label> <label for="town">Town</label>
<input id="town" type="sector" class="form-control" placeholder="Sector Area Code" name="sector" value="<%= $org_rs->sector %>"> <input id="town" type="sector" class="form-control" placeholder="Sector Area Code" name="sector" value="<%= $org_rs->sector %>">
</div> </div>
</div>
% } else { % } else {
<h3 class="card-header"> <h3 class="card-header text-white bg-danger">
User is not a customer or an organisation Warning!
</h3> </h3>
<div class="card-body">
User is not a customer or an organisation
</div>
% } % }
</div>
<div class="form-group"> <div class="form-group">
<button class="btn btn-primary form-control" type="submit">Edit Account</button> <button class="btn btn-primary form-control" type="submit">Edit Account</button>
</div> </div>
@ -90,10 +102,8 @@
<h3 class="card-header"> <h3 class="card-header">
Transactions Transactions
</h3> </h3>
<ul class="list-group list-group-flush"> <div class="list-group list-group-flush">
% for my $transaction ( $transactions->all ) { % 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"> <a href="<%= url_for '/admin/transactions/' . $transaction->id %>" class="list-group-item list-group-item-action">
<div class="row text-center"> <div class="row text-center">
<div class="col">From: <%= $transaction->buyer->name %></div> <div class="col">From: <%= $transaction->buyer->name %></div>
@ -103,13 +113,9 @@
<div class="col">Purchase Time: <%= $transaction->purchase_time %></div> <div class="col">Purchase Time: <%= $transaction->purchase_time %></div>
</div> </div>
</a> </a>
</div>
</li>
% } % }
<li class="list-group-item"> <div class="list-group-item">
<div class="container">
%= bootstrap_pagination( $c->param('page') || 1, $transactions->pager->last_page, { class => 'justify-content-center' } ); %= bootstrap_pagination( $c->param('page') || 1, $transactions->pager->last_page, { class => 'justify-content-center' } );
</div> </div>
</li> </div>
</ul>
</div> </div>

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

@ -6,16 +6,14 @@
<title>LocalLoop Admin - <%= title %></title> <title>LocalLoop Admin - <%= title %></title>
<!-- Bootstrap and jQuery js --> <!-- 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'; %= stylesheet '/static/admin/css/main.css';
</head> </head>
<body> <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" <button class="navbar-toggler navbar-toggler-right"
type="button" type="button"
data-toggle="collapse" data-toggle="collapse"
@ -26,21 +24,44 @@
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<a class="navbar-brand" href="<%= url_for '/admin/home' %>">LocalLoop Admin</a>
<div class="collapse navbar-collapse" id="navbarNav"> <div class="collapse navbar-collapse" id="navbarNav">
<div class="navbar-nav ml-auto"> <ul class="navbar-nav ml-auto">
<a class="nav-item nav-link<%= title eq 'Feedback' ? ' active' : '' %>" href="<%= url_for '/admin/feedback' %>">Feedback</a> <li class="nav-item dropdown">
<a class="nav-item nav-link<%= title eq 'Tokens' ? ' active' : '' %>" href="<%= url_for '/admin/tokens' %>">Tokens</a> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">
<a class="nav-item nav-link<%= title eq 'Transactions' ? ' active' : '' %>" href="<%= url_for '/admin/transactions' %>">Transactions</a> Reports
<a class="nav-item nav-link<%= title eq 'Users' ? ' active' : '' %>" href="<%= url_for '/admin/users' %>">Users</a> </a>
<a class="nav-item nav-link<%= title eq 'Organisations' ? ' active' : '' %>" href="<%= url_for '/admin/organisations' %>">Organisations</a> <div class="dropdown-menu">
<a class="nav-item nav-link" href="<%= url_for '/admin/logout' %>">Logout</a> <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>
</div> </div>
</nav> </nav>
<div class="container"> <div class="container">
<%= content %> <%= content %>
</div> </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'; %= content_for 'javascript';
</body> </body>
</html> </html>