Skip to content

Instantly share code, notes, and snippets.

@finnp
Created May 16, 2013 11:01
Show Gist options
  • Save finnp/5590938 to your computer and use it in GitHub Desktop.
Save finnp/5590938 to your computer and use it in GitHub Desktop.
Simple Todo-App using AngularJS (http://angularjs.org/) and Parse (https://parse.com/). Done at the HelsinkiJS #PeerProgramming. http://helsinkijs.org/
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://www.parsecdn.com/js/parse-1.2.7.min.js"></script>
<script src="todo.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class="container" ng-controller="Todo">
<div class="span4">
<h1>Todo HelsinkiJS</h1>
<div class="progress">
<span ng-hide="todos.length">Go ahead and add some tasks!</span>
<div class="bar bar-success" style="width: {{donePercentage()}}%;">
<span ng-show="todos.length">
<span ng-hide="todosOpen()">Everything done!</span>
<span ng-show="todosOpen()">{{donePercentage()}}%</span>
</span>
</div>
</div>
<div ng-show="todos.length">
<h3>Todo</h3>
</div>
<ul class="unstyled">
<li ng-repeat="todo in todos | filter:{done: false}">
<div class="controls form-inline">
<input id="todo{{$index}}" type="checkbox" ng-change="updateTodo(todo)" ng-model="todo.done"/>
<label for="todo{{$index}}">{{todo.text}}</label>
</div>
</li>
</ul>
<div>
<form ng-submit="addTodo()">
<div class="input-append">
<input type="text" ng-model="inputTodo">
<input class="btn btn-primary" type="submit" value="add">
</div>
</form>
<h3 ng-show="todosDone">Completed</h3>
<button ng-show="todosDone" class="btn btn-small btn-danger" ng-click="todoClear()">Clear completed</button>
<ul class="unstyled">
<li ng-repeat="todo in todos | filter:{done: true}">
<div class="controls form-inline">
<input id="done{{$index}}" type="checkbox" ng-change="updateTodo(todo)" ng-model="todo.done"/>
<label for="done{{$index}}">{{todo.text}}</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
function Todo($scope) {
// Put in your Parse Application keys
Parse.initialize("Application ID Key", "Javascript Key");
var TodoItem = Parse.Object.extend("TodoItem");
$scope.todos = [];
$scope.todosDone = 0;
$scope.todosOpen = function() {
return $scope.todos.length - $scope.todosDone;
};
$scope.updateTodo = function(todo) {
if(todo.done) {
$scope.todosDone++;
} else {
$scope.todosDone--;
}
todo.parseObj.set("done", todo.done);
todo.parseObj.save();
}
$scope.addTodo = function() {
var newTodo = {text: $scope.inputTodo, done:false};
$scope.todos.push(newTodo);
var todoItem = new TodoItem();
todoItem.save(newTodo, {
success: function(obj) {
newTodo.parseObj = obj;
}
})
$scope.inputTodo = '';
}
$scope.todoClear = function() {
// Clears completed
$scope.todosDone = 0;
var oldTodos = $scope.todos;
$scope.todos = [];
angular.forEach(oldTodos, function(todo) {
if(!todo.done) {
$scope.todos.push(todo);
} else {
todo.parseObj.destroy();
}
});
};
$scope.donePercentage = function() {
return Math.round($scope.todosDone / $scope.todos.length * 100)
}
// Querying Parse on load
var query = new Parse.Query(TodoItem);
query.find({
success: function(results) {
$scope.$apply(function () {
console.log(results.length);
for(var i = 0; i < results.length; i++) {
$scope.todos.push({
text: results[i].get('text'),
done: results[i].get('done'),
parseObj: results[i]
});
if(results[i].get('done')) {
$scope.todosDone++;
}
}
});
}
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment