From 1e148177a99b7512e89fc5190d7beb54101283ba Mon Sep 17 00:00:00 2001 From: Simon Vieille Date: Tue, 10 Mar 2020 09:36:21 +0100 Subject: [PATCH] init --- .gitignore | 6 + composer.json | 1 + config/bundles.php | 1 + package.json | 6 + public/assets/css/app.css | 4 + public/assets/js/app.js | 62 +++++++++++ public/node_modules | 1 + src/Controller/MonitoringApiController.php | 122 +++++++++++++++++++++ src/Controller/MonitoringController.php | 17 +++ symfony.lock | 11 +- templates/base.html.twig | 44 +++++++- templates/monitoring.html.twig | 23 ++++ yarn.lock | 53 +++++++++ 13 files changed, 346 insertions(+), 5 deletions(-) create mode 100644 package.json create mode 100644 public/assets/css/app.css create mode 100644 public/assets/js/app.js create mode 120000 public/node_modules create mode 100644 src/Controller/MonitoringApiController.php create mode 100644 src/Controller/MonitoringController.php create mode 100644 templates/monitoring.html.twig create mode 100644 yarn.lock diff --git a/.gitignore b/.gitignore index eaa3cd3..813157f 100644 --- a/.gitignore +++ b/.gitignore @@ -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 diff --git a/composer.json b/composer.json index ba5c644..7b6c872 100644 --- a/composer.json +++ b/composer.json @@ -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": { diff --git a/config/bundles.php b/config/bundles.php index 7745edb..1a40026 100644 --- a/config/bundles.php +++ b/config/bundles.php @@ -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], ]; diff --git a/package.json b/package.json new file mode 100644 index 0000000..721fef4 --- /dev/null +++ b/package.json @@ -0,0 +1,6 @@ +{ + "dependencies": { + "bulma": "^0.8.0", + "chart.js": "^2.9.3" + } +} diff --git a/public/assets/css/app.css b/public/assets/css/app.css new file mode 100644 index 0000000..755e0f8 --- /dev/null +++ b/public/assets/css/app.css @@ -0,0 +1,4 @@ +.chart-container { + width: 100%; + height: 30vh; +} diff --git a/public/assets/js/app.js b/public/assets/js/app.js new file mode 100644 index 0000000..29f1484 --- /dev/null +++ b/public/assets/js/app.js @@ -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) diff --git a/public/node_modules b/public/node_modules new file mode 120000 index 0000000..68a084a --- /dev/null +++ b/public/node_modules @@ -0,0 +1 @@ +../node_modules \ No newline at end of file diff --git a/src/Controller/MonitoringApiController.php b/src/Controller/MonitoringApiController.php new file mode 100644 index 0000000..2cdcb1a --- /dev/null +++ b/src/Controller/MonitoringApiController.php @@ -0,0 +1,122 @@ +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); + } +} diff --git a/src/Controller/MonitoringController.php b/src/Controller/MonitoringController.php new file mode 100644 index 0000000..b5db621 --- /dev/null +++ b/src/Controller/MonitoringController.php @@ -0,0 +1,17 @@ +render('monitoring.html.twig'); + } +} diff --git a/symfony.lock b/symfony.lock index 503f906..4f26ee9 100644 --- a/symfony.lock +++ b/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" }, diff --git a/templates/base.html.twig b/templates/base.html.twig index 043f42d..7f630a8 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -2,11 +2,47 @@ - {% block title %}Welcome!{% endblock %} - {% block stylesheets %}{% endblock %} + + {% block title %}Terrarium{% endblock %} + {% block css %} + + + + {% endblock %} - {% block body %}{% endblock %} - {% block javascripts %}{% endblock %} + + + {% block body %} + {% endblock %} + + {% block js %} + + + {% endblock %} diff --git a/templates/monitoring.html.twig b/templates/monitoring.html.twig new file mode 100644 index 0000000..d8a7c67 --- /dev/null +++ b/templates/monitoring.html.twig @@ -0,0 +1,23 @@ +{% extends 'base.html.twig' %} + +{% block title %}{{ parent() }} - Moniteur{% endblock %} + +{% block body %} +
+
Température
+ +
+
+ +
+
+ +
Hydrométrie
+ +
+
+ +
+
+
+{% endblock %} diff --git a/yarn.lock b/yarn.lock new file mode 100644 index 0000000..a534708 --- /dev/null +++ b/yarn.lock @@ -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==