FarmMaps/FarmMapsLib
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Aw4751 eslint fixes
All checks were successful
FarmMaps.Develop/FarmMapsLib/pipeline/head This commit looks good
Details

Browse Source
This commit is contained in:
Peter (extern)
2023-03-06 14:04:14 +01:00
parent 945c641503
commit 6555e68145
78 changed files with 655 additions and 655 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
projects/common/src/fm/components/timespan/timespan.component.ts
View File

@@ -18,55 +18,55 @@ export class TimespanComponent implements OnInit, OnChanges {
unitScales:number[] = [1,1000,1000*60,1000*60*60,1000*60*60*24,1000*60*60*24*7,1000*60*60*24*31,1000*60*60*24*31*3,1000*60*60*24*365.25];
units:string[] = [ 'millisecond','second','minute','hour','day','week','month','quarter','year'];
quarters:string[] = ['KW1','KW2','KW3','KW4'];
unitScale:number = 3;
unitScale = 3;
viewMinDate:Date;
viewMaxDate:Date;
extentMinDate:Date;
extentMaxDate:Date;
cursorDate:Date;
leftGripMove:boolean = false;
rightGripMove:boolean = false;
rangeGripMove:boolean = false;
viewPan:boolean = false;
downX:number = -1;
mouseX: number = -1;
mouseY: number = -1;
leftGripMove = false;
rightGripMove = false;
rangeGripMove = false;
viewPan = false;
downX = -1;
mouseX = -1;
mouseY = -1;
elementWidth:number;
elementHeight:number;
lastOffsetInPixels:number=0;
lastOffsetInPixels=0;
@ViewChild('timeLine', { static: true }) canvasRef;
@ViewChild('popoverStart', { static: true }) public popoverStart:NgbPopover;
@ViewChild('popoverEnd', { static: true }) public popoverEnd:NgbPopover;
@Input() collapsed: boolean = true;
@Input() collapsed = true;
@Input() startDate: Date = new Date(2018,1,3);
@Input() endDate: Date = new Date(2018,1,5);
@Input() unit:string;
@Input() color:string = '#000000';
@Input() background:string = '#ffffff';
@Input() hoverColor:string ='#ffffff';
@Input() hoverBackground:string ='#0000ff';
@Input() lineColor:string='#000000';
@Input() lineWidth:number=1;
@Input() padding:number = 4;
@Input() color = '#000000';
@Input() background = '#ffffff';
@Input() hoverColor ='#ffffff';
@Input() hoverBackground ='#0000ff';
@Input() lineColor='#000000';
@Input() lineWidth=1;
@Input() padding = 4;
@Output() change:EventEmitter<TimeSpan> = new EventEmitter();
public caption:string = "2016/2017";
public marginLeft:number = 100;
public startPopoverLeft:number=110;
public endPopoverLeft:number=120;
public rangeWidth:number =75;
public caption = "2016/2017";
public marginLeft = 100;
public startPopoverLeft=110;
public endPopoverLeft=120;
public rangeWidth =75;
public startCaption={};
public endCaption={};
private ratio:number=1;
private initialized:boolean=false;
private ratio=1;
private initialized=false;
private ctx:CanvasRenderingContext2D;
public posibleUnits:number[] = [];
public height:number = 0;
public lineHeight:number = 0;
public height = 0;
public lineHeight = 0;
constructor(private changeDetectorRef: ChangeDetectorRef,private datePipe: DatePipe) { }
setCanvasSize() {
let canvas = this.canvasRef.nativeElement;
const canvas = this.canvasRef.nativeElement;
this.elementWidth = canvas.offsetWidth;
this.elementHeight = canvas.offsetHeight;
canvas.height = this.elementHeight * this.ratio;
@@ -74,8 +74,8 @@ export class TimespanComponent implements OnInit, OnChanges {
}
getPosibleUnits(scale:number):number[] {
let posibleUnits = [];
for(let u of [3,4,6,8]) {
const posibleUnits = [];
for(const u of [3,4,6,8]) {
if((this.unitScale <=u) )
posibleUnits.push(u);
}
@@ -94,7 +94,7 @@ export class TimespanComponent implements OnInit, OnChanges {
ngOnInit() {
this.ratio = 2;
this.unitScale = this.getUnitScale(this.unit);
let canvas:HTMLCanvasElement = this.canvasRef.nativeElement;
const canvas:HTMLCanvasElement = this.canvasRef.nativeElement;
this.ctx = canvas.getContext('2d');
this.elementWidth = canvas.offsetWidth;
this.elementHeight = canvas.offsetHeight;
@@ -102,13 +102,13 @@ export class TimespanComponent implements OnInit, OnChanges {
this.startDate = new Date(this.startDate.getTime() + this.getUnitDateOffset(this.startDate,this.unitScale,0));
this.endDate = new Date(this.endDate.getTime() + this.getUnitDateOffset(this.endDate,this.unitScale,1));
this.change.emit({startDate:this.startDate,endDate:this.endDate});
let rangeInMilliseconds = this.endDate.getTime() - this.startDate.getTime();
const rangeInMilliseconds = this.endDate.getTime() - this.startDate.getTime();
this.scale = this.getFitScale(rangeInMilliseconds,this.elementWidth);
this.posibleUnits=this.getPosibleUnits(this.scale);
this.height=this.getHeight();
this.lineHeight= this.getLineHeight();
this.setCanvasSize();
let center = (this.startDate.getTime()+this.endDate.getTime())/2;
const center = (this.startDate.getTime()+this.endDate.getTime())/2;
this.viewMinDate = new Date(center - (this.elementWidth/2* this.scale));
this.viewMaxDate = new Date(center + (this.elementWidth/2* this.scale));
this.updateStyle(this.startDate,this.endDate);
@@ -118,8 +118,8 @@ export class TimespanComponent implements OnInit, OnChanges {
this.initialized=true;
}
getStartEndCaption(date:Date,otherDate:Date,unitScale:number,suffix:boolean = false,extended:boolean=true):string {
let showSuffix = false;
getStartEndCaption(date:Date,otherDate:Date,unitScale:number,suffix = false,extended=true):string {
const showSuffix = false;
otherDate=new Date(otherDate.getTime()-1); // fix year edge case
if(unitScale == 3) {
let format="HH:00";
@@ -152,7 +152,7 @@ export class TimespanComponent implements OnInit, OnChanges {
return this.datePipe.transform(date,format);
}
if(unitScale == 7) {
let q = Math.trunc(date.getMonth() /3 );
const q = Math.trunc(date.getMonth() /3 );
return this.quarters[q];
}
if(unitScale == 8) {
@@ -161,17 +161,17 @@ export class TimespanComponent implements OnInit, OnChanges {
return "";
}
getStartCaption(startDate:Date,unitScale:number,suffix:boolean=false,extended:boolean=true):string {
getStartCaption(startDate:Date,unitScale:number,suffix=false,extended=true):string {
return this.getStartEndCaption(new Date(startDate.getTime() + (this.unitScales[unitScale]/2)), this.endDate,unitScale,suffix,extended);
}
getEndCaption(endDate:Date,unitScale:number,suffix:boolean=true):string {
getEndCaption(endDate:Date,unitScale:number,suffix=true):string {
return this.getStartEndCaption(new Date(endDate.getTime() - (this.unitScales[unitScale]/2)),this.startDate, unitScale,suffix);
}
getCaption(startDate:Date,endDate:Date,unitScale:number):string {
let startCaption=this.getStartCaption(startDate,unitScale);
let endCaption=this.getEndCaption(endDate,unitScale);
const startCaption=this.getStartCaption(startDate,unitScale);
const endCaption=this.getEndCaption(endDate,unitScale);
if((endDate.getTime() - startDate.getTime()) < (1.5*this.unitScales[this.unitScale]))
return endCaption;
return `${startCaption}-${endCaption}`;
@@ -186,20 +186,20 @@ export class TimespanComponent implements OnInit, OnChanges {
}
getFitScale(rangeInMilliSeconds:number,elementWidth:number):number {
let width = elementWidth*0.33;
const width = elementWidth*0.33;
return rangeInMilliSeconds/width;
}
getUnitScale(unit:string):number {
if(!unit) return 3; // hour
for(var _i=0;_i<this.units.length;_i++) {
for(let _i=0;_i<this.units.length;_i++) {
if(this.units[_i]==unit.toLowerCase()) return _i;
}
throw new Error(`Invalid unit : {{unit}} `);
}
getUnitDateOffset(date:Date, unitScale:number,tick:number):number {
var offsetDate:Date;
let offsetDate:Date;
if(unitScale==0)
offsetDate = new Date(date.getFullYear(),date.getMonth(),date.getDate() ,date.getHours() ,date.getMinutes(),date.getSeconds(),date.getMilliseconds()+ tick);
if(unitScale==1)
@@ -213,7 +213,7 @@ export class TimespanComponent implements OnInit, OnChanges {
if(unitScale==6)
offsetDate = new Date(date.getFullYear(),date.getMonth()+tick,1,0,0,0,0);
if(unitScale==7) {
var month = (tick * 3);
const month = (tick * 3);
offsetDate = new Date(date.getFullYear(),month,1,0,0,0,0);
}
if(unitScale==8)
@@ -234,12 +234,12 @@ export class TimespanComponent implements OnInit, OnChanges {
}
getNextTick(viewStartDate:Date, tick:number,step:number,unitScale:number):number {
let unitTextWidth = this.getUnitTextWidth(unitScale);
let dateOffset =this.getUnitDateOffset(viewStartDate,unitScale,tick);
let date = new Date(viewStartDate.getTime() + dateOffset);
const unitTextWidth = this.getUnitTextWidth(unitScale);
const dateOffset =this.getUnitDateOffset(viewStartDate,unitScale,tick);
const date = new Date(viewStartDate.getTime() + dateOffset);
let nextTick=tick+step+Math.trunc(step/2);
let nextDateOffset =this.getUnitDateOffset(viewStartDate,unitScale,nextTick);
let nextDate = new Date(viewStartDate.getTime() + nextDateOffset);
const nextDateOffset =this.getUnitDateOffset(viewStartDate,unitScale,nextTick);
const nextDate = new Date(viewStartDate.getTime() + nextDateOffset);
let n=1;
switch(unitScale) {
case 4:n=nextDate.getDate()-1;break;
@@ -247,7 +247,7 @@ export class TimespanComponent implements OnInit, OnChanges {
case 8:n=nextDate.getFullYear();break;
default: n = 1;break;
}
let a = Math.trunc(n / step)*step;
const a = Math.trunc(n / step)*step;
nextTick=nextTick-n+a;
if(nextTick<=tick) return tick+step;
return nextTick;
@@ -262,16 +262,16 @@ export class TimespanComponent implements OnInit, OnChanges {
}
drawUnits(yOffset:number,width:number,viewStartDate:Date,unitScale:number):number {
let oneUnit = (this.getUnitDateOffset(viewStartDate,unitScale,1)- this.getUnitDateOffset(viewStartDate,unitScale,0)) / this.scale;
const oneUnit = (this.getUnitDateOffset(viewStartDate,unitScale,1)- this.getUnitDateOffset(viewStartDate,unitScale,0)) / this.scale;
this.ctx.font=`normal ${this.ratio*10}pt Sans-serif`;
let lineHeight = this.getLineHeight();
const lineHeight = this.getLineHeight();
let dateOffset = this.getUnitDateOffset(viewStartDate,unitScale,0);
let pixelOffset = (dateOffset / this.scale);
let caption = this.getStartCaption(new Date(viewStartDate.getTime()+dateOffset),unitScale,false,false);
let unitTextWidth=this.getUnitTextWidth(unitScale);
const unitTextWidth=this.getUnitTextWidth(unitScale);
this.ctx.beginPath();
this.ctx.strokeStyle=this.lineColor;
let steps=this.getSteps(unitScale);
const steps=this.getSteps(unitScale);
let s=0;
let step=steps[s];
let steppedOneUnit=oneUnit*step;
@@ -283,10 +283,10 @@ export class TimespanComponent implements OnInit, OnChanges {
this.ctx.moveTo(0,yOffset*this.ratio);
this.ctx.lineTo(width*this.ratio,yOffset*this.ratio);
this.ctx.stroke();
var x:number = pixelOffset;
var nextDateOffset = this.getUnitDateOffset(viewStartDate,unitScale,1);
var nextX:number = (nextDateOffset / this.scale);
var n=0;
let x:number = pixelOffset;
let nextDateOffset = this.getUnitDateOffset(viewStartDate,unitScale,1);
let nextX:number = (nextDateOffset / this.scale);
let n=0;
while(x < width) {
this.ctx.fillStyle=this.color;
//mouseover
@@ -320,12 +320,12 @@ export class TimespanComponent implements OnInit, OnChanges {
redraw() {
let yOffset=0;
let canvas = this.canvasRef.nativeElement;
let height = canvas.offsetHeight;
let width = canvas.offsetWidth;
const canvas = this.canvasRef.nativeElement;
const height = canvas.offsetHeight;
const width = canvas.offsetWidth;
this.ctx.lineWidth = this.lineWidth;// *this.ratio;
this.ctx.clearRect(0,0,width *this.ratio,height*this.ratio);
for(let unit of this.posibleUnits) {
for(const unit of this.posibleUnits) {
if(this.unitScale <=unit) yOffset+=this.drawUnits(yOffset,width,this.viewMinDate,unit);
}
}
@@ -335,9 +335,9 @@ export class TimespanComponent implements OnInit, OnChanges {
}
updateStyle(startDate:Date,endDate:Date) {
let rangeInMilliseconds = endDate.getTime() - startDate.getTime();
let range = rangeInMilliseconds / this.scale;
let left = (startDate.getTime() - this.viewMinDate.getTime()) / this.scale;
const rangeInMilliseconds = endDate.getTime() - startDate.getTime();
const range = rangeInMilliseconds / this.scale;
const left = (startDate.getTime() - this.viewMinDate.getTime()) / this.scale;
this.startPopoverLeft=(left-10);
this.endPopoverLeft=(left+range+10);
this.marginLeft = (left - 15);
@@ -348,14 +348,14 @@ export class TimespanComponent implements OnInit, OnChanges {
}
snapToUnit(date:Date,unitScale:number):Date {
var d = new Date(date.getTime() + (this.unitScales[this.unitScale]/2));
var offsetInMilliseconds =this.getUnitDateOffset(d,this.unitScale,0)
const d = new Date(date.getTime() + (this.unitScales[this.unitScale]/2));
const offsetInMilliseconds =this.getUnitDateOffset(d,this.unitScale,0)
return new Date(d.getTime()+offsetInMilliseconds);
}
getEndDate(offsetInPixels:number):Date {
let oneUnit = this.unitScales[this.unitScale];
let offsetInMilliseconds = offsetInPixels * this.scale;
const oneUnit = this.unitScales[this.unitScale];
const offsetInMilliseconds = offsetInPixels * this.scale;
if(this.leftGripMove) {
if(this.startDate.getTime() + offsetInMilliseconds > this.endDate.getTime() - oneUnit) {
return this.snapToUnit(new Date(this.startDate.getTime() + offsetInMilliseconds + oneUnit),this.unitScale);
@@ -367,8 +367,8 @@ export class TimespanComponent implements OnInit, OnChanges {
}
getStartDate(offsetInPixels:number):Date {
let oneUnit = this.unitScales[this.unitScale];
let offsetInMilliseconds = offsetInPixels * this.scale;
const oneUnit = this.unitScales[this.unitScale];
const offsetInMilliseconds = offsetInPixels * this.scale;
if(this.leftGripMove || this.rangeGripMove) {
return this.snapToUnit(new Date(this.startDate.getTime() + offsetInMilliseconds),this.unitScale);
} else if(this.rightGripMove) {
@@ -380,14 +380,14 @@ export class TimespanComponent implements OnInit, OnChanges {
}
updateControl(event:MouseEvent|TouchEvent) {
let offsetInPixels = this.getClientX(event) - this.downX;
const offsetInPixels = this.getClientX(event) - this.downX;
if(this.leftGripMove || this.rightGripMove || this.rangeGripMove) {
let startDate = this.getStartDate(offsetInPixels);
let endDate = this.getEndDate(offsetInPixels);
const startDate = this.getStartDate(offsetInPixels);
const endDate = this.getEndDate(offsetInPixels);
this.updateStyle(startDate,endDate)
this.changeDetectorRef.detectChanges();
} else if(this.viewPan) {
let offsetInMilliseconds = offsetInPixels*this.scale;
const offsetInMilliseconds = offsetInPixels*this.scale;
this.viewMinDate = new Date(this.viewMinDate.getTime()-offsetInMilliseconds);
this.viewMaxDate = new Date(this.viewMaxDate.getTime()-offsetInMilliseconds);
this.updateStyle(this.startDate,this.endDate);
@@ -510,10 +510,10 @@ export class TimespanComponent implements OnInit, OnChanges {
return true;
} else {
nextScale*=1.1;
let canZoom=false;
let oneUnit = (this.getUnitDateOffset(this.viewMinDate,8,1)- this.getUnitDateOffset(this.viewMinDate,8,0)) / nextScale;
let unitTextWidth=this.getUnitTextWidth(8);
let steps=this.getSteps(8);
const canZoom=false;
const oneUnit = (this.getUnitDateOffset(this.viewMinDate,8,1)- this.getUnitDateOffset(this.viewMinDate,8,0)) / nextScale;
const unitTextWidth=this.getUnitTextWidth(8);
const steps=this.getSteps(8);
let s=0;
let step=steps[s];
let steppedOneUnit=oneUnit*step;
@@ -527,7 +527,7 @@ export class TimespanComponent implements OnInit, OnChanges {
handleMouseWheel(event:WheelEvent) {
if(!this.canZoom(this.scale,event.deltaY)) return;
let oldOffsetInMilliseconds = event.clientX * this.scale;
const oldOffsetInMilliseconds = event.clientX * this.scale;
if(event.deltaY>=0)
this.scale*=1.1;
else
@@ -536,8 +536,8 @@ export class TimespanComponent implements OnInit, OnChanges {
this.height=this.getHeight();
this.changeDetectorRef.detectChanges();
this.setCanvasSize();
let newOffsetInMilliseconds = event.clientX * this.scale;
let offsetInMilliseconds = newOffsetInMilliseconds-oldOffsetInMilliseconds;
const newOffsetInMilliseconds = event.clientX * this.scale;
const offsetInMilliseconds = newOffsetInMilliseconds-oldOffsetInMilliseconds;
this.viewMinDate = new Date(this.viewMinDate.getTime()-offsetInMilliseconds);
this.viewMaxDate = new Date(this.viewMaxDate.getTime()-offsetInMilliseconds);
this.updateStyle(this.startDate,this.endDate);