Add a search modal, fix for #52
This commit is contained in:
parent
b5e54b0b90
commit
944b9842cb
11
src/App.vue
11
src/App.vue
@ -29,10 +29,13 @@
|
||||
<v-icon>more_vert</v-icon>
|
||||
</v-btn>
|
||||
<v-list>
|
||||
<v-list-tile @click="isSearchModalShown = true" v-if="isMapLoaded">
|
||||
<v-list-tile-title>{{ $t("menu.search") }}</v-list-tile-title>
|
||||
</v-list-tile>
|
||||
<v-list-tile @click="exportGPX" v-if="isExportGPXMenuEntryVisible">
|
||||
<v-list-tile-title>{{ $t("menu.exportGPX") }}</v-list-tile-title>
|
||||
</v-list-tile>
|
||||
<v-list-tile @click="isShareMapViewModalShown = true" v-if="isShareMapViewMenuEntryVisible">
|
||||
<v-list-tile @click="isShareMapViewModalShown = true" v-if="isMapLoaded">
|
||||
<v-list-tile-title>{{ $t("menu.shareMapView") }}</v-list-tile-title>
|
||||
</v-list-tile>
|
||||
<v-list-tile @click="goToAbout">
|
||||
@ -57,6 +60,7 @@
|
||||
<ReportErrorModal v-model="hasReportError"></ReportErrorModal>
|
||||
<ShareMapViewModal v-model="isShareMapViewModalShown"></ShareMapViewModal>
|
||||
<ReportIssueModal v-model="isReportIssueModalShown"></ReportIssueModal>
|
||||
<SearchModal v-model="isSearchModalShown"></SearchModal>
|
||||
<router-view></router-view>
|
||||
</v-content>
|
||||
</v-app>
|
||||
@ -69,12 +73,14 @@ import { DELAY_BETWEEN_API_BATCH_REQUESTS } from '@/constants';
|
||||
|
||||
import ReportErrorModal from '@/components/ReportErrorModal.vue';
|
||||
import ReportIssueModal from '@/components/ReportIssueModal.vue';
|
||||
import SearchModal from '@/components/SearchModal.vue';
|
||||
import ShareMapViewModal from '@/components/ShareMapViewModal.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ReportErrorModal,
|
||||
ReportIssueModal,
|
||||
SearchModal,
|
||||
ShareMapViewModal,
|
||||
},
|
||||
computed: {
|
||||
@ -84,7 +90,7 @@ export default {
|
||||
isExportGPXMenuEntryVisible() {
|
||||
return this.$store.state.location.gpx.length > 0;
|
||||
},
|
||||
isShareMapViewMenuEntryVisible() {
|
||||
isMapLoaded() {
|
||||
return this.$store.state.map.center.every(item => item !== null);
|
||||
},
|
||||
unsentReportsLength() {
|
||||
@ -95,6 +101,7 @@ export default {
|
||||
return {
|
||||
hasReportError: false,
|
||||
isReportIssueModalShown: false,
|
||||
isSearchModalShown: false,
|
||||
isSendingReports: false,
|
||||
isShareMapViewModalShown: false,
|
||||
title: "Cycl'Assist",
|
||||
|
@ -13,6 +13,7 @@
|
||||
append-icon="my_location"
|
||||
:rules="rules"
|
||||
v-on:input="onInputHandler"
|
||||
:menu-props="{ auto: true, overflowY: true }"
|
||||
></v-combobox>
|
||||
</template>
|
||||
|
||||
@ -21,9 +22,11 @@ import { GEOCODING_API_ENDPOINT } from '@/constants';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
clearOnSelection: Boolean,
|
||||
label: String,
|
||||
hint: String,
|
||||
onInput: Function,
|
||||
value: Boolean,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -83,6 +86,11 @@ export default {
|
||||
label: APIItem.properties.label,
|
||||
};
|
||||
this.onInput(this.selectedItem);
|
||||
if (this.clearOnSelection) {
|
||||
this.$nextTick(() => {
|
||||
this.select = null;
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
|
75
src/components/SearchModal.vue
Normal file
75
src/components/SearchModal.vue
Normal file
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<Modal v-model="isActive">
|
||||
<v-card>
|
||||
<v-card-title class="headline">{{ $t('searchModal.searchModal') }}</v-card-title>
|
||||
|
||||
<v-card-text>
|
||||
<AddressInput
|
||||
:label="inputLabel"
|
||||
:onInput="onManualLocationPicker"
|
||||
:clearOnSelection="true"
|
||||
></AddressInput>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<v-btn
|
||||
color="green darken-1"
|
||||
@click="isActive = false"
|
||||
dark
|
||||
large
|
||||
role="button"
|
||||
>
|
||||
{{ $t('misc.ok') }}
|
||||
</v-btn>
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DEFAULT_ZOOM } from '@/constants';
|
||||
import { capitalize } from '@/tools';
|
||||
|
||||
import AddressInput from '@/components/AddressInput.vue';
|
||||
import Modal from '@/components/Modal.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AddressInput,
|
||||
Modal,
|
||||
},
|
||||
computed: {
|
||||
inputLabel() {
|
||||
return capitalize(this.$t('locationPicker.pickALocationManually'));
|
||||
},
|
||||
isActive: {
|
||||
get() {
|
||||
return this.value;
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('input', val);
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onManualLocationPicker(value) {
|
||||
this.isActive = false;
|
||||
this.$router.push({
|
||||
name: 'SharedMap',
|
||||
params: {
|
||||
lat: value.latlng.lat,
|
||||
lng: value.latlng.lng,
|
||||
zoom: DEFAULT_ZOOM,
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
props: {
|
||||
value: Boolean,
|
||||
},
|
||||
};
|
||||
</script>
|
@ -52,6 +52,7 @@
|
||||
"Settings": "Settings",
|
||||
"exportGPX": "Export GPX",
|
||||
"reportIssue": "Report an issue",
|
||||
"search": "Search",
|
||||
"shareMapView": "Share map view"
|
||||
},
|
||||
"misc": {
|
||||
@ -111,6 +112,9 @@
|
||||
"pothole": "Pothole",
|
||||
"potholeDescription": "A pothole in the ground."
|
||||
},
|
||||
"searchModal": {
|
||||
"searchModal": "Search a location"
|
||||
},
|
||||
"settings": {
|
||||
"autorotate": "Autorotate (current direction up)",
|
||||
"customTileServer": "Custom tile server",
|
||||
|
@ -112,3 +112,7 @@ export function storageAvailable(type) {
|
||||
&& storage.length !== 0;
|
||||
}
|
||||
}
|
||||
|
||||
export function capitalize(string) {
|
||||
return string.charAt(0).toUpperCase() + string.slice(1);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user