cleaning up event list, making more consistent text-align

main
Mark Cotton 2023-08-07 13:56:18 -06:00
parent dd77dec94a
commit 9a46f72a51
3 changed files with 32 additions and 16 deletions

View File

@ -36,6 +36,11 @@
} }
</style> </style>
<style>
.left_text {
text-align: left;
}
</style>
{% block style %} {% block style %}
{% endblock %} {% endblock %}

View File

@ -1,15 +1,26 @@
<h3>List of Events <i class="bi bi-calendar-event"></i></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> {% if template_values['events'] %}
{% if template_values['events'] %} {% for event in template_values['events'] %}
{% for event in template_values['events'] %} <div class="row">
<li> <div class="col-2 left_text">
{{ event['data'][0]['newStatus']['connectionStatus'] }} <small>Status:</small>
<br> <small>{{ event['endTimestamp'] }}</small> </div>
<br> <small>{{ event['startTimestamp'] }}</small> <div class="col-9 offset-1 left_text">
</li> <b>{{ event['data'][0]['newStatus']['connectionStatus'] }}</b>
{% endfor %} </div>
{% else %} <div class="col-2 left_text">
<li>No events in the last six hours</li> <small>End:</small>
{% endif %} </div>
</ul> <div class="col-9 offset-1 left_text">
{{ event['endTimestamp'] }}
</div>
<div class="col-2 left_text">
<small>Start:</small>
</div>
<div class="col-9 offset-1 left_text">
{{ event['startTimestamp'] }}
</div>
</div>
{% endfor %}
{% endif %}

View File

@ -5,11 +5,11 @@
{% for camera in template_values['cameras'] %} {% for camera in template_values['cameras'] %}
{% if camera.is_online() %} {% if camera.is_online() %}
<div class="row"> <div class="row">
<div class="col-8"> <div class="col-7 offset-1 left_text">
{{ camera.name }} {{ camera.name }}
</div> </div>
<div class="col-4"> <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 }}/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 }}/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> <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>
@ -21,7 +21,7 @@
{% for camera in template_values['cameras'] %} {% for camera in template_values['cameras'] %}
{% if camera.is_offline() %} {% if camera.is_offline() %}
<div class="row"> <div class="row">
<div class="col-8"> <div class="col-7 offset-1 left_text">
{{ camera.name }} {{ camera.name }}
</div> </div>
<div class="col-4"> <div class="col-4">