自動チェックインアプリ(3) – チェックイン予定表の作成(初期化)

表示したスポットを並べて、チェックイン予定を作成する。出来上がりのイメージは以下のとおりで、右に並んでいる(保存済)スポットを、左の表にドラッグすることで予定表を完成させていく。
xlocplan03.html

• 空の予定表を作成/表示する(1)：initDisp_tblPlan()

初期状態では、時刻だけが入った空の予定表を表示しておく。予定表には、左から「時刻」「スポット名」「行追加ボタン」「行削除ボタン」を並べる。

// JavaScript
function initDisp_tblPlan(){
    var tm = ['09:00', '09:30', (省略) , '17:00'];
    for (gPlan1RowIndex = 0; gPlan1RowIndex < tm.length; gPlan1RowIndex++) {
        $('#tblPlanSpot1').append(getNewRowPlan(gPlan1RowIndex));
        setRowPlan(gPlan1RowIndex,tm[gPlan1RowIndex],''); // 時刻をセットする
    }
}

getNewRowPlan()は空の行(tr/tdタグ)を生成する自作の関数で、まず空行を作ってから時刻(上記の例では9:00,9:30…)を設定していく。

• 予定表を作成する(2)：getNewRowPlan()

getNewRowPlan()で予定表の1行分を作成する。この関数は初期化(ページロード時)以外に、行追加ボタンがクリックされたとき、保存済の予定表を読み込んだときにも呼ばれる。

// JavaScript
function getNewRowPlan(idx){
  var spnTime = '<input id="tspn' + idx + '" class="easyui-timespinner"></input>';
  var txtSpot = ''; // '<div id="txtspot' + idx + '"></div>';    
  var btnAdd = '<button type="button" class="btnAddPlanRow" idx="' + idx + '"></button>';
  var btnDel = '<button type="button" class="btnDelPlanRow" idx="' + idx + '"></button>';
    
  var rowItem = '<tr>';
  rowItem += '<td>' + spnTime + '</td>' // 時刻
  rowItem += '<td class="drop" id="txtspot' + idx + '">' + txtSpot + '</td>';//spot名
  rowItem += '<td>' + btnAdd + btnDel + '</td>'; // 追加ボタン・削除ボタン
  rowItem += '</tr>';
  return rowItem;
}

時刻入力にはjQuery EasyUIの時刻入力ボックスを利用している。後処理を簡単にするために、固有のID(固定文字列’tspn’＋数値)を付与しておく。同様にスポット名には固有のID(‘txtspot’＋数値)を、ボタンにも連番を振っておく。

• 予定表を作成する(3)：setRowPlan()

setRowPlan()は空の行に、時刻・スポット名をセットする自作の関数。

// JavaScript
function setRowPlan(idx, xtime, xspotname){
    $('#tspn' + idx).timespinner({        
        value: xtime,
        required: true,
        width: 70,
        height: 18
    });
    $('#txtspot' + idx).text(xspotname);
    //$('#txtspot' + idx).addClass('drop');
}

このタイミングで、追加した行にドロップできるようにしておく。

• 予定表を作成する(4)：btnAddPlan1Row()

行追加ボタン・削除ボタンをクリックしたときのイベントハンドラを記述する。

• 実行例

ここまでのコードを実行すると以下のようになる。

いくつかの行の時刻を変更・行削除/追加した結果例は以下のとおり。