leo/kabano
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Première version de la vue d'un POI

Browse Source
This commit is contained in:
leosw
2026-01-18 17:55:43 +01:00
parent a6c0e06d78
commit 58b180a740
5 changed files with 520 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
views/d.poi.edit.html
View File

@@ -158,6 +158,14 @@ $( "#name" ).change(function() {
</form>
</section>
<script>
var poi_lat = <?=$poi->lat?>;
var poi_lon = <?=$poi->lon?>;
var poi_type = null;
var poi_mode = "edit";
</script>
<script type="text/javascript">
$( "#slide-icon" ).click(function() {
$( "html, body" ).animate({scrollTop: "300px"});

139
views/d.poi.view.html Normal file
View File

@@ -0,0 +1,139 @@
<!DOCTYPE html>
<html lang="fr">
<? include('blocks/d.head.html'); ?>
<body>
<? include('blocks/d.nav.html'); ?>
<div id="mapid"></div>
<div id="sticky">
<section>
<i id="slide-icon" class="fas fa-chevron-up"></i>
<h1 class="flex_line">
<span><?=$poi->name?></span>
<span class="poi-type"><?=$poi->poi_type?></span>
</h1>
<div class="flex_line">
<div>
<strong>Latitude :</strong> <?=$poi->lat?><br>
<strong>Longitude :</strong> <?=$poi->lon?><br>
<? if ($poi->ele !== null && $poi->ele !== '') { ?>
<strong>Altitude :</strong> <?=$poi->ele?> m<br>
<? } ?>
</div>
<div>
<strong>Langue :</strong> <?=$poi->locale?><br>
<strong>Auteur :</strong> <?=$poi->author_name?><br>
<strong>Dernière mise à jour :</strong> <?=$poi->update_date?><br>
</div>
</div>
<? if ($user->rankIsHigher("moderator")) { ?>
<div class="flex_line admin_actions">
<a class="button" href="<?=$config['rel_root_folder']?>poi/<?=$poi->permalink?>/edit">Modifier</a>
<? if ($poi->is_public == 't') { ?>
<a class="button danger" href="<?=$config['rel_root_folder']?>poi/<?=$poi->permalink?>/delete">Supprimer</a>
<? } else { ?>
<a class="button success" href="<?=$config['rel_root_folder']?>poi/<?=$poi->permalink?>/restore">Restaurer</a>
<? } ?>
</div>
<? } ?>
<hr>
<h2>Description</h2>
<div class="poi-description">
<?=$poi->content_html?>
</div>
<hr>
<h2 id="abstract_title">Informations générales</h2>
<p id="abstract">
<?=$poi_types[$poi->poi_type][4] ?? ""?>
</p>
<h2>Caractéristiques</h2>
<div id="specific_form">
<? if (!empty($poi->parameters)) { ?>
<? foreach ($poi->parameters as $key => $value) { ?>
<div class="flex_line poi_param">
<label><strong><?=$key?></strong></label>
<span><?=$value?></span>
</div>
<? } ?>
<? } else { ?>
<p>Aucune information spécifique.</p>
<? } ?>
</div>
<hr>
<? if ($poi->is_commentable == 't') { ?>
<h2>Commentaires</h2>
<? if (isset($poi_comments) && $poi_comments->number > 0) { ?>
<div id="comments">
<? foreach ($poi_comments->objs as $comment) { ?>
<article class="comment">
<header>
<strong><?=$comment->author_obj->name?></strong>
<span><?=$comment->creation_date?></span>
<? if ($user->rankIsHigher("moderator") || $user->id == $comment->author) { ?>
<? if ($comment->is_public == 't') { ?>
<a href="<?=$config['rel_root_folder']?>poi/<?=$poi->permalink?>/delete_comment/<?=$comment->id?>">Supprimer</a>
<? } else { ?>
<a href="<?=$config['rel_root_folder']?>poi/<?=$poi->permalink?>/restore_comment/<?=$comment->id?>">Restaurer</a>
<? } ?>
<? } ?>
</header>
<div class="comment-body">
<?=$comment->comment_html?>
</div>
</article>
<? } ?>
</div>
<? } else { ?>
<p>Aucun commentaire pour le moment.</p>
<? } ?>
<? if ($user->rankIsHigher("registered")) { ?>
<form class="form" action="<?=$config['rel_root_folder']?>poi/<?=$poi->permalink?>/new_comment" method="post">
<h3>Ajouter un commentaire</h3>
<textarea name="comment" id="comment" required></textarea>
<input type="submit" name="submit" value="Envoyer">
</form>
<? } else { ?>
<p>Connectez-vous pour ajouter un commentaire.</p>
<? } ?>
<? } ?>
</section>
<? include('blocks/d.footer.html'); ?>
</div>
<script>
var poi_lat = <?=$poi->lat?>;
var poi_lon = <?=$poi->lon?>;
var poi_type = "<?=$poi->poi_type?>";
var poi_mode = "view";
var root = "<?=$config['rel_root_folder']?>";
</script>
<script type="text/javascript">
$( "#slide-icon" ).click(function() {
$( "html, body" ).animate({scrollTop: "300px"});
});
</script>
</body>
</html>

188
views/js/d.poi_map.js
View File

@@ -1,82 +1,132 @@
var mymap;
var poi_layer;
$( document ).ready(function() {
// Differents layers for the map
var topo_maptiler = L.tileLayer('https://api.maptiler.com/maps/topographique/{z}/{x}/{y}.png?key=Sm8M7mJ53GtYdl773rpi', {tms: false, attribution: 'Carte © <a href="https://www.maptiler.com/copyright/" target="_blank">MapTiler</a>, Données © <a href="http://www.openstreetmap.org/copyright" target="_blank">Contributeurs OpenStreetMap</a>', tileSize: 512, zoomOffset: -1, minZoom: 1});
var ign = L.tileLayer('https://data.geopf.fr/private/wmts?&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&STYLE=normal&TILEMATRIXSET=PM&FORMAT=image/jpeg&LAYER=GEOGRAPHICALGRIDSYSTEMS.MAPS&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&apikey=ign_scan_ws', {attribution: 'Carte & Connées © <a href="http://ign.fr/" target="_blank">IGN-F/Géoportail</a>'});
// Base layers
var baseLayers = {
"OpenStreetMap": topo_maptiler,
"IGN France": ign
};
$(document).ready(function() {
// Mode : edit (formulaire) ou view (affichage)
var isEdit = (typeof poi_mode === "undefined" || poi_mode === "edit");
mymap = L.map('mapid', {
zoomControl: false,
layers: [topo_maptiler]
}).setView([47, 3], 6);
$("#map-credits").html(topo_maptiler.getAttribution());
// Differents layers for the map
var topo_maptiler = L.tileLayer(
'https://api.maptiler.com/maps/topographique/{z}/{x}/{y}.png?key=Sm8M7mJ53GtYdl773rpi',
{
tms: false,
attribution: 'Carte © <a href="https://www.maptiler.com/copyright/" target="_blank">MapTiler</a>, Données © <a href="http://www.openstreetmap.org/copyright" target="_blank">Contributeurs OpenStreetMap</a>',
tileSize: 512,
zoomOffset: -1,
minZoom: 1
}
);
var ign = L.tileLayer(
'https://data.geopf.fr/private/wmts?&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&STYLE=normal&TILEMATRIXSET=PM&FORMAT=image/jpeg&LAYER=GEOGRAPHICALGRIDSYSTEMS.MAPS&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&apikey=ign_scan_ws',
{
attribution: 'Carte & Connées © <a href="http://ign.fr/" target="_blank">IGN-F/Géoportail</a>'
}
);
// Base layers
var baseLayers = {
"OpenStreetMap": topo_maptiler,
"IGN France": ign
};
L.control.scale({
position: "bottomleft",
imperial: false
}).addTo(mymap);
mymap = L.map('mapid', {
zoomControl: false,
layers: [topo_maptiler]
}).setView([47, 3], 6);
$("#map-credits").html(topo_maptiler.getAttribution());
L.control.fullscreen({
position: "bottomleft"
}).addTo(mymap);
L.control.scale({
position: "bottomleft",
imperial: false
}).addTo(mymap);
L.control.zoom({
zoomOutText: "<i class=\"fa fa-minus\" aria-hidden=\"true\"></i>",
zoomInText: "<i class=\"fa fa-plus\" aria-hidden=\"true\"></i>",
position: "bottomleft"
}).addTo(mymap);
L.control.fullscreen({
position: "bottomleft"
}).addTo(mymap);
L.control.layers(baseLayers,null,{
position: "bottomright"
}).addTo(mymap);
L.control.zoom({
zoomOutText: "<i class=\"fa fa-minus\" aria-hidden=\"true\"></i>",
zoomInText: "<i class=\"fa fa-plus\" aria-hidden=\"true\"></i>",
position: "bottomleft"
}).addTo(mymap);
mymap.removeControl(mymap.attributionControl);
L.control.layers(baseLayers, null, {
position: "bottomright"
}).addTo(mymap);
mymap.on('baselayerchange', function(e) {
$("#map-credits").html(e.layer.getAttribution());
});
mymap.removeControl(mymap.attributionControl);
poi_layer = L.marker([47, 3], {draggable: true}).addTo(mymap);
poi_layer.bindTooltip("Glissez moi au bon endroit.", {permanent: true, direction: 'auto'}).openTooltip();
mymap.on('baselayerchange', function(e) {
$("#map-credits").html(e.layer.getAttribution());
});
mymap.on('click', function(e){
poi_layer.setLatLng(e.latlng);
})
poi_layer.on('move', function(e){
poi_layer.unbindTooltip();
$("#lat").val(+e.latlng.lat.toFixed(6));
$("#lon").val(+e.latlng.lng.toFixed(6));
$("#elevation_icon").show();
})
$("#lat,#lon").change(function() { // If the user changes the lat/lon input values manualy
if(isNaN($("#lat").val()) || isNaN($("#lon").val()) || $("#lat").val().length==0 || $("#lon").val()==null)
$("#elevation_icon").hide();
else {
$("#elevation_icon").show();
poi_layer.setLatLng([$("#lat").val(),$("#lon").val()]);
}
});
// Position initiale : soit celle du POI, soit le centre par défaut
var startLat = (typeof poi_lat !== "undefined" && poi_lat) ? poi_lat : 47;
var startLon = (typeof poi_lon !== "undefined" && poi_lon) ? poi_lon : 3;
var poiicon = L.icon({
iconSize: [24, 24],
iconAnchor: [12, 12]
});
$("#type_selector label").click(function(e) {
poi_layer.unbindTooltip();
poiicon.options.iconUrl = e.currentTarget.firstChild.currentSrc;
poi_layer.setIcon(poiicon);
})
$("#elevation_icon").click(function(e) {
$(this).find($(".fas")).removeClass('fa-search-location').addClass('fa-spinner').addClass('fa-spin');
$.get("./elevation_proxy", {location:$("#lat").val()+","+$("#lon").val()}, function(result){
$("#ele").val(result.results[0].elevation);
$("#elevation_icon").find($(".fas")).removeClass('fa-spinner').removeClass('fa-spin').addClass('fa-search-location');
});
})
});
// Icône : si poi_type défini, on l’utilise, sinon icône Leaflet par défaut
var poiicon = null;
if (typeof poi_type !== "undefined" && poi_type) {
poiicon = L.icon({
iconSize: [24, 24],
iconAnchor: [12, 12],
iconUrl: root + "views/img/" + poi_type + ".svg"
});
}
if (poiicon) {
poi_layer = L.marker([startLat, startLon], {draggable: isEdit, icon: poiicon}).addTo(mymap);
} else {
poi_layer = L.marker([startLat, startLon], {draggable: isEdit}).addTo(mymap);
}
if (isEdit) {
poi_layer.bindTooltip("Glissez moi au bon endroit.", {permanent: true, direction: 'auto'}).openTooltip();
}
// Interactions uniquement en mode édition
if (isEdit) {
mymap.on('click', function(e){
poi_layer.setLatLng(e.latlng);
});
poi_layer.on('move', function(e){
poi_layer.unbindTooltip();
$("#lat").val(+e.latlng.lat.toFixed(6));
$("#lon").val(+e.latlng.lng.toFixed(6));
$("#elevation_icon").show();
});
$("#lat,#lon").change(function() { // If the user changes the lat/lon input values manualy
if(isNaN($("#lat").val()) || isNaN($("#lon").val()) || $("#lat").val().length==0 || $("#lon").val()==null)
$("#elevation_icon").hide();
else {
$("#elevation_icon").show();
poi_layer.setLatLng([$("#lat").val(),$("#lon").val()]);
}
});
var editPoiIcon = L.icon({
iconSize: [24, 24],
iconAnchor: [12, 12]
});
$("#type_selector label").click(function(e) {
poi_layer.unbindTooltip();
editPoiIcon.options.iconUrl = e.currentTarget.firstChild.currentSrc;
poi_layer.setIcon(editPoiIcon);
});
$("#elevation_icon").click(function(e) {
$(this).find($(".fas")).removeClass('fa-search-location').addClass('fa-spinner').addClass('fa-spin');
$.get("./elevation_proxy", {location:$("#lat").val()+","+$("#lon").val()}, function(result){
$("#ele").val(result.results[0].elevation);
$("#elevation_icon").find($(".fas")).removeClass('fa-spinner').removeClass('fa-spin').addClass('fa-search-location');
});
});
} else {
// Mode affichage : centrer sur le POI si coordonnées présentes
if (typeof poi_lat !== "undefined" && typeof poi_lon !== "undefined") {
mymap.setView([poi_lat, poi_lon], 14);
}
}
});