ポップアップで色を選択できるようにする ガントチャートをWebアプリとしてつくる(10)で色を選択することができるようになったので、今回は選択した色を反映させます。

⇒ 動作確認はこちらから
ただし削除されては困るのでパスワードをかけています。そのため削除と編集の操作はできません

バーの表示色を保存する

バーの表示色を保存する処理が必要です。

クライアント側の処理

タスクを編集するページで反映ボタンが押されたらPostするJsonTextを生成するGetResultJsonText関数が実行されます。バーの表示色をDBに保存できるようにするために、この関数を修正します。

template/edit.htmlのscriptタグ内

サーバーサイドにおける処理

DBにバーの色も保存しなければならないので、タスク情報を保存するテーブルを作成する関数を修正します。

index.php

実際にDBに登録するためのSaveToSqlite関数も修正します。

template/page.htmlの{SCRIPT}部分へ挿入するスクリプトを取得する関数も修正が必要です。更新処理をするときにテーブルが作り直されるのですが、古いテーブルの場合、[“Color”]はを取得することができません。そのため処理を切り分ける必要があります。

保存したバーの色を反映させる

DBへのデータの登録と取得ができるようになったら新しく読み取ったデータで変更されたバーの色を表示できるようにします。

クライアント側における処理

まずTaskクラスとGanttChartクラスを修正しなければなりません。

js/gantt-chart.js

新しい要素が増えたのでGanttChartクラスのSetSchedules関数、SetSchedule関数、DrawBand関数を修正します。長々と書いているけど修正する部分はわずかです。

タスクを編集するページにアクセスしたらバーの表示色が表示されるようになっていなければなりません。

template/edit.htmlのscriptタグ内

AddTask関数も引数が追加されています。最後の引数がundefinedの時はバーの色は’rgb(0, 0, 255)’です。