Tasky -- Bogdan Urs

Homework app for the angularjs training. Dev: Bogdan Urs.

by Abra Cadabra

HTML

<script src="http://code.angularjs.org/1.2.1/angular.min.js"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700|Special+Elite' rel='stylesheet' type='text/css'>
    
<div ng-app>
    <div id="page-wrap" ng-controller="todoController">
        <form class="marg-bottom" id="todo-search">
            <input type="text" ng-model="todoQuery" placeholder="Search for a todo item" />
            <button type="submit">Search</button>
        </form>
        <form id="todo-add" class="marg-bottom">
            <input type="text" placeholder="Add a todo item" ng-keyup="addTodo($event)" ng-model="todoText" />
            <input type="text" placeholder="Add the todo's owner" ng-keyup="addTodo($event)" ng-model="todoOwner" />
            <button type="submit" ng-click="addTodo($event)">Add</button>
        </form>
        <div class="marg-bottom"> <span>Sorting options:</span>

            <button ng-click="sortOrderOption('title')">Sort todos by: Alphabetically</button>
            <button ng-click="sortOrderOption('date')">Sort todos by: Date</button>
        </div>
        <div class="marg-bottom"> <span>Dumping: </span>

            <button ng-click="dumpResultsInConsole()">Dump in console</button>
        </div>
        <div class="todos-pane">
            <ul class="no-list todos-list">
                <li ng-repeat="item in items | filter:todoQuery | orderBy:mySort" class="todo-item">
                    <div class="todo-title">{{ item.title }}</div>
                    <div class="todo-date"> <strong>Date:</strong>
{{ item.date.format('MMMM Do YYYY, h:mm:ss a'); }}</div>
                    <div class="todo-status" ng-switch on="item.status"> <strong>Status:</strong>
                         <span ng-switch-when="done" class="todo-status-text done">done</span>
                         <span ng-switch-when="archived" class="todo-status-text archived">archived</span>
              ...

CSS

body{
    font-family: 'Lato', sans-serif;
}

* {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

#page-wrap {
    margin: 12px;
}
.marg-bottom {
    margin-bottom: 10px;
}
.no-list {
    list-style: none;
}
.todos-pane {
    border: 2px solid black;
}
.todos-list{
    padding: 10px 20px;
}
.todo-status-change-area {
    margin-bottom: 5px;
}
.todo-status-text {
    padding: 0 4px;
}
.todo-item {
    border-bottom: 1px solid black;
    padding-top: 10px;
}
.todo-item:first-child{
    padding-top: 0px;
}
.todo-title {
    font-size: 28px;
    margin-bottom: 5px;
    font-family: 'Special Elite', cursive;
    font-weight: normal;
    color: #222;
    text-shadow: 0px 2px 1px #555;
}

.done{
    background-color: blue;
    color: white;
}
.active{
    background-color: green;
    color: white;
}
.archived{
    background-color: #646464;
    color: white;
}

JavaScript

function todoController($scope) {
    $scope.todoStatuses = ['active', 'done', 'archived'];
    $scope.items = [{
        'title': 'Sa ma dau cu bitza',
            'date': moment(),
            'status': 'active',
            'owner': 'me'
    }];

    // add a todo
    $scope.addTodo = function ($event) {
        if (($event.keyCode == 13 || $event.type === 'click') && $scope.todoText) {
            var now = moment();
            $scope.items.push({
                'title': $scope.todoText,
                    'date': now,
                    'status': 'active',
                    'owner': $scope.todoOwner || 'me'
            });
            $scope.todoText = '';
            $scope.todoOwner = '';
        }
    };

    // ordering the todos
    $scope.todoOrderProp = 'title';

    $scope.mySort = function (item) {
        if ($scope.todoOrderProp == 'date') {
            return new Date(item.date);
        } else {
            return item.title;
        }
    };

    $scope.sortOrderOption = function (option) {
        if (option === 'date') {
            $scope.todoOrderProp = 'date';
        } else {
            $scope.todoOrderProp = 'title';
        }
    };

    $scope.dumpResultsInConsole = function () {
        console.log($scope.items);
    };
}