added progress bar for htmx shamelessly ripped-off from https://dev.to/amal/global-progress-bar-for-htmx-50fa
parent
95fbcfd2d4
commit
a44090f042
|
@ -1,21 +1,21 @@
|
||||||
<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>
|
||||||
<a href="/camera/{{ template_values['camera'].id }}/events/1" hx-get="/camera/{{ template_values['camera'].id }}/events/1" hx-trigger="click" hx-target="#camera_status_events">
|
<a href="/camera/{{ template_values['camera'].id }}/events/1" hx-get="/camera/{{ template_values['camera'].id }}/events/1" hx-trigger="click" hx-target="#camera_status_events" hx-indicator=".progress">
|
||||||
<button class="btn btn-outline-success">
|
<button class="btn btn-outline-success">
|
||||||
<i class="bi bi-calendar-event" title="click to load events list for 1 day">1x</i>
|
<i class="bi bi-calendar-event" title="click to load events list for 1 day">1x</i>
|
||||||
</button>
|
</button>
|
||||||
</a>
|
</a>
|
||||||
<a href="/camera/{{ template_values['camera'].id }}/events/3" hx-get="/camera/{{ template_values['camera'].id }}/events/3" hx-trigger="click" hx-target="#camera_status_events">
|
<a href="/camera/{{ template_values['camera'].id }}/events/3" hx-get="/camera/{{ template_values['camera'].id }}/events/3" hx-trigger="click" hx-target="#camera_status_events" hx-indicator=".progress">
|
||||||
<button class="btn btn-outline-success">
|
<button class="btn btn-outline-success">
|
||||||
<i class="bi bi-calendar-event" title="click to load events list for 3 days">3x</i>
|
<i class="bi bi-calendar-event" title="click to load events list for 3 days">3x</i>
|
||||||
</button>
|
</button>
|
||||||
</a>
|
</a>
|
||||||
<a href="/camera/{{ template_values['camera'].id }}/events/7" hx-get="/camera/{{ template_values['camera'].id }}/events/7" hx-trigger="click" hx-target="#camera_status_events">
|
<a href="/camera/{{ template_values['camera'].id }}/events/7" hx-get="/camera/{{ template_values['camera'].id }}/events/7" hx-trigger="click" hx-target="#camera_status_events" hx-indicator=".progress">
|
||||||
<button class="btn btn-outline-success">
|
<button class="btn btn-outline-success">
|
||||||
<i class="bi bi-calendar-event" title="click to load events list for 7 days">7x</i>
|
<i class="bi bi-calendar-event" title="click to load events list for 7 days">7x</i>
|
||||||
</button>
|
</button>
|
||||||
</a>
|
</a>
|
||||||
<a href="/camera/{{ template_values['camera'].id }}/status_plot" hx-get="/camera/{{ template_values['camera'].id }}/status_plot" hx-trigger="click" hx-target="#camera_status_plot">
|
<a href="/camera/{{ template_values['camera'].id }}/status_plot" hx-get="/camera/{{ template_values['camera'].id }}/status_plot" hx-trigger="click" hx-target="#camera_status_plot" hx-indicator=".progress">
|
||||||
<button class="btn btn-outline-success">
|
<button class="btn btn-outline-success">
|
||||||
<i class="bi bi-bar-chart" title="click to generate graph of events"></i>
|
<i class="bi bi-bar-chart" title="click to generate graph of events"></i>
|
||||||
</button>
|
</button>
|
||||||
|
|
|
@ -9,17 +9,17 @@
|
||||||
{{ camera.name }}
|
{{ camera.name }}
|
||||||
</div>
|
</div>
|
||||||
<div class="col-5">
|
<div class="col-5">
|
||||||
<a href="/camera/{{ camera.id }}/preview" hx-get="/camera/{{ camera.id }}/preview" hx-trigger="click" hx-target="#camera_detail">
|
<a href="/camera/{{ camera.id }}/preview" hx-get="/camera/{{ camera.id }}/preview" hx-trigger="click" hx-target="#camera_detail" hx-indicator=".progress">
|
||||||
<button class="btn btn-outline-success">
|
<button class="btn btn-outline-success">
|
||||||
<i class="bi bi-card-image" title="click to load preview image"></i>
|
<i class="bi bi-card-image" title="click to load preview image"></i>
|
||||||
</button>
|
</button>
|
||||||
</a>
|
</a>
|
||||||
<a href="/camera/{{ camera.id }}/events" hx-get="/camera/{{ camera.id }}/events" hx-trigger="click" hx-target="#camera_status_events">
|
<a href="/camera/{{ camera.id }}/events" hx-get="/camera/{{ camera.id }}/events" hx-trigger="click" hx-target="#camera_status_events" hx-indicator=".progress">
|
||||||
<button class="btn btn-outline-success">
|
<button class="btn btn-outline-success">
|
||||||
<i class="bi bi-calendar-event" title="click to load events list"></i>
|
<i class="bi bi-calendar-event" title="click to load events list"></i>
|
||||||
</button>
|
</button>
|
||||||
</a>
|
</a>
|
||||||
<a href="/camera/{{ camera.id }}/status_plot" hx-get="/camera/{{ camera.id }}/status_plot" hx-trigger="click" hx-target="#camera_status_plot">
|
<a href="/camera/{{ camera.id }}/status_plot" hx-get="/camera/{{ camera.id }}/status_plot" hx-trigger="click" hx-target="#camera_status_plot" hx-indicator=".progress">
|
||||||
<button class="btn btn-outline-success">
|
<button class="btn btn-outline-success">
|
||||||
<i class="bi bi-bar-chart" title="click to generate graph of events"></i>
|
<i class="bi bi-bar-chart" title="click to generate graph of events"></i>
|
||||||
</button>
|
</button>
|
||||||
|
@ -37,17 +37,17 @@
|
||||||
{{ camera.name }}
|
{{ camera.name }}
|
||||||
</div>
|
</div>
|
||||||
<div class="col-5">
|
<div class="col-5">
|
||||||
<a href="/camera/{{ camera.id }}/preview" hx-get="/camera/{{ camera.id }}/preview" hx-trigger="click" hx-target="#camera_detail">
|
<a href="/camera/{{ camera.id }}/preview" hx-get="/camera/{{ camera.id }}/preview" hx-trigger="click" hx-target="#camera_detail" hx-indicator=".progress">
|
||||||
<button class="btn btn-outline-success">
|
<button class="btn btn-outline-success">
|
||||||
<i class="bi bi-card-image" title="click to load preview image"></i>
|
<i class="bi bi-card-image" title="click to load preview image"></i>
|
||||||
</button>
|
</button>
|
||||||
</a>
|
</a>
|
||||||
<a href="/camera/{{ camera.id }}/events" hx-get="/camera/{{ camera.id }}/events" hx-trigger="click" hx-target="#camera_status_events">
|
<a href="/camera/{{ camera.id }}/events" hx-get="/camera/{{ camera.id }}/events" hx-trigger="click" hx-target="#camera_status_events" hx-indicator=".progress">
|
||||||
<button class="btn btn-outline-success">
|
<button class="btn btn-outline-success">
|
||||||
<i class="bi bi-calendar-event" title="click to load events list"></i>
|
<i class="bi bi-calendar-event" title="click to load events list"></i>
|
||||||
</button>
|
</button>
|
||||||
</a>
|
</a>
|
||||||
<a href="/camera/{{ camera.id }}/status_plot" hx-get="/camera/{{ camera.id }}/status_plot" hx-trigger="click" hx-target="#camera_status_plot">
|
<a href="/camera/{{ camera.id }}/status_plot" hx-get="/camera/{{ camera.id }}/status_plot" hx-trigger="click" hx-target="#camera_status_plot" hx-indicator=".progress">
|
||||||
<button class="btn btn-outline-success">
|
<button class="btn btn-outline-success">
|
||||||
<i class="bi bi-bar-chart" title="click to generate graph of events"></i>
|
<i class="bi bi-bar-chart" title="click to generate graph of events"></i>
|
||||||
</button>
|
</button>
|
||||||
|
@ -58,5 +58,5 @@
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
||||||
|
|
||||||
<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" hx-indicator=".progress">load cameras</button>
|
||||||
<br>
|
<br>
|
||||||
|
|
|
@ -12,6 +12,110 @@
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
height: 4px;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 2px;
|
||||||
|
background-clip: padding-box;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.progress .indeterminate:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
background-color: inherit;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
will-change: left, right;
|
||||||
|
-webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395)
|
||||||
|
infinite;
|
||||||
|
animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
|
||||||
|
}
|
||||||
|
.progress .indeterminate:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
background-color: inherit;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
will-change: left, right;
|
||||||
|
-webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1)
|
||||||
|
infinite;
|
||||||
|
animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1)
|
||||||
|
infinite;
|
||||||
|
-webkit-animation-delay: 1.15s;
|
||||||
|
animation-delay: 1.15s;
|
||||||
|
}
|
||||||
|
.progress {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.htmx-request .progress {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
.htmx-request.progress {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
@-webkit-keyframes indeterminate {
|
||||||
|
0% {
|
||||||
|
left: -35%;
|
||||||
|
right: 100%;
|
||||||
|
}
|
||||||
|
60% {
|
||||||
|
left: 100%;
|
||||||
|
right: -90%;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
left: 100%;
|
||||||
|
right: -90%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes indeterminate {
|
||||||
|
0% {
|
||||||
|
left: -35%;
|
||||||
|
right: 100%;
|
||||||
|
}
|
||||||
|
60% {
|
||||||
|
left: 100%;
|
||||||
|
right: -90%;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
left: 100%;
|
||||||
|
right: -90%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-webkit-keyframes indeterminate-short {
|
||||||
|
0% {
|
||||||
|
left: -200%;
|
||||||
|
right: 100%;
|
||||||
|
}
|
||||||
|
60% {
|
||||||
|
left: 107%;
|
||||||
|
right: -8%;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
left: 107%;
|
||||||
|
right: -8%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes indeterminate-short {
|
||||||
|
0% {
|
||||||
|
left: -200%;
|
||||||
|
right: 100%;
|
||||||
|
}
|
||||||
|
60% {
|
||||||
|
left: 107%;
|
||||||
|
right: -8%;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
left: 107%;
|
||||||
|
right: -8%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
|
@ -22,6 +126,10 @@
|
||||||
|
|
||||||
{% block main %}
|
{% block main %}
|
||||||
|
|
||||||
|
<div class="progress" style="height: 3px; background-color: white;">
|
||||||
|
<div class="indeterminate" style="background-color: red;"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="container text-center">
|
<div class="container text-center">
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
Loading…
Reference in New Issue