WIP timeline, interactive selection mode

frontend/app/components/wp-table/timeline/cell-renderer/timeline-cell-renderer.ts

@@ -1,7 +1,7 @@
 import {WorkPackageResourceInterface} from "../../../api/api-v3/hal-resources/work-package-resource.service";
 import {
   RenderInfo, calculatePositionValueForDayCount, timelineElementCssClass,
-  calculatePositionValueForDayCountingPx
+  calculatePositionValueForDayCountingPx, timelineMarkerSelectionStartClass
 } from "../wp-timeline";
 import {classNameLeftHandle, classNameRightHandle} from "../wp-timeline-cell-mouse-handler";
 import * as moment from 'moment';
@@ -235,7 +235,7 @@ export class TimelineCellRenderer {
       bar.style.backgroundImage = null; // required! unable to disable "fade out bar" with css
 
       if (renderInfo.viewParams.selectionModeStart === "" + renderInfo.workPackage.id) {
-        jQuery(bar).addClass("selection-start");
+        jQuery(bar).addClass(timelineMarkerSelectionStartClass);
         // bar.style.cursor = "not-allowed !important";
         bar.style.background = null;
       }

frontend/app/components/wp-table/timeline/wp-timeline-container.directive.ts

@@ -26,7 +26,10 @@
 // See doc/COPYRIGHT.rdoc for more details.
 // ++
 import {openprojectModule} from "../../../angular-modules";
-import {TimelineViewParameters, RenderInfo, timelineElementCssClass} from "./wp-timeline";
+import {
+  TimelineViewParameters, RenderInfo, timelineElementCssClass,
+  timelineMarkerSelectionStartClass
+} from "./wp-timeline";
 import {
   WorkPackageResourceInterface,
   WorkPackageResource
@@ -92,14 +95,14 @@ export class WorkPackageTimelineTableController {
     TypeResource.loadAll();
 
     // TODO //////////////////////////////////////
-    (window as any).tt = () => {
-      this.activateSelectionMode("61", endWorkPackage => {
+    (window as any).interactiveSelection = (start: number) => {
+      this.activateSelectionMode(start.toString(), endWorkPackage => {
         console.log("done", endWorkPackage.id);
       });
     };
-    setTimeout(() => {
-      (window as any).tt();
-    }, 3000);
+    // setTimeout(() => {
+    //   (window as any).interactiveSelection(55);
+    // }, 3000);
   }
 
   /**
@@ -173,6 +176,7 @@ export class WorkPackageTimelineTableController {
       this._viewParameters.selectionModeStart = null;
 
       this.$element.removeClass("active-selection-mode");
+      jQuery("." + timelineMarkerSelectionStartClass).removeClass(timelineMarkerSelectionStartClass);
       this.refreshView();
     };
     this._viewParameters.selectionModeStart = start;

frontend/app/components/wp-table/timeline/wp-timeline.ts

@@ -34,6 +34,7 @@ import {WpTimelineHeader} from "./wp-timeline.header";
 import Moment = moment.Moment;
 
 export const timelineElementCssClass = "timeline-element";
+export const timelineMarkerSelectionStartClass = "selection-start";
 
 /**
  *