diff options
Diffstat (limited to 'ui/imports/ui/components/user-settings')
3 files changed, 203 insertions, 0 deletions
diff --git a/ui/imports/ui/components/user-settings/user-settings.html b/ui/imports/ui/components/user-settings/user-settings.html new file mode 100644 index 0000000..a157d52 --- /dev/null +++ b/ui/imports/ui/components/user-settings/user-settings.html @@ -0,0 +1,35 @@ +<template name="UserSettings"> +<div class="os-user-settings cards white"> + <h3>UserSettings</h3> + <form> + <div class="cl-field-group"> + <label class="cl-field-label">Message view backward delta</label> + <div class="input-box"> + <input name="msgsViewBackDelta" + value="{{ getModelField 'messages_view_backward_delta' }}" + class="sm-msgs-view-back-delta cl-input" + type="number" + placeholder="" /> + <div class="input-hint"> + {{ durationAsText (getModelField 'messages_view_backward_delta') }} + </div> + </div> + <div class="cl-field-desc">Change the start duration of message display (miliseconds)</div> + </div> + <button type="button" + class="js-submit-button mdl-button mdl-js-button mdl-button--raised + mdl-js-ripple-effect mdl-button--colored" + >Save</button> + </form> + + {{#if (getState 'message') }} + <div class="js-message-panel alert + {{#if isActionError}}alert-danger{{/if}} + {{#if isActionSuccess}}alert-success{{/if}}" + role="alert"> + {{ getState 'message' }} + </div> + {{/if }} + +</div> +</template> diff --git a/ui/imports/ui/components/user-settings/user-settings.js b/ui/imports/ui/components/user-settings/user-settings.js new file mode 100644 index 0000000..953a6fb --- /dev/null +++ b/ui/imports/ui/components/user-settings/user-settings.js @@ -0,0 +1,123 @@ +/* + * Template Component: UserSettings + */ + +//import { Meteor } from 'meteor/meteor'; +import { Template } from 'meteor/templating'; +import { ReactiveDict } from 'meteor/reactive-dict'; +//import { SimpleSchema } from 'meteor/aldeed:simple-schema'; +import * as R from 'ramda'; + +import { save } from '/imports/api/user-settings/methods'; +import { UserSettings } from '/imports/api/user-settings/user-settings'; + +import './user-settings.html'; + +/* + * Lifecycles + */ + +Template.UserSettings.onCreated(function() { + let instance = this; + instance.state = new ReactiveDict(); + instance.state.setDefault({ + model: UserSettings.schema.clean({}), + actionResult: 'none', + message: null, + }); + + /* + instance.autorun(function () { + let data = Template.currentData(); + + new SimpleSchema({ + }).validate(data); + }); + */ + + instance.autorun(function () { + instance.subscribe('user_settings?user'); + UserSettings.find({user_id: Meteor.userId()}).forEach((userSettings) => { + instance.state.set('model', userSettings); + }); + }); +}); + +/* +Template.UserSettings.rendered = function() { +}; +*/ + +/* + * Events + */ + +Template.UserSettings.events({ + 'click .js-submit-button': function (event, instance) { + event.preventDefault(); + let msgsViewBackDelta = Number.parseInt(instance.$('.sm-msgs-view-back-delta')[0].value); + saveForm(instance, msgsViewBackDelta); + }, + + 'input .sm-msgs-view-back-delta': function (_e, instance) { + let msgsViewBackDelta = Number.parseInt(instance.$('.sm-msgs-view-back-delta')[0].value); + let model = instance.state.get('model'); + model = R.assoc('messages_view_backward_delta', msgsViewBackDelta, model); + instance.state.set('model', model); + }, +}); + +/* + * Helpers + */ + +Template.UserSettings.helpers({ + getModelField: function (fieldName) { + let instance = Template.instance(); + return R.path([fieldName], instance.state.get('model')); + }, + + getState: function (key) { + let instance = Template.instance(); + return instance.state.get(key); + }, + + isActionError: function () { + let instance = Template.instance(); + return instance.state.get('actionResult') === 'error'; + }, + + isActionSuccess: function () { + let instance = Template.instance(); + return instance.state.get('actionResult') === 'success'; + }, + + durationAsText: function (delta) { + let duration = moment.duration(delta); + let text = `${duration.years()} years, ${duration.months()} months, ${duration.days()} days, ${duration.hours()} hours and ${duration.minutes()} minutes from current time.`; + return text; + }, +}); // end: helpers + +function saveForm(instance, msgsViewBackDelta) { + instance.state.set('actionResult', 'none'); + instance.state.set('message', null); + + save.call({ + messages_view_backward_delta: msgsViewBackDelta + }, (error) => { + if (error) { + instance.state.set('actionResult', 'error'); + if (typeof error === 'string') { + instance.state.set('message', error); + } else { + instance.state.set('message', error.message); + } + + return; + } + + instance.state.set('actionResult', 'success'); + instance.state.set('message', 'record has been updated succesfuly'); + }); +} diff --git a/ui/imports/ui/components/user-settings/user-settings.styl b/ui/imports/ui/components/user-settings/user-settings.styl new file mode 100644 index 0000000..edf5e5c --- /dev/null +++ b/ui/imports/ui/components/user-settings/user-settings.styl @@ -0,0 +1,45 @@ +.os-user-settings + display: flex; + flex-flow: column nowrap; + margin: 20px; + + .cl-field-group + display: flex; + flex-flow: row nowrap; + align-items: center; + padding: 5px 0; + + .cl-field-label + width: 120px; + margin: 0 5px; + + .input-box + display: block; + width: 400px; + margin: 0 5px; + + .cl-input + display: block; + width: 100%; + min-height: 34px; + padding: 6px 12px; + font-size: 14px; + line-height: 1.42857143; + color: #555; + background-color: #fff; + background-image: none; + border: 1px solid #ccc; + border-radius: 4px; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); + width: 400px; + + .input-hint + position: absolute; + margin: 5px 0; + + + .cl-field-desc + margin: 0 5px; + + .js-message-panel + margin-top: 20px; |