andi/perfdb
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Activity

Compare commits

base: andi:standalone
Branches Tags
andi:master andi:standalone
...
compare: andi:64725de8b9229ee22698451944d02f976bc184e7
Branches Tags
andi:master andi:standalone

6 Commits
standalone ... 64725de8b9

Author SHA1 Message Date
Andreas Huber
64725de8b9 use the primary color (blue) for save buttons instead of the Amazon orange 2024-10-13 19:42:39 +02:00
Andreas Huber
768962aa43 remove daterangepicker and moment JS 
I replaced moment with luxon.
And I am working on my own date picker.
 2024-10-13 19:05:46 +02:00
Andreas Huber
1fd7becf9a remove unused imports after adding lazy loading 2024-10-13 18:43:44 +02:00
Andreas Huber
e292587a36 update router to use standalone components and lazy loading 2024-10-13 10:54:33 +02:00
Andreas Huber
8fef666183 step 3 - Bootstrap the application using standalone APIs 
see https://v17.angular.io/guide/standalone-migration
I executed
ng g @angular/core:standalone
and select "Bootstrap the project using standalone APIs"

Note Step 2 did not change any files.
 2024-10-13 10:22:18 +02:00
Andreas Huber
08a481b5ba step 1 - convert al lcomponents, directives and pipes to standalone 
see https://v17.angular.io/guide/standalone-migration
I executed:
ng g @angular/core:standalone
and selected "Convert all components, directives and pipes to standalone"
 2024-10-13 09:55:07 +02:00
55 changed files with 341 additions and 2340 deletions
Expand all files Collapse all files

29
pdb-js/src/app/app-routing.module.ts
View File

@@ -1,29 +0,0 @@
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";
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 }
];
@NgModule({
imports: [
RouterModule.forRoot(routes, {}),
],
declarations: [],
exports: [RouterModule],
})
export class AppRoutingModule {}

6
pdb-js/src/app/app.component.spec.ts
View File

@@ -6,12 +6,10 @@ describe('AppComponent', () => {
beforeEach(waitForAsync(() => { beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
imports: [ imports: [
RouterTestingModule RouterTestingModule,
],
declarations: [
AppComponent AppComponent
], ],
}).compileComponents(); }).compileComponents();
})); }));
it('should create the app', () => { it('should create the app', () => {

6
pdb-js/src/app/app.component.ts
View File

@@ -1,11 +1,15 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser'; import {DomSanitizer} from '@angular/platform-browser';
import {MatIconRegistry} from '@angular/material/icon'; import {MatIconRegistry} from '@angular/material/icon';
import { MatAnchor } from '@angular/material/button';
import { RouterLink, RouterOutlet } from '@angular/router';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
templateUrl: './app.component.html', templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'] styleUrls: ['./app.component.scss'],
standalone: true,
imports: [MatAnchor, RouterLink, RouterOutlet]
}) })
export class AppComponent { export class AppComponent {
title = 'pdb'; title = 'pdb';

121
pdb-js/src/app/app.module.ts
View File

@@ -1,121 +0,0 @@
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { enableProdMode, NgModule } from "@angular/core";
import { provideHttpClient, withInterceptorsFromDi } 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 { DatePickerComponent } from "./components/datepicker/date-picker.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 {
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: [
AppComponent,
MainPageComponent,
HelpPageComponent,
UploadPageComponent,
DatePickerComponent,
VisualizationPageComponent,
YAxisDefinitionComponent,
QueryAutocompleteComponent,
LimitByComponent,
PlotDetailsComponent,
PlotViewComponent,
GalleryViewComponent,
GalleryItemView,
GalleryFilterView,
ImageToggleComponent,
DashboardPageComponent,
NewDashboardComponent,
DashboardComponent,
AddTextDialogComponent,
TextWidgetComponent,
AddPlotDialogComponent,
PlotWidgetComponent,
FullScreenPlotDialogComponent,
CustomizableGridComponent,
ConfirmationDialogComponent,
FocusDirective,
],
bootstrap: [AppComponent], imports: [MarkdownModule.forRoot(),
BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule,
DragDropModule,
MatAutocompleteModule,
MatBadgeModule,
MatButtonModule,
MatCardModule,
MatCheckboxModule,
MatDialogModule,
MatFormFieldModule,
MatGridListModule,
MatInputModule,
MatRadioModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatSelectModule,
MatSnackBarModule,
MatTabsModule,
MatTableModule,
MatTooltipModule,
BrowserAnimationsModule,
OverlayModule], providers: [{
provide: MAT_DIALOG_DEFAULT_OPTIONS,
useValue: { hasBackdrop: true },
}, provideHttpClient(withInterceptorsFromDi())] })
export class AppModule {}
enableProdMode();

27
pdb-js/src/app/components/datepicker/date-picker.component.ts
View File

@@ -5,12 +5,13 @@ import {
Input, Input,
Output, Output,
} from "@angular/core"; } from "@angular/core";
import { import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, Validators, FormsModule, ReactiveFormsModule } from "@angular/forms";
ControlValueAccessor, import { MatButton } from "@angular/material/button";
FormControl, import { MatTooltip } from "@angular/material/tooltip";
NG_VALUE_ACCESSOR, import { CdkOverlayOrigin, CdkConnectedOverlay } from "@angular/cdk/overlay";
Validators, import { MatTabGroup, MatTab } from "@angular/material/tabs";
} from "@angular/forms"; import { MatFormField, MatLabel } from "@angular/material/form-field";
import { MatInput } from "@angular/material/input";
export type DateType = "QUICK" | "RELATIVE" | "ABSOLUTE"; export type DateType = "QUICK" | "RELATIVE" | "ABSOLUTE";
@@ -36,6 +37,20 @@ export class DatePickerChange {
multi: true, multi: true,
}, },
], ],
standalone: true,
imports: [
MatButton,
MatTooltip,
CdkOverlayOrigin,
CdkConnectedOverlay,
MatTabGroup,
MatTab,
MatFormField,
MatLabel,
MatInput,
FormsModule,
ReactiveFormsModule,
],
}) })
export class DatePickerComponent implements ControlValueAccessor { export class DatePickerComponent implements ControlValueAccessor {
isOpen = false; isOpen = false;

4
pdb-js/src/app/confirmation-dialog/confirmation-dialog.component.spec.ts
View File

@@ -8,8 +8,8 @@ describe('ConfirmationDialogComponent', () => {
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
declarations: [ ConfirmationDialogComponent ] imports: [ConfirmationDialogComponent]
}) })
.compileComponents(); .compileComponents();
fixture = TestBed.createComponent(ConfirmationDialogComponent); fixture = TestBed.createComponent(ConfirmationDialogComponent);

10
pdb-js/src/app/confirmation-dialog/confirmation-dialog.component.ts
View File

@@ -1,9 +1,15 @@
import { Component, ElementRef, Inject, ViewChild } from '@angular/core'; import { Component, ElementRef, Inject, ViewChild } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose } from '@angular/material/dialog';
import { NgIf } from '@angular/common';
import { CdkScrollable } from '@angular/cdk/scrolling';
import { MatButton } from '@angular/material/button';
import { FocusDirective } from '../focus.directive';
@Component({ @Component({
selector: 'app-confirmation-dialog', selector: 'app-confirmation-dialog',
templateUrl: './confirmation-dialog.component.html' templateUrl: './confirmation-dialog.component.html',
standalone: true,
imports: [NgIf, MatDialogTitle, CdkScrollable, MatDialogContent, MatDialogActions, MatButton, MatDialogClose, FocusDirective]
}) })
export class ConfirmationDialogComponent { export class ConfirmationDialogComponent {

4
pdb-js/src/app/customizable-grid/customizable-grid.component.spec.ts
View File

@@ -8,8 +8,8 @@ describe('CustomizableGridComponent', () => {
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
declarations: [ CustomizableGridComponent ] imports: [CustomizableGridComponent]
}) })
.compileComponents(); .compileComponents();
fixture = TestBed.createComponent(CustomizableGridComponent); fixture = TestBed.createComponent(CustomizableGridComponent);

7
pdb-js/src/app/customizable-grid/customizable-grid.component.ts
View File

@@ -1,12 +1,15 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { CdkDragEnter, CdkDropList, moveItemInArray, DragRef} from '@angular/cdk/drag-drop'; import { CdkDragEnter, CdkDropList, moveItemInArray, DragRef, CdkDropListGroup, CdkDrag } from '@angular/cdk/drag-drop';
import { AfterViewInit } from '@angular/core'; import { AfterViewInit } from '@angular/core';
import { ViewChild } from '@angular/core'; import { ViewChild } from '@angular/core';
import { NgFor, NgStyle, NgClass } from '@angular/common';
@Component({ @Component({
selector: 'app-customizable-grid', selector: 'app-customizable-grid',
templateUrl: './customizable-grid.component.html' templateUrl: './customizable-grid.component.html',
standalone: true,
imports: [NgFor, CdkDropListGroup, NgStyle, CdkDropList, CdkDrag, NgClass]
}) })
export class CustomizableGridComponent implements AfterViewInit { export class CustomizableGridComponent implements AfterViewInit {
@ViewChild(CdkDropList) placeholder!: CdkDropList; @ViewChild(CdkDropList) placeholder!: CdkDropList;

4
pdb-js/src/app/dashboard-page/dashboard-page.component.spec.ts
View File

@@ -8,8 +8,8 @@ describe('DashboardPageComponent', () => {
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
declarations: [ DashboardPageComponent ] imports: [DashboardPageComponent]
}) })
.compileComponents(); .compileComponents();
fixture = TestBed.createComponent(DashboardPageComponent); fixture = TestBed.createComponent(DashboardPageComponent);

9
pdb-js/src/app/dashboard-page/dashboard-page.component.ts
View File

@@ -5,10 +5,17 @@ import { MatSnackBar } from '@angular/material/snack-bar';
import { ConfirmationDialogComponent } from '../confirmation-dialog/confirmation-dialog.component'; import { ConfirmationDialogComponent } from '../confirmation-dialog/confirmation-dialog.component';
import { Dashboard, DashboardCreationData, DashboardList, DashboardService } from '../dashboard.service'; import { Dashboard, DashboardCreationData, DashboardList, DashboardService } from '../dashboard.service';
import { NewDashboardComponent } from './new-dashboard/new-dashboard.component'; import { NewDashboardComponent } from './new-dashboard/new-dashboard.component';
import { NgIf } from '@angular/common';
import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { MatButton, MatIconButton } from '@angular/material/button';
import { MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow } from '@angular/material/table';
import { RouterLink } from '@angular/router';
@Component({ @Component({
selector: 'app-dashboard-page', selector: 'app-dashboard-page',
templateUrl: './dashboard-page.component.html' templateUrl: './dashboard-page.component.html',
standalone: true,
imports: [NgIf, MatProgressSpinner, MatButton, MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, RouterLink, MatIconButton, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow]
}) })
export class DashboardPageComponent implements OnInit { export class DashboardPageComponent implements OnInit {

2
pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.html
View File

@@ -18,5 +18,5 @@
<div mat-dialog-actions align="end"> <div mat-dialog-actions align="end">
<button mat-button mat-dialog-close >Cancel</button> <button mat-button mat-dialog-close >Cancel</button>
<button class="save-button" mat-button mat-dialog-close (click)="onSaveClick()">Save</button> <button class="save-button" mat-flat-button mat-dialog-close (click)="onSaveClick()">Save</button>
</div> </div>

4
pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.spec.ts
View File

@@ -8,8 +8,8 @@ describe('AddPlotDialogComponent', () => {
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
declarations: [ AddPlotDialogComponent ] imports: [AddPlotDialogComponent]
}) })
.compileComponents(); .compileComponents();
fixture = TestBed.createComponent(AddPlotDialogComponent); fixture = TestBed.createComponent(AddPlotDialogComponent);

9
pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.ts
View File

@@ -1,11 +1,16 @@
import { AfterViewInit, Component, ElementRef, Inject, ViewChild } from '@angular/core'; import { AfterViewInit, Component, ElementRef, Inject, ViewChild } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { MatDialogRef, MAT_DIALOG_DATA, MatDialogContent, MatDialogActions, MatDialogClose } from '@angular/material/dialog';
import { PlotConfig } from 'src/app/plot.service'; import { PlotConfig } from 'src/app/plot.service';
import { VisualizationPageComponent } from 'src/app/visualization-page/visualization-page.component'; import { VisualizationPageComponent } from 'src/app/visualization-page/visualization-page.component';
import { VisualizationPageComponent as VisualizationPageComponent_1 } from '../../../visualization-page/visualization-page.component';
import { CdkScrollable } from '@angular/cdk/scrolling';
import { MatButton } from '@angular/material/button';
@Component({ @Component({
selector: 'app-add-plot-dialog', selector: 'app-add-plot-dialog',
templateUrl: './add-plot-dialog.component.html' templateUrl: './add-plot-dialog.component.html',
standalone: true,
imports: [VisualizationPageComponent_1, CdkScrollable, MatDialogContent, MatDialogActions, MatButton, MatDialogClose]
}) })
export class AddPlotDialogComponent { export class AddPlotDialogComponent {

2
pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.html
View File

@@ -34,5 +34,5 @@
</div> </div>
<div mat-dialog-actions align="end"> <div mat-dialog-actions align="end">
<button mat-button mat-dialog-close (click)="close()">Cancel</button> <button mat-button mat-dialog-close (click)="close()">Cancel</button>
<button class="save-button" mat-button mat-dialog-close (click)="onSaveClick()">Save</button> <button class="save-button" mat-flat-button mat-dialog-close (click)="onSaveClick()">Save</button>
</div> </div>

4
pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.spec.ts
View File

@@ -8,8 +8,8 @@ describe('AddTextDialogComponent', () => {
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
declarations: [ AddTextDialogComponent ] imports: [AddTextDialogComponent]
}) })
.compileComponents(); .compileComponents();
fixture = TestBed.createComponent(AddTextDialogComponent); fixture = TestBed.createComponent(AddTextDialogComponent);

13
pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.ts
View File

@@ -1,9 +1,18 @@
import { Component, ElementRef, Inject, ViewChild } from '@angular/core'; import { Component, ElementRef, Inject, ViewChild } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose } from '@angular/material/dialog';
import { CdkScrollable } from '@angular/cdk/scrolling';
import { MatFormField, MatLabel } from '@angular/material/form-field';
import { MatInput } from '@angular/material/input';
import { FormsModule } from '@angular/forms';
import { FocusDirective } from '../../../focus.directive';
import { MarkdownComponent } from 'ngx-markdown';
import { MatButton } from '@angular/material/button';
@Component({ @Component({
selector: 'app-add-text-dialog', selector: 'app-add-text-dialog',
templateUrl: './add-text-dialog.component.html' templateUrl: './add-text-dialog.component.html',
standalone: true,
imports: [MatDialogTitle, CdkScrollable, MatDialogContent, MatFormField, MatLabel, MatInput, FormsModule, FocusDirective, MarkdownComponent, MatDialogActions, MatButton, MatDialogClose]
}) })
export class AddTextDialogComponent { export class AddTextDialogComponent {
text = ""; text = "";

2
pdb-js/src/app/dashboard-page/dashboard/dashboard.component.html
View File

@@ -85,7 +85,7 @@
<div class="toolbar"> <div class="toolbar">
<button mat-button (click)="addText()">Add Text</button> <button mat-button (click)="addText()">Add Text</button>
<button mat-button (click)="addPlot()">Add Plot</button> <button mat-button (click)="addPlot()">Add Plot</button>
<button class="save-button" mat-button (click)="save()" [disabled]="!isDirty()">Save</button> <button class="save-button" mat-flat-button (click)="save()" [disabled]="!isDirty()">Save</button>
<div id="filter-date-range"> <div id="filter-date-range">
Date range: <app-date-picker #datePicker (dateValueSelected)="updateDateRange($event)" ></app-date-picker> Date range: <app-date-picker #datePicker (dateValueSelected)="updateDateRange($event)" ></app-date-picker>
</div> </div>

4
pdb-js/src/app/dashboard-page/dashboard/dashboard.component.spec.ts
View File

@@ -8,8 +8,8 @@ describe('DashboardComponent', () => {
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
declarations: [ DashboardComponent ] imports: [DashboardComponent]
}) })
.compileComponents(); .compileComponents();
fixture = TestBed.createComponent(DashboardComponent); fixture = TestBed.createComponent(DashboardComponent);

14
pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts
View File

@@ -1,19 +1,27 @@
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop'; import { CdkDragDrop, moveItemInArray, transferArrayItem, CdkDropListGroup, CdkDropList, CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
import { HttpErrorResponse } from '@angular/common/http'; import { HttpErrorResponse } from '@angular/common/http';
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'; import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog'; import { MatDialog } from '@angular/material/dialog';
import { MatSnackBar } from '@angular/material/snack-bar'; import { MatSnackBar } from '@angular/material/snack-bar';
import { ActivatedRoute } from '@angular/router'; import { ActivatedRoute, RouterLink } from '@angular/router';
import { Dashboard, DashboardCreationData, DashboardService, PlotWidget, PlotWidgetRenderData, TextWidget } from 'src/app/dashboard.service'; import { Dashboard, DashboardCreationData, DashboardService, PlotWidget, PlotWidgetRenderData, TextWidget } from 'src/app/dashboard.service';
import { PlotConfig, PlotResponse, PlotService } from 'src/app/plot.service'; import { PlotConfig, PlotResponse, PlotService } from 'src/app/plot.service';
import { NewDashboardComponent } from '../new-dashboard/new-dashboard.component'; import { NewDashboardComponent } from '../new-dashboard/new-dashboard.component';
import { AddPlotDialogComponent } from './add-plot-dialog/add-plot-dialog.component'; import { AddPlotDialogComponent } from './add-plot-dialog/add-plot-dialog.component';
import { AddTextDialogComponent } from './add-text-dialog/add-text-dialog.component'; import { AddTextDialogComponent } from './add-text-dialog/add-text-dialog.component';
import { DatePickerChange, DatePickerComponent } from 'src/app/components/datepicker/date-picker.component'; import { DatePickerChange, DatePickerComponent } from 'src/app/components/datepicker/date-picker.component';
import { NgIf, NgFor } from '@angular/common';
import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { MatButton, MatIconButton } from '@angular/material/button';
import { DatePickerComponent as DatePickerComponent_1 } from '../../components/datepicker/date-picker.component';
import { TextWidgetComponent } from './text-widget/text-widget.component';
import { PlotWidgetComponent } from './plot-widget/plot-widget.component';
@Component({ @Component({
selector: 'app-dashboard', selector: 'app-dashboard',
templateUrl: './dashboard.component.html' templateUrl: './dashboard.component.html',
standalone: true,
imports: [NgIf, MatProgressSpinner, RouterLink, MatButton, DatePickerComponent_1, MatIconButton, CdkDropListGroup, NgFor, CdkDropList, CdkDrag, CdkDragHandle, TextWidgetComponent, PlotWidgetComponent]
}) })
export class DashboardComponent implements OnInit{ export class DashboardComponent implements OnInit{

7
pdb-js/src/app/dashboard-page/dashboard/full-screen-plot-dialog/full-screen-plot-dialog.component.ts
View File

@@ -1,9 +1,12 @@
import { Component, Inject } from '@angular/core'; import { Component, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { MatDialogRef, MAT_DIALOG_DATA, MatDialogClose } from '@angular/material/dialog';
import { MatIconButton } from '@angular/material/button';
@Component({ @Component({
selector: 'app-full-screen-plot-dialog', selector: 'app-full-screen-plot-dialog',
templateUrl: './full-screen-plot-dialog.component.html' templateUrl: './full-screen-plot-dialog.component.html',
standalone: true,
imports: [MatIconButton, MatDialogClose]
}) })
export class FullScreenPlotDialogComponent { export class FullScreenPlotDialogComponent {

4
pdb-js/src/app/dashboard-page/dashboard/plot-widget/plot-widget.component.spec.ts
View File

@@ -8,8 +8,8 @@ describe('PlotWidgetComponent', () => {
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
declarations: [ PlotWidgetComponent ] imports: [PlotWidgetComponent]
}) })
.compileComponents(); .compileComponents();
fixture = TestBed.createComponent(PlotWidgetComponent); fixture = TestBed.createComponent(PlotWidgetComponent);

6
pdb-js/src/app/dashboard-page/dashboard/plot-widget/plot-widget.component.ts
View File

@@ -6,10 +6,14 @@ import { PlotViewComponent } from 'src/app/plot-view/plot-view.component';
import { PlotConfig, PlotResponse, PlotService } from 'src/app/plot.service'; import { PlotConfig, PlotResponse, PlotService } from 'src/app/plot.service';
import { AddPlotDialogComponent } from '../add-plot-dialog/add-plot-dialog.component'; import { AddPlotDialogComponent } from '../add-plot-dialog/add-plot-dialog.component';
import { FullScreenPlotDialogComponent } from '../full-screen-plot-dialog/full-screen-plot-dialog.component'; import { FullScreenPlotDialogComponent } from '../full-screen-plot-dialog/full-screen-plot-dialog.component';
import { NgClass, NgIf } from '@angular/common';
import { MatIconButton, MatButton } from '@angular/material/button';
@Component({ @Component({
selector: 'app-plot-widget', selector: 'app-plot-widget',
templateUrl: './plot-widget.component.html' templateUrl: './plot-widget.component.html',
standalone: true,
imports: [NgClass, MatIconButton, NgIf, MatButton]
}) })
export class PlotWidgetComponent { export class PlotWidgetComponent {
@Input("data") @Input("data")

4
pdb-js/src/app/dashboard-page/dashboard/text-widget/text-widget.component.spec.ts
View File

@@ -8,8 +8,8 @@ describe('TextWidgetComponent', () => {
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
declarations: [ TextWidgetComponent ] imports: [TextWidgetComponent]
}) })
.compileComponents(); .compileComponents();
fixture = TestBed.createComponent(TextWidgetComponent); fixture = TestBed.createComponent(TextWidgetComponent);

6
pdb-js/src/app/dashboard-page/dashboard/text-widget/text-widget.component.ts
View File

@@ -3,10 +3,14 @@ import { MatDialog } from '@angular/material/dialog';
import { ConfirmationDialogComponent } from 'src/app/confirmation-dialog/confirmation-dialog.component'; import { ConfirmationDialogComponent } from 'src/app/confirmation-dialog/confirmation-dialog.component';
import { TextWidget } from 'src/app/dashboard.service'; import { TextWidget } from 'src/app/dashboard.service';
import { AddTextDialogComponent } from '../add-text-dialog/add-text-dialog.component'; import { AddTextDialogComponent } from '../add-text-dialog/add-text-dialog.component';
import { MatIconButton } from '@angular/material/button';
import { MarkdownComponent } from 'ngx-markdown';
@Component({ @Component({
selector: 'app-text-widget', selector: 'app-text-widget',
templateUrl: './text-widget.component.html' templateUrl: './text-widget.component.html',
standalone: true,
imports: [MatIconButton, MarkdownComponent]
}) })
export class TextWidgetComponent { export class TextWidgetComponent {
@Input() @Input()

4
pdb-js/src/app/dashboard-page/new-dashboard/new-dashboard.component.spec.ts
View File

@@ -8,8 +8,8 @@ describe('NewDashboardComponent', () => {
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
declarations: [ NewDashboardComponent ] imports: [NewDashboardComponent]
}) })
.compileComponents(); .compileComponents();
fixture = TestBed.createComponent(NewDashboardComponent); fixture = TestBed.createComponent(NewDashboardComponent);

13
pdb-js/src/app/dashboard-page/new-dashboard/new-dashboard.component.ts
View File

@@ -1,11 +1,18 @@
import { Component, ElementRef, Inject, OnInit, ViewChild } from '@angular/core'; import { Component, ElementRef, Inject, OnInit, ViewChild } from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog'; import { MAT_DIALOG_DATA, MatDialogRef, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose } from '@angular/material/dialog';
import { DashboardCreationData } from 'src/app/dashboard.service'; import { DashboardCreationData } from 'src/app/dashboard.service';
import { AbstractControl, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms'; import { AbstractControl, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CdkScrollable } from '@angular/cdk/scrolling';
import { MatFormField, MatLabel, MatError } from '@angular/material/form-field';
import { MatInput } from '@angular/material/input';
import { FocusDirective } from '../../focus.directive';
import { MatButton } from '@angular/material/button';
@Component({ @Component({
selector: 'app-new-dashboard', selector: 'app-new-dashboard',
templateUrl: './new-dashboard.component.html' templateUrl: './new-dashboard.component.html',
standalone: true,
imports: [FormsModule, ReactiveFormsModule, MatDialogTitle, CdkScrollable, MatDialogContent, MatFormField, MatLabel, MatInput, FocusDirective, MatError, MatDialogActions, MatButton, MatDialogClose]
}) })
export class NewDashboardComponent implements OnInit { export class NewDashboardComponent implements OnInit {

3
pdb-js/src/app/focus.directive.ts
View File

@@ -1,7 +1,8 @@
import { AfterViewInit, Directive, ElementRef } from '@angular/core'; import { AfterViewInit, Directive, ElementRef } from '@angular/core';
@Directive({ @Directive({
selector: '[focus]' selector: '[focus]',
standalone: true
}) })
export class FocusDirective implements AfterViewInit { export class FocusDirective implements AfterViewInit {

4
pdb-js/src/app/gallery-view/gallery-view.component.spec.ts
View File

@@ -8,8 +8,8 @@ describe('GalleryViewComponent', () => {
beforeEach(waitForAsync(() => { beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [ GalleryViewComponent ] imports: [GalleryViewComponent]
}) })
.compileComponents(); .compileComponents();
})); }));

26
pdb-js/src/app/gallery-view/gallery-view.component.ts
View File

@@ -1,7 +1,19 @@
import { Component, OnInit, Input, Output, ViewChild, EventEmitter } from '@angular/core'; import { Component, OnInit, Input, Output, ViewChild, EventEmitter, forwardRef } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar'; import { MatSnackBar } from '@angular/material/snack-bar';
import { PlotService, PlotRequest, PlotResponse, PlotResponseStats, DashTypeAndColor, RenderedImages } from '../plot.service'; import { PlotService, PlotRequest, PlotResponse, PlotResponseStats, DashTypeAndColor, RenderedImages } from '../plot.service';
import { UtilService } from '../utils.service'; import { UtilService } from '../utils.service';
import { NgIf, NgClass, NgFor } from '@angular/common';
import { MatFormField, MatLabel } from '@angular/material/form-field';
import { MatSelect } from '@angular/material/select';
import { MatOption } from '@angular/material/core';
import { ImageToggleComponent } from '../image-toggle/image-toggle.component';
import { MatCheckbox } from '@angular/material/checkbox';
import { FormsModule } from '@angular/forms';
import { MatProgressBar } from '@angular/material/progress-bar';
import { MatButton } from '@angular/material/button';
import { MatTooltip } from '@angular/material/tooltip';
import { PlotDetailsComponent } from '../plot-details/plot-details.component';
import { MatInput } from '@angular/material/input';
export class GalleryFilterData { export class GalleryFilterData {
filterBy :string; filterBy :string;
@@ -19,7 +31,9 @@ export class GalleryFilterData {
@Component({ @Component({
selector: 'pdb-gallery-filter-view', selector: 'pdb-gallery-filter-view',
templateUrl: './gallery-filter-view.component.html', templateUrl: './gallery-filter-view.component.html',
styleUrls: ['./gallery-filter-view.component.scss'] styleUrls: ['./gallery-filter-view.component.scss'],
standalone: true,
imports: [MatFormField, MatLabel, MatSelect, MatOption, NgIf, ImageToggleComponent, MatInput, FormsModule]
}) })
export class GalleryFilterView { export class GalleryFilterView {
compareImages = JSON.stringify([ compareImages = JSON.stringify([
@@ -91,7 +105,9 @@ export class GalleryFilterView {
@Component({ @Component({
selector: 'pdb-gallery-view', selector: 'pdb-gallery-view',
templateUrl: './gallery-view.component.html', templateUrl: './gallery-view.component.html',
styleUrls: ['./gallery-view.component.scss'] styleUrls: ['./gallery-view.component.scss'],
standalone: true,
imports: [NgIf, MatFormField, MatLabel, MatSelect, MatOption, ImageToggleComponent, GalleryFilterView, MatCheckbox, FormsModule, MatProgressBar, MatButton, MatTooltip, NgClass, NgFor, forwardRef(() => GalleryItemView)]
}) })
export class GalleryViewComponent implements OnInit { export class GalleryViewComponent implements OnInit {
@@ -315,7 +331,9 @@ export class GalleryViewComponent implements OnInit {
@Component({ @Component({
selector: 'pdb-gallery-item-view', selector: 'pdb-gallery-item-view',
templateUrl: './gallery-item-view.component.html', templateUrl: './gallery-item-view.component.html',
styleUrls: ['./gallery-item-view.component.scss'] styleUrls: ['./gallery-item-view.component.scss'],
standalone: true,
imports: [NgClass, NgIf, PlotDetailsComponent]
}) })
export class GalleryItemView { export class GalleryItemView {
@Input() @Input()

4
pdb-js/src/app/help-page/help-page.component.spec.ts
View File

@@ -8,8 +8,8 @@ describe('HelpPageComponent', () => {
beforeEach(waitForAsync(() => { beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [ HelpPageComponent ] imports: [HelpPageComponent]
}) })
.compileComponents(); .compileComponents();
})); }));

3
pdb-js/src/app/help-page/help-page.component.ts
View File

@@ -3,7 +3,8 @@ import { Component, OnInit } from '@angular/core';
@Component({ @Component({
selector: 'pdb-help-page', selector: 'pdb-help-page',
templateUrl: './help-page.component.html', templateUrl: './help-page.component.html',
styleUrls: ['./help-page.component.scss'] styleUrls: ['./help-page.component.scss'],
standalone: true
}) })
export class HelpPageComponent implements OnInit { export class HelpPageComponent implements OnInit {

4
pdb-js/src/app/image-toggle/image-toggle.component.spec.ts
View File

@@ -8,8 +8,8 @@ describe('ImageToggleComponent', () => {
beforeEach(waitForAsync(() => { beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [ ImageToggleComponent ] imports: [ImageToggleComponent]
}) })
.compileComponents(); .compileComponents();
})); }));

5
pdb-js/src/app/image-toggle/image-toggle.component.ts
View File

@@ -1,9 +1,12 @@
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { NgIf } from '@angular/common';
@Component({ @Component({
selector: 'pdb-image-toggle', selector: 'pdb-image-toggle',
templateUrl: './image-toggle.component.html', templateUrl: './image-toggle.component.html',
styleUrls: ['./image-toggle.component.scss'] styleUrls: ['./image-toggle.component.scss'],
standalone: true,
imports: [NgIf]
}) })
export class ImageToggleComponent implements OnInit { export class ImageToggleComponent implements OnInit {

4
pdb-js/src/app/limit-by/limit-by.component.spec.ts
View File

@@ -8,8 +8,8 @@ describe('LimitByComponent', () => {
beforeEach(waitForAsync(() => { beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [ LimitByComponent ] imports: [LimitByComponent]
}) })
.compileComponents(); .compileComponents();
})); }));

11
pdb-js/src/app/limit-by/limit-by.component.ts
View File

@@ -1,10 +1,17 @@
import { Component, Input} from '@angular/core'; import { Component, Input} from '@angular/core';
import {FormControl} from '@angular/forms'; import { FormControl, FormsModule } from '@angular/forms';
import { MatFormField, MatLabel } from '@angular/material/form-field';
import { MatSelect } from '@angular/material/select';
import { MatOption } from '@angular/material/core';
import { NgIf } from '@angular/common';
import { MatInput } from '@angular/material/input';
@Component({ @Component({
selector: 'pdb-limit-by', selector: 'pdb-limit-by',
templateUrl: './limit-by.component.html', templateUrl: './limit-by.component.html',
styleUrls: ['./limit-by.component.scss'] styleUrls: ['./limit-by.component.scss'],
standalone: true,
imports: [MatFormField, MatLabel, MatSelect, MatOption, NgIf, MatInput, FormsModule]
}) })
export class LimitByComponent { export class LimitByComponent {

4
pdb-js/src/app/main-page/main-page.component.spec.ts
View File

@@ -8,8 +8,8 @@ describe('MainPageComponent', () => {
beforeEach(waitForAsync(() => { beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [ MainPageComponent ] imports: [MainPageComponent]
}) })
.compileComponents(); .compileComponents();
})); }));

5
pdb-js/src/app/main-page/main-page.component.ts
View File

@@ -1,9 +1,12 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { RouterLink } from '@angular/router';
@Component({ @Component({
selector: 'pdb-main-page', selector: 'pdb-main-page',
templateUrl: './main-page.component.html', templateUrl: './main-page.component.html',
styleUrls: ['./main-page.component.scss'] styleUrls: ['./main-page.component.scss'],
standalone: true,
imports: [RouterLink]
}) })
export class MainPageComponent implements OnInit { export class MainPageComponent implements OnInit {

7
pdb-js/src/app/plot-details/plot-details.component.ts
View File

@@ -1,11 +1,16 @@
import { Component, Input } from '@angular/core'; import { Component, Input } from '@angular/core';
import { DashTypeAndColor, PlotResponseStats, DataSeriesStats } from '../plot.service'; import { DashTypeAndColor, PlotResponseStats, DataSeriesStats } from '../plot.service';
import { UtilService } from '../utils.service'; import { UtilService } from '../utils.service';
import { MatRadioGroup, MatRadioButton } from '@angular/material/radio';
import { FormsModule } from '@angular/forms';
import { NgFor, NgIf } from '@angular/common';
@Component({ @Component({
selector: 'pdb-plot-details', selector: 'pdb-plot-details',
templateUrl: './plot-details.component.html', templateUrl: './plot-details.component.html',
styleUrls: ['./plot-details.component.scss'] styleUrls: ['./plot-details.component.scss'],
standalone: true,
imports: [MatRadioGroup, FormsModule, MatRadioButton, NgFor, NgIf]
}) })
export class PlotDetailsComponent { export class PlotDetailsComponent {

4
pdb-js/src/app/plot-view/plot-view.component.spec.ts
View File

@@ -8,8 +8,8 @@ describe('PlotViewComponent', () => {
beforeEach(waitForAsync(() => { beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [ PlotViewComponent ] imports: [PlotViewComponent]
}) })
.compileComponents(); .compileComponents();
})); }));

7
pdb-js/src/app/plot-view/plot-view.component.ts
View File

@@ -8,11 +8,16 @@ import { Overlay } from "@angular/cdk/overlay";
import { DateTime, Duration } from "luxon"; import { DateTime, Duration } from "luxon";
import { DateValue } from '../components/datepicker/date-picker.component'; import { DateValue } from '../components/datepicker/date-picker.component';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
import { NgClass, NgFor, NgIf } from '@angular/common';
import { PlotDetailsComponent } from '../plot-details/plot-details.component';
@Component({ @Component({
selector: 'pdb-plot-view', selector: 'pdb-plot-view',
templateUrl: './plot-view.component.html', templateUrl: './plot-view.component.html',
styleUrls: ['./plot-view.component.scss'] styleUrls: ['./plot-view.component.scss'],
standalone: true,
imports: [CdkDrag, NgClass, CdkDragHandle, NgFor, NgIf, PlotDetailsComponent]
}) })
export class PlotViewComponent { export class PlotViewComponent {

4
pdb-js/src/app/query-autocomplete/query-autocomplete.component.spec.ts
View File

@@ -8,8 +8,8 @@ describe('QueryAutocompleteComponent', () => {
beforeEach(waitForAsync(() => { beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [ QueryAutocompleteComponent ] imports: [QueryAutocompleteComponent]
}) })
.compileComponents(); .compileComponents();
})); }));

11
pdb-js/src/app/query-autocomplete/query-autocomplete.component.ts
View File

@@ -1,14 +1,19 @@
import { Component, OnInit, Input, ViewChild, AfterViewInit } from '@angular/core'; import { Component, OnInit, Input, ViewChild, AfterViewInit } from '@angular/core';
import {FormControl, UntypedFormControl} from '@angular/forms'; import { FormControl, UntypedFormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import {Observable} from 'rxjs'; import {Observable} from 'rxjs';
import {startWith, map} from 'rxjs/operators'; import {startWith, map} from 'rxjs/operators';
import {MatAutocompleteTrigger } from '@angular/material/autocomplete'; import { MatAutocompleteTrigger, MatAutocomplete } from '@angular/material/autocomplete';
import { PlotService, PlotType, AutocompleteResult, Suggestion, ResultMode } from '../plot.service'; import { PlotService, PlotType, AutocompleteResult, Suggestion, ResultMode } from '../plot.service';
import { MatInput } from '@angular/material/input';
import { NgFor, AsyncPipe } from '@angular/common';
import { MatOption } from '@angular/material/core';
@Component({ @Component({
selector: 'pdb-query-autocomplete', selector: 'pdb-query-autocomplete',
templateUrl: './query-autocomplete.component.html', templateUrl: './query-autocomplete.component.html',
styleUrls: ['./query-autocomplete.component.scss'] styleUrls: ['./query-autocomplete.component.scss'],
standalone: true,
imports: [MatInput, FormsModule, MatAutocompleteTrigger, ReactiveFormsModule, MatAutocomplete, NgFor, MatOption, AsyncPipe]
}) })
export class QueryAutocompleteComponent implements OnInit { export class QueryAutocompleteComponent implements OnInit {

4
pdb-js/src/app/upload-page/upload-page.component.spec.ts
View File

@@ -8,8 +8,8 @@ describe('UploadPageComponent', () => {
beforeEach(waitForAsync(() => { beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [ UploadPageComponent ] imports: [UploadPageComponent]
}) })
.compileComponents(); .compileComponents();
})); }));

3
pdb-js/src/app/upload-page/upload-page.component.ts
View File

@@ -3,7 +3,8 @@ import { Component, OnInit } from '@angular/core';
@Component({ @Component({
selector: 'pdb-upload-page', selector: 'pdb-upload-page',
templateUrl: './upload-page.component.html', templateUrl: './upload-page.component.html',
styleUrls: ['./upload-page.component.scss'] styleUrls: ['./upload-page.component.scss'],
standalone: true
}) })
export class UploadPageComponent implements OnInit { export class UploadPageComponent implements OnInit {

4
pdb-js/src/app/visualization-page/visualization-page.component.spec.ts
View File

@@ -8,8 +8,8 @@ describe('VisualizationPageComponent', () => {
beforeEach(waitForAsync(() => { beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [ VisualizationPageComponent ] imports: [VisualizationPageComponent]
}) })
.compileComponents(); .compileComponents();
})); }));

34
pdb-js/src/app/visualization-page/visualization-page.component.ts
View File

@@ -18,7 +18,7 @@ import {
Suggestion, Suggestion,
TagField, TagField,
} from "../plot.service"; } from "../plot.service";
import { UntypedFormControl } from "@angular/forms"; import { UntypedFormControl, FormsModule } from "@angular/forms";
import { MatSnackBar } from "@angular/material/snack-bar"; import { MatSnackBar } from "@angular/material/snack-bar";
import { LimitByComponent } from "../limit-by/limit-by.component"; import { LimitByComponent } from "../limit-by/limit-by.component";
import { YAxisDefinitionComponent } from "../y-axis-definition/y-axis-definition.component"; import { YAxisDefinitionComponent } from "../y-axis-definition/y-axis-definition.component";
@@ -34,11 +34,41 @@ import {
DatePickerComponent, DatePickerComponent,
DateValue, DateValue,
} from "../components/datepicker/date-picker.component"; } from "../components/datepicker/date-picker.component";
import { MatFormField, MatLabel, MatError } from "@angular/material/form-field";
import { MatSelect } from "@angular/material/select";
import { NgFor, NgIf } from "@angular/common";
import { MatOption } from "@angular/material/core";
import { MatCheckbox } from "@angular/material/checkbox";
import { MatIconAnchor, MatButton } from "@angular/material/button";
import { RouterLink } from "@angular/router";
import { MatTooltip } from "@angular/material/tooltip";
@Component({ @Component({
selector: "pdb-visualization-page", selector: "pdb-visualization-page",
templateUrl: "./visualization-page.component.html", templateUrl: "./visualization-page.component.html",
styleUrls: ["./visualization-page.component.scss"], styleUrls: ["./visualization-page.component.scss"],
standalone: true,
imports: [
QueryAutocompleteComponent,
DatePickerComponent,
MatFormField,
MatLabel,
MatSelect,
FormsModule,
NgFor,
MatOption,
LimitByComponent,
MatCheckbox,
YAxisDefinitionComponent,
NgIf,
MatError,
MatIconAnchor,
RouterLink,
MatButton,
MatTooltip,
PlotViewComponent,
GalleryViewComponent,
],
}) })
export class VisualizationPageComponent implements OnInit, AfterViewInit { export class VisualizationPageComponent implements OnInit, AfterViewInit {
readonly DATE_PATTERN = "YYYY-MM-DD HH:mm:ss"; // for moment-JS readonly DATE_PATTERN = "YYYY-MM-DD HH:mm:ss"; // for moment-JS
@@ -107,8 +137,6 @@ export class VisualizationPageComponent implements OnInit, AfterViewInit {
} }
ngOnInit() { ngOnInit() {
(<any> window).initDatePicker();
this.plotTypes = this.plotService.getPlotTypes(); this.plotTypes = this.plotService.getPlotTypes();
this.selectedPlotType.push(this.plotTypes[0]); this.selectedPlotType.push(this.plotTypes[0]);

4
pdb-js/src/app/y-axis-definition/y-axis-definition.component.spec.ts
View File

@@ -8,8 +8,8 @@ describe('YAxisDefinitionComponent', () => {
beforeEach(waitForAsync(() => { beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
declarations: [ YAxisDefinitionComponent ] imports: [YAxisDefinitionComponent]
}) })
.compileComponents(); .compileComponents();
})); }));

10
pdb-js/src/app/y-axis-definition/y-axis-definition.component.ts
View File

@@ -1,10 +1,18 @@
import { Component, Input } from '@angular/core'; import { Component, Input } from '@angular/core';
import { YAxisDefinition } from '../plot.service'; import { YAxisDefinition } from '../plot.service';
import { MatFormField, MatLabel } from '@angular/material/form-field';
import { MatSelect } from '@angular/material/select';
import { MatOption, MatOptgroup } from '@angular/material/core';
import { NgIf } from '@angular/common';
import { MatInput } from '@angular/material/input';
import { FormsModule } from '@angular/forms';
@Component({ @Component({
selector: 'pdb-y-axis-definition', selector: 'pdb-y-axis-definition',
templateUrl: './y-axis-definition.component.html', templateUrl: './y-axis-definition.component.html',
styleUrls: ['./y-axis-definition.component.scss'] styleUrls: ['./y-axis-definition.component.scss'],
standalone: true,
imports: [MatFormField, MatLabel, MatSelect, MatOption, MatOptgroup, NgIf, MatInput, FormsModule]
}) })
export class YAxisDefinitionComponent { export class YAxisDefinitionComponent {

410
pdb-js/src/assets/css/daterangepicker-3.1.css
View File

@@ -1,410 +0,0 @@
.daterangepicker {
position: absolute;
color: inherit;
background-color: #fff;
border-radius: 4px;
border: 1px solid #ddd;
width: 278px;
max-width: none;
padding: 0;
margin-top: 7px;
top: 100px;
left: 20px;
z-index: 3001;
display: none;
font-family: arial;
font-size: 15px;
line-height: 1em;
}
.daterangepicker:before, .daterangepicker:after {
position: absolute;
display: inline-block;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.daterangepicker:before {
top: -7px;
border-right: 7px solid transparent;
border-left: 7px solid transparent;
border-bottom: 7px solid #ccc;
}
.daterangepicker:after {
top: -6px;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
border-left: 6px solid transparent;
}
.daterangepicker.opensleft:before {
right: 9px;
}
.daterangepicker.opensleft:after {
right: 10px;
}
.daterangepicker.openscenter:before {
left: 0;
right: 0;
width: 0;
margin-left: auto;
margin-right: auto;
}
.daterangepicker.openscenter:after {
left: 0;
right: 0;
width: 0;
margin-left: auto;
margin-right: auto;
}
.daterangepicker.opensright:before {
left: 9px;
}
.daterangepicker.opensright:after {
left: 10px;
}
.daterangepicker.drop-up {
margin-top: -7px;
}
.daterangepicker.drop-up:before {
top: initial;
bottom: -7px;
border-bottom: initial;
border-top: 7px solid #ccc;
}
.daterangepicker.drop-up:after {
top: initial;
bottom: -6px;
border-bottom: initial;
border-top: 6px solid #fff;
}
.daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .drp-calendar {
float: none;
}
.daterangepicker.single .drp-selected {
display: none;
}
.daterangepicker.show-calendar .drp-calendar {
display: block;
}
.daterangepicker.show-calendar .drp-buttons {
display: block;
}
.daterangepicker.auto-apply .drp-buttons {
display: none;
}
.daterangepicker .drp-calendar {
display: none;
max-width: 270px;
}
.daterangepicker .drp-calendar.left {
padding: 8px 0 8px 8px;
}
.daterangepicker .drp-calendar.right {
padding: 8px;
}
.daterangepicker .drp-calendar.single .calendar-table {
border: none;
}
.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
color: #fff;
border: solid black;
border-width: 0 2px 2px 0;
border-radius: 0;
display: inline-block;
padding: 3px;
}
.daterangepicker .calendar-table .next span {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.daterangepicker .calendar-table .prev span {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
white-space: nowrap;
text-align: center;
vertical-align: middle;
min-width: 32px;
width: 32px;
height: 24px;
line-height: 24px;
font-size: 12px;
border-radius: 4px;
border: 1px solid transparent;
white-space: nowrap;
cursor: pointer;
}
.daterangepicker .calendar-table {
border: 1px solid #fff;
border-radius: 4px;
background-color: #fff;
}
.daterangepicker .calendar-table table {
width: 100%;
margin: 0;
border-spacing: 0;
border-collapse: collapse;
}
.daterangepicker td.available:hover, .daterangepicker th.available:hover {
background-color: #eee;
border-color: transparent;
color: inherit;
}
.daterangepicker td.week, .daterangepicker th.week {
font-size: 80%;
color: #ccc;
}
.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
background-color: #fff;
border-color: transparent;
color: #999;
}
.daterangepicker td.in-range {
background-color: #ebf4f8;
border-color: transparent;
color: #000;
border-radius: 0;
}
.daterangepicker td.start-date {
border-radius: 4px 0 0 4px;
}
.daterangepicker td.end-date {
border-radius: 0 4px 4px 0;
}
.daterangepicker td.start-date.end-date {
border-radius: 4px;
}
.daterangepicker td.active, .daterangepicker td.active:hover {
background-color: #357ebd;
border-color: transparent;
color: #fff;
}
.daterangepicker th.month {
width: auto;
}
.daterangepicker td.disabled, .daterangepicker option.disabled {
color: #999;
cursor: not-allowed;
text-decoration: line-through;
}
.daterangepicker select.monthselect, .daterangepicker select.yearselect {
font-size: 12px;
padding: 1px;
height: auto;
margin: 0;
cursor: default;
}
.daterangepicker select.monthselect {
margin-right: 2%;
width: 56%;
}
.daterangepicker select.yearselect {
width: 40%;
}
.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
width: 50px;
margin: 0 auto;
background: #eee;
border: 1px solid #eee;
padding: 2px;
outline: 0;
font-size: 12px;
}
.daterangepicker .calendar-time {
text-align: center;
margin: 4px auto 0 auto;
line-height: 30px;
position: relative;
}
.daterangepicker .calendar-time select.disabled {
color: #ccc;
cursor: not-allowed;
}
.daterangepicker .drp-buttons {
clear: both;
text-align: right;
padding: 8px;
border-top: 1px solid #ddd;
display: none;
line-height: 12px;
vertical-align: middle;
}
.daterangepicker .drp-selected {
display: inline-block;
font-size: 12px;
padding-right: 8px;
}
.daterangepicker .drp-buttons .btn {
margin-left: 8px;
font-size: 12px;
font-weight: bold;
padding: 4px 8px;
}
.daterangepicker.show-ranges.single.rtl .drp-calendar.left {
border-right: 1px solid #ddd;
}
.daterangepicker.show-ranges.single.ltr .drp-calendar.left {
border-left: 1px solid #ddd;
}
.daterangepicker.show-ranges.rtl .drp-calendar.right {
border-right: 1px solid #ddd;
}
.daterangepicker.show-ranges.ltr .drp-calendar.left {
border-left: 1px solid #ddd;
}
.daterangepicker .ranges {
float: none;
text-align: left;
margin: 0;
}
.daterangepicker.show-calendar .ranges {
margin-top: 8px;
}
.daterangepicker .ranges ul {
list-style: none;
margin: 0 auto;
padding: 0;
width: 100%;
}
.daterangepicker .ranges li {
font-size: 12px;
padding: 8px 12px;
cursor: pointer;
}
.daterangepicker .ranges li:hover {
background-color: #eee;
}
.daterangepicker .ranges li.active {
background-color: #08c;
color: #fff;
}
/* Larger Screen Styling */
@media (min-width: 564px) {
.daterangepicker {
width: auto;
}
.daterangepicker .ranges ul {
width: 140px;
}
.daterangepicker.single .ranges ul {
width: 100%;
}
.daterangepicker.single .drp-calendar.left {
clear: none;
}
.daterangepicker.single .ranges, .daterangepicker.single .drp-calendar {
float: left;
}
.daterangepicker {
direction: ltr;
text-align: left;
}
.daterangepicker .drp-calendar.left {
clear: left;
margin-right: 0;
}
.daterangepicker .drp-calendar.left .calendar-table {
border-right: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.daterangepicker .drp-calendar.right {
margin-left: 0;
}
.daterangepicker .drp-calendar.right .calendar-table {
border-left: none;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.daterangepicker .drp-calendar.left .calendar-table {
padding-right: 8px;
}
.daterangepicker .ranges, .daterangepicker .drp-calendar {
float: left;
}
}
@media (min-width: 730px) {
.daterangepicker .ranges {
width: auto;
}
.daterangepicker .ranges {
float: left;
}
.daterangepicker.rtl .ranges {
float: right;
}
.daterangepicker .drp-calendar.left {
clear: none !important;
}
}

1578
pdb-js/src/assets/js/daterangepicker-3.1.js
View File

File diff suppressed because it is too large Load Diff

2
pdb-js/src/assets/js/moment-2.29.1.min.js vendored
View File

File diff suppressed because one or more lines are too long

48
pdb-js/src/index.html
View File

@@ -8,61 +8,13 @@
<link rel="icon" type="image/x-icon" href="/assets/img/favicon.png"> <link rel="icon" type="image/x-icon" href="/assets/img/favicon.png">
<script type="text/javascript" src="/assets/js/jquery-3.6.0.min.js"></script> <script type="text/javascript" src="/assets/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="/assets/js/moment-2.29.1.min.js"></script>
<script type="text/javascript" src="/assets/js/daterangepicker-3.1.js"></script>
<script type="text/javascript" src="/assets/js/invaders.js"></script> <script type="text/javascript" src="/assets/js/invaders.js"></script>
<link rel="stylesheet" type="text/css" href="/assets/css/daterangepicker-3.1.css" />
<link rel="stylesheet" type="text/css" href="/assets/css/invaders.css" /> <link rel="stylesheet" type="text/css" href="/assets/css/invaders.css" />
</head> </head>
<body> <body>
<app-root></app-root> <app-root></app-root>
<script> <script>
function initDatePicker() {
$('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
},
ranges: {
'Today': [moment().startOf('day'), moment().endOf('day')],
'Yesterday': [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
'Last 7 Days': [moment().subtract(6, 'days').startOf('day'), moment().endOf('day')],
'This Week': [moment().startOf('week'), moment().endOf('day')],
'Last Week': [moment().subtract(7, 'days').startOf('week'), moment().subtract(7, 'days').endOf('week')],
'Last 30 Days': [moment().subtract(29, 'days').startOf('day'), moment().endOf('day')],
'This Month': [moment().startOf('month'), moment().endOf('month').endOf('day')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
'Last 3 Months': [moment().subtract(3, 'month').startOf('month'),moment().subtract(1, 'month').endOf('month').endOf('day')],
'This Year': [moment().startOf('year'),moment().endOf('month').endOf('day')],
'Last Year': [moment().subtract(1, 'year').startOf('year'),moment().subtract(1, 'year').endOf('year')],
},
});
}
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() { $( document ).ready(function() {
initInvaders('results'); initInvaders('results');
document.addEventListener("invadersPause", function(event) { document.addEventListener("invadersPause", function(event) {

38
pdb-js/src/main.ts
View File

@@ -1,8 +1,14 @@
import { enableProdMode } from '@angular/core'; import { enableProdMode, importProvidersFrom } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment'; import { environment } from './environments/environment';
import { MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { MarkdownModule } from 'ngx-markdown';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideAnimations } from '@angular/platform-browser/animations';
import { AppComponent } from './app/app.component';
import { provideRouter, Routes, withDebugTracing } from '@angular/router';
if (environment.production) { if (environment.production) {
enableProdMode(); enableProdMode();
@@ -14,5 +20,29 @@ if (environment.production) {
(<any>window).submitterId = (<any>window).randomId(); (<any>window).submitterId = (<any>window).randomId();
platformBrowserDynamic().bootstrapModule(AppModule)
const routes: Routes = [
{ path: "", loadComponent: () => import("./app/main-page/main-page.component").then( m => m.MainPageComponent) },
{ path: "vis", loadComponent: () => import("./app/visualization-page/visualization-page.component").then(m => m.VisualizationPageComponent) },
{ path: "dashboard", loadComponent: () => import("./app/dashboard-page/dashboard-page.component").then(m => m.DashboardPageComponent) },
{ path: "dashboard/:id", loadComponent: () => import("./app/dashboard-page/dashboard/dashboard.component").then(m => m.DashboardComponent) },
{ path: "upload", loadComponent: () => import("./app/upload-page/upload-page.component").then(m => m.UploadPageComponent) },
{ path: "grid", loadComponent: () => import("./app/customizable-grid/customizable-grid.component").then(m => m.CustomizableGridComponent) },
{ path: "help", loadComponent: () => import("./app/help-page/help-page.component").then(m => m.HelpPageComponent) },
];
bootstrapApplication(AppComponent, {
providers: [
provideRouter(routes, withDebugTracing()),
importProvidersFrom(
MarkdownModule.forRoot(),
),
{
provide: MAT_DIALOG_DEFAULT_OPTIONS,
useValue: { hasBackdrop: true },
},
provideHttpClient(withInterceptorsFromDi()),
provideAnimations()
]
})
.catch(err => console.error(err)); .catch(err => console.error(err));

15
pdb-js/src/styles.scss
View File

@@ -65,6 +65,8 @@ grey
*/ */
$background-color: #CBD7F4; $background-color: #CBD7F4;
.mat-mdc-option span.mdc-list-item__primary-text, .mat-mdc-option span.mdc-list-item__primary-text,
.mdc-list-item__primary-text { .mdc-list-item__primary-text {
font-size: 1rem; font-size: 1rem;
@@ -78,6 +80,12 @@ mat-form-field .mat-mdc-option span.mdc-list-item__primary-text{
font-size: 14px; font-size: 14px;
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
// set colors for flat buttons (directive mat-flat-button)
// make them blue with white text when active and transparent with the default text color of light grey when disabled
--mdc-filled-button-label-text-color: white;
--mdc-filled-button-container-color: #005cbb;
--mdc-filled-button-disabled-container-color: none;
} }
h1 { h1 {
@@ -105,13 +113,6 @@ button[disabled] .icon-inline {
opacity: 0.5; opacity: 0.5;
} }
button.save-button {
background-color: #ff9900;
}
button.save-button:disabled {
background-color: inherit;
}
.icon-tiny { .icon-tiny {
width: 1em; width: 1em;
height: 1em; height: 1em;