using HTMX to load camers in list/detail views

full_example
Mark Cotton 2023-07-14 01:11:14 -05:00
parent 91b72ab9d9
commit aab2168f92
6 changed files with 90 additions and 39 deletions

View File

@ -466,6 +466,19 @@ class EagleEyev3():
}
def get_camera_by_id(self, esn):
found_camera = None
for camera in self.cameras:
if camera.id == esn:
found_camera = camera
break
if found_camera == None:
camera = Camera()
logging.info(f"returning camera {camera} for search query {esn}")
return camera
@ -490,7 +503,10 @@ class Device():
return self.status['connectionStatus'] == "online"
def is_offline(self):
return self.status['connectionStatus'] == "deviceOffline" or self.status['connectionStatus'] == "bridgeOffline"
return self.status['connectionStatus'] == "deviceOffline" \
or self.status['connectionStatus'] == "bridgeOffline" \
or self.status['connectionStatus'] == "error"
def __repr__(self):
if self.is_online():

47
app.py
View File

@ -46,8 +46,17 @@ def index():
logging.info(f"{check['success']} - check get_current_user")
#logging.info(een.cameras)
# this call could get expensive
een.get_list_of_cameras()
#logging.info(een.cameras)
values = {
"current_user": een.current_user
"current_user": een.current_user,
"cameras": een.cameras
}
return render_template('index.html', template_values=values)
@ -81,5 +90,41 @@ def logout():
return redirect(url_for('index'))
@app.route('/cameras')
def cameras():
if 'een' in session:
een = session['een']
else:
een = EagleEyev3()
een.get_list_of_cameras()
values = {
"current_user": een.current_user,
"cameras": een.cameras
}
return render_template('cameras_partial.html', template_values=values)
@app.route('/camera/<esn>')
def camera_detail(esn=None):
if 'een' in session:
een = session['een']
else:
een = EagleEyev3()
camera = een.get_camera_by_id(esn)
values = {
"current_user": een.current_user,
"camera": camera,
"events": camera.get_list_of_events()
}
return render_template('camera_detail_partial.html', template_values=values)
if __name__ == '__main__':
app.run(host=een.server_host, port=een.server_port)

BIN
static/placeholder.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

View File

@ -1,5 +1,4 @@
{% if "X-PJAX" not in request.headers %}
<!doctype html>
<html lang="en">
<head>
@ -10,7 +9,7 @@
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
{% block title %}
<title>classifier.een.cloud</title>
<title>status.mcotton.space</title>
{% endblock %}
<!-- Bootstrap core CSS -->
@ -61,14 +60,11 @@
<main role="main">
{% endif %}
{% block main %}
{% endblock %}
{% if "X-PJAX" not in request.headers %}
</main>
<footer class="text-muted">
@ -88,35 +84,14 @@
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="/static/js/jquery.pjax.js"></script>
<script src="https://unpkg.com/htmx.org@1.9.2"></script>
<script>
$(document).ready(function() {
$('#user_mode_toggle').on('click', function(event) {
event.stopPropagation();
$.ajax({
type: "POST",
url: '/api/v1/user_mode/toggle',
dataType: "text",
contentType : 'application/json',
success: function(data) {
//$('#labelModal-add').text('Saved');
//$('#labelModal').modal('hide');
location.reload();
},
error: function(data) {
console.log(data)
$('#labelModal-add').text('Failed');
//$('#labelModal').modal('hide');
//location.reload();
}
});
});
});
@ -128,4 +103,3 @@
{% endblock%}
</body>
</html>
{% endif %}

View File

@ -0,0 +1,12 @@
<div class="row">
<div class="col-md-6">
<h3>{{ template_values['camera'].name }}</h3>
<img src="/static/placeholder.png" style="max-height:360px;">
</div>
<div class="col-md-6">
<h3>Events</h3>
</div>
</div>

View File

@ -11,11 +11,15 @@
{% block main %}
<div class="container text-center">
<div class="row">
<div class="col-md-6 offset-3">
<h1>Hello {{ template_values['current_user']['firstName'] }} {{ template_values['current_user']['lastName'] }}</h1>
</div>
<div class="row" id="camera_list">
{% include 'cameras_partial.html' %}
</div>
</div>
{% endblock %}