From 16900db30b2d44e2812c0fbc374296f64aeae720 Mon Sep 17 00:00:00 2001
From: Steve Sutton <steve@gaslightmedia.com>
Date: Wed, 17 Jul 2013 20:45:08 +0000
Subject: [PATCH] Redo search forms

main form now has the search button back
form on the member section now has the region select using jquery ajax
calls to update the counties select.
---
 .htaccess                                     |   2 +
 Toolkit/Members/Admin/EditCounty.php          |  18 +-
 Toolkit/Members/css/member.css                |   2 +-
 Toolkit/Members/formAjax.php                  |  35 +++
 Toolkit/Members/templates/userSearchForm.html | 213 ++++++++++--------
 libjs/pagefunctions.js                        |  18 +-
 templates/template.html                       |   1 +
 7 files changed, 173 insertions(+), 116 deletions(-)
 create mode 100644 Toolkit/Members/formAjax.php

diff --git a/.htaccess b/.htaccess
index 8fccc5c..38135d8 100644
--- a/.htaccess
+++ b/.htaccess
@@ -87,6 +87,8 @@ RewriteRule ^pending-member/([0-9]*)/$ admin/members.php?page=memberUpdates&modu
 # Profile pages
 RewriteRule ^member-profile/([0-9]*)/([0-9]*)/$ index.php?catid=$1&member_id=$2 [L]
 
+RewriteRule ajax/form.json Toolkit/Members/formAjax.php [QSA,L]
+
 # trip planner list (member sessions)
 RewriteRule ^trip-planner-list/([0-9]*)/([0-9]*)/ Toolkit/Members/TripPlanner/memberList.php?member_id=$1&catid=$2 [L]
 
diff --git a/Toolkit/Members/Admin/EditCounty.php b/Toolkit/Members/Admin/EditCounty.php
index 651f457..2478c14 100644
--- a/Toolkit/Members/Admin/EditCounty.php
+++ b/Toolkit/Members/Admin/EditCounty.php
@@ -162,15 +162,15 @@ class Toolkit_Members_Admin_EditCounty
             'name' => 'county_name',
             'display' => "{$singularType} Name"
         );
-//        if ($regionDirective->getContent()) {
-//			$e[] = array(
-//                'type' => 'select',
-//                'req' => false,
-//                'name' => 'region_id',
-//                'display' => 'Region',
-//                'opts' => $this->getRegions(),
-//            );
-//		}
+        if ($regionDirective->getContent()) {
+			$e[] = array(
+                'type'    => 'select',
+                'req'     => true,
+                'name'    => 'region_id',
+                'display' => 'Region',
+                'opts'    => $this->getRegions(),
+            );
+		}
 		$e[] = array(
             'type' => 'select',
             'req' => true,
diff --git a/Toolkit/Members/css/member.css b/Toolkit/Members/css/member.css
index 4f6e908..501b50b 100755
--- a/Toolkit/Members/css/member.css
+++ b/Toolkit/Members/css/member.css
@@ -2,7 +2,7 @@
 #category-search {
 	float: right;
 	padding: 0;
-	margin-top: 22px;
+	/*margin-top: 22px;*/
 }
 #category-search li {
 	list-style-image:none;
diff --git a/Toolkit/Members/formAjax.php b/Toolkit/Members/formAjax.php
new file mode 100644
index 0000000..e6d2e79
--- /dev/null
+++ b/Toolkit/Members/formAjax.php
@@ -0,0 +1,35 @@
+<?php
+require_once '../../setup.phtml';
+
+$activityId = filter_var($_REQUEST['activityId'], FILTER_VALIDATE_INT);
+$parkId     = filter_var($_REQUEST['parkId'], FILTER_VALIDATE_INT);
+$regionId   = filter_var($_REQUEST['regionId'], FILTER_VALIDATE_INT);
+$countyId   = filter_var($_REQUEST['countyId'], FILTER_VALIDATE_INT);
+try {
+    $dbh = Toolkit_Database::getInstance();
+
+    if ($activityId) {
+        $sql = "
+        SELECT ";
+    }
+    if ($regionId) {
+        $sql = "
+          SELECT *
+            FROM members.county
+           WHERE region_id = :region
+             AND region_id IN (
+                 SELECT region
+                   FROM members.member
+                  WHERE active = true
+                    AND region = :region
+                 )
+        ORDER BY county_name";
+        $stmt = $dbh->prepare($sql);
+        $stmt->bindParam(':region', $regionId, PDO::PARAM_INT);
+        $stmt->execute();
+        echo json_encode($stmt->fetchAll(PDO::FETCH_ASSOC));
+    }
+
+} catch(PDOException $e) {
+
+}
diff --git a/Toolkit/Members/templates/userSearchForm.html b/Toolkit/Members/templates/userSearchForm.html
index f33a81a..4e12f65 100644
--- a/Toolkit/Members/templates/userSearchForm.html
+++ b/Toolkit/Members/templates/userSearchForm.html
@@ -2,112 +2,110 @@
     .ui-accordion-content {height:260px;width: 100}
     #accordion, #category-search {width: 100%;}
     fieldset #glm-member-search label {width:25%;text-align: right;}
-    .fieldcontain {display:block;width:100%;clear:right; margin: 10px 0;padding: 5px;}
+    .fieldcontain {display:block;width:100%;clear:right; margin:2px 0;padding: 0;}
     .fieldcontain input[type=submit] {
         float: right;
     }
-    .glm-chbx-label {width:280px;text-align: left;float:left;display:inline;}
-    .glm-chbx {width:580px;text-align: left;display:block;clear:right;float:right;}
-    .fieldHdr {width: 120px;float: left;display: block;text-align: right;margin:0 15px;font-weight: bold;}
-    .fieldHdr2 {width: 100%;display: block;text-align: left;margin:0 15px;font-weight: bold;}
+    .glm-chbx-label {width:40%;text-align: left;display:block;float:left;text-wrap: none}
+    .glm-chbx {text-align: left;display:block;clear:right;}
+    .fieldHdr {display: block;text-align: left;margin:0 15px 0 0;font-weight: bold;}
+    .fieldHdr2 {width: 100%;display: block;text-align: center;margin:0 15px;font-weight: bold;}
+    #rightColSearch {
+        width: 70%;
+        float: right;
+        padding: 5px;
+    }
+    #leftColSearch {
+        width: 30%;
+        float: left;
+        padding: 5px;
+    }
+    #submitSearch {
+        width: 100%;
+        clear:both;
+    }
+    #trail-form select {
+        width: 100%;
+        height: 26px;
+        padding: 3px;
+        margin: 0;
+    }
+    #trail-form input[type="search"] {
+        width: 100%;
+        height: 26px;
+        padding: 3px;
+    }
 </style>
 <div
-    id="category-search"
-    class="category-search-accommodations">
+    id="category-search">
     <form
         flexy:ignore="yes"
         action="{formURL:h}"
         id="trail-form"
         method="post">
         <input type="hidden" name="search" value="1">
-        <div class="fieldcontain">
-            <label class="fieldHdr">Trail Name</label>
-            <input
-                type="search"
-                name="member_name"
-                placeholder="trail name"
-                value="{_REQUEST[member_name]}">
-        </div>
-        <div flexy:if="regions" class="fieldcontain">
-            <label class="fieldHdr">Regions</label>
-            <select name="regionId">
-                <option value="">-- Select --</option>
-                {foreach:regions,id,name}
-                <?php
-                echo '<option value="'.$id.'"
-                '.(($id == $_REQUEST['regionId'])?'selected':'')
-                .'>'.$name.'</option>';
-                ?>
-                {end:}
-            </select>
-        </div>
-        <div flexy:if="counties" class="fieldcontain">
-            <label class="fieldHdr">Counties</label>
-            <select name="countyId">
-                <option value="">-- Select --</option>
-                {foreach:counties,id,name}
-                <?php
-                echo '<option value="'.$id.'"
-                '.(($id == $_REQUEST['countyId'])?'selected':'')
-                .'>'.$name.'</option>';
-                ?>
-                {end:}
-            </select>
-        </div>
-        <div id="accordion">
-
-            <h3><a href="#">Activities</a></h3>
-            <div>
-                <div flexy:if="activities" class="fieldcontain">
-                    <div class="glm-chbx">
-                        {foreach:activities,id,name}
-                        <label for="chbx-{id:h}" class="glm-chbx-label">
-                            <?php
-                            echo '<input
-                            id="chbx-'.$id.'"
-                            type="checkbox"
-                            name="activity[]"
-                            value="'.$id.'"
-                            '.((isset($_REQUEST['activity'])
-                            && is_array($_REQUEST['activity'])
-                            && in_array($id, $_REQUEST['activity']))?'checked':'').'
-                            >';
-                            ?>
-                            {name}
-                        </label>
-                        {end:}
-                    </div>
-                </div>
+        <div id="leftColSearch">
+            <div class="fieldcontain">
+                <label class="fieldHdr">Trail Name</label>
+                <input
+                    type="search"
+                    name="member_name"
+                    value="{_REQUEST[member_name]}">
             </div>
-
-            <h3><a href="#">Parks</a></h3>
-            <div>
-                <div flexy:if="parks" class="fieldcontain">
-                    <div class="glm-chbx">
-                        {foreach:parks,id,name}
-                        <label for="chbx-{id:h}" class="glm-chbx-label">
-                            <?php
-                            echo '<input
-                            id="chbx-'.$id.'"
-                            type="checkbox"
-                            name="park[]"
-                            value="'.$id.'"
-                            '.((isset($_REQUEST['park'])
-                            && is_array($_REQUEST['park'])
-                            && in_array($id, $_REQUEST['park']))?'checked':'').'
-                            >';
-                            ?>
-                            {name}
-                        </label>
-                        {end:}
-                    </div>
-                </div>
+            <div flexy:if="counties" class="fieldcontain">
+                <select name="activityId" id="advSearchActivities">
+                    <option value="">Activities</option>
+                    {foreach:activities,id,name}
+                    <?php
+                    echo '<option value="'.$id.'"
+                    '.(($id == $_REQUEST['activityId'])?'selected':'')
+                    .'>'.$name.'</option>';
+                    ?>
+                    {end:}
+                </select>
+            </div>
+            <div flexy:if="counties" class="fieldcontain">
+                <select name="parkId" id="advSearchParks">
+                    <option value="">Parks</option>
+                    {foreach:parks,id,name}
+                    <?php
+                    echo '<option value="'.$id.'"
+                    '.(($id == $_REQUEST['parkId'])?'selected':'')
+                    .'>'.$name.'</option>';
+                    ?>
+                    {end:}
+                </select>
+            </div>
+            <div flexy:if="regions" class="fieldcontain">
+                <select name="regionId" id="advSearchRegions">
+                    <option value="">Regions</option>
+                    {foreach:regions,id,name}
+                    <?php
+                    echo '<option value="'.$id.'"
+                    '.(($id == $_REQUEST['regionId'])?'selected':'')
+                    .'>'.$name.'</option>';
+                    ?>
+                    {end:}
+                </select>
+            </div>
+            <div flexy:if="counties" class="fieldcontain">
+                <select name="countyId" id="advSearchCounties">
+                    <option value="">Counties</option>
+                    {foreach:counties,id,name}
+                    <?php
+                    echo '<option value="'.$id.'"
+                    '.(($id == $_REQUEST['countyId'])?'selected':'')
+                    .'>'.$name.'</option>';
+                    ?>
+                    {end:}
+                </select>
             </div>
 
-            <h3><a href="#">Amenities</a></h3>
+        </div>
+        <div id="rightColSearch">
             <div>
-
                 <div flexy:if="parks" class="fieldcontain">
+                    <label class="fieldHdr2">Amenities</label>
                     <div class="glm-chbx">
                         {foreach:amenities,name,id}
                         <label for="amchbx-{id:h}" class="glm-chbx-label">
@@ -129,7 +127,7 @@
                 </div>
             </div>
         </div>
-        <div class="fieldcontain">
+        <div id="submitSearch">
             <input
                 style="float:left;margin-bottom: 15px;"
                 type="submit"
@@ -140,11 +138,32 @@
 </div>
 <script>
     jQuery(document).ready(function() {
-        $("#trail-search-form").button();
-
-        $("#accordion").accordion();
-         <?php if ($_REQUEST['parkId']) {?>
-            $("#accordion").accordion('option', 'active', 1);
-        <?php }?>
+        $("#advSearchRegions").change(function(){
+            updateCountySelect();
+        });
+        if ($("#advSearchRegions").val()) {
+            updateCountySelect();
+        }
     });
+    function updateCountySelect() {
+        $.ajax({
+            dataType: 'json',
+            url: 'ajax/form.json',
+            data: {'regionId': $("#advSearchRegions").val()},
+            success: function(data) {
+                var currentVal = $("#advSearchCounties").val();
+                $("#advSearchCounties").html('<option value="">Counties</option>');
+                $.each(data, function(index, county) {
+                    var sel
+                        = (currentVal == county.county_id)
+                        ? ' selected'
+                        : '';
+                    $("#advSearchCounties").append('<option value="' + county.county_id
+                            + '" '+sel+'>'
+                            + county.county_name + '</option>');
+                    //console.log(county.county_id);
+                });
+            }
+        });
+    }
 </script>
\ No newline at end of file
diff --git a/libjs/pagefunctions.js b/libjs/pagefunctions.js
index 5df7f2d..7728538 100755
--- a/libjs/pagefunctions.js
+++ b/libjs/pagefunctions.js
@@ -1,14 +1,14 @@
 $(document).ready(function() {
     // setup the search form to submit onChange
-    $("#activity").change(function(){
-        $("#findTrail").submit();
-    });
-    $("#park").change(function(){
-        $("#findTrail").submit();
-    });
-    $("#county").change(function(){
-        $("#findTrail").submit();
-    });
+//    $("#activity").change(function(){
+//        $("#findTrail").submit();
+//    });
+//    $("#park").change(function(){
+//        $("#findTrail").submit();
+//    });
+//    $("#county").change(function(){
+//        $("#findTrail").submit();
+//    });
 
 	currentNav();
 
diff --git a/templates/template.html b/templates/template.html
index 2531641..eacedc8 100755
--- a/templates/template.html
+++ b/templates/template.html
@@ -105,6 +105,7 @@
                                 '.$label.'</option>';
                             }?>
 						</select>
+                        <input type="submit" name="submit" value="submit">
 					</form>
 				</div><!--/#findatrail-->
 				<div id="action">
-- 
2.17.1