編集した項目をチャートとして表示させる ガントチャートをWebアプリとしてつくる(5)ではタスクを編集して反映ボタンをおすとチャートが表示されるようになりましたが、もう一度編集画面のページに移動するとタスクは一から編集しなおしとなります。今回はこの点を改善します。また削除の機能も追加します。

⇒ 動作確認はこちらから

タスクを編集するページに移動したときもSQLite3のデータを読み出して現在存在するカテゴリとタスクを再構築すればよいのです。ではそのように作りかえてみましょう。

タスク編集ページに移動したときの処理

/task.phpにアクセスしたときの処理を変更します。sqlite3のDBから読み出したデータをJson形式に変換し、その文字列をタグのなかにいれています。これをクライアント側で処理します。

task.php

要素の再構築

クライアント側の処理です。task.phpが読み込まれたらRebuildingTaskElements関数が実行されます。

GetJsonText関数が生成した部分をJSON.parse関数でオブジェクトに変換します。そしてforEachでデータを取り出してここからカテゴリとタスクを表示させるためのdivタグ、inputタグなどを生成します。これでこれまで存在するカテゴリとタスクを復元することができます。

task2.js

AddCategory関数とAddTask関数の変更

それからAddCategory関数とAddTask関数の引数が追加されています(ドラッグアンドドロップでタスクを移動させる ガントチャートをWebアプリとしてつくる(4)では引数はない)。それでAddCategory関数とAddTask関数は書き直しになります。

AddCategory関数の変更と削除ボタンの追加

まず新しいAddCategory関数を示します(古いものは削除しておいてください)。もし引数がないのであればこれまでと同じ処理(カテゴリ名は’新しいカテゴリ’とする)をおこないます。引数がある場合はそのカテゴリ名で新しい要素をつくります。

それからこれまで追加されたものを削除することができませんでした。今回は削除の機能も追加します。

削除ボタンが押されたら削除します。ただしカテゴリ内にタスクがある場合は削除できません。

AddTask関数の変更と削除ボタンの追加

次に新しいAddTask関数を示します(古いものは削除しておいてください)。これも削除ボタンをつけます。

タスクを削除するボタンが押されたときの処理を示します。

チャート画面で前の月、次の月に移動できるようにする

チャート画面でも前の月、次の月に移動できるようにindex.htmlを修正します。

GanttChartクラスの修正

そしてgantt-chart.jsを修正します。

まずチャートを上書きしようとすると前のチャートが消えずにその下に追加されてしまうのでチャートを消去させる関数を追加します。そのさい40というマジックナンバーが気になるので別の変数にしています。

このなかでGoEditTask関数、Prev関数、Next関数、ShowYearMonth関数、ShowChart関数、ShowSchedules関数が呼び出されていますが、これらの関数の定義は以下のようになっています。

GoEditTask関数はボタンをクリックしたらタスクを編集するページ(./task)へ移動するだけの関数です。前月、次月へ移動するボタンをつくったので全部ボタンにしてしまいました。

トップページにアクセスすると現在の年と月が表示されます。そのための処理を示します。

この月は何日まであるか? 今月の○ヵ月前は何年?

ShowChart関数はチャートを表示させるための関数です。最初に現在日時を取得して今月のチャートを表示させます。

そのあとスケジュールを表示させる関数 ShowSchedules関数が呼び出されます。これはindex.htmlにそのまま書かれています。

GetLastDate関数は表示させようとしている月が何日まであるかを調べる関数です。翌月の1日の前日が何日か調べればその月が何日まであるかわかります。

前月、次月のボタンが押されたときの処理を示します。グローバル変数 monthを増減させているだけです。負数や12よりも大きな数でも大丈夫なのでしょうか?

このように普通に動いてくれます。