Try Lifelog

前記事で作成したアプリケーションのコード覚え書き。

• 乗車日リストを抽出・表示する
  乗車データ(rides)からユニークな乗車日を抽出し、上パネルの左のデータグリッドに表示する。配列に関するユーティリティ関数をいくつか整備した(重複削除・ソート・フィルター)。(xuarray.js)

  // JavaScript
  
  function showDgdRideDates(rides){
    // 乗車データから乗車日が重複しているものを削除する
    var _rides = xua_uniqueObjectArray(rides, 'ride_date');
    // 乗車日でソートする
    _rides = xua_sortObjectArray(_rides, 'ride_date');
    // データグリッドに表示する
    $('#dgdRideDates').datagrid({
      showHeader: false,
      columns: [[{
        field: 'ride_date',
        //title: 'ride_date',
        width: 150
      }]],
      data: _rides,
      onSelect: function(rowIndex, rowData){
        // pickupRidedate(rowData); // 日付が選択されたときのイベントハンドラ
      }
    });
  }
  

• 乗車日が選択された時の動作(1)
  選択された乗車日に対応する｢乗車データ｣を、上パネルの右のデータグリッドに表示する。

  // JavaScript
  
  // 選択された乗車日付に対応する乗車データを表示する
  gCurRides = xua_filter(gRides, 'ride_date', ride_date);
  $('#dgdCurRides').datagrid({ data: gCurRides });
  

• 乗車日が選択された時の動作(2)
  選択された乗車日に対応する｢行動データ｣を検索する。
  ・存在する場合は、得られた行動データリストを左パネルのデータグリッドに表示する。
  ・存在しない場合は、新規に行動データを作成し保存する。

  // JavaScript
  
  // 選択された乗車日付に対応する行動予定データを非同期ロードする
  loadTimeslot(ride_date, function(ts){
    
    if (ts){ // 対応する行動予定データが存在する
      gCurTimeslots = ts;
      $('#dgdTimeslots').datagrid({ data: gCurTimeslots });
      
      // 行動予定データのうちタイプが 'stay'のものを抽出し、地図にマーカーを表示する
      var timeslots_stay = xua_filter(gCurTimeslots, 'slot_type', 'stay');		
      xumap_displayMarkers(gMap, timeslots_stay, 'loc_lat', 'loc_lng', gMarkersTimeslot);
  
    } else { // 対応する行動予定データが存在しない
      // 行動データを作成する
      gCurTimeslots = createTimeslots( gCurRides);	
      $('#dgdTimeslots').datagrid({ data: gCurTimeslots });
      // 行動データをデータストアに保存する
      saveTimeslots(gCurTimeslots);	
    }
  });
  

• 行動予定データを作成(変換)する
  乗車予定データから行動予定データを作成する。今のところ、以下のロジックで機械的に作成している。
  ・各乗車予定に対応する行動予定を1件
  タイプは’move’。乗車データから路線名や駅名を取り出している。
  ・各乗車予定の｢後｣に行動予定を1件
  タイプは’stay’。到着駅を場所とし、次の乗車まで滞在する。
  ・最初の乗車予定の｢前｣に1件
  タイプは’stay’。最初の乗車駅を場所とする。
  すなわち、乗車予定データが N件の場合、作成される行動予定データは 2*N+1 件になる。行動予定データには、経緯度や自動チェックイン用の地点IDが含まれるが、これらのデータは駅データベース(kind: xRWStation)から取得する。(データの作成時ではなく保存時に取得する。これは、データストアからの取得は非同期的に行われるため。)
• 行動予定データを保存する
  作成した各行動予定(timeslot)データをデータストアに保存する。他テーブル(xRWStation)からは、非同期的に取得するため、
  ・メモリ上のデータをいったん保存し、
  ・他テーブルからのデータ取得完了後に追加保存、
  というステップで処理する。

  // JavaScript
  
  //// timeslotデータをデータストアに新規保存する
  function saveTimeslots(curTimeslots){
    for (var j = 0; j < curTimeslots.length; j++) {
    (function(){
      var aTimeslot = curTimeslots[j];
      // 現在メモリ上にある内容を保存する
      gDSTimeslot.dbAdd(curTimeslots[j].slot_key, curTimeslots[j], function(res){
        // この場所に対応する経緯度などの情報をロードし追加保存する
        saveTimeslotFromRWStation(aTimeslot);
      });
    })();
    }
  }
  
  //// 指定されたtimeslotデータに対応する駅データをロードし、
  //// データストアに追加保存(更新)する
  function saveTimeslotFromRWStation(timeslot){
    
    // 駅コードをキーとして検索実行
    var query = 'station_cd:' + timeslot.rw_station_cd1;
  
    gDSRWStation.dbRev('', query, function(d){
      if(d){
        // 駅コードは重複しないので、最初の検索結果が得られるデータ
        timeslot.loc_frsq = d[0].loc_frsq;
        timeslot.loc_loct = d[0].loc_loct;
        timeslot.loc_lat = d[0].lat;
        timeslot.loc_lng = d[0].lon;
        gDSTimeslot.dbUpd(timeslot.slot_key, timeslot, function(res){
        
        });
    
      } else {
        console.debug('unknown RWStation:' + timeslot.loc_name);
      }
    });
  }
  

• 乗車日が選択された場合の動作(3)
  対応する行動予定データの経緯度から、地図にマーカーを表示する。新規に行動予定を作成した場合は、経緯度の取得が遅延することがある。
• 行動予定が選択されたときの動作

左パネルの行動予定リストから行動予定が選択されたら、右パネルにその詳細を表示する。地点IDが設定されている場合は、foursquareやロケタッチの地点ページへのリンクを有効にする。

• 画面イメージ
  
  

以前、列車時刻表から乗車予定データを作成したが、これをGoogleカレンダーなどのスケジューラに登録するアプリケーションを作る。

時刻表アプリで保存した乗車予定の例はこういう感じ。

これを以下のような行動予定データに変換する。

乗車予定は、「A駅－B駅」「B駅－C駅」という形式になっているが、これを「A駅(滞在)」「A駅－B駅(移動)」「B駅(滞在)」「B駅－C駅(移動)」「C駅(滞在)」という形式に変換する。今のところ変換は一方向で、情報を手動で追加する機能はない。
作成したアプリケーションは以下のイメージ。(xtsplan03.html)

データストアのkind名
・乗車予定データ：xRide
・行動予定データ：xTimeslot