openproject/frontend/app/components/wp-table/timeline/wp-timeline-global.directive.ts

// -- copyright
// OpenProject is a project management system.
// Copyright (C) 2012-2017 the OpenProject Foundation (OPF)
//
// This program is free software; you can redistribute it and/or
// modify it under the terms of the GNU General Public License version 3.
//
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
// Copyright (C) 2006-2013 Jean-Philippe Lang
// Copyright (C) 2010-2013 the ChiliProject Team
//
// This program is free software; you can redistribute it and/or
// modify it under the terms of the GNU General Public License
// as published by the Free Software Foundation; either version 2
// of the License, or (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program; if not, write to the Free Software
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
//
// See doc/COPYRIGHT.rdoc for more details.
// ++
import IDirective = angular.IDirective;
import IComponentOptions = angular.IComponentOptions;
import {timelineElementCssClass, TimelineViewParameters} from "./wp-timeline";
import {WorkPackageTimelineCell} from "./wp-timeline-cell";
import {States} from "../../states.service";
import {HalRequestService} from "../../api/api-v3/hal-request/hal-request.service";
import {RelationResource} from "../../api/api-v3/hal-resources/relation-resource.service";
import {CollectionResource} from "../../api/api-v3/hal-resources/collection-resource.service";
import {debugLog} from "../../../helpers/debug_output";
import {WorkPackageResource} from "../../api/api-v3/hal-resources/work-package-resource.service";
import IScope = angular.IScope;


export const timelineGlobalElementCssClassname = 'timeline-global-element';

function newSegment(vp: TimelineViewParameters,
                    classId: string,
                    color: string,
                    top: number,
                    left: number,
                    width: number,
                    height: number): HTMLElement {

  const segment = document.createElement('div');
  segment.classList.add(timelineElementCssClass, timelineGlobalElementCssClassname, classId);
  segment.style.position = 'absolute';
  segment.style.cssFloat = 'left';
  segment.style.backgroundColor = 'blue';
  // segment.style.backgroundColor = color;
  segment.style.marginLeft = vp.scrollOffsetInPx + 'px';
  segment.style.top = top + 'px';
  segment.style.left = left + 'px';
  segment.style.width = width + 'px';
  segment.style.height = height + 'px';
  return segment;
}

export class TimelineGlobalElement {

  static readonly timelineGlobalElementIdCssClass = "timeline-global-element-id-";

  private static nextId = 0;

  readonly id = TimelineGlobalElement.nextId++;

  readonly classId = TimelineGlobalElement.timelineGlobalElementIdCssClass + this.id;

  from: string;

  to: string;

}

export class WpTimelineGlobalService {

  private workPackageIdOrder: string[] = [];

  private viewParameters: TimelineViewParameters;

  private cells: {[id: string]: WorkPackageTimelineCell} = {};

  private elements: TimelineGlobalElement[] = [];

  constructor(scope: IScope, states: States, halRequest: HalRequestService) {
    states.table.rows.observeOnScope(scope)
      .subscribe(rows => {
        this.workPackageIdOrder = rows.map(wp => wp.id.toString());

        halRequest.get(
          '/api/v3/relations',
          {
            filter: [{ involved: {operator: '=', values: this.workPackageIdOrder } }]
          }).then((collection: CollectionResource) => {
            this.removeAllElements();
            collection.elements.forEach((relation: RelationResource) => {
              const fromId = WorkPackageResource.idFromLink(relation.from.href!);
              const toId = WorkPackageResource.idFromLink(relation.to.href!);
              this.displayRelation(fromId, toId);
            });
            this.renderElements();
          });
      });
  }

  updateViewParameter(viewParams: TimelineViewParameters) {
    this.viewParameters = viewParams;
    this.update();
  }

  updateWorkPackageInfo(cell: WorkPackageTimelineCell) {
    this.cells[cell.latestRenderInfo.workPackage.id] = cell;
    this.update();
  }

  removeWorkPackageInfo(id: string) {
    delete this.cells[id];
    this.update();
  }

  displayRelation(from: string, to: string): number {
    const elem = new TimelineGlobalElement();
    elem.from = from;
    elem.to = to;
    this.elements.push(elem);
    this.update();
    return elem.id;
  }

  removeElement(id: number) {
    jQuery("." + TimelineGlobalElement.timelineGlobalElementIdCssClass + id).remove();
    _.remove(this.elements, elem => elem.id == id);
  }

  private update() {
    this.removeAllVisibleElements();
    this.renderElements();
  }

  private removeAllElements() {
    this.removeAllVisibleElements();
    this.elements = [];
  }

  private removeAllVisibleElements() {
    jQuery('.' + timelineGlobalElementCssClassname).remove();
  }

  private renderElements() {
    if (this.viewParameters === undefined) {
      debugLog('renderElements() aborted - no viewParameters');
      return;
    }

    const vp = this.viewParameters;

    for (let e of this.elements) {
      jQuery('.' + e.classId).remove();

      const idxFrom = this.workPackageIdOrder.indexOf(e.from);
      const idxTo = this.workPackageIdOrder.indexOf(e.to);

      const startCell = this.cells[e.from];
      const endCell = this.cells[e.to];

      if (idxFrom === -1 || idxTo === -1 || _.isNil(startCell) || _.isNil(endCell)) {
        continue;
      }

      if (!startCell.canConnectRelations() || !endCell.canConnectRelations()) {
        continue;
      }

      const directionY = idxFrom < idxTo ? 1 : -1;
      let lastX = startCell.getRightmostPosition();
      let targetX = endCell.getLeftmostPosition();
      const directionX = targetX >= lastX ? 1 : -1;

      // start
      if (!startCell) {
        continue;
      }

      const startLength = 13;
      startCell.timelineCell.appendChild(newSegment(vp, e.classId, 'green', 19, lastX, startLength, 1));
      lastX += startLength;

      if (directionY === 1) {
        startCell.timelineCell.appendChild(newSegment(vp, e.classId, 'red', 19, lastX, 1, 22));
      } else {
        startCell.timelineCell.appendChild(newSegment(vp, e.classId, 'red', -1, lastX, 1, 22));
      }

      // vert segment
      for (let index = idxFrom + directionY; index !== idxTo; index += directionY) {
        const id = this.workPackageIdOrder[index];
        const cell = this.cells[id];
        if (_.isNil(cell)) {
          continue;
        }
        cell.timelineCell.appendChild(newSegment(vp, e.classId, 'blue', 0, lastX, 1, 42));
      }

      // end
      if (directionX === 1) {
        if (directionY === 1) {
          endCell.timelineCell.appendChild(newSegment(vp, e.classId, 'green', 0, lastX, 1, 19));
          endCell.timelineCell.appendChild(newSegment(vp, e.classId, 'blue', 19, lastX, targetX - lastX, 1));
        } else {
          endCell.timelineCell.appendChild(newSegment(vp, e.classId, 'green', 19, lastX, 1, 22));
          endCell.timelineCell.appendChild(newSegment(vp, e.classId, 'blue', 19, lastX, targetX - lastX, 1));
        }
      } else {
        if (directionY === 1) {
          endCell.timelineCell.appendChild(newSegment(vp, e.classId, 'green', 0, lastX, 1, 8));
          endCell.timelineCell.appendChild(newSegment(vp, e.classId, 'blue', 8, targetX - 10, lastX - targetX + 11, 1));
          endCell.timelineCell.appendChild(newSegment(vp, e.classId, 'green', 8, targetX - 10, 1, 11));
          endCell.timelineCell.appendChild(newSegment(vp, e.classId, 'red', 19, targetX - 10, 10, 1));
        } else {
          endCell.timelineCell.appendChild(newSegment(vp, e.classId, 'green', 32, lastX, 1, 8));
          endCell.timelineCell.appendChild(newSegment(vp, e.classId, 'blue', 32, targetX - 10, lastX - targetX + 11, 1));
          endCell.timelineCell.appendChild(newSegment(vp, e.classId, 'green', 19, targetX - 10, 1, 13));
          endCell.timelineCell.appendChild(newSegment(vp, e.classId, 'red', 19, targetX - 10, 10, 1));
        }
      }
    }

  }

}