前記事に引き続き、自動チェックインアプリを作成する。今回は、作成した予定表をGAE(Google App Engine)のデータストアに保存する。
- 予定表保存用のタグを管理する
- 日付入力ボックスと保存ボタンを表示する
- 保存ボタンをクリックした場合の処理(1):btnAddPlan()
- 保存ボタンをクリックした場合の処理(2):delExistingPlan()
- 保存ボタンをクリックした場合の処理(3)
予定表を保存する際に「タグ」を付与する。このタグは、spot保存用のタグとは別のもの。新規ボタン(#btnAddTag)をクリックすると、プロンプトウィンドウが開き、新規タグ名の入力を受け付ける。
入力後、OKを押すとGAEのデータストアに保存し、タグ表示コンボボックス(#cbxTagPlan)に表示する。新規ボタンをクリックせず、直接コンボボックスにタグ名を入力した場合には未対応。
訪問予定日を入力するボックス(#dbxDate)と、保存ボタン(#btnAddPlan)を作成する。
保存ボタンがクリックされたら、現在の内容をデータストアに保存する。最初に、「タグ名が入力されているか」、「日付が入力されているか」をチェックし、未入力の場合はメッセージを表示して処理を終了する。
次に、データストア(kind名:SpotPlan)を検索し、指定されたタグ名を持つentityを全て削除する。これは二重登録防止のためで、既存のタグ名を持つentityを「更新」するのではなく、「削除」&「追加」することで保存を実行している。
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); }); } }
ここまでで予定表の保存が実現できた。
ピンバック: 自動チェックインアプリ - チェックイン予定表の読込 | Try Lifelog