From: Anthony Talarico <talarico@gaslightmedia.com>
Date: Fri, 9 Nov 2018 18:47:03 +0000 (-0500)
Subject: linking admin settings to the front view display
X-Git-Tag: v1.0.0^2~34
X-Git-Url: http://cvs2.gaslightmedia.com/gitweb/?a=commitdiff_plain;h=19d9da337701a0d543ff02be95ab18862cd1d46b;p=WP-Plugins%2Fglm-member-db-county-map.git

linking admin settings to the front view display
---

diff --git a/css/admin.min.css b/css/admin.min.css
index 522e2e7..247407e 100644
--- 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: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}.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}.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/front/map/display.php b/models/front/map/display.php
index 70e005d..e254248 100644
--- a/models/front/map/display.php
+++ b/models/front/map/display.php
@@ -15,15 +15,14 @@
 
 // Translation table for [glm-contacts-list] "show" options to configuration parameters
 
-// Load Contacts data abstract
-
+require_once GLM_MEMBERS_COUNTY_MAP_PLUGIN_CLASS_PATH.'/data/dataMapSettings.php';
 
 /*
  * This class performs the work for the default action of the "Contacts" menu
  * option, which is to display the contacts dashboard.
  *
  */
-class GlmMembersFront_map_display
+class GlmMembersFront_map_display extends GlmDataMapSettings
 {
 
     /**
@@ -100,10 +99,14 @@ class GlmMembersFront_map_display
      */
     public function modelAction ($actionData = false)
     {
+        $sql        = "SELECT * FROM " . GLM_MEMBERS_COUNTY_MAP_PLUGIN_DB_PREFIX . 'areas';
+        $areas =  $this->wpdb->get_results($sql); 
+
         wp_enqueue_style('admin-css', GLM_MEMBERS_COUNTY_MAP_PLUGIN_URL . 'css/front.min.css');
         // Compile template data
         $templateData = array(
-            'assets' => GLM_MEMBERS_COUNTY_MAP_PLUGIN_URL . 'assets/'
+            'assets' => GLM_MEMBERS_COUNTY_MAP_PLUGIN_URL . 'assets/',
+            'areas' => $areas
         );
 
         // Return status, any suggested view, and any data to controller
diff --git a/sass/admin/_settings.scss b/sass/admin/_settings.scss
index 1967284..1e9d29e 100644
--- a/sass/admin/_settings.scss
+++ b/sass/admin/_settings.scss
@@ -1,64 +1,72 @@
-#new-area-section{
-    background-color: white;
-    .input-container{
-        margin-bottom: 0;
-        padding: 0 10px 0 10px;
-        input.area-name{
-            margin: 10px 10px 0 0px;
-        }
-        input.area-name + label{
-            top: 15px !important;
+#map-area-container{
+    padding: 10px;
+    #new-area-section{
+        max-width: 800px;
+        background-color: white;
+        .input-container{
+            margin-bottom: 0;
+            padding: 0 10px 0 10px;
+            input.area-name{
+                margin: 10px 10px 0 0px;
+            }
+            input.area-name + label{
+                top: 15px !important;
+            }
         }
-    }
-    .map-page-selection{
-        .select-wrapper{
-            .dropdown-content.select-dropdown{
-                li:not(:first-child){
-                    line-height: 1;
-                    min-height: 20px;
-                    span,a{
+        .map-page-selection{
+            .select-wrapper{
+                .dropdown-content.select-dropdown{
+                    li:not(:first-child){
                         line-height: 1;
-                        padding: 2px 10px;
+                        min-height: 20px;
+                        span,a{
+                            line-height: 1;
+                            padding: 2px 10px;
+                        }
                     }
                 }
             }
         }
-    }
-    .map-color-selection{
-        margin-top: 20px;
-        label{
-            margin-left: 15px;
-            font-size: 16px;
+        .map-color-selection{
+            margin-top: 20px;
+            label{
+                margin-left: 15px;
+                font-size: 16px;
+            }
         }
     }
-}
-#list-header{
-    padding: 5px;
-    background-color: #003366;
-    color: white;
-    .area-header{
-        color: inherit;
+    #list-header{
+        padding: 5px;
+        background-color: #003366;
+        color: white;
+        .area-header{
+            color: inherit;
+        }
     }
-}
-#area-list{
-    .record-container{
-        margin-bottom: 2px;
-        .area-record{
-            padding: 5px;
-            background-color: white;
-            &:hover{
-                cursor: pointer;
-            }
-            .area-record-delete{
-                position: relative;
-                right: 15px;
+    #area-list{
+        .record-container{
+            margin-bottom: 2px;
+            .area-record{
+                padding: 5px;
+                background-color: white;
                 &:hover{
                     cursor: pointer;
                 }
+                .area-record-delete{
+                    position: relative;
+                    right: 15px;
+                    &:hover{
+                        cursor: pointer;
+                    }
+                }
             }
         }
     }
 }
+#area-update{
+    margin-top: 10px;
+    float: right;
+}
 .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 87786b8..3556dbc 100644
--- a/views/admin/settings/mapSettings.html
+++ b/views/admin/settings/mapSettings.html
@@ -1,45 +1,57 @@
-<button id="area-update" class="btn" data-option="add">Add Area</button>
-<div id="new-area-section">
-    <div class="row">
-        <div class="s12 l4 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="">
-                    <label for="area-name">Area Name</label>
-                    <span data-error="required">Required</span>
+<div id="map-area-container">
+    <h5>Map Areas</h5>
+    <div id="new-area-section">
+        <div class="row">
+            <div class="s12 l8 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="">
+                        <label for="area-name">Area Name</label>
+                        <span data-error="required">Required</span>
+                        
+                    </div>
+                </div>
+                
+                <div class="row input-container">
+                    <div class="input-field col s12 l6 map-page-selection">
+                        <select>
+                            <option class="select-placeholder" value="">Select a page</option>
+                            {foreach $pages as $id=>$name}
+                                <option class="map-page-option" value="{$id}">{$name}</option>
+                            {/foreach}
+                        </select>
+                        
+                    </div>
                     
                 </div>
-            </div>
-            
-            <div class="row input-container">
-                <div class="input-field col s12 l6 map-page-selection">
-                    <select>
-                        <option class="select-placeholder" value="">Select a page</option>
-                        {foreach $pages as $id=>$name}
-                            <option class="map-page-option" value="{$id}">{$name}</option>
-                        {/foreach}
-                    </select>
+               
+                <div class="row input-container">
+                    <div class="input-field col s12 l6 map-color-selection">
+                        <div id="map-hover-color">
+                            <input type="color" name="hover_color" id="map-color" value="#003366">
+                            <label for="map-color">Map Hover Color</label>
+                        </div>
+                    </div>
                 </div>
             </div>
-        </div>
-        <div class="s12 l8 col">
-            <div class="row input-container">
-                <div class="col s12 m6 l5 map-color-selection">
-                    <input type="color" name="hover_color" id="map-color" value="#003366">
-                    <label for="map-color">Map Hover Color</label>
+            <div class="s12 l4 col">
+                <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>
                 </div>
             </div>
         </div>
     </div>
-</div>
-<div id="list-header" style="display: flex;">
-        <div class="aread-header" id="area-name-header" style="flex: 1; font-weight: bold;">Area Name</div>
-        <div class="aread-header" id="area-page-header" style="flex: 1; font-weight: bold;">Attached Page</div>
-        <div class="aread-header" id="area-color-header" style="flex: 1; font-weight: bold;">Hover Color</div>
-        <div class="aread-header" id="area-delete-header" style="flex: 0; font-weight: bold;"></div>
- </div>
-<div id="area-list"></div>
-
+    <div id="list-header" style="display: flex;">
+            <div class="aread-header" id="area-name-header" style="flex: 1; font-weight: bold;">Area Name</div>
+            <div class="aread-header" id="area-page-header" style="flex: 1; font-weight: bold;">Attached Page</div>
+            <div class="aread-header" id="area-color-header" style="flex: 1; font-weight: bold;">Hover Color</div>
+            <div class="aread-header" id="area-delete-header" style="flex: 0; font-weight: bold;"></div>
+    </div>
+    <div id="area-list"></div>
+</div>  
 <script type="text/javascript">
     jQuery(function($){
         var pages = {$pages|json_encode};
diff --git a/views/front/map/display.html b/views/front/map/display.html
index 023c887..7cef206 100644
--- a/views/front/map/display.html
+++ b/views/front/map/display.html
@@ -32,8 +32,10 @@
             *    for Longitude to move link to the left.
             * "url" is added to the baseCountyUrl to generate the link address for a county
             */
+           var areas = {$areas|json_encode};
+           console.log(areas);
             var upperMI = {
-                'Alger':       {literal}  {latOffset: -0.10,   lonOffset: -0.40,   url: 'county=Alger'},{/literal}
+                'Alger':         {literal}  {latOffset: -0.10,   lonOffset: -0.40,   url: 'county=Alger'},{/literal}
                 'Baraga':        {literal}  {latOffset: -0.10,   lonOffset: -0.10,   url: 'county=Baraga'},{/literal}
                 'Chippewa':      {literal}  {latOffset: -0.02,   lonOffset: -0.50,   url: 'county=Cheppewa'},{/literal}
                 'Delta':         {literal}  {latOffset:  0.20,   lonOffset:  0.00,   url: 'county=Delta'},{/literal}
@@ -49,7 +51,7 @@
                 'Ontonagon':     {literal}  {latOffset:  0.00,   lonOffset: -0.15,   url: 'county=Ontonagon'},{/literal}
                 'Schoolcraft':   {literal}  {latOffset:  0.00,   lonOffset:  0.00,   url: 'county=Schoolcraft'}{/literal}
             }; 
-            console.log(upperMI)
+     
             // Base URL for building links to county pages
             var baseCountyUrl = 'Highlight_Michigan_Counties.php?';
 
@@ -105,7 +107,7 @@
             // For each UP county
             var countyLayer;
             $.each(upperMI, function(county, countyData) {
-                console.log(countiesDirectory)
+
                 // Get the GeoJson file for this county
                 $.get(countiesDirectory + county + '.GeoJson', function(countyFile) {