Skip to content

Commit

Permalink
Support map rotation #669 - Add coordinates and height to private POI…
Browse files Browse the repository at this point in the history 
… dialog. remove comments, added some TODOs.
  • Loading branch information
@HarelM
HarelM committed Nov 30, 2018
1 parent f36cb6b commit dd78814
Show file tree
Hide file tree
Showing 7 changed files with 55 additions and 57 deletions.
12 changes: 6 additions & 6 deletions IsraelHiking.Web/sources/application/components/coordinates.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { HttpClient, HttpParams } from "@angular/common/http";

import { BaseMapComponent } from "./base-map.component";
import { ResourcesService } from "../services/resources.service";
import { ElevationProvider } from "../services/elevation.provider";
import { Urls } from "../urls";
import { LatLngAlt } from "../models/models";

Expand All @@ -23,19 +24,18 @@ export class CoordinatesComponent extends BaseMapComponent implements OnInit {
public itmCoordinates: INorthEast;

constructor(resources: ResourcesService,
protected httpClient: HttpClient) {
private readonly httpClient: HttpClient,
private readonly elevationProvider: ElevationProvider) {
super(resources);
this.itmCoordinates = { north: 0, east: 0 };
}

ngOnInit(): void {
this.updateItmCoordinates();
}

private updateItmCoordinates = async () => {
public async ngOnInit(): Promise<any> {
let params = new HttpParams()
.set("lat", this.latlng.lat.toString())
.set("lon", this.latlng.lng.toString());
this.itmCoordinates = await this.httpClient.get(Urls.itmGrid, { params: params }).toPromise() as INorthEast;
let response = await this.elevationProvider.updateHeights([this.latlng]);
this.latlng.alt = response[0].alt;
}
}
76 changes: 42 additions & 34 deletions ...lHiking.Web/sources/application/components/dialogs/private-poi-edit-dialog.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,11 @@
</div>
</div>
<div mat-dialog-content>
<div flexLayout="row">
<div fxFlex="60" class="margin-10-reverse">
<div fxLayout="row">
<mat-form-field fxFill>
<input matInput #titleInput type="text" [dir]="resources.getDirection(title)" [(ngModel)]="title" placeholder="{{resources.title}}" fxFill />
<input matInput #titleInput type="text" [dir]="resources.getDirection(title)" [(ngModel)]="title" placeholder="{{resources.title}}" fxFill/>
</mat-form-field>
</div>
<div fxLayout="row">
Expand All @@ -20,43 +21,50 @@
</mat-form-field>
</div>
</div>
<div fxFlex>
<div fxLayout="row">
<label *ngIf="!imageLink">
<a mat-button class="flex-center" [style.color]="'black'" imageCapture (change)="addImage($event)" fxFill angulartics2On="click" angularticsCategory="POI" angularticsAction="Upload image"><i class="fa icon-camera fa-4x"></i> <i class="fa icon-plus fa-2x"></i></a>
<input type="file" (change)="addImage($event)" [style.display]="'none'" accept="image/*;capture=camera" />
</label>
<img fxFill *ngIf="imageLink"
[src]="resources.getResizedImageUrl(imageLink.url, 300)"
class="img-responsive" />
</div>
<div fxLayout="row" *ngIf="imageLink">
<button mat-button fxFill (click)="clearImage()" matTooltip="{{resources.clear}}" matTooltipPosition="above"><i class="fa icon-trash"></i></button>
</div>
<div *ngIf="showIcons">
<br/>
<div *ngFor="let group of iconsGroups">
<div fxLayout="row" fxFill>
<div *ngFor="let icon of group.icons" (click)="setMarkerType(icon)" class="cursor-pointer text-center" fxFlex="{{100/iconsGroups.length}}" angulartics2On="click" angularticsCategory="Icons" angularticsAction="Select {{icon}}">
<i class="fa icon-{{icon}} fa-lg"></i>
<div fxFlex>
<div fxLayout="row">
<label *ngIf="!imageLink">
<a mat-button class="flex-center" [style.color]="'black'" imageCapture (change)="addImage($event)" fxFill angulartics2On="click" angularticsCategory="POI" angularticsAction="Upload image"><i class="fa icon-camera fa-4x"></i> <i class="fa icon-plus fa-2x"></i></a>
<input type="file" (change)="addImage($event)" [style.display]="'none'" accept="image/*;capture=camera"/>
</label>
<img fxFill *ngIf="imageLink"
[src]="resources.getResizedImageUrl(imageLink.url, 300)"
class="img-responsive"/>
</div>
<div fxLayout="row" *ngIf="imageLink">
<button mat-button fxFill (click)="clearImage()" matTooltip="{{resources.clear}}" matTooltipPosition="above"><i class="fa icon-trash"></i></button>
</div>
<div *ngIf="showIcons">
<br/>
<div *ngFor="let group of iconsGroups">
<div fxLayout="row" fxFill>
<div *ngFor="let icon of group.icons" (click)="setMarkerType(icon)" class="cursor-pointer text-center" fxFlex="{{100/iconsGroups.length}}" angulartics2On="click" angularticsCategory="Icons" angularticsAction="Select {{icon}}">
<i class="fa icon-{{icon}} fa-lg"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div mat-dialog-actions>
<div fxFlex>
<button mat-button type="button" matDialogClose (click)="remove()" matTooltip="{{resources.deletePoi}}" matTooltipPosition="above" fxFill><i class="fa icon-trash"></i></button>
</div>
<div fxFlex>
<button mat-button type="button" (click)="showIcons = !showIcons" matTooltip="{{resources.selectIcon}}" matTooltipPosition="above" angulartics2On="click" angularticsCategory="Icons" angularticsAction="Toggle select icon" fxFill><i class="fa icon-{{markerType}}"></i></button>
</div>
<div fxFlex>
<button mat-button type="button" matDialogClose (click)="uploadPoint()" matTooltip="{{resources.uploadPoint}}" matTooltipPosition="above" angulartics2On="click" angularticsCategory="OSM" angularticsAction="Open upload point dialog" fxFill><i class="fa icon-cloud-upload"></i></button>
</div>
<div fxFlex>
<button mat-button type="button" matDialogClose (click)="save()" matTooltip="{{resources.save}}" matTooltipPosition="above" fxFill><i class="fa icon-check"></i></button>
<div flexLayout="row" *ngIf="showCoordinates">
<coordinates [latlng]="marker.latlng"></coordinates>
</div>
</div>
</div>
<div mat-dialog-actions>
<div fxFlex>
<button mat-button type="button" matDialogClose (click)="remove()" matTooltip="{{resources.deletePoi}}" matTooltipPosition="above" fxFill><i class="fa icon-trash"></i></button>
</div>
<div fxFlex>
<button mat-button type="button" (click)="showIcons = !showIcons" matTooltip="{{resources.selectIcon}}" matTooltipPosition="above" angulartics2On="click" angularticsCategory="Icons" angularticsAction="Toggle select icon" fxFill><i class="fa icon-{{markerType}}"></i></button>
</div>
<div fxFlex>
<button mat-button type="button" matDialogClose (click)="uploadPoint()" matTooltip="{{resources.uploadPoint}}" matTooltipPosition="above" angulartics2On="click" angularticsCategory="OSM" angularticsAction="Open upload point dialog" fxFill><i class="fa icon-cloud-upload"></i></button>
</div>
<div fxFlex>
<button mat-button type="button" (click)="toggleCoordinates()" matTooltip="{{resources.showCoordinates}}" matTooltipPosition="above" fxFill><i class="fa icon-globe"></i></button>
</div>
<div fxFlex>
<button mat-button type="button" matDialogClose (click)="save()" matTooltip="{{resources.save}}" matTooltipPosition="above" fxFill><i class="fa icon-check"></i></button>
</div>
</div>
</div>
6 changes: 5 additions & 1 deletion IsraelHiking.Web/sources/application/components/dialogs/private-poi-edit-dialog.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export class PrivatePoiEditDialogComponent extends BaseMapComponent implements A
public imageLink: LinkData;

public showIcons: boolean;
public showCoordinates: boolean;
public title: string;
public markerType: string;
public description: string;
Expand All @@ -44,6 +45,7 @@ export class PrivatePoiEditDialogComponent extends BaseMapComponent implements A
private readonly ngRedux: NgRedux<ApplicationState>) {
super(resources);
this.showIcons = false;
this.showCoordinates = false;
this.iconsGroups = [];
let icons = [
"star", "arrow-left", "arrow-right", "tint",
Expand All @@ -66,7 +68,10 @@ export class PrivatePoiEditDialogComponent extends BaseMapComponent implements A
// this is to trigger changes otherwise there's an error: Expression has changed after it was checked
this.focusTitle();
}, 25);
}

public toggleCoordinates() {
this.showCoordinates = !this.showCoordinates;
}

private focusTitle() {
Expand All @@ -91,7 +96,6 @@ export class PrivatePoiEditDialogComponent extends BaseMapComponent implements A
}

public save = () => {

let updatedMarker = {
title: this.title,
description: this.description,
Expand Down
2 changes: 1 addition & 1 deletion IsraelHiking.Web/sources/application/components/osm-user.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

<div class="side-control" *ngIf="isLoggedIn()">
<div class="control-container">
<button mat-button class="pull-right" (click)="logout()" matTooltip="{{resources.logout}}" matTooltipPosition="below" angulartics2On="click" angularticsCategory="OSM" angularticsAction="OSM logout"><i class="fa icon-sign-out"></i></button>
<button mat-button class="pull-right" (click)="logout()" matTooltip="{{resources.logout}}" matTooltipPosition="below" angulartics2On="click" angularticsCategory="OSM" angularticsAction="OSM logout"><i class="fa fa-lg icon-sign-out"></i></button>
<div class="pull-right">
<div class="control-container-item gutters cursor-pointer" [matMenuTriggerFor]="appMenu" matTooltip="{{resources.myProfile}}">
<div class="table-cell button-height">
Expand Down
2 changes: 0 additions & 2 deletions IsraelHiking.Web/sources/application/models/state/application-state.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,6 @@ import {
UserState
} from "../models";

// HM TODO: add version?

export interface ApplicationState {
configuration: Configuration;
location: Location;
Expand Down
1 change: 1 addition & 0 deletions IsraelHiking.Web/sources/application/services/file.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,7 @@ export class FileService {
this.nonAngularObjectsFactory.saveAs(blob, fileName);
resolve(false);
}
// HM TODO: remove this?
// } else if (L.Browser.mobile) {
// let reader = new FileReader();
// reader.onload = () => {
Expand Down
13 changes: 0 additions & 13 deletions IsraelHiking.Web/sources/application/services/image-gallery.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,19 +22,6 @@ export class ImageGalleryService {

public setGalleryComponent(galleryComponent: NgxImageGalleryComponent) {
this.galleryComponent = galleryComponent;
galleryComponent.onOpen.subscribe(() => {
// HM TODO: make sure this is working as expected
// this.mapService.map.dragging.disable();
// this.mapService.map.scrollWheelZoom.disable();
// this.mapService.map.touchZoom.disable();
// this.mapService.map.boxZoom.disable();
});
galleryComponent.onClose.subscribe(() => {
// this.mapService.map.dragging.enable();
// this.mapService.map.scrollWheelZoom.enable();
// this.mapService.map.touchZoom.enable();
// this.mapService.map.boxZoom.enable();
});
}

public setImages(urls: string[]) {
Expand Down

0 comments on commit dd78814

Please sign in to comment.