From 3d43c0ecb89dced5cb4d05a9f2acf86722462a66 Mon Sep 17 00:00:00 2001 From: Roman Roelofsen Date: Fri, 11 Nov 2016 14:52:32 +0100 Subject: [PATCH] WIP Timeline: Added Dummy Control --- .../wp-timeline.dummy-control.directive.ts | 77 +++++++++++++++++++ .../timeline/wp-timeline.service.test.ts | 2 +- .../wp-table/timeline/wp-timeline.service.ts | 64 +++++++++------ .../wp-table/wp-table.directive.html | 5 +- 4 files changed, 122 insertions(+), 26 deletions(-) create mode 100644 frontend/app/components/wp-table/timeline/wp-timeline.dummy-control.directive.ts diff --git a/frontend/app/components/wp-table/timeline/wp-timeline.dummy-control.directive.ts b/frontend/app/components/wp-table/timeline/wp-timeline.dummy-control.directive.ts new file mode 100644 index 0000000000..3c210a76a7 --- /dev/null +++ b/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 = ` +
+ + HScroll: + + Zoom: + +
+`; + + +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 +}); + diff --git a/frontend/app/components/wp-table/timeline/wp-timeline.service.test.ts b/frontend/app/components/wp-table/timeline/wp-timeline.service.test.ts index e347299373..35465a1d3c 100644 --- a/frontend/app/components/wp-table/timeline/wp-timeline.service.test.ts +++ b/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: ""}}); diff --git a/frontend/app/components/wp-table/timeline/wp-timeline.service.ts b/frontend/app/components/wp-table/timeline/wp-timeline.service.ts index 5b58309cb3..a050d2e88e 100644 --- a/frontend/app/components/wp-table/timeline/wp-timeline.service.ts +++ b/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); } diff --git a/frontend/app/components/wp-table/wp-table.directive.html b/frontend/app/components/wp-table/wp-table.directive.html index b2e7d174ee..9e437acf67 100644 --- a/frontend/app/components/wp-table/wp-table.directive.html +++ b/frontend/app/components/wp-table/wp-table.directive.html @@ -1,5 +1,8 @@
+ + +
@@ -166,7 +169,7 @@ ng-class="::{ '-short': column.name == 'id' }"> -
+