Added circle dimensions dialog

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 {

src/app/components/dimensionsDialog/dimensionsDialog.component.html

@@ -0,0 +1,17 @@
+<div>
+    <form id="dimensionsForm" class="d-flex align-items-center" (ngSubmit)="close()">
+        <ng-container *ngFor="let d of dimensions; let i = index">
+            <div class="flex-shrink-0 mx-2" *ngIf="i != 0">X</div>
+            <div class="flex-shrink-1">
+                <mat-form-field class='w-100' appearance="fill">
+                    <mat-label>{{d}}</mat-label>
+                    <input matInput type="number" [(ngModel)]="dimensionsOut[i]" name="dim-{{i}}">
+                </mat-form-field>
+            </div>
+        </ng-container>
+    </form>
+    <mat-divider></mat-divider>
+    <div class="text-right py-2">
+        <button mat-button type="submit" form="dimensionsForm" (click)="close()">Ok</button>
+    </div>
+</div>

src/app/components/dimensionsDialog/dimensionsDialog.component.scss

@@ -0,0 +1,3 @@
+::ng-deep .mat-form-field-infix {
+  width: auto !important;
+}

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<DimensionsDialogComponent>, @Inject(MAT_DIALOG_DATA) public dimensions: string[]) {
+        this.dimensionsOut = Array(dimensions.length).fill(0);
+    }
+
+    close() {
+        this.ref.close(this.dimensionsOut);
+    }
+}

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;

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]});
         });
     }
 

src/styles.scss

@@ -28,3 +28,10 @@ body {
     overflow: hidden;
   }
 }
+
+.cdk-overlay-pane.pb-0 {
+  .mat-dialog-container {
+    padding-bottom: 0;
+    overflow: hidden;
+  }
+}