First try appcommon as library
This commit is contained in:
Willem Dantuma
@@ -0,0 +1,12 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'auth-callback',
|
||||
template:'<div></div>'
|
||||
})
|
||||
export class AuthCallbackComponent {
|
||||
|
||||
constructor() {
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import { Router, CanActivate } from '@angular/router';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { OAuthService } from 'angular-oauth2-oidc';
|
||||
import { } from '@angular/router';
|
||||
|
||||
@Injectable()
|
||||
export class AuthCallbackGuard implements CanActivate {
|
||||
|
||||
constructor(private router$: Router,private oauthService$:OAuthService) {}
|
||||
|
||||
canActivate() {
|
||||
this.router$.navigateByUrl(this.oauthService$.state);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
<div class="wrapper">
|
||||
<header class="header header--large">
|
||||
<h1 class="title">This page doesn't exist</h1>
|
||||
</header>
|
||||
</div>
|
||||
@@ -0,0 +1,12 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'not-found',
|
||||
templateUrl: './not-found.component.html'
|
||||
// styleUrls: ['./not-found.component.css']
|
||||
})
|
||||
export class NotFoundComponent implements OnInit {
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() { }
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
<div class="resumable-file-upload closed" [ngClass]="{'closed': uploadService.isClosed }">
|
||||
<div>
|
||||
<div class="card">
|
||||
<div class="card-header p-3 bg-primary text-white">
|
||||
<span *ngIf="uploadService.isUploading">Uploading files (<span>{{uploadService.totalProgress}}</span> %)</span>
|
||||
<span *ngIf="uploadService.isUploading == false">Uploaded <span>{{uploadService.files.length}}</span> files</span>
|
||||
<span title="Cancel" class="fa fa-times pull-right" (click)="uploadService.close()"></span><span title="Minimize" class="fa fa-chevron-down pull-right" (click)="uploadService.toggleMinimize()" [ngClass]="{'fa-chevron-down': uploadService.isMinimized == false, 'fa-chevron-up':uploadService.isMinimized}"></span>
|
||||
</div>
|
||||
<div [ngClass]="{'minimized': uploadService.isMinimized }">
|
||||
<div class="card-block p-3">
|
||||
<ul class="list-unstyled">
|
||||
<li *ngFor="let file of uploadService.files" class="upload-file busy" [ngClass]="{'done': file.success,'busy':file.success == false,'error': file.error }">
|
||||
<div><span class="file-name" [attr.title]="file?.fileName">{{file.fileName}}</span><span class="fa fa-times" title="Cancel" (click)="uploadService.cancelFile(file)"></span><span class="fa fa-check"></span></div>
|
||||
<div class="progress-container"><div class="progress-bar" [style.width]="file.progress"></div></div>
|
||||
<div class="errormessage">{{file.errorMessage}}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,104 @@
|
||||
@import "../../theme.scss";
|
||||
|
||||
/* Import Bootstrap & Fonts */
|
||||
|
||||
@import "~bootstrap/scss/bootstrap.scss";
|
||||
|
||||
div.resumable-file-upload {
|
||||
position: fixed;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
width: 300px;
|
||||
max-height: 250px;
|
||||
/*z-index:2000 !important;*/
|
||||
}
|
||||
|
||||
div.minimized {
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
div.closed {
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
div.card {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
div.card-block {
|
||||
max-height: calc(250px - 41px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
div.minimized div.card-block {
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
div.card-header span.fa {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.upload-file {
|
||||
padding-top: 3px;
|
||||
}
|
||||
|
||||
.upload-file .progress-container {
|
||||
height: 3px;
|
||||
width: 100%;
|
||||
margin-top:4px;
|
||||
}
|
||||
|
||||
.upload-file .progress-container .progress-bar {
|
||||
display: block;
|
||||
background-color: color("green");
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.upload-file.done .progress-container .progress-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.upload-file > div > span.file-name {
|
||||
display: inline-block;
|
||||
width: calc(100% - 20px);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.upload-file.busy > div > span.fa-times {
|
||||
color: theme-color("danger");
|
||||
width: 20px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.upload-file.done > div > span.fa-times {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.upload-file.done > div > span.fa-check {
|
||||
color: color("green");
|
||||
width: 20px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.upload-file > div.errormessage {
|
||||
color: theme-color("danger");
|
||||
display: none;
|
||||
}
|
||||
|
||||
.upload-file.error > div.errormessage {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.upload-file.busy > div > span.fa-check {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.resumable-file-upload ul {
|
||||
padding:0px;
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
import { Component, Input, ElementRef, HostListener, ChangeDetectorRef, OnDestroy, OnInit } from '@angular/core';
|
||||
import { ResumableFileUploadService, File } from './resumable-file-upload.service';
|
||||
import { Subscription } from 'rxjs';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'resumable-file-upload',
|
||||
templateUrl: './resumable-file-upload.component.html',
|
||||
styleUrls: ['./resumable-file-upload.component.scss']
|
||||
})
|
||||
|
||||
export class ResumableFileUploadComponent implements OnInit, OnDestroy {
|
||||
|
||||
private browseFileElement$: ElementRef;
|
||||
|
||||
@Input('browseFileElement')
|
||||
get browseFileElement(): ElementRef {
|
||||
return this.browseFileElement$;
|
||||
}
|
||||
|
||||
set browseFileElement(element: ElementRef) {
|
||||
this.uploadService.assignFileBrowse(element);
|
||||
this.browseFileElement$ = element;
|
||||
}
|
||||
|
||||
@Input('browseDirectoryElement')
|
||||
set browseDirectoryElement(element: ElementRef) {
|
||||
this.uploadService.assignDirectoryBrowse(element);
|
||||
}
|
||||
|
||||
@Input('fileDropElement')
|
||||
set fileDropElement(element: ElementRef) {
|
||||
this.uploadService.assignDrop(element);
|
||||
}
|
||||
|
||||
@Input('parentCode')
|
||||
set parentCode(parentCode: string) {
|
||||
if (parentCode && parentCode != "null" && parentCode != "")
|
||||
this.uploadService.parentCode = parentCode;
|
||||
else
|
||||
this.uploadService.parentCode = null;
|
||||
}
|
||||
|
||||
constructor(private cd: ChangeDetectorRef, public uploadService: ResumableFileUploadService) {
|
||||
}
|
||||
|
||||
private refreshSub: Subscription;
|
||||
|
||||
ngOnInit() {
|
||||
this.refreshSub = this.uploadService.refresh.subscribe((e: any) => {
|
||||
this.cd.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if(this.refreshSub) this.refreshSub.unsubscribe();
|
||||
}
|
||||
|
||||
//this.cd.markForCheck();
|
||||
@HostListener('window:beforeunload')
|
||||
windowBeforeUnload = function () {
|
||||
if (this.uploadService.isUploading) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,196 @@
|
||||
import { Injectable, ElementRef } from '@angular/core';
|
||||
import { OAuthService } from 'angular-oauth2-oidc';
|
||||
import { Subject , of } from 'rxjs';
|
||||
import { HttpClient, HttpParams } from "@angular/common/http";
|
||||
|
||||
|
||||
declare var require; // avoid missing property error on require
|
||||
|
||||
@Injectable()
|
||||
export class ResumableFileUploadService {
|
||||
private resumable: any;
|
||||
private dropElement: ElementRef;
|
||||
private fileBrowseElement: ElementRef;
|
||||
private directoryBrowseElement: ElementRef;
|
||||
public files: Array<File> = new Array<File>();
|
||||
public isUploading = false;
|
||||
public totalProgress = "0";
|
||||
public isClosed = true;
|
||||
public isMinimized = false;
|
||||
public parentCode: string;
|
||||
public refresh: Subject<any> = new Subject<any>();
|
||||
|
||||
constructor(private httpClient: HttpClient,private oauthService: OAuthService) {
|
||||
this.init();
|
||||
}
|
||||
|
||||
init = function () {
|
||||
this.ref
|
||||
require.ensure([], require => {
|
||||
let Resumable = require('./resumable.js');
|
||||
var other = this;
|
||||
this.resumable = new Resumable(
|
||||
{
|
||||
target: '/api/v1/file/chunk',
|
||||
query: function (file, chunk) {
|
||||
var options = {};
|
||||
if (file.parentCode) options["parentCode"] = file.parentCode;
|
||||
if (chunk.tested) {
|
||||
if (file.file.geoRefJson) options["geoRefJson"] = file.file.geoRefJson;
|
||||
if (file.file.attributes) options["attributes"] = file.file.attributes;
|
||||
}
|
||||
return options;
|
||||
},
|
||||
headers: function (file) {
|
||||
return { Authorization: "Bearer " + other.oauthService.getAccessToken() }
|
||||
},
|
||||
generateUniqueIdentifier: function (file, event) {
|
||||
var params = new HttpParams()
|
||||
.set("name", file.fileName || file.name)
|
||||
.set("size", file.size);
|
||||
|
||||
return other.httpClient.post("/api/v1/file",params).toPromise().then(res => res.code);
|
||||
},
|
||||
chunkNumberParameterName: 'chunkNumber',
|
||||
chunkSizeParameterName: 'chunkSize',
|
||||
currentChunkSizeParameterName: 'currentChunkSize',
|
||||
totalSizeParameterName: 'size',
|
||||
typeParameterName: 'type',
|
||||
identifierParameterName: 'code',
|
||||
fileNameParameterName: 'name',
|
||||
relativePathParameterName: 'relativePath',
|
||||
totalChunksParameterName: 'totalChunks'
|
||||
}
|
||||
) as any;
|
||||
|
||||
var other = this;
|
||||
|
||||
this.resumable.on('catchAll', function (event) {
|
||||
other.isUploading = other.resumable.isUploading();
|
||||
other.totalProgress = (other.resumable.progress() * 100).toFixed(0);
|
||||
other.refresh.next({});
|
||||
});
|
||||
|
||||
this.resumable.on('filesAdded', function (files) {
|
||||
files.forEach(function (file) {
|
||||
file.parentCode = other.parentCode;
|
||||
other.files.push(new File(file));
|
||||
});
|
||||
other.isClosed = false;
|
||||
other.resumable.upload();
|
||||
});
|
||||
|
||||
this.resumable.on('fileSuccess', function (file) {
|
||||
var index = other.getIndex(file);
|
||||
if (index >= 0) {
|
||||
other.files[index].success = true;
|
||||
}
|
||||
});
|
||||
|
||||
this.resumable.on('error', function (message,file) {
|
||||
var index = other.getIndex(file);
|
||||
if (index >= 0) {
|
||||
other.files[index].error = true;
|
||||
other.files[index].errorMessage = message;
|
||||
}
|
||||
});
|
||||
|
||||
this.resumable.on('fileProgress', function (file) {
|
||||
var index = other.getIndex(file);
|
||||
if (index >= 0) {
|
||||
other.files[index].progress = (file.progress() * 100) + '%';
|
||||
}
|
||||
});
|
||||
|
||||
if (this.dropElement) this.resumable.assignDrop(this.dropElement);
|
||||
if (this.fileBrowseElement) this.resumable.assignBrowse(this.fileBrowseElement);
|
||||
if (this.directoryBrowseElement) this.resumable.assignBrowse(this.directoryBrowseElement, true);
|
||||
});
|
||||
}
|
||||
|
||||
addFiles = (files: any[], event: any, geoRefJson?: string, attributes?: any) => {
|
||||
for (let f of files) {
|
||||
if (geoRefJson) f.geoRefJson = geoRefJson;
|
||||
if (attributes) f.attributes = JSON.stringify(attributes);
|
||||
}
|
||||
this.resumable.addFiles(files, event);
|
||||
}
|
||||
|
||||
assignDrop = function (element: ElementRef) {
|
||||
if (this.resumable) {
|
||||
this.resumable.assignDrop(element);
|
||||
}
|
||||
this.dropElement = element;
|
||||
}
|
||||
|
||||
assignFileBrowse = function (element: ElementRef) {
|
||||
if (this.resumable) {
|
||||
this.resumable.assignBrowse(element);
|
||||
}
|
||||
this.fileBrowseElement = element;
|
||||
}
|
||||
|
||||
assignDirectoryBrowse = function (element: ElementRef) {
|
||||
if (this.resumable) {
|
||||
this.resumable.assignBrowse(element, true);
|
||||
}
|
||||
this.directoryBrowseElement = element;
|
||||
}
|
||||
|
||||
getIndex = function (file) {
|
||||
for (var i = 0; i < this.files.length; i++) {
|
||||
if (this.files[i].identifier == file.uniqueIdentifier)
|
||||
return i;
|
||||
}
|
||||
return -1;
|
||||
}
|
||||
|
||||
toggleMinimize = function () {
|
||||
this.isMinimized = !this.isMinimized;
|
||||
};
|
||||
|
||||
cancelFile = function (file) {
|
||||
file.file.cancel();
|
||||
var index = this.files.indexOf(file, 0);
|
||||
if (index > -1) {
|
||||
this.files.splice(index, 1);
|
||||
}
|
||||
};
|
||||
|
||||
doClose = function () {
|
||||
this.resumable.cancel();
|
||||
this.files = new Array<File>();
|
||||
this.isClosed = true;
|
||||
}
|
||||
|
||||
close = function () {
|
||||
let close = true;
|
||||
if (this.isUploading) {
|
||||
close = false;
|
||||
}
|
||||
if (close) {
|
||||
this.doClose();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export class File {
|
||||
private file: any;
|
||||
public fileName: string;
|
||||
public progress: string;
|
||||
public identifier: string;
|
||||
public success: boolean;
|
||||
public error: boolean;
|
||||
public errorMessage: string;
|
||||
|
||||
|
||||
constructor(file: any) {
|
||||
this.file = file;
|
||||
this.fileName = file.fileName;
|
||||
this.progress = (file.progress() * 100) + '%';
|
||||
this.identifier = file.uniqueIdentifier;
|
||||
this.success = false;
|
||||
this.error = false;
|
||||
this.errorMessage = "";
|
||||
}
|
||||
}
|
||||
370
projects/common/src/lib/components/resumable-file-upload/resumable.d.ts
vendored
Normal file
370
projects/common/src/lib/components/resumable-file-upload/resumable.d.ts
vendored
Normal file
@@ -0,0 +1,370 @@
|
||||
// Type definitions for Resumable.js
|
||||
// Project: https://github.com/23/resumable.js
|
||||
// Definitions by: Bazyli Brzóska <https://invent.life/>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
|
||||
declare module Resumable {
|
||||
export interface ConfigurationHash {
|
||||
/**
|
||||
* The target URL for the multipart POST request. This can be a string or a function that allows you you to construct and return a value, based on supplied params. (Default: /)
|
||||
**/
|
||||
target?: string;
|
||||
/**
|
||||
* The size in bytes of each uploaded chunk of data. The last uploaded chunk will be at least this size and up to two the size, see Issue #51 for details and reasons. (Default: 1*1024*1024)
|
||||
**/
|
||||
chunkSize?: number;
|
||||
/**
|
||||
* Force all chunks to be less or equal than chunkSize. Otherwise, the last chunk will be greater than or equal to chunkSize. (Default: false)
|
||||
**/
|
||||
forceChunkSize?: boolean;
|
||||
/**
|
||||
* Number of simultaneous uploads (Default: 3)
|
||||
**/
|
||||
simultaneousUploads?: number;
|
||||
/**
|
||||
* The name of the multipart POST parameter to use for the file chunk (Default: file)
|
||||
**/
|
||||
fileParameterName?: string;
|
||||
/**
|
||||
* The name of the chunk index (base-1) in the current upload POST parameter to use for the file chunk (Default: resumableChunkNumber)
|
||||
*/
|
||||
chunkNumberParameterName?: string;
|
||||
/**
|
||||
* The name of the total number of chunks POST parameter to use for the file chunk (Default: resumableTotalChunks)
|
||||
*/
|
||||
totalChunksParameterName?: string;
|
||||
/**
|
||||
* The name of the general chunk size POST parameter to use for the file chunk (Default: resumableChunkSize)
|
||||
*/
|
||||
chunkSizeParameterName?: string;
|
||||
/**
|
||||
* The name of the total file size number POST parameter to use for the file chunk (Default: resumableTotalSize)
|
||||
*/
|
||||
totalSizeParameterName?: string;
|
||||
/**
|
||||
* The name of the unique identifier POST parameter to use for the file chunk (Default: resumableIdentifier)
|
||||
*/
|
||||
identifierParameterName?: string;
|
||||
/**
|
||||
* The name of the original file name POST parameter to use for the file chunk (Default: resumableFilename)
|
||||
*/
|
||||
fileNameParameterName?: string;
|
||||
/**
|
||||
* The name of the file's relative path POST parameter to use for the file chunk (Default: resumableRelativePath)
|
||||
*/
|
||||
relativePathParameterName?: string;
|
||||
/**
|
||||
* The name of the current chunk size POST parameter to use for the file chunk (Default: resumableCurrentChunkSize)
|
||||
*/
|
||||
currentChunkSizeParameterName?: string;
|
||||
/**
|
||||
* The name of the file type POST parameter to use for the file chunk (Default: resumableType)
|
||||
*/
|
||||
typeParameterName?: string;
|
||||
/**
|
||||
* Extra parameters to include in the multipart POST with data. This can be an object or a function. If a function, it will be passed a ResumableFile and a ResumableChunk object (Default: {})
|
||||
**/
|
||||
query?: Object;
|
||||
/**
|
||||
* Method for chunk test request. (Default: 'GET')
|
||||
**/
|
||||
testMethod?: 'GET'|'POST'|'OPTIONS'|'PUT'|'DELETE';
|
||||
/**
|
||||
* Method for chunk upload request. (Default: 'POST')
|
||||
**/
|
||||
uploadMethod?: 'GET'|'POST'|'OPTIONS'|'PUT'|'DELETE';
|
||||
/**
|
||||
* Extra prefix added before the name of each parameter included in the multipart POST or in the test GET. (Default: '')
|
||||
**/
|
||||
parameterNamespace?: string;
|
||||
/**
|
||||
* Extra headers to include in the multipart POST with data. This can be an object or a function that allows you to construct and return a value, based on supplied file (Default: {})
|
||||
**/
|
||||
headers?: Object | ((file) => Object);
|
||||
/**
|
||||
* Method to use when POSTing chunks to the server (multipart or octet) (Default: multipart)
|
||||
**/
|
||||
method?: 'multipart' | 'octet';
|
||||
/**
|
||||
* Prioritize first and last chunks of all files. This can be handy if you can determine if a file is valid for your service from only the first or last chunk. For example, photo or video meta data is usually located in the first part of a file, making it easy to test support from only the first chunk. (Default: false)
|
||||
**/
|
||||
prioritizeFirstAndLastChunk?: boolean;
|
||||
/**
|
||||
* Make a GET request to the server for each chunks to see if it already exists. If implemented on the server-side, this will allow for upload resumes even after a browser crash or even a computer restart. (Default: true)
|
||||
**/
|
||||
testChunks?: boolean;
|
||||
/**
|
||||
* Optional function to process each chunk before testing & sending. Function is passed the chunk as parameter, and should call the preprocessFinished method on the chunk when finished. (Default: null)
|
||||
**/
|
||||
preprocess?: (chunk:ResumableChunk) => ResumableChunk;
|
||||
/**
|
||||
* Override the function that generates unique identifiers for each file. (Default: null)
|
||||
**/
|
||||
generateUniqueIdentifier?: () => string;
|
||||
/**
|
||||
* Indicates how many files can be uploaded in a single session. Valid values are any positive integer and undefined for no limit. (Default: undefined)
|
||||
**/
|
||||
maxFiles?: number;
|
||||
/**
|
||||
* A function which displays the please upload n file(s) at a time message. (Default: displays an alert box with the message Please n one file(s) at a time.)
|
||||
**/
|
||||
maxFilesErrorCallback?: (files, errorCount) => void;
|
||||
/**
|
||||
* The minimum allowed file size. (Default: undefined)
|
||||
**/
|
||||
minFileSize?: boolean;
|
||||
/**
|
||||
* A function which displays an error a selected file is smaller than allowed. (Default: displays an alert for every bad file.)
|
||||
**/
|
||||
minFileSizeErrorCallback?:(file, errorCount) => void;
|
||||
/**
|
||||
* The maximum allowed file size. (Default: undefined)
|
||||
**/
|
||||
maxFileSize?: boolean;
|
||||
/**
|
||||
* A function which displays an error a selected file is larger than allowed. (Default: displays an alert for every bad file.)
|
||||
**/
|
||||
maxFileSizeErrorCallback?: (file, errorCount) => void;
|
||||
/**
|
||||
* The file types allowed to upload. An empty array allow any file type. (Default: [])
|
||||
**/
|
||||
fileType?: Array<string>;
|
||||
/**
|
||||
* A function which displays an error a selected file has type not allowed. (Default: displays an alert for every bad file.)
|
||||
**/
|
||||
fileTypeErrorCallback?: (file, errorCount) => void;
|
||||
/**
|
||||
* The maximum number of retries for a chunk before the upload is failed. Valid values are any positive integer and undefined for no limit. (Default: undefined)
|
||||
**/
|
||||
maxChunkRetries?: number;
|
||||
/**
|
||||
* The number of milliseconds to wait before retrying a chunk on a non-permanent error. Valid values are any positive integer and undefined for immediate retry. (Default: undefined)
|
||||
**/
|
||||
chunkRetryInterval?: number;
|
||||
/**
|
||||
* Standard CORS requests do not send or set any cookies by default. In order to include cookies as part of the request, you need to set the withCredentials property to true. (Default: false)
|
||||
**/
|
||||
withCredentials?: boolean;
|
||||
/**
|
||||
* setChunkTypeFromFile` Set chunk content-type from original file.type. (Default: false, if false default Content-Type: application/octet-stream)
|
||||
**/
|
||||
setChunkTypeFromFile?: boolean;
|
||||
}
|
||||
|
||||
export class Resumable {
|
||||
constructor(options:ConfigurationHash);
|
||||
|
||||
/**
|
||||
* A boolean value indicator whether or not Resumable.js is supported by the current browser.
|
||||
**/
|
||||
support: boolean;
|
||||
/**
|
||||
* A hash object of the configuration of the Resumable.js instance.
|
||||
**/
|
||||
opts: ConfigurationHash;
|
||||
/**
|
||||
* An array of ResumableFile file objects added by the user (see full docs for this object type below).
|
||||
**/
|
||||
files: Array<ResumableFile>;
|
||||
|
||||
events: Array<any>;
|
||||
version: number;
|
||||
|
||||
/**
|
||||
* Assign a browse action to one or more DOM nodes. Pass in true to allow directories to be selected (Chrome only).
|
||||
**/
|
||||
assignBrowse(domNode: Element, isDirectory: boolean): void;
|
||||
assignBrowse(domNodes: Array<Element>, isDirectory: boolean): void;
|
||||
/**
|
||||
* Assign one or more DOM nodes as a drop target.
|
||||
**/
|
||||
assignDrop(domNode: Element): void;
|
||||
assignDrop(domNodes: Array<Element>): void;
|
||||
unAssignDrop(domNode: Element): void;
|
||||
unAssignDrop(domNodes: Array<Element>): void;
|
||||
/**
|
||||
* Start or resume uploading.
|
||||
**/
|
||||
upload(): void;
|
||||
uploadNextChunk(): void;
|
||||
/**
|
||||
* Pause uploading.
|
||||
**/
|
||||
pause(): void;
|
||||
/**
|
||||
* Cancel upload of all ResumableFile objects and remove them from the list.
|
||||
**/
|
||||
cancel(): void;
|
||||
fire(): void;
|
||||
/**
|
||||
* Returns a float between 0 and 1 indicating the current upload progress of all files.
|
||||
**/
|
||||
progress(): number;
|
||||
/**
|
||||
* Returns a boolean indicating whether or not the instance is currently uploading anything.
|
||||
**/
|
||||
isUploading(): boolean;
|
||||
/**
|
||||
* Add a HTML5 File object to the list of files.
|
||||
**/
|
||||
addFile(file: File): void;
|
||||
/**
|
||||
* Add an Array of HTML5 File objects to the list of files.
|
||||
**/
|
||||
addFiles(files: Array<File>): void;
|
||||
/**
|
||||
* Cancel upload of a specific ResumableFile object on the list from the list.
|
||||
**/
|
||||
removeFile(file: ResumableFile): void;
|
||||
/**
|
||||
* Look up a ResumableFile object by its unique identifier.
|
||||
**/
|
||||
getFromUniqueIdentifier(uniqueIdentifier: string): void;
|
||||
/**
|
||||
* Returns the total size of the upload in bytes.
|
||||
**/
|
||||
getSize(): void;
|
||||
getOpt(o: string): any;
|
||||
|
||||
// Events
|
||||
/**
|
||||
* Listen for event from Resumable.js (see below)
|
||||
**/
|
||||
on(event: string, callback: Function): void;
|
||||
/**
|
||||
* A specific file was completed.
|
||||
**/
|
||||
on(event: 'fileSuccess', callback: (file: ResumableFile) => void); void;
|
||||
/**
|
||||
* Uploading progressed for a specific file.
|
||||
**/
|
||||
on(event: 'fileProgress', callback: (file: ResumableFile) => void): void;
|
||||
/**
|
||||
* A new file was added. Optionally, you can use the browser event object from when the file was added.
|
||||
**/
|
||||
on(event: 'fileAdded', callback: (file: ResumableFile, event: DragEvent) => void): void;
|
||||
/**
|
||||
* New files were added.
|
||||
**/
|
||||
on(event: 'filesAdded', callback: (files: Array<ResumableFile>) => void): void;
|
||||
/**
|
||||
* Something went wrong during upload of a specific file, uploading is being retried.
|
||||
**/
|
||||
on(event: 'fileRetry', callback: (file: ResumableFile) => void): void;
|
||||
/**
|
||||
* An error occurred during upload of a specific file.
|
||||
**/
|
||||
on(event: 'fileError', callback: (file: ResumableFile, message: string) => void): void;
|
||||
/**
|
||||
* Upload has been started on the Resumable object.
|
||||
**/
|
||||
on(event: 'uploadStart', callback: () => void): void;
|
||||
/**
|
||||
* Uploading completed.
|
||||
**/
|
||||
on(event: 'complete', callback: () => void): void;
|
||||
/**
|
||||
* Uploading progress.
|
||||
**/
|
||||
on(event: 'progress', callback: () => void): void;
|
||||
/**
|
||||
* An error, including fileError, occurred.
|
||||
**/
|
||||
on(event: 'error', callback: (message: string, file: ResumableFile) => void): void;
|
||||
/**
|
||||
* Uploading was paused.
|
||||
**/
|
||||
on(event: 'pause', callback: () => void): void;
|
||||
/**
|
||||
* Triggers before the items are cancelled allowing to do any processing on uploading files.
|
||||
**/
|
||||
on(event: 'beforeCancel', callback: () => void): void;
|
||||
/**
|
||||
* Uploading was canceled.
|
||||
**/
|
||||
on(event: 'cancel', callback: () => void): void;
|
||||
/**
|
||||
* Started preparing file for upload
|
||||
**/
|
||||
on(event: 'chunkingStart', callback: (file: ResumableFile) => void): void;
|
||||
/**
|
||||
* Show progress in file preparation
|
||||
**/
|
||||
on(event: 'chunkingProgress', callback: (file: ResumableFile, ratio) => void): void;
|
||||
/**
|
||||
* File is ready for upload
|
||||
**/
|
||||
on(event: 'chunkingComplete', callback: (file: ResumableFile) => void): void;
|
||||
/**
|
||||
* Listen to all the events listed above with the same callback function.
|
||||
**/
|
||||
on(event: 'catchAll', callback: () => void);
|
||||
}
|
||||
|
||||
export interface ResumableFile {
|
||||
/**
|
||||
* A back-reference to the parent Resumable object.
|
||||
**/
|
||||
resumableObj: Resumable;
|
||||
/**
|
||||
* The correlating HTML5 File object.
|
||||
**/
|
||||
file: File;
|
||||
/**
|
||||
* The name of the file.
|
||||
**/
|
||||
fileName: string;
|
||||
/**
|
||||
* The relative path to the file (defaults to file name if relative path doesn't exist)
|
||||
**/
|
||||
relativePath: string;
|
||||
/**
|
||||
* Size in bytes of the file.
|
||||
**/
|
||||
size: number;
|
||||
/**
|
||||
* A unique identifier assigned to this file object. This value is included in uploads to the server for reference, but can also be used in CSS classes etc when building your upload UI.
|
||||
**/
|
||||
uniqueIdentifier: string;
|
||||
/**
|
||||
* An array of ResumableChunk items. You shouldn't need to dig into these.
|
||||
**/
|
||||
chunks: Array<ResumableChunk>;
|
||||
|
||||
|
||||
/**
|
||||
* Returns a float between 0 and 1 indicating the current upload progress of the file. If relative is true, the value is returned relative to all files in the Resumable.js instance.
|
||||
**/
|
||||
progress: (relative: boolean) => number;
|
||||
/**
|
||||
* Abort uploading the file.
|
||||
**/
|
||||
abort: () => void;
|
||||
/**
|
||||
* Abort uploading the file and delete it from the list of files to upload.
|
||||
**/
|
||||
cancel: () => void;
|
||||
/**
|
||||
* Retry uploading the file.
|
||||
**/
|
||||
retry: () => void;
|
||||
/**
|
||||
* Rebuild the state of a ResumableFile object, including reassigning chunks and XMLHttpRequest instances.
|
||||
**/
|
||||
bootstrap: () => void;
|
||||
/**
|
||||
* Returns a boolean indicating whether file chunks is uploading.
|
||||
**/
|
||||
isUploading: () => boolean;
|
||||
/**
|
||||
* Returns a boolean indicating whether the file has completed uploading and received a server response.
|
||||
**/
|
||||
isComplete: () => boolean;
|
||||
}
|
||||
|
||||
class ResumableChunk {}
|
||||
}
|
||||
|
||||
declare module 'resumablejs' {
|
||||
export = Resumable.Resumable;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,8 @@
|
||||
<div class="session-cleared">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<p class="card-text" i18n>You have been logged out</p>
|
||||
<button class="btn btn-primary" (click)="handleLoginClick()" i18n>Login again</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,6 @@
|
||||
.session-cleared {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100%;
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
|
||||
import { Store } from '@ngrx/store';
|
||||
import * as appCommonReducers from '../../reducers/app-common.reducer';
|
||||
import * as appCommonActions from '../../actions/app-common.actions';
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'session-cleared',
|
||||
templateUrl: 'session-cleared.component.html',
|
||||
styleUrls: ['session-cleared.component.scss']
|
||||
})
|
||||
|
||||
|
||||
export class SessionClearedComponent {
|
||||
|
||||
constructor(private route: ActivatedRoute, private store: Store<appCommonReducers.State>) {
|
||||
}
|
||||
|
||||
handleLoginClick() {
|
||||
this.store.dispatch(new appCommonActions.Login(this.route.snapshot.queryParamMap.get('redirectTo')));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
<div class="side-panel hidden collapsed" [ngClass]="{'hidden':!visible,'collapsed':collapsed}">
|
||||
<div *ngIf="collapsable" class="arrow rounded-right p-2" (click)="handleToggleClick($event)">
|
||||
<i class="fa fa-chevron-left" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="content">
|
||||
<ng-content>
|
||||
|
||||
</ng-content>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,42 @@
|
||||
.side-panel {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
width: 22rem;
|
||||
left: 0px;
|
||||
transition: left 0.3s;
|
||||
background-color: white;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.side-panel.collapsed {
|
||||
left:-22rem;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: 100%;
|
||||
background-color: inherit;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.arrow i {
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.collapsed .arrow i {
|
||||
-webkit-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.side-panel.hidden {
|
||||
left: -24rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
height:100%;
|
||||
width:100%;
|
||||
overflow:hidden;
|
||||
overflow-y:auto;
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { Component, Input } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'side-panel',
|
||||
templateUrl: 'side-panel.component.html',
|
||||
styleUrls: ['side-panel.component.scss']
|
||||
})
|
||||
|
||||
|
||||
export class SidePanelComponent {
|
||||
@Input() public visible: boolean;
|
||||
@Input() public collapsed: boolean;
|
||||
@Input() public collapsable: boolean;
|
||||
|
||||
constructor() {
|
||||
this.collapsable = false;
|
||||
}
|
||||
|
||||
handleToggleClick(event) {
|
||||
if (this.collapsable) {
|
||||
this.collapsed = !this.collapsed;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
<div class="tags">
|
||||
<span class="tag rounded bg-primary text-white" *ngFor="let tag of tags;"><span>{{tag}}</span> <i (click)="handleDeleteTag(tag)" class="fa fa-times" aria-hidden="true"></i></span><input type="text" #taginput (blur)="handleAddTag($event)" (keyup)="handleCheckAddTag($event)" [(ngModel)]="tag" [ngbTypeahead]="findTag" (selectItem)="handleSelect($event)" placeholder="New tag"/>
|
||||
</div>
|
||||
@@ -0,0 +1,16 @@
|
||||
.tag {
|
||||
display:inline-block;
|
||||
padding:0.5rem;
|
||||
margin-bottom:0.5rem;
|
||||
margin-top:0.5rem;
|
||||
margin-right:1rem;
|
||||
}
|
||||
|
||||
:host(tag-input) {
|
||||
height: auto ;
|
||||
}
|
||||
|
||||
input {
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
import { Component, Input, forwardRef,ElementRef,ViewChild } from '@angular/core';
|
||||
import { ControlValueAccessor, NG_VALUE_ACCESSOR,NgModel } from '@angular/forms';
|
||||
import { Observable,of } from 'rxjs';
|
||||
import { tap,catchError,debounceTime,distinctUntilChanged,switchMap } from 'rxjs/operators'
|
||||
import { TypeaheadService } from '../../services/typeahead.service';
|
||||
|
||||
@Component({
|
||||
selector: 'tag-input',
|
||||
templateUrl: 'tag-input.component.html',
|
||||
styleUrls: ['tag-input.component.scss'],
|
||||
providers: [
|
||||
{
|
||||
provide: NG_VALUE_ACCESSOR,
|
||||
useExisting: forwardRef(() => TagInputComponent),
|
||||
multi: true
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
export class TagInputComponent implements ControlValueAccessor {
|
||||
@Input() tags: string[]
|
||||
@ViewChild('taginput') tagInputElement: ElementRef;
|
||||
public tag: string;
|
||||
searching = false;
|
||||
searchFailed = false;
|
||||
|
||||
constructor(private typeaheadService: TypeaheadService) {
|
||||
}
|
||||
|
||||
tagExists(tag) {
|
||||
if (tag.length == 0) return true;
|
||||
for (let t of this.tags) {
|
||||
if (t.toLowerCase() == tag.toLowerCase()) return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
handleDeleteTag(tag) {
|
||||
let tags = [];
|
||||
for (let t of this.tags) {
|
||||
if (t != tag) tags.push(t);
|
||||
}
|
||||
this.tags = tags;
|
||||
this.propagateChange(tags);
|
||||
}
|
||||
|
||||
handleAddTag(event) {
|
||||
if (!this.tagExists(this.tag)) {
|
||||
this.tags.push(this.tag);
|
||||
this.propagateChange(this.tags);
|
||||
}
|
||||
this.tag = "";
|
||||
this.tagInputElement.nativeElement.focus();
|
||||
}
|
||||
|
||||
handleCheckAddTag(event: KeyboardEvent) {
|
||||
if (event.keyCode == 188) {
|
||||
let tag = this.tag.substr(0, this.tag.length - 1); // strip ,
|
||||
if (!this.tagExists(tag)) {
|
||||
this.tags.push(tag);
|
||||
this.propagateChange(this.tags);
|
||||
}
|
||||
this.tag = "";
|
||||
}
|
||||
}
|
||||
|
||||
handleSelect(event) {
|
||||
if (!this.tagExists(event.item)) {
|
||||
this.tags.push(event.item);
|
||||
this.propagateChange(this.tags);
|
||||
}
|
||||
event.preventDefault();
|
||||
this.tag = "";
|
||||
}
|
||||
|
||||
propagateChange = (_: any) => { };
|
||||
|
||||
registerOnChange(fn) {
|
||||
this.propagateChange = fn;
|
||||
}
|
||||
|
||||
findTag = (text$: Observable<string>) =>
|
||||
text$.pipe(
|
||||
debounceTime(200),
|
||||
distinctUntilChanged(),
|
||||
tap(() => this.searching = true),
|
||||
switchMap(term => term.length < 1 ? of([]) :
|
||||
this.typeaheadService.getTagTypeaheadItems(term).pipe(
|
||||
tap(() => this.searchFailed = false),
|
||||
catchError(() => {
|
||||
this.searchFailed = true;
|
||||
return of([]);
|
||||
}))
|
||||
),
|
||||
tap(() => this.searching = false)
|
||||
);
|
||||
|
||||
writeValue(value: any) {
|
||||
this.tags = value;
|
||||
this.tag = "";
|
||||
}
|
||||
|
||||
registerOnTouched() { }
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
.timespan {
|
||||
width:100%;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.collapsed {
|
||||
height:0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
position: relative;
|
||||
height: 6rem;
|
||||
width: 100%;
|
||||
margin-top: 0.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.timeline canvas {
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.control-container {
|
||||
position: absolute;
|
||||
top:0px;
|
||||
width:100%;
|
||||
overflow: hidden;
|
||||
font-size: 0;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.leftGrip,.rightGrip,.range {
|
||||
pointer-events: all;
|
||||
display: inline-block;
|
||||
height:100%;
|
||||
/* float: left; */
|
||||
font-size: 9pt;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.range {
|
||||
/* height:100%; */
|
||||
}
|
||||
|
||||
.leftGrip,.rightGrip {
|
||||
width:15px;
|
||||
background-color: rgb(204, 200, 200);
|
||||
border:1px solid black;
|
||||
}
|
||||
|
||||
.rightGrip {
|
||||
cursor: e-resize;
|
||||
}
|
||||
|
||||
.leftGrip {
|
||||
left: -100px;
|
||||
cursor:w-resize;
|
||||
}
|
||||
|
||||
.range {
|
||||
/* background: linear-gradient( rgba(0, 140, 255, 0.856),transparent); */
|
||||
background-color:rgba(0, 140, 255, 0.856);
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.popover-anchor {
|
||||
position:absolute;
|
||||
top:2rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
<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"> </div>
|
||||
<div class="popover-anchor" [style.left.px] = "endPopoverLeft" [ngbPopover]="popoverContent" #popoverEnd="ngbPopover"> </div>
|
||||
<div class="collapsed clearfix" [ngClass]="{'collapsed':collapsed}">
|
||||
<!-- <div class="clearfix">
|
||||
<select class="form-control float-right" [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-left" (mousedown)="handleLeftGripMouseDown($event)" (touchstart)="handleLeftGripMouseDown($event)" (mouseenter)="handleLeftGripMouseEnter($event)" (mouseleave)="handleLeftGripMouseLeave($event)"><i class="fa 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-right" (mousedown)="handleRightGripMouseDown($event)" (touchstart)="handleRightGripMouseDown($event)" (mouseenter)="handleRightGripMouseEnter($event)" (mouseleave)="handleRightGripMouseLeave($event)"><i class="fa 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>
|
||||
@@ -0,0 +1,583 @@
|
||||
import { Component, OnInit,Input,ViewChild,ElementRef,OnChanges,AfterViewInit,ChangeDetectorRef,Output, EventEmitter,SimpleChanges } from '@angular/core';
|
||||
import { DatePipe } from '@angular/common';
|
||||
import {NgbPopover} from '@ng-bootstrap/ng-bootstrap';
|
||||
|
||||
export interface TimeSpan {
|
||||
startDate:Date;
|
||||
endDate:Date;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'timespan',
|
||||
templateUrl: './timespan.component.html',
|
||||
styleUrls: ['./timespan.component.css']
|
||||
})
|
||||
export class TimespanComponent implements OnInit, OnChanges {
|
||||
|
||||
scale:number = 1000 * 60 * 60 ; // milliseconds / pixel ( 1 hour )
|
||||
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;
|
||||
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;
|
||||
elementWidth:number;
|
||||
elementHeight:number;
|
||||
lastOffsetInPixels:number=0;
|
||||
@ViewChild('timeLine') canvasRef;
|
||||
@ViewChild('popoverStart') public popoverStart:NgbPopover;
|
||||
@ViewChild('popoverEnd') public popoverEnd:NgbPopover;
|
||||
@Input() collapsed: boolean = 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;
|
||||
@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 startCaption={};
|
||||
public endCaption={};
|
||||
private ratio:number=1;
|
||||
private initialized:boolean=false;
|
||||
private ctx:CanvasRenderingContext2D;
|
||||
public posibleUnits:number[] = [];
|
||||
public height:number = 0;
|
||||
public lineHeight:number = 0;
|
||||
|
||||
constructor(private changeDetectorRef: ChangeDetectorRef,private datePipe: DatePipe) { }
|
||||
|
||||
setCanvasSize() {
|
||||
let canvas = this.canvasRef.nativeElement;
|
||||
this.elementWidth = canvas.offsetWidth;
|
||||
this.elementHeight = canvas.offsetHeight;
|
||||
canvas.height = this.elementHeight * this.ratio;
|
||||
canvas.width = this.elementWidth * this.ratio;
|
||||
}
|
||||
|
||||
getPosibleUnits(scale:number):number[] {
|
||||
let posibleUnits = [];
|
||||
for(let u of [3,4,6,8]) {
|
||||
if((this.unitScale <=u) )
|
||||
posibleUnits.push(u);
|
||||
}
|
||||
return posibleUnits;
|
||||
}
|
||||
|
||||
getLineHeight():number {
|
||||
return (parseInt(this.ctx.font.match(/\d+/)[0], 10)/ this.ratio) + (2*this.padding) ;
|
||||
}
|
||||
|
||||
getHeight():number {
|
||||
|
||||
return (this.posibleUnits.length * this.getLineHeight());
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.ratio = 2;
|
||||
this.unitScale = this.getUnitScale(this.unit);
|
||||
let canvas:HTMLCanvasElement = this.canvasRef.nativeElement;
|
||||
this.ctx = canvas.getContext('2d');
|
||||
this.elementWidth = canvas.offsetWidth;
|
||||
this.elementHeight = canvas.offsetHeight;
|
||||
this.ctx.font=`normal ${this.ratio*10}pt Sans-serif`;
|
||||
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();
|
||||
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;
|
||||
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);
|
||||
this.startCaption={popoverCaption:this.getStartCaption(this.startDate,this.unitScale,true)};
|
||||
this.endCaption={popoverCaption:this.getEndCaption(this.endDate,this.unitScale,true)};
|
||||
this.redraw();
|
||||
this.initialized=true;
|
||||
}
|
||||
|
||||
getStartEndCaption(date:Date,otherDate:Date,unitScale:number,suffix:boolean = false,extended:boolean=true):string {
|
||||
let showSuffix = false;
|
||||
otherDate=new Date(otherDate.getTime()-1); // fix year edge case
|
||||
if(unitScale == 3) {
|
||||
let format="HH:00";
|
||||
if(extended) {
|
||||
if(suffix || date.getFullYear() != otherDate.getFullYear())
|
||||
format="d MMM yyyy:HH:00";
|
||||
else if(date.getMonth() !== otherDate.getMonth())
|
||||
format="d MMM HH:00";
|
||||
}
|
||||
return this.datePipe.transform(date,format);
|
||||
|
||||
}
|
||||
if(unitScale == 4) {
|
||||
let format="d";
|
||||
if(extended) {
|
||||
if(suffix || date.getFullYear() != otherDate.getFullYear())
|
||||
format="d MMM yyyy";
|
||||
else if(date.getMonth() !== otherDate.getMonth())
|
||||
format="d MMM"
|
||||
}
|
||||
return this.datePipe.transform(date,format);
|
||||
|
||||
}
|
||||
if(unitScale == 6) {
|
||||
let format = "MMM";
|
||||
if(extended) {
|
||||
if(suffix || date.getFullYear() != otherDate.getFullYear())
|
||||
format="MMM yyyy";
|
||||
}
|
||||
return this.datePipe.transform(date,format);
|
||||
}
|
||||
if(unitScale == 7) {
|
||||
let q = Math.trunc(date.getMonth() /3 );
|
||||
return this.quarters[q];
|
||||
}
|
||||
if(unitScale == 8) {
|
||||
return this.datePipe.transform(date,"yyyy");
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
getStartCaption(startDate:Date,unitScale:number,suffix:boolean=false,extended:boolean=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 {
|
||||
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);
|
||||
if((endDate.getTime() - startDate.getTime()) < (1.5*this.unitScales[this.unitScale]))
|
||||
return endCaption;
|
||||
return `${startCaption}-${endCaption}`;
|
||||
}
|
||||
|
||||
public updatePopoverText(popover:NgbPopover, text:string): void {
|
||||
const isOpen = popover.isOpen();
|
||||
if (isOpen) {
|
||||
popover.close();
|
||||
popover.open({popoverCaption:text});
|
||||
}
|
||||
}
|
||||
|
||||
getFitScale(rangeInMilliSeconds:number,elementWidth:number):number {
|
||||
let 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++) {
|
||||
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;
|
||||
if(unitScale==0)
|
||||
offsetDate = new Date(date.getFullYear(),date.getMonth(),date.getDate() ,date.getHours() ,date.getMinutes(),date.getSeconds(),date.getMilliseconds()+ tick);
|
||||
if(unitScale==1)
|
||||
offsetDate = new Date(date.getFullYear(),date.getMonth(),date.getDate() ,date.getHours() ,date.getMinutes(),date.getSeconds() + tick,0);
|
||||
if(unitScale==2)
|
||||
offsetDate = new Date(date.getFullYear(),date.getMonth(),date.getDate() ,date.getHours() ,date.getMinutes() + tick,0,0);
|
||||
if(unitScale==3)
|
||||
offsetDate = new Date(date.getFullYear(),date.getMonth(),date.getDate() ,date.getHours()+ tick ,0,0,0);
|
||||
if(unitScale==4)
|
||||
offsetDate = new Date(date.getFullYear(),date.getMonth(),date.getDate() + tick ,0,0,0,0);
|
||||
if(unitScale==6)
|
||||
offsetDate = new Date(date.getFullYear(),date.getMonth()+tick,1,0,0,0,0);
|
||||
if(unitScale==7) {
|
||||
var month = (tick * 3);
|
||||
offsetDate = new Date(date.getFullYear(),month,1,0,0,0,0);
|
||||
}
|
||||
if(unitScale==8)
|
||||
offsetDate = new Date(date.getFullYear()+tick,0,1,0,0,0,0);
|
||||
return offsetDate.getTime()-date.getTime();
|
||||
}
|
||||
|
||||
getUnitTextWidth(unitScale:number):number {
|
||||
switch(unitScale) {
|
||||
case 3:return this.ctx.measureText("88:88").width/this.ratio;
|
||||
case 4:return this.ctx.measureText("88").width/this.ratio;
|
||||
case 5:return this.ctx.measureText("WWW").width/this.ratio;
|
||||
case 6:return this.ctx.measureText("WW").width/this.ratio;
|
||||
case 7:return this.ctx.measureText("WW").width/this.ratio;
|
||||
case 8:return this.ctx.measureText("8888").width/this.ratio;
|
||||
default: return this.ctx.measureText("WW").width/this.ratio;
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
let nextTick=tick+step+Math.trunc(step/2);
|
||||
let nextDateOffset =this.getUnitDateOffset(viewStartDate,unitScale,nextTick);
|
||||
let nextDate = new Date(viewStartDate.getTime() + nextDateOffset);
|
||||
let n=1;
|
||||
switch(unitScale) {
|
||||
case 4:n=nextDate.getDate()-1;break;
|
||||
case 6:n=nextDate.getMonth();break;
|
||||
case 8:n=nextDate.getFullYear();break;
|
||||
default: n = 1;break;
|
||||
}
|
||||
let a = Math.trunc(n / step)*step;
|
||||
nextTick=nextTick-n+a;
|
||||
if(nextTick<=tick) return tick+step;
|
||||
return nextTick;
|
||||
}
|
||||
|
||||
getSteps(unitScale:number):number[] {
|
||||
if(unitScale==4)
|
||||
return [1,14];
|
||||
if(unitScale==6)
|
||||
return [1,3,6];
|
||||
return [1,2,3,4,5];
|
||||
}
|
||||
|
||||
drawUnits(yOffset:number,width:number,viewStartDate:Date,unitScale:number):number {
|
||||
let 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();
|
||||
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);
|
||||
this.ctx.beginPath();
|
||||
this.ctx.strokeStyle=this.lineColor;
|
||||
let steps=this.getSteps(unitScale);
|
||||
let s=0;
|
||||
let step=steps[s];
|
||||
let steppedOneUnit=oneUnit*step;
|
||||
while(unitTextWidth > (steppedOneUnit-(2*this.padding)) && s < steps.length -1) {
|
||||
step=steps[++s];
|
||||
steppedOneUnit=oneUnit*step;
|
||||
}
|
||||
if(steppedOneUnit - (2*this.padding) < unitTextWidth) return yOffset;
|
||||
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;
|
||||
while(x < width) {
|
||||
this.ctx.fillStyle=this.color;
|
||||
//mouseover
|
||||
if(this.mouseX> x && this.mouseX <nextX && this.mouseY > yOffset && this.mouseY <( yOffset + lineHeight) && !this.leftGripMove && !this.rightGripMove && !this.rangeGripMove&& !this.viewPan) {
|
||||
this.ctx.fillStyle=this.hoverBackground;
|
||||
this.ctx.fillRect((x+0.5)*this.ratio,(yOffset+0.5)*this.ratio,(nextX-x)*this.ratio,lineHeight*this.ratio);
|
||||
this.ctx.fillStyle=this.hoverColor;
|
||||
}
|
||||
|
||||
this.ctx.moveTo((x+0.5)*this.ratio,(yOffset+0.5)*this.ratio);
|
||||
this.ctx.lineTo((x+0.5)*this.ratio,(yOffset+lineHeight+0.5)*this.ratio);
|
||||
this.ctx.stroke();
|
||||
|
||||
if(unitTextWidth < steppedOneUnit - (2*this.padding) && x > 0) {
|
||||
this.ctx.fillText(caption,(x+this.padding)*this.ratio,(yOffset+lineHeight-this.padding)*this.ratio);
|
||||
} else if((unitTextWidth < (steppedOneUnit - (2*this.padding) +pixelOffset)) && (unitTextWidth < (steppedOneUnit-(2*this.padding)))) {
|
||||
this.ctx.fillText(caption, (this.padding*this.ratio),(yOffset+lineHeight-this.padding)*this.ratio);
|
||||
} else if(x < 0 && (unitTextWidth <steppedOneUnit - (2*this.padding))) {
|
||||
this.ctx.fillText(caption, ((x+steppedOneUnit-this.padding-unitTextWidth) *this.ratio),(yOffset+ lineHeight-this.padding)*this.ratio);
|
||||
}
|
||||
n=this.getNextTick(viewStartDate,n,step,unitScale);
|
||||
dateOffset = this.getUnitDateOffset(viewStartDate,unitScale,n);
|
||||
nextDateOffset = this.getUnitDateOffset(viewStartDate,unitScale,this.getNextTick(viewStartDate,n,step,unitScale));
|
||||
nextX = (nextDateOffset / this.scale);
|
||||
pixelOffset = (dateOffset / this.scale);
|
||||
caption= this.getStartCaption(new Date(viewStartDate.getTime()+dateOffset),unitScale,false,false);
|
||||
x=pixelOffset;
|
||||
}
|
||||
return lineHeight;
|
||||
}
|
||||
|
||||
redraw() {
|
||||
let yOffset=0;
|
||||
let canvas = this.canvasRef.nativeElement;
|
||||
let height = canvas.offsetHeight;
|
||||
let 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) {
|
||||
if(this.unitScale <=unit) yOffset+=this.drawUnits(yOffset,width,this.viewMinDate,unit);
|
||||
}
|
||||
}
|
||||
|
||||
handleClick() {
|
||||
this.collapsed = !this.collapsed;
|
||||
}
|
||||
|
||||
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;
|
||||
this.startPopoverLeft=(left-10);
|
||||
this.endPopoverLeft=(left+range+10);
|
||||
this.marginLeft = (left - 15);
|
||||
this.rangeWidth = range;
|
||||
this.updatePopoverText(this.popoverStart,this.getStartCaption(startDate,this.unitScale,true));
|
||||
this.updatePopoverText(this.popoverEnd,this.getEndCaption(endDate,this.unitScale,true));
|
||||
this.caption=this.getCaption(startDate,endDate,this.unitScale);
|
||||
}
|
||||
|
||||
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)
|
||||
return new Date(d.getTime()+offsetInMilliseconds);
|
||||
}
|
||||
|
||||
getEndDate(offsetInPixels:number):Date {
|
||||
let oneUnit = this.unitScales[this.unitScale];
|
||||
let 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);
|
||||
}
|
||||
} else if(this.rightGripMove || this.rangeGripMove) {
|
||||
return this.snapToUnit(new Date(this.endDate.getTime() + offsetInMilliseconds),this.unitScale);
|
||||
}
|
||||
return this.endDate;
|
||||
}
|
||||
|
||||
getStartDate(offsetInPixels:number):Date {
|
||||
let oneUnit = this.unitScales[this.unitScale];
|
||||
let offsetInMilliseconds = offsetInPixels * this.scale;
|
||||
if(this.leftGripMove || this.rangeGripMove) {
|
||||
return this.snapToUnit(new Date(this.startDate.getTime() + offsetInMilliseconds),this.unitScale);
|
||||
} else if(this.rightGripMove) {
|
||||
if(this.endDate.getTime() + offsetInMilliseconds < this.startDate.getTime() + oneUnit) {
|
||||
return this.snapToUnit(new Date(this.endDate.getTime() + offsetInMilliseconds - oneUnit),this.unitScale);
|
||||
}
|
||||
}
|
||||
return this.startDate;
|
||||
}
|
||||
|
||||
updateControl(event:MouseEvent|TouchEvent) {
|
||||
let offsetInPixels = this.getClientX(event) - this.downX;
|
||||
if(this.leftGripMove || this.rightGripMove || this.rangeGripMove) {
|
||||
let startDate = this.getStartDate(offsetInPixels);
|
||||
let endDate = this.getEndDate(offsetInPixels);
|
||||
this.updateStyle(startDate,endDate)
|
||||
this.changeDetectorRef.detectChanges();
|
||||
} else if(this.viewPan) {
|
||||
let 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);
|
||||
this.redraw();
|
||||
this.changeDetectorRef.detectChanges();
|
||||
this.downX=this.getClientX(event);
|
||||
}
|
||||
this.lastOffsetInPixels=offsetInPixels
|
||||
}
|
||||
|
||||
isMouseEvent(arg: any): arg is MouseEvent {
|
||||
return arg.clientX !== undefined;
|
||||
}
|
||||
|
||||
getClientX(event:MouseEvent|TouchEvent) {
|
||||
if(this.isMouseEvent(event)) {
|
||||
return (event as MouseEvent).clientX;
|
||||
} else {
|
||||
return (event as TouchEvent).touches[0].clientX;
|
||||
}
|
||||
}
|
||||
|
||||
handleRightGripMouseDown(event:MouseEvent) {
|
||||
this.rightGripMove=true;
|
||||
this.downX = this.getClientX(event);
|
||||
this.popoverEnd.open(this.endCaption);
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
handleRightGripMouseEnter(event:MouseEvent) {
|
||||
this.mouseX=-1;
|
||||
this.mouseY=-1;
|
||||
this.redraw();
|
||||
if(!this.rangeGripMove && !this.leftGripMove && !this.rightGripMove) this.popoverEnd.open(this.endCaption);
|
||||
}
|
||||
|
||||
handleRightGripMouseLeave(event:MouseEvent) {
|
||||
if(!this.rightGripMove) this.popoverEnd.close();
|
||||
}
|
||||
|
||||
handleLeftGripMouseDown(event:MouseEvent|TouchEvent) {
|
||||
this.leftGripMove=true;
|
||||
this.downX = this.getClientX(event);
|
||||
this.popoverStart.open(this.startCaption);
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
handleLeftGripMouseEnter(event:MouseEvent|TouchEvent) {
|
||||
this.mouseX=-1;
|
||||
this.mouseY=-1;
|
||||
this.redraw();
|
||||
if(!this.rangeGripMove && !this.leftGripMove && !this.rightGripMove) this.popoverStart.open(this.startCaption);
|
||||
}
|
||||
|
||||
handleLeftGripMouseLeave(event:MouseEvent) {
|
||||
if(!this.leftGripMove) this.popoverStart.close();
|
||||
}
|
||||
|
||||
handleRangeGripMouseEnter(event:MouseEvent) {
|
||||
this.mouseX=-1;
|
||||
this.mouseY=-1;
|
||||
this.redraw();
|
||||
}
|
||||
|
||||
handleRangeGripMouseDown(event:MouseEvent|TouchEvent) {
|
||||
this.rangeGripMove=true;
|
||||
this.downX = this.getClientX(event);
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
handleViewPanMouseDown(event:MouseEvent|TouchEvent) {
|
||||
this.viewPan=true;
|
||||
this.downX =this.getClientX(event);
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
handleMouseUp(event:MouseEvent|TouchEvent) {
|
||||
//this.updateControl(event);
|
||||
this.startDate = this.getStartDate(this.lastOffsetInPixels);
|
||||
this.endDate = this.getEndDate(this.lastOffsetInPixels);
|
||||
this.popoverStart.close();
|
||||
this.popoverEnd.close();
|
||||
this.startCaption={popoverCaption:this.getStartCaption(this.startDate,this.unitScale,true)};
|
||||
this.endCaption={popoverCaption:this.getEndCaption(this.endDate,this.unitScale,true)};
|
||||
if(this.leftGripMove || this.rightGripMove || this.rangeGripMove) {
|
||||
this.change.emit({ startDate:this.startDate,endDate:this.endDate});
|
||||
}
|
||||
this.rightGripMove=false;
|
||||
this.leftGripMove=false;
|
||||
this.rangeGripMove=false;
|
||||
this.viewPan = false;
|
||||
this.lastOffsetInPixels=0;
|
||||
}
|
||||
|
||||
handleMouseMove(event:MouseEvent) {
|
||||
this.mouseX = -1;
|
||||
this.mouseY = -1;
|
||||
if(!this.leftGripMove && ! this.rightGripMove && !this.rangeGripMove && !this.viewPan) {
|
||||
return;
|
||||
} else {
|
||||
this.updateControl(event);
|
||||
}
|
||||
}
|
||||
|
||||
handleCanvasMouseMove(event:MouseEvent) {
|
||||
this.mouseX = event.offsetX;
|
||||
this.mouseY = event.offsetY;
|
||||
this.redraw();
|
||||
}
|
||||
|
||||
handleCanvasMouseLeave(event:MouseEvent) {
|
||||
this.mouseX = -1;
|
||||
this.mouseY = -1;
|
||||
this.redraw();
|
||||
}
|
||||
|
||||
canZoom(currentScale:number, direction:number):boolean {
|
||||
let nextScale=currentScale;
|
||||
if(direction<0 ) {
|
||||
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);
|
||||
let s=0;
|
||||
let step=steps[s];
|
||||
let steppedOneUnit=oneUnit*step;
|
||||
while(unitTextWidth > (steppedOneUnit-(2*this.padding)) && s < steps.length -1) {
|
||||
step=steps[++s];
|
||||
steppedOneUnit=oneUnit*step;
|
||||
}
|
||||
return unitTextWidth < (steppedOneUnit-(2*this.padding)) && s < steps.length;
|
||||
}
|
||||
}
|
||||
|
||||
handleMouseWheel(event:WheelEvent) {
|
||||
if(!this.canZoom(this.scale,event.deltaY)) return;
|
||||
let oldOffsetInMilliseconds = event.clientX * this.scale;
|
||||
if(event.deltaY>=0)
|
||||
this.scale*=1.1;
|
||||
else
|
||||
this.scale/=1.1;
|
||||
this.posibleUnits=this.getPosibleUnits(this.scale);
|
||||
this.height=this.getHeight();
|
||||
this.changeDetectorRef.detectChanges();
|
||||
this.setCanvasSize();
|
||||
let newOffsetInMilliseconds = event.clientX * this.scale;
|
||||
let 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);
|
||||
this.redraw();
|
||||
this.changeDetectorRef.detectChanges();
|
||||
}
|
||||
|
||||
handleZoomOut() {
|
||||
if(!this.canZoom(this.scale,1)) return;
|
||||
this.scale*=1.1;
|
||||
this.posibleUnits=this.getPosibleUnits(this.scale);
|
||||
this.height=this.getHeight();
|
||||
this.setCanvasSize();
|
||||
this.redraw();
|
||||
this.updateStyle(this.startDate,this.endDate);
|
||||
}
|
||||
|
||||
handleZoomIn() {
|
||||
if(!this.canZoom(this.scale,-1)) return;
|
||||
this.scale/=1.1;
|
||||
this.posibleUnits=this.getPosibleUnits(this.scale);
|
||||
this.height=this.getHeight();
|
||||
this.setCanvasSize();
|
||||
this.redraw();
|
||||
this.updateStyle(this.startDate,this.endDate);
|
||||
}
|
||||
|
||||
handleResize(event:any) {
|
||||
if(this.initialized) {
|
||||
this.setCanvasSize();
|
||||
this.updateStyle(this.startDate,this.endDate);
|
||||
this.redraw();
|
||||
}
|
||||
}
|
||||
|
||||
ngOnChanges (changes: SimpleChanges) {
|
||||
if(this.initialized) {
|
||||
this.setCanvasSize();
|
||||
this.updateStyle(this.startDate,this.endDate);
|
||||
this.redraw();
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user