add camera and refactoring

This commit is contained in:
Simon Vieille 2020-03-10 10:42:04 +01:00
parent 1e148177a9
commit d7e0ec6037
Signed by: deblan
GPG Key ID: 03383D15A1D31745
6 changed files with 61 additions and 43 deletions

View File

@ -2,3 +2,11 @@
width: 100%;
height: 30vh;
}
.camera-wrapper {
text-align: center;
}
.camera {
cursor: pointer;
}

View File

@ -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)

View File

@ -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)',

View File

@ -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');
}
}

View File

@ -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>

View File

@ -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 %}