Fixed styles & added mobile friendly selector for categories

focallocal · Jun 23, 2017 · be55499 · be55499
1 parent 813dc0e
commit be55499
Show file tree

Hide file tree

Showing 9 changed files with 137 additions and 31 deletions.
diff --git a/both/collections/events.js b/both/collections/events.js
@@ -211,13 +211,9 @@ Events.attachSchema(new SimpleSchema({
         type: String,
         //optional: true,
         autoform: {
-            options: function() {
-                return Categories.find().map(function(cat) {
-                    return {label: cat.name, value: cat._id};
-                });
-            },
             label: false,
-            firstOption: 'Choose Category'
+            hidden: true,
+            class: "category-select-id"
         }
     },
     'category.name': {

diff --git a/client/stylesheets/optionSelect/optionSelect.scss b/client/stylesheets/optionSelect/optionSelect.scss
@@ -11,16 +11,23 @@
 
 .option-select-inner {
 	margin: 0 auto;
-	width: 50%;
+	width: 90%;
 	padding: 10px;
 }
 
 .option-select-list {
-	height: 40vh;
-	overflow: scroll;
+	height: 200px;
+	overflow-y: scroll;
+	overflow-x: hidden;
+	font-size: 20px;
 }
 
 #option-select-close {
 	margin: 0 auto;
 	display: block;
+	font-size: 30px;
+
+	&:hover {
+		background-color: white;
+	}
 }
diff --git a/client/templates/eventsForm/edit/editEvent.html b/client/templates/eventsForm/edit/editEvent.html
@@ -5,6 +5,10 @@ <h5>{{_ "editEvent.title"}}</h5>
 			{{#autoForm collection="Events" doc=selectedEventDoc id="events-form" omitFields='links' type="update"}}
 				{{> afQuickField name="organiser._id"}}
 				{{> afQuickField name="organiser.name"}}
+				<div class="input-field col s12">
+					<label for="category-select">Category</label>
+					<input type="text" readonly="true" id="category-select-input-edit" name="category-select">
+				</div>
 				{{> afQuickField name="category"}}
 				{{> afQuickField name="name"}}
 				{{> afQuickField name="address"}}
@@ -32,6 +36,9 @@ <h5>{{_ "editEvent.title"}}</h5>
 			<div class="option-select" id="time-select-edit">
 				{{> optionSelect}}
 			</div>
+			<div class="option-select" id="category-select-edit">
+				{{> optionSelect}}
+			</div>
 		{{/if}}
 	</div>
 </template>
diff --git a/client/templates/eventsForm/edit/editEvent.js b/client/templates/eventsForm/edit/editEvent.js
@@ -17,7 +17,13 @@ AutoForm.hooks({
 
 Template.editEvent.onCreated(function() {
 	create.call(this);
+	this.categories = new ReactiveVar([]);
 	instance = this;
+
+	Tracker.autorun(function() {
+		instance.categories.set(Categories.find({}).fetch());
+	});
+
 });
 
 Template.editEvent.helpers({
@@ -87,6 +93,47 @@ Template.autoForm.onRendered(function() {
 	});
 
 	onRendered.call(this);
+
+	// Enable Category Select
+	var $categoryInput = $("input#category-select-input-edit");
+	var $categoryId = $("#events-form .category-select-id");
+
+	$categoryInput.val(Categories.find({_id: $categoryId.val()}).fetch()[0].name);
+
+	var options = function() {
+		var categories = instance.categories.get();
+		for (category in categories) {
+			categories[category].option = categories[category].name;
+		}
+		return categories;
+	}();
+
+	// Initialize the mobile friendly selection UI
+	var categorySelection = new OptionSelect(function(selected) {
+		$categoryInput.val(selected.option);
+		$categoryId.val(selected._id);
+	}, '#category-select-edit', options);
+
+	// Activate time selection on click (OptionSelect)
+	$("input#category-select-input-edit").on('click', function(e) {
+		e.preventDefault();
+		categorySelection.open();
+		$("#events-form-new").scrollTop(0);
+		return false;
+	});
+
+	$("input#category-select-input-edit").on('keydown', function(e) {
+		e.preventDefault();
+		return false;
+	});
+
+	$("input#category-select-input-edit").on("change", function(e) {
+		var $this = $(this);
+		if (options.indexOf($this.val()) === -1) {
+			$this.val('Choose a Category!');
+		}
+	});
+
 });
 
 Template.editEvent.onDestroyed(function () {

diff --git a/client/templates/eventsForm/lifetime/lifetime.html b/client/templates/eventsForm/lifetime/lifetime.html
@@ -3,8 +3,8 @@
 	{{> afQuickField name="week_enable"}}
 	{{> afQuickField name="dateEvent"}}
 	<div class="one-time-event">
-		{{> afQuickField name="time"}}
-		{{> afQuickField name="time_end"}}
+		{{> afQuickField name="time" readonly="true"}}
+		{{> afQuickField name="time_end" readonly="true"}}
 	</div>
 	<div class="week-event">
 		<div class="row flush-bottom">
@@ -15,56 +15,56 @@
 				<div class="col s6 day-inputs" value="Monday">
 					{{> afQuickField name="week.monday.enable"}}
 					<div class="day-times">
-						{{> afQuickField name="week.monday.time"}}
-						{{> afQuickField name="week.monday.time_end"}}
+						{{> afQuickField name="week.monday.time" readonly="true"}}
+						{{> afQuickField name="week.monday.time_end" readonly="true"}}
 					</div>
 				</div>
 				<div class="col s6 day-inputs" value="Tuesday">
 					{{> afQuickField name="week.tuesday.enable"}}
 					<div class="day-times">
-						{{> afQuickField name="week.tuesday.time"}}
-						{{> afQuickField name="week.tuesday.time_end"}}
+						{{> afQuickField name="week.tuesday.time" readonly="true"}}
+						{{> afQuickField name="week.tuesday.time_end" readonly="true"}}
 					</div>
 				</div>
 			</div>
 			<div class="row">
 				<div class="col s6 day-inputs" value="Wednesday">
 					{{> afQuickField name="week.wednesday.enable"}}
 					<div class="day-times">
-						{{> afQuickField name="week.wednesday.time"}}
-						{{> afQuickField name="week.wednesday.time_end"}}
+						{{> afQuickField name="week.wednesday.time" readonly="true"}}
+						{{> afQuickField name="week.wednesday.time_end" readonly="true"}}
 					</div>
 				</div>
 				<div class="col s6 day-inputs" value="Thursday">
 					{{> afQuickField name="week.thursday.enable"}}
 					<div class="day-times">
-						{{> afQuickField name="week.thursday.time"}}
-						{{> afQuickField name="week.thursday.time_end"}}
+						{{> afQuickField name="week.thursday.time" readonly="true"}}
+						{{> afQuickField name="week.thursday.time_end" readonly="true"}}
 					</div>
 				</div>
 			</div>
 			<div class="row">
 				<div class="col s6 day-inputs" value="Friday">
 					{{> afQuickField name="week.friday.enable"}}
 					<div class="day-times">
-						{{> afQuickField name="week.friday.time"}}
-						{{> afQuickField name="week.friday.time_end"}}
+						{{> afQuickField name="week.friday.time" readonly="true"}}
+						{{> afQuickField name="week.friday.time_end" readonly="true"}}
 					</div>
 				</div>
 				<div class="col s6 day-inputs" value="Saturday">
 					{{> afQuickField name="week.saturday.enable"}}
 					<div class="day-times">
-						{{> afQuickField name="week.saturday.time"}}
-						{{> afQuickField name="week.saturday.time_end"}}
+						{{> afQuickField name="week.saturday.time" readonly="true"}}
+						{{> afQuickField name="week.saturday.time_end" readonly="true"}}
 					</div>
 				</div>
 			</div>
 			<div class="row">
 				<div class="col s6 day-inputs" value="Sunday">
 					{{> afQuickField name="week.sunday.enable"}}
 					<div class="day-times">
-						{{> afQuickField name="week.sunday.time"}}
-						{{> afQuickField name="week.sunday.time_end"}}
+						{{> afQuickField name="week.sunday.time" readonly="true"}}
+						{{> afQuickField name="week.sunday.time_end" readonly="true"}}
 					</div>
 				</div>
 			</div>

diff --git a/client/templates/eventsForm/lifetime/lifetime.js b/client/templates/eventsForm/lifetime/lifetime.js
@@ -123,15 +123,15 @@ iniinitLifetime = function(parentForm, scrollTarget, timeSelectContainer) {
 		for (var hour = 8; hour < 24; ++hour) {
 			['00', '30'].forEach(function (minutes) {
 				var time = hour + ':' + minutes;
-				timeArr.push({time: time});
+				timeArr.push({option: time});
 			});
 		}
 		return timeArr;
 	}();
 
 	// Initialize the mobile friendly selection UI
 	var timesSelection = new OptionSelect(function(selected) {
-		$timeInput.val(selected.time);
+		$timeInput.val(selected.option);
 	}, timeSelectContainer, options);
 
 	// Activate time selection on click (OptionSelect)

diff --git a/client/templates/eventsForm/new/newEvent.html b/client/templates/eventsForm/new/newEvent.html
@@ -19,6 +19,10 @@ <h5>{{_ "newEvent.section_titles.0"}}</h5>
 								{{> afQuickField name="organiser._id"}}
 								{{> afQuickField name="organiser.name"}}
 								<div class="validate-field" id="category-container">
+									<div class="input-field col s12">
+										<label for="category-select">Category</label>
+										<input type="text" readonly="true" id="category-select-input" name="category-select">
+									</div>
 									{{> afQuickField name="category"}}
 								</div>
 								<!-- <a class="btn" href='{{_ "newEvent.links.0"}}'>{{_ "newEvent.btns.3"}}</a> -->
@@ -97,6 +101,9 @@ <h5>{{_ "newEvent.section_titles.6"}}</h5>
 				<div class="option-select" id="time-select">
 					{{> optionSelect}}
 				</div>
+				<div class="option-select" id="category-select">
+					{{> optionSelect}}
+				</div>
 			</div>
 		</div>
 </template>
diff --git a/client/templates/eventsForm/new/newEvent.js b/client/templates/eventsForm/new/newEvent.js
@@ -1,5 +1,6 @@
 var sequence = undefined;
 var defaultCategory = new ReactiveVar('');
+var instance = undefined;
 
 AutoForm.hooks({
 	 'events-form-new': {
@@ -34,8 +35,11 @@ Template.newEvent.viewmodel({
 
 Template.newEvent.onCreated(function() {
 	create.call(this);
+	this.categories = new ReactiveVar([]);
+	instance  = this;
 
 	Tracker.autorun(function() {
+		instance.categories.set(Categories.find({}).fetch());
 		var temp = Categories.find({default: true}).fetch()[0];
 		if (temp !== undefined) {
 			defaultCategory.set(temp.name);
@@ -63,8 +67,8 @@ Template.autoForm.onRendered(function () {
 	$("#new-resource").on('click', function() {
 		var category = Categories.find({name: defaultCategory.get()}).fetch()[0];
 		if (category !== undefined) {
-			var $categoryContainer = $("#category-container");
-			$categoryContainer.find("ul").find('li span:contains(' + category.name + ')').click();
+			$("#events-form-new .category-select-id").val(category._id);
+			$("input#category-select-input").val(category.name);
 		}
 		$("#next").click();
 	});
@@ -181,6 +185,44 @@ Template.autoForm.onRendered(function () {
 		}
 	});
 
+	// Enable Category Select
+	var $categoryInput = $("input#category-select-input");
+	var $categoryId = $("#events-form-new .category-select-id");
+
+	var options = function() {
+		var categories = instance.categories.get();
+		for (category in categories) {
+			categories[category].option = categories[category].name;
+		}
+		return categories;
+	}();
+
+	// Initialize the mobile friendly selection UI
+	var categorySelection = new OptionSelect(function(selected) {
+		$categoryInput.val(selected.option);
+		$categoryId.val(selected._id);
+	}, '#category-select', options);
+
+	// Activate time selection on click (OptionSelect)
+	$("input#category-select-input").on('click', function(e) {
+		e.preventDefault();
+		categorySelection.open();
+		$("#events-form-new").scrollTop(0);
+		return false;
+	});
+
+	$("input#category-select-input").on('keydown', function(e) {
+		e.preventDefault();
+		return false;
+	});
+
+	$("input#category-select-input").on("change", function(e) {
+		var $this = $(this);
+		if (options.indexOf($this.val()) === -1) {
+			$this.val('Choose a Category!');
+		}
+	});
+
 });
 
 Template.newEvent.onDestroyed(function () {

diff --git a/client/templates/eventsForm/optionSelect/optionSelect.html b/client/templates/eventsForm/optionSelect/optionSelect.html
@@ -1,9 +1,9 @@
 <template name="optionSelect">
 	<div class="row option-select-inner">
-		<h4 class="center-align">Select A Time</h4>
+		<h4 class="center-align">Select an Option</h4>
 		<ul class="option-select-list">
 			{{#each options}}
-				<li class="center-align"><a class="btn btn-flat color-white option-select__selection">{{time}}</a></li>
+				<li class="center-align"><a class="btn btn-flat color-white option-select__selection">{{option}}</a></li>
 			{{/each}}
 		</ul>
 	</div>