自動チェックインアプリ(6) – チェックイン予定表の読込

前記事で保存した予定表を読み込んで表示する。読み込むタイミングは、「予定表用のタグ」コンボボックスでタグを選択したときとする。

• コンボボックスのイベントハンドラを追加する：setCbxTagPlan()

コンボボックス(#cbxTagPlan)を初期化する際に、イベントハンドラを設定しておく。具体的には、タグを選択した際に、対応する予定データをデータストアから読み込む関数(loadPlan())を呼び出すようにする。

// JavaScript
function setCbxTagPlan(tags){
    $('#cbxTagPlan').combobox({
        valueField: 'tag_key',
        textField: 'tag_name',
        multiple: false,
        data: tags,
        onSelect: function(){
            loadPlan($('#cbxTagPlan').combobox('getValue'));//引数はタグ名
        },
        onUnselect: function(){
          //現状不要
        }
    });
}

• 予定データを読み込む：loadPlan(tag)

データストアから予定データを読み込む。その際はGAEの機能を利用して、property名:spot_tagの内容が「対応するtag名」になっているentityのみを取り出す。
(RDBのSQLで言えば ‘SELECT FROM SpotPlan WHERE spot_tag = ‘tag’ のようなイメージ。)

// JavaScript
function loadPlan(tag){
    var sort = 'spot_time:ASCENDING'; // 時間順でソート
    var query = 'spot_tag:' + tag; // spot_tagでフィルタリング
    gDSspotPlan.dbRevAll2(sort, query, function(plans){
        // 読込後の処理
    }
}

• 予定データ読込後の処理(a)：loadPlan(tag)

予定データが空の場合(＝タグは作成したが、予定を保存しなかった場合)は、プロンプトを表示して、予定表テーブルを初期化指定してよいかを確認する。OKを選択した場合は、予定表テーブルをロード時の状態に戻す。キャンセルを選択した場合は、何もせず現在のテーブルの内容を残す。



• 予定データ読込後の処理(b)：loadPlan(tag)

予定データが空でない場合は、(1)予定表データをテーブルに表示し、(2)地図にマーカーを表示し、(3)spotデータを保持する。コードは以下のイメージ。

// JavaScript
if (plans == null) { // 予定データがない場合
  xumiscMessage('No plan data for tag [' + tag + ']');
  $.messager.confirm('Confirm','...?',function(r){
    if (r){
      $('#tblPlanSpot1').empty();// テーブルをクリアする
        initDisp_tblPlan(); // 時刻のみ設定した空の行を作成
    }
  });
} else { // 予定データがある場合
  showTblPlan($('#tblPlanSpot1'), plans); // 予定表テーブルを表示(1)
  drawPlanMarkersOnload(plans); // 地図マーカーを表示(2)
  gSpotPlanBuf.length = 0; // 保持していたspotデータをいったんクリア
  for (var i=0; i < plans.length; i++){
    gSpotPlanBuf.push(plans[i]); // 各spotデータを保持(plan/spotデータはほぼ同じ)
  }
}

• 実行例

初期状態

タグを選択後

別のタグを選択