cool new gui

.gitignore

@@ -2,4 +2,5 @@ bower_components/
 .divshot-cache/
 node_modules/
 test/
+testdata/
 dist/

gulpfile.js

@@ -10,35 +10,40 @@ gulp.task('css',function(){
       "bower_components/sweetalert/lib/sweet-alert.css",
       "bower_components/bootstrap/dist/css/bootstrap.css"]
   return gulp.src(cssFiles)
+                        .pipe(gulp.dest('test/'))
                         .pipe(minifyCSS())
                         .pipe(gulp.dest('dist/'))
 })
 
 gulp.task('html',function(){
   return gulp.src('src/*.html')
+                        .pipe(gulp.dest('test/'))
                         .pipe(minifyHTML({ quotes: true }))
                         .pipe(gulp.dest('dist/'))
 })
 gulp.task('js',function(){
   jsFiles = ["src/*.js",
       "bower_components/jquery/dist/jquery.js",
+      "bower_components/moment/moment.js",
       "bower_components/angular/angular.js",
       "bower_components/sweetalert/lib/sweet-alert.js",
       "bower_components/angular-ui-router/release/angular-ui-router.js",
       "bower_components/vis/dist/vis.min.js"]
-  return gulp.src(jsFiles).pipe(uglify({ mangle: false }))
+  return gulp.src(jsFiles).pipe(gulp.dest('test/'))
+                          .pipe(uglify({ mangle: false }))
                           .pipe(gulp.dest('dist/'))
               
 })
 gulp.task('coffee',function(){
   return gulp.src('src/*.coffee')
                         .pipe(coffee({ bare: true }))
+                        .pipe(gulp.dest('test/'))
                         .pipe(uglify({ mangle: false }))
                         .pipe(gulp.dest('dist/'))
 })
 
 gulp.task('clean',function(){
-  return gulp.src('dist/*').pipe(clean())
+  return gulp.src(['dist/*','test/*']).pipe(clean())
 })
 
 gulp.task('watch',function(){

src/app.coffee

@@ -17,18 +17,25 @@ pertApp.config ($stateProvider,$urlRouterProvider) ->
     controller: pertController
 
 
-pertController = ($scope) ->
-  toDates = (list, startDay) ->
-    list.map (i) ->
-      r = content: ""+i.id, id: i.id
-      if i.startDay? then r.start = moment(startDay).add(i.startDay, 'days').format 'YYYY-MM-DD'
-      if i.endDay? then r.end = moment(startDay).add(i.endDay, 'days').format 'YYYY-MM-DD'
-      return r
+  $stateProvider.state 'gantt',
+    url: '/gantt'
+    templateUrl: 'gantt.html'
+    controller: pertController
+  
+  $stateProvider.state 'table',
+    url: '/table'
+    templateUrl: 'table.html'
+    controller: pertController
 
-  buildTimeline = (data) ->
-    timeline = new vis.Timeline (document.getElementById 'timeline'), (toDates data.activities), {}
+pertApp.controller 'tableController', ($scope) ->
+  $scope.list = []
+  ls = $scope.fromLocalStorage()
+  if ls?
+    $scope.list = ls.activities
 
-  buildGraph = (data) ->
+pertApp.controller 'pertDiagController', ($scope) ->
+  $scope.buildGraph = (data) ->
+    if !data? then return
     nodes = data.days.map (x) -> {id: x, label: ""+x}
     connections = []
     data.activities.forEach (x) ->
@@ -49,17 +56,29 @@ pertController = ($scope) ->
         edges:
           style: 'arrow'
       network = new vis.Network (document.getElementById 'pert'), { nodes: nodes, edges: connections }, options
+  $scope.buildGraph $scope.fromLocalStorage()
 
-  fromLocalStorage = ->
-    data = localStorage.getItem 'ganttpert'
+pertApp.controller 'ganttDiagController', ($scope) ->
+  $scope.toDates = (list, startDay) ->
+    list.map (i) ->
+      r = content: ""+i.id, id: i.id
+      if i.startDay? then r.start = moment(startDay).add(i.startDay, 'days').format 'YYYY-MM-DD'
+      if i.endDay? then r.end = moment(startDay).add(i.endDay, 'days').format 'YYYY-MM-DD'
+      return r
+  $scope.buildTimeline = (data) ->
+    if !data? then return
+    timeline = new vis.Timeline (document.getElementById 'timeline'), ($scope.toDates data.activities), {}
+  $scope.buildTimeline $scope.fromLocalStorage()
+
+pertController = ($scope) ->
+  $scope.fromLocalStorage = (item) ->
+    data = localStorage.getItem item || 'ganttpert'
     if data
       try
         jdata = JSON.parse data
       catch e
         return swal 'JSON Error', e, 'error'
       if jdata
-        buildGraph new Pert(jdata).calculate()
+        return new Pert(jdata).calculate()
       else return swal 'Error', 'no JSON?', 'error'
     else swal 'Error', 'no data to parse', 'error'
-
-  fromLocalStorage()

src/gantt.html

@@ -0,0 +1,3 @@
+<div ng-controller="ganttDiagController">
+  <div id="timeline"></div>
+</div>

src/home.html

@@ -1,5 +1,4 @@
 <div class="home">
   <textarea id="ta" class="form-control" rows="10">{{rawdata}}</textarea>
   <button class="btn btn-primary" ng-click="saveData($event)">Save</button>
-  <a href="#/pert" class="btn btn-success">View Pert</a>
 </div>

src/index.html

@@ -12,10 +12,32 @@
     <script src="angular.js"></script>
     <script src="angular-ui-router.js"></script>
     <script src="vis.min.js"></script>
+    <script src="moment.js"></script>
     <script src="pert.js"></script>
     <script src="app.js"></script>
   </head>
   <body>
+    <nav class="navbar navbar-default navbar-fixed-top">
+      <div class="container-fluid">
+        <div class="navbar-header">
+          <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="#">Pert</a>
+        </div>
+        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+          <ul class="nav navbar-nav">
+            <li><a href="#/">Edit</a></li>
+            <li><a href="#/table">Table</a></li>
+            <li><a href="#/pert">Pert</a></li>
+            <li><a href="#/gantt">Gantt</a></li>
+          </ul>
+        </div>
+      </div>
+    </nav>
     <div class="container" ui-view></div>
   </body>
 </html>

src/pert.html

@@ -1,6 +1 @@
-<div>
-  <div id="pert"></div>
-  <div class="text-center">
-    <a href="#/" class="btn btn-primary">Edit Data</a>
-  </div>
-</div>
+<div id="pert" ng-controller="pertDiagController"></div>

src/style.css

@@ -2,9 +2,18 @@
   height: 600px;
   width: 100%;
   border: 1px solid lightgray;
-  margin-bottom: 1em
+  margin-bottom: 1em;
+}
+
+.container {
+  padding-top: 4em;
 }
 
 #ta {
-  margin: 1em 0 1em 0
+  margin: 1em 0 1em 0;
+}
+
+#tab {
+  max-width: 40em;
+  margin: 0 auto 0 auto;
 }

src/table.html

@@ -0,0 +1,16 @@
+<table id="tab" class="table" ng-controller="tableController">
+  <tr>
+    <td><b>#</b></td>
+    <td><b>Duration (days)</b></td>
+    <td><b>Start Day</b></td>
+    <td><b>End Day</b></td>
+    <td><b>Possible Delay</b></td>
+  </tr>
+  <tr ng-repeat="item in list">
+    <td>{{item.id}}</td>
+    <td>{{item.duration}}</td>
+    <td>{{item.startDay}}</td>
+    <td>{{item.endDay}} --- {{item.endDay + (item.permittedDelay || 0)}}</td>
+    <td>{{item.permittedDelay || 0}}</td>
+  </tr>
+</table>