列車時刻表(9) – データストアに保存した乗車予定を表示する

前記事に引き続いて列車時刻表を作成する。これまで、検索した結果(乗車予定)をメモリ上に保持してきたが、GAE(Google App Engine)のデータストアに保存するようにし、あとで確認する画面を用意する。

• 乗車予定をデータストアに保存する
  乗/下車駅･時刻や列車番号などをプロパティとしてデータストアに保存する。また「乗車日」をあわせて指定できるようにし、あとで検索する際に使う。
  
  乗車確認ダイアログに「Setting」画面へのリンクボタンを追加する。
  
  Setting画面で日付を指定できるようにする。
• 乗車予定一覧表示画面を作成する

  <!-- HTML -->
  <!-- 表示する乗車予定日付 -->
  <select id="selRideDate"></select>
  <!-- 乗車予定データ -->
  <ul data-role="listview" id="lvTTRideList" data-inset="true"></ul>
  

• イベントハンドラを定義する

  var gRides = []; // 乗車予定(データストアの内容全て)
  
  // 画面表示時
  function pgTTRideListPagebeforeshow(){
    // 乗車予定をデータストアからロードする(全ての予定データをロード)
    loadRideAll(function(){
      // セレクトメニューに「使用されている全ての日付」をセットする
      showRideDates($('#selRideDate'));
      // 対象日付の乗車予定リストを初期表示する
      $('#selRideDate').trigger('change');
    });
  }
  
  // 日付変更時
  $(this).on('change', '#selRideDate', function(){
    // 日付変更時に表示を更新する
    showRideList($('#lvTTRideList'), gRides, $('#selRideDate').val());
  });
  

• 乗車予定一覧を表示する

  
  var gCurRides = []; // 表示した乗車予定を保持するオブジェクト配列
  
  function showRideList($lv, rides, dateStr){
    var lvItem = '';
    $lv.empty(); // リストビューをクリアする
    gCurRides.length = 0; // 表示データをクリアする
  
    for (var i=0; i < rides.length; i++ ){
      if (rides[i].ride_date == dateStr){ // 指定された乗車日付のデータのみ表示
        lvItem += '<li data-idxride="' + i + '">' +
          rides[i].on_stname + ' (' + rides[i].on_time + ') - ' + 
          rides[i].off_stname + ' (' + rides[i].off_time + ')' +
          '<span class="ui-li-aside">' + rides[i].on_trno + '</span>';
        gCurRides.push(rides[i]); // 表示したデータを保持
      }
    }
    $lv.append(lvItem); 
    $lv.listview('refresh');
  }
  

• 実行例
  
  日付を変えると表示が更新される。