<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Time tracker</title>
<link rel="stylesheet" type="text/css" href="lib/bootstrap-4.3/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="lib/datatables-1.10.18/css/dataTables.bootstrap4.min.css"/>
<script type="text/javascript" src="lib/jquery-3.3.1/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="lib/datatables-1.10.18/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="lib/datatables-1.10.18/js/dataTables.bootstrap4.min.js"></script>
<!--
id "f9ae7c82-8827-48c7-b650-4727ba21d1f9"
insertTimestamp "2019-03-01T14:51:37+01:00"
machineName "ACER"
machineIp "79.200.188.166"
eventTimestamp "2019-03-01T14:51:34+01:00"
eventType "AppStartup"
eventData ""
-->
<script>
$(document).ready(function() {
$('#notificationsTable').DataTable({
ajax: {
url: 'notifications',
dataSrc: 'result'
},
columns: [
{ data: 'eventTimestamp' },
{ data: 'machineName' },
{ data: 'eventType' },
{ data: 'eventData' }
],
paging: false
});
});
</script>
</head>
<body>
<header class="container-fluid">
<h1>Time tracker</h1>
<p>Simple time tracking application.</p>
</header>
<div class="container-fluid">
<table id="notificationsTable">
<thead>
<tr>
<th>Timestamp</th>
<th>Machine</th>
<th>Event</th>
<th>Data</th>
</tr>
</thead>
<tbody>
<!-- Wird von datatables.net gefüllt -->
</tbody>
</table>
</div>
<!--
<div class="container-fluid">
<table>
<thead>
<tr>
<th>Timestamp</th>
<th>Machine</th>
<th>Event</th>
<th>Data</th>
</tr>
</thead>
<tbody>
{% for notification in notifications %}
<tr>
<td>{{ notification.eventTimestamp|date('d.m.Y H:i:s') }}</td>
<td>{{ notification.machineName|e }}</td>
<td>{{ notification.eventType|e }}</td>
<td>{{ notification.eventData|e }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
-->
</body>
</html>