Mise en place de la carte de France interactive

This commit is contained in:
nox 2019-11-23 16:50:18 +01:00
parent e4e2ae854a
commit a2121389bb
4 changed files with 116 additions and 33 deletions

View File

@ -1,44 +1,31 @@
<?php
namespace App\Gmarche\Actions;
use App\Gmarche\Table\RegionTable;
use Framework\Actions\RouterAwareAction;
use Framework\Renderer\RendererInterface;
use Psr\Http\Message\ServerRequestInterface as Request;
class RegionIndexAction
{
/**
* @var RendererInterface
*/
private $renderer;
/**
* @var RegionTable
*/
private $regionTable;
use RouterAwareAction;
public function __construct(
RendererInterface $renderer,
RegionTable $regionTable
RendererInterface $renderer
) {
$this->renderer = $renderer;
$this->regionTable = $regionTable;
$this->renderer = $renderer;
}
public function __invoke(Request $request)
public function __invoke()
{
$params = $request->getQueryParams();
$regions = $this->regionTable->findAll()->paginate(15, $params['p'] ?? 1);
session_start();
if (isset($_SESSION['user'])) {
$nom_user = $_SESSION['user'];
} else {
$nom_user = '';
}
return $this->renderer->render('@gmarche/index', compact('nom_user','regions'));
return $this->renderer->render('@gmarche/index', compact('nom_user'));
}
}

View File

@ -21,6 +21,6 @@ class GmarcheModule extends Module
$container->get(RendererInterface::class)->addPath('gmarche', __DIR__ . '/views');
$router = $container->get(Router::class);
$router->get("$gmarchePrefix", RegionIndexAction::class, 'gmarche.index');
$router->get("$gmarchePrefix{slug:[a-z\-0-9]+}", AntenneShowAction::class, 'gmarche.antenne');
$router->get("$gmarchePrefix{france}/{slug:[a-z\-0-9]+}", AntenneShowAction::class, 'gmarche.antenne');
}
}

View File

@ -4,19 +4,113 @@
Ğ1-Marché : Régions {% if page > 1 %}, page {{ page }} {% endif %}
{% endblock %}
{% block body %}
<div class="container" style="height:auto; width:24rem; text-align:center;border: 0px">
<img src="\images\logo_home.jpg" style="width:24rem;margin-left: 0px;"/>
<div class="row card" style="width: 22rem;margin-left: 0.1rem;">
<div class="container" style="height:auto; width:28rem; text-align:center;border: 0px">
<img src="\images\logo_home.jpg" style="width:22rem;"/>
<div class="row card" style="width:28rem;margin-left: -5.1rem;">
<ul class="list-group list-group-flush">
{% for region in regions %}
<a style="color:black;" href="{{ path('gmarche.antenne', {slug: region.slug, id: region.id} ) }}" title="{{ region.name }}">
<li class="liste_regions list-group-item" style="padding: .2rem 1.25rem;">
{{ region.name }}
</li>
</a>
{% endfor %}
<div class="mapcontainer">
<div class="map">
<span>Alternative content for the map</span>
</div>
<div class="areaLegend"></div>
<div class="plotLegend"></div>
</div>
</ul>
</div>
</div>
<!-- paginate(regions, 'gmarche.index') -->
{% endblock %}
<!-- paginate(regions, 'gmarche.index') -->
<!-- "name" : "france_regions_2016",
"zoom": {
"enabled": true,
"maxLevel": 10-->
<script type="text/javascript">
$(".container").mapael({
map: {
name: 'france_regions_2016',
zoom: {
//enabled: true
},
defaultArea: {
attrs: {
'fill': 'green',
'stroke': '#99c7ff',
'stroke-width': 0.6,
'cursor': 'pointer'
},
attrsHover: {
'stroke-width': 2.5,
'fill': 'blue'
}
}
},
areas: {
'region-84': {
value: "Auvergne-Rhône-Alpes",
href: "france/auvergne-rhone-alpes",
tooltip: {content: "<span style=\"font-size:1.2rem;font-weight:bold;\">Auvergne-Rhône-Alpes</span>"}
},
'region-53': {
value: "Bretagne",
href: "france/bretagne",
tooltip: {content: "<span style=\"font-size:1.2rem;font-weight:bold;\">Bretagne</span>"}
},
'region-27': {
value: "Bourgogne-Franche-Comté",
href: "france/bourgogne-franche-comte",
tooltip: {content: "<span style=\"font-size:1.2rem;font-weight:bold;\">Bourgogne-Franche-Comté</span>"}
},
'region-24': {
value: "Centre-Val de Loire",
href: "france/centre-val-de-loire",
tooltip: {content: "<span style=\"font-size:1.2rem;font-weight:bold;\">Centre-Val de Loire</span>"}
},
'region-94': {
value: "Corse",
href: "france/corse",
tooltip: {content: "<span style=\"font-size:1.2rem;font-weight:bold;\">Corse</span>"}
},
'region-44': {
value: "Grand-Est",
href: "france/grand-est",
tooltip: {content: "<span style=\"font-size:1.2rem;font-weight:bold;\">Grand-Est</span>"}
},
'region-32': {
value: "Hauts-de-France",
href: "france/hauts-de-france",
tooltip: {content: "<span style=\"font-size:1.2rem;font-weight:bold;\">Hauts-de-France</span>"}
},
'region-11': {
value: "Ile-de-France",
href: "france/ile-de-france",
tooltip: {content: "<span style=\"font-size:1.2rem;font-weight:bold;\">Ile-de-France</span>"}
},
'region-28': {
value: "Normandie",
href: "france/normandie",
tooltip: {content: "<span style=\"font-size:1.2rem;font-weight:bold;\">Normandie</span>"}
},
'region-75': {
value: "Nouvelle-Aquitaine",
href: "france/nouvelle-aquitaine",
tooltip: {content: "<span style=\"font-size:1.2rem;font-weight:bold;\">Nouvelle-Aquitaine</span>"}
},
'region-76': {
value: "Occitanie",
href: "france/occitanie",
tooltip: {content: "<span style=\"font-size:1.2rem;font-weight:bold;\">Occitanie</span>"}
},
'region-52': {
value: "Pays de la Loire",
href: "france/pays-de-la-loire",
tooltip: {content: "<span style=\"font-size:1.2rem;font-weight:bold;\">Pays de la Loire</span>"}
},
'region-93': {
value: "Provence-Alpes-Côte d'Azur",
href: "france/provence-alpes-cote-d-azur",
tooltip: {content: "<span style=\"font-size:1.2rem;font-weight:bold;\">Provence-Alpes-Côte d'Azur</span>"}
}
}
});
</script>
{% endblock %}

View File

@ -7,6 +7,7 @@
<link rel="shortcut icon" type="image/x-icon" href="\images\favicon.ico">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bree+Serif&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kalam&display=swap">
<link rel="stylesheet" href="\css\mapael.css">
<link rel="stylesheet" href="\css\style.css">
<style>
body {
@ -27,10 +28,12 @@
grid-column: 2 / 3;
}
</style>
<!--<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>-->
<script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="/js/connex.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js" charset="utf-8"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js" charset="utf-8"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mapael/2.1.0/js/jquery.mapael.min.js" charset="utf-8"></script>
<script type="text/javascript" src="https://rawgit.com/neveldo/mapael-maps/master/france/france_regions_2016.js" charset="utf-8"></script>
</head>
<body class="fond page">
<div class="site">
@ -50,7 +53,6 @@
<div class="navbar-text" style="color:lightgray;margin-right:15px; margin-top:3px;">
{{ "now"|date('d/m/y') }}
</div>
<!--{pourcent if current_user() pourcent}-->
{% if nom_user != '' %}
<!-- <button style="background-color: transparent;padding:0;border:0;" -->
<form method="post" style="margin-top:5px;" action="{{ path('account.profil') }}">