【Angular2】簡単なWebアプリ制作(その3)

10cmです｡こんにちは｡今回は､WebSQLを用いて購入物の管理を行います｡

GitHabはこちらになります｡

以下のような機能を実装しました｡

• 購入物をDBから取得
• 購入物をDBに追加
• 購入物をDBから削除

Angular2でWebSQLを使うようにするのは別記事で説明いたします｡

データを追加

まずはデータのを追加するための機能です｡

ComponentがWebSQL用のServiceのメソッドを実行しています｡

public runInsertPurchases(purchases:Purchases): Promise<any> {
    return new Promise(function(resolve,reject){
        this.db.transaction(
             function(trans){
                // 購入物の追加
                trans.executeSql(SQL_TEXT.INSERT_PURCHASES,[purchases.category, purchases.price, purchases.num, purchases.date],

                // 追加成功
                function(trans,res){
                    resolve(res);
                },
                // 追加失敗
                function(trans,error){
                    console.log('execSqlCustom error ' + error.message);
                    reject(error);
                }
            )
        }
    )}.bind(this));
}

"trans.executeSql"で渡している引数のSQLが実行されます｡

引数は以下のようになっています｡

• SQL文
• パラメータ
• 成功時のコールバック関数
• 失敗時のコールバック関数

コールバック関数でComponentに通知(resolve, reject)を行い､必要な処理を行わせます｡

追加では､結果をalertで表示させるようにしています｡

データを取得､表示

DBに追加したデータを表示します｡

今回は､前に作成していたリスト表示のMockの部分を修正していきます｡

public runGetPurchases(from, to): Promise<Purchases[]> {
    var array:Array<string> = [from, to];

    // DBにアクセスする
    return new Promise(function(resolve, reject) {
        this.db.transaction( 
            function(trans) {
                // 購入物の取得を行う
                trans.executeSql(SQL_TEXT.SELECT_PURCHASES_OF_DAILY, array, success);
                // 取得成功
                function success(trans, res) {
                    // 配列の中身がからの場合
                    if( res.rows.length ) {
                        resolve(res.rows);
                    } else {
                        reject("取得結果は0件です")
                    }
                }
            }
        )
    }.bind(this));
}

この関数では､FromとToを取得してその間にある購入物を取得します｡

取得後､row.rowsが実際の結果になります｡

また､件数が0件の場合は､エラーとして通知します｡

データを削除

追加したデータの削除を行います｡

リスト表示画面において､購入物ごとに削除ボタン(☓ボタン)を表示しています｡選択された購入物のIDを用いて削除を行っています｡

public runDeletePurchases(id: number): Promise<any> {
    return new Promise<any>(function(resolve, reject){
        this.db.transaction(
            function(trans) {
                // 購入物の削除
                trans.executeSql(SQL_TEXT.DELETE_PURCHASES, [id],
                    // 削除成功
                    function(trans, res) {
                        resolve(res);
                    },
                    // 削除失敗
                    function(trans, error) {
                        resolve(error);
                    }
                )
            }
        )
    }.bind(this));
}

作りは追加と同じです｡削除の成功､失敗を通知して後処理はComponentが行います｡

削除の結果をalertで表示させています｡

また､削除に成功した場合は､再度DBから取得を行い､最新の状態を表示するようにしています｡

まとめ

angular-cliのプロジェクトでWebSQLを利用したデータの管理を行った｡

今後は､チャート表示の方に手をつけていこうかなと｡

チャートは何使おうかな｡google-chartくらいしか使ったことないけど｡

にほんブログ村