From 4fd3b12f90a64d6bcc26e49ac71fa9cfdcc2566b Mon Sep 17 00:00:00 2001
From: leosw <leo@lstronic.com>
Date: Fri, 28 May 2021 22:26:14 +0200
Subject: [PATCH] Add alert in case the form is edited and the type changes
 before submitting

---
 views/d.poi.edit.html | 39 +++++++++++++++++++++++++++++++++------
 1 file changed, 33 insertions(+), 6 deletions(-)

diff --git a/views/d.poi.edit.html b/views/d.poi.edit.html
index 3fe07dd..56707d6 100755
--- a/views/d.poi.edit.html
+++ b/views/d.poi.edit.html
@@ -36,11 +36,13 @@
 					<div class="flex_line" id="type_selector">
 						<? foreach($poi_types as $type) { ?>
 							<input type="radio" name="poi_type" value="<?=$type[3]?>" id="<?=$type[3]?>">
-							<label for="<?=$type[3]?>" onclick='updateForm("<?=$type[3]?>")'><img src="<?=$config['views_url']?>img/<?=$type[3]?>.svg"><br><?=$type[0]?></label>
+							<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]?>";
@@ -49,8 +51,8 @@
 
 						// Manages the three state checkbox feature
 						function update3State(id) {
-							input=$("input[name="+id+"]");
-							label=$("label[for="+id+"]");
+							var input=$("input[name="+id+"]");
+							var label=$("label[for="+id+"]");
 							switch(+input.val()) {
 								case 0:
 									input.val(1);
@@ -65,12 +67,14 @@
 									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']);
-							html_form="";
+							$("#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':
@@ -89,8 +93,31 @@
 											console.log("ERROR: "+index+"'s type is not known");
 									}
 							});
-							$("#specific_form").html(html_form);
+							$("#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>