Reorganized

src/app/app.module.ts

@@ -6,16 +6,17 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {ServiceWorkerModule} from '@angular/service-worker';
 import {environment} from '../environments/environment';
 import {FormsModule} from "@angular/forms";
-import {MapComponent} from "./map/map.component";
-import {HomeComponent} from "./home/home.component";
+import {MapComponent} from "./views/map/map.component";
+import {HomeComponent} from "./views/home/home.component";
 import {AgmCoreModule} from "@agm/core";
 import {MaterialModule} from "./material.module";
-import {CalibrateComponent} from "./map/calibrate/calibrate.component";
+import {CalibrateComponent} from "./components/calibrate/calibrate.component";
 import {MatInputModule} from "@angular/material";
-import {PermissionsComponent} from "./permissions/permissions.component";
+import {PermissionsComponent} from "./components/permissions/permissions.component";
 import {AngularFireModule} from "@angular/fire";
 import {AngularFirestoreModule} from "@angular/fire/firestore";
-import {ToolbarComponent} from "./map/toolbar/toolbar.component";
+import {ToolbarComponent} from "./components/toolbar/toolbar.component";
+import {PaletteComponent} from "./components/palette/palette.component";
 
 @NgModule({
     declarations: [
@@ -23,6 +24,7 @@ import {ToolbarComponent} from "./map/toolbar/toolbar.component";
         CalibrateComponent,
         HomeComponent,
         MapComponent,
+        PaletteComponent,
         PermissionsComponent,
         ToolbarComponent
     ],

src/app/app.routing.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-import {MapComponent} from "./map/map.component";
-import {HomeComponent} from "./home/home.component";
+import {MapComponent} from "./views/map/map.component";
+import {HomeComponent} from "./views/home/home.component";
 
 const routes: Routes = [
     {path: '', pathMatch: 'full', component: HomeComponent},

src/app/components/calibrate/calibrate.component.ts

@@ -1,6 +1,6 @@
 import {Component} from "@angular/core";
 import {MatBottomSheetRef} from "@angular/material";
-import {PhysicsService} from "../../physics/physics.service";
+import {PhysicsService} from "../../services/physics/physics.service";
 
 @Component({
     selector: 'calibrate',

src/app/components/palette/palette.component.html

@@ -0,0 +1,3 @@
+<div class="bg-white p-3">
+    <div *ngFor="let c of colors" class="rounded-circle" [style.backgroundColor]="c" style="height: 30px; width: 30px"></div>
+</div>

src/app/components/palette/palette.component.ts

@@ -0,0 +1,9 @@
+import {Component} from "@angular/core";
+
+@Component({
+    selector: 'palette',
+    templateUrl: 'palette.component.html'
+})
+export class PaletteComponent {
+    colors = ['#393936', '#ffffff', '#008dd5', '#1a891d', '#d82b00']
+}

src/app/services/physics/physics.service.ts

@@ -1,7 +1,6 @@
 import {EventEmitter, Injectable} from '@angular/core';
 import {BehaviorSubject, combineLatest} from "rxjs";
-import {debounceTime} from "rxjs/operators";
-import {PermissionsService} from "../permissions/permissions.service";
+import {PermissionsService} from "../../components/permissions/permissions.service";
 
 @Injectable({
     providedIn: 'root'

src/app/views/map/map.component.html

@@ -6,6 +6,9 @@
         <agm-circle [latitude]="position.latitude" [longitude]="position.longitude" [radius]="position.accuracy" fillColor="#5C95F2" [clickable]="false"></agm-circle>
     </ng-container>
 </agm-map>
+<div class="palette">
+    <palette></palette>
+</div>
 <div class="info p-2">
     <span *ngIf="!position" class="text-danger">No GPS</span>
     <div *ngIf="position" class="text-white">

src/app/views/map/map.component.ts

@@ -1,9 +1,9 @@
 import {Component} from "@angular/core";
-import {PhysicsService} from "../physics/physics.service";
+import {PhysicsService} from "../../services/physics/physics.service";
 import {filter, skip, take} from "rxjs/operators";
 import {MatBottomSheet, MatSnackBar} from "@angular/material";
-import {CalibrateComponent} from "./calibrate/calibrate.component";
-import {ToolbarItem} from "./toolbar/toolbarItem";
+import {CalibrateComponent} from "../../components/calibrate/calibrate.component";
+import {ToolbarItem} from "../../components/toolbar/toolbarItem";
 import {BehaviorSubject} from "rxjs";
 import {LatLngLiteral} from "@agm/core";