予定作成アプリ(PC版)のレベルアップ(2) – 予定の保存 -

前記事に続いて、予定作成アプリをレベルアップする。予定を保存する際、これまでは「削除→新規登録」していたが、今回の修正で「既存の予定は更新」し、「新しい予定は新規登録」するように変更する。以下、処理ロジックを説明する。

• 事前準備
• 処理用のバッファ(gSpotPlanBuf)を用意する
  単なる配列で、データストアに保持するのとほぼ同じオブジェクトを保持するが、このページ専用のプロパティ「ステータス(xxx_status)」を有する。
• 画面上のバッファ(item_key)を用意する
  予定表テーブルを構築する際に、画面に表示しないクラス (class=item_key)を定義し、以下の’p項目’を使って画面上でも値を保持する。(クリップデータのテーブルからこのテーブルにドロップした時は、ドラッグしてきた内容がそのままコピーされるので、クリップデータテーブルを構築する際にも同様のp項目を設定しておく。)
  • spot_key
    ロケタッチやfoursquareのスポットID。
  • spot_name
    スポット名。(冗長項目)
  • plan_key
    データストアからロードしたものは保存時のキー。画面上で追加したものは固定の文字列’newrow’がセットされている。
  • status
    データストアからロードしたものは’loaded’。画面上で追加したものは’created’がそれぞれセットされている。

  例えば、画面で次のように表示されている部分(スポット名)の実際のHTMLはこんな感じ。
  

  <!-- HTML -->
  <td class="drop droppable" id="txtspot1">スカイツリー カフェ フロア340
    <div class="item_key">
      <p>loct_1227981</p>
      <p>スカイツリー カフェ フロア340</p>
      <p>828_1367224521790</p>
      <p>loaded</p>
    </div>
  </td>
  

以下、コードの流れを説明する。

• 予定作成中の動き
• データストアからロードした予定データをバッファに保持する
  画面と同様、ステータス(xxx_status)を’loaded’とする。
• 画面で予定を追加(ドラッグ＆ドロップ)したらバッファに追加する

ステータスを’created’とする。
通常「予定の数」＝「画面に表示されているテーブル行数」＝「バッファ内のデータ数」になるはずだが、既に予定がある行に別の予定がドロップされた場合は、「画面に表示されているテーブル行数」＜「バッファ内のデータ数」になる点に留意する。

• 行削除ボタンがクリックされたらステータスを変更する
  テーブルから行を削除(ここまでは従来作成済)するとともに、バッファ内のデータのステータスを’deleted’に変更する。
• 予定保存時の動き
• テーブルの上から順にデータストアに保存していく
  ただし、1行目と最下行は固定行で予定データがないので、2行目から処理していく。なお、空白行は処理対象外。
• ステータスが’loaded’のものはデータストアを更新する
  もともとデータストアにあったものなので、エンティティのキーを使ってデータストアを更新し、ステータスを’done’に変更する。なお、更新の際、シーケンス番号を1増やしておく(Google Calendar対応)。やや冗長だが、例えばキーは以下のようにして取得できる。

  // JavaScript
  var rows = $('#tblPlanSpot1')[0].rows; // テーブルの全行
  for (var i = 1; i < rows.length-1; i++) {
    var c_row = $(rows[i])[0]; // 現在の処理行
    var c_spot = $(c_row).find('.item_key');// クラスを見つける
    var plan_key = $(c_spot).find('p:eq(2)').text();// 3番目のp項目がキー
  }
  

• ステータスが’created’のものはデータストアに新規追加する
  各プロパティに値を設定して新規登録し、ステータスを’done’に変更する。
• 全てのテーブル行の処理終了後、バッファの内容を確認する
  先の「画面に表示されているテーブル行数」＜「バッファ内のデータ数」などに対応する。
• ステータスが’deleted’の予定をデータストアから削除する
  画面上で削除されたものを、データストアからも削除する。
• ステータスが’loaded’のままの予定をデータストアから削除する
  データストアからロードされた予定のうち、別の予定で「上書き」されたものなので、データストアから削除する。(そのまま画面に残っている予定は、先の処理でステータスが’done’に変更されているはず。)