mirror of
https://gitlab.com/openstapps/openstapps.git
synced 2026-01-21 17:12:43 +00:00
134 lines
3.7 KiB
HTML
134 lines
3.7 KiB
HTML
<!--
|
|
~ Copyright (C) 2022 StApps
|
|
~ This program is free software: you can redistribute it and/or modify it
|
|
~ under the terms of the GNU General Public License as published by the Free
|
|
~ Software Foundation, version 3.
|
|
~
|
|
~ This program is distributed in the hope that it will be useful, but WITHOUT
|
|
~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
|
|
~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public Licens for
|
|
~ more details.
|
|
~
|
|
~ You should have received a copy of the GNU General Public License along with
|
|
~ this program. If not, see <https://www.gnu.org/licenses/>.
|
|
-->
|
|
|
|
<stapps-context contentId="map"></stapps-context>
|
|
|
|
<ion-header class="ion-no-border" translucent="true">
|
|
<ion-toolbar>
|
|
<ion-buttons slot="start">
|
|
<ion-back-button
|
|
*ngIf="items.length === 1"
|
|
default-href="/"
|
|
(click)="resetView()"
|
|
></ion-back-button>
|
|
<ion-menu-button></ion-menu-button>
|
|
</ion-buttons>
|
|
<ion-searchbar
|
|
(keyup)="searchKeyUp($event)"
|
|
[(ngModel)]="queryText"
|
|
(ionClear)="searchStringChanged()"
|
|
placeholder="{{ 'map.page.search_bar.placeholder' | translate }}"
|
|
showClearButton="always"
|
|
>
|
|
</ion-searchbar>
|
|
<ion-buttons slot="end">
|
|
<ion-menu-button menu="context" auto-hide="false">
|
|
<ion-icon name="filter"></ion-icon>
|
|
</ion-menu-button>
|
|
</ion-buttons>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
|
|
<ion-content fullscreen id="map">
|
|
<div
|
|
class="map-container"
|
|
#mapContainer
|
|
leaflet
|
|
(leafletMapReady)="onMapReady($event)"
|
|
(leafletClick)="resetView()"
|
|
[leafletOptions]="options"
|
|
[leafletMarkerCluster]="markerClusterData"
|
|
[leafletMarkerClusterOptions]="markerClusterOptions"
|
|
>
|
|
<div *ngIf="position" [leafletLayer]="positionMarker"></div>
|
|
</div>
|
|
<div class="floating-content">
|
|
<div class="map-buttons above">
|
|
<ion-button
|
|
*ngIf="items.length > 1"
|
|
color="light"
|
|
shape="round"
|
|
size="small"
|
|
(click)="mapListModal.present()"
|
|
>
|
|
<ion-icon name="list"></ion-icon> {{
|
|
'map.page.buttons.SHOW_LIST' | translate
|
|
}}
|
|
</ion-button>
|
|
<ion-button
|
|
[disabled]="position === undefined"
|
|
color="light"
|
|
shape="round"
|
|
size="small"
|
|
(click)="onPositionClick()"
|
|
>
|
|
<ion-icon
|
|
*ngIf="position !== null; else questionIcon"
|
|
name="locate"
|
|
></ion-icon>
|
|
<ng-template #questionIcon>
|
|
<ion-icon name="help-circle-outline"></ion-icon>
|
|
</ng-template>
|
|
</ion-button>
|
|
</div>
|
|
<stapps-map-item
|
|
*ngIf="items.length === 1"
|
|
[item]="items[0]"
|
|
></stapps-map-item>
|
|
</div>
|
|
<div class="map-buttons floating-buttons">
|
|
<ion-button
|
|
*ngIf="items.length > 1"
|
|
color="light"
|
|
shape="round"
|
|
size="small"
|
|
(click)="mapListModal.present()"
|
|
>
|
|
<ion-icon name="list"></ion-icon> {{
|
|
'map.page.buttons.SHOW_LIST' | translate
|
|
}}
|
|
</ion-button>
|
|
<ion-button
|
|
[disabled]="position === undefined"
|
|
color="light"
|
|
shape="round"
|
|
size="small"
|
|
(click)="onPositionClick()"
|
|
>
|
|
<ion-icon
|
|
*ngIf="position !== null; else questionIcon"
|
|
name="locate"
|
|
></ion-icon>
|
|
<ng-template #questionIcon>
|
|
<ion-icon name="help-circle-outline"></ion-icon>
|
|
</ng-template>
|
|
</ion-button>
|
|
</div>
|
|
|
|
<ion-modal
|
|
[swipeToClose]="true"
|
|
[presentingElement]="routerOutlet.nativeEl"
|
|
#mapListModal
|
|
>
|
|
<ng-template>
|
|
<map-list-modal
|
|
style="height: 100%"
|
|
[filterQuery]="filterQuery"
|
|
[queryText]="queryText"
|
|
></map-list-modal>
|
|
</ng-template>
|
|
</ion-modal>
|
|
</ion-content>
|