165 lines
5.9 KiB
HTML
Executable File
165 lines
5.9 KiB
HTML
Executable File
<!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>
|
|
<? if(isset($new) AND $new==1) { ?>
|
|
<form class="form" action="<?=$config['rel_root_folder']?>poi/new" method="post">
|
|
<? }
|
|
else { ?>
|
|
<form class="form" action="<?=$config['rel_root_folder']?>poi/<?=$poi->permalink?>/edit" method="post">
|
|
<? } ?>
|
|
<h1 class="flex_line">
|
|
<input type="text" value="<?=$poi->name?>" name="name" id="name" placeholder="Nom de l'hébergement" required>
|
|
<select name="locale" id="locale">
|
|
<? foreach($locales->objs as $locale) { ?>
|
|
<option <?=$poi->locale==$locale->name?'selected':''?> value="<?=$locale->name?>"><?=$locale->display_name?></option>
|
|
<? } ?>
|
|
</select>
|
|
</h1>
|
|
|
|
<div class="flex_line">
|
|
<input type="number" class="noarrow" step="any" value="<?=$poi->lat?>" name="lat" id="lat" placeholder="Latitude" required>
|
|
<input type="number" class="noarrow" step="any" value="<?=$poi->lon?>" name="lon" id="lon" placeholder="Longitude" required>
|
|
<input type="number" class="noarrow last-child" step="any" value="<?=$poi->ele?>" name="ele" id="ele" placeholder="Altitude">
|
|
<div id="elevation_icon" style="display:none;" title="Calculer l'altitude"><i class="fas fa-search-location"></i></div>
|
|
</div>
|
|
|
|
<div class="flex_line" id="type_selector">
|
|
<? foreach($poi_types as $type) { ?>
|
|
<input type="radio" name="poi_type" value="<?=$type[3]?>" id="<?=$type[3]?>" required>
|
|
<label for="<?=$type[3]?>"><img src="<?=$config['views_url']?>img/<?=$type[3]?>.svg"><br><?=$type[0]?></label>
|
|
<? } ?>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
var unsaved = false;
|
|
|
|
// Used to store all the forms skeleton and abstracts
|
|
<? foreach($poi_types as $type) { ?>
|
|
<?=$type[3]?>_abstract="<?=$type[4]?>";
|
|
<?=$type[3]?>_jsonform=<?=json_encode($type[5])?>;
|
|
<? } ?>
|
|
|
|
// Manages the three state checkbox feature
|
|
function update3State(id) {
|
|
var input=$("input[name="+id+"]");
|
|
var label=$("label[for="+id+"]");
|
|
switch(+input.val()) {
|
|
case 0:
|
|
input.val(1);
|
|
label.toggleClass('uncheck intermediate')
|
|
break;
|
|
case 1:
|
|
input.val(2);
|
|
label.toggleClass('intermediate check')
|
|
break;
|
|
default:
|
|
input.val(0);
|
|
label.toggleClass('check uncheck')
|
|
|
|
}
|
|
unsaved = true; // The form values changed
|
|
}
|
|
|
|
// Updates the specific form section when changing poi type
|
|
function updateForm(type) {
|
|
$("#abstract").html(this[type+'_abstract']); // Changes the abstract legend
|
|
var html_form="";
|
|
// Generates HTML for the sub-form
|
|
$.each(this[type+'_jsonform'],function(index, value){
|
|
switch(index.charAt(0)) {
|
|
case 'b':
|
|
html_form+='<label class="threecb intermediate" for="'+index+'" onclick="update3State(\''+index+'\')">'+value+'</label><input value="1" type="hidden" name="'+index+'" id="'+index+'"><br>'
|
|
break;
|
|
case 'n':
|
|
html_form+='<div class="flex_line"><label for="'+index+'">'+value+'</label><input min="0" type="number" name="'+index+'" id="'+index+'"></div>'
|
|
break;
|
|
case 't':
|
|
html_form+='<textarea name="'+index+'" id="'+index+'" placeholder="'+value+'"></textarea>'
|
|
break;
|
|
case 'l':
|
|
html_form+='<div class="flex_line"><label for="'+index+'">'+value+'</label><input placeholder="https://" type="url" name="'+index+'" id="'+index+'"></div>'
|
|
break;
|
|
default:
|
|
console.log("ERROR: "+index+"'s type is not known");
|
|
}
|
|
});
|
|
$("#specific_form").html(html_form); // Updates HTML
|
|
|
|
// Display an alert if the poi type is changed before reseting the form
|
|
unsaved = false;
|
|
$("#specific_form :input").change(function(){
|
|
unsaved = true;
|
|
});
|
|
}
|
|
|
|
// Handle click on type selector
|
|
$(document).ready(function(){
|
|
// First check if there is changes in the sub-form and if the user is OK to reset the form
|
|
$('#type_selector label').click(function(){
|
|
if(unsaved == true) {
|
|
if(confirm("Des changements ont été apportés et vont être supprimés, voulez-vous continuer ?")) {}
|
|
else {
|
|
return false; // Cancel radio switch action
|
|
}
|
|
}
|
|
|
|
// Updates the sub-form
|
|
updateForm($(this).prev().val());
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<p id="abstract"></p>
|
|
<div id="specific_form"></div>
|
|
|
|
<? if(isset($new) AND $new==1) { ?>
|
|
<div id="permalink_container">
|
|
<label id="permalink_label" for="permalink"><?=$config['web_root_folder']?>poi/</label>
|
|
<input type="text" name="permalink" id="permalink" placeholder="URL">
|
|
</div>
|
|
<? } ?>
|
|
|
|
<script type="text/javascript">
|
|
$( "#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>
|
|
|
|
<input name="submit" id="submit" type="submit" value="Ajouter l'hébergement">
|
|
</form>
|
|
</section>
|
|
|
|
<script type="text/javascript">
|
|
$( "#slide-icon" ).click(function() {
|
|
$( "html, body" ).animate({scrollTop: "300px"});
|
|
});
|
|
</script>
|
|
|
|
<? include('blocks/d.footer.html'); ?>
|
|
</div>
|
|
</body>
|
|
</html> |