add camera and refactoring
This commit is contained in:
parent
1e148177a9
commit
d7e0ec6037
|
@ -2,3 +2,11 @@
|
|||
width: 100%;
|
||||
height: 30vh;
|
||||
}
|
||||
|
||||
.camera-wrapper {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.camera {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
@ -4,16 +4,6 @@ var forEach = function (array, callback, scope) {
|
|||
}
|
||||
};
|
||||
|
||||
window.chartColors = {
|
||||
red: 'rgb(255, 99, 132)',
|
||||
orange: 'rgb(255, 159, 64)',
|
||||
yellow: 'rgb(255, 205, 86)',
|
||||
green: 'rgb(75, 192, 192)',
|
||||
blue: 'rgb(54, 162, 235)',
|
||||
purple: 'rgb(153, 102, 255)',
|
||||
grey: 'rgb(201, 203, 207)'
|
||||
};
|
||||
|
||||
var ChartLoader = function() {
|
||||
var charts = document.querySelectorAll('.chart-container');
|
||||
|
||||
|
@ -57,6 +47,41 @@ var ChartLoader = function() {
|
|||
});
|
||||
}
|
||||
|
||||
var CameraEvent = function() {
|
||||
var cameras = document.querySelectorAll('.camera');
|
||||
|
||||
forEach(cameras, function(i, camera) {
|
||||
camera.addEventListener('click', function() {
|
||||
var isFullscreen = parseInt(camera.getAttribute('data-fullscreen'));
|
||||
|
||||
if (isFullscreen) {
|
||||
camera.setAttribute('data-fullscreen', '0');
|
||||
camera.classList.add('box');
|
||||
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
} else if (document.webkitExitFullscreen) {
|
||||
document.webkitExitFullscreen();
|
||||
} else if (document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen();
|
||||
}
|
||||
} else {
|
||||
camera.setAttribute('data-fullscreen', '1');
|
||||
camera.classList.remove('box');
|
||||
|
||||
if (camera.requestFullscreen) {
|
||||
camera.requestFullscreen();
|
||||
} else if (camera.webkitRequestFullscreen) {
|
||||
camera.webkitRequestFullscreen();
|
||||
} else if (camera.mozRequestFullScreen) {
|
||||
camera.mozRequestFullScreen();
|
||||
}
|
||||
}
|
||||
}, false);
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener('load', function() {
|
||||
ChartLoader();
|
||||
CameraEvent();
|
||||
}, false)
|
||||
|
|
|
@ -23,7 +23,7 @@ class MonitoringApiController extends AbstractController
|
|||
$dateTo = time();
|
||||
|
||||
$line = [
|
||||
'label' => 'En degré celsius',
|
||||
'label' => 'Relevés de la température',
|
||||
'data' => [],
|
||||
'borderColor' => 'rgb(255, 205, 86)',
|
||||
'backgroundColor' => 'rgb(255, 205, 86)',
|
||||
|
@ -52,9 +52,9 @@ class MonitoringApiController extends AbstractController
|
|||
}
|
||||
|
||||
/**
|
||||
* @Route("/api/hydrometal", name="api_hydrometal")
|
||||
* @Route("/api/hygrometry", name="api_hygrometry")
|
||||
*/
|
||||
public function hydrometal(Request $request)
|
||||
public function hygrometry(Request $request)
|
||||
{
|
||||
if ($request->isMethod('POST')) {
|
||||
} else {
|
||||
|
@ -65,7 +65,7 @@ class MonitoringApiController extends AbstractController
|
|||
$dateTo = time();
|
||||
|
||||
$line = [
|
||||
'label' => 'Niveau d\'humidité en %',
|
||||
'label' => 'Niveau d\'humidité de l\'atmosphère en %',
|
||||
'data' => [],
|
||||
'borderColor' => 'rgb(54, 162, 235)',
|
||||
'backgroundColor' => 'rgb(54, 162, 235)',
|
||||
|
|
|
@ -8,10 +8,18 @@ use Symfony\Component\Routing\Annotation\Route;
|
|||
class MonitoringController extends AbstractController
|
||||
{
|
||||
/**
|
||||
* @Route("/", name="index")
|
||||
* @Route("/", name="charts")
|
||||
*/
|
||||
public function index()
|
||||
public function charts()
|
||||
{
|
||||
return $this->render('monitoring.html.twig');
|
||||
return $this->render('charts.html.twig');
|
||||
}
|
||||
|
||||
/**
|
||||
* @Route("/camera", name="camera")
|
||||
*/
|
||||
public function camera()
|
||||
{
|
||||
return $this->render('camera.html.twig');
|
||||
}
|
||||
}
|
||||
|
|
|
@ -26,11 +26,11 @@
|
|||
|
||||
<div id="navbarBasicExample" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item">
|
||||
Monitoring
|
||||
<a class="navbar-item {% if app.request.attributes.get('_route') == 'charts' %}is-active{% endif %}" href="{{ path('charts') }}">
|
||||
Graphiques
|
||||
</a>
|
||||
|
||||
<a class="navbar-item">
|
||||
<a class="navbar-item {% if app.request.attributes.get('_route') == 'camera' %}is-active{% endif %}" href="{{ path('camera') }}">
|
||||
Caméra
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
@ -1,23 +0,0 @@
|
|||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block title %}{{ parent() }} - Moniteur{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<section class="section">
|
||||
<div class="title is-4">Température</div>
|
||||
|
||||
<div class="box">
|
||||
<div class="chart-container" data-api="{{ path('api_temperature') }}" data-type="line">
|
||||
<canvas class="chart-canvas" id="chart-temperature"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="title is-4">Hydrométrie</div>
|
||||
|
||||
<div class="box">
|
||||
<div class="chart-container" data-api="{{ path('api_hydrometal') }}" data-type="line">
|
||||
<canvas class="chart-canvas" id="chart-hydrometal"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
Loading…
Reference in New Issue