adding click record to edit in the admin settings

diff --git a/css/admin.min.css b/css/admin.min.css
index 500d42c..ab72ae5 100644 (file)
--- a/css/admin.min.css
+++ b/css/admin.min.css
@@ -1 +1 @@
-#new-area-section{background-color:white}#new-area-section .input-container{margin-bottom:0;padding:0 10px 0 10px}#new-area-section .input-container input.area-name{margin:10px 10px 0 0px}#new-area-section .input-container input.area-name+label{top:15px !important}#new-area-section .map-page-selection .select-wrapper .dropdown-content.select-dropdown li:not(:first-child){line-height:1;min-height:20px}#new-area-section .map-page-selection .select-wrapper .dropdown-content.select-dropdown li:not(:first-child) span,#new-area-section .map-page-selection .select-wrapper .dropdown-content.select-dropdown li:not(:first-child) a{line-height:1;padding:2px 10px}#new-area-section .map-color-selection{margin-top:20px}#new-area-section .map-color-selection label{margin-left:15px;font-size:16px}#list-header{padding:5px;background-color:#003366;color:white}#list-header .area-header{color:inherit}#area-list .record-container{margin-bottom:2px}#area-list .record-container .area-record{padding:5px;background-color:white}#area-list .record-container .area-record .area-record-delete{position:relative;right:15px}#area-list .record-container .area-record .area-record-delete:hover{cursor:pointer}
+#new-area-section{background-color:white}#new-area-section .input-container{margin-bottom:0;padding:0 10px 0 10px}#new-area-section .input-container input.area-name{margin:10px 10px 0 0px}#new-area-section .input-container input.area-name+label{top:15px !important}#new-area-section .map-page-selection .select-wrapper .dropdown-content.select-dropdown li:not(:first-child){line-height:1;min-height:20px}#new-area-section .map-page-selection .select-wrapper .dropdown-content.select-dropdown li:not(:first-child) span,#new-area-section .map-page-selection .select-wrapper .dropdown-content.select-dropdown li:not(:first-child) a{line-height:1;padding:2px 10px}#new-area-section .map-color-selection{margin-top:20px}#new-area-section .map-color-selection label{margin-left:15px;font-size:16px}#list-header{padding:5px;background-color:#003366;color:white}#list-header .area-header{color:inherit}#area-list .record-container{margin-bottom:2px}#area-list .record-container .area-record{padding:5px;background-color:white}#area-list .record-container .area-record:hover{cursor:pointer}#area-list .record-container .area-record .area-record-delete{position:relative;right:15px}#area-list .record-container .area-record .area-record-delete:hover{cursor:pointer}

diff --git a/sass/admin/_settings.scss b/sass/admin/_settings.scss
index 862cff6..534a1c2 100644 (file)
--- a/sass/admin/_settings.scss
+++ b/sass/admin/_settings.scss
@@ -41,12 +41,14 @@
     }
 }
 #area-list{
-    
     .record-container{
         margin-bottom: 2px;
         .area-record{
             padding: 5px;
             background-color: white;
+            &:hover{
+                cursor: pointer;
+            }
             .area-record-delete{
                 position: relative;
                 right: 15px;

diff --git a/views/admin/settings/mapSettings.html b/views/admin/settings/mapSettings.html
index abe75f6..36a1ff5 100644 (file)
--- a/views/admin/settings/mapSettings.html
+++ b/views/admin/settings/mapSettings.html
@@ -52,6 +52,9 @@
         function capitalize(string) {
             return string.charAt(0).toUpperCase() + string.slice(1);
         }
+        function getKeyByValue(object, value) {
+            return Object.keys(object).find(key => object[key] === value);
+        }
         function serverCall(data){
             $.ajax({
                 dataType: "json",
@@ -63,7 +66,7 @@
                         $('#area-list').not( $("#list-header") ).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-page' 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") );
+                            $("<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") );
                         })
                     }
                 }
@@ -77,7 +80,6 @@
                 data.area_name = capitalize($("#area-name").val());
                 data.page_id = $("select").val();
                 serverCall(data);
-                console.log(data);
                 $("#area-name").val("").siblings("label").removeClass("active");
                 $("#map-color").val("#003366");
             
@@ -101,13 +103,29 @@
         $(document).on("change", "#map-color",function(){
             data.hover_color = $(this).val();
         });
+
         $(document).on("click", ".material-icons",function(){
-            console.log("delete");
             data.option = 'delete';
             data.id     = $(this).parent().parent().data("id");
             serverCall(data);
         });
 
+        $(document).on("click", ".area-record",function(){
+            var id          = $(this).data('id');
+            var area_name   = $(this).find($('.area-record-name')).text();
+            var area_page   = $(this).find($('.area-record-page')).text();
+            var page_id     = getKeyByValue(pages, area_page);  
+            var area_color  = $(this).find($('.area-record-color')).text();
+
+            $("#area-name").val(area_name).siblings("label").addClass("active");
+            $("#map-color").val(area_color);
+
+            $('select').val(page_id)
+            $("select").formSelect();
+            console.log(area_color, area_page, area_name)
+            // serverCall(data);
+        });
+
         // Initial page load list population
         (function(){
             data.option = 'list';