CEN3031 · LittleMonksStudio · Jan 22, 2017 · Jan 22, 2017 · Jan 22, 2017 · Jan 23, 2017
diff --git a/todo-src/animations.css b/todo-src/animations.css
@@ -0,0 +1,31 @@
+/* Sitch container for priority */
+.animate-switch-container {
+  position:relative;
+  background:white;
+  border:1px solid black;
+  height:40px;
+  overflow:hidden;
+}
+
+.animate-switch {
+  padding:10px;
+}
+
+.animate-switch.ng-animate {
+  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
+
+  position:absolute;
+  top:0;
+  left:0;
+  right:0;
+  bottom:0;
+}
+
+.animate-switch.ng-leave.ng-leave-active,
+.animate-switch.ng-enter {
+  top:-50px;
+}
+.animate-switch.ng-leave,
+.animate-switch.ng-enter.ng-enter-active {
+  top:0;
+}
diff --git a/todo-src/index.html b/todo-src/index.html
@@ -6,39 +6,78 @@
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
     <script src="https://code.angularjs.org/1.4.3/angular.js"></script>
     <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="animations.css" />
     <script src="script.js"></script>
+    <script src="protractor.js"></script>
   </head>
 
   <body ng-app="app">
     <h1 class="text-center">My little to do app!</h1>
-
     <div id="todo" class="col-xs-6 col-xs-offset-3" ng-controller="MainCtrl">
-  
+
         <div class="input-group">
-          <input type="text" class="form-control" placeholder="Item to add to todo list" ng-model="newItem">
+
+          <input type="text"
+          class="form-control"
+          placeholder="Item to add to todo list"
+          ng-model="newItem"
+          ui-keypress="{enter: 'addItem()'}"
+          ng-required >
           <span class="input-group-btn">
             <button class="btn btn-default" type="button" ng-click="addItem()">
               Add
               <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
             </button>
           </span>
+
         </div><!-- /input-group -->
-        
-      <h2>stuff i gotta do asap</h2>
-      
+
+      <h2>{{todos.length}} stuff(s) i gotta do asap</h2>
+
       <ul class="list-group">
         <!-- http://www.w3schools.com/css/css_float.asp -->
-        <li class="list-group-item clearfix" ng-repeat="do in todos">
-
-          <span>{{do}}</span>
-          <button class="btn btn-danger pull-right" type="button" ng-click="deleteItem(do)">
+        <li class="list-group-item clearfix"  ng-repeat="do in todos track by $index">
+          <!--
+            I added the fields edit and done to the main array
+          -->
+          <span  ng-hide="do.edit">
+          <input type="checkbox"
+          class="form-check-input"
+          style="margin-right: 10px; margin-top: 10px"
+          ng-model="do.done">
+          <label class="form-check-label">{{do.text}}</label></span>
+
+          <span  ng-show="do.edit">
+            <input type="text" ng-model="newItem2"/>
+            <input type="submit" value="update" ng-click="update($index, newItem2)">
+          </span>
+
+          <button class="btn btn-danger pull-right" type="button" ng-click="deleteItem($index)">
             <span class="glyphicon glyphicon-trash " aria-hidden="true"></span>
           </button>
-
+          <button class="btn btn-link pull-right" type="button" ng-click="do.edit = !do.edit">
+            <span class="glyphicon glyphicon-edit " aria-hidden="true"></span>
+          </button>
+            &nbsp;
+          <hr/>
+          <div ng-controller="ExampleController">
+            <select ng-model="selection" ng-options="item for item in items">
+            </select>
+            <div class="animate-switch-container pull-right" ng-switch on="selection">
+              <div class="animate-switch" ng-switch-when="now">top</div>
+              <div class="animate-switch" ng-switch-when="tomorrow">medium</div>
+              <div class="animate-switch" ng-switch-default>low</div>
+            </div>
+          </div>
         </li>
+        <button style:"margin:50px" class="btn btn-default"  type="button" ng-click="remove()">
+
+          <span  class="glyphicon glyphicon-thumbs-up " aria-hidden="true">
+          </span> Clear {{remaining()}} completed tasks</button>
+
       </ul>
     </div>
-    
+
   </body>
 
 </html>
diff --git a/todo-src/protractor.js b/todo-src/protractor.js
@@ -0,0 +1,18 @@
+var switchElem = element(by.css('[ng-switch]'));
+var select = element(by.model('selection'));
+
+it('should start in low', function () {
+  expect(switchElem.getText()).toMatch(/someday/);
+});
+it('should change to medium', function () {
+  select.all(by.css('option')).get(1).click();
+  expect(switchElem.getText()).toMatch(/tomorrow/);
+});
+it('should change to top', function () {
+  select.all(by.css('option')).get(2).click();
+  expect(switchElem.getText()).toMatch(/now/);
+});
+it('should select default', function () {
+  select.all(by.css('option')).get(3).click();
+  expect(switchElem.getText()).toMatch(/default/);
+});
diff --git a/todo-src/script.js b/todo-src/script.js
@@ -3,26 +3,61 @@
 var myApp = angular.module('app', []);
 
 myApp.controller('MainCtrl', function ($scope){
-  $scope.todos = ["Learn Angular", "Learn node"];
+
+//    I modified the array to contain
+//    flags for editing and checking off
+//    this made implementing add/remove and
+//    clearList much easier
+
+  $scope.todos = [
+    {text:"Learn Angular", done:false, edit:false},
+    {text: "Learn node", done:false, edit:false}]
   $scope.newItem = "";
-
+
+  $scope.update = function(index, value){
+    $scope.todos[index].text = value;
+    $scope.todos[index].edit = false;
+  }
+
   $scope.addItem = function(){
     console.log("in add");
     if ($scope.newItem !== ""){
-      $scope.todos.push($scope.newItem);
+      $scope.todos.push({text:$scope.newItem, done:false, edit:false});
       $scope.newItem = "";
     }
   }
-    
-  $scope.deleteItem = function(item){
+
+  $scope.deleteItem = function(index){
     console.log("in delete");
-    var index = $scope.todos.indexOf(item);
     $scope.todos.splice(index, 1);
   }
-
-
+
+  $scope.remaining = function() {
+    var count = 0;
+    angular.forEach($scope.todos, function(todo) {
+      count += todo.done ? true : false;
+    });
+    return count;
+  }
+
+  $scope.remove = function() {
+    var oldList = $scope.todos;
+    $scope.todos = [];
+    angular.forEach(oldList, function(x) {
+      if (!x.done) $scope.todos.push(x);
+    });
+  }
+
 });
 
+myApp.controller('switchExample', ['ngAnimate'])
+.controller('ExampleController', ['$scope', function ($scope) {
+  $scope.items = ['now', 'tomorrow', 'someday'];
+  $scope.selection = $scope.items[0];
+}]);
+
+
+
 /*************************
  * Homework (not rly):
  * - "enter" button functionality instead of clicking button
@@ -32,5 +67,5 @@ myApp.controller('MainCtrl', function ($scope){
  * - make it prettier
  * - add a due date
  * - add reminder (setInterval)
- * 
- * *********************/
+ *
+ * *********************/
diff --git a/todo-src/style.css b/todo-src/style.css
@@ -1,4 +1,5 @@
 /* Styles go here */
 body {
-  background: green;
+  background: #5999C8;
 }
+