diff options
| author | Kumar Damani <kumar.damani@mail.utoronto.ca> | 2016-08-03 18:30:06 +0000 |
|---|---|---|
| committer | Kumar Damani <kumar.damani@mail.utoronto.ca> | 2016-08-03 18:30:06 +0000 |
| commit | f383a85f8ed569821ea0e929139dcd68c5541519 (patch) | |
| tree | e21ca3c635e0bf6aaa124a7954451a09237121c4 /public | |
all files
Diffstat (limited to 'public')
| -rw-r--r-- | public/css/style.css | 7 | ||||
| -rw-r--r-- | public/index.html | 72 | ||||
| -rw-r--r-- | public/js/app.js | 1 | ||||
| -rw-r--r-- | public/js/controllers/todoController.js | 44 | ||||
| -rw-r--r-- | public/js/services/todoService.js | 16 |
5 files changed, 140 insertions, 0 deletions
diff --git a/public/css/style.css b/public/css/style.css new file mode 100644 index 0000000..31b3391 --- /dev/null +++ b/public/css/style.css @@ -0,0 +1,7 @@ +body { + padding-top:50px; +} + +#todo-list { + margin-bottom:30px; +} diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..61548a5 --- /dev/null +++ b/public/index.html @@ -0,0 +1,72 @@ +<!doctype html> +<html ng-app="toDoList"> +<head> + <!-- META --> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- set mobile viewport --> + + <title>A Simple To-do List</title> + + <!-- CSS --> + <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> + <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"> + + <!--Custom CSS--> + <link rel="stylesheet" href="css/style.css"> + + <!-- SCRIPTS --> + <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script> <!-- load angular --> + <script src="js/controllers/todoController.js"></script> <!-- load controller --> + <script src="js/services/todoService.js"></script> <!-- load todoService --> + <script src="js/app.js"></script> <!-- load main application --> +</head> + +<!-- controller --> +<body ng-controller="mainController"> + <section class="container"> + + <!-- Title --> + <article class="jumbotron text-center"> + <h1>You have <span class="label label-primary">{{ todos.length }}</span> to-dos</h1> + </article> + + <!-- List --> + <section id="todo-list" class="row"> + <section class="col-sm-4 col-sm-offset-4"> + + + <!-- fetch all the todo items --> + <article class="checkbox" ng-repeat="todo in todos"> + <label> + <input type="checkbox" ng-click="deleteTodo(todo._id)"><strong>{{ todo.text }}</strong> + </label> + </article> + + <!-- loading circle icon via (bootstrap)--> + <p class="text-center" ng-show="loading"> + <span class="fa fa-spinner fa-spin fa-3x"></span> + </p> + + </section> + </section> + + <!-- Add form --> + <section id="todo-form" class="row"> + <section class="col-sm-8 col-sm-offset-2 text-center"> + <form> + <article class="form-group"> + + <!-- attach to formData.text in (angular) --> + <input type="text" class="form-control input-lg text-center" placeholder="Eg: Watch the Simpsons -- again " ng-model="formData.text"> + </article> + + <!-- createTodo to create new item --> + <button type="submit" class="btn btn-primary btn-lg" ng-click="createTodo()">Add</button> + </form> + </section> + </section> + + </section> + +</body> +</html> diff --git a/public/js/app.js b/public/js/app.js new file mode 100644 index 0000000..01ec9be --- /dev/null +++ b/public/js/app.js @@ -0,0 +1 @@ +angular.module('toDoList', ['todoController', 'todoService']); diff --git a/public/js/controllers/todoController.js b/public/js/controllers/todoController.js new file mode 100644 index 0000000..eb73feb --- /dev/null +++ b/public/js/controllers/todoController.js @@ -0,0 +1,44 @@ +angular.module('todoController', []) + + // inject service factory into our controller + .controller('mainController', ['$scope','$http','Todos', function($scope, $http, Todos) { + $scope.formData = {}; + $scope.loading = true; + + // on first visit 'refresh' the todo list + Todos.get() + .success(function(data) { + $scope.todos = data; + $scope.loading = false; + }); + + // when submitting the add form, send formdata to api + $scope.createTodo = function() { + + // validate the formData to make sure that something is there + if ($scope.formData.text != undefined) { + $scope.loading = true; + + Todos.create($scope.formData) + + // if successful creation, 'refresh' todo list + .success(function(data) { + $scope.loading = false; + $scope.formData = ""; // clear the form + $scope.todos = data; // assign our new list of todo + }); + } + }; + + // delete a todo when pressed checkbox + $scope.deleteTodo = function(id) { + $scope.loading = true; + + Todos.delete(id) + // if successful, 'refresh' the list with latest data + .success(function(data) { + $scope.loading = false; + $scope.todos = data; + }); + }; + }]);
\ No newline at end of file diff --git a/public/js/services/todoService.js b/public/js/services/todoService.js new file mode 100644 index 0000000..649c61f --- /dev/null +++ b/public/js/services/todoService.js @@ -0,0 +1,16 @@ +angular.module('todoService', []) + + // use the api + .factory('Todos', ['$http', function($http) { + return { + get : function() { + return $http.get('/api/todos'); + }, + create : function(data) { + return $http.post('/api/todos', data); + }, + delete : function(id) { + return $http.delete('/api/todos/' + id); + } + } + }]);
\ No newline at end of file |