mcotton
/
EE-status-v3
1
0
Fork 0
Code Issues 13 Pull Requests Packages Projects Releases Wiki Activity

clean-up cameras list, adding bootstrap icons

main
Mark Cotton 2023-08-07 12:55:58 -06:00
parent 81eb4daca3
commit dd77dec94a
7 changed files with 33 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app.py
View File

@ -246,7 +246,7 @@ def camera_status_plot(esn=None):
fig.savefig(buf, format="png", transparent=True) fig.savefig(buf, format="png", transparent=True)
# Embed the result in the html output. # Embed the result in the html output.
data = base64.b64encode(buf.getbuffer()).decode("ascii") data = base64.b64encode(buf.getbuffer()).decode("ascii")
return f"<h3>Graph of Status Events</h3><div class='col-md-12'><img src='data:image/png;base64,{data}' style='max-width:100%'/></div>" return f"<h3>Graph of Status Events <i class='bi bi-bar-chart'></i></h3><div class='col-md-12'><img src='data:image/png;base64,{data}' style='max-width:100%'/></div>"

2
templates/base.html
View File

@ -26,6 +26,8 @@
<!-- self-hosted fontawesome --> <!-- self-hosted fontawesome -->
<link href="/static/css/all.css" rel="stylesheet"> <link href="/static/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<link href="/static/theme.css" rel="stylesheet"> <link href="/static/theme.css" rel="stylesheet">
<style> <style>

2
templates/camera_detail_partial.html
View File

@ -1,3 +1,3 @@
<h3>Preview Image</h3> <h3>Preview Image <i class="bi bi-card-image"></i></h3>
<h5>{{ template_values['camera'].name }}</h5> <h5>{{ template_values['camera'].name }}</h5>
<img src="/camera/{{ template_values['camera'].id }}/live_preview" style="max-height:360px;"> <img src="/camera/{{ template_values['camera'].id }}/live_preview" style="max-height:360px;">

2
templates/camera_events_partial.html
View File

@ -1,4 +1,4 @@
<h3>Events</h3> <h3>List of Events <i class="bi bi-calendar-event"></i></h3>
<h5>{{ template_values['camera'].name }}</h5> <h5>{{ template_values['camera'].name }}</h5>
<ul> <ul>
{% if template_values['events'] %} {% if template_values['events'] %}

2
templates/camera_preview.html
View File

@ -1,3 +1,3 @@
<h3>Preview Image</h3> <h3>Preview Image <i class="bi bi-card-image"></i></h3>
<h5>{{ template_values['camera'].name }}</h5> <h5>{{ template_values['camera'].name }}</h5>
<img src="/camera/{{ template_values['camera'].id }}/preview_image" style="max-height:360px; max-width:100%"> <img src="/camera/{{ template_values['camera'].id }}/preview_image" style="max-height:360px; max-width:100%">

57
templates/cameras_partial.html
View File

@ -1,47 +1,38 @@
<h3>Cameras</h3> <h3>Cameras <i class="bi bi-camera-video"></i></h3>
<h5>Online</h5> <h5>Online</h5>
<ul>
{% for camera in template_values['cameras'] %} {% for camera in template_values['cameras'] %}
{% if camera.is_online() and camera.bridge_id %} {% if camera.is_online() %}
<li>{{ camera.name }}</li> <div class="row">
<a href="/camera/{{ camera.id }}/preview" hx-get="/camera/{{ camera.id }}/preview" hx-trigger="click" hx-target="#camera_detail">preview</a> <div class="col-8">
<a href="/camera/{{ camera.id }}/event" hx-get="/camera/{{ camera.id }}/events" hx-trigger="click" hx-target="#camera_status_events">events</a> {{ camera.name }}
<a href="/camera/{{ camera.id }}/status_plot" hx-get="/camera/{{ camera.id }}/status_plot" hx-trigger="click" hx-target="#camera_status_plot">graph</a> </div>
<div class="col-4">
<a href="/camera/{{ camera.id }}/preview" hx-get="/camera/{{ camera.id }}/preview" hx-trigger="click" hx-target="#camera_detail"><i class="bi bi-card-image" title="click to load preview image"></i></a>
<a href="/camera/{{ camera.id }}/event" hx-get="/camera/{{ camera.id }}/events" hx-trigger="click" hx-target="#camera_status_events"><i class="bi bi-calendar-event" title="click to load events list"></i></a>
<a href="/camera/{{ camera.id }}/status_plot" hx-get="/camera/{{ camera.id }}/status_plot" hx-trigger="click" hx-target="#camera_status_plot"><i class="bi bi-bar-chart" title="click to generate graph of events"></i></a>
</div>
</div>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
<hr>
{% for camera in template_values['cameras'] %}
{% if camera.is_online() and camera.bridge_id == None %}
<li>{{ camera.name }}</li>
<a href="/camera/{{ camera.id }}/preview" hx-get="/camera/{{ camera.id }}/preview" hx-trigger="click" hx-target="#camera_detail">preview</a>
<a href="/camera/{{ camera.id }}/event" hx-get="/camera/{{ camera.id }}/events" hx-trigger="click" hx-target="#camera_status_events">events</a>
<a href="/camera/{{ camera.id }}/status_plot" hx-get="/camera/{{ camera.id }}/status_plot" hx-trigger="click" hx-target="#camera_status_plot">graph</a>
{% endif %}
{% endfor %}
</ul>
<h5>Offline</h5> <h5>Offline</h5>
<ul>
{% for camera in template_values['cameras'] %} {% for camera in template_values['cameras'] %}
{% if camera.is_offline() and camera.bridge_id %} {% if camera.is_offline() %}
<li>{{ camera.name }}</li> <div class="row">
<a href="/camera/{{ camera.id }}/preview" hx-get="/camera/{{ camera.id }}/preview" hx-trigger="click" hx-target="#camera_detail">preview</a> <div class="col-8">
<a href="/camera/{{ camera.id }}/event" hx-get="/camera/{{ camera.id }}/events" hx-trigger="click" hx-target="#camera_status_events">events</a> {{ camera.name }}
<a href="/camera/{{ camera.id }}/status_plot" hx-get="/camera/{{ camera.id }}/status_plot" hx-trigger="click" hx-target="#camera_status_plot">graph</a> </div>
<div class="col-4">
<a href="/camera/{{ camera.id }}/preview" hx-get="/camera/{{ camera.id }}/preview" hx-trigger="click" hx-target="#camera_detail"><i class="bi bi-card-image" title="click to load preview image"></i></a>
<a href="/camera/{{ camera.id }}/event" hx-get="/camera/{{ camera.id }}/events" hx-trigger="click" hx-target="#camera_status_events"><i class="bi bi-calendar-event" title="click to load events list"></i></a>
<a href="/camera/{{ camera.id }}/status_plot" hx-get="/camera/{{ camera.id }}/status_plot" hx-trigger="click" hx-target="#camera_status_plot"><i class="bi bi-bar-chart" title="click to generate graph of events"></i></a>
</div>
</div>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
<hr>
{% for camera in template_values['cameras'] %}
{% if camera.is_offline() and camera.bridge_id == None %}
<li>{{ camera.name }}</li>
<a href="/camera/{{ camera.id }}/preview" hx-get="/camera/{{ camera.id }}/preview" hx-trigger="click" hx-target="#camera_detail">preview</a>
<a href="/camera/{{ camera.id }}/event" hx-get="/camera/{{ camera.id }}/events" hx-trigger="click" hx-target="#camera_status_events">events</a>
<a href="/camera/{{ camera.id }}/status_plot" hx-get="/camera/{{ camera.id }}/status_plot" hx-trigger="click" hx-target="#camera_status_plot">graph</a>
{% endif %}
{% endfor %}
</ul>
<button hx-get="/cameras" hx-trigger="click" hx-target="#camera_list" class="btn btn-md btn-secondary">load cameras</button> <button hx-get="/cameras" hx-trigger="click" hx-target="#camera_list" class="btn btn-md btn-secondary">load cameras</button>
<br> <br>

6
templates/index.html
View File

@ -29,16 +29,16 @@
{% include 'cameras_partial.html' %} {% include 'cameras_partial.html' %}
</div> </div>
<div class="col-md-7" id="camera_detail"> <div class="col-md-7" id="camera_detail">
<h2>Preview Image</h2> <h2>Preview Image <i class="bi bi-card-image"></i></h2>
</div> </div>
</div> </div>
<br> <br>
<div class="row"> <div class="row">
<div class="col-md-5" id="camera_status_events" style="max-height:400px; overflow:auto;"> <div class="col-md-5" id="camera_status_events" style="max-height:400px; overflow:auto;">
<h2>List of Events</h2> <h2>List of Events <i class="bi bi-calendar-event"></i></h2>
</div> </div>
<div class="col-md-7" id="camera_status_plot"> <div class="col-md-7" id="camera_status_plot">
<h2>Graph of Status Events</h2> <h2>Graph of Status Events <i class="bi bi-bar-chart"></i></h2>
</div> </div>
</div> </div>