search capability

taba90 · May 4, 2019 · 1de63e9 · 1de63e9
1 parent 71cb727
commit 1de63e9
Show file tree

Hide file tree

Showing 16 changed files with 736 additions and 66 deletions.
diff --git a/erdkunder/3rdpartylicenses.txt b/erdkunder/3rdpartylicenses.txt
diff --git a/erdkunder/favicon.ico b/erdkunder/favicon.ico
diff --git a/erdkunder/index.html b/erdkunder/index.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>VgiFrontend</title>
+  <base href="/">
+  <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/css/ol.css"
+    type="text/css">
+  <style>
+    html,
+    body {
+      margin: 0;
+    }
+  </style>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+<link rel="stylesheet" href="styles.bbc3f9d7e04063d29d7e.css"></head>
+
+<body>
+  <app-root ></app-root>
+<script type="text/javascript" src="runtime.26209474bfa8dc87a77c.js"></script><script type="text/javascript" src="polyfills.7e61eeabe4f75fabb7d3.js"></script><script type="text/javascript" src="main.b92d2b6cc58007ca41d8.js"></script></body>
+
+</html>
diff --git a/erdkunder/main.b92d2b6cc58007ca41d8.js b/erdkunder/main.b92d2b6cc58007ca41d8.js
diff --git a/erdkunder/polyfills.7e61eeabe4f75fabb7d3.js b/erdkunder/polyfills.7e61eeabe4f75fabb7d3.js
diff --git a/erdkunder/runtime.26209474bfa8dc87a77c.js b/erdkunder/runtime.26209474bfa8dc87a77c.js
diff --git a/erdkunder/styles.bbc3f9d7e04063d29d7e.css b/erdkunder/styles.bbc3f9d7e04063d29d7e.css
diff --git a/src/app/app-costants.ts b/src/app/app-costants.ts
@@ -7,6 +7,8 @@ export class AppCostants {
     public static readonly ripetiPasswordFormField = 'ripetiPassword';
     public static readonly usernameFormField = 'username';
 
+    public static readonly unselectablePointId = 'unselectable';
+
     constructor () {
     }
 

diff --git a/src/app/home/map/map.component.ts b/src/app/home/map/map.component.ts
@@ -27,6 +27,8 @@ import { MapService } from 'src/app/services/map.service';
 import { Message } from '@angular/compiler/src/i18n/i18n_ast';
 import { ReadOptions } from 'src/app/home/map/readoptions';
 import { environment } from 'src/environments/environment';
+import { SearchComponent } from './search/search.component';
+import { AppCostants } from 'src/app/app-costants';
 
 
 @Component({
@@ -74,7 +76,7 @@ export class MapComponent implements OnInit {
   ngOnInit() {
 
     // definisco i layers
-    this.beVectSource = new VectorSource({format: this.geoJsonFormat});
+    this.beVectSource = new VectorSource({ format: this.geoJsonFormat });
     this.feVectorLayer = new VectorLayer({ source: this.vectSource, style: this.markerStyle, renderBuffer: 200 });
     this.beVectorLayer = new VectorLayer({ source: this.beVectSource, style: this.markerStyle });
     this.feImageLayer = new ImageLayer({
@@ -106,7 +108,9 @@ export class MapComponent implements OnInit {
     });
     this.addEventsControlToMap();
     this.addButtonOrotophoto();
-    this.getBePoints();
+    this.addButtonRicerca();
+    this.addButtonExitSearch();
+    this.getBeUserPoints();
   }
 
 
@@ -118,19 +122,21 @@ export class MapComponent implements OnInit {
     this.map.on('click', (e: MapBrowserEvent) => {
       this.map.forEachFeatureAtPixel(e.pixel, (feature: Feature) => {
         console.log(feature);
-        this.mapService.getLocationById(feature.getId() as number).subscribe(
-          (data: VgiPoint) => {
-            if (!(data instanceof Message)) {
-              const dialogConf: MatDialogConfig = this.getDialogConfig(e.pixel, 'Modifica posizione', data, false);
-              const dialogRef: MatDialogRef<AddpointComponent> = this.dialogService.openDialog(AddpointComponent, dialogConf);
-              const pointSubscription = dialogRef.componentInstance.pointEvent.subscribe(
-                () => {
-                  this.getBePoints();
-                  pointSubscription.unsubscribe();
-                });
-            }
-          },
-        );
+        if (! feature.getId().toString().startsWith(AppCostants.unselectablePointId)) {
+          this.mapService.getLocationById(feature.getId() as number).subscribe(
+            (data: VgiPoint) => {
+              if (!(data instanceof Message)) {
+                const dialogConf: MatDialogConfig = this.getDialogConfig(e.pixel, 'Modifica posizione', data, false);
+                const dialogRef: MatDialogRef<AddpointComponent> = this.dialogService.openDialog(AddpointComponent, dialogConf);
+                const pointSubscription = dialogRef.componentInstance.pointEvent.subscribe(
+                  () => {
+                    this.getBeUserPoints();
+                    pointSubscription.unsubscribe();
+                  });
+              }
+            },
+          );
+        }
       }
       );
     }
@@ -150,30 +156,49 @@ export class MapComponent implements OnInit {
       const dialogConfig: MatDialogConfig = this.getDialogConfig(pixels, 'Salva posizione', pointVgi, true);
       const dialogRef: MatDialogRef<AddpointComponent> = this.dialogService.openDialog(AddpointComponent, dialogConfig);
       const pointSubscription = dialogRef.componentInstance.pointEvent.subscribe(() => {
-        this.getBePoints();
+        this.getBeUserPoints();
         pointSubscription.unsubscribe();
       }
       );
     });
   }
 
-  getBePoints() {
+  getBeUserPoints() {
     this.removeAllMarkers();
     this.beVectSource.clear();
     this.mapService.getUserLocations().subscribe(
       (data: VgiPoint[]) => {
         if (data instanceof Array) {
+          const features: Feature [] = [];
           for (const point of data as VgiPoint[]) {
             const feature: Feature = this.geoJsonFormat.readFeature(point.location, new ReadOptions(this.map));
             feature.setStyle(this.getStyle(point.legenda.colore));
             feature.setId(point.id);
-            this.beVectSource.addFeature(feature);
+            features.push(feature);
           }
+          this.beVectSource.addFeatures(features);
         }
       },
     );
   }
 
+  getSearchedPoints() {
+    this.removeAllMarkers();
+    this.beVectSource.clear();
+    const points: VgiPoint [] = this.mapService.points;
+    const features: Feature [] = [];
+    for (const point of points as VgiPoint []) {
+      const feature: Feature = this.geoJsonFormat.readFeature(point.location, new ReadOptions(this.map));
+      feature.setStyle(this.getStyle(point.legenda.colore));
+      feature.setId(AppCostants.unselectablePointId + point.id);
+      features.push(feature);
+    }
+    console.log(features);
+    console.log(this.beVectSource.getFeatures());
+    this.beVectSource.addFeatures(features);
+    console.log(this.beVectSource.getFeatures());
+  }
+
   getPointById(id: number | string): VgiPoint | void {
     id = id as number;
     this.mapService.getLocationById(id).subscribe(
@@ -187,10 +212,10 @@ export class MapComponent implements OnInit {
         fill: new OlFill({
           color: color,
         }),
-        radius: 5,
+        radius: 3.5,
         stroke: new OlStroke({
           color: color,
-          width: 3,
+          width: 3.5,
         }),
       }))
     });
@@ -210,6 +235,54 @@ export class MapComponent implements OnInit {
     this.map.addControl(control);
   }
 
+
+  addButtonRicerca() {
+    const search: Element = document.createElement('button');
+    search.innerHTML = 'R';
+    // search.setAttribute('style', 'top: 60px; left: .5em;');
+    search.addEventListener('click', () => this.openSearchModal());
+    const divEl: Element = document.createElement('div');
+    divEl.setAttribute('style', 'top: 97px; left: .5em;');
+    divEl.className = 'ol-control ol-unselectable';
+    divEl.appendChild(search);
+    const control: OlControl = new OlControl({
+      element: divEl,
+    });
+    this.map.addControl(control);
+  }
+
+  addButtonExitSearch() {
+    const exit: Element = document.createElement('button');
+    exit.innerHTML = 'E';
+    // search.setAttribute('style', 'top: 60px; left: .5em;');
+    exit.addEventListener('click', () => this.getBeUserPoints());
+    const divEl: Element = document.createElement('div');
+    divEl.setAttribute('style', 'top: 129px; left: .5em;');
+    divEl.className = 'ol-control ol-unselectable';
+    divEl.appendChild(exit);
+    const control: OlControl = new OlControl({
+      element: divEl,
+    });
+    this.map.addControl(control);
+  }
+
+  openSearchModal() {
+    const dialogConfig: MatDialogConfig = new MatDialogConfig();
+    dialogConfig.autoFocus = true;
+    dialogConfig.position = {
+      top: '',
+      bottom: '',
+      left: '',
+      right: '',
+    };
+    const dialogRef: MatDialogRef<SearchComponent> = this.dialogService.openDialog(SearchComponent, dialogConfig);
+    const searchSubscription = dialogRef.componentInstance.searchCompleted.subscribe(() => {
+      this.getSearchedPoints();
+      searchSubscription.unsubscribe();
+    }
+    );
+  }
+
   getPointFromLonLat(lonlat: string[]): OlPoint {
     const longitude = parseFloat(lonlat[0]);
     const latitude = parseFloat(lonlat[1]);

diff --git a/src/app/home/map/map.module.ts b/src/app/home/map/map.module.ts
@@ -5,11 +5,13 @@ import { MapComponent } from './map.component';
 import { MaterialModule } from 'src/app/material.module';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MessageSharedModule } from 'src/app/message/message-shared.module';
+import { SearchComponent } from './search/search.component';
 
 @NgModule({
   declarations: [
     MapComponent,
-    AddpointComponent
+    AddpointComponent,
+    SearchComponent
   ],
   imports: [
     CommonModule,
@@ -19,6 +21,7 @@ import { MessageSharedModule } from 'src/app/message/message-shared.module';
   ],
   entryComponents: [
     AddpointComponent,
+    SearchComponent
   ],
 })
 export class MapModule { }
diff --git a/src/app/home/map/search/search.component.css b/src/app/home/map/search/search.component.css
@@ -0,0 +1,21 @@
+.point-form {
+    width: 100%;
+    height: 100%;
+}
+
+.modal-name {
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    font-size: 1.5rem;
+    letter-spacing: 1px;
+    color: darkRed;
+}
+
+.search-form-container {
+    text-align: center;
+
+    display: flex;
+    justify-content: flex-start;
+    flex-direction: column;
+    width: 400px;
+    height: 400px;
+}
diff --git a/src/app/home/map/search/search.component.html b/src/app/home/map/search/search.component.html
@@ -0,0 +1,31 @@
+<div class="search-form-container">
+  <h2 mat-dialog-title class="modal-name">Ricerca localizzazioni</h2>
+  <mat-divider></mat-divider>
+  <br/>
+  <br/>
+  <mat-dialog-content [formGroup]="formSearch" class="form">
+    <div>
+      <mat-form-field class="mat-field">
+        <input matInput placeholder="Età da" type="number" formControlName="annoDa" required>
+      </mat-form-field>
+    </div>
+    <div>
+      <mat-form-field class="input-fullwidth">
+        <input matInput placeholder="Età a" type= "number" formControlName="annoA">
+      </mat-form-field>
+    </div>
+    <div>
+      <mat-form-field class="mat-field">
+        <mat-select placeholder="Selezione legenda" formControlName="idLegenda" [(ngModel)]="selectedLegenda" required>
+          <mat-option *ngFor="let l of legende" [value]="l.id">
+            {{l.codice}}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
+    <div>
+      <br/>
+    <button mat-raised-button color="primary" class="white-text" (click)="search()">Avvia Ricerca</button>
+    </div>
+  </mat-dialog-content>
+</div>
diff --git a/src/app/home/map/search/search.component.spec.ts b/src/app/home/map/search/search.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SearchComponent } from './search.component';
+
+describe('SearchComponent', () => {
+  let component: SearchComponent;
+  let fixture: ComponentFixture<SearchComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SearchComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SearchComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/home/map/search/search.component.ts b/src/app/home/map/search/search.component.ts
@@ -0,0 +1,68 @@
+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+import { Legenda } from 'src/app/model/legenda';
+import { MapService } from 'src/app/services/map.service';
+import { LegendaService } from 'src/app/services/legenda.service';
+import { VgiPoint } from 'src/app/model/point';
+import { FormGroup, FormBuilder } from '@angular/forms';
+import { Search } from 'src/app/model/search';
+import { ModalService } from 'src/app/services/modal-popups.service';
+import { MatDialogRef } from '@angular/material';
+
+@Component({
+  selector: 'app-search',
+  templateUrl: './search.component.html',
+  styleUrls: ['./search.component.css']
+})
+export class SearchComponent implements OnInit {
+
+  legende: Legenda [];
+
+  points: VgiPoint [];
+
+  formSearch: FormGroup;
+
+  @Output()
+  searchCompleted: EventEmitter<any> = new EventEmitter();
+
+  constructor(private fb: FormBuilder, private modalService: ModalService<Search>,
+    private dialogRef: MatDialogRef<SearchComponent>,
+    private mapService: MapService, private legendaService: LegendaService) { }
+
+  ngOnInit() {
+    this.createFormGroup();
+    this.legendaService.getLegende().subscribe(
+      (data: Legenda[]) => {
+        this.legende = data;
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+  }
+
+  search () {
+    this.modalService.save(this.dialogRef, this.formSearch);
+    this.dialogRef.afterClosed().subscribe(
+        (search: Search) => {
+          this.mapService.searchLocations(search.annoDa, search.annoA, search.idLegenda).subscribe(
+            (points: VgiPoint []) => {
+              this.mapService.points = points;
+              this.searchCompleted.emit();
+            }
+          );
+        }
+    );
+
+  }
+
+  createFormGroup () {
+    this.formSearch = this.fb.group(
+      {
+        annoDa: [''],
+        annoA: [''],
+        idLegenda: [''],
+      }
+    );
+  }
+
+}