add speaker form and table views

src/main/resources/static/css/conflab.css

@@ -85,7 +85,7 @@ body {
 }
 
 .speaker h3 {
-
+    color: #286090;
 }
 
 .text {

src/main/resources/static/js/speakers/SpeakersController.js → src/main/resources/static/js/conference/ConferenceController.js

@@ -11,12 +11,12 @@ define([
             this.container = options.container;
         },
 
-        speakers: function () {
+        conference: function () {
             var self = this;
 
-            require(['speakers/SpeakersLayoutView'], function (SpeakersLayoutView) {
-                self.container.show(new SpeakersLayoutView());
-                Radio.channel('menu').request('activate', {path: 'speakers'});
+            require(['conference/ConferenceLayoutView'], function (ConferenceLayoutView) {
+                self.container.show(new ConferenceLayoutView());
+                Radio.channel('menu').request('activate', {path: 'conference'});
             });
 
         }

src/main/resources/static/js/speakers/SpeakersLayoutView.js → src/main/resources/static/js/conference/ConferenceLayoutView.js

@@ -1,6 +1,6 @@
 define([
     'backbone.marionette',
-    'text!speakers/SpeakersLayoutTemplate.html'
+    'text!conference/ConferenceLayoutTemplate.html'
 ], function (Marionette, template) {
 
     'use strict';

src/main/resources/static/js/conferences/ConferencesRouter.js → src/main/resources/static/js/conference/ConferenceRouter.js

@@ -1,21 +1,20 @@
 define([
     'backbone.marionette',
     'backbone.radio',
-    'conferences/ConferencesController'
-], function (Marionette, Radio, ConferencesController) {
+    'conference/ConferenceController'
+], function (Marionette, Radio, ConferenceController) {
 
     'use strict';
 
     return Marionette.AppRouter.extend({
         initialize: function (options) {
-            Radio.channel('menu').request('add', {name: 'Conferences', path: 'conferences'});
-            this.controller = new ConferencesController({container: options.container});
+            Radio.channel('menu').request('add', {name: 'Conferences', path: 'conference'});
+            this.controller = new ConferenceController({container: options.container});
         },
 
         appRoutes: {
-            'conferences': 'conferences'
+            'conference': 'conference'
         }
-
     });
 
 

src/main/resources/static/js/conferences/sb-admin-2.css → src/main/resources/static/js/conference/sb-admin-2.css

@@ -240,19 +240,19 @@ table.dataTable thead .sorting_desc_disabled {
 table.dataTable thead .sorting_asc:after {
     content: "\f0de";
     float: right;
-    font-family: fontawesome;
+    font-family: fontawesome, serif;
 }
 
 table.dataTable thead .sorting_desc:after {
     content: "\f0dd";
     float: right;
-    font-family: fontawesome;
+    font-family: fontawesome, serif;
 }
 
 table.dataTable thead .sorting:after {
     content: "\f0dc";
     float: right;
-    font-family: fontawesome;
+    font-family: fontawesome, serif;
     color: rgba(50,50,50,.5);
 }
 

src/main/resources/static/js/conflab.js

@@ -5,11 +5,11 @@ require([
     'menu/MenuService',
     'profile/ProfileRouter',
     'speaker/SpeakerRouter',
-    'conferences/ConferencesRouter',
+    'conference/ConferenceRouter',
     'auth/AuthRouter',
     'auth/session/SessionService',
     'backbone'
-], function (C2CApplication, HomepageRouter, HeaderService, MenuService, ProfileRouter, SpeakersRouter, ConferencesRouter,
+], function (C2CApplication, HomepageRouter, HeaderService, MenuService, ProfileRouter, SpeakersRouter, ConferenceRouter,
              AuthRouter, SessionService) {
 
     'use strict';
@@ -37,7 +37,7 @@ require([
             container: app.layout.getRegion('main')
         });
 
-        app.conferences = new ConferencesRouter({
+        app.conferences = new ConferenceRouter({
             container: app.layout.getRegion('main')
         });
 

src/main/resources/static/js/require.config.js

@@ -6,8 +6,7 @@ var require = {
         "menu"               : 'js/menu',
         "header"             : 'js/header',
         "speaker"            : 'js/speaker',
-        "conferences"        : 'js/conferences',
-        "speakers"           : 'js/speakers',
+        "conference"        : 'js/conference',
         "auth"               : 'js/auth',
         "text"               : 'lib/requirejs-text/text',
         "jquery"             : 'lib/jquery/jquery.min',

src/main/resources/static/js/speaker/SpeakerController.js

@@ -14,10 +14,30 @@ define([
         speaker: function () {
             var self = this;
 
-            require(['speaker/SpeakerPageView', 'speaker/SpeakerCollection'], function (SpeakerPageView, SpeakerCollection) {
-                var collection = new SpeakerCollection();
-                self.container.show(new SpeakerPageView({collection: collection}));
-                Radio.channel('menu').request('activate', {path: 'speaker'});
+            require([
+                        'speaker/Speaker',
+                        'speaker/SpeakerCollection',
+                        'speaker/SpeakerPageView',
+                        'speaker/SpeakerTableView',
+                        'speaker/SpeakerFormView'
+                    ],
+                    function (Speaker,
+                              SpeakerCollection,
+                              SpeakerPageView,
+                              SpeakerTableView,
+                              SpeakerFormView) {
+                        var pageView,
+                            collection;
+
+                        pageView   = new SpeakerPageView();
+
+                        collection = new SpeakerCollection();
+                        self.container.show(pageView);
+
+                        pageView.showChildView("table", new SpeakerTableView({collection: collection}));
+                        pageView.showChildView("form", new SpeakerFormView({model: new Speaker()}));
+
+                        Radio.channel('menu').request('activate', {path: 'speaker'});
             });
         }
     });

src/main/resources/static/js/speaker/SpeakerFormView.js

@@ -0,0 +1,21 @@
+define([
+           'text!speaker/SpeakerFormTemplate.html',
+           'backbone.marionette'
+       ], function (template) {
+
+    'use strict';
+
+    return Marionette.ItemView.extend({
+        template: _.template(template),
+        bindings: {
+            '#email'   : 'id',
+            '#name'    : 'name',
+            '#position': 'position',
+            '#about'   : 'about'
+        },
+
+        onRender: function () {
+            this.stickit();
+        }
+    });
+});

src/main/resources/static/js/speaker/SpeakerFormtemplate.html

@@ -0,0 +1,9 @@
+<div class="modal-body">
+    <label for="name">Full Name</label><input id="name" type="text" class="form-control" placeholder="Name" maxlength="255">
+    <label for="email">Email</label> <input id="email" type="email" class="form-control" placeholder="Email">
+    <label for="position">Position</label> <input id="position" type="text" class="form-control" placeholder="Position" maxlength="255">
+    <label for="about">About</label> <textarea class="form-control" rows="3" id="about" placeholder="Short story"></textarea>
+</div>
+<div class="modal-footer">
+    <button id="save-speaker-button" type="button" class="btn btn-success">Save</button>
+</div>

src/main/resources/static/js/speaker/SpeakerPageTemplate.html

@@ -0,0 +1,3 @@
+<div data-table-region></div>
+<button id="add-speaker-button" type="button" class="btn btn-primary btn-lg">Add speaker</button>
+<div data-form-region></div>

src/main/resources/static/js/speaker/SpeakerPageView.js

@@ -1,21 +1,15 @@
 define([
-   'speaker/SpeakerView',
-   'text!speaker/SpeakerLayoutTemplate.html',
+   'text!speaker/SpeakerPageTemplate.html',
    'backbone.marionette'
-], function (SpeakerView, template) {
+], function (template) {
 
     'use strict';
 
-    return Marionette.CollectionView.extend({
+    return Marionette.LayoutView.extend({
         template: _.template(template),
-
-        childView: SpeakerView,
-        childViewContainer: '[data-table-region]',
-
-        onBeforeRender: loadData
+        regions : {
+            table : '[data-table-region]',
+            form  : '[data-form-region]'
+        }
     });
-
-    function loadData() {
-        this.collection.fetch();
-    }
 });

src/main/resources/static/js/speaker/SpeakerRouter.js

@@ -8,7 +8,7 @@ define([
 
     return Marionette.AppRouter.extend({
         initialize: function (options) {
-            Radio.channel('menu').request('add', {name: 'Speaker', path: 'speaker'});
+            Radio.channel('menu').request('add', {name: 'Speakers', path: 'speaker'});
             this.controller = new SpeakerController({container: options.container});
         },
 

src/main/resources/static/js/speaker/SpeakerTableView.js

@@ -0,0 +1,17 @@
+define([
+   'speaker/SpeakerView',
+   'backbone.marionette'
+], function (SpeakerView) {
+
+    'use strict';
+
+    return Marionette.CollectionView.extend({
+        childView: SpeakerView,
+
+        onBeforeRender: loadData
+    });
+
+    function loadData() {
+        this.collection.fetch();
+    }
+});

src/main/resources/static/js/speaker/SpeakerTemplate.html

@@ -3,7 +3,6 @@ <h3 data-name></h3>
 
     <p>
         <span data-position></span>
-        <span data-email></span>
     </p>
 
     <p class="text" data-about></p>