Skip to content
Snippets Groups Projects
Commit 2b6181a5 authored by Simon Hager's avatar Simon Hager
Browse files

add map

parent 7bd20bd6
No related branches found
No related tags found
No related merge requests found
Pipeline #273621 passed with stage
in 1 minute and 11 seconds
Hide whitespace changes
Inline Side-by-side
docker-compose.yml
+ 7
− 0
View file @ 2b6181a5
......@@ -35,6 +35,13 @@ services:
restart_policy:
condition: "on-failure"
backend:
image: traefik/whoami
command:
# It tells whoami to start listening on 2001 instead of 80
- --port=2001
- --name=iamfoo
# backend:
# image: $CONTAINER_REGISTRY_PATH/backend:latest
# networks:
......
frontend/package-lock.json
+ 36
− 0
View file @ 2b6181a5
......@@ -9,6 +9,8 @@
"version": "0.0.0",
"dependencies": {
"@vueuse/core": "^10.1.2",
"core-js": "^3.8.3",
"leaflet": "^1.9.3",
"vue": "^3.2.47",
"vuetify": "^3.2.3"
},
......@@ -18,6 +20,7 @@
"@tsconfig/node18": "^2.0.0",
"@types/node": "^18.16.3",
"@vitejs/plugin-vue": "^4.2.1",
"@vue-leaflet/vue-leaflet": "^0.9.0",
"@vue/eslint-config-prettier": "^7.1.0",
"@vue/eslint-config-typescript": "^11.0.3",
"@vue/tsconfig": "^0.3.2",
......@@ -848,6 +851,24 @@
"typescript": "*"
}
},
"node_modules/@vue-leaflet/vue-leaflet": {
"version": "0.9.0",
"resolved": "https://registry.npmjs.org/@vue-leaflet/vue-leaflet/-/vue-leaflet-0.9.0.tgz",
"integrity": "sha512-B5sxleSIFP0RK+7418BQirZ7oXa0t2dZrwfGI/0ABgaFLCWmHWP26w4soqrF5MlpThvhieAIUVIVuTdgXUenmA==",
"dev": true,
"dependencies": {
"vue": "^3.2.25"
},
"peerDependencies": {
"@types/leaflet": "^1.5.7",
"leaflet": "^1.6.0"
},
"peerDependenciesMeta": {
"@types/leaflet": {
"optional": true
}
}
},
"node_modules/@vue/compiler-core": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.1.tgz",
......@@ -1274,6 +1295,16 @@
"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
"dev": true
},
"node_modules/core-js": {
"version": "3.30.2",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.30.2.tgz",
"integrity": "sha512-uBJiDmwqsbJCWHAwjrx3cvjbMXP7xD72Dmsn5LOJpiRmE3WbBbN5rCqQ2Qh6Ek6/eOrjlWngEynBWo4VxerQhg==",
"hasInstallScript": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/core-js"
}
},
"node_modules/cross-spawn": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
......@@ -2520,6 +2551,11 @@
"integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
"dev": true
},
"node_modules/leaflet": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.3.tgz",
"integrity": "sha512-iB2cR9vAkDOu5l3HAay2obcUHZ7xwUBBjph8+PGtmW/2lYhbLizWtG7nTeYht36WfOslixQF9D/uSIzhZgGMfQ=="
},
"node_modules/levn": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
......
frontend/package.json
+ 3
− 1
View file @ 2b6181a5
......@@ -14,7 +14,8 @@
"dependencies": {
"@vueuse/core": "^10.1.2",
"vue": "^3.2.47",
"vuetify": "^3.2.3"
"vuetify": "^3.2.3",
"leaflet": "^1.9.3"
},
"devDependencies": {
"@mdi/font": "^7.2.96",
......@@ -22,6 +23,7 @@
"@tsconfig/node18": "^2.0.0",
"@types/node": "^18.16.3",
"@vitejs/plugin-vue": "^4.2.1",
"@vue-leaflet/vue-leaflet": "^0.9.0",
"@vue/eslint-config-prettier": "^7.1.0",
"@vue/eslint-config-typescript": "^11.0.3",
"@vue/tsconfig": "^0.3.2",
......
frontend/src/App.vue
+ 99
− 92
View file @ 2b6181a5
<template>
<v-app>
<v-app-bar>OSM Place Search Logger</v-app-bar>
<v-main>
<v-card
class="pa-4"
flat
height="300px"
>
<div>
<v-text-field ref="searchField"
hide-details
single-line
variant="outlined"
v-model="search"
label="Search"
v-on:keyup.enter="onEnter"
></v-text-field>
<v-btn icon @click="onSearchClick">
<v-icon>mdi-magnify</v-icon>
</v-btn>
</div>
</v-card>
<v-data-table
:headers="headers"
:items="listItems"
:sort-by="[{ key: 'category', order: 'asc' }]"
class="elevation-1"
>
<template v-slot:top>
<v-toolbar
flat
>
<v-toolbar-title>Results</v-toolbar-title>
<v-divider
class="mx-4"
inset
vertical
></v-divider>
<v-spacer></v-spacer>
<v-dialog v-model="dialogGoal" max-width="500px">
<v-card>
<v-card-title class="text-h5">Are you sure you want to select this item as your search goal?</v-card-title>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue-darken-1" variant="text" @click="closeGoal">Cancel</v-btn>
<v-btn color="blue-darken-1" variant="text" @click="goalItemConfirm">OK</v-btn>
<v-spacer></v-spacer>
</v-card-actions>
<v-app-bar>OSM Place Search Logger</v-app-bar>
<v-main>
<v-row>
<v-col>
<v-card class="pa-4" flat height="300px">
<v-toolbar dense floating flat>
<v-text-field
ref="searchField"
hide-details
single-line
variant="outlined"
v-model="search"
label="Search"
v-on:keyup.enter="onEnter"
clearable
></v-text-field>
<v-btn icon @click="onSearchClick">
<v-icon>mdi-magnify</v-icon>
</v-btn>
</v-toolbar>Diese Webapplikation speichert Ihre Such-Anfragen an Nominatim in entpersonalisierter
Form und rein zu Lehr- und Forschungszwecken sowie zur Verbesserung der Suche in
OpenStreetMap-Daten.
</v-card>
</v-dialog>
</v-toolbar>
</template>
<template v-slot:item.actions="{ item }">
<v-icon
size="small"
class="me-2"
@click="dialogGoal = true"
>
mdi-pencil
</v-icon>
</template>
</v-data-table>
</v-main>
<v-footer border class="bg-grey-lighten-1"></v-footer>
<v-data-table
:headers="headers"
:items="listItems"
:sort-by="[{ key: 'category', order: 'asc' }]"
class="elevation-1"
>
<template v-slot:top>
<v-toolbar flat>
<v-toolbar-title>Results</v-toolbar-title>
<v-divider class="mx-4" inset vertical></v-divider>
<v-spacer></v-spacer>
<v-dialog v-model="dialogGoal" max-width="500px">
<v-card>
<v-card-title class="text-h5"
>Are you sure you want to select this item as your search goal?</v-card-title
>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue-darken-1" variant="text" @click="closeGoal">Cancel</v-btn>
<v-btn color="blue-darken-1" variant="text" @click="goalItemConfirm"
>OK</v-btn
>
<v-spacer></v-spacer>
</v-card-actions>
</v-card>
</v-dialog>
</v-toolbar>
</template>
<template v-slot:item.actions="{ item }">
<v-icon size="small" class="me-2" @click="dialogGoal = true"> mdi-pencil </v-icon>
</template>
</v-data-table>
</v-col>
<v-col>
<leaflet-map></leaflet-map>
</v-col>
</v-row>
</v-main>
<v-footer border class="bg-grey-lighten-1"
>by Institut für Software OST // Data © ODbL | Map © OpenStreetMap contributors</v-footer
>
</v-app>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
import { ref, computed } from 'vue'
import type GeoJsonSearchResult from '@/types/geojson-search-result'
import { VDataTable } from 'vuetify/labs/VDataTable'
import LeafletMap from './LeafletMap.vue';
const search = ref<string>('')
const searchField = ref<HTMLElement | null>(null)
crypto.randomUUID()
const resultList = ref<GeoJsonSearchResult>()
const dialogGoal = ref(false)
const baseUrl = "https://nominatim.openstreetmap.org/search.php"
const baseUrl = 'https://nominatim.openstreetmap.org/search.php'
const headers = [
{
title: 'Name',
align: 'start',
sortable: false,
key: 'title',
},
{ title: 'Category', key: 'category' },
/*{ title: 'Fat (g)', key: 'fat' },
{
title: 'Name',
align: 'start',
sortable: false,
key: 'title'
},
{ title: 'Category', key: 'category', sortable: false },
/*{ title: 'Fat (g)', key: 'fat' },
{ title: 'Carbs (g)', key: 'carbs' },
{ title: 'Protein (g)', key: 'protein' },*/
{ title: 'Actions', key: 'actions', sortable: false },
]
{ title: 'Actions', key: 'actions', sortable: false }
]
function onEnter(){
searchField.value?.blur();
function onEnter() {
searchField.value?.blur()
onSearchClick()
}
function onSearchClick(){
function onSearchClick() {
getResults()
}
function goalItemConfirm () {
console.log("session finished")
// TODO send fetch end session
function goalItemConfirm() {
console.log('session finished')
// TODO send fetch end session
closeGoal()
closeGoal()
}
function closeGoal () {
dialogGoal.value = false
}
function closeGoal() {
dialogGoal.value = false
}
function getResults(){
function getResults() {
const query = getQueryString()
const requestString = `${baseUrl}?q=${query}&format=geojson&limit=20`
fetch(requestString, { method: 'GET'}).then((res) => res.json())
.then((json) => (resultList.value = json)).then(() => console.log(resultList.value?.features))
fetch(requestString, { method: 'GET' })
.then((res) => res.json())
.then((json) => (resultList.value = json))
.then(() => console.log(resultList.value?.features))
//.catch((err) => (error.value = err))
}
function getQueryString(){
function getQueryString() {
const encodedValue = encodeURIComponent(search.value)
return encodedValue.replaceAll('%20', '+')
}
const listItems = computed(() => {
return resultList.value?.features.map(feature => {
return resultList.value?.features.map((feature) => {
return {
title:feature.properties.display_name,
title: feature.properties.display_name,
category: feature.properties.category
}
})
......
frontend/src/LeafletMap.vue 0 → 100644
+ 54
− 0
View file @ 2b6181a5
<template>
<div style="height: 600px; width: 100%" ref="root">
fdafsd
<l-map ref="map" v-model:zoom="zoom" :center="center" :use-global-leaflet="false">
<l-tile-layer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
layer-type="base"
name="OpenStreetMap"
></l-tile-layer>
<l-geo-json :geojson="geojson"></l-geo-json>
<l-control-attribution position="bottomright" :prefix="attribution"></l-control-attribution>
</l-map>
</div>
</template>
<script setup lang="ts">
import 'leaflet/dist/leaflet.css'
import { LMap, LTileLayer, LGeoJson, LControlAttribution } from '@vue-leaflet/vue-leaflet'
import { ref, watch } from 'vue'
const zoom = ref(2)
const center = ref([47.41322, -1.219482])
const geojson = ref(null)
const attribution = ref(
'Data &copy ' +
"<a href='http://openstreetmap.org/copyright'>OpenStreetMap</a> " +
"contributors <a href='https://opendatacommons.org/licenses/odbl/'>ODbL</a> | " +
"Map by <a href='https://sosm.ch/'>SOSM</a> | " +
"<a id='problem-attribution' " +
"href='http://www.openstreetmap.org/fixthemap?" +
"lat=47.41330&lon=8.65639&zoom=18'>Report a problem</a>"
)
const root = ref<HTMLElement | null>(null)
watch(zoom, () => {
updateProblemLink()
})
watch(center, () => {
updateProblemLink()
})
function updateProblemLink() {
const test = root.value
if (test === null) {
return
}
test.querySelector('#problem-attribution').href =
'http://www.openstreetmap.org/fixthemap?' +
`lat=${center.value[0]}&lon=${center.value[1]}` +
`&zoom=${zoom.value}`
}
</script>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment