init
Cette révision appartient à :
Parent
9813508a29
révision
1e148177a9
6
.gitignore
externe
6
.gitignore
externe
|
@ -14,3 +14,9 @@
|
|||
.phpunit.result.cache
|
||||
/phpunit.xml
|
||||
###< symfony/phpunit-bridge ###
|
||||
|
||||
###> symfony/web-server-bundle ###
|
||||
/.web-server-pid
|
||||
###< symfony/web-server-bundle ###
|
||||
|
||||
/node_modules
|
||||
|
|
|
@ -25,6 +25,7 @@
|
|||
"symfony/twig-pack": "*",
|
||||
"symfony/validator": "4.4.*",
|
||||
"symfony/web-link": "4.4.*",
|
||||
"symfony/web-server-bundle": "4.4.*",
|
||||
"symfony/yaml": "4.4.*"
|
||||
},
|
||||
"require-dev": {
|
||||
|
|
|
@ -12,4 +12,5 @@ return [
|
|||
Symfony\Bundle\MonologBundle\MonologBundle::class => ['all' => true],
|
||||
Symfony\Bundle\DebugBundle\DebugBundle::class => ['dev' => true, 'test' => true],
|
||||
Symfony\Bundle\MakerBundle\MakerBundle::class => ['dev' => true],
|
||||
Symfony\Bundle\WebServerBundle\WebServerBundle::class => ['dev' => true],
|
||||
];
|
||||
|
|
6
package.json
Fichier normal
6
package.json
Fichier normal
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"dependencies": {
|
||||
"bulma": "^0.8.0",
|
||||
"chart.js": "^2.9.3"
|
||||
}
|
||||
}
|
4
public/assets/css/app.css
Fichier normal
4
public/assets/css/app.css
Fichier normal
|
@ -0,0 +1,4 @@
|
|||
.chart-container {
|
||||
width: 100%;
|
||||
height: 30vh;
|
||||
}
|
62
public/assets/js/app.js
Fichier normal
62
public/assets/js/app.js
Fichier normal
|
@ -0,0 +1,62 @@
|
|||
var forEach = function (array, callback, scope) {
|
||||
for (var i = 0; i < array.length; i++) {
|
||||
callback.call(scope, i, array[i]);
|
||||
}
|
||||
};
|
||||
|
||||
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');
|
||||
|
||||
forEach(charts, function(i, chart) {
|
||||
var api = chart.getAttribute('data-api');
|
||||
var canvas = chart.querySelector('.chart-canvas');
|
||||
var height = chart.getAttribute('data-height');
|
||||
var data = {};
|
||||
var config = {
|
||||
type: chart.getAttribute('data-type'),
|
||||
data: data,
|
||||
options: {}
|
||||
};
|
||||
var instance = new Chart(canvas, config);
|
||||
|
||||
chart.addEventListener('refresh', function() {
|
||||
fetch(api)
|
||||
.then(function(response) {
|
||||
if(response.ok) {
|
||||
response.json().then(function(json) {
|
||||
if (json.hasOwnProperty('data')) {
|
||||
instance.data = json.data;
|
||||
}
|
||||
|
||||
if (json.hasOwnProperty('options')) {
|
||||
instance.options = json.options;
|
||||
}
|
||||
|
||||
if (json.hasOwnProperty('type')) {
|
||||
instance.type = json.type;
|
||||
}
|
||||
|
||||
instance.update();
|
||||
instance.resize();
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
chart.dispatchEvent(new Event('refresh'));
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener('load', function() {
|
||||
ChartLoader();
|
||||
}, false)
|
1
public/node_modules
Lien symbolique
1
public/node_modules
Lien symbolique
|
@ -0,0 +1 @@
|
|||
../node_modules
|
122
src/Controller/MonitoringApiController.php
Fichier normal
122
src/Controller/MonitoringApiController.php
Fichier normal
|
@ -0,0 +1,122 @@
|
|||
<?php
|
||||
|
||||
namespace App\Controller;
|
||||
|
||||
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
|
||||
use Symfony\Component\Routing\Annotation\Route;
|
||||
use Symfony\Component\HttpFoundation\JsonResponse;
|
||||
use Symfony\Component\HttpFoundation\Request;
|
||||
|
||||
class MonitoringApiController extends AbstractController
|
||||
{
|
||||
/**
|
||||
* @Route("/api/temperature", name="api_temperature")
|
||||
*/
|
||||
public function temperature(Request $request)
|
||||
{
|
||||
if ($request->isMethod('POST')) {
|
||||
} else {
|
||||
$labels = [];
|
||||
$datasets = [];
|
||||
|
||||
$dateFrom = time() - 3600 * 24;
|
||||
$dateTo = time();
|
||||
|
||||
$line = [
|
||||
'label' => 'En degré celsius',
|
||||
'data' => [],
|
||||
'borderColor' => 'rgb(255, 205, 86)',
|
||||
'backgroundColor' => 'rgb(255, 205, 86)',
|
||||
'fill' => false,
|
||||
];
|
||||
|
||||
$line2 = [
|
||||
'label' => 'Valeur idéale',
|
||||
'data' => [],
|
||||
'borderColor' => 'rgb(200, 200, 200)',
|
||||
'backgroundColor' => 'rgb(200, 200, 200)',
|
||||
'fill' => false,
|
||||
];
|
||||
|
||||
for ($u = $dateFrom; $u <= $dateTo; $u+= 600) {
|
||||
$labels[] = date('H:i', $u);
|
||||
$line['data'][] = mt_rand(22, 24);
|
||||
$line2['data'][] = 23;
|
||||
}
|
||||
|
||||
$datasets[] = $line;
|
||||
$datasets[] = $line2;
|
||||
|
||||
return $this->createGraphResponse($labels, $datasets);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @Route("/api/hydrometal", name="api_hydrometal")
|
||||
*/
|
||||
public function hydrometal(Request $request)
|
||||
{
|
||||
if ($request->isMethod('POST')) {
|
||||
} else {
|
||||
$labels = [];
|
||||
$datasets = [];
|
||||
|
||||
$dateFrom = time() - 3600 * 24;
|
||||
$dateTo = time();
|
||||
|
||||
$line = [
|
||||
'label' => 'Niveau d\'humidité en %',
|
||||
'data' => [],
|
||||
'borderColor' => 'rgb(54, 162, 235)',
|
||||
'backgroundColor' => 'rgb(54, 162, 235)',
|
||||
'fill' => false,
|
||||
];
|
||||
|
||||
$line2 = [
|
||||
'label' => 'Valeur idéale',
|
||||
'data' => [],
|
||||
'borderColor' => 'rgb(200, 200, 200)',
|
||||
'backgroundColor' => 'rgb(200, 200, 200)',
|
||||
'fill' => false,
|
||||
];
|
||||
|
||||
for ($u = $dateFrom; $u <= $dateTo; $u+= 600) {
|
||||
$labels[] = date('H:i', $u);
|
||||
$line['data'][] = mt_rand(50, 55);
|
||||
$line2['data'][] = 53;
|
||||
}
|
||||
|
||||
$datasets[] = $line;
|
||||
$datasets[] = $line2;
|
||||
|
||||
return $this->createGraphResponse($labels, $datasets);
|
||||
}
|
||||
}
|
||||
|
||||
protected function createGraphResponse(array $labels, array $datasets): JsonResponse
|
||||
{
|
||||
$config = [
|
||||
'data' => [
|
||||
'labels' => $labels,
|
||||
'datasets' => $datasets,
|
||||
],
|
||||
'options' => [
|
||||
'responsive' => false,
|
||||
'ratio' => 10,
|
||||
'maintainAspectRatio' => false,
|
||||
'legend' => [
|
||||
'align' => 'end',
|
||||
],
|
||||
'scales' => [
|
||||
'yAxes' => [[
|
||||
'ticks' => [
|
||||
'beginAtZero' => true,
|
||||
],
|
||||
]],
|
||||
],
|
||||
],
|
||||
];
|
||||
|
||||
return $this->json($config);
|
||||
}
|
||||
}
|
17
src/Controller/MonitoringController.php
Fichier normal
17
src/Controller/MonitoringController.php
Fichier normal
|
@ -0,0 +1,17 @@
|
|||
<?php
|
||||
|
||||
namespace App\Controller;
|
||||
|
||||
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
|
||||
use Symfony\Component\Routing\Annotation\Route;
|
||||
|
||||
class MonitoringController extends AbstractController
|
||||
{
|
||||
/**
|
||||
* @Route("/", name="index")
|
||||
*/
|
||||
public function index()
|
||||
{
|
||||
return $this->render('monitoring.html.twig');
|
||||
}
|
||||
}
|
11
symfony.lock
11
symfony.lock
|
@ -106,7 +106,7 @@
|
|||
"version": "2.1.1"
|
||||
},
|
||||
"php": {
|
||||
"version": "7.1"
|
||||
"version": "7.4"
|
||||
},
|
||||
"phpdocumentor/reflection-common": {
|
||||
"version": "2.0.0"
|
||||
|
@ -487,6 +487,15 @@
|
|||
"config/routes/dev/web_profiler.yaml"
|
||||
]
|
||||
},
|
||||
"symfony/web-server-bundle": {
|
||||
"version": "3.3",
|
||||
"recipe": {
|
||||
"repo": "github.com/symfony/recipes",
|
||||
"branch": "master",
|
||||
"version": "3.3",
|
||||
"ref": "dae9b39fd6717970be7601101ce5aa960bf53d9a"
|
||||
}
|
||||
},
|
||||
"symfony/yaml": {
|
||||
"version": "v4.4.5"
|
||||
},
|
||||
|
|
|
@ -2,11 +2,47 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>{% block title %}Welcome!{% endblock %}</title>
|
||||
{% block stylesheets %}{% endblock %}
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}Terrarium{% endblock %}</title>
|
||||
{% block css %}
|
||||
<link rel="stylesheet" href="{{ asset('node_modules/bulma/css/bulma.min.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('node_modules/chart.js/dist/Chart.min.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('assets/css/app.css') }}">
|
||||
{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
{% block body %}{% endblock %}
|
||||
{% block javascripts %}{% endblock %}
|
||||
<nav class="navbar" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="https://bulma.io">
|
||||
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="navbarBasicExample" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item">
|
||||
Monitoring
|
||||
</a>
|
||||
|
||||
<a class="navbar-item">
|
||||
Caméra
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{% block body %}
|
||||
{% endblock %}
|
||||
|
||||
{% block js %}
|
||||
<script src="{{ asset('node_modules/chart.js/dist/Chart.bundle.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/app.js') }}"></script>
|
||||
{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
|
|
23
templates/monitoring.html.twig
Fichier normal
23
templates/monitoring.html.twig
Fichier normal
|
@ -0,0 +1,23 @@
|
|||
{% 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 %}
|
53
yarn.lock
Fichier normal
53
yarn.lock
Fichier normal
|
@ -0,0 +1,53 @@
|
|||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
|
||||
# yarn lockfile v1
|
||||
|
||||
|
||||
bulma@^0.8.0:
|
||||
version "0.8.0"
|
||||
resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.8.0.tgz#ac1606431703a4761b18a4a2d5cc1fa864a2aece"
|
||||
integrity sha512-nhf3rGyiZh/VM7FrSJ/5KeLlfaFkXz0nYcXriynfPH4vVpnxnqyEwaNGdNCVzHyyCA3cHgkQAMpdF/SFbFGZfA==
|
||||
|
||||
chart.js@^2.9.3:
|
||||
version "2.9.3"
|
||||
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.3.tgz#ae3884114dafd381bc600f5b35a189138aac1ef7"
|
||||
integrity sha512-+2jlOobSk52c1VU6fzkh3UwqHMdSlgH1xFv9FKMqHiNCpXsGPQa/+81AFa+i3jZ253Mq9aAycPwDjnn1XbRNNw==
|
||||
dependencies:
|
||||
chartjs-color "^2.1.0"
|
||||
moment "^2.10.2"
|
||||
|
||||
chartjs-color-string@^0.6.0:
|
||||
version "0.6.0"
|
||||
resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71"
|
||||
integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
|
||||
dependencies:
|
||||
color-name "^1.0.0"
|
||||
|
||||
chartjs-color@^2.1.0:
|
||||
version "2.4.1"
|
||||
resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0"
|
||||
integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==
|
||||
dependencies:
|
||||
chartjs-color-string "^0.6.0"
|
||||
color-convert "^1.9.3"
|
||||
|
||||
color-convert@^1.9.3:
|
||||
version "1.9.3"
|
||||
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
|
||||
integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
|
||||
dependencies:
|
||||
color-name "1.1.3"
|
||||
|
||||
color-name@1.1.3:
|
||||
version "1.1.3"
|
||||
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
|
||||
integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
|
||||
|
||||
color-name@^1.0.0:
|
||||
version "1.1.4"
|
||||
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
|
||||
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
|
||||
|
||||
moment@^2.10.2:
|
||||
version "2.24.0"
|
||||
resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
|
||||
integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
|
Chargement…
Référencer dans un nouveau ticket