Permalink
Browse files

Fixed styles & added mobile friendly selector for categories

  • Loading branch information...
ydaniel98 committed Jun 23, 2017
1 parent 813dc0e commit be55499ae9b9bb23df33901d5771a9ef7ca6f954
@@ -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': {
@@ -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;
}
}
@@ -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>
@@ -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 () {
@@ -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>
@@ -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)
@@ -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>
@@ -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 () {
@@ -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>

0 comments on commit be55499

Please sign in to comment.