前記事で作成したアプリケーションのコード覚え書き。
- 乗車日リストを抽出・表示する
乗車データ(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 Calendar)に自動登録するアプリケーションの開発 | Try Lifelog