better gui

src/app.coffee

@@ -33,6 +33,7 @@ pertApp.config ($stateProvider,$urlRouterProvider,$locationProvider) ->
     templateUrl: 'table.html'
     controller: pertController
 
+# "Main" Controller
 pertController = ($scope) ->
   $scope.toLocalStorage = (data,options) ->
     options ?= {}

src/controllers.coffee

@@ -49,11 +49,13 @@ pertApp.controller 'ganttDiagController', ($scope) ->
   $scope.buildTimeline $scope.fromLocalStorage()
 
 pertApp.controller 'rawEditorController', ($scope) ->
+  $scope.reset = ->
+    $scope.toLocalStorage []
   $scope.saveData = ->
     try
       data = JSON.parse $scope.taData
     catch e
-      return swal 'Error', 'The data entered is invalid', 'error'
+      swal 'Invalid Data', e, 'error'
     $scope.toLocalStorage data
   $scope.reloadData = ->
     $scope.taData = JSON.stringify $scope.fromLocalStorage silent: yes, raw: yes
@@ -107,6 +109,9 @@ pertApp.controller 'editorController', ($scope) ->
       catch e
         return
     newdata = $scope.fromLocalStorage silent: yes, raw: yes
+    if !newdata? or newdata is null or !newdata.push?
+      newdata = []
+    console.log newdata
     newdata.push { id: id, duration: dur, depends: deps }
     $scope.toLocalStorage newdata, silent: yes
   

src/edit.html

@@ -1,13 +1,19 @@
 <div ng-controller="editorController" class="pbs-editor">
+  <div class="text-center">
+    <h2>Editor</h2>
+    <p class="lead">Dependencies must be a list of IDs separated by space<br>
+    the program does not check cyclic or invalid dependencies for you</p>
+  </div>
   <!-- new item -->
   <div class="panel panel-default new-activity-panel">
     <div class="panel-heading">
+      <i class="fa fa-plus"></i> New Activity
+    </div>
+    <div class="panel-body">
       <div class="input-group">
         <span class="input-group-addon">ID</span>
         <input class="form-control" placeholder="New Activity" ng-model="newid" id="new-id">
       </div>
-    </div>
-    <div class="panel-body">
       <div class="input-group duration">
         <span class="input-group-addon">Duration</span>
         <input class="form-control" id="new-duration" placeholder="(days)">
@@ -16,7 +22,8 @@
         <span class="input-group-addon">Dependencies</span>
         <input class="form-control" placeholder="id1 id2 id3" id="new-deps">
       </div>
-      <button ng-click="addNew()" class="btn btn-primary">Add</button>
+      <button ng-click="addNew()" class="btn btn-primary">
+        <i class="fa fa-plus"></i> Add</button>
     </div>
   </div>
   <!-- item list -->

src/gantt.html

@@ -1,3 +1,6 @@
 <div ng-controller="ganttDiagController">
+  <div class="text-center">
+    <h2>Project Timeline</h2>
+  </div>
   <div id="timeline"></div>
 </div>

src/rawedit.html

@@ -1,5 +1,12 @@
-<div ng-controller="rawEditorController">
+<div class="text-center" ng-controller="rawEditorController">
+  <h2>RawEditor</h2>
+  <p class="lead">The RawEditor is intended for importing, exporting your data
+  and debugging.<br>Keep backups outside of this application if you rely on your data</p>
   <textarea id="ta" class="form-control" ng-model="taData" rows="10"></textarea>
-  <button class="btn btn-primary" ng-click="saveData()">Save</button>
-  <button class="btn btn-info" ng-click="reloadData()">Reload</button>
+  <button class="btn btn-primary" ng-click="saveData()">
+    <i class="fa fa-check"></i> Save</button>
+  <button class="btn btn-info" ng-click="reloadData()">
+    <i class="fa fa-refresh"></i> Reload</button>
+  <button class="btn btn-warning" ng-click="reset()">
+    <i class="fa fa-bomb"></i> Reset</button>
 </div>

src/style.css

@@ -9,17 +9,37 @@
   padding-top: 5em;
 }
 
+#timeline {
+  margin-top: 2em;
+}
+
+.new-activity-panel {
+  max-width: 50em;
+  margin: 0 auto 2em auto;
+}
+
 .input-group.dependencies {
   margin-bottom: 1em;
 }
 
 .input-group.duration {
+  margin-top: 1em;
   margin-bottom: 1em;
 }
 
 span.github {
   margin-top: .75em;
 }
+span.github a {
+  color: black;
+  text-decoration: none;
+}
+
+span.github a:hover {
+  color: black; 
+  text-decoration:none; 
+  cursor:pointer;  
+}
 
 @media(max-width: 765px){
   span.github { display: none }