113 lines
6.0 KiB
Plaintext
113 lines
6.0 KiB
Plaintext
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<!-- Required meta tags -->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<!-- CSS -->
|
|
<link rel='stylesheet' href='/css/materialdesignicons.min.css' />
|
|
<link rel='stylesheet' href='/css/style.css' />
|
|
<!-- JS Scripts -->
|
|
<script src="/js/table-sort.js"></script>
|
|
<title><%= title %></title>
|
|
</head>
|
|
<body>
|
|
<% if(action == 'view') { %>
|
|
<!-- Ride Page -->
|
|
<link rel='stylesheet' href='/css/modal.css' />
|
|
<link rel='stylesheet' href='/css/button.css' />
|
|
<div id="modal" class="overlay">
|
|
<a class="cancel" href="#" onclick="history.go(-1)"></a>
|
|
<div class="modal">
|
|
<h2>Ride info</h2>
|
|
<div class="content">
|
|
<% if( data !== undefined ) {%>
|
|
<p>Date: <%= data.date %></p>
|
|
<p>From: <%= data.start_point %></p>
|
|
<p>To: <%= data.end_point %></p>
|
|
<p>RoutID <%= data.route_id %></p>
|
|
<p>Time Taken: <%= data.time_taken %> Min</p>
|
|
<p>Average speed: <%= data.average_speed %> Km/h</p>
|
|
<p>Departed : <%= new Date (data.departure).toLocaleTimeString("en-US" , { hour: 'numeric', minute: 'numeric'}); %> <br> <%= new Date (data.departure).toLocaleDateString("en-GB", { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'}) %> </p>
|
|
<p>Arived : <%= new Date (data.arival).toLocaleTimeString("en-US" , { hour: 'numeric', minute: 'numeric'}); %> <br> <%= new Date (data.arival).toLocaleDateString("en-GB", { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'}) %></p>
|
|
<button class="btn btn-delete" onclick="location.href='/delete/<%= data.id %>'">
|
|
<span class="mdi mdi-delete mdi-24px"></span>
|
|
<span class="mdi mdi-delete-empty mdi-24px"></span>
|
|
</button>
|
|
<% } else { %>
|
|
<p style="color: red;"> Error: This ride does not exist</p>
|
|
<% } %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% } else { %>
|
|
<!-- Overview Page -->
|
|
<link rel='stylesheet' href='/css/table.css' />
|
|
<div class="container">
|
|
<h1 class="text-center mt-3 mb-3">
|
|
<span class="mdi mdi-bicycle HeadIcon"></span><br>
|
|
<%= title %>
|
|
</h1>
|
|
<% if(message.length > 0) { %>
|
|
<div class="alert alert-danger"><%= message %></div>
|
|
<% } %>
|
|
<div style="overflow-x:auto;">
|
|
<table class="table table-sort table-arrows">
|
|
<thead>
|
|
<tr>
|
|
<th>Date</th>
|
|
<th>From</th>
|
|
<th>To</th>
|
|
<th>Time taken</th>
|
|
<th>Avg. Speed</th>
|
|
<!-- Uncomment next line to add an action row (Delete and Info button) to the table
|
|
<th class="TableActions">Action</th>
|
|
-->
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Check if there Rides loaded from DB -->
|
|
<%
|
|
if(TheData.length > 0)
|
|
<!-- If there are Rides output as table -->
|
|
{ TheData.forEach(function(data){
|
|
%>
|
|
<tr onclick="location.href='/view/<%= data.id %>'">
|
|
<td><%= new Date (data.departure).toLocaleDateString("en-GB", { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric'}) %></td>
|
|
<td><%= data.start_point %></td>
|
|
<td><%= data.end_point %></td>
|
|
<td><%= data.time_taken %> Min</td>
|
|
<td><%= data.average_speed %> Km/h</td>
|
|
<!-- Uncomment next lines to add an action row (Delete and Info button) to the table
|
|
<td class="TableActions">
|
|
<button class="btn btn-delete" onclick="location.href='/delete/<%= data.id %>'">
|
|
<span class="mdi mdi-delete mdi-24px"></span>
|
|
<span class="mdi mdi-delete-empty mdi-24px"></span>
|
|
</button>
|
|
<button class="btn btn-info" onclick="location.href='/view/<%= data.id %>'">
|
|
<span class="mdi mdi-information-outline mdi-24px"></span>
|
|
<span class="mdi mdi-information mdi-24px"></span>
|
|
</button>
|
|
</td>
|
|
-->
|
|
</tr>
|
|
<% }); } else { %>
|
|
<tr>
|
|
<td colspan="5">No Data Found</td>
|
|
</tr>
|
|
<% } %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<% } %>
|
|
<footer>
|
|
<div class="left">
|
|
<p>BikeRideViewer | By brammp</p>
|
|
</div>
|
|
<div class="right">
|
|
<p><a href="https://git.bprieshof.nl/brammp/BikeRideViewer"><span class="mdi mdi-git mdi-18px"></span>SourceCode</a></p>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html> |