Skip to content

GitLab

Commit 190a1137 authored by Vladislav Rykov's avatar Vladislav Rykov
Browse files

autoupdatable dashboard day_chart, improvable

parent c2a377bb
Hide whitespace changes
Inline Side-by-side
app/app/templates/new/public/application.html 0 → 100644
View file @ 190a1137
{% extends 'logged_layout.html' %}
{% block title %} HPC&A IoT - {{ app[1] }} {% endblock %}
{% block location %}
<a class="h4 mb-0 text-white text-uppercase d-none d-lg-inline-block" href="./applications">Applications</a>
<p class="h4 mb-0 text-white text-uppercase d-none d-lg-inline-block"> &nbsp;-&nbsp; </p>
<a class="h4 mb-0 text-white text-uppercase d-none d-lg-inline-block" href="./application/{{ app[1] }}">{{ app[0] }}</a>
{% endblock %}
{% block stats %}
<!-- Card stats -->
<div class="row">
<div class="col-xl-4 col-lg-6">
<div class="card card-stats mb-4 mb-xl-0">
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0">Name</h5>
<span class="h2 font-weight-bold mb-0">{{ app[0] }}</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6">
<div class="card card-stats mb-4 mb-xl-0">
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0">App-Key</h5>
<span class="h2 font-weight-bold mb-0">{{ app[1] }}</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6">
<div class="card card-stats mb-4 mb-xl-0">
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0">Secure</h5>
<span class="h2 font-weight-bold mb-0">{% if app[4] %} Yes {% else %} No {% endif %}</span>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block body %}
<!-- Page content -->
<div class="container-fluid mt--7">
<!-- Table -->
<div class="row">
<div class="col">
<div class="card shadow">
<div class="card-header bg-transparent">
<h3 class="mb-0">Details</h3>
</div>
<div class="card-body">
<div class="col-lg-12 col-md-6" style="margin-bottom : 30px;">
<div class="card" style="margin-bottom : 15px;">
<div class="card-body">
<h5 class="card-title">Description</h5>
<p class="card-text">{{ app[3] }}</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Security key (HEX)</h5>
<p class="card-text">{{ app[5] }}</p>
</div>
</div>
</div>
<div class="card-header bg-transparent">
<h3 class="mb-0">Devices</h3>
</div>
<div class="row icon-examples">
{% for d in devs %}
<div class="col-lg-3 col-md-6">
<button type="button" class="btn-icon-clipboard" data-clipboard-text="atom" title="{{ d[0] }}">
<div>
<i class="ni ni-atom"></i>
<span><a href="./{{ app[1] }}/device/{{ d[1] }}">{{ d[0] }}</a></span>
</div>
</button>
</div>
{% endfor %}
</div>
<div class="row" style="margin-top: 30px;">
<div class="col-lg-3">
<a href="./{{ app[1] }}/add-device"><button type="submit" class="btn btn-primary btn-block">Add device</button></a>
</div>
<div class="col-lg-3">
<a href="./{{ app[1] }}/alerts"><button type="submit" class="btn btn-primary btn-block">Alerts</button></a>
</div>
<div class="col-lg-3">
<a href="./{{ app[1] }}/automation"><button type="submit" class="btn btn-primary btn-block">Automation</button></a>
</div>
<div class="col-lg-3">
<a href="./{{ app[1] }}/settings"><button type="submit" class="btn btn-primary btn-block">Settings</button></a>
</div>
<!-- put inside settings
<div class="col-lg-3">
<button type="button" class="btn btn-danger btn-block" data-toggle="modal" data-target="#exampleModal">Delete</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
Modal Body ....
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger">Delete Application</button>
</div>
</div>
</div>
</div>
</div>
-->
</div>
</div>
</div>
</div>
</div>
{% endblock %}
app/app/templates/new/public/applications.html 0 → 100644
View file @ 190a1137
{% extends 'logged_layout.html' %}
{% block title %} HPC&amp;A IoT - Applications {% endblock %}
{% block location %} <a class="h4 mb-0 text-white text-uppercase d-none d-lg-inline-block" href="./applications">Applications</a> {% endblock %}
{% block body %}
<!-- Page content -->
<div class="container-fluid mt--7">
<!-- Table -->
<div class="row">
<div class="col">
<div class="card shadow">
<div class="card-header bg-transparent">
<h3 class="mb-0">Applications</h3>
</div>
<div class="card-body">
<div class="row">
{% for a in apps %}
<div class="col-lg-6 col-md-6" style="margin-bottom : 30px;">
<div class="card">
<div class="card-body">
<h5 class="card-title">{{ a[0] }}</h5>
<p class="card-text">{{ a[3] }}</p>
<a href="./application/{{ a[1] }}" class="btn btn-primary">Details</a>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="row" style="margin-top: 30px;">
<div class="col-lg-4">
<a href="../new-application"><button type="submit" class="btn btn-primary btn-block">New application</button></a>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
app/app/templates/new/public/dashboard.html
View file @ 190a1137
......@@ -4,85 +4,80 @@
{% block location %} <a class="h4 mb-0 text-white text-uppercase d-none d-lg-inline-block" href="./">Dashboard</a> {% endblock %}
{% block body %}
<!-- Header -->
<div class="header bg-gradient-primary pb-8 pt-5 pt-md-8">
<div class="container-fluid">
<div class="header-body">
<!-- Card stats -->
<div class="row">
<div class="col-xl-3 col-lg-6">
<div class="card card-stats mb-4 mb-xl-0">
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0">Created Apps</h5>
<span class="h2 font-weight-bold mb-0">{{ info[0] }}</span>
</div>
<div class="col-auto">
<div class="icon icon-shape bg-danger text-white rounded-circle shadow">
<i class="fas fa-chart-bar"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6">
<div class="card card-stats mb-4 mb-xl-0">
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0">Active Devices</h5>
<span class="h2 font-weight-bold mb-0">{{ info[1] }}</span>
</div>
<div class="col-auto">
<div class="icon icon-shape bg-warning text-white rounded-circle shadow">
<i class="fas fa-chart-pie"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6">
<div class="card card-stats mb-4 mb-xl-0">
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0">Total Activity</h5>
<span class="h2 font-weight-bold mb-0">{{ info[2] }}</span>
</div>
<div class="col-auto">
<div class="icon icon-shape bg-yellow text-white rounded-circle shadow">
<i class="fas fa-users"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6">
<div class="card card-stats mb-4 mb-xl-0">
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0">Last 24 Hours Activity</h5>
<span class="h2 font-weight-bold mb-0">{{ info[3] }}</span>
</div>
<div class="col-auto">
<div class="icon icon-shape bg-info text-white rounded-circle shadow">
<i class="fas fa-percent"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% block stats %}
<div class="row">
<div class="col-xl-3 col-lg-6">
<div class="card card-stats mb-4 mb-xl-0">
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0">Created Apps</h5>
<span class="h2 font-weight-bold mb-0">{{ info[0] }}</span>
</div>
<div class="col-auto">
<div class="icon icon-shape bg-danger text-white rounded-circle shadow">
<i class="fas fa-chart-bar"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6">
<div class="card card-stats mb-4 mb-xl-0">
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0">Active Devices</h5>
<span class="h2 font-weight-bold mb-0">{{ info[1] }}</span>
</div>
<div class="col-auto">
<div class="icon icon-shape bg-warning text-white rounded-circle shadow">
<i class="fas fa-chart-pie"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6">
<div class="card card-stats mb-4 mb-xl-0">
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0">Total Activity</h5>
<span class="h2 font-weight-bold mb-0">{{ info[2] }}</span>
</div>
<div class="col-auto">
<div class="icon icon-shape bg-yellow text-white rounded-circle shadow">
<i class="fas fa-users"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6">
<div class="card card-stats mb-4 mb-xl-0">
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0">Last 24 Hours Activity</h5>
<span class="h2 font-weight-bold mb-0">{{ info[3] }}</span>
</div>
<div class="col-auto">
<div class="icon icon-shape bg-info text-white rounded-circle shadow">
<i class="fas fa-percent"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block body %}
<div class="container-fluid mt--7">
<div class="row">
<div class="col-xl-8 mb-5 mb-xl-0">
......@@ -278,6 +273,56 @@
}]
}
}), e.data("chart", a))
}()
}();
(function worker() {
var e = $("#chart-sales");
$.get('./chart-update', function(cdata) {
cdata = eval(cdata);
var a = new Chart(e,
{
type: "line",
options:
{
scales:
{
yAxes: [
{
gridLines:
{
lineWidth: 1,
color: Charts.colors.gray[900],
zeroLineColor: Charts.colors.gray[900]
}
}]
},
tooltips:
{
callbacks:
{
label: function (e, a)
{
var t = a.datasets[e.datasetIndex].label || "",
o = e.yLabel,
n = "";
return 1 < a.datasets.length && (n += '<span class="popover-body-label mr-auto">' + t + "</span>"), n += '<span class="popover-body-value">' + o + "</span>"
}
}
}
},
data:
{
labels: cdata[0],
datasets: [
{
label: "Performance",
data: cdata[1]
}]
}
});
e.data("chart", a);
setTimeout(worker, 600000);
});
})();
</script>
{% endblock %}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment