initial work on actual app

bower.json

@@ -8,7 +8,9 @@
     "angular-resource": "~1.3.4",
     "angular-route": "~1.3.4",
     "bootstrap-sass-official": "~3.3.1",
-    "angular": "~1.3.4"
+    "angular": "~1.3.4",
+    "ng-tags-input": "~2.3.0",
+    "lodash": "~3.6.0"
   },
   "devDependencies": {
     "angular-mocks": "~1.3.4"

chronos.sublime-project

@@ -3,7 +3,7 @@
 	[
 		{
 			"path": ".",
-      "folder_exclude_patterns": ["node_modules", ".tmp", ".sass-cache", "bower_components", "dist"]
+      "folder_exclude_patterns": ["node_modules", ".tmp", ".sass-cache", "dist"]
 		}
 	]
 }

gulp/inject.js

@@ -28,7 +28,7 @@ module.exports = function(options) {
 
     var wiredepOptions = {
       directory: 'bower_components',
-      exclude: [/bootstrap\.css/]
+      exclude: [/bootstrap\.css/, 'ng-tags-input.css', 'ng-tags-input.min.css']
     };
 
     return gulp.src(options.src + '/*.html')

src/app/general/general.controller.js

@@ -0,0 +1,23 @@
+'use strict';
+
+function GeneralCtrl(Parameters) {
+  var vm = this;
+  vm.days = angular.copy(Parameters.data.days);
+  vm.timePeriods = angular.copy(Parameters.data.timePeriods);
+
+  vm.updateParameters = function() {
+    console.log(Parameters.data);
+    Parameters.data.name = vm.name;
+    Parameters.data.days = _.map(vm.days, function(day) {
+      return day.text;
+    });
+    Parameters.data.timePeriods = _.map(vm.timePeriods, function(timePeriod) {
+      return timePeriod.text;
+    });
+  };
+}
+
+angular.module('chronos')
+  .controller('GeneralCtrl', GeneralCtrl);
+
+GeneralCtrl.$inject = ['Parameters'];

src/app/general/general.html

@@ -0,0 +1,34 @@
+<div class="row">
+  <div class="col-md-12">
+    <div class="page-header">
+      <h3>General Information</h3>
+    </div>
+    <form class="form-horizontal">
+      <div class="form-group">
+        <label for="inputName" class="col-sm-4 control-label">Name</label>
+        <div class="col-sm-8">
+          <input type="text" ng-model="general.name" class="form-control" id="inputName" placeholder="Name your timetable."required>
+        </div>
+      </div>
+      <div class="form-group">
+        <label for="inputDays" class="col-sm-4 control-label">Days</label>
+        <div class="col-sm-8">
+          <tags-input ng-model="general.days" replace-spaces-with-dashes="false" placeholder="Enter days."></tags-input>
+          <span id="helpDays" class="help-block">Press <kbd>Enter</kbd> after each item.</span>
+        </div>
+      </div>
+      <div class="form-group">
+        <label for="inputTimePeriods" class="col-sm-4 control-label">Time Periods</label>
+        <div class="col-sm-8">
+          <tags-input ng-model="general.timePeriods" replace-spaces-with-dashes="false" placeholder="Enter time periods."></tags-input>
+          <span id="helpTimePeriods" class="help-block">Press <kbd>Enter</kbd> after each item.</span>
+        </div>
+      </div>
+      <div class="form-group">
+        <div class="col-sm-12 text-right">
+          <button type="submit" class="btn btn-primary" ng-click="general.updateParameters()">Next</button>
+        </div>
+      </div>
+    </form>
+  </div>
+</div>

src/app/general/general.spec.js

@@ -0,0 +1,11 @@
+'use strict';
+
+describe('controllers', function(){
+  var scope;
+
+  beforeEach(module('chronos'));
+
+  beforeEach(inject(function($rootScope) {
+    scope = $rootScope.$new();
+  }));
+});

src/app/index.js

@@ -1,13 +1,18 @@
 'use strict';
 
-angular.module('chronos', ['ngAnimate', 'ngSanitize', 'ngResource', 'ngRoute'])
+angular.module('chronos', ['ngAnimate', 'ngSanitize', 'ngResource', 'ngRoute', 'ngTagsInput'])
+  .constant('_', window._)
   .config(function($routeProvider) {
     $routeProvider
       .when('/', {
-        templateUrl: 'app/main/main.html',
-        controller: 'MainCtrl'
+        templateUrl: 'app/general/general.html',
+        controller: 'GeneralCtrl',
+        controllerAs: 'general'
       })
       .otherwise({
         redirectTo: '/'
       });
+  })
+  .run(function($rootScope) {
+    $rootScope._ = window._;
   });

src/app/vendor.scss

@@ -1,3 +1,69 @@
 $icon-font-path: "../../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/";
 
-@import '../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap';
+// @import '../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap';
+
+@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/variables";
+
+$border-radius-base: 0px;
+$border-radius-large: 0px;
+$border-radius-small: 0px;
+
+@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/mixins";
+
+// Reset and dependencies
+@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/normalize";
+@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/print";
+@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/glyphicons";
+
+// Core CSS
+@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/scaffolding";
+@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/type";
+@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/code";
+@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/grid";
+@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/tables";
+@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/forms";
+@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/buttons";
+
+// Components
+@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/component-animations";
+@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/dropdowns";
+// @import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/button-groups";
+@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/input-groups";
+@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/navs";
+@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/navbar";
+@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/breadcrumbs";
+@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/pagination";
+@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/pager";
+@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/labels";
+@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/badges";
+// @import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/jumbotron";
+// @import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/thumbnails";
+@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/alerts";
+@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/progress-bars";
+// @import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/media";
+@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/list-group";
+@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/panels";
+// @import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/responsive-embed";
+// @import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/wells";
+@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/close";
+
+// Components w/ JavaScript
+@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/modals";
+// @import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/tooltip";
+// @import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/popovers";
+// @import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/carousel";
+
+// Utility classes
+@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/utilities";
+@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/responsive-utilities";
+
+// ng-tags-input
+@import "../../bower_components/ng-tags-input/ng-tags-input.min.css";
+@import "../../bower_components/ng-tags-input/ng-tags-input.bootstrap.min.css";
+
+* {
+  -webkit-border-radius: 0 !important;
+     -moz-border-radius: 0 !important;
+          border-radius: 0 !important;
+}
+

src/components/aside/aside.controller.js

@@ -0,0 +1,10 @@
+'use strict';
+
+function AsideCtrl(Info) {
+  // var vm = this;
+}
+
+angular.module('chronos')
+  .controller('AsideCtrl', AsideCtrl);
+
+AsideCtrl.$inject = ['Info'];

src/components/aside/aside.html

@@ -0,0 +1,8 @@
+<div class="panel panel-info" ng-controller="AsideCtrl as aside">
+  <div class="panel-heading">
+    <h3 class="panel-title">Panel title</h3>
+  </div>
+  <div class="panel-body">
+    Panel content
+  </div>
+</div>

src/components/aside/aside.service.js

@@ -0,0 +1,8 @@
+'use strict';
+
+function Info() {
+  return {};
+}
+
+angular.module('chronos')
+  .factory('Info', Info);

src/components/navbar/navbar.controller.js

@@ -1,6 +1,9 @@
 'use strict';
 
+function NavbarCtrl() {
+  var vm = this;
+  vm.date = new Date();
+}
+
 angular.module('chronos')
-  .controller('NavbarCtrl', function($scope) {
-    $scope.date = new Date();
-  });
+  .controller('NavbarCtrl', NavbarCtrl);

src/components/navbar/navbar.html

@@ -1,21 +1,26 @@
-<nav class="navbar navbar-static-top navbar-inverse" ng-controller="NavbarCtrl">
+<nav class="navbar navbar-inverse navbar-static-top" ng-controller="NavbarCtrl as navbar">
   <div class="container-fluid">
+    <!-- Brand and toggle get grouped for better mobile display -->
     <div class="navbar-header">
-      <a class="navbar-brand" href="https://github.com/Swiip/generator-gulp-angular">
-        <span class="glyphicon glyphicon-home"></span> Gulp Angular
-      </a>
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      <a class="navbar-brand" href="/">Chronos Timetable Tools</a>
     </div>
 
-    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-6">
-      <ul class="nav navbar-nav">
-        <li class="active"><a ng-href="#">Home</a></li>
-        <li><a ng-href="#">About</a></li>
-        <li><a ng-href="#">Contact</a></li>
+    <!-- Collect the nav links, forms, and other content for toggling -->
+    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+      <ul class="nav navbar-nav navbar-left">
+        <li class="active"><a ng-href="/">Generator</a></li>
+        <li><a ng-href="/viewer/">Viewer</a></li>
       </ul>
-
       <ul class="nav navbar-nav navbar-right">
-        <li>Current date: {{ date | date:'yyyy-MM-dd' }}</li>
+        <li><a ng-href="/about/">About</a></li>
+        <li><a ng-href="/contact/">Contact</a></li>
       </ul>
-    </div>
-  </div>
+    </div><!-- /.navbar-collapse -->
+  </div><!-- /.container-fluid -->
 </nav>

src/components/pages/pages.controller.js

@@ -0,0 +1,11 @@
+'use strict';
+
+function PagesCtrl(Pages) {
+  var vm = this;
+  vm.pages = Pages.pages;
+}
+
+angular.module('chronos')
+  .controller('PagesCtrl', PagesCtrl);
+
+PagesCtrl.$inject = ['Pages'];