Создание приложения планировщика с компонентами диаграммы Ганта React.js и DlhSoft

npm install http://DlhSoft.com/Packages/DlhSoft.GanttChartHyperLibrary.tar

Это поместит набор JavaScript и связанных файлов в подпапку node_modules/DlhSoft.GanttChartHyperLibrary. Вам нужно скопировать некоторые из них оттуда в папки src и public, как указано ниже:

cp node_modules/DlhSoft.GanttChartHyperLibrary/*.HTML.Controls.js public
cp node_modules/DlhSoft.GanttChartHyperLibrary/*.React.Components.jsx src

В частности, модули расширения компонента React должны быть помещены в папку src, чтобы их можно было использовать во время сборки проекта, в то время как основные функции JavaScript должны быть просто доступны в папке размещения на стороне сервера, общедоступно.

Конечно, общедоступный код JavaScript должен быть каким-то образом загружен, чтобы он был доступен во время выполнения. Это можно сделать «классически», добавив следующие ссылки на скрипты в public/index.html в разделе ‹html›/‹head›:

<script src="DlhSoft.Data.HTML.Controls.js"></script>
<script src="DlhSoft.ProjectData.GanttChart.HTML.Controls.js"></script>

А для части React вам просто нужно импортировать соответствующие модули прямо в начало src/App.js:

import { ScheduleChartView } from './DlhSoft.ProjectData.GanttChart.React.Components';

Теперь вернемся к экземпляру ScheduleChartView. Давайте определим некоторые значения-заполнители для элементов — связанные с resourcesvariable, settings, лицензией и onItemChanged (функция) необходимые аргументы. Непосредственно над оператором return в App.js добавьте следующие строки кода:

let resource1 = { content: 'Resource 1' };
let resource2 = { content: 'Resource 2' };
let resources = [ resource1, resource2 ];

let settings = { };

let license = '…';

function onItemChanged(resource, propertyName, isDirect, isFinal) {
  console.log(propertyName + ' changed for ' + resource.content + '.');
}

Конечно, это выше показывает только две строки в диаграмме расписания, а столбцов диаграммы Ганта вообще нет. Пришло время загрузить данные из базы данных или просто сгенерировать несколько фиктивных значений, как мы сделаем ниже, и соответствующим образом настроить параметры.

Мы предполагаем, что наши ресурсы на самом деле представлены командой разработчиков, и что их работа должна быть выполнена в январе 2023 года. Элементы диаграммы Ганта для представления в приложении — также могут перемещаться между разработчиками (например, для обеспечения соблюдения сроков). и навыки правильно сбалансированы) — это задачи по программированию в проекте. Некоторые из них также имеют определенные ограничения зависимостей:

let resource1 = { content: 'Diane' };
let resource2 = { content: 'John' };
…
let resources = [resource1, resource2, …];

let task1_1 = { content: 'Web-Based To-Do List App', start: new Date(2023, 1-1, 2, 8), finish: new Date(2023, 1-1, 3, 16) };
let task1_2 = { content: 'Restaurant Review Forum', start: new Date(2023, 1-1, 5, 8), finish: new Date(2023, 1-1, 6, 16) };
let task1_3 = { content: 'Real-Time Chat Room', start: new Date(2023, 1-1, 10, 8), finish: new Date(2023, 1-1, 12, 16) };
let task2_1 = { content: 'E-Commerce Site for Handmade Goods', start: new Date(2023, 1-1, 4, 8), finish: new Date(2023, 1-1, 6, 16) };
let task2_2 = { content: 'Online Course Platform', start: new Date(2023, 1-1, 9, 8), finish: new Date(2023, 1-1, 12, 16) };
…

resource1.ganttChartItems = [ task1_1, task1_2, task1_3 ];
resource2.ganttChartItems = [ task2_1, task2_2 ];
…

task1_2.predecessors = [ { item: task1_1 } ];
task2_2.predecessors = [ { item: task1_2 }, { item: task2_1 } ];
…

let settings = {
  gridWidth: '120px',
  timelineStart: new Date(2023, 1-1, 1),
  timelineFinish: new Date(2023, 2-1, 1),
  currentTime: new Date(2023, 1-1, 1, 12),
  itemHeight: 32,
  hourWidth: 7.5,
  isTaskCompletionReadOnly: true,
  areStandardTaskLabelsVisible: true,
  standardBarStyle: 'fill: #d9d2e980; stroke: #005c9e;',
  standardLabelStyle: 'color: #333; background: #d9d2e9;',
  areTaskPredecessorsReadOnly: true,
  areTaskDependenciesVisible: true,
  areTaskDependencyConstraintsEnabled: true,
  isMouseWheelZoomEnabled: false,
  alternativeItemStyle: 'background-color: #f0f0f080',
  alternativeChartItemStyle: 'fill: #f4f4f480'
};

Наконец, давайте также обновим src/App.css, удалив исходные стили App, и вместо этого просто добавим поле для тела документа:

body {
    margin: 10px;
}

И, если хотите, вы можете улучшить пользовательский интерфейс, используя отдельную тему, которую вы можете скачать из нашего демо-приложения:

mkdir temp
cd temp
curl https://dlhsoft.com/GanttChartHyperLibrary/Demos/Samples/JavaScript/GanttChartView/MainFeatures.zip -o MainFeatures.zip
unzip MainFeatures.zip MainFeatures/themes.js
cp MainFeatures/themes.js ../public
cd ..
rm -rd temp

… и снова отредактируйте public/index.html, чтобы добавить ссылку на themes.js:

<script src="themes.js"></script>

… затем вызовите initializeGanttChartTheme в коде src/App.js непосредственно перед возвратом вывода. Обратите внимание на вызов адресации окна, который позволяет обойти правила React и получить доступ к внешнему вызову JavaScript:

window['initializeGanttChartTheme'](settings, 'Generic-blue');

И вот, мы действительно готовы к работе!

Кстати, конечный пользователь может переназначить задачи, чтобы они начинались в разные дни или в другое время, перетаскивая их по горизонтали, и назначать их разным ресурсам, перетаскивая их вертикально после наведения курсора на их нижнюю часть панели.

Для справки, вот весь репозиторий git. Не стесняйтесь копировать и адаптировать код в свое собственное приложение и наслаждайтесь!