Changed history display method

8 years ago · af95bfa4d3
parent b8bff45bec
commit af95bfa4d3
8 changed files with 1132 additions and 26 deletions
--- a/ELAB-RFID-locks.sublime-workspace
+++ b/ELAB-RFID-locks.sublime-workspace
--- a/server.py
+++ b/server.py
@ -26,13 +26,13 @@ def index():
@app.route('/status')
@requires_auth
 def somehtml():
-	history = []
-	with open('history.json', 'r') as json_data:
-		history = json.load(json_data)
-	history = history[-15:]
-	for event in history:
-		event['time'] = epochFormat(event['time'])
-	return render_template('status.html',  events = history[::-1])
+	#history = []
+	#with open('history.json', 'r') as json_data:
+	#	history = json.load(json_data)
+	#history = history[-15:]
+	#for event in history:
+	#	event['time'] = epochFormat(event['time'])
+	return render_template('status.html')

@app.route('/users')
@requires_auth
@ -42,7 +42,12 @@ def users():
@app.route('/history')
@requires_auth
 def history():
-	return 'You have reached history'
+	return render_template('history.html')
+
+@app.route('/gethistory')
+@requires_auth
+def getHistory():
+	return send_from_directory('.', 'history.json')

@app.route('/getcardinfo/<cardID>')
@requires_auth
--- a/server.pyc
+++ b/server.pyc
--- a/static/history_script.js
+++ b/static/history_script.js
@ -0,0 +1,3 @@
+$('.search-bar').change(function() {
+    alert('text changed');
+});
--- a/static/script.js
+++ b/static/script.js
@ -1,3 +1,5 @@
+var eventHistory = []
+
 function overlay_in() {
 	$('.shadow').css({'display' : 'block'});
 	$('.overlay').css({'display' : 'block'});
@ -29,8 +31,27 @@ function save() {
 }

 $(document).ready(function() {
-	$('.event').click(function() {
-		var cardID = $(this).attr('card-id')
+	jQuery.ajaxSetup({ cache: false });
+	$.getJSON('http://127.0.0.1:5000/gethistory', function(data) {
+		eventHistory = data;
+
+		for (var i = 0; i < data.length; i++) {
+			var dateString = (new Date(data[i].time*1000)).toLocaleString();
+			var newElement = '<div class="event" card-id="' + data[i].cardID + '">\
+					<div class="time">' + dateString + '</div>\
+					<div class="name">';
+			if (data[i].name == "")
+				newElement += '<span class="unknown_card">' + data[i].cardID + '</span>';
+			else
+				newElement += data[i].name;
+			newElement += '</div>\
+				</div>';
+			var toInsert = $(newElement);
+			$('.search-bar').after(toInsert);
+		}
+	});
+	$('.recent').on('click', '.event', function() {
+		var cardID = $(this).attr('card-id');
 		$('.card-id').text(cardID);
 		$.getJSON('http://127.0.0.1:5000/getcardinfo/' + cardID, function(data) {
 			$('#name').val(data.name);
@ -49,5 +70,10 @@ $(document).ready(function() {
 			$('#tools').prop('checked', false);
 		});
 		overlay_in();
-	})	
+	});
+	$('.search-bar').on('keyup', function() {
+		if (eventHistory[1].name.match($('.search-bar').val())) {
+			alert('match');
+		}
+	});
 })
--- a/static/style.css
+++ b/static/style.css
@ -10,6 +10,7 @@ html {
 	position: absolute;
 	top: 0;
 	width: 30%;
+	text-align: center;
 }

 .event {
@ -26,12 +27,14 @@ html {
 }

 .history-header {
+	display: inline-block;
 	background-color: #013A3A;
 	color: #D7E2E2;
-	margin: 0 -10pt 12pt 10pt;
+	margin: 0 0 8pt 0;
 	padding: 10pt 0 10pt 0;
 	text-align: center;
 	font-size: 16pt;
+	width: 100%;
 }

 .time {
--- a/templates/history.html
+++ b/templates/history.html
@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>History</title>
+    <link rel="stylesheet" type="text/css" href="static/style.css">
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
+    <script
+              src="http://code.jquery.com/jquery-3.1.1.js"
+              integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
+              crossorigin="anonymous"></script>
+    <script type="text/javascript" src="static/history_script.js"></script>
+</head>
+<body>
+<input type="text" name="search" class="search-bar">
+</body>
+</html>
--- a/templates/status.html
+++ b/templates/status.html
@ -13,19 +13,9 @@
 </head>
 <body>
 	<div class="recent">
-	<div class="history-header">History</div>
-		{% for event in events %}
-			<div class="event" card-id="{{event.cardID}}">
-				<div class="time">{{event.time}}</div>
-				<div class="name">
-					{% if event.name == "" %}
-						<span class="unknown_card">{{event.cardID}}</span>
-					{% else %}
-						{{event.name}}
-					{% endif %}
-				</div>
-			</div>
-		{% endfor %}
+	<div class="history-header">History</div><br>
+	<input type="text" name="search-bar" class="search-bar" placeholder="Search">
+		
 	</div>
 	<div class="everything-else">
 		<h1>Card access manager</h1>