more gui work

gulpfile.js

@@ -4,6 +4,7 @@ var minifyHTML = require('gulp-minify-html')
 var coffee = require('gulp-coffee')
 var uglify = require('gulp-uglify')
 var clean = require('gulp-clean')
+var markdown = require('gulp-markdown')
 
 gulp.task('css',function(){
   cssFiles = ["src/*.css","bower_components/vis/dist/vis.min.css",
@@ -21,6 +22,15 @@ gulp.task('html',function(){
                         .pipe(minifyHTML({ quotes: true }))
                         .pipe(gulp.dest('dist/'))
 })
+
+gulp.task('md',function(){
+  return gulp.src(['src/*.md','*.md'])
+                        .pipe(markdown())
+                        .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",
@@ -51,6 +61,7 @@ gulp.task('clean',function(){
 gulp.task('watch',function(){
   gulp.watch('src/*.coffee',['coffee'])
   gulp.watch('src/*.css',['css'])
+  gulp.watch(['*.md','src/*.md'],['md'])
   gulp.watch('src/*.html',['html'])
 })
-gulp.task('default',['html','css','js','coffee'])
+gulp.task('default',['md','html','css','js','coffee'])

package.json

@@ -5,6 +5,7 @@
     "gulp": "^3.8.11",
     "gulp-clean": "^0.3.1",
     "gulp-coffee": "^2.3.1",
+    "gulp-markdown": "^1.0.0",
     "gulp-minify-css": "^1.0.0",
     "gulp-minify-html": "^1.0.2",
     "gulp-uglify": "^1.1.0"

src/app.coffee

@@ -2,21 +2,31 @@ pertApp = angular.module 'pertApp', ['ui.router']
 
 pertApp.config ($stateProvider,$urlRouterProvider) ->
   $urlRouterProvider.otherwise '/'
+
   $stateProvider.state 'home',
     url: '/'
-    templateUrl: 'home.html'
+    templateUrl: 'README.html'
+    controller: ($scope) -> return
+
+  $stateProvider.state 'rawedit',
+    url: '/rawedit'
+    templateUrl: 'rawedit.html'
     controller: ($scope) ->
       $scope.rawdata = localStorage.getItem 'ganttpert'
       $scope.saveData = ->
         swal 'Saved', 'Your data has been updated', 'success'
         localStorage.setItem 'ganttpert', $('#ta').val()
 
+  $stateProvider.state 'edit',
+    url: '/edit'
+    templateUrl: 'edit.html'
+    controller: pertController
+
   $stateProvider.state 'pert',
     url: '/pert'
     templateUrl: 'pert.html'
     controller: pertController
 
-
   $stateProvider.state 'gantt',
     url: '/gantt'
     templateUrl: 'gantt.html'
@@ -27,50 +37,13 @@ pertApp.config ($stateProvider,$urlRouterProvider) ->
     templateUrl: 'table.html'
     controller: pertController
 
-pertApp.controller 'tableController', ($scope) ->
-  $scope.list = []
-  ls = $scope.fromLocalStorage()
-  if ls?
-    $scope.list = ls.activities
-
-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) ->
-      connections.push
-        from: x.startDay, to: x.endDay
-        label: x.id+" ("+(if x.permittedDelay > 0 then x.duration+"/"+(x.duration+x.permittedDelay) else x.duration)+")"
-        color: if !x.permittedDelay then 'red'
-      if x.permittedDelay > 0
-        connections.push
-          from: x.endDay
-          to: x.endDay+x.permittedDelay
-          color: 'green'
-          label: x.id+" ("+x.permittedDelay+")"
-    if network
-      network.setData { nodes: nodes, edges: edges }
-    else
-      options =
-        edges:
-          style: 'arrow'
-      network = new vis.Network (document.getElementById 'pert'), { nodes: nodes, edges: connections }, options
-  $scope.buildGraph $scope.fromLocalStorage()
-
-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.toLocalStorage = (data) ->
+    try
+      localStorage.setItem 'ganttpert', JSON.stringify data
+      swal 'Ok', 'Data updated', 'success'
+    catch e
+      swal 'Error', 'could not save data', 'error'
   $scope.fromLocalStorage = (item) ->
     data = localStorage.getItem item || 'ganttpert'
     if data

src/controllers.coffee

@@ -0,0 +1,78 @@
+pertApp.controller 'tableController', ($scope) ->
+  $scope.list = []
+  ls = $scope.fromLocalStorage()
+  if ls?
+    $scope.list = ls.activities
+
+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) ->
+      connections.push
+        from: x.startDay, to: x.endDay
+        label: x.id+" ("+(if x.permittedDelay > 0 then x.duration+"/"+(x.duration+x.permittedDelay) else x.duration)+")"
+        color: if !x.permittedDelay then 'red'
+      if x.permittedDelay > 0
+        connections.push
+          from: x.endDay
+          to: x.endDay+x.permittedDelay
+          color: 'green'
+          label: x.id+" ("+x.permittedDelay+")"
+    if network
+      network.setData { nodes: nodes, edges: edges }
+    else
+      options =
+        edges:
+          style: 'arrow'
+      network = new vis.Network (document.getElementById 'pertDiagram'), { nodes: nodes, edges: connections }, options
+  $scope.buildGraph $scope.fromLocalStorage()
+
+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()
+
+pertApp.controller 'editorController', ($scope) ->
+  $scope.clone = (id) ->
+    for i,j of $scope.fromLocalStorage().activities
+      console.log j
+      if j.id is id
+        $scope.addNew j.id, j.duration, j.depends
+        swal 'Ok', id+' has been cloned', 'success'
+        return
+    swal 'Ops', 'could not find '+id, 'warning'
+  $scope.delete = (id) ->
+    rawdata = localStorage.getItem 'ganttpert'
+    try
+      newdata = JSON.parse rawdata
+    catch e
+      swal 'Error', e, 'error'
+    if newdata
+      l = []
+      for i,j of newdata
+        if j.id isnt id
+          l.push j
+      localStorage.setItem 'ganttpert', JSON.stringify l
+      swal 'Ok', 'done', 'success'
+  $scope.addNew = (id, dur, deps) ->
+    ndur = dur || $('#new-duration').val()
+    nid = id || $('#new-id').val()
+    ndeps = deps || []
+    rawdata = localStorage.getItem 'ganttpert'
+    try
+      newdata = JSON.parse rawdata
+    catch e
+      swal 'Error', e, 'error'
+    newdata.push {id: nid, duration: dur, depends: ndeps}
+    $scope.toLocalStorage newdata
+  data = $scope.fromLocalStorage()
+  if data? then $scope.list = data.activities

src/edit.html

@@ -0,0 +1,42 @@
+<div ng-controller="editorController">
+  <div class="panel panel-default" ng-repeat="item in list">
+    <div class="panel-heading">
+      <div class="input-group">
+        <span class="input-group-addon">ID</span>
+        <input class="form-control" value="{{item.id}}" placeholder="id">
+      </div>
+    </div>
+    <div class="panel-body">
+      <div class="input-group">
+        <span class="input-group-addon">Duration</span>
+        <input class="form-control" value="{{item.duration}}" placeholder="(days)">
+      </div>
+      <div class="input-group">
+        <span class="input-group-addon">Dependencies</span>
+        <input class="form-control" placeholder="id1 id2 id3" value="{{item.depends.join(' ')}}">
+      </div>
+      <button ng-click="delete(item.id)" class="btn btn-danger">Delete</button>
+      <button ng-click="clone(item.id)" class="btn btn-warn">Clone</button>
+    </div>
+  </div>
+  <!-- new item -->
+  <div class="panel panel-default">
+    <div class="panel-heading">
+      <div class="input-group">
+        <span class="input-group-addon">ID</span>
+        <input class="form-control" placeholder="New Activity" id="new-id">
+      </div>
+    </div>
+    <div class="panel-body">
+      <div class="input-group">
+        <span class="input-group-addon">Duration</span>
+        <input class="form-control" id="new-duration" placeholder="(days)">
+      </div>
+      <div class="input-group">
+        <span class="input-group-addon">Dependencies</span>
+        <input class="form-control" placeholder="id1 id2 id3">
+      </div>
+      <button ng-click="addNew($event)" class="btn btn-primary">Add</button>
+    </div>
+  </div>
+</div>

src/index.html

@@ -17,6 +17,7 @@
     <script src="moment.js"></script>
     <script src="pert.js"></script>
     <script src="app.js"></script>
+    <script src="controllers.js"></script>
   </head>
   <body>
     <nav class="navbar navbar-default navbar-fixed-top">
@@ -28,11 +29,12 @@
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
           </button>
-          <a class="navbar-brand" href="#">Pert</a>
+          <a class="navbar-brand" href="#/">Pert</a>
         </div>
         <div class="collapse navbar-collapse" id="navbar-body">
           <ul class="nav navbar-nav">
-            <li><a href="#/">Edit</a></li>
+            <li><a href="#/edit">Edit</a></li>
+            <li><a href="#/rawedit">RawEdit</a></li>
             <li><a href="#/table">Table</a></li>
             <li><a href="#/pert">Pert</a></li>
             <li><a href="#/gantt">Gantt</a></li>

src/pert.html

@@ -1 +1 @@
-<div id="pert" ng-controller="pertDiagController"></div>
+<div id="pertDiagram" ng-controller="pertDiagController"></div>

src/style.css

@@ -1,4 +1,4 @@
-#pert {
+#pertDiagram {
   height: 600px;
   width: 100%;
   border: 1px solid lightgray;