ガントチャートライブラリを使用したタスク管理画面の製作④

タスク管理システム(仮)
http://task.imo-tikuwa.com/login/

ログイン情報が変わりました。現在、管理者は『ID:admin@imo-tikuwa.com、Pass:zzzzzzzz』の組み合わせでログインできると思います。

更新内容

  • lightboxのタスク開始日と終了日をそれぞれdatepickerで選択できるよう改修
  • フォームをbootstrapっぽく修正
  • 管理者の機能としてメンバー登録/更新/検索/削除処理を追加
  • メンバーログイン機能を追加
  • 管理者の機能として、1タスク辺り1人の担当者をアサインできるように改修

lightboxのタスク開始日と終了日をそれぞれdatepickerで選択できるよう改修

デフォルトの年月日をそれぞれ選択する形式だと1つタスク登録をするのにも時間が掛かってしまうので、やや強引ですがdatepickerを使用した形に修正しました。

JavaScriptのDate型オブジェクトをフォーマットするのに以下のサイトのスクリプトを使用しています。
JavaScript – 日付フォーマットなど 日付系処理 – Qiita
datepickerは以下のライブラリを使用しています。
eternicode/bootstrap-datepicker · GitHub

以下のようなコードになりました。

gantt.attachEvent("onLightbox", function(id) {
  // 元の3つに分かれたセレクトボックスを非表示。開始日時と終了日時の入力欄を追加
  $(".gantt_section_time > *").css("display", "none");
  $(".gantt_section_time").append("<div style='height:22px;' class='gantt_cal_ltext'><input type='text' class='date-from w100'/> - <input type='text' class='date-to w100'/></div>");

  // タスク情報を取得。2つのテキストボックスにそれぞれ、開始日時と終了日時をYYYY/MM/DD形式にフォーマットした文字列をセット
  var task = gantt.getTask(id);
  $(".date-from").val(formatDate(task.start_date, 'YYYY/MM/DD'));
  $(".date-to").val(formatDate(task.end_date, 'YYYY/MM/DD'));

  // bootstrap-datepickerを初期化。日付を変更したときの処理を追加
  $('.date-from').datepicker({
    format: "yyyy/mm/dd",
    clearBtn: true,
    language: "ja",
    autoclose: true
  }).on("changeDate", function(e){
    var fromDate = e.dates[0];
    $(".gantt_section_time select:eq(0)").val(fromDate.getFullYear());
    $(".gantt_section_time select:eq(1)").val(fromDate.getMonth());
    $(".gantt_section_time select:eq(2)").val(fromDate.getDate());
  });
  $('.date-to').datepicker({
    format: "yyyy/mm/dd",
    clearBtn: true,
    language: "ja",
    autoclose: true
  }).on("changeDate", function(e){
    var toDate = e.dates[0];
    $(".gantt_section_time select:eq(3)").val(toDate.getFullYear());
    $(".gantt_section_time select:eq(4)").val(toDate.getMonth());
    $(".gantt_section_time select:eq(5)").val(toDate.getDate());
  });
  return true;
});

元の6つのセレクトボックスは非表示にし、datepickerで日付を選択したときに非表示のセレクトボックスの値を更新しています。

管理者の機能としてメンバー登録/更新/検索/削除処理を追加

普通の管理機能です。メンバーの管理は今のところ管理者のみ行える設定です。

メンバーの機能について

メンバーは自分にアサインされたタスクの進捗率を更新することができます。
プロジェクトの管理、アカウントの追加はできません。
自分にアサインされたタスクのみ進捗が更新可能。lightboxは表示できません。

という設定です。

今後の予定

  • ソースが汚いので綺麗にする
  • スケジュールを管理する機能をdhtmlXSchedulerを使用して作成してみる
スポンサーリンク
GoogleAdsense



GoogleAdsense



シェアする