add events videos

.gitignore

@@ -20,3 +20,4 @@
 ###< symfony/web-server-bundle ###
 
 /node_modules
+/public/motion/snapshots/*

config/services.yaml

@@ -4,6 +4,7 @@
 # Put parameters here that don't need to change on each machine where the app is deployed
 # https://symfony.com/doc/current/best_practices/configuration.html#application-related-configuration
 parameters:
+    motion_snapshots_directory: "motion/snapshots"
 
 services:
     # default configuration for services in *this* file

public/assets/css/app.css

@@ -10,3 +10,7 @@
 .camera {
     cursor: pointer;
 }
+
+.table.is-full {
+    width: 100%;
+}

public/assets/js/app.js

@@ -81,7 +81,25 @@ var CameraEvent = function() {
     });
 }
 
+var SnapshotEvent = function() {
+    var links = document.querySelectorAll('.snapshot-link');
+    var view = document.querySelector('#snapshot-view');
+    var template = document.querySelector('#snapshot-template');
+
+
+    forEach(links, function(i, link) {
+        link.addEventListener('click', function(e) {
+            e.preventDefault();
+            view.innerHTML = template.innerHTML.replace('{src}', link.getAttribute('href'));
+            view.querySelector('.modal-close').addEventListener('click', function() {
+                view.innerHTML = '';
+            }, false);
+        });
+    });
+}
+
 window.addEventListener('load', function() {
     ChartLoader();
     CameraEvent();
+    SnapshotEvent();
 }, false)

src/Controller/MonitoringApiController.php

@@ -10,7 +10,7 @@ use Symfony\Component\HttpFoundation\Request;
 class MonitoringApiController extends AbstractController
 {
     /**
-     * @Route("/api/temperature", name="api_temperature")
+     * @Route("/api/monitoring/temperature", name="api_monitoring_temperature")
      */
     public function temperature(Request $request)
     {
@@ -52,7 +52,7 @@ class MonitoringApiController extends AbstractController
     }
 
     /**
-     * @Route("/api/hygrometry", name="api_hygrometry")
+     * @Route("/api/monitoring/hygrometry", name="api_monitoring_hygrometry")
      */
     public function hygrometry(Request $request)
     {

src/Controller/MonitoringController.php

@@ -4,6 +4,8 @@ namespace App\Controller;
 
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\Routing\Annotation\Route;
+use Symfony\Component\Filesystem\Filesystem;
+use App\Motion\SnapshotRepository;
 
 class MonitoringController extends AbstractController
 {
@@ -18,8 +20,12 @@ class MonitoringController extends AbstractController
     /**
      * @Route("/camera", name="camera")
      */
-    public function camera()
+    public function camera(SnapshotRepository $snapshotRepository)
     {
-        return $this->render('camera.html.twig');
+        $snapshots = $snapshotRepository->find();
+
+        return $this->render('camera.html.twig', [
+            'snapshots' => $snapshots,
+        ]);
     }
 }

src/Controller/MotionApiController.php

@@ -0,0 +1,20 @@
+<?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;
+use Symfony\Component\HttpFoundation\Response;
+
+class MotionApiController extends AbstractController
+{
+    /**
+     * @Route("/api/motion/hook", name="api_motion_hook")
+     */
+    public function hook(Request $request): Response
+    {
+        return new Response();
+    }
+}

src/Motion/Snapshot.php

@@ -0,0 +1,41 @@
+<?php
+
+namespace App\Motion;
+
+use DateTime;
+
+/**
+ * class Snapshot.
+ *
+ * @author Simon Vieille <simon@deblan.fr>
+ */
+class Snapshot
+{
+    protected DateTime $date;
+
+    protected string $path;
+
+    public function setDate(DateTime $date): self
+    {
+        $this->date = $date;
+
+        return $this;
+    }
+
+    public function getDate(): ? \DateTime
+    {
+        return $this->date;
+    }
+
+    public function setPath(string $path): self
+    {
+        $this->path = $path;
+
+        return $this;
+    }
+
+    public function getPath(): ? string
+    {
+        return $this->path;
+    }
+}

src/Motion/SnapshotRepository.php

@@ -0,0 +1,51 @@
+<?php
+
+namespace App\Motion;
+
+use Symfony\Component\Filesystem\Filesystem;
+use Symfony\Component\DependencyInjection\ParameterBag\ParameterBagInterface;
+use Symfony\Component\Finder\Finder;
+use App\Motion\Snapshot;
+
+/**
+ * class SnapshotRepository.
+ *
+ * @author Simon Vieille <simon@deblan.fr>
+ */
+class SnapshotRepository
+{
+    protected Finder $finder;
+
+    protected ParameterBagInterface $parameters;
+
+    public function __construct(ParameterBagInterface $parameters)
+    {
+        $this->finder = new Finder();
+        $this->parameters = $parameters;
+    }
+
+    public function find(): array
+    {
+        $objects = [];
+
+        $files = $this->finder
+            ->files()
+            ->in($this->parameters->get('motion_snapshots_directory'))
+            ->name('/.*\.mp4$/s')
+            ->sortByModifiedTime();
+
+        foreach ($files as $file) {
+            $date = basename($file->getPath());
+            $time = str_replace(['.mp4', '-'], ['', ':'], $file->getBasename());
+
+            $snapshot = new Snapshot();
+            $snapshot
+                ->setDate(new \DateTime($date.' '.$time))
+                ->setPath($file->getPath().'/'.$file->getBasename());
+
+            $objects[] = $snapshot;
+        }
+
+        return $objects;
+    }
+}

templates/camera.html.twig

@@ -7,5 +7,48 @@
         <div class="camera-wrapper">
             <img src="http://localhost:9096/" class="box camera" alt="Caméra 1">
         </div>
+
+        <hr>
+
+        {% if snapshots|length %}
+            <div class="title is-4">
+                Évènements
+            </div>
+
+            <table class="table is-full">
+                <thead>
+                    <tr>
+                        <th width="30%">Date</th>
+                        <th>Fichier</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for snapshot in snapshots %}
+                        <tr>
+                            <td>{{ snapshot.date.format('d/m/Y H:i:s') }}</td>
+                            <td>
+                                <a href="{{ asset(snapshot.path) }}" class="snapshot-link">
+                                    {{ snapshot.path }}
+                                </a>
+                            </td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        {% endif %}
     </div>
+
+    <div id="snapshot-view"></div>
+
+    <template id="snapshot-template">
+        <div class="modal is-active">
+            <div class="modal-background"></div>
+            <div class="modal-content" controls>
+                <video controls class="image">
+                    <source src="{src}" type="video/mp4" />
+                </video>
+            </div>
+            <button class="modal-close is-large" aria-label="close"></button>
+        </div>
+    </template>
 {% endblock %}

templates/charts.html.twig

@@ -7,7 +7,7 @@
         <div class="title is-4">Température</div>
 
         <div class="box">
-            <div class="chart-container" data-api="{{ path('api_temperature') }}" data-type="line">
+            <div class="chart-container" data-api="{{ path('api_monitoring_temperature') }}" data-type="line">
                 <canvas class="chart-canvas" id="chart-temperature"></canvas>
             </div>
         </div>
@@ -15,7 +15,7 @@
         <div class="title is-4">Hygrométrie</div>
 
         <div class="box">
-            <div class="chart-container" data-api="{{ path('api_hygrometry') }}" data-type="line">
+            <div class="chart-container" data-api="{{ path('api_monitoring_hygrometry') }}" data-type="line">
                 <canvas class="chart-canvas" id="chart-hygrometry"></canvas>
             </div>
         </div>