2024-11-19 14:58:40 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<title>Objects - AIL</title>
|
|
|
|
|
<link rel="icon" href="{{ url_for('static', filename='image/ail-icon.png') }}">
|
|
|
|
|
|
|
|
|
|
<!-- Core CSS -->
|
|
|
|
|
<link href="{{ url_for('static', filename='css/bootstrap4.min.css') }}" rel="stylesheet">
|
|
|
|
|
<link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="stylesheet">
|
|
|
|
|
|
|
|
|
|
<!-- JS -->
|
|
|
|
|
<script src="{{ url_for('static', filename='js/jquery.js')}}"></script>
|
|
|
|
|
<script src="{{ url_for('static', filename='js/echarts.min.js')}}"></script>
|
|
|
|
|
<script src="{{ url_for('static', filename='js/bootstrap4.min.js')}}"></script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{# <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>#}
|
|
|
|
|
|
|
|
|
|
{# <script defer src="{{ url_for('static', filename='js/regular.js')}}"></script>#}
|
|
|
|
|
{# <script defer src="{{ url_for('static', filename='js/solid.js')}}"></script>#}
|
|
|
|
|
{# <script defer src="{{ url_for('static', filename='js/fontawesome.js')}}"></script>#}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
.icon-button {
|
|
|
|
|
position: relative;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
border: none;
|
|
|
|
|
background: none;
|
|
|
|
|
{#padding: 0;#}
|
|
|
|
|
margin: 0;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
outline: inherit;
|
|
|
|
|
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon-wrapper {
|
|
|
|
|
position: relative;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.notification-badge {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: -10px;
|
|
|
|
|
right: -10px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
background: forestgreen;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
{% include 'nav_bar.html' %}
|
|
|
|
|
|
|
|
|
|
<div class="container-fluid">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
|
|
|
|
|
<div class="col-12 col-xl-6">
|
|
|
|
|
<div id="feeders_dashboard" style="width: 100%; height:600px;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="col-12 col-xl-6 mt-4">
|
|
|
|
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
|
|
|
|
|
{% for obj_type in nb_objects %}
|
|
|
|
|
<div class="col-sm-6 col-md-4 col-lg-3 text-center mb-4">
|
2024-11-20 13:41:36 +00:00
|
|
|
{% with type=obj_type, name=nb_objects[obj_type]['name'], icon=nb_objects[obj_type]['icon']['icon'], nb=nb_objects[obj_type]['nb'], url=nb_objects[obj_type]['link'] %}
|
2024-11-19 14:58:40 +00:00
|
|
|
{% include 'objects/block_obj_button.html' %}
|
|
|
|
|
{% endwith %}
|
|
|
|
|
</div>
|
|
|
|
|
{% endfor %}
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
2024-11-20 13:41:36 +00:00
|
|
|
</div>
|
2024-11-19 14:58:40 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
var chart = {};
|
|
|
|
|
$(document).ready(function(){
|
|
|
|
|
$("#page-Decoded").addClass("active");
|
|
|
|
|
$("#nav_dashboard_{{obj_type}}").addClass("active");
|
|
|
|
|
});
|
2024-11-20 13:41:36 +00:00
|
|
|
|
|
|
|
|
var btn_selector = {
|
|
|
|
|
{% for obj_type in nb_objects %}
|
|
|
|
|
'{{ obj_type }}': $("#obj_btn_{{ obj_type }}"),
|
|
|
|
|
{% endfor %}
|
|
|
|
|
}
|
2024-11-19 14:58:40 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
// Init Dashboard
|
|
|
|
|
var feederChart = echarts.init(document.getElementById('feeders_dashboard'));
|
|
|
|
|
window.addEventListener('resize', function() {
|
|
|
|
|
feederChart.resize();
|
|
|
|
|
});
|
|
|
|
|
var optionFeeder;
|
|
|
|
|
var maxDataLength = 21;
|
|
|
|
|
|
|
|
|
|
var feeders_names = [{% for feeder in feeders_dashboard['data'] %}'{{ feeder }}', {% endfor %}]
|
|
|
|
|
var feeders_xaxis = [{% for date in feeders_dashboard['dates'] %}'{{ date }}', {% endfor %}]
|
|
|
|
|
var feeders_data = {
|
|
|
|
|
{% for feeder in feeders_dashboard['data'] %}
|
|
|
|
|
{{ feeder }}: {{ feeders_dashboard['data'][feeder] }},
|
|
|
|
|
{% endfor %}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
optionFeeder = {
|
|
|
|
|
title: {
|
|
|
|
|
text: 'Feeders'
|
|
|
|
|
},
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
axisPointer: {
|
|
|
|
|
type: 'cross',
|
|
|
|
|
label: {
|
|
|
|
|
backgroundColor: '#6a7985'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
data: feeders_names
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
left: '3%',
|
|
|
|
|
right: '4%',
|
|
|
|
|
bottom: '3%',
|
|
|
|
|
containLabel: true
|
|
|
|
|
},
|
|
|
|
|
xAxis: [
|
|
|
|
|
{
|
|
|
|
|
type: 'category',
|
|
|
|
|
boundaryGap: false,
|
|
|
|
|
data: feeders_xaxis
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
yAxis: [
|
|
|
|
|
{
|
|
|
|
|
type: 'value'
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
series: [
|
|
|
|
|
{% for feeder in feeders_dashboard['data'] %}
|
|
|
|
|
{
|
|
|
|
|
name: '{{ feeder }}',
|
|
|
|
|
type: 'line',
|
|
|
|
|
stack: 'Total',
|
|
|
|
|
areaStyle: {},
|
|
|
|
|
emphasis: {
|
|
|
|
|
focus: 'series'
|
|
|
|
|
},
|
|
|
|
|
data: feeders_data['{{ feeder }}']
|
|
|
|
|
},
|
|
|
|
|
{% endfor %}
|
|
|
|
|
]
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
optionFeeder && feederChart.setOption(optionFeeder);
|
|
|
|
|
|
|
|
|
|
{# TODO UPDATE NEW FEEDER NAME#}
|
|
|
|
|
function updateFeederChart(data) {
|
2024-11-20 13:41:36 +00:00
|
|
|
let new_date = data['date']
|
2024-11-19 14:58:40 +00:00
|
|
|
feeders_xaxis.push(new_date)
|
|
|
|
|
feeders_xaxis.shift()
|
|
|
|
|
|
2024-11-20 13:41:36 +00:00
|
|
|
for (const f_name in data['data']) {
|
2024-11-19 14:58:40 +00:00
|
|
|
if (f_name in feeders_data) {
|
2024-11-20 13:41:36 +00:00
|
|
|
feeders_data[f_name].push(data['data'][f_name])
|
2024-11-19 14:58:40 +00:00
|
|
|
feeders_data[f_name].shift()
|
|
|
|
|
} else {
|
2024-11-20 13:41:36 +00:00
|
|
|
let fdata = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, data['data'][f_name]]
|
2024-11-19 14:58:40 +00:00
|
|
|
feeders_names.push(f_name)
|
|
|
|
|
feeders_data[f_name] = fdata
|
|
|
|
|
// add new feeder
|
|
|
|
|
optionFeeder.legend.data.push(f_name)
|
|
|
|
|
optionFeeder.series.push({name: f_name, type: 'line', stack: 'Total', areaStyle: {}, emphasis: {focus: 'series'}, data: feeders_data[f_name]})
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
feederChart.setOption(optionFeeder)
|
|
|
|
|
}
|
|
|
|
|
|
2024-11-20 13:41:36 +00:00
|
|
|
function updateNbObjects(data) {
|
|
|
|
|
for (const obj_type in data) {
|
|
|
|
|
btn_selector[obj_type].text(data[obj_type]);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2024-11-19 14:58:40 +00:00
|
|
|
// WebSocket
|
|
|
|
|
var socket = new WebSocket("{{ url_for('ws_dashboard') }}");
|
|
|
|
|
socket.wsocket = function(event) {
|
|
|
|
|
console.log("WebSocket connection opened:", event);
|
|
|
|
|
};
|
|
|
|
|
socket.onmessage = function(event) {
|
|
|
|
|
let data = JSON.parse(event.data);
|
2024-11-20 13:41:36 +00:00
|
|
|
updateFeederChart(data['feeders']);
|
|
|
|
|
updateNbObjects(data['objs']);
|
2024-11-19 14:58:40 +00:00
|
|
|
};
|
|
|
|
|
socket.onerror = function(error) {
|
|
|
|
|
console.error('WebSocket error:', error);
|
|
|
|
|
};
|
|
|
|
|
socket.onclose = function(event) {
|
|
|
|
|
console.log('WebSocket connection closed:', event);
|
|
|
|
|
// Optionally implement reconnection logic here
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
