diff --git a/pdb-js/src/app/app-routing.module.ts b/pdb-js/src/app/app-routing.module.ts index cb08504..0997fba 100644 --- a/pdb-js/src/app/app-routing.module.ts +++ b/pdb-js/src/app/app-routing.module.ts @@ -1,30 +1,31 @@ -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; -import { VisualizationPageComponent } from './visualization-page/visualization-page.component'; -import { MainPageComponent } from './main-page/main-page.component'; -import { UploadPageComponent } from './upload-page/upload-page.component'; -import { HelpPageComponent } from './help-page/help-page.component'; -import { DashboardPageComponent } from './dashboard-page/dashboard-page.component'; -import { DashboardComponent } from './dashboard-page/dashboard/dashboard.component'; -import { CustomizableGridComponent } from './customizable-grid/customizable-grid.component'; - +import { NgModule } from "@angular/core"; +import { RouterModule, Routes } from "@angular/router"; +import { VisualizationPageComponent } from "./visualization-page/visualization-page.component"; +import { MainPageComponent } from "./main-page/main-page.component"; +import { UploadPageComponent } from "./upload-page/upload-page.component"; +import { HelpPageComponent } from "./help-page/help-page.component"; +import { DashboardPageComponent } from "./dashboard-page/dashboard-page.component"; +import { DashboardComponent } from "./dashboard-page/dashboard/dashboard.component"; +import { CustomizableGridComponent } from "./customizable-grid/customizable-grid.component"; +import { DatePickerTestComponent } from "./components/datepicker/date-picker-test.component"; const routes: Routes = [ - { path: '', component: MainPageComponent}, - { path: 'vis', component: VisualizationPageComponent }, - { path: 'dashboard', component: DashboardPageComponent}, - { path: 'dashboard/:id', component: DashboardComponent}, - { path: 'upload', component: UploadPageComponent }, - { path: 'grid', component: CustomizableGridComponent }, - { path: 'help', component: HelpPageComponent }, - // { path: '**', component: PageNotFoundComponent } + { path: "", component: MainPageComponent }, + { path: "vis", component: VisualizationPageComponent }, + { path: "dashboard", component: DashboardPageComponent }, + { path: "dashboard/:id", component: DashboardComponent }, + { path: "testing/datepicker", component: DatePickerTestComponent }, + { path: "upload", component: UploadPageComponent }, + { path: "grid", component: CustomizableGridComponent }, + { path: "help", component: HelpPageComponent }, + // { path: '**', component: PageNotFoundComponent } ]; @NgModule({ imports: [ - RouterModule.forRoot(routes, {}) + RouterModule.forRoot(routes, {}), ], declarations: [], - exports: [RouterModule] + exports: [RouterModule], }) -export class AppRoutingModule { } +export class AppRoutingModule {} diff --git a/pdb-js/src/app/app.module.ts b/pdb-js/src/app/app.module.ts index deebe3a..7ea698f 100644 --- a/pdb-js/src/app/app.module.ts +++ b/pdb-js/src/app/app.module.ts @@ -1,54 +1,65 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { NgModule, enableProdMode } from '@angular/core'; -import { HttpClientModule } from '@angular/common/http'; -import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { enableProdMode, NgModule } from "@angular/core"; +import { HttpClientModule } from "@angular/common/http"; +import { FormsModule, ReactiveFormsModule } from "@angular/forms"; -import { AppRoutingModule } from './app-routing.module'; -import { AppComponent } from './app.component'; -import { MainPageComponent } from './main-page/main-page.component'; -import { HelpPageComponent } from './help-page/help-page.component'; -import { UploadPageComponent } from './upload-page/upload-page.component'; -import { VisualizationPageComponent } from './visualization-page/visualization-page.component'; +import { AppRoutingModule } from "./app-routing.module"; +import { AppComponent } from "./app.component"; +import { MainPageComponent } from "./main-page/main-page.component"; +import { HelpPageComponent } from "./help-page/help-page.component"; +import { UploadPageComponent } from "./upload-page/upload-page.component"; +import { VisualizationPageComponent } from "./visualization-page/visualization-page.component"; -import {MatAutocompleteModule} from '@angular/material/autocomplete'; -import {MatButtonModule} from '@angular/material/button'; -import {MatCheckboxModule} from '@angular/material/checkbox'; -import {MatSelectModule} from '@angular/material/select'; -import { MatFormFieldModule } from '@angular/material/form-field'; -import { MatInputModule } from '@angular/material/input'; -import {MatProgressBarModule} from '@angular/material/progress-bar'; -import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; -import {MatRadioModule} from '@angular/material/radio'; -import {MatSnackBarModule} from '@angular/material/snack-bar'; -import {MatTooltipModule} from '@angular/material/tooltip'; -import {OverlayModule} from '@angular/cdk/overlay'; -import { YAxisDefinitionComponent } from './y-axis-definition/y-axis-definition.component'; -import { QueryAutocompleteComponent } from './query-autocomplete/query-autocomplete.component'; -import { LimitByComponent } from './limit-by/limit-by.component'; -import { PlotDetailsComponent } from './plot-details/plot-details.component'; -import { PlotViewComponent } from './plot-view/plot-view.component'; -import { GalleryViewComponent, GalleryItemView, GalleryFilterView } from './gallery-view/gallery-view.component'; -import { ImageToggleComponent } from './image-toggle/image-toggle.component'; -import { DashboardPageComponent } from './dashboard-page/dashboard-page.component'; -import { NewDashboardComponent } from './dashboard-page/new-dashboard/new-dashboard.component'; -import { MatDialogModule, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog'; -import {MatTableModule} from '@angular/material/table'; -import {MatGridListModule} from '@angular/material/grid-list'; -import {MatCardModule} from '@angular/material/card'; -import {MatBadgeModule} from '@angular/material/badge'; -import { DashboardComponent } from './dashboard-page/dashboard/dashboard.component'; -import { AddTextDialogComponent } from './dashboard-page/dashboard/add-text-dialog/add-text-dialog.component'; -import { TextWidgetComponent } from './dashboard-page/dashboard/text-widget/text-widget.component'; -import { AddPlotDialogComponent } from './dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component'; -import { PlotWidgetComponent } from './dashboard-page/dashboard/plot-widget/plot-widget.component'; -import { FullScreenPlotDialogComponent } from './dashboard-page/dashboard/full-screen-plot-dialog/full-screen-plot-dialog.component'; -import { CustomizableGridComponent } from './customizable-grid/customizable-grid.component'; +import { DatePickerComponent } from "./components/datepicker/date-picker.component"; +import { DatePickerTestComponent } from "./components/datepicker/date-picker-test.component"; -import {DragDropModule} from '@angular/cdk/drag-drop'; -import { ConfirmationDialogComponent } from './confirmation-dialog/confirmation-dialog.component'; -import { FocusDirective } from './focus.directive'; -import { MarkdownModule } from 'ngx-markdown'; +import { MatAutocompleteModule } from "@angular/material/autocomplete"; +import { MatButtonModule } from "@angular/material/button"; +import { MatCheckboxModule } from "@angular/material/checkbox"; +import { MatSelectModule } from "@angular/material/select"; +import { MatFormFieldModule } from "@angular/material/form-field"; +import { MatInputModule } from "@angular/material/input"; +import { MatProgressBarModule } from "@angular/material/progress-bar"; +import { MatProgressSpinnerModule } from "@angular/material/progress-spinner"; +import { MatRadioModule } from "@angular/material/radio"; +import { MatSnackBarModule } from "@angular/material/snack-bar"; +import { MatTooltipModule } from "@angular/material/tooltip"; +import { OverlayModule } from "@angular/cdk/overlay"; +import { YAxisDefinitionComponent } from "./y-axis-definition/y-axis-definition.component"; +import { QueryAutocompleteComponent } from "./query-autocomplete/query-autocomplete.component"; +import { LimitByComponent } from "./limit-by/limit-by.component"; +import { PlotDetailsComponent } from "./plot-details/plot-details.component"; +import { PlotViewComponent } from "./plot-view/plot-view.component"; +import { + GalleryFilterView, + GalleryItemView, + GalleryViewComponent, +} from "./gallery-view/gallery-view.component"; +import { ImageToggleComponent } from "./image-toggle/image-toggle.component"; +import { DashboardPageComponent } from "./dashboard-page/dashboard-page.component"; +import { NewDashboardComponent } from "./dashboard-page/new-dashboard/new-dashboard.component"; +import { + MAT_DIALOG_DEFAULT_OPTIONS, + MatDialogModule, +} from "@angular/material/dialog"; +import { MatTabsModule } from "@angular/material/tabs"; +import { MatTableModule } from "@angular/material/table"; +import { MatGridListModule } from "@angular/material/grid-list"; +import { MatCardModule } from "@angular/material/card"; +import { MatBadgeModule } from "@angular/material/badge"; +import { DashboardComponent } from "./dashboard-page/dashboard/dashboard.component"; +import { AddTextDialogComponent } from "./dashboard-page/dashboard/add-text-dialog/add-text-dialog.component"; +import { TextWidgetComponent } from "./dashboard-page/dashboard/text-widget/text-widget.component"; +import { AddPlotDialogComponent } from "./dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component"; +import { PlotWidgetComponent } from "./dashboard-page/dashboard/plot-widget/plot-widget.component"; +import { FullScreenPlotDialogComponent } from "./dashboard-page/dashboard/full-screen-plot-dialog/full-screen-plot-dialog.component"; +import { CustomizableGridComponent } from "./customizable-grid/customizable-grid.component"; + +import { DragDropModule } from "@angular/cdk/drag-drop"; +import { ConfirmationDialogComponent } from "./confirmation-dialog/confirmation-dialog.component"; +import { FocusDirective } from "./focus.directive"; +import { MarkdownModule } from "ngx-markdown"; @NgModule({ declarations: [ @@ -56,6 +67,8 @@ import { MarkdownModule } from 'ngx-markdown'; MainPageComponent, HelpPageComponent, UploadPageComponent, + DatePickerComponent, + DatePickerTestComponent, VisualizationPageComponent, YAxisDefinitionComponent, QueryAutocompleteComponent, @@ -76,7 +89,7 @@ import { MarkdownModule } from 'ngx-markdown'; FullScreenPlotDialogComponent, CustomizableGridComponent, ConfirmationDialogComponent, - FocusDirective + FocusDirective, ], imports: [ MarkdownModule.forRoot(), @@ -99,15 +112,19 @@ import { MarkdownModule } from 'ngx-markdown'; MatProgressSpinnerModule, MatSelectModule, MatSnackBarModule, + MatTabsModule, MatTableModule, MatTooltipModule, BrowserAnimationsModule, HttpClientModule, - OverlayModule + OverlayModule, ], - providers: [{provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {hasBackdrop: true}}], - bootstrap: [AppComponent] + providers: [{ + provide: MAT_DIALOG_DEFAULT_OPTIONS, + useValue: { hasBackdrop: true }, + }], + bootstrap: [AppComponent], }) -export class AppModule { } +export class AppModule {} -enableProdMode() +enableProdMode(); diff --git a/pdb-js/src/app/components/datepicker/date-picker-test.component.html b/pdb-js/src/app/components/datepicker/date-picker-test.component.html new file mode 100644 index 0000000..44e2b0d --- /dev/null +++ b/pdb-js/src/app/components/datepicker/date-picker-test.component.html @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/pdb-js/src/app/components/datepicker/date-picker-test.component.ts b/pdb-js/src/app/components/datepicker/date-picker-test.component.ts new file mode 100644 index 0000000..8aa8b5d --- /dev/null +++ b/pdb-js/src/app/components/datepicker/date-picker-test.component.ts @@ -0,0 +1,12 @@ +import { Component} from '@angular/core'; + +@Component({ + selector: 'app-date-picker-test', + templateUrl: './date-picker-test.component.html' +}) +export class DatePickerTestComponent { + + constructor(){ + } + +} diff --git a/pdb-js/src/app/components/datepicker/date-picker.component.html b/pdb-js/src/app/components/datepicker/date-picker.component.html new file mode 100644 index 0000000..63c6e66 --- /dev/null +++ b/pdb-js/src/app/components/datepicker/date-picker.component.html @@ -0,0 +1,207 @@ + + +
+ +
+ + +
+ + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + Seconds: + + + + Minutes: + + + + Hours: + + + + Days: + + + + Months: + + + + Years: + + + + + +
+ + Date Range: + + + +
+ + +
+ diff --git a/pdb-js/src/app/components/datepicker/date-picker.component.ts b/pdb-js/src/app/components/datepicker/date-picker.component.ts new file mode 100644 index 0000000..9fb227a --- /dev/null +++ b/pdb-js/src/app/components/datepicker/date-picker.component.ts @@ -0,0 +1,107 @@ +import { Component } from "@angular/core"; +import { FormControl, FormGroup, Validators } from "@angular/forms"; + +export type DateType = "quick" | "relative" | "absolute"; + +export type DateValue = { type: DateType; value: string; display: string }; + +@Component({ + selector: "app-date-picker", + templateUrl: "./date-picker.component.html", +}) +export class DatePickerComponent { + isOpen = false; + + relativeTimeRangeUnit = "relativeTimeRangeMinutes"; + + relativeTimeRangeAmount = 15; + + relativeTimeRange = { + seconds: 0, + minutes: 15, + hours: 0, + days: 0, + months: 0, + years: 0, + }; + + dateRangeFormGroup = new FormGroup({ + dateRange: new FormControl( + "2019-10-05 00:00:00 - 2019-10-11 23:59:59", + [ + Validators.pattern( + /^\d{4}-\d{2}-\d{2} ([01][0-9]|2[0-3]):\d{2}:\d{2} - \d{4}-\d{2}-\d{2} ([01][0-9]|2[0-3]):\d{2}:\d{2}$/, + ), + ], + ), + }); + + dateValue: DateValue = { + type: "quick", + value: "BM/EM", + display: "this month", + }; + + selectedTabIndex = 0; + + constructor() {} + + dateDisplay(): string { + return this.dateValue.value; + } + + tabChange() { + //( window).initSimpleDatePicker(); // breaks form control + } + + applyQuick(value: string, display: string) { + this.dateValue.type = "quick"; + this.dateValue.value = value; + this.dateValue.display = display; + this.isOpen = false; + } + + private fixToRange(val: number, min: number, max: number) { + return val < min ? min : (val > max ? max : val); + } + + applyRelativeTimeRange() { + const x = this.relativeTimeRange; + const years = x.years ? x.years + "Y" : ""; + const months = x.months ? x.months + "M" : ""; + const days = x.days ? x.days + "D" : ""; + const time = x.hours || x.minutes || x.seconds ? "T" : ""; + const hours = x.hours ? x.hours + "H" : ""; + const minutes = x.minutes ? x.minutes + "M" : ""; + const seconds = x.seconds ? x.seconds + "S" : ""; + const isoTimeRange = + `P${years}${months}${days}${time}${hours}${minutes}${seconds}`; + + this.dateValue.type = "relative"; + this.dateValue.value = isoTimeRange; + this.dateValue.display = isoTimeRange; + this.isOpen = false; + } + + applyAbsoluteTime() { + this.dateValue.type = "absolute"; + this.dateValue.value = this.dateRangeFormGroup.controls.dateRange + .value; + this.dateValue.display = this.dateRangeFormGroup.controls.dateRange + .value; + this.isOpen = false; + console.log(this.dateValue); + } + + scrollRelativeTimeRange( + event: WheelEvent, + unit: "seconds" | "minutes" | "hours" | "days" | "months" | "years", + max: number, + ) { + this.relativeTimeRange[unit] = this.fixToRange( + this.relativeTimeRange[unit] + (event.deltaY > 0 ? -1 : 1), + 0, + max, + ); + } +} diff --git a/pdb-js/src/index.html b/pdb-js/src/index.html index 5c65b72..1fc4e70 100644 --- a/pdb-js/src/index.html +++ b/pdb-js/src/index.html @@ -47,6 +47,22 @@ }); } + function initSimpleDatePicker() { + $('input[name="dates"]').daterangepicker({ + timePicker: true, + minDate: "2017-01-01", + maxDate: "2029-12-31", + maxYear: parseInt(moment().format('YYYY'),10), + timePicker24Hour: true, + timePickerSeconds: true, + showDropdowns: true, // drop downs for selecting year and month + locale: { + format: 'YYYY-MM-DD HH:mm:ss', + "firstDay": 1 // monday is the first day of the week + }, + }); + } + $( document ).ready(function() { initInvaders('results'); document.addEventListener("invadersPause", function(event) { diff --git a/pdb-js/src/styles.scss b/pdb-js/src/styles.scss index 30aa5cf..fd5eef9 100644 --- a/pdb-js/src/styles.scss +++ b/pdb-js/src/styles.scss @@ -182,6 +182,9 @@ a.external-link:after { mat-form-field.pdb-form-full-width { width: 100%; } +mat-form-field.pdb-form-number-small { + width: 4.5em; +} mat-form-field.pdb-form-number { width: 5.5em; }