deblan/terrarium-web
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

add events page

Browse source
This commit is contained in:
Simon Vieille 2020-03-21 18:39:12 +01:00
parent fcd9279533
commit 757fe9f71a
Signed by: deblan
GPG key ID: 03383D15A1D31745
9 changed files with 120 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
public/assets/css/app.css
View file

@ -14,3 +14,26 @@
.table.is-full {
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
View 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
View 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,
]);
}
}

12
src/Controller/MonitoringController.php
View file

@ -16,16 +16,4 @@ class MonitoringController extends AbstractController
{
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,
]);
}
}

24
src/Motion/Snapshot.php
View file

@ -13,7 +13,9 @@ class Snapshot
{
protected DateTime $date;
protected string $path;
protected string $movie;
protected string $thumbnail;
public function setDate(DateTime $date): self
{
@ -27,15 +29,27 @@ class Snapshot
return $this->date;
}
public function setPath(string $path): self
public function setMovie(string $movie): self
{
$this->path = $path;
$this->movie = $movie;
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;
}
}

6
src/Motion/SnapshotRepository.php
View file

@ -38,10 +38,14 @@ class SnapshotRepository
$date = basename($file->getPath());
$time = str_replace(['.mp4', '-'], ['', ':'], $file->getBasename());
$movie = $file->getPath().'/'.$file->getBasename();
$thumbnail = str_replace('.mp4', '.jpg', $movie);
$snapshot = new Snapshot();
$snapshot
->setDate(new \DateTime($date.' '.$time))
->setPath($file->getPath().'/'.$file->getBasename());
->setMovie($movie)
->setThumbnail($thumbnail);
$objects[] = $snapshot;
}

4
templates/base.html.twig
View file

@ -34,6 +34,10 @@
<a class="navbar-item {% if app.request.attributes.get('_route') == 'camera' %}is-active{% endif %}" href="{{ path('camera') }}">
Caméra
</a>
<a class="navbar-item {% if app.request.attributes.get('_route') == 'events' %}is-active{% endif %}" href="{{ path('events') }}">
Évènements
</a>
</div>
</div>
</nav>

43
templates/camera.html.twig
View file

@ -7,48 +7,5 @@
<div class="camera-wrapper">
<img src="https://api:WFVbTdZbad1EGC3vtwazECVqVzaD@terrarium-proxy.deblan.fr/proxy/camera1" 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 %}

27
templates/events.html.twig Normal file
View 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 %}