edward
/
owl-map
1
1
Fork 1
Code Issues 8 Pull Requests Packages Projects Releases Wiki Activity

Various improvements

This commit is contained in:
Edward Betts 2024-05-04 11:13:49 +03:00
parent d7dd9ec17c
commit d64774a70e
1 changed files with 105 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
frontend/App.vue
View File

@ -276,7 +276,7 @@
:href="hit_url(hit)" :href="hit_url(hit)"
@mouseenter="show_hit_on_map(hit)" @mouseenter="show_hit_on_map(hit)"
@click.prevent="visit(hit)"> @click.prevent="visit(hit)">
{{ hit.name }} ({{ hit.label }}) {{ hit.name }} <span class="badge bg-info">{{ hit.label }}</span>
</a> </a>
</div> </div>
<div class="alert alert-info mt-2" v-if="hits.length"> <div class="alert alert-info mt-2" v-if="hits.length">
@ -368,26 +368,39 @@
<div class="card m-2" v-if="!view_edits && isa_list.length"> <div class="card m-2" v-if="!view_edits && isa_list.length">
<div class="card-body"> <div class="card-body">
<div class="h5 card-title">Map key</div> <div class="h5 card-title">Map key</div>
<ui class="list-group"> <ul class="list-group">
<li class="list-group-item"> <li class="list-group-item">
<i style="background: #a23337; color: white" class="p-1 fa fa-wikidata"></i> <i style="background: #a23337; color: white" class="p-1 fa fa-chain-broken"></i>
Wikidata item without OSM link Wikidata item without OSM link
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
<i style="background: #6dae40; color: white" class="p-1 fa fa-wikidata"></i> <i style="background: #6dae40; color: white" class="p-1 fa fa-link"></i>
Wikidata item with OSM link Wikidata item with OSM link
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
<i style="background: #f5bb39; color: white" class="p-1 fa fa-map"></i> <i style="background: #f5bb39; color: white" class="p-1 fa fa-map"></i>
Linked OSM object Linked OSM object
</li> </li>
</ui> </ul>
</div> </div>
</div> </div>
<div class="m-2" v-if="!view_edits && isa_list.length">
<ul class="nav nav-pills" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link" id="filter-tab" role="tab" @click.stop="tab='filters'" :class="{ active: tab == 'filters' }">Map filters</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="item-list-tab" role="tab" @click.stop="tab='items'" :class="{ active: tab == 'items' }">Items</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane active" id="filters" v-if="tab=='filters'">
<div class="card my-2">
<div class="card m-2" v-if="!view_edits && isa_list.length">
<div class="card-body"> <div class="card-body">
<div class="h5 card-title">OSM/Wikidata link status</div> <div class="h5 card-title">OSM/Wikidata link status</div>
<div class="list-group"> <div class="list-group">
@ -409,7 +422,7 @@
</div> </div>
</div> </div>
<div class="card m-2" v-if="!view_edits && isa_list.length" id="isa-card"> <div class="card my-2" id="isa-card">
<div class="card-body"> <div class="card-body">
<div class="h5 card-title">item types</div> <div class="h5 card-title">item types</div>
<div> <div>
@ -430,6 +443,46 @@
</div> </div>
</div> </div>
</div>
<div class="tab-pane active" id="items" v-if="tab=='items'">
<ul class="list-group">
<li v-for="(item, qid) in items" class="list-group-item" @click.stop="open_item(qid)"
:class="{active: highlight_item==item}"
@mouseover="add_highlight(qid)" @mouseleave="drop_highlight(qid)">
<div v-if="item.wikidata">
<div>
<span class="fw-bold">
{{ item.wikidata.label }}
</span>
({{ qid }})
<span class="badge bg-success" v-if="item.osm">Linked</span>
<span class="badge bg-danger" v-else>Not linked</span>
</div>
<div>
{{ item.wikidata.description }}
</div>
<div>
<div class="fw-bold">item type</div>
<div v-for="isa in item.wikidata.isa_list">
{{ isa.label }} ({{ isa.qid }})
</div>
</div>
</div>
<span v-else>
{{ qid }}
</span>
</li>
</ul>
</div>
</div>
</div>
</div> </div>
<div class="card m-2" id="detail-card" v-if="current_item"> <div class="card m-2" id="detail-card" v-if="current_item">
@ -485,11 +538,6 @@
</span> </span>
</span> </span>
<span v-if="wd_item.street_address.length">
<br><strong>street address</strong>
<br>{{wd_item.street_address[0]}}
</span>
<span v-if="wd_item.inception.length"> <span v-if="wd_item.inception.length">
<br><strong>inception</strong> <br><strong>inception</strong>
<br>{{wd_item.inception.join('; ')}} <br>{{wd_item.inception.join('; ')}}
@ -533,7 +581,6 @@
</div> </div>
</div> </div>
<span v-if="wd_item.image_list.length"> <span v-if="wd_item.image_list.length">
<strong>Image from Wikidata</strong><br/> <strong>Image from Wikidata</strong><br/>
<a href="#" data-bs-toggle="modal" data-bs-target="#imageModal"> <a href="#" data-bs-toggle="modal" data-bs-target="#imageModal">
@ -554,7 +601,28 @@
</a> </a>
</span> </span>
</div></div> </div>
</div>
<div class="row">
<div class="col-xl-12">
<span v-if="Object.keys(wd_item.identifiers).length !== 0">
<strong>identifiers</strong>
<div v-for="(values, label) in wd_item.identifiers">
{{ label }}: {{ values.join("; ") }}
</div>
</span>
<span v-if="wd_item.street_address.length">
<strong>street address</strong>
<br>{{wd_item.street_address[0]}}
</span>
</div>
</div>
</div> </div>
<div class="form-check form-switch"> <div class="form-check form-switch">
@ -739,27 +807,36 @@
</template> </template>
<script> <script>
import 'bootstrap';
import { Modal } from 'bootstrap';
import 'bootstrap/dist/css/bootstrap.css';
import L from "leaflet"; import L from "leaflet";
import 'leaflet/dist/leaflet.css';
import { ExtraMarkers } from "leaflet-extra-markers"; import { ExtraMarkers } from "leaflet-extra-markers";
import 'leaflet-extra-markers/dist/css/leaflet.extra-markers.min.css';
import axios from "redaxios"; import axios from "redaxios";
import {unref, toRaw} from 'vue'; import { toRaw } from 'vue';
import 'fork-awesome/css/fork-awesome.css';
L.Icon.Default.imagePath = "/static/leaflet/images/";
var redMarker = ExtraMarkers.icon({ var redMarker = ExtraMarkers.icon({
icon: "fa-wikidata", icon: "fa-chain-broken",
markerColor: "red", markerColor: "red",
shape: "circle", shape: "circle",
prefix: "fa", prefix: "fa",
}); });
var greenMarker = ExtraMarkers.icon({ var greenMarker = ExtraMarkers.icon({
icon: "fa-wikidata", icon: "fa-link",
markerColor: "green-light", markerColor: "green-light",
shape: "circle", shape: "circle",
prefix: "fa", prefix: "fa",
}); });
var greenDarkMarker = ExtraMarkers.icon({ var greenDarkMarker = ExtraMarkers.icon({
icon: "fa-wikidata", icon: "fa-link",
markerColor: "green-dark", markerColor: "green-dark",
shape: "circle", shape: "circle",
prefix: "fa", prefix: "fa",
@ -808,6 +885,7 @@ export default {
data() { data() {
return { return {
api_base_url: "https://map.osm.wikidata.link", api_base_url: "https://map.osm.wikidata.link",
// api_base_url: "http://localhost:5000",
tag_or_key_list: [], tag_or_key_list: [],
search_text: "", search_text: "",
load_button_pressed: false, load_button_pressed: false,
@ -864,6 +942,8 @@ export default {
map_update_number: 0, map_update_number: 0,
api_call_error_message: undefined, api_call_error_message: undefined,
api_call_error_traceback: undefined, api_call_error_traceback: undefined,
tab: "filters",
highlight_item: undefined,
}; };
}, },
computed: { computed: {
@ -1084,7 +1164,7 @@ export default {
var reply = error.data; var reply = error.data;
this.api_call_error_message = reply.error; this.api_call_error_message = reply.error;
this.api_call_error_traceback = reply.traceback; this.api_call_error_traceback = reply.traceback;
var error_modal = new bootstrap.Modal(this.$refs.error_modal); var error_modal = new Modal(this.$refs.error_modal);
this.$refs.error_modal.addEventListener('hidden.bs.modal', function (event) { this.$refs.error_modal.addEventListener('hidden.bs.modal', function (event) {
this.api_call_error_message = undefined; this.api_call_error_message = undefined;
@ -1336,6 +1416,7 @@ export default {
}); });
} }
this.add_hover_circles(item); this.add_hover_circles(item);
this.highlight_item = item;
}, },
drop_highlight(qid) { drop_highlight(qid) {
var item = this.items[qid]; var item = this.items[qid];
@ -1349,6 +1430,7 @@ export default {
}); });
} }
this.drop_hover_circles(); this.drop_hover_circles();
this.highlight_item = undefined;
}, },
map_moved() { map_moved() {
if (this.mode == "search") return; if (this.mode == "search") return;
@ -1374,7 +1456,7 @@ export default {
}, },
update_map_path() { update_map_path() {
var state = this.current_state(); var state = this.current_state();
history.replaceState(state, '', this.build_map_path()); // history.replaceState(state, '', this.build_map_path());
}, },
open_item(qid, marker) { open_item(qid, marker) {
this.close_edit_list(); this.close_edit_list();
@ -1834,6 +1916,8 @@ export default {
}); });
osm.addTo(map); osm.addTo(map);
this.test_api_error();
var bounds; var bounds;
if (this.startRadius) { if (this.startRadius) {
var bounds = L.latLng(this.center).toBounds(this.startRadius * 2000); var bounds = L.latLng(this.center).toBounds(this.startRadius * 2000);
@ -1859,6 +1943,7 @@ export default {
} }
window.onpopstate = this.onpopstate; window.onpopstate = this.onpopstate;
}); });
}, },