add prevColorCache for color picker component

package-lock.json

@@ -3534,6 +3534,11 @@
         "schema-utils": "^1.0.0"
       }
     },
+    "file-saver": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.2.tgz",
+      "integrity": "sha512-Wz3c3XQ5xroCxd1G8b7yL0Ehkf0TC9oYC6buPFkNnU9EnaPlifeAFCyCh+iewXTyFRcg0a6j3J7FmJsIhlhBdw=="
+    },
     "fileset": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/fileset/-/fileset-2.0.3.tgz",

package.json

@@ -23,6 +23,7 @@
     "@angular/router": "^7.2.15",
     "@types/openlayers": "^4.6.17",
     "core-js": "^2.5.4",
+    "file-saver": "^2.0.2",
     "ngx-color-picker": "^7.5.0",
     "ol": "^5.3.2",
     "rxjs": "~6.3.3",

src/app/app.module.ts

@@ -1,23 +1,23 @@
-import { BrowserModule } from '@angular/platform-browser';
+import {BrowserModule} from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import {NgModule} from '@angular/core';
-import { AppRoutingModule } from './app-routing.module';
+import {AppRoutingModule} from './app-routing.module';
-import { AppComponent } from './app.component';
+import {AppComponent} from './app.component';
-import { MapComponent } from './map/map.component';
+import {MapComponent} from './map/map.component';
-import {FormsModule} from "@angular/forms";
+import {FormsModule} from '@angular/forms';
-import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {
   MatCardModule,
   MatDialogModule,
   MatGridListModule,
   MatInputModule,
   MatTableModule,
-  MatToolbarModule
+  MatToolbarModule,
-} from "@angular/material";
+} from '@angular/material';
-import {DragDropModule} from "@angular/cdk/drag-drop";
+import {DragDropModule} from '@angular/cdk/drag-drop';
-import { AddLayerComponent } from './add-layer-component/add-layer.component';
+import {AddLayerComponent} from './add-layer-component/add-layer.component';
-import {FeatureManagerComponent} from "./feature-management/feature-manager/feature-manager.component";
+import {FeatureManagerComponent} from './feature-management/feature-manager/feature-manager.component';
-import {CustomColorEntryComponent} from "./feature-management/custom-color-entry/custom-color-entry.component";
+import {CustomColorEntryComponent} from './feature-management/custom-color-entry/custom-color-entry.component';
-import {ColorPickerModule} from "ngx-color-picker";
+import {ColorPickerModule} from 'ngx-color-picker';
 
 @NgModule({
   declarations: [
@@ -46,4 +46,5 @@ import {ColorPickerModule} from "ngx-color-picker";
   ],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+}

src/app/feature-management/custom-color-entry/custom-color-entry.component.html

@@ -4,7 +4,7 @@
   <span *ngIf="isDefaultColor">(default color)</span>
   <div class="controls">
     <i class="material-icons"
-       colorPicker
+       [(colorPicker)]="prevColorCache"
        cpAlphaChannel="disabled"
        cpOutputFormat="hex"
        [cpOKButton]="true"

src/app/feature-management/custom-color-entry/custom-color-entry.component.ts

@@ -14,6 +14,16 @@ import {Config} from '../../misc/Config';
 })
 export class CustomColorEntryComponent implements OnInit {
 
+  private prevColorStorageKey: string = Config.GEO_JSON_PREFIX + 'prev_selected_color';
+
+  /**
+   * Color cache to make the previous selected color available
+   */
+  private _prevColorCache: string;
+  get prevColorCache(): string {
+    return localStorage.getItem(this.prevColorStorageKey);
+  }
+
   private _colors: any;
   @Input() set colors(value: any) {
     this._colors = value;
@@ -27,7 +37,6 @@ export class CustomColorEntryComponent implements OnInit {
     return this._colors;
   }
 
-
   private _selectedColor: string;
   set selectedColor(value: string) {
     this._selectedColor = value;
@@ -123,6 +132,7 @@ export class CustomColorEntryComponent implements OnInit {
    * @param event
    */
   onColorPicked(color: string) {
+    localStorage.setItem(this.prevColorStorageKey, color);
     this.selectedColor = color;
     this.isDefaultColor = false;
   }

src/app/feature-management/feature-manager/feature-manager.component.html

@@ -1,15 +1,13 @@
 <div *ngIf="curFeature">
-  <div class="header">
-    <h4>Properties</h4>
-  </div>
-  <div *ngFor="let item of curProperties | keyvalue" class="entry">
-    {{item.key}}
-    <br>
-    {{item.value}}
-  </div>
   <div class="header">
     <h4>Custom Properties</h4>
   </div>
   <lm-custom-color-entry [colors]="curFeatureColors"
                          (colorChanged)="onFeatureColorChanged($event)"></lm-custom-color-entry>
+  <div class="header">
+    <h4>Properties</h4>
+  </div>
+    <div *ngFor="let item of curProperties | keyvalue" class="entry">
+      <span class="property-name">{{item.key}}</span> : <span class="property-value">{{item.value}}</span>
+    </div>
 </div>

src/app/feature-management/feature-manager/feature-manager.component.scss

@@ -1,7 +1,7 @@
 .header,
 .entry {
   display: flex;
-  height: 3rem;
+  height: 1.5rem;
   align-items: center;
   margin: 0 0 .125rem 0;
   border: 1px black solid;
@@ -10,12 +10,19 @@
   .controls {
     margin-left: auto;
   }
+
+  .property-name {
+
+  }
+  .property-value {
+    margin: 0 0 0 6px;
+  }
 }
 
-.header{
+.header {
   background-color: whitesmoke;
 }
 
-.button-container{
+.button-container {
   margin-top: 3rem;
 }

src/app/map/map.component.ts

@@ -18,16 +18,21 @@ import Style from 'ol/style/Style';
 import Stroke from 'ol/style/Stroke';
 import Fill from 'ol/style/Fill';
 import {FeatureManagerComponent} from '../feature-management/feature-manager/feature-manager.component';
+import {saveAs} from 'file-saver';
 
 /**
  * TODO: add description
  *
  * TODO
  *  - The order of the layers inside the layer menu does not reflect the real order on the map
- *  - define the data structure to create for use on mobile devices
+ *  - extend feature manager to handle more properties
- *  - define how the color format should look like to use it with mapbox
+ *  - The design und ux of the whole application has to be improved
- *  - extend feature manager to handle many properties
+ *  - Add bunch edit to ease coloring of the features
- *  - The desing und ux of the whole application has to be improved.
+ *  - add possibility to filter for features to color them easier (or add some kind of custom query language)
+ *  - add software versions number to geo json
+ *  - how about the import of an previous exported file?
+ *    -> Would work, but the export has to be improved: Single Layer export as geojson or multi geojson export,
+ *      currently just the rawLawers are exported.
  */
 @Component({
   selector: 'app-map',
@@ -303,13 +308,23 @@ export class MapComponent implements OnInit {
   }
 
   /**
-   * TODO add description (currently it is not complety clear what this function is goint to do)
+   * TODO add description (currently it is not completely clear what this function is going to do)
    */
-  public saveLayers(): RawLayer[] {
+  public saveLayers(): void {
     const rawLayers = [];
     this.customLayerCollection.forEach(layer => rawLayers.push(RawLayer.fromVectorLayer(layer)));
-    console.log('Created RawLayers[]', rawLayers);
+
-    return rawLayers;
+    // process raw layer to avoid escaping in data property e. g. {\"type\": \"aaa\"...
+    // the geo json string in data property comes like this from openlayer function GeoJSON().writeFeatures
+    const processedRawLayers = rawLayers.map(rawLayer => {
+      return {
+        name: rawLayer.name,
+        data: JSON.parse(rawLayer.data)
+      };
+    });
+    const blob = new Blob([JSON.stringify(processedRawLayers)], {type: 'application/geo+json;charset=utf-8'});
+    // TODO use dynamic name
+    saveAs(blob, 'lm_layer.geojson');
   }
 
   /**
@@ -366,7 +381,7 @@ export class MapComponent implements OnInit {
       'features': [{
         'type': 'Feature',
         'properties': {
-          'name': 'Layer 1'
+          'name': 'Feature 1'
         },
         'geometry': {
           'type': 'MultiPolygon',
@@ -385,7 +400,7 @@ export class MapComponent implements OnInit {
         {
           'type': 'Feature',
           'properties': {
-            'name': 'Layer 2'
+            'name': 'Feature 2'
           },
           'geometry': {
             'type': 'MultiPolygon',
@@ -404,7 +419,7 @@ export class MapComponent implements OnInit {
         {
           'type': 'Feature',
           'properties': {
-            'name': 'Layer 3'
+            'name': 'Feature 3'
           },
           'geometry': {
             'type': 'MultiPolygon',
@@ -423,7 +438,7 @@ export class MapComponent implements OnInit {
         {
           'type': 'Feature',
           'properties': {
-            'name': 'Layer 4'
+            'name': 'Feature 4'
           },
           'geometry': {
             'type': 'MultiPolygon',