WIP Timeline: Added Dummy Control

frontend/app/components/wp-table/timeline/wp-timeline.dummy-control.directive.ts

@@ -0,0 +1,77 @@
+// -- copyright
+// OpenProject is a project management system.
+// Copyright (C) 2012-2015 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 {openprojectModule} from "../../../angular-modules";
+import {WorkPackageTimelineService} from "./wp-timeline.service";
+import IDirective = angular.IDirective;
+import IScope = angular.IScope;
+
+
+const template = `
+<div style="background-color: #c6eecc">
+
+    HScroll: <input type="number" 
+                    ng-model="$ctrl.hscroll" 
+                    ng-change="$ctrl.updateView()" 
+                    style="display: inline-block; width: 200px"/>
+
+    Zoom: <input type="number" 
+                 ng-model="$ctrl.zoom" 
+                    ng-change="$ctrl.updateView()" 
+                 style="display: inline-block; width: 200px"/>
+  
+</div>
+`;
+
+
+class WorkPackageTimelineControlController {
+
+  hscroll: number;
+
+  zoom: number;
+
+  /*@ngInject*/
+  constructor(private workPackageTimelineService: WorkPackageTimelineService) {
+    this.hscroll = workPackageTimelineService.viewParameterSettings.scrollOffsetInDays;
+    this.zoom = workPackageTimelineService.viewParameterSettings.pixelPerDay;
+  }
+
+  updateView() {
+    this.workPackageTimelineService.viewParameterSettings.pixelPerDay = this.zoom;
+    this.workPackageTimelineService.viewParameterSettings.scrollOffsetInDays = this.hscroll;
+    this.workPackageTimelineService.refreshView();
+  }
+
+}
+
+
+openprojectModule.component("timelineControl", {
+  controller: WorkPackageTimelineControlController,
+  template: template
+});
+

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

@@ -53,7 +53,7 @@ describe.only('WorkPackageTimelineService', () => {
 
   it('should use the earliest start date ', (done: any) => {
 
-    const earlier = timelineService.viewParameters.dateDisplayStart.subtract(1, "day");
+    const earlier = timelineService.getViewParameters().dateDisplayStart.subtract(1, "day");
     const inOneMonth = moment().add(1, "month");
 
     const workPackage1: WorkPackage = new WorkPackageResource({_links: {self: ""}});

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

@@ -33,6 +33,19 @@ import Observable = Rx.Observable;
 import Moment = moment.Moment;
 
 
+/**
+ *
+ */
+export class TimelineViewParametersSettings {
+
+  showDurationInPx = true;
+
+  pixelPerDay = 10;
+
+  scrollOffsetInDays = 0;
+
+}
+
 /**
  *
  */
@@ -40,22 +53,18 @@ export class TimelineViewParameters {
 
   readonly now: Moment = moment({hour: 0, minute: 0, seconds: 0});
 
+  settings: TimelineViewParametersSettings = new TimelineViewParametersSettings();
+
   dateDisplayStart: Moment = moment({hour: 0, minute: 0, seconds: 0});
 
   dateDisplayEnd: Moment = this.dateDisplayStart.clone().add(1, "day");
 
-  showDurationInPx = true;
-
-  pixelPerDay = 10;
-
-  scrollOffsetInDays = 0;
-
   get maxWidthInPx() {
-    return this.dateDisplayEnd.diff(this.dateDisplayStart, "days") * this.pixelPerDay;
+    return this.dateDisplayEnd.diff(this.dateDisplayStart, "days") * this.settings.pixelPerDay;
   }
 
   get scrollOffsetInPx() {
-    return this.scrollOffsetInDays * this.pixelPerDay;
+    return this.settings.scrollOffsetInDays * this.settings.pixelPerDay;
   }
 
 }
@@ -76,8 +85,8 @@ export interface RenderInfo {
  * @returns {string}
  */
 export function calculatePositionValueForDayCount(viewParams: TimelineViewParameters, days: number): string {
-  const daysInPx = days * viewParams.pixelPerDay;
-  if (viewParams.showDurationInPx) {
+  const daysInPx = days * viewParams.settings.pixelPerDay;
+  if (viewParams.settings.showDurationInPx) {
     return daysInPx + "px";
   } else {
     return (daysInPx / viewParams.maxWidthInPx * 100) + "%";
@@ -113,24 +122,31 @@ export class WorkPackageTimelineService {
       elem.style.marginLeft = renderInfo.viewParams.scrollOffsetInPx + "px";
     };
 
-    setTimeout(() => {
-      console.log("timeout1");
-      this.viewParameters.scrollOffsetInDays = 5;
-      this.refreshViewParameters();
-    }, 2000);
-
-    setTimeout(() => {
-      console.log("timeout2");
-      this.viewParameters.scrollOffsetInDays = -2;
-      this.refreshViewParameters();
-    }, 4000);
+    // setTimeout(() => {
+    //   console.log("timeout1");
+    //   this.viewParameterSettings.scrollOffsetInDays = 5;
+    //   this.refreshView();
+    // }, 2000);
+    //
+    // setTimeout(() => {
+    //   console.log("timeout2");
+    //   this.viewParameterSettings.scrollOffsetInDays = -2;
+    //   this.refreshView();
+    // }, 4000);
+  }
+
+  /**
+   * Returns a defensive copy of the currently used view parameters.
+   */
+  getViewParameters(): TimelineViewParameters {
+    return _.cloneDeep(this._viewParameters);
   }
 
-  get viewParameters() {
-    return this._viewParameters;
+  get viewParameterSettings() {
+    return this._viewParameters.settings;
   }
 
-  refreshViewParameters() {
+  refreshView() {
     this.viewParamsSubject.onNext(this._viewParameters);
   }
 

frontend/app/components/wp-table/wp-table.directive.html

@@ -1,5 +1,8 @@
 <div class="generic-table--container work-package-table--container"
   ng-class="{ '-with-footer': displaySums }">
+
+  <timeline-control></timeline-control>
+
   <div class="generic-table--results-container"
        wp-virtual-scroll-table>
     <table interactive-table class="keyboard-accessible-list generic-table work-package-table">
@@ -166,7 +169,7 @@
               ng-class="::{ '-short': column.name == 'id' }">
           </td>
 
-          <td class="wp-timeline-cell" style="position: relative; background-color: #fcebe4">
+          <td class="wp-timeline-cell" style="position: relative; background-color: #ebfaf5">
           </td>
 
         </tr>