Initialize settings page

Author: Emmanouil Konstantinidis

src/js/app.js

@@ -6,6 +6,7 @@ var Navigation = require('./components/navigation');
 var Footer = require('./components/footer');
 var LoginPage = require('./components/login');
 var NotificationsPage = require('./components/notifications');
+var SettingsPage = require('./components/settings');
 
 var Route = Router.Route;
 var NotFoundRoute = Router.NotFoundRoute;
@@ -42,8 +43,9 @@ var NotFound = React.createClass({
 var routes = (
   <Route handler={App} path="/">
     <DefaultRoute handler={NotificationsPage} />
-    <Route name="notifications" handler={NotificationsPage}/>
     <Route name="login" handler={LoginPage}/>
+    <Route name="notifications" handler={NotificationsPage}/>
+    <Route name="settings" handler={SettingsPage}/>
     <NotFoundRoute handler={NotFound}/>
   </Route>
 );

src/js/components/navigation.js

@@ -42,6 +42,10 @@ var Navigation = React.createClass({
     this.setState( {loading: false } );
   },
 
+  goToSettings: function () {
+    this.context.router.transitionTo('settings');
+  },
+
   logOut: function () {
     Actions.logout();
     this.context.router.transitionTo('login');
@@ -74,6 +78,7 @@ var Navigation = React.createClass({
           </div>
           <div className='col-xs-4 right'>
             {logoutIcon}
+            <i className='fa fa-cog' onClick={this.goToSettings} />
             <i className="fa fa-power-off" onClick={this.appQuit} />
           </div>
         </div>

src/js/components/settings.js

@@ -0,0 +1,29 @@
+var React = require('react');
+var Reflux = require('reflux');
+
+var SettingsStore = require('../stores/settings');
+
+var SettingsPage = React.createClass({
+  mixins: [
+    Reflux.connect(SettingsStore, 'settings'),
+  ],
+
+  getInitialState: function() {
+    return {
+      settings: undefined
+    };
+  },
+
+  render: function () {
+    return (
+      <div className="container-fluid main-container settings">
+        <div className='row'>
+          <div className='col-xs-8'>Setting Title</div>
+          <div className='col-xs-4'>Value</div>
+        </div>
+      </div>
+    );
+  }
+});
+
+module.exports = SettingsPage;

src/js/stores/settings.js

@@ -0,0 +1,27 @@
+var Reflux = require('reflux');
+var Actions = require('../actions/actions');
+
+var SettingsStore = Reflux.createStore({
+  listenables: Actions,
+
+  init: function () {
+    var settings = window.localStorage.getItem('settings') || {
+      participating: false
+    };
+    var participatingSetting = settings.participating || false;
+    this._settings = {
+      participating: participatingSetting
+    };
+  },
+
+  onGetSettings: function () {
+    return this._settings;
+  },
+
+  onSetSettings: function (setting, value) {
+    console.log('Setting: ' + setting + ' to: ' + value);
+  }
+
+});
+
+module.exports = SettingsStore;

src/less/style.less

@@ -226,6 +226,16 @@ html, body {
 /* @end Navbar */
 
 
+/* @group Settings */
+
+.settings {
+  background-color: @ThemeBlack;
+  color: @White;
+}
+
+/* @end Settings */
+
+
 /* @group Component / Login  */
 
 .login {