Sencha Touch Angular Adapter: Todo Sample

by dirkk0

HTML

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" xmlns:stng="http://sencha-touch-angular.org">
<head>
    <title>Sencha Toys</title>
    <meta name="auto-start" content="true">
    <link rel="stylesheet" href="http://cdn.sencha.io/touch/1.1.0/resources/css/sencha-touch.css"/>
    <script src="http://code.angularjs.org/0.9.19/angular-0.9.19.min.js"></script>
<script src="http://cdn.sencha.io/touch/1.1.0/sencha-touch.js" type="text/javascript"></script>
    <script src="https://raw.github.com/tigbro/sencha-touch-angular-adapter/master/compiled/sencha-touch-angular-adapter-0.9.2.min.js"></script>

</head>
<body>

<st:carousel fullscreen="true" ng:controller="TodoController" >
    <st:panel id="todos" st:event="{activate:'refreshTodos()'}" scroll="true">
        <st:toolbar dock="top" title="Todos">
            <st:button text="Save" st:event="{tap:'saveTodos()'}"></st:button>
            <st:spacer></st:spacer>
            <st:button text="Settings" st:event="{tap:'$navigate(\'slide:settings\')'}"></st:button>
        </st:toolbar>
        <st:textfield name="inputText" place-holder="enter your todo here" st:event="{action:'addTodo()'}"></st:textfield>
        <st:panel>
            <st:checkboxfield ng:repeat="todo in todos" name="todo.done" label-width="80%" label="{{todo.name}}"></st:checkboxfield>
        </st:panel>
    </st:panel>
    <st:panel id="settings">
        <st:toolbar dock="top" title="Settings">
            <st:button text="Back" st:event="{tap:'$navigate(\'slide:todos\')'}"></st:button>
        </st:toolbar>
        <st:textfield name="storageKey" label="Store key"></st:textfield>
    </st:panel>

</st:carousel>


</body>
</html>

JavaScript

angular.service('todoStore', function(jsonp, waitDialog) {
    var readUrl = 'https://secure.openkeyval.org/';
    var writeUrl = 'https://secure.openkeyval.org/store/?';

    function read(key, success) {
        waitDialog.show('Please wait');
        jsonp('JSON', readUrl + key + '?callback=JSON_CALLBACK', function(status, data) {
            success(data);
            waitDialog.hide();
        }, function(status) {
            success([]);
            waitDialog.hide();
        });
    }

    function write(key, value) {
        waitDialog.show('Please wait');
        value = encodeURIComponent(JSON.stringify(value));
        jsonp('JSON', writeUrl + key + '=' + value + '&callback=JSON_CALLBACK', function() {
            waitDialog.hide();
        });
    }

    function storageKey(key) {
        if (key) {
            _storageKey = key;
        }
        return _storageKey;
    }

    return {
        read: read,
        write: write,
        storageKey: storageKey
    }

}, {
    $inject: ['$xhr', '$waitDialog']
});

function TodoController(todoStore) {
    this.store = todoStore;
    this.todos = [];
    this.inputText = '';
    this.storageKey = 'SenchaTouchAngularTodoapp';
}

TodoController.$inject = ['todoStore'];

TodoController.prototype = {
    addTodo: function() {
        this.todos.push({
            name: this.inputText,
            done: false
        });
        this.inputText = '';
    },
    refreshTodos: function() {
        var self = this;
        this.store.read(this.storageKey, function(data) {
            if (!data) {
                data = [];
            }
            self.todos = data;
        });
    },
    saveTodos: function() {
        // delete all checked todos
        var newTodos = angular.Array.filter(this.todos, function(todo) {
            return !todo.done;
        });
        this.todos = newTodos;
        this.store.write(this.storageKey, this.todos);
    }
};