Este commit está contenido en:
Simon Vieille 2020-03-10 09:36:21 +01:00
padre 9813508a29
commit 1e148177a9
Firmado por: deblan
ID de clave GPG: 03383D15A1D31745
Se han modificado 13 ficheros con 346 adiciones y 5 borrados

6
.gitignore vendido
Ver fichero

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

Ver fichero

@ -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": {

Ver fichero

@ -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 Archivo normal
Ver fichero

@ -0,0 +1,6 @@
{
"dependencies": {
"bulma": "^0.8.0",
"chart.js": "^2.9.3"
}
}

4
public/assets/css/app.css Archivo normal
Ver fichero

@ -0,0 +1,4 @@
.chart-container {
width: 100%;
height: 30vh;
}

62
public/assets/js/app.js Archivo normal
Ver fichero

@ -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 Enlace simbólico
Ver fichero

@ -0,0 +1 @@
../node_modules

Ver fichero

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

Ver fichero

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

Ver fichero

@ -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"
},

Ver fichero

@ -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 Archivo normal
Ver fichero

@ -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 Archivo normal
Ver fichero

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