fabian/GANE-AreaManager
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add prevColorCache for color picker component

Browse Source
This commit is contained in:
Fabian Jeglinski
2020-02-15 18:29:34 +01:00
parent 55a511e9f1
commit e4e4c3a955
8 changed files with 77 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/app.module.ts
+16 -15
View File
@@ -1,23 +1,23 @@
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MapComponent } from './map/map.component';
import {FormsModule} from "@angular/forms";
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {MapComponent} from './map/map.component';
import {FormsModule} from '@angular/forms';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {
MatCardModule,
MatDialogModule,
MatGridListModule,
MatInputModule,
MatTableModule,
MatToolbarModule
} from "@angular/material";
import {DragDropModule} from "@angular/cdk/drag-drop";
import { AddLayerComponent } from './add-layer-component/add-layer.component';
import {FeatureManagerComponent} from "./feature-management/feature-manager/feature-manager.component";
import {CustomColorEntryComponent} from "./feature-management/custom-color-entry/custom-color-entry.component";
import {ColorPickerModule} from "ngx-color-picker";
MatToolbarModule,
} from '@angular/material';
import {DragDropModule} from '@angular/cdk/drag-drop';
import {AddLayerComponent} from './add-layer-component/add-layer.component';
import {FeatureManagerComponent} from './feature-management/feature-manager/feature-manager.component';
import {CustomColorEntryComponent} from './feature-management/custom-color-entry/custom-color-entry.component';
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
+1 -1
View File
@@ -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
+11 -1
View File
@@ -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
+6 -8
View File
@@ -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
+10 -3
View File
@@ -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
+27 -12
View File
@@ -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
* - define how the color format should look like to use it with mapbox
* - extend feature manager to handle many properties
* - The desing und ux of the whole application has to be improved.
* - extend feature manager to handle more properties
* - The design und ux of the whole application has to be improved
* - Add bunch edit to ease coloring of the features
* - 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',