自動チェックインアプリ(5) – チェックイン予定表の保存

前記事に引き続き、自動チェックインアプリを作成する。今回は、作成した予定表をGAE(Google App Engine)のデータストアに保存する。

• 予定表保存用のタグを管理する

予定表を保存する際に「タグ」を付与する。このタグは、spot保存用のタグとは別のもの。新規ボタン(#btnAddTag)をクリックすると、プロンプトウィンドウが開き、新規タグ名の入力を受け付ける。


入力後、OKを押すとGAEのデータストアに保存し、タグ表示コンボボックス(#cbxTagPlan)に表示する。新規ボタンをクリックせず、直接コンボボックスにタグ名を入力した場合には未対応。

• 日付入力ボックスと保存ボタンを表示する

訪問予定日を入力するボックス(#dbxDate)と、保存ボタン(#btnAddPlan)を作成する。


• 保存ボタンをクリックした場合の処理(1)：btnAddPlan()

保存ボタンがクリックされたら、現在の内容をデータストアに保存する。最初に、「タグ名が入力されているか」、「日付が入力されているか」をチェックし、未入力の場合はメッセージを表示して処理を終了する。

• 保存ボタンをクリックした場合の処理(2)：delExistingPlan()

次に、データストア(kind名：SpotPlan)を検索し、指定されたタグ名を持つentityを全て削除する。これは二重登録防止のためで、既存のタグ名を持つentityを｢更新｣するのではなく、「削除」＆「追加」することで保存を実行している。

• 保存ボタンをクリックした場合の処理(3)

HTMLのテーブルの内容を取得し、1行ごとにデータストアに保存していく。その際、スポット名が空白の行はスキップする。
HTML(つまり画面)にはスポット名とスポットのキーしかないので、ドロップしてきたときに保持しておいたスポットの各種情報(位置やリンク先など)をgSpotPlanBufから取り出してデータストアに保存する。コードは以下のイメージ。

// JavaScript
// 全行に共通の項目をセット
$('#spot_date').val( $('#dbxDate').datebox('getValue') );
//$('#spot_tag').val( cur_tag ); // 上書きされるので後でセット
$('#spot_status').val( 'live' );

var rows = $('#tblPlanSpot1')[0].rows; // テーブルの行を取得
var props = gcPropNameForClip.split(','); // spotのproperty名を配列にセット

for (var i = 0; i < rows.length; i++) { // 1行ごとに処理していく
    var cur_spot = $('#txtspot' + i).html();
    if (cur_spot != '') { // スポット名が空白の行はスキップする
        var spot_key = $(cur_spot).find('p:eq(0)').text(); // キー名を取得
        var spot = getSpotByKey(gSpotPlanBuf,spot_key); 
        for (j=0; j < props.length; j++){
            $('#' + props[j]).val( spot[ props[j] ] );
        }
        $('#spot_tag').val( cur_tag ); // spotの内容で上書きされるので値を再セット
        var spot_time = $('#tspn' + i).timespinner('getValue'); // 時刻の取得
        $('#spot_time').val( spot_time );
        // データストアに保存
        gDSspotPlan.dbAdd(gDSspotPlan.getUniqueKey(), function(){
            //console.log('saved:' + spot.spot_name);
        });
    }
}

ここまでで予定表の保存が実現できた。