From fc2b3244696b7ec1e76dd271e8a5bb9aa2ea297f Mon Sep 17 00:00:00 2001 From: ztimson Date: Thu, 29 Aug 2019 18:55:43 -0400 Subject: [PATCH] Added circle dimensions dialog --- src/app/app.module.ts | 4 +++- .../dimensionsDialog.component.html | 17 +++++++++++++++++ .../dimensionsDialog.component.scss | 3 +++ .../dimensionsDialog.component.ts | 19 +++++++++++++++++++ src/app/services/map.service.ts | 2 +- src/app/views/map/map.component.ts | 9 ++++++--- src/styles.scss | 7 +++++++ 7 files changed, 56 insertions(+), 5 deletions(-) create mode 100644 src/app/components/dimensionsDialog/dimensionsDialog.component.html create mode 100644 src/app/components/dimensionsDialog/dimensionsDialog.component.scss create mode 100644 src/app/components/dimensionsDialog/dimensionsDialog.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index d01bde6..27d58c4 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -22,6 +22,7 @@ import {ClickOutsideModule} from "ng-click-outside"; import {CircleComponent} from "./components/circle/circle.component"; import {ColorPickerModule} from "ngx-color-picker"; import {ColorPickerDialogComponent} from "./components/colorPickerDialog/colorPickerDialog.component"; +import {DimensionsDialogComponent} from "./components/dimensionsDialog/dimensionsDialog.component"; @NgModule({ declarations: [ @@ -30,6 +31,7 @@ import {ColorPickerDialogComponent} from "./components/colorPickerDialog/colorPi CalibrateComponent, CircleComponent, ColorPickerDialogComponent, + DimensionsDialogComponent, HomeComponent, MapComponent, MarkerComponent, @@ -51,7 +53,7 @@ import {ColorPickerDialogComponent} from "./components/colorPickerDialog/colorPi MatInputModule, ], providers: [], - entryComponents: [CalibrateComponent, CircleComponent, ColorPickerDialogComponent, MarkerComponent, PermissionsComponent], + entryComponents: [CalibrateComponent, CircleComponent, ColorPickerDialogComponent, DimensionsDialogComponent, MarkerComponent, PermissionsComponent], bootstrap: [AppComponent] }) export class AppModule { diff --git a/src/app/components/dimensionsDialog/dimensionsDialog.component.html b/src/app/components/dimensionsDialog/dimensionsDialog.component.html new file mode 100644 index 0000000..c7e1cd2 --- /dev/null +++ b/src/app/components/dimensionsDialog/dimensionsDialog.component.html @@ -0,0 +1,17 @@ +
+
+ +
X
+
+ + {{d}} + + +
+ +
+ +
+ +
+
diff --git a/src/app/components/dimensionsDialog/dimensionsDialog.component.scss b/src/app/components/dimensionsDialog/dimensionsDialog.component.scss new file mode 100644 index 0000000..3b1a113 --- /dev/null +++ b/src/app/components/dimensionsDialog/dimensionsDialog.component.scss @@ -0,0 +1,3 @@ +::ng-deep .mat-form-field-infix { + width: auto !important; +} diff --git a/src/app/components/dimensionsDialog/dimensionsDialog.component.ts b/src/app/components/dimensionsDialog/dimensionsDialog.component.ts new file mode 100644 index 0000000..3c7771f --- /dev/null +++ b/src/app/components/dimensionsDialog/dimensionsDialog.component.ts @@ -0,0 +1,19 @@ +import {Component, Inject} from "@angular/core"; +import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog"; + +@Component({ + selector: 'dimensions-dialog', + templateUrl: './dimensionsDialog.component.html', + styleUrls: ['./dimensionsDialog.component.scss'] +}) +export class DimensionsDialogComponent { + dimensionsOut: number[]; + + constructor(private ref: MatDialogRef, @Inject(MAT_DIALOG_DATA) public dimensions: string[]) { + this.dimensionsOut = Array(dimensions.length).fill(0); + } + + close() { + this.ref.close(this.dimensionsOut); + } +} diff --git a/src/app/services/map.service.ts b/src/app/services/map.service.ts index 7b7e880..dad7ce3 100644 --- a/src/app/services/map.service.ts +++ b/src/app/services/map.service.ts @@ -118,7 +118,7 @@ export class MapService { } newCircle(c: Circle) { - if(!c.radius) c.radius = 10000; + if(!c.radius) c.radius = 500; if(!c.color) c.color = '#ff4141'; let circle = L.circle(c.latlng, c).addTo(this.map); circle.symbol = c; diff --git a/src/app/views/map/map.component.ts b/src/app/views/map/map.component.ts index d9cd863..66099df 100644 --- a/src/app/views/map/map.component.ts +++ b/src/app/views/map/map.component.ts @@ -10,6 +10,8 @@ import {Subscription} from "rxjs"; import {MatBottomSheetRef} from "@angular/material/bottom-sheet"; import {copyToClipboard} from "../../utils"; import {ActivatedRoute} from "@angular/router"; +import {DimensionsDialogComponent} from "../../components/dimensionsDialog/dimensionsDialog.component"; +import {MatDialog} from "@angular/material/dialog"; declare const L; @@ -59,7 +61,7 @@ export class MapComponent implements OnInit { {name: 'Settings', icon: 'settings', hidden: true} ]; - constructor(public physicsService: PhysicsService, private snackBar: MatSnackBar, private bottomSheet: MatBottomSheet, private route: ActivatedRoute) { + constructor(public physicsService: PhysicsService, private snackBar: MatSnackBar, private bottomSheet: MatBottomSheet, private dialog: MatDialog, private route: ActivatedRoute) { this.route.params.subscribe(params => { this.code = params['code']; }) @@ -105,9 +107,10 @@ export class MapComponent implements OnInit { } addCircle() { - this.map.click.pipe(skip(1), take(1), filter(() => this.menu[2].enabled)).subscribe(e => { + this.map.click.pipe(skip(1), take(1), filter(() => this.menu[2].enabled)).subscribe(async e => { + let dimensions = await this.dialog.open(DimensionsDialogComponent, {data: ['Radius (m)'], disableClose: true, panelClass: 'pb-0'}).afterClosed().toPromise(); this.menu[2].enabled = false; - this.map.newCircle({latlng: e.event.latlng}); + this.map.newCircle({latlng: e.event.latlng, radius: dimensions[0]}); }); } diff --git a/src/styles.scss b/src/styles.scss index 0b0240e..d688857 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -28,3 +28,10 @@ body { overflow: hidden; } } + +.cdk-overlay-pane.pb-0 { + .mat-dialog-container { + padding-bottom: 0; + overflow: hidden; + } +}