FarmMapsLib/projects/common/src/fm/components/timespan/timespan.component.html
Willem Dantuma f4cbb1ff68 Fix
2023-01-24 16:21:04 +01:00

35 lines
2.7 KiB
HTML

<div class="timespan p-1" (window:resize)="handleResize($event)">
<div (click)="handleClick()">{{caption}}</div>
<ng-template #popoverContent let-caption="popoverCaption">{{caption}}</ng-template>
<div class="popover-anchor" [style.left.px] = "startPopoverLeft" [ngbPopover]="popoverContent" #popoverStart="ngbPopover">&nbsp;</div>
<div class="popover-anchor" [style.left.px] = "endPopoverLeft" [ngbPopover]="popoverContent" #popoverEnd="ngbPopover">&nbsp;</div>
<div class="collapsed clearfix" [ngClass]="{'collapsed':collapsed}">
<!-- <div class="clearfix">
<select class="form-control float-end" [value]="unitScale">
<option value="0">Millisecond</option>
<option value="1">Second</option>
<option value="2">Minute</option>
<option value="3">Hour</option>
<option value="4">Day</option>
<option value="5">Week</option>
<option value="6">Month</option>
<option value="6">Quarter</option>
<option value="8">Year</option>
</select>
</div> -->
<div class="timeline" (window:mousemove)="handleMouseMove($event)" (window:touchmove)="handleMouseMove($event)" (window:mouseup)="handleMouseUp($event)" (window:touchend)="handleMouseUp($event)" (wheel)="handleMouseWheel($event)" [style.height.px]="height">
<canvas #timeLine (mousedown)="handleViewPanMouseDown($event)" (touchstart)="handleViewPanMouseDown($event)" (mousemove)="handleCanvasMouseMove($event)" (mouseleave)="handleCanvasMouseLeave($event)">
</canvas>
<div class="control-container" [style.margin-left.px]="marginLeft" [style.height.px]="lineHeight" >
<div class="leftGrip rounded-start" (mousedown)="handleLeftGripMouseDown($event)" (touchstart)="handleLeftGripMouseDown($event)" (mouseenter)="handleLeftGripMouseEnter($event)" (mouseleave)="handleLeftGripMouseLeave($event)"><i class="fal fa-ellipsis-v" aria-hidden="true"></i></div>
<div class="range" [style.width.px]="rangeWidth" (mousedown)="handleRangeGripMouseDown($event)" (touchstart)="handleRangeGripMouseDown($event)" (mouseenter)="handleRangeGripMouseEnter($event)"></div>
<div class="rightGrip rounded-end" (mousedown)="handleRightGripMouseDown($event)" (touchstart)="handleRightGripMouseDown($event)" (mouseenter)="handleRightGripMouseEnter($event)" (mouseleave)="handleRightGripMouseLeave($event)"><i class="fal fa-ellipsis-v" aria-hidden="true"></i></div>
</div>
</div>
<!-- <div>
<div class="btn btn-primary" (click)="handleZoomIn()">+</div>
<div class="btn btn-primary" (click)="handleZoomOut()">-</div>
</div> -->
</div>
</div>