add events page
This commit is contained in:
parent
fcd9279533
commit
757fe9f71a
|
@ -14,3 +14,26 @@
|
||||||
.table.is-full {
|
.table.is-full {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.snapshot-link {
|
||||||
|
display: inline-block;
|
||||||
|
width: 33%;
|
||||||
|
padding: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.snapshot-link img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.snapshot-link {
|
||||||
|
width: 49%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
.snapshot-link {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
19
src/Controller/CameraController.php
Normal file
19
src/Controller/CameraController.php
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
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 CameraController extends AbstractController
|
||||||
|
{
|
||||||
|
/**
|
||||||
|
* @Route("/camera", name="camera")
|
||||||
|
*/
|
||||||
|
public function camera()
|
||||||
|
{
|
||||||
|
return $this->render('camera.html.twig');
|
||||||
|
}
|
||||||
|
}
|
23
src/Controller/EventController.php
Normal file
23
src/Controller/EventController.php
Normal file
|
@ -0,0 +1,23 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
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 EventController extends AbstractController
|
||||||
|
{
|
||||||
|
/**
|
||||||
|
* @Route("/events", name="events")
|
||||||
|
*/
|
||||||
|
public function events(SnapshotRepository $snapshotRepository)
|
||||||
|
{
|
||||||
|
$snapshots = $snapshotRepository->find();
|
||||||
|
|
||||||
|
return $this->render('events.html.twig', [
|
||||||
|
'snapshots' => $snapshots,
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
}
|
|
@ -16,16 +16,4 @@ class MonitoringController extends AbstractController
|
||||||
{
|
{
|
||||||
return $this->render('charts.html.twig');
|
return $this->render('charts.html.twig');
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* @Route("/camera", name="camera")
|
|
||||||
*/
|
|
||||||
public function camera(SnapshotRepository $snapshotRepository)
|
|
||||||
{
|
|
||||||
$snapshots = $snapshotRepository->find();
|
|
||||||
|
|
||||||
return $this->render('camera.html.twig', [
|
|
||||||
'snapshots' => $snapshots,
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -13,7 +13,9 @@ class Snapshot
|
||||||
{
|
{
|
||||||
protected DateTime $date;
|
protected DateTime $date;
|
||||||
|
|
||||||
protected string $path;
|
protected string $movie;
|
||||||
|
|
||||||
|
protected string $thumbnail;
|
||||||
|
|
||||||
public function setDate(DateTime $date): self
|
public function setDate(DateTime $date): self
|
||||||
{
|
{
|
||||||
|
@ -27,15 +29,27 @@ class Snapshot
|
||||||
return $this->date;
|
return $this->date;
|
||||||
}
|
}
|
||||||
|
|
||||||
public function setPath(string $path): self
|
public function setMovie(string $movie): self
|
||||||
{
|
{
|
||||||
$this->path = $path;
|
$this->movie = $movie;
|
||||||
|
|
||||||
return $this;
|
return $this;
|
||||||
}
|
}
|
||||||
|
|
||||||
public function getPath(): ? string
|
public function getMovie(): ? string
|
||||||
{
|
{
|
||||||
return $this->path;
|
return $this->movie;
|
||||||
|
}
|
||||||
|
|
||||||
|
public function setThumbnail(string $thumbnail): self
|
||||||
|
{
|
||||||
|
$this->thumbnail = $thumbnail;
|
||||||
|
|
||||||
|
return $this;
|
||||||
|
}
|
||||||
|
|
||||||
|
public function getThumbnail(): ? string
|
||||||
|
{
|
||||||
|
return $this->thumbnail;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -38,10 +38,14 @@ class SnapshotRepository
|
||||||
$date = basename($file->getPath());
|
$date = basename($file->getPath());
|
||||||
$time = str_replace(['.mp4', '-'], ['', ':'], $file->getBasename());
|
$time = str_replace(['.mp4', '-'], ['', ':'], $file->getBasename());
|
||||||
|
|
||||||
|
$movie = $file->getPath().'/'.$file->getBasename();
|
||||||
|
$thumbnail = str_replace('.mp4', '.jpg', $movie);
|
||||||
|
|
||||||
$snapshot = new Snapshot();
|
$snapshot = new Snapshot();
|
||||||
$snapshot
|
$snapshot
|
||||||
->setDate(new \DateTime($date.' '.$time))
|
->setDate(new \DateTime($date.' '.$time))
|
||||||
->setPath($file->getPath().'/'.$file->getBasename());
|
->setMovie($movie)
|
||||||
|
->setThumbnail($thumbnail);
|
||||||
|
|
||||||
$objects[] = $snapshot;
|
$objects[] = $snapshot;
|
||||||
}
|
}
|
||||||
|
|
|
@ -34,6 +34,10 @@
|
||||||
<a class="navbar-item {% if app.request.attributes.get('_route') == 'camera' %}is-active{% endif %}" href="{{ path('camera') }}">
|
<a class="navbar-item {% if app.request.attributes.get('_route') == 'camera' %}is-active{% endif %}" href="{{ path('camera') }}">
|
||||||
Caméra
|
Caméra
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
<a class="navbar-item {% if app.request.attributes.get('_route') == 'events' %}is-active{% endif %}" href="{{ path('events') }}">
|
||||||
|
Évènements
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
@ -7,48 +7,5 @@
|
||||||
<div class="camera-wrapper">
|
<div class="camera-wrapper">
|
||||||
<img src="https://api:WFVbTdZbad1EGC3vtwazECVqVzaD@terrarium-proxy.deblan.fr/proxy/camera1" class="box camera" alt="Caméra 1">
|
<img src="https://api:WFVbTdZbad1EGC3vtwazECVqVzaD@terrarium-proxy.deblan.fr/proxy/camera1" class="box camera" alt="Caméra 1">
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
<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 %}
|
{% endblock %}
|
||||||
|
|
27
templates/events.html.twig
Normal file
27
templates/events.html.twig
Normal file
|
@ -0,0 +1,27 @@
|
||||||
|
{% extends 'base.html.twig' %}
|
||||||
|
|
||||||
|
{% block title %}{{ parent() }} - Évènements{% endblock %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
<div class="container">
|
||||||
|
{% for snapshot in snapshots|reverse %}
|
||||||
|
<a href="{{ asset(snapshot.movie) }}" class="snapshot-link">
|
||||||
|
<img src="{{ snapshot.thumbnail }}" alt="{{ snapshot.date.format('d/m/Y H:i:s') }}" class="box">
|
||||||
|
</a>
|
||||||
|
{% endfor %}
|
||||||
|
</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 %}
|
Loading…
Reference in a new issue