Add cursor in poi editor

controllers/d.poi.php

@@ -53,6 +53,8 @@ switch ($controller->splitted_url[1]) {
 			$head['css'] .= ";../third/leaflet/leaflet.css;../third/leaflet-fullscreen/leaflet.fullscreen.css;../third/leaflet-easybutton/easy-button.css";
 			$head['js'] = "d.poi_map.js";
 
+			$poi->lat = ""; $poi->lon = ""; $poi->alt = "";
+
 			$new = 1;
 			include ($config['views_folder']."d.poi.edit.html");
 			break;

views/css/d.poi.css

@@ -42,19 +42,14 @@ html, body {
 /** Editor page                 **/
 /*********************************/
 
-form.form input, form.form textarea, #locale {
+form.form input, form.form textarea, form.form input[type=radio]:checked+label, #locale {
 	background: #ddd;
 	border-bottom: 2px solid #ccc;
 	display: block;
 	padding: 10px;
 }
 
-form.form textarea {
-	font-size: 14px;
-	margin: 10px 0 10px 0px;
-	width: calc(100% - 20px);
-}
-form.form input {
+form.form h1 input {
 	width: 58%;
 	margin: 10px 0 10px 0px;
 	font-size: 18px;
@@ -65,29 +60,46 @@ form.form input {
 	font-size: 17px;
 }
 
-form.form input[type=submit] {
-	width: auto;
-	margin: auto;
-	border-bottom: 2px solid blue;
+#permalink {
+	width: 808px;
+	margin: 10px 0 0 0px;
+	padding: 6px;
+	font-size: 11px;
+	font-style: italic;
+	color: #555;
+
 }
 
-#type_selector {
+.flex_line {
 	display: flex;
 	flex-direction: row;
 }
+
+.flex_line input[type=text] {
+	flex: 1;
+	margin: 10px 5px 0 5px;
+}
+
+form.form input[type=submit] {
+	width: auto;
+	margin: 10px auto;
+	border-bottom: 2px solid blue;
+}
+
 form.form input[type=radio] {
 	display: none;
 }
 form.form input[type=radio]+label {
+	font-size: 13px;
 	flex: 1;
 	text-align: center;
-	padding: 10px 5px;
+	padding: 10px;
 	vertical-align: middle;
 	border-bottom: 2px solid transparent;
 }
-form.form input[type=radio]:checked+label {
-	background: #ddd;
-	border-bottom: 2px solid #ccc;
+form.form input[type=radio]+label img {
+	width: 32px;
+	height: 32px;
 }
 
 /*****************************************

views/d.poi.edit.html

@@ -14,7 +14,7 @@
 				<i id="slide-icon" class="fas fa-chevron-up"></i>
 				<form class="form" action="<?=$config['rel_root_folder']?>wiki/<?=$poi->permalink?>/edit" method="post">
 					<br>
-					<div id="type_selector">
+					<div class="flex_line">
 						<? foreach($poi_types as $type) { ?>
 							<input type="radio" name="poi_type" value="<?=$type[3]?>" id="<?=$type[3]?>">
 							<label for="<?=$type[3]?>"><img src="<?=$config['views_url']?>img/<?=$type[3]?>.svg"><br><?=$type[0]?></label>
@@ -27,10 +27,17 @@
 								<option <?=$poi->locale==$locale->name?'selected':''?> value="<?=$locale->name?>"><?=$locale->display_name?></option>
 							<? } ?>
 						</select>
-						<input type="text" value="<?=$poi->name?>" name="name" id="name" placeholder="Titre">
+						<input type="text" value="<?=$poi->name?>" name="name" id="name" placeholder="Nom de l'hébergement">
 					</h1>
+					<? if(isset($new) AND $new==1) { ?>
+						<input type="text" value="<?=$poi->permalink?>" name="permalink" id="permalink" placeholder="Permalien généré automatiquement" readonly>
+					<? } ?>
 
-					<textarea rows="30" name="content" id="content" placeholder="Contenu de la page"><?=$poi->parameters?></textarea>
+					<div class="flex_line">
+						<input type="text" value="<?=$poi->lat?>" name="lat" id="lat" placeholder="Latitude">
+						<input type="text" value="<?=$poi->lon?>" name="lon" id="lon" placeholder="Longitude">
+						<input type="text" value="<?=$poi->alt?>" name="alt" id="alt" placeholder="Altitude">
+					</div>
 
 					<input name="submit" id="submit" type="submit" value="Envoyer">
 				</form>
@@ -39,6 +46,22 @@
 		<script type="text/javascript">
 $( "#slide-icon" ).click(function() {
   $( "html, body" ).animate({scrollTop: "300px"});
+});
+$( "#name" ).keyup(function() {
+  permalink = $( "#name" ).val();
+  permalink = permalink.replace(/ /g,'_');
+  permalink = permalink.toLowerCase();
+  permalink = permalink.replace(/[^a-z0-9_]/g,'-');
+  permalink = permalink.replace(/[_-]+$/g,'');
+  $( "#permalink" ).val(permalink);
+});
+$( "#name" ).change(function() {
+  permalink = $( "#name" ).val();
+  permalink = permalink.replace(/ /g,'_');
+  permalink = permalink.toLowerCase();
+  permalink = permalink.replace(/[^a-z0-9_]/g,'-');
+  permalink = permalink.replace(/[_-]+$/g,'');
+  $( "#permalink" ).val(permalink);
 });
 		</script>
 

views/js/d.poi_map.js

@@ -1,4 +1,5 @@
 var mymap;
+var poi_layer;
 
 $( document ).ready(function() {
 	// Differents layers for the map
@@ -40,13 +41,19 @@ $( document ).ready(function() {
 
 	mymap.removeControl(mymap.attributionControl);
 
-	$(".close-link").click(function() {
-		$("footer").show();
-		$("#footer-credits").hide();
-		$("#footer-legend").hide();
-	});
-
 	mymap.on('baselayerchange', function(e) {
 		$("#map-credits").html(e.layer.getAttribution());
 	});
-});
+
+	poi_layer = L.marker([-46.407, 51.766], {draggable: true}).addTo(mymap);
+
+	mymap.on('click', function(e){
+		poi_layer.setLatLng(e.latlng);
+		$("#lat").val(e.latlng.lat);
+		$("#lon").val(e.latlng.lng);
+	})
+	poi_layer.on('move', function(e){
+		$("#lat").val(e.latlng.lat);
+		$("#lon").val(e.latlng.lng);
+	})
+});