Try Lifelog

現在の実装では、ロードした路線データ(時刻表データ)をローカルストレージに保存している。ユーザ側で管理できるよう、使用中のローカルストレージの一覧を表示し、削除できるようにする。

• 設定画面(#pgTTSetting)に一覧表を表示する

  <!-- HTML -->
  <ul data-role="listview" id="lvTTSettingLS" data-inset="true"></ul>
  

  ローカルストレージのキー(路線データのファイル名)をリストビューの各行に付加する。

  // JavaScript
  function showLocalStorage(){
    var lvItem = '';
    var lnname = ''; // 路線名
    $('#lvTTSettingLS').empty();
    
    for (var i=0; i<localStorage.length; i++){
      lnname = getObjectByKV(gLines, 'ln_file', localStorage.key(i)).ln_name
      lvItem += '<li data-icon="trash" data-lskey="' + localStorage.key(i) + '">'
        + '<a href="#">'
        + lnname + '<span class="ui-li-aside">' + localStorage.key(i) + '</span>'
        + '</a></li>';
    }
    
    $('#lvTTSettingLS').append(lvItem); $('#lvTTSettingLS').listview('refresh');
  }
  

  実行例：
  

• クリック時のイベントハンドラを定義する
  クリックされたら(確認ダイアログの表示はせずに)、該当する路線データをローカルストレージから削除する。

  // JavaScript
  $(this).on('click', '#lvTTSettingLS li', function(){
    // クリックされた行のキーを取得し、ローカルストレージを削除
    localStorage.removeItem($(this).data('lskey'));
    // ローカルストレージ一覧を表示
    showLocalStorage();
  });
  

前記事に引き続き乗車予定一覧表画面を修正する。

この画面が表示されるのは、
・任意の画面からフッタの’RideList’ボタンをクリックしたとき
・列車から「下車」したとき
で、後者については、下車した駅から別の列車に乗車する可能性が高い。そこで、以下のリンクボタンを追加する。
・下車駅の駅時刻表画面(乗車してきたのと同じ路線)
・駅時刻表の検索画面(下車駅と同じ名称を持つ駅を検索)

なお、この画面を表示する前に、路線データがロード済かを確認し、空の場合(初期状態など)にはこれらのボタンを無効化しておく。

駅の検索は’メイン画面’で行う。ボタンがクリックされたタイミングで、メイン画面の検索ボックスに駅名をセットして検索処理を実行する。

// JavaScript
$($this).on('click', '#btnTTRideListSrcStation', function(){		
  // 検索すべき駅名をセット
  $('#srcTTSrcStations').val( gCurRail.stations[gCurStationIdx].st_name );
  // 検索処理実行
  $('#srcTTSrcStations').trigger('change');
  // メイン画面に遷移
  $.mobile.changePage($('#pgTTMain'));
});

例えば、’会津若松駅’で下車した状態で、乗換駅を検索した結果は以下のとおり。(2路線の駅が検索された。)

あわせてアコーディオンの折り畳み部分にも乗換駅検索ボタンを追加しておく。

乗車予定リストをアコーディオンを使うように変更したので、アイテムに表示したボタンの処理を実現する。

• 列車時刻表ボタン
  この列車の’列車時刻表画面’に移動する。
• 乗車駅/下車駅時刻表ボタン
  この乗車の乗車駅/下車駅の時刻表画面に移動する。
• 削除ボタン
  この乗車を削除する。

• 共通の考え方
  各ボタンは乗車ごとに複数あるので、ボタンごとに同一のクラス(以下の削除ボタンでは “clsBtnRideListDelete”)を指定し、このクラスに対するイベントハンドラを定義する。また、乗車を識別するキーとして、ride_key をdata属性として乗車ごとに指定し、イベントハンドラ内で取り出せるようにする。

  <!-- HTML -->
  <button data-role="button" 
    class="clsBtnRideListDelete"
    data-ridekey="' + rides[i].ride_key + '"
    data-icon="delete">削除
  </button>'
  

  // JavaScript
  // 削除ボタンをクリックした場合の処理
  $($this).on('click', '.clsBtnRideListDelete', function(){
    // クリックした乗車データのキーを取り出す 
    var _ride_key = $(this).data('ridekey');
    // 乗車データを取得
    var _ride = getObjectByKV(gCurRides, 'ride_key', _ride_key);
    // 処理実行
  
  }
  

• 時刻表ボタン
  時刻表への3つのリンクボタンには同じクラスを指定し、同一のイベントハンドラで処理する。(異なるdata属性を指定し、この値で処理内容を分岐する。)　また、時刻表を表示するためには、データのロードが必要なので、選択された乗車から路線を取り出し、路線データをロードする。

  // javascript
  colItem += '<div data-role="collapsible" class="clsColRideList">'
   + '<h3>' + _section + '<span class="ui-li-aside">' + _lnname + '</span></h3>'
   + '<p>' + _trinfo
   + '<button data-role="button" class="clsBtnRideListEdit" data-ridekey="' + rides[i].ride_key + '" data-actmode="mode_train" data-icon="arrow-r">列車時刻表</button>'
   + '<button data-role="button" class="clsBtnRideListEdit" data-ridekey="' + rides[i].ride_key + '" data-actmode="mode_st_on" data-icon="arrow-r">乗車駅時刻表</button>'
   + '<button data-role="button" class="clsBtnRideListEdit" data-ridekey="' + rides[i].ride_key + '" data-actmode="mode_st_off" data-icon="arrow-r">下車駅時刻表</button>'
   + '<button data-role="button" class="clsBtnRideListDelete" data-ridekey="' + rides[i].ride_key + '" data-icon="delete">削除</button>'
   + '</p></div>';
  

  イベントハンドラ

  // JavaScript
  $($this).on('click', '.clsBtnRideListEdit', function(){
  
    var _ride_key = $(this).data('ridekey');
    var _act_mode = $(this).data('actmode'); 
    var _ride = getObjectByKV(gCurRides, 'ride_key', _ride_key); 
  		
    gCurLine = getObjectByKV(gLines, 'ln_key', _ride.ln_key); console.debug(gCurLine);
  
    loadRail(gCurLine, function(){
      switch (_act_mode){
        case 'mode_train':
          gCurTrainIdx = _ride.tr_idx;
          $.mobile.changePage($('#pgTTTrain'));
          break;
        case 'mode_st_on':
          // ...
        case 'mode_st_off':
          // ...
      }
    }
  }
  

前記事の列車時刻表画面のコードイメージ。

// JavaScript
function showTrain(train){

  // listviewの要素格納用
  var lvItem = '';
  // 駅名、駅到着/発車時刻、駅インデックス
  var _st_name, _st_time, _st_idx;
  // 駅アイコン(固定)
  var _imgItem = '<img src="/images/icon-jqm/tt_station.png" class="ui-li-icon"/>';
  // リンクアイコン：現在のステータス(乗車/下車)により切り替え
  var _iconOnOff = (gRideMode == 'mode_off')? 'signin' : 'signout';
  // リンク先：駅時刻表画面
  var _link = (gRideMode == 'mode_off')? '#pgTTStation' : '';//li要素ごと無効にしたので不要
  // 乗車駅の駅インデックス
  var st_on_idx = (train.tr_direction == 'Kudari')? 
    gCurStationIdx : train.tr_timesAr.length - gCurStationIdx - 1;

  setAButtonLabel($('#btnTTTrainInfo'), toTrainInfo(train) + '-' + gCurRail.diaInfo.ln_name );
  $('#lvTTTrain').empty();

  // 駅ごとに順次処理
  for (var i=0; i < train.tr_timesAr.length; i++ ){

    // 通過/運行なしの場合は表示しない
    if (!(train.tr_timesAr[i]=='P'||train.tr_timesAr[i]=='N'||train.tr_timesAr[i]=='X')){
      // 当駅の駅インデックス
      _st_idx = (train.tr_direction == 'Kudari')? i : train.tr_timesAr.length - i - 1;
      // 当駅の駅名
      _st_name = gCurRail.stations[_st_idx].st_name;
      // 当駅の到着時刻/発車時刻
      _st_time = train.tr_timesAr[i] + ' / ' + train.tr_timesDp[i];

      // 現在のステータス(乗車/下車)と乗車駅によってアイテムの有効/無効を変える
      if (gRideMode == 'mode_off' || st_on_idx < i) {
        // 乗車していない(下車)ケース、または当駅が乗車駅より後ろにあるケースは有効
        lvItem += '<li stationIdx="' + _st_idx + '">';
      } else {
        // 乗車中、かつ当駅が乗車駅より前にあるケースはアイテムを無効化
        lvItem += '<li class="ui-disabled" stationIdx="' + _st_idx + '">';
      }
      // 駅時刻表へのリンクと駅名、時刻、乗車/下車画面へのリンク
      lvItem += '<a href="' + _link + '" data-transition="slide">' + _imgItem + _st_name +
      '<span class="ui-li-aside">'  + _st_time + '</span></a>' +
      '<a href="#pgTTRide0" data-transition="slide" data-icon="' + _iconOnOff + '"></a>' +
      '</li>';
    }
  }
  // DOM構築
  $('#lvTTTrain').append(lvItem);
  $('#lvTTTrain').listview('refresh');
}

実行例：
つばさ121号を選択

大宮駅から乗車