Skip to content

Commit 1de63e9

Browse files
taba90taba90
committed
search capability
1 parent 71cb727 commit 1de63e9

16 files changed

Lines changed: 736 additions & 66 deletions

‎erdkunder/3rdpartylicenses.txt‎

Lines changed: 434 additions & 0 deletions
Large diffs are not rendered by default.

‎erdkunder/favicon.ico‎

5.3 KB
Binary file not shown.

‎erdkunder/index.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>VgiFrontend</title>
7+
<base href="/">
8+
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/css/ol.css"
9+
type="text/css">
10+
<style>
11+
html,
12+
body {
13+
margin: 0;
14+
}
15+
</style>
16+
<meta name="viewport" content="width=device-width, initial-scale=1">
17+
<link rel="icon" type="image/x-icon" href="favicon.ico">
18+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
19+
<link rel="stylesheet" href="styles.bbc3f9d7e04063d29d7e.css"></head>
20+
21+
<body>
22+
<app-root ></app-root>
23+
<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>
24+
25+
</html>

‎erdkunder/main.b92d2b6cc58007ca41d8.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎erdkunder/polyfills.7e61eeabe4f75fabb7d3.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎erdkunder/runtime.26209474bfa8dc87a77c.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎erdkunder/styles.bbc3f9d7e04063d29d7e.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app/app-costants.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ export class AppCostants {
77
public static readonly ripetiPasswordFormField = 'ripetiPassword';
88
public static readonly usernameFormField = 'username';
99

10+
public static readonly unselectablePointId = 'unselectable';
11+
1012
constructor () {
1113
}
1214

‎src/app/home/map/map.component.ts‎

Lines changed: 93 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ import { MapService } from 'src/app/services/map.service';
2727
import { Message } from '@angular/compiler/src/i18n/i18n_ast';
2828
import { ReadOptions } from 'src/app/home/map/readoptions';
2929
import { environment } from 'src/environments/environment';
30+
import { SearchComponent } from './search/search.component';
31+
import { AppCostants } from 'src/app/app-costants';
3032

3133

3234
@Component({
@@ -74,7 +76,7 @@ export class MapComponent implements OnInit {
7476
ngOnInit() {
7577

7678
// definisco i layers
77-
this.beVectSource = new VectorSource({format: this.geoJsonFormat});
79+
this.beVectSource = new VectorSource({ format: this.geoJsonFormat });
7880
this.feVectorLayer = new VectorLayer({ source: this.vectSource, style: this.markerStyle, renderBuffer: 200 });
7981
this.beVectorLayer = new VectorLayer({ source: this.beVectSource, style: this.markerStyle });
8082
this.feImageLayer = new ImageLayer({
@@ -106,7 +108,9 @@ export class MapComponent implements OnInit {
106108
});
107109
this.addEventsControlToMap();
108110
this.addButtonOrotophoto();
109-
this.getBePoints();
111+
this.addButtonRicerca();
112+
this.addButtonExitSearch();
113+
this.getBeUserPoints();
110114
}
111115

112116

@@ -118,19 +122,21 @@ export class MapComponent implements OnInit {
118122
this.map.on('click', (e: MapBrowserEvent) => {
119123
this.map.forEachFeatureAtPixel(e.pixel, (feature: Feature) => {
120124
console.log(feature);
121-
this.mapService.getLocationById(feature.getId() as number).subscribe(
122-
(data: VgiPoint) => {
123-
if (!(data instanceof Message)) {
124-
const dialogConf: MatDialogConfig = this.getDialogConfig(e.pixel, 'Modifica posizione', data, false);
125-
const dialogRef: MatDialogRef<AddpointComponent> = this.dialogService.openDialog(AddpointComponent, dialogConf);
126-
const pointSubscription = dialogRef.componentInstance.pointEvent.subscribe(
127-
() => {
128-
this.getBePoints();
129-
pointSubscription.unsubscribe();
130-
});
131-
}
132-
},
133-
);
125+
if (! feature.getId().toString().startsWith(AppCostants.unselectablePointId)) {
126+
this.mapService.getLocationById(feature.getId() as number).subscribe(
127+
(data: VgiPoint) => {
128+
if (!(data instanceof Message)) {
129+
const dialogConf: MatDialogConfig = this.getDialogConfig(e.pixel, 'Modifica posizione', data, false);
130+
const dialogRef: MatDialogRef<AddpointComponent> = this.dialogService.openDialog(AddpointComponent, dialogConf);
131+
const pointSubscription = dialogRef.componentInstance.pointEvent.subscribe(
132+
() => {
133+
this.getBeUserPoints();
134+
pointSubscription.unsubscribe();
135+
});
136+
}
137+
},
138+
);
139+
}
134140
}
135141
);
136142
}
@@ -150,30 +156,49 @@ export class MapComponent implements OnInit {
150156
const dialogConfig: MatDialogConfig = this.getDialogConfig(pixels, 'Salva posizione', pointVgi, true);
151157
const dialogRef: MatDialogRef<AddpointComponent> = this.dialogService.openDialog(AddpointComponent, dialogConfig);
152158
const pointSubscription = dialogRef.componentInstance.pointEvent.subscribe(() => {
153-
this.getBePoints();
159+
this.getBeUserPoints();
154160
pointSubscription.unsubscribe();
155161
}
156162
);
157163
});
158164
}
159165

160-
getBePoints() {
166+
getBeUserPoints() {
161167
this.removeAllMarkers();
162168
this.beVectSource.clear();
163169
this.mapService.getUserLocations().subscribe(
164170
(data: VgiPoint[]) => {
165171
if (data instanceof Array) {
172+
const features: Feature [] = [];
166173
for (const point of data as VgiPoint[]) {
167174
const feature: Feature = this.geoJsonFormat.readFeature(point.location, new ReadOptions(this.map));
168175
feature.setStyle(this.getStyle(point.legenda.colore));
169176
feature.setId(point.id);
170-
this.beVectSource.addFeature(feature);
177+
features.push(feature);
171178
}
179+
this.beVectSource.addFeatures(features);
172180
}
173181
},
174182
);
175183
}
176184

185+
getSearchedPoints() {
186+
this.removeAllMarkers();
187+
this.beVectSource.clear();
188+
const points: VgiPoint [] = this.mapService.points;
189+
const features: Feature [] = [];
190+
for (const point of points as VgiPoint []) {
191+
const feature: Feature = this.geoJsonFormat.readFeature(point.location, new ReadOptions(this.map));
192+
feature.setStyle(this.getStyle(point.legenda.colore));
193+
feature.setId(AppCostants.unselectablePointId + point.id);
194+
features.push(feature);
195+
}
196+
console.log(features);
197+
console.log(this.beVectSource.getFeatures());
198+
this.beVectSource.addFeatures(features);
199+
console.log(this.beVectSource.getFeatures());
200+
}
201+
177202
getPointById(id: number | string): VgiPoint | void {
178203
id = id as number;
179204
this.mapService.getLocationById(id).subscribe(
@@ -187,10 +212,10 @@ export class MapComponent implements OnInit {
187212
fill: new OlFill({
188213
color: color,
189214
}),
190-
radius: 5,
215+
radius: 3.5,
191216
stroke: new OlStroke({
192217
color: color,
193-
width: 3,
218+
width: 3.5,
194219
}),
195220
}))
196221
});
@@ -210,6 +235,54 @@ export class MapComponent implements OnInit {
210235
this.map.addControl(control);
211236
}
212237

238+
239+
addButtonRicerca() {
240+
const search: Element = document.createElement('button');
241+
search.innerHTML = 'R';
242+
// search.setAttribute('style', 'top: 60px; left: .5em;');
243+
search.addEventListener('click', () => this.openSearchModal());
244+
const divEl: Element = document.createElement('div');
245+
divEl.setAttribute('style', 'top: 97px; left: .5em;');
246+
divEl.className = 'ol-control ol-unselectable';
247+
divEl.appendChild(search);
248+
const control: OlControl = new OlControl({
249+
element: divEl,
250+
});
251+
this.map.addControl(control);
252+
}
253+
254+
addButtonExitSearch() {
255+
const exit: Element = document.createElement('button');
256+
exit.innerHTML = 'E';
257+
// search.setAttribute('style', 'top: 60px; left: .5em;');
258+
exit.addEventListener('click', () => this.getBeUserPoints());
259+
const divEl: Element = document.createElement('div');
260+
divEl.setAttribute('style', 'top: 129px; left: .5em;');
261+
divEl.className = 'ol-control ol-unselectable';
262+
divEl.appendChild(exit);
263+
const control: OlControl = new OlControl({
264+
element: divEl,
265+
});
266+
this.map.addControl(control);
267+
}
268+
269+
openSearchModal() {
270+
const dialogConfig: MatDialogConfig = new MatDialogConfig();
271+
dialogConfig.autoFocus = true;
272+
dialogConfig.position = {
273+
top: '',
274+
bottom: '',
275+
left: '',
276+
right: '',
277+
};
278+
const dialogRef: MatDialogRef<SearchComponent> = this.dialogService.openDialog(SearchComponent, dialogConfig);
279+
const searchSubscription = dialogRef.componentInstance.searchCompleted.subscribe(() => {
280+
this.getSearchedPoints();
281+
searchSubscription.unsubscribe();
282+
}
283+
);
284+
}
285+
213286
getPointFromLonLat(lonlat: string[]): OlPoint {
214287
const longitude = parseFloat(lonlat[0]);
215288
const latitude = parseFloat(lonlat[1]);

‎src/app/home/map/map.module.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,13 @@ import { MapComponent } from './map.component';
55
import { MaterialModule } from 'src/app/material.module';
66
import { ReactiveFormsModule } from '@angular/forms';
77
import { MessageSharedModule } from 'src/app/message/message-shared.module';
8+
import { SearchComponent } from './search/search.component';
89

910
@NgModule({
1011
declarations: [
1112
MapComponent,
12-
AddpointComponent
13+
AddpointComponent,
14+
SearchComponent
1315
],
1416
imports: [
1517
CommonModule,
@@ -19,6 +21,7 @@ import { MessageSharedModule } from 'src/app/message/message-shared.module';
1921
],
2022
entryComponents: [
2123
AddpointComponent,
24+
SearchComponent
2225
],
2326
})
2427
export class MapModule { }

0 commit comments

Comments
 (0)