merging searches

Author: Iain J McCallum

_write-your-code-in-here/components/_footer/_footer.html

@@ -1,6 +1,12 @@
 <footer class="footer">
-    <div>Footer!</div>
+    <div class="footer__left">
 
-    {{> _api/_api }}
+        <small>*Not an official City of Philadelphia app.</small>
+        
+    </div>
+    <div class="footer__right">
 
+        {{> _api/_api }}
+
+    </div>
 </footer>

_write-your-code-in-here/components/_footer/_footer.scss

@@ -6,6 +6,15 @@
     background-color: $hacka_blue;
     color: white;
 
+	&__left {
+		margin-right: rem($pad);
+	}
+
+	&__right {
+		margin-left: rem($pad);
+		text-align: right;
+	}
+
     @include breakpoint(medium){
 		flex-direction: row;
 		align-items: center;

_write-your-code-in-here/components/_header/_header.html

@@ -24,8 +24,8 @@ <h1 class="header__title">
                 </a>
             </div>
 
-            <form class="main-nav__search" action="/philly311/find-request-by-id" method="GET">
-                <input type="text" name="id" class="main-nav__search-input" placeholder="Request ID / ZIP">
+            <form class="main-nav__search" action="/philly311/search" method="GET" class="js-header-search">
+                <input type="text" name="search" class="main-nav__search-input" placeholder="Request ID / ZIP">
                 <label class="main-nav__search-submit">
                     {{> _svg/search }}
                     <input type="submit" value="Search">

_write-your-code-in-here/components/_header/_header.js

@@ -1,7 +1,7 @@
 "use strict";
 
 /* The header JS
- * 
+ * Toggles the mobile nav
  */
 
 module.exports = {
@@ -12,4 +12,34 @@ module.exports = {
             });
         });
     }
-}
+}
+
+// module.exports = {
+// 	init(){
+// 		console.log("initting search from");
+// 		//start listening!
+// 		$('.js-search-by-id-form').on('keypress', function(e){
+// 			if (e.keyCode == 13) {
+// 				var searchId = $(this).find('.js-search-by-id-input').val();
+// 				runSearch(searchId);
+// 			}
+// 		});
+
+// 		$('.js-search-by-id-button').on('click', function(e){
+// 			var searchId = $(this).closest('.js-search-by-id-form').find('.js-search-by-id-input').val();
+// 			runSearch(searchId);
+// 		});
+
+
+// 		$('.js-expand-adv-search').on('click', function(e){
+// 			$(this).closest('.js-search-by-id-form').find('.js-search-advanced-section').slideToggle();
+// 		});
+// 	}
+// }
+
+// function runSearch(searchId){
+// 	api.getIssueById(searchId).then(function(data){
+// 		var res = data;
+// 		eventManager.fire('get_issue_by_id_returned', { owner: 'searchform', data: res });
+// 	});
+// }

_write-your-code-in-here/components/_search-by-id/_search-by-id.html

@@ -1,15 +1,16 @@
 
 
-<form class="search-by-filters js-search-by-filters__form" action="/philly311/find-requests-by-address" method="GET">
+<form class="search-form js-search-form__form" action="/philly311/find-requests-by-address" method="GET">
 
-    <label class="search-by-filters__label">
-        <input type="text" placeholder="zip" name="zip" class="search-by-filters__input js-search-by-filters__zip">
+    <label class="search-form__label">
+        <div class="label-text">Search within a ZIP code:</div> 
+        <input type="text" placeholder="zip" name="zip" class="search-form__input js-search-form__zip">
     </label>
 
-    <label class="search-by-filters__label">
+    <label class="search-form__label">
         <div class="label-text">What type of service request was it?</div> 
         <!-- request ids: https://gist.github.com/mheadd/7171ea534e3e3afe8037f639b630c3d5 -->
-        <select type="text" class="search-by-filters__input js-search-by-filters__service-type" name="service-type">
+        <select type="text" class="search-form__input js-search-form__service-type" name="service-type">
             <option selected value> -- select an option -- </option>
             <option value="SR-LI21">Maintenance Residential</option>
             <option value="SR-ST03">Rubbish/Recyclable Material Collection</option>
@@ -65,14 +66,14 @@
     </label>
 
     <!-- http://dev.office.com/fabric#/components/datepicker -->
-    <label class="search-by-filters__label">
+    <label class="search-form__label">
         <div class="label-text">When did you make the request?</div> 
-        <input type="date" class="search-by-filters__input js-search-by-filters__date-of-request" name="date-of-request">
+        <input type="date" class="search-form__input js-search-form__date-of-request" name="date-of-request">
     </label>
 
-    <label class="search-by-filters__label">
+    <label class="search-form__label">
         <div class="label-text">Agency</div> 
-        <select type="text" class="search-by-filters__input js-search-by-filters__agency-responsible" name="agency-responsible">
+        <select type="text" class="search-form__input js-search-form__agency-responsible" name="agency-responsible">
             <option selected value> -- select an option -- </option>
             <option value="Streets Department">Streets Department</option>
             <option value="Community Life Improvement Program">Community Life Improvement Program</option>
@@ -128,10 +129,21 @@
     </label>
 
 
-    <input type="submit" value="Search" class="search-by-filters__submit js-search-by-filters__submit" />
+    <input type="submit" value="Search" class="search-form__submit js-search-form__submit" />
 
 </form>
 
+<div class="search-form__or"><span class="search-form__or-text">Or</span></div>
+
+<form class="search-form js-search-form__form" action="/philly311/find-requests-by-address" method="GET">
+    <label class="search-form__label">
+        <div class="label-text">Search a specific request ID:</div> 
+        <input type="text" placeholder="Request ID" name="id" class="search-form__input js-search-form__id">
+    </label>
+
+    <input type="submit" value="Search" class="search-form__submit js-search-form__submit" />
+</form>
+
 <script>
-    threeOneOne.searchByFilters.init();
+    threeOneOne.searchForm.init();
 </script>

_write-your-code-in-here/components/_search-by-id/_search-by-id.js

@@ -4,30 +4,30 @@ module.exports = {
 	init(){
 
 		console.log("Initting search by filters");
-		$('.js-search-by-filters__form').on('submit', function(e){
+		$('.js-search-form__form').on('submit', function(e){
 			e.preventDefault();
 
-			var $advForm = $(this).closest('.js-search-by-filters__form');
+			var $advForm = $(this).closest('.js-search-form__form');
 			var queryStringsArray = [];
 
 			//get zip
-			var zipCode = $advForm.find('.js-search-by-filters__zip').val();
+			var zipCode = $advForm.find('.js-search-form__zip').val();
 			var zipQuery = '';
 			if (zipCode.length > 0) {
 				zipQuery = "zip='" + zipCode + "'";
 				queryStringsArray.push(zipQuery);
 			}
 
 			//get req number
-			var serviceNo = $advForm.find('.js-search-by-filters__service-type').val();
+			var serviceNo = $advForm.find('.js-search-form__service-type').val();
 			var serviceQuery = '';
 			if (serviceNo.length > 0) {
 				serviceQuery = "service_code='" + serviceNo + "'";
 				queryStringsArray.push(serviceQuery);
 			}
 
 			//requested_datetime
-			var dateInput = $advForm.find('.js-search-by-filters__date-of-request').val();
+			var dateInput = $advForm.find('.js-search-form__date-of-request').val();
 			var dateQuery = '';
 			if (dateInput.length > 0){
 				var fromDate = new Date(dateInput);
@@ -40,7 +40,7 @@ module.exports = {
 				queryStringsArray.push(dateQuery);
 			}
 
-			var agencyInput = $advForm.find('.js-search-by-filters__agency-responsible').val();
+			var agencyInput = $advForm.find('.js-search-form__agency-responsible').val();
 			var agencyQuery = '';
 			if (agencyInput.length > 0){
 				agencyQuery = "agency_responsible='" + agencyInput + "'";

_write-your-code-in-here/components/_search-by-id/_search-by-id.scss

@@ -0,0 +1,39 @@
+.search-form {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: flex-start;
+	width: 100%;
+	max-width: 400px;
+
+	&__label {
+		width: 100%;
+	}
+		&__label-text {
+			
+		}
+		&__input {
+			display: block;
+			width: 100%;
+		}
+
+	&__submit {
+		display: block;
+		margin-left: auto;
+		align-self: flex-end;
+	}
+
+	//the ro divider between the 2 forms =============== WARNING! MAGIC NUMBER!
+	&__or {
+		text-align: center;
+		margin: rem($pad * 2) 0 rem(($pad * 2) + 23);
+		border-bottom: 1px dashed rgba($rule-color, 0.5);
+		height: 23px;
+
+		&-text { //span
+			display: inline-block;
+			padding: rem($pad);
+			background-color:$background-color-dark;
+		}
+	}
+}

_write-your-code-in-here/components/search-by-filters/_search-by-filters.scss

@@ -23,10 +23,9 @@ window.$ = require('jquery');
 window.threeOneOne = {}; //container for all the 311 app modules
 
 // =============== component scripts (todo: figure out how to not buundle these in the big bundle)
-require('./components/_search-by-id/_search-by-id.js').init();
 require('./components/_header/_header.js').init();
 
-window.threeOneOne.searchByFilters = require('./components/search-by-filters/_search-by-filters.js');
+window.threeOneOne.searchForm = require('./components/search-form/_search-form.js');
 window.threeOneOne.map = require('./components/map/_map.js');
 window.threeOneOne.burndown = require('./components/burn-down/_burn-down.js');
 window.threeOneOne.totalRequestsByDept = require('./components/total-requests-by-dept/_total-requests-by-dept.js');