alexhiroshi

getAll(): any {
    return this.database.all('SELECT * FROM Todo');
}
get(id: number): any {
    return this.database.get('SELECT * FROM Todo WHERE id = ?', [id]);
}
add(todo: Todo): any {
    return this.database.execSQL('INSERT INTO Todo (title, description, isDone) VALUES (?,?,0)', [todo.title, todo.description]);
}

alexhiroshi

export class DB {
    private databaseName: string = 'todo-app.db';
    public database: any;
	constructor() {
        let sqlCreateTable = 'CREATE TABLE IF NOT EXISTS Todo ' + 
                            '(id INTEGER PRIMARY KEY AUTOINCREMENT,' +
                            'title VARCHAR(100) NOT NULL,' +
                            'description VARCHAR(255) NULL,'+
                            'isDone INTEGER NOT NULL DEFAULT 0)';
		new Sqlite(this.databaseName).then(db => {

alexhiroshi

tns plugin add nativescript-sqlite

alexhiroshi

<StackLayout orientation="horizontal" [nsRouterLink]="['/detail', item.id]">
  <Switch [checked]="item.isDone" (tap)="updateStatus(item.id)"></Switch>
  <Label [text]="item.title" class="list-group-item todo-title"></Label>
</StackLayout>

alexhiroshi

<ActionBar title="ToDo List" class="action-bar">
  <ios>
    <ActionItem (tap)="addItem()" text="Add" ios.systemIcon="4" ios.position="right" android.position="popup"></ActionItem>
  </ios>
</ActionBar>
<android>
  <FAB (tap)="addItem()" icon="res://add" rippleColor="#f1f1f1" class="fab-button"></FAB>
</android>

alexhiroshi

import { registerElement } from "nativescript-angular/element-registry";
registerElement("FAB", () => require("nativescript-floatingactionbutton").Fab);

alexhiroshi

.fab-button {
    height: 70;
    width: 70;
    margin: 15;
    background-color: #F57C00; 
    horizontal-align: right; 
    vertical-align: bottom; 
}

alexhiroshi

tns plugin add nativescript-floatingactionbutton

alexhiroshi

const routes: Routes = [
    { path: '', redirectTo: '/todoList', pathMatch: 'full' },
    { path: 'todoList', component: TodoListComponent },
    { path: 'todoAdd', component: TodoAddComponent },
    { path: 'detail/:id', component: TodoDetailComponent },
];

alexhiroshi

import { Injectable } from "@angular/core";
import { Todo } from "../entities/todo";

@Injectable()
export class TodoService {
    private todoList = new Array<Todo>(
        { id: 1, title: '1 pão', description: 'Comprar 1 pacote de pão integral', isDone: false },
        { id: 2, title: '1 Leite', description: 'Comprar 1 leite', isDone: false },
        { id: 3, title: 'Limpar quarto', description: 'Não esquecer de lavar roupa de cama', isDone: false },
        { id: 4, title: 'Lavar o carro', description: 'Lavar o carro perto do trabalho', isDone: false }