adding reset button to undo the selection of updating a record, changing the update...

diff --git a/css/admin.min.css b/css/admin.min.css
index 247407e..e76a86d 100644 (file)
--- a/css/admin.min.css
+++ b/css/admin.min.css
@@ -1 +1 @@
-#map-area-container{padding:10px}#map-area-container #new-area-section{max-width:800px;background-color:white}#map-area-container #new-area-section .input-container{margin-bottom:0;padding:0 10px 0 10px}#map-area-container #new-area-section .input-container input.area-name{margin:10px 10px 0 0px}#map-area-container #new-area-section .input-container input.area-name+label{top:15px !important}#map-area-container #new-area-section .map-page-selection .select-wrapper .dropdown-content.select-dropdown li:not(:first-child){line-height:1;min-height:20px}#map-area-container #new-area-section .map-page-selection .select-wrapper .dropdown-content.select-dropdown li:not(:first-child) span,#map-area-container #new-area-section .map-page-selection .select-wrapper .dropdown-content.select-dropdown li:not(:first-child) a{line-height:1;padding:2px 10px}#map-area-container #new-area-section .map-color-selection{margin-top:20px}#map-area-container #new-area-section .map-color-selection label{margin-left:15px;font-size:16px}#map-area-container #list-header{padding:5px;background-color:#003366;color:white}#map-area-container #list-header .area-header{color:inherit}#map-area-container #area-list .record-container{margin-bottom:2px}#map-area-container #area-list .record-container .area-record{padding:5px;background-color:white}#map-area-container #area-list .record-container .area-record:hover{cursor:pointer}#map-area-container #area-list .record-container .area-record .area-record-delete{position:relative;right:15px}#map-area-container #area-list .record-container .area-record .area-record-delete:hover{cursor:pointer}#area-update{margin-top:10px;float:right}.edit-field{background-color:rgba(30,202,162,0.3) !important}.error-field{background-color:rgba(244,67,54,0.3) !important}
+#map-area-container{padding:10px}#map-area-container #new-area-section{max-width:800px;background-color:white}#map-area-container #new-area-section .input-container{margin-bottom:0;padding:0 10px 0 10px}#map-area-container #new-area-section .input-container input.area-name{margin:10px 10px 0 0px}#map-area-container #new-area-section .input-container input.area-name+label{top:15px !important}#map-area-container #new-area-section .map-page-selection .select-wrapper .dropdown-content.select-dropdown li:not(:first-child){line-height:1;min-height:20px}#map-area-container #new-area-section .map-page-selection .select-wrapper .dropdown-content.select-dropdown li:not(:first-child) span,#map-area-container #new-area-section .map-page-selection .select-wrapper .dropdown-content.select-dropdown li:not(:first-child) a{line-height:1;padding:2px 10px}#map-area-container #new-area-section .map-color-selection{margin-top:20px}#map-area-container #new-area-section .map-color-selection label{margin-left:15px;font-size:16px}#map-area-container #list-header{padding:5px;background-color:#003366;color:white}#map-area-container #list-header .area-header{color:inherit}#map-area-container #area-list .record-container{margin-bottom:2px}#map-area-container #area-list .record-container .area-record{padding:5px;background-color:white}#map-area-container #area-list .record-container .area-record:hover{cursor:pointer}#map-area-container #area-list .record-container .area-record .area-record-delete{position:relative;right:15px}#map-area-container #area-list .record-container .area-record .area-record-delete:hover{cursor:pointer}#area-update{margin-top:10px;float:right;margin-left:10px}#area-reset{margin-top:10px;background-color:rgba(244,67,54,0.8);display:none}.edit-field{background-color:rgba(30,202,162,0.3) !important}.error-field{background-color:rgba(244,67,54,0.3) !important}

diff --git a/models/admin/ajax/mapSettingsAjax.php b/models/admin/ajax/mapSettingsAjax.php
index 8809ae9..ad95877 100644 (file)
--- a/models/admin/ajax/mapSettingsAjax.php
+++ b/models/admin/ajax/mapSettingsAjax.php
@@ -100,11 +100,11 @@ class GlmMembersAdmin_ajax_mapSettingsAjax extends GlmDataMapSettings
         }
         // If there's an action option
         if ( $option ) {
-            
+       
             switch( $option ) {
                 
                 case 'add':
-
+                    
                     $area_name      = filter_var($_REQUEST['area_name'], FILTER_SANITIZE_STRING);
                     $page_id        = (isset($_REQUEST['page_id'])) ? filter_var($_REQUEST['page_id'], FILTER_SANITIZE_STRING) : 0;
                     $hover_color    = filter_var($_REQUEST['hover_color'], FILTER_SANITIZE_URL);
@@ -151,7 +151,7 @@ class GlmMembersAdmin_ajax_mapSettingsAjax extends GlmDataMapSettings
 
                 case 'delete':
                     if ( $id > 0 ) {
-                        $test = $id;
+                   
                         $wpdb->delete(
                             GLM_MEMBERS_COUNTY_MAP_PLUGIN_DB_PREFIX . 'areas', // table to delete from
                             array(
@@ -181,8 +181,8 @@ class GlmMembersAdmin_ajax_mapSettingsAjax extends GlmDataMapSettings
 
         
         $return = array(
-            'areas'    =>  $data,
-            'test'      => $test  // Where our events list will go
+            'areas' =>  $data,
+            'test'  => $test  // Where our events list will go
         );
 
         header('Content-type:application/json;charset=utf-8', true);

diff --git a/sass/admin/_settings.scss b/sass/admin/_settings.scss
index 1e9d29e..1677272 100644 (file)
--- a/sass/admin/_settings.scss
+++ b/sass/admin/_settings.scss
@@ -66,6 +66,12 @@
 #area-update{
     margin-top: 10px;
     float: right;
+    margin-left: 10px;
+}
+#area-reset{
+    margin-top: 10px;
+    background-color: rgba(244, 67, 54, 0.8);
+    display: none;
 }
 .edit-field{
     background-color: rgba(30, 202, 162, 0.3) !important;

diff --git a/views/admin/settings/mapSettings.html b/views/admin/settings/mapSettings.html
index 3556dbc..a58a175 100644 (file)
--- a/views/admin/settings/mapSettings.html
+++ b/views/admin/settings/mapSettings.html
@@ -2,7 +2,7 @@
     <h5>Map Areas</h5>
     <div id="new-area-section">
         <div class="row">
-            <div class="s12 l8 col">
+            <div class="s12 l7 col">
                 <div class="row input-container">
                     <div class="input-field col s12 l8">
                         <input id="area-name" class="area-name validate" type="text" value="" required="" aria-required="">
@@ -34,12 +34,10 @@
                     </div>
                 </div>
             </div>
-            <div class="s12 l4 col">
-                <div class="row input-container">
+            <div class="s12 l5 col" style="max-width: 300px;">
+                <div class="row input-container">     
                     <button id="area-update" class="btn" data-option="add">Add Area</button>
-                    <div class="col s12 map-color-selection">
-                        
-                    </div>
+                    <button id="area-reset" class="btn" data-option="add">Nevermind</button>
                 </div>
             </div>
         </div>
@@ -78,35 +76,36 @@
                     if(data.areas.list){
                         $('#area-list').empty();
                         data.areas.list.forEach( function(area) {
-                           
-                            $("<div class='row record-container'><div style='display: flex;' class='s12 col area-record' data-id='" + area.id + "'><span class='area-record-name' style='flex: 1;'>" + area.area_name + "</span> <span class='area-record-page' style='flex: 1;'>" + pages[area.page_id] + "</span><span class='area-record-color' style='flex: 1;'>" + area.hover_color + "</span><span class='area-record-delete' style='flex: 0;'> <i class='material-icons area-record-delete'>delete_forever</i></span></div></div>").appendTo( $("#area-list") );
+                            var page = (parseInt(area.page_id)) ? pages[area.page_id] : "None";
+                            $("<div class='row record-container'><div data-position='bottom' data-tooltip='Click to edit area' style='display: flex;' class='s12 col area-record tooltipped' data-id='" + area.id + "'><span class='area-record-name' style='flex: 1;'>" + area.area_name + "</span> <span class='area-record-page' style='flex: 1;'>" + page + "</span><span class='area-record-color' style='flex: 1;'>" + area.hover_color + "</span><span class='area-record-delete' style='flex: 0;'> <i class='material-icons area-record-delete'>delete_forever</i></span></div></div>").appendTo( $("#area-list") );
                         })
                     }
+                    // $('.tooltipped').tooltip({literal}{delay: 50, tooltip:"new",position:"left"}{/literal});
                 }
             });
         };
-     
+        function resetForm(){
+            // duplicate code
+            $("#area-name").val("").siblings("label").removeClass("active");
+            $("#map-color").val("#003366");
+        
+            $('select').prop('selectedIndex', 0);
+            $("select").formSelect();
+            $("#area-name").parent().removeClass("edit-field");
+            $("#map-color").removeClass('edit-field');
+            $(".map-page-selection").removeClass("edit-field");
+        }
         // Form interaction events
         $(document).on("click", '#area-update',function(){
             
             if($("#area-name").val() ){
+                $("#area-name").parent().removeClass("error-field");
                 data.area_name = capitalize($("#area-name").val());
                 data.hover_color = $("#map-color").val();
                 $("#map-color").val();
-                data.page_id = $("select").val();
-                
-                // duplicate code
-                $("#area-name").val("").siblings("label").removeClass("active");
-                $("#map-color").val("#003366");
-            
-                $('select').prop('selectedIndex', 0);
-                $("select").formSelect();
-                $("#area-name").parent().removeClass("edit-field");
-                $("#map-color").removeClass('edit-field');
-                $(".map-page-selection").removeClass("edit-field");
-
+                data.page_id = ($("select").val()) ? $("select").val() : "None";
+                resetForm();
                 serverCall(data);
-                data.id = 0;
                 data.hover_color = "#003366";
                 data.option = "add";
                 $(this).text("Add Area");
@@ -134,6 +133,7 @@
             data.option = 'delete';
             data.id     = $(this).parent().parent().data("id");
             serverCall(data);
+            resetForm();
         });
 
         $(document).on("click", ".area-record",function(){
@@ -149,17 +149,24 @@
             $(".map-page-selection").addClass("edit-field");
             $('select').val(page_id);
             $("select").formSelect();
-            $("#area-update").attr("data-option", "update").text("Update Area").attr("data-id", id);
+            $("#area-update").text("Update Area").attr("data-id", id);
             data.id = id;
             data.hover_color = hover_color;
             data.option = "update";
+            $("#area-reset").fadeIn("slow");
+        });
+        $(document).on("click", "#area-reset",function(){
+            resetForm();
+            $(this).fadeOut("fast");
+            $('#area-update').text("Add Area");
         });
-
         // Initial page load list population
         (function(){
             data.option = 'list';
             serverCall(data);
+            data.option = 'add';
         })();
+        
         $("#area-name").val("").siblings("label").removeClass("active");
         $("#map-color").val("#003366");
         $('select').prop('selectedIndex', 0);