small refactors
This commit is contained in:
parent
0814bc8b10
commit
285a9ede4d
@ -12,8 +12,6 @@ export const MAP_COLLECTION = 'Maps';
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class SyncService {
|
||||
private
|
||||
|
||||
private location;
|
||||
private locationChanged = false;
|
||||
private locationDoc: AngularFirestoreDocument;
|
||||
@ -72,20 +70,15 @@ export class SyncService {
|
||||
|
||||
delete(...symbols) {
|
||||
let map = this.mapData.value;
|
||||
symbols.forEach(s => {
|
||||
if(map.circles) map.circles = map.circles.filter(r => !_.isEqual(s, r));
|
||||
if(map.markers) map.markers = map.markers.filter(r => !_.isEqual(s, r));
|
||||
if(map.measurements) map.measurements = map.measurements.filter(r => !_.isEqual(s, r));
|
||||
if(map.polygons) map.polygons = map.polygons.filter(r => !_.isEqual(s, r));
|
||||
if(map.polylines) map.polylines = map.polylines.filter(r => !_.isEqual(s, r));
|
||||
if(map.rectangles) map.rectangles = map.rectangles.filter(r => !_.isEqual(s, r));
|
||||
Object.keys(map).filter(key => Array.isArray(map[key])).forEach(key => {
|
||||
symbols.forEach(s => map[key] = map[key].filter(ss => !_.isEqual(s, ss)))
|
||||
});
|
||||
this.mapData.next(map);
|
||||
this.mapChanged = true;
|
||||
}
|
||||
|
||||
load(mapCode: string, username: string) {
|
||||
this.unload();
|
||||
let ignore = this.unload();
|
||||
this.mapDoc = this.db.collection(MAP_COLLECTION).doc(mapCode);
|
||||
this.locationDoc = this.mapDoc.collection(LOCATION_COLLECTION).doc(username);
|
||||
|
||||
@ -121,11 +114,6 @@ export class SyncService {
|
||||
return map;
|
||||
}
|
||||
|
||||
removeMyLocation() {
|
||||
this.location = null;
|
||||
return this.locationDoc.delete();
|
||||
}
|
||||
|
||||
save(locationOnly?) {
|
||||
if(this.locationDoc && this.locationChanged) {
|
||||
let ignore = this.locationDoc.set(this.location);
|
||||
@ -155,8 +143,8 @@ export class SyncService {
|
||||
}
|
||||
|
||||
if(this.locationDoc) {
|
||||
this.location = null;
|
||||
this.locationChanged = false;
|
||||
await this.removeMyLocation();
|
||||
this.locationDoc = null;
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,8 +16,6 @@ import {MapData, Marker} from "../../models/mapSymbol";
|
||||
import {Adjectives} from "../../adjectives";
|
||||
import {Nouns} from "../../nounes";
|
||||
|
||||
declare const L;
|
||||
|
||||
@Component({
|
||||
selector: 'map',
|
||||
templateUrl: 'map.component.html',
|
||||
@ -37,6 +35,110 @@ export class MapComponent implements OnDestroy, OnInit {
|
||||
showPalette = false;
|
||||
sub: Subscription;
|
||||
|
||||
menu: ToolbarItem[];
|
||||
|
||||
constructor(public physicsService: PhysicsService, private syncService: SyncService, private snackBar: MatSnackBar, private bottomSheet: MatBottomSheet, private dialog: MatDialog, private route: ActivatedRoute) {
|
||||
this.name = Adjectives[Math.floor(Math.random() * Adjectives.length)] + ' ' + Nouns[Math.floor(Math.random() * Nouns.length)];
|
||||
|
||||
this.menu = [
|
||||
{name: 'Marker', icon: 'room', toggle: true, onEnabled: this.startMarker, onDisabled: this.unsub},
|
||||
{name: 'Draw', icon: 'create', toggle: true, onEnabled: this.startDrawing, onDisabled: this.unsub},
|
||||
{name: 'Circle', icon: 'panorama_fish_eye', toggle: true, onEnabled: this.startCircle, onDisabled: this.unsub},
|
||||
{name: 'Square', icon: 'crop_square', toggle: true, onEnabled: this.startRectangle, onDisabled: this.unsub},
|
||||
{name: 'Polygon', icon: 'details', toggle: true, onEnabled: this.startPolygon, onDisabled: this.stopPolygon},
|
||||
{name: 'Measure', icon: 'straighten', toggle: true, onEnabled: this.startMeasuring, onDisabled: this.unsub},
|
||||
{name: 'Place Relative', icon: 'control_camera', click: this.placeRelative},
|
||||
{name: 'Delete', icon: 'delete', toggle: true, onEnabled: this.startDelete, onDisabled: this.unsub},
|
||||
{name: 'Map Style', icon: 'terrain', subMenu: [
|
||||
{name: 'ESRI:Topographic', toggle: true, click: () => this.map.setMapLayer(MapLayers.ESRI_TOPOGRAPHIC)},
|
||||
{name: 'ESRI:Satellite', toggle: true, click: () => this.map.setMapLayer(MapLayers.ESRI_IMAGERY)},
|
||||
{name: 'ESRI:Satellite Clear', toggle: true, enabled: true, click: () => this.map.setMapLayer(MapLayers.ESRI_IMAGERY_CLARITY)}
|
||||
]},
|
||||
{name: 'Weather', icon: 'cloud', subMenu: [
|
||||
{name: 'None', toggle: true, enabled: true, click: () => this.map.setWeatherLayer()},
|
||||
{name: 'Temperature', toggle: true, click: () => this.map.setWeatherLayer(WeatherLayers.TEMP_NEW)},
|
||||
{name: 'Wind', toggle: true, click: () => this.map.setWeatherLayer(WeatherLayers.WIND_NEW)},
|
||||
{name: 'Sea Level Pressure', toggle: true, click: () => this.map.setWeatherLayer(WeatherLayers.SEA_LEVEL_PRESSURE)},
|
||||
{name: 'Clouds', toggle: true, click: () => this.map.setWeatherLayer(WeatherLayers.CLOUDS_NEW)},
|
||||
]},
|
||||
{name: 'Calibrate', icon: 'explore', toggle: true, onEnabled: this.startCalibrating, onDisabled: this.unsub},
|
||||
{name: 'Share', icon: 'share', toggle: true, onEnabled: () => this.share(), onDisabled: () => this.shareDialog = false},
|
||||
{name: 'Messages', icon: 'chat', hidden: true},
|
||||
{name: 'Identity', icon: 'perm_identity', hidden: true},
|
||||
{name: 'Settings', icon: 'settings', hidden: true},
|
||||
{name: 'delete all', icon: 'cancel', click: () => this.map.deleteAll(), hidden: !isDevMode()}
|
||||
];
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
let ignore = this.syncService.unload();
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
// Setup services
|
||||
this.map = new MapService('map');
|
||||
this.route.params.subscribe(params => {
|
||||
this.code = params['code'];
|
||||
this.syncService.load(this.code, this.name);
|
||||
});
|
||||
|
||||
// Setup map repainting on updates
|
||||
this.syncService.mapData.pipe(filter(s => !!s)).subscribe((map: MapData) => {
|
||||
this.map.deleteAll();
|
||||
if (map.circles) map.circles.forEach(c => this.map.newCircle(c));
|
||||
if (map.locations) Object.values(map.locations).forEach(l => this.map.newMarker(l));
|
||||
if (map.markers) map.markers.forEach(m => this.map.newMarker(m));
|
||||
if (map.measurements) map.measurements.forEach(m => this.map.newMeasurement(m));
|
||||
if (map.polygons) map.polygons.forEach(p => this.map.newPolygon(p));
|
||||
if (map.polylines) map.polylines.forEach(p => this.map.newPolyline(p));
|
||||
if (map.rectangles) map.rectangles.forEach(r => this.map.newRectangle(r));
|
||||
});
|
||||
|
||||
// Handle opening map symbols
|
||||
this.map.click.pipe(filter(e => !!e && e.item)).subscribe(ignore => {
|
||||
/*if (e.item instanceof L.Marker) {
|
||||
if (e.symbol.noSelect) return;
|
||||
this.bottomSheet.open(MarkerComponent, {data: e.symbol, hasBackdrop: false, disableClose: true});
|
||||
} else if (e.item instanceof L.Circle) {
|
||||
if (e.symbol.noSelect) return;
|
||||
this.bottomSheet.open(CircleComponent, {data: e.symbol, hasBackdrop: false, disableClose: true}).afterDismissed().subscribe(c => {
|
||||
let circle = c['_symbol'];
|
||||
this.map.delete(c);
|
||||
this.map.newCircle(circle);
|
||||
});
|
||||
}*/
|
||||
});
|
||||
|
||||
// Display location information & submit it
|
||||
this.physicsService.info.pipe(filter(coord => !!coord)).subscribe(pos => {
|
||||
if (!this.position) this.center({lat: pos.latitude, lng: pos.longitude});
|
||||
if (this.positionMarker.arrow) this.map.delete(this.positionMarker.arrow);
|
||||
if (this.positionMarker.circle) this.map.delete(this.positionMarker.circle);
|
||||
this.positionMarker.arrow = this.map.newMarker({latlng: {lat: pos.latitude, lng: pos.longitude}, noSelect: true, noDelete: true, noDeleteTool: true, icon: 'arrow', rotationAngle: pos.heading, rotationOrigin: 'center'});
|
||||
this.positionMarker.circle = this.map.newCircle({latlng: {lat: pos.latitude, lng: pos.longitude}, color: '#2873d8', noSelect: true, noDelete: true, noDeleteTool: true, radius: pos.accuracy, interactive: false});
|
||||
this.syncService.addMyLocation({latlng: {lat: pos.latitude, lng: pos.longitude}, label: this.name, noDeleteTool: true});
|
||||
this.position = pos;
|
||||
});
|
||||
|
||||
// Request calibration if needed
|
||||
this.physicsService.requireCalibration.subscribe(() => {
|
||||
this.snackBar.open('Compass requires calibration', 'calibrate', {
|
||||
duration: 5000,
|
||||
panelClass: 'bg-warning,text-white'
|
||||
}).onAction().subscribe(() => this.startCalibrating());
|
||||
});
|
||||
}
|
||||
|
||||
center(pos?) {
|
||||
if (!pos) pos = {lat: this.position.latitude, lng: this.position.longitude};
|
||||
this.map.centerOn(pos);
|
||||
}
|
||||
|
||||
copyUrl() {
|
||||
copyToClipboard(window.location.href);
|
||||
this.snackBar.open('Copied to your clipboard! 📋', null, {duration: 3000})
|
||||
}
|
||||
|
||||
placeRelative = () => {
|
||||
this.dialog.open(DimensionsDialogComponent, {data: ['Distance (m)', 'Baring'], panelClass: 'pb-0'}).afterClosed().subscribe(dimensions => {
|
||||
if(!dimensions) return;
|
||||
@ -46,6 +148,17 @@ export class MapComponent implements OnDestroy, OnInit {
|
||||
})
|
||||
};
|
||||
|
||||
share() {
|
||||
this.shareDialog = true;
|
||||
if (navigator['share']) {
|
||||
navigator['share']({
|
||||
title: 'Map Alliance',
|
||||
text: 'A map alliance has been requested!',
|
||||
url: window.location.href,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
startCalibrating = () => {
|
||||
let calibration = this.bottomSheet.open(CalibrateComponent, {hasBackdrop: false, disableClose: true});
|
||||
this.sub = calibration.afterDismissed().pipe(finalize(() => calibration.dismiss())).subscribe();
|
||||
@ -164,134 +277,4 @@ export class MapComponent implements OnDestroy, OnInit {
|
||||
this.sub = null;
|
||||
}
|
||||
};
|
||||
|
||||
menu: ToolbarItem[] = [
|
||||
{name: 'Marker', icon: 'room', toggle: true, onEnabled: this.startMarker, onDisabled: this.unsub},
|
||||
{name: 'Draw', icon: 'create', toggle: true, onEnabled: this.startDrawing, onDisabled: this.unsub},
|
||||
{name: 'Circle', icon: 'panorama_fish_eye', toggle: true, onEnabled: this.startCircle, onDisabled: this.unsub},
|
||||
{name: 'Square', icon: 'crop_square', toggle: true, onEnabled: this.startRectangle, onDisabled: this.unsub},
|
||||
{name: 'Polygon', icon: 'details', toggle: true, onEnabled: this.startPolygon, onDisabled: this.stopPolygon},
|
||||
{name: 'Measure', icon: 'straighten', toggle: true, onEnabled: this.startMeasuring, onDisabled: this.unsub},
|
||||
{name: 'Place Relative', icon: 'control_camera', click: this.placeRelative},
|
||||
{name: 'Delete', icon: 'delete', toggle: true, onEnabled: this.startDelete, onDisabled: this.unsub},
|
||||
{name: 'Map Style', icon: 'terrain', subMenu: [
|
||||
{name: 'ESRI:Topographic', toggle: true, click: () => this.map.setMapLayer(MapLayers.ESRI_TOPOGRAPHIC)},
|
||||
{name: 'ESRI:Satellite', toggle: true, click: () => this.map.setMapLayer(MapLayers.ESRI_IMAGERY)},
|
||||
{name: 'ESRI:Satellite Clear', toggle: true, enabled: true, click: () => this.map.setMapLayer(MapLayers.ESRI_IMAGERY_CLARITY)}
|
||||
]},
|
||||
{name: 'Weather', icon: 'cloud', subMenu: [
|
||||
{name: 'None', toggle: true, enabled: true, click: () => this.map.setWeatherLayer()},
|
||||
{name: 'Temperature', toggle: true, click: () => this.map.setWeatherLayer(WeatherLayers.TEMP_NEW)},
|
||||
{name: 'Wind', toggle: true, click: () => this.map.setWeatherLayer(WeatherLayers.WIND_NEW)},
|
||||
{name: 'Sea Level Pressure', toggle: true, click: () => this.map.setWeatherLayer(WeatherLayers.SEA_LEVEL_PRESSURE)},
|
||||
{name: 'Clouds', toggle: true, click: () => this.map.setWeatherLayer(WeatherLayers.CLOUDS_NEW)},
|
||||
]},
|
||||
{name: 'Calibrate', icon: 'explore', toggle: true, onEnabled: this.startCalibrating, onDisabled: this.unsub},
|
||||
{name: 'Share', icon: 'share', toggle: true, onEnabled: () => this.share(), onDisabled: () => this.shareDialog = false},
|
||||
{name: 'Messages', icon: 'chat', hidden: true},
|
||||
{name: 'Identity', icon: 'perm_identity', hidden: true},
|
||||
{name: 'Settings', icon: 'settings', hidden: true},
|
||||
{name: 'delete all', icon: 'cancel', click: () => this.map.deleteAll(), hidden: !isDevMode()}
|
||||
];
|
||||
|
||||
constructor(public physicsService: PhysicsService, private syncService: SyncService, private snackBar: MatSnackBar, private bottomSheet: MatBottomSheet, private dialog: MatDialog, private route: ActivatedRoute) {
|
||||
this.name = Adjectives[Math.floor(Math.random() * Adjectives.length)] + ' ' + Nouns[Math.floor(Math.random() * Nouns.length)];
|
||||
(window.onbeforeunload as any) = this.ngOnDestroy();
|
||||
this.route.params.subscribe(params => {
|
||||
this.code = params['code'];
|
||||
this.syncService.load(this.code, this.name);
|
||||
})
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
let ignore = this.syncService.unload();
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.map = new MapService('map');
|
||||
|
||||
// Handle drawing the map after updates
|
||||
this.syncService.mapData.pipe(filter(s => !!s)).subscribe((map: MapData) => {
|
||||
this.map.deleteAll();
|
||||
if (map.circles) map.circles.forEach(c => this.map.newCircle(c));
|
||||
if (map.locations) Object.values(map.locations).forEach(l => this.map.newMarker(l));
|
||||
if (map.markers) map.markers.forEach(m => this.map.newMarker(m));
|
||||
if (map.measurements) map.measurements.forEach(m => this.map.newMeasurement(m));
|
||||
if (map.polygons) map.polygons.forEach(p => this.map.newPolygon(p));
|
||||
if (map.polylines) map.polylines.forEach(p => this.map.newPolyline(p));
|
||||
if (map.rectangles) map.rectangles.forEach(r => this.map.newRectangle(r));
|
||||
});
|
||||
|
||||
// Handle opening symbols
|
||||
this.map.click.pipe(filter(e => !!e && e.item)).subscribe(e => {
|
||||
if (e.item instanceof L.Marker) {
|
||||
if (e.symbol.noSelect) return;
|
||||
/*this.bottomSheet.open(MarkerComponent, {data: e.symbol, hasBackdrop: false, disableClose: true});*/
|
||||
} else if (e.item instanceof L.Circle) {
|
||||
if (e.symbol.noSelect) return;
|
||||
/*this.bottomSheet.open(CircleComponent, {data: e.symbol, hasBackdrop: false, disableClose: true}).afterDismissed().subscribe(c => {
|
||||
let circle = c['_symbol'];
|
||||
this.map.delete(c);
|
||||
this.map.newCircle(circle);
|
||||
});*/
|
||||
}
|
||||
});
|
||||
|
||||
// Display location
|
||||
this.physicsService.info.pipe(filter(coord => !!coord)).subscribe(pos => {
|
||||
if (!this.position) this.center({lat: pos.latitude, lng: pos.longitude});
|
||||
if (this.positionMarker.arrow) this.map.delete(this.positionMarker.arrow);
|
||||
if (this.positionMarker.circle) this.map.delete(this.positionMarker.circle);
|
||||
this.syncService.addMyLocation({latlng: {lat: pos.latitude, lng: pos.longitude}, label: this.name, noDeleteTool: true});
|
||||
this.positionMarker.arrow = this.map.newMarker({
|
||||
latlng: {lat: pos.latitude, lng: pos.longitude},
|
||||
noSelect: true,
|
||||
noDelete: true,
|
||||
noDeleteTool: true,
|
||||
icon: 'arrow',
|
||||
rotationAngle: pos.heading,
|
||||
rotationOrigin: 'center'
|
||||
});
|
||||
this.positionMarker.circle = this.map.newCircle({
|
||||
latlng: {lat: pos.latitude, lng: pos.longitude},
|
||||
color: '#2873d8',
|
||||
noSelect: true,
|
||||
noDelete: true,
|
||||
noDeleteTool: true,
|
||||
radius: pos.accuracy,
|
||||
interactive: false
|
||||
});
|
||||
this.position = pos;
|
||||
});
|
||||
|
||||
// Calibration popup
|
||||
this.physicsService.requireCalibration.subscribe(() => {
|
||||
this.snackBar.open('Compass requires calibration', 'calibrate', {
|
||||
duration: 5000,
|
||||
panelClass: 'bg-warning,text-white'
|
||||
})
|
||||
.onAction().subscribe(() => this.startCalibrating());
|
||||
});
|
||||
}
|
||||
|
||||
center(pos?) {
|
||||
if (!pos) pos = {lat: this.position.latitude, lng: this.position.longitude};
|
||||
this.map.centerOn(pos);
|
||||
}
|
||||
|
||||
copyUrl() {
|
||||
copyToClipboard(window.location.href);
|
||||
this.snackBar.open('Copied to your clipboard! 📋', null, {duration: 3000})
|
||||
}
|
||||
|
||||
share() {
|
||||
this.shareDialog = true;
|
||||
if (navigator['share']) {
|
||||
navigator['share']({
|
||||
title: 'Map Alliance',
|
||||
text: 'A map alliance has been requested!',
|
||||
url: window.location.href,
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user