Mercurial > gemma
annotate client/src/application/Topbar.vue @ 1119:6d4cc4389c8f store-refactoring
merged default into store-refactoring
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 06 Nov 2018 09:12:05 +0100 |
parents | 595654ad3f66 ef7c102497b8 |
children | d9e6a1f6f394 |
rev | line source |
---|---|
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
1 <template> |
668
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
2 <div class="topbar d-flex flex-row"> |
638
c2f040dba57f
feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents:
632
diff
changeset
|
3 <div @click="toggleSidebar"> |
888
2e2ac0b88af9
client: hide menu button and box for print
Bernhard Reiter <bernhard@intevation.de>
parents:
811
diff
changeset
|
4 <i class="ui-element menubutton d-print-none fa fa-bars"></i> |
621
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
5 </div> |
713
badbc0207418
feat: systeminformation feature added
Thomas Junk <thomas.junk@intevation.de>
parents:
668
diff
changeset
|
6 <div v-if="routeName == 'mainview'" :class="searchbarContainerStyle"> |
621
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
7 <div class="input-group-prepend shadow"> |
923
ec9c3a111bb7
Removed Search from print layout.
Sascha Wilde <wilde@intevation.de>
parents:
896
diff
changeset
|
8 <span @click="toggleSearchbar" class="ui-element input-group-text searchlabel d-print-none" for="search"> |
ec9c3a111bb7
Removed Search from print layout.
Sascha Wilde <wilde@intevation.de>
parents:
896
diff
changeset
|
9 <i class="fa fa-search d-print-none"></i> |
621
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
10 </span> |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
11 </div> |
794
afe62d1ce01c
fix: searchresults below searchbar
Thomas Junk <thomas.junk@intevation.de>
parents:
783
diff
changeset
|
12 <div class="searchgroup"> |
923
ec9c3a111bb7
Removed Search from print layout.
Sascha Wilde <wilde@intevation.de>
parents:
896
diff
changeset
|
13 <input @keyup.enter="takeFirstSearchresult" v-if="!searchbarCollapsed" id="search" v-model="searchQuery" type="text" class="form-control ui-element search searchbar d-print-none"> |
ec9c3a111bb7
Removed Search from print layout.
Sascha Wilde <wilde@intevation.de>
parents:
896
diff
changeset
|
14 <ul v-if="!searchbarCollapsed && searchResults !== null " class="list-group d-print-none"> |
794
afe62d1ce01c
fix: searchresults below searchbar
Thomas Junk <thomas.junk@intevation.de>
parents:
783
diff
changeset
|
15 <li v-for="entry of searchResults" :key="entry.name" class="list-group-item"> |
afe62d1ce01c
fix: searchresults below searchbar
Thomas Junk <thomas.junk@intevation.de>
parents:
783
diff
changeset
|
16 <a href="#" @click.prevent="moveToSearchResult(entry)">{{entry.name}}</a> |
afe62d1ce01c
fix: searchresults below searchbar
Thomas Junk <thomas.junk@intevation.de>
parents:
783
diff
changeset
|
17 </li> |
afe62d1ce01c
fix: searchresults below searchbar
Thomas Junk <thomas.junk@intevation.de>
parents:
783
diff
changeset
|
18 </ul> |
afe62d1ce01c
fix: searchresults below searchbar
Thomas Junk <thomas.junk@intevation.de>
parents:
783
diff
changeset
|
19 </div> |
621
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
20 </div> |
1044
f8a4ec146d47
fixed Vue reactivity issue (splitscreen button)
Markus Kottlaender <markus@intevation.de>
parents:
1043
diff
changeset
|
21 <div v-if="routeName == 'mainview' && Object.keys(currentProfile).length" class="splitbutton"> |
621
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
22 <i @click="splitScreen" class="ui-element splitscreen fa fa-window-restore shadow"></i> |
b17a4482d07d
feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
23 </div> |
668
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
24 <div class=""> |
713
badbc0207418
feat: systeminformation feature added
Thomas Junk <thomas.junk@intevation.de>
parents:
668
diff
changeset
|
25 <Layers v-if="routeName == 'mainview'"></Layers> |
668
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
26 </div> |
770
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
713
diff
changeset
|
27 <div class=""> |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
713
diff
changeset
|
28 <Identify v-if="routeName == 'mainview'"></Identify> |
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
713
diff
changeset
|
29 </div> |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
30 </div> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
31 </template> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
32 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
33 <style lang="scss"> |
794
afe62d1ce01c
fix: searchresults below searchbar
Thomas Junk <thomas.junk@intevation.de>
parents:
783
diff
changeset
|
34 .searchgroup { |
afe62d1ce01c
fix: searchresults below searchbar
Thomas Junk <thomas.junk@intevation.de>
parents:
783
diff
changeset
|
35 width: 90%; |
afe62d1ce01c
fix: searchresults below searchbar
Thomas Junk <thomas.junk@intevation.de>
parents:
783
diff
changeset
|
36 } |
668
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
37 .splitbutton { |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
38 height: $icon-height; |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
39 } |
781
f6a6ce90a1b5
client: improve search
Bernhard Reiter <bernhard@intevation.de>
parents:
779
diff
changeset
|
40 .list-group { |
f6a6ce90a1b5
client: improve search
Bernhard Reiter <bernhard@intevation.de>
parents:
779
diff
changeset
|
41 pointer-events: auto; |
f6a6ce90a1b5
client: improve search
Bernhard Reiter <bernhard@intevation.de>
parents:
779
diff
changeset
|
42 } |
593
c4a4dc612191
feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents:
587
diff
changeset
|
43 .splitscreen { |
c4a4dc612191
feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents:
587
diff
changeset
|
44 background-color: white; |
632
f2097d2aa048
fix: adjusted icon sizes
Thomas Junk <thomas.junk@intevation.de>
parents:
630
diff
changeset
|
45 padding: $small-offset; |
638
c2f040dba57f
feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents:
632
diff
changeset
|
46 margin-right: $small-offset; |
c2f040dba57f
feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents:
632
diff
changeset
|
47 margin-left: $offset; |
c2f040dba57f
feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents:
632
diff
changeset
|
48 border-radius: $border-radius; |
668
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
49 height: $icon-height; |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
50 width: $icon-width; |
593
c4a4dc612191
feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents:
587
diff
changeset
|
51 } |
c4a4dc612191
feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents:
587
diff
changeset
|
52 |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
53 .menubutton { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
54 background-color: white; |
632
f2097d2aa048
fix: adjusted icon sizes
Thomas Junk <thomas.junk@intevation.de>
parents:
630
diff
changeset
|
55 padding: $small-offset; |
638
c2f040dba57f
feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents:
632
diff
changeset
|
56 border-radius: $border-radius; |
c2f040dba57f
feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents:
632
diff
changeset
|
57 margin-left: $offset; |
668
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
58 height: $icon-height; |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
59 width: $icon-width; |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
60 } |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
61 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
62 .searchcontainer { |
668
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
63 height: $icon-height; |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
64 border-radius: 0.25rem; |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
65 } |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
66 |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
67 .searchbar-expanded { |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
68 margin-left: 22vw; |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
69 margin-right: auto; |
668
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
70 width: $searchbar-width !important; |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
71 } |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
72 |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
73 .searchbar-collapsed { |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
74 margin-left: auto; |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
75 margin-right: $small-offset; |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
76 width: $icon-width !important; |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
77 transition: $transition-fast; |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
78 } |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
79 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
80 .searchbar { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
81 margin-left: auto; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
82 margin-right: auto; |
668
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
83 height: $icon-height !important; |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
84 } |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
85 |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
86 .searchlabel { |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
87 background-color: white !important; |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
88 } |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
89 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
90 .topbar { |
638
c2f040dba57f
feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents:
632
diff
changeset
|
91 padding-top: $offset; |
c2f040dba57f
feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents:
632
diff
changeset
|
92 margin-right: $offset; |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
93 } |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
94 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
95 .logout { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
96 font-size: x-large; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
97 } |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
98 </style> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
99 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
100 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
101 <script> |
1019
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
966
diff
changeset
|
102 /* |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
966
diff
changeset
|
103 * This is Free Software under GNU Affero General Public License v >= 3.0 |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
966
diff
changeset
|
104 * without warranty, see README.md and license for details. |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
966
diff
changeset
|
105 * |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
966
diff
changeset
|
106 * SPDX-License-Identifier: AGPL-3.0-or-later |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
966
diff
changeset
|
107 * License-Filename: LICENSES/AGPL-3.0.txt |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
966
diff
changeset
|
108 * |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
966
diff
changeset
|
109 * Copyright (C) 2018 by via donau |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
966
diff
changeset
|
110 * – Österreichische Wasserstraßen-Gesellschaft mbH |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
966
diff
changeset
|
111 * Software engineering by Intevation GmbH |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
966
diff
changeset
|
112 * |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
966
diff
changeset
|
113 * Author(s): |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
966
diff
changeset
|
114 * Thomas Junk <thomas.junk@intevation.de> |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
966
diff
changeset
|
115 */ |
776
bb3558142b18
client: add backendrequest to search
Bernhard Reiter <bernhard@intevation.de>
parents:
773
diff
changeset
|
116 import debounce from "lodash.debounce"; |
783
ab9604a46075
client: add move after clicking search result
Bernhard Reiter <bernhard@intevation.de>
parents:
781
diff
changeset
|
117 import { fromLonLat } from "ol/proj"; |
ab9604a46075
client: add move after clicking search result
Bernhard Reiter <bernhard@intevation.de>
parents:
781
diff
changeset
|
118 import { mapState } from "vuex"; |
773
22c3acea700d
client: add to search processing
Bernhard Reiter <bernhard@intevation.de>
parents:
770
diff
changeset
|
119 |
776
bb3558142b18
client: add backendrequest to search
Bernhard Reiter <bernhard@intevation.de>
parents:
773
diff
changeset
|
120 import { displayError } from "../application/lib/errors.js"; |
bb3558142b18
client: add backendrequest to search
Bernhard Reiter <bernhard@intevation.de>
parents:
773
diff
changeset
|
121 import { HTTP } from "../application/lib/http"; |
966
6114c512508b
refac: extracted indentify from layers
Thomas Junk <thomas.junk@intevation.de>
parents:
965
diff
changeset
|
122 import Identify from "../identify/Identify"; |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
123 import Layers from "../layers/Layers"; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
124 |
965
ac2e51d5bc40
feat: autofocus when search expands
Thomas Junk <thomas.junk@intevation.de>
parents:
923
diff
changeset
|
125 const setFocus = () => document.querySelector("#search").focus(); |
ac2e51d5bc40
feat: autofocus when search expands
Thomas Junk <thomas.junk@intevation.de>
parents:
923
diff
changeset
|
126 |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
127 export default { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
128 name: "topbar", |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
129 components: { |
770
c12ec7fde3f2
client: add simple identify top area box
Bernhard Reiter <bernhard@intevation.de>
parents:
713
diff
changeset
|
130 Identify: Identify, |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
131 Layers: Layers |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
132 }, |
668
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
133 data() { |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
134 return { |
773
22c3acea700d
client: add to search processing
Bernhard Reiter <bernhard@intevation.de>
parents:
770
diff
changeset
|
135 searchbarCollapsed: true, |
22c3acea700d
client: add to search processing
Bernhard Reiter <bernhard@intevation.de>
parents:
770
diff
changeset
|
136 searchQuery: "", |
22c3acea700d
client: add to search processing
Bernhard Reiter <bernhard@intevation.de>
parents:
770
diff
changeset
|
137 searchQueryIsDirty: false, |
779
8ba1be486833
client: improve search
Bernhard Reiter <bernhard@intevation.de>
parents:
776
diff
changeset
|
138 searchResults: null, |
773
22c3acea700d
client: add to search processing
Bernhard Reiter <bernhard@intevation.de>
parents:
770
diff
changeset
|
139 isSearching: false |
668
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
140 }; |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
141 }, |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
142 computed: { |
1113
595654ad3f66
renamed mapstore to map (like other stores)
Markus Kottlaender <markus@intevation.de>
parents:
1048
diff
changeset
|
143 ...mapState("map", ["openLayersMap"]), |
811
9b982e50e938
split only with data
Thomas Junk <thomas.junk@intevation.de>
parents:
802
diff
changeset
|
144 ...mapState("fairwayprofile", ["currentProfile"]), |
776
bb3558142b18
client: add backendrequest to search
Bernhard Reiter <bernhard@intevation.de>
parents:
773
diff
changeset
|
145 searchIndicator: function() { |
773
22c3acea700d
client: add to search processing
Bernhard Reiter <bernhard@intevation.de>
parents:
770
diff
changeset
|
146 if (this.isSearching) { |
776
bb3558142b18
client: add backendrequest to search
Bernhard Reiter <bernhard@intevation.de>
parents:
773
diff
changeset
|
147 return "⟳"; |
773
22c3acea700d
client: add to search processing
Bernhard Reiter <bernhard@intevation.de>
parents:
770
diff
changeset
|
148 } else if (this.searchQueryIsDirty) { |
776
bb3558142b18
client: add backendrequest to search
Bernhard Reiter <bernhard@intevation.de>
parents:
773
diff
changeset
|
149 return ""; |
773
22c3acea700d
client: add to search processing
Bernhard Reiter <bernhard@intevation.de>
parents:
770
diff
changeset
|
150 } else { |
776
bb3558142b18
client: add backendrequest to search
Bernhard Reiter <bernhard@intevation.de>
parents:
773
diff
changeset
|
151 return "✓"; |
773
22c3acea700d
client: add to search processing
Bernhard Reiter <bernhard@intevation.de>
parents:
770
diff
changeset
|
152 } |
22c3acea700d
client: add to search processing
Bernhard Reiter <bernhard@intevation.de>
parents:
770
diff
changeset
|
153 }, |
668
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
154 searchbarContainerStyle() { |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
155 return { |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
156 "input-group": true, |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
157 searchcontainer: true, |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
158 "searchbar-collapsed": this.searchbarCollapsed, |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
159 "searchbar-expanded": !this.searchbarCollapsed |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
160 }; |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
161 } |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
162 }, |
649
83081ba6c9c1
feat: Linetool added
Thomas Junk <thomas.junk@intevation.de>
parents:
638
diff
changeset
|
163 props: ["routeName"], |
773
22c3acea700d
client: add to search processing
Bernhard Reiter <bernhard@intevation.de>
parents:
770
diff
changeset
|
164 watch: { |
22c3acea700d
client: add to search processing
Bernhard Reiter <bernhard@intevation.de>
parents:
770
diff
changeset
|
165 searchQuery: function() { |
22c3acea700d
client: add to search processing
Bernhard Reiter <bernhard@intevation.de>
parents:
770
diff
changeset
|
166 this.searchQueryIsDirty = true; |
776
bb3558142b18
client: add backendrequest to search
Bernhard Reiter <bernhard@intevation.de>
parents:
773
diff
changeset
|
167 this.triggerSearch(); |
773
22c3acea700d
client: add to search processing
Bernhard Reiter <bernhard@intevation.de>
parents:
770
diff
changeset
|
168 } |
22c3acea700d
client: add to search processing
Bernhard Reiter <bernhard@intevation.de>
parents:
770
diff
changeset
|
169 }, |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
170 methods: { |
802
327aa4a18a1c
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
794
diff
changeset
|
171 takeFirstSearchresult() { |
327aa4a18a1c
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
794
diff
changeset
|
172 if (!this.searchResults || this.searchResults.length != 1) return; |
327aa4a18a1c
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
794
diff
changeset
|
173 this.moveToSearchResult(this.searchResults[0]); |
327aa4a18a1c
Fairway profile WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
794
diff
changeset
|
174 }, |
781
f6a6ce90a1b5
client: improve search
Bernhard Reiter <bernhard@intevation.de>
parents:
779
diff
changeset
|
175 triggerSearch: debounce(function() { |
f6a6ce90a1b5
client: improve search
Bernhard Reiter <bernhard@intevation.de>
parents:
779
diff
changeset
|
176 this.doSearch(); |
f6a6ce90a1b5
client: improve search
Bernhard Reiter <bernhard@intevation.de>
parents:
779
diff
changeset
|
177 }, 500), |
776
bb3558142b18
client: add backendrequest to search
Bernhard Reiter <bernhard@intevation.de>
parents:
773
diff
changeset
|
178 doSearch() { |
773
22c3acea700d
client: add to search processing
Bernhard Reiter <bernhard@intevation.de>
parents:
770
diff
changeset
|
179 this.isCalculating = true; |
779
8ba1be486833
client: improve search
Bernhard Reiter <bernhard@intevation.de>
parents:
776
diff
changeset
|
180 this.searchResults = null; |
8ba1be486833
client: improve search
Bernhard Reiter <bernhard@intevation.de>
parents:
776
diff
changeset
|
181 |
8ba1be486833
client: improve search
Bernhard Reiter <bernhard@intevation.de>
parents:
776
diff
changeset
|
182 if (this.searchQuery == "") { |
8ba1be486833
client: improve search
Bernhard Reiter <bernhard@intevation.de>
parents:
776
diff
changeset
|
183 return; |
8ba1be486833
client: improve search
Bernhard Reiter <bernhard@intevation.de>
parents:
776
diff
changeset
|
184 } |
776
bb3558142b18
client: add backendrequest to search
Bernhard Reiter <bernhard@intevation.de>
parents:
773
diff
changeset
|
185 |
bb3558142b18
client: add backendrequest to search
Bernhard Reiter <bernhard@intevation.de>
parents:
773
diff
changeset
|
186 HTTP.post( |
bb3558142b18
client: add backendrequest to search
Bernhard Reiter <bernhard@intevation.de>
parents:
773
diff
changeset
|
187 "/search", |
bb3558142b18
client: add backendrequest to search
Bernhard Reiter <bernhard@intevation.de>
parents:
773
diff
changeset
|
188 { string: this.searchQuery }, |
bb3558142b18
client: add backendrequest to search
Bernhard Reiter <bernhard@intevation.de>
parents:
773
diff
changeset
|
189 { |
bb3558142b18
client: add backendrequest to search
Bernhard Reiter <bernhard@intevation.de>
parents:
773
diff
changeset
|
190 headers: { |
bb3558142b18
client: add backendrequest to search
Bernhard Reiter <bernhard@intevation.de>
parents:
773
diff
changeset
|
191 "X-Gemma-Auth": localStorage.getItem("token"), |
bb3558142b18
client: add backendrequest to search
Bernhard Reiter <bernhard@intevation.de>
parents:
773
diff
changeset
|
192 "Content-type": "text/xml; charset=UTF-8" |
bb3558142b18
client: add backendrequest to search
Bernhard Reiter <bernhard@intevation.de>
parents:
773
diff
changeset
|
193 } |
bb3558142b18
client: add backendrequest to search
Bernhard Reiter <bernhard@intevation.de>
parents:
773
diff
changeset
|
194 } |
bb3558142b18
client: add backendrequest to search
Bernhard Reiter <bernhard@intevation.de>
parents:
773
diff
changeset
|
195 ) |
bb3558142b18
client: add backendrequest to search
Bernhard Reiter <bernhard@intevation.de>
parents:
773
diff
changeset
|
196 .then(response => { |
779
8ba1be486833
client: improve search
Bernhard Reiter <bernhard@intevation.de>
parents:
776
diff
changeset
|
197 // console.log("got:", response.data); |
8ba1be486833
client: improve search
Bernhard Reiter <bernhard@intevation.de>
parents:
776
diff
changeset
|
198 this.searchResults = response.data; |
776
bb3558142b18
client: add backendrequest to search
Bernhard Reiter <bernhard@intevation.de>
parents:
773
diff
changeset
|
199 }) |
bb3558142b18
client: add backendrequest to search
Bernhard Reiter <bernhard@intevation.de>
parents:
773
diff
changeset
|
200 .catch(error => { |
bb3558142b18
client: add backendrequest to search
Bernhard Reiter <bernhard@intevation.de>
parents:
773
diff
changeset
|
201 const { status, data } = error.response; |
bb3558142b18
client: add backendrequest to search
Bernhard Reiter <bernhard@intevation.de>
parents:
773
diff
changeset
|
202 displayError({ |
bb3558142b18
client: add backendrequest to search
Bernhard Reiter <bernhard@intevation.de>
parents:
773
diff
changeset
|
203 title: "Backend Error", |
bb3558142b18
client: add backendrequest to search
Bernhard Reiter <bernhard@intevation.de>
parents:
773
diff
changeset
|
204 message: `${status}: ${data.message || data}` |
bb3558142b18
client: add backendrequest to search
Bernhard Reiter <bernhard@intevation.de>
parents:
773
diff
changeset
|
205 }); |
bb3558142b18
client: add backendrequest to search
Bernhard Reiter <bernhard@intevation.de>
parents:
773
diff
changeset
|
206 }); |
bb3558142b18
client: add backendrequest to search
Bernhard Reiter <bernhard@intevation.de>
parents:
773
diff
changeset
|
207 |
773
22c3acea700d
client: add to search processing
Bernhard Reiter <bernhard@intevation.de>
parents:
770
diff
changeset
|
208 this.isCalculating = false; |
22c3acea700d
client: add to search processing
Bernhard Reiter <bernhard@intevation.de>
parents:
770
diff
changeset
|
209 this.searchQueryIsDirty = false; |
776
bb3558142b18
client: add backendrequest to search
Bernhard Reiter <bernhard@intevation.de>
parents:
773
diff
changeset
|
210 }, |
781
f6a6ce90a1b5
client: improve search
Bernhard Reiter <bernhard@intevation.de>
parents:
779
diff
changeset
|
211 moveToSearchResult(resultEntry) { |
783
ab9604a46075
client: add move after clicking search result
Bernhard Reiter <bernhard@intevation.de>
parents:
781
diff
changeset
|
212 // DEBUG console.log("Moving to", resultEntry); |
ab9604a46075
client: add move after clicking search result
Bernhard Reiter <bernhard@intevation.de>
parents:
781
diff
changeset
|
213 if (resultEntry.geom.type == "Point") { |
ab9604a46075
client: add move after clicking search result
Bernhard Reiter <bernhard@intevation.de>
parents:
781
diff
changeset
|
214 let view = this.openLayersMap.getView(); |
1048
bdc8b4160872
search results only zoom in, not out
Markus Kottlaender <markus@intevation.de>
parents:
1047
diff
changeset
|
215 const currentZoom = view.getZoom(); |
1117
ef7c102497b8
added default zoom level for search results that are cities/villages
Markus Kottlaender <markus@intevation.de>
parents:
1048
diff
changeset
|
216 let newZoom = 11; |
ef7c102497b8
added default zoom level for search results that are cities/villages
Markus Kottlaender <markus@intevation.de>
parents:
1048
diff
changeset
|
217 if (resultEntry.type === "bottleneck") |
ef7c102497b8
added default zoom level for search results that are cities/villages
Markus Kottlaender <markus@intevation.de>
parents:
1048
diff
changeset
|
218 newZoom = Math.max(17, currentZoom); |
ef7c102497b8
added default zoom level for search results that are cities/villages
Markus Kottlaender <markus@intevation.de>
parents:
1048
diff
changeset
|
219 if (resultEntry.type === "rhm") |
ef7c102497b8
added default zoom level for search results that are cities/villages
Markus Kottlaender <markus@intevation.de>
parents:
1048
diff
changeset
|
220 newZoom = Math.max(15, currentZoom); |
ef7c102497b8
added default zoom level for search results that are cities/villages
Markus Kottlaender <markus@intevation.de>
parents:
1048
diff
changeset
|
221 if (resultEntry.type === "city") |
ef7c102497b8
added default zoom level for search results that are cities/villages
Markus Kottlaender <markus@intevation.de>
parents:
1048
diff
changeset
|
222 newZoom = Math.max(13, currentZoom); |
783
ab9604a46075
client: add move after clicking search result
Bernhard Reiter <bernhard@intevation.de>
parents:
781
diff
changeset
|
223 view.animate( |
ab9604a46075
client: add move after clicking search result
Bernhard Reiter <bernhard@intevation.de>
parents:
781
diff
changeset
|
224 { |
1048
bdc8b4160872
search results only zoom in, not out
Markus Kottlaender <markus@intevation.de>
parents:
1047
diff
changeset
|
225 zoom: newZoom, |
783
ab9604a46075
client: add move after clicking search result
Bernhard Reiter <bernhard@intevation.de>
parents:
781
diff
changeset
|
226 center: fromLonLat( |
ab9604a46075
client: add move after clicking search result
Bernhard Reiter <bernhard@intevation.de>
parents:
781
diff
changeset
|
227 resultEntry.geom.coordinates, |
ab9604a46075
client: add move after clicking search result
Bernhard Reiter <bernhard@intevation.de>
parents:
781
diff
changeset
|
228 view.getProjection() |
ab9604a46075
client: add move after clicking search result
Bernhard Reiter <bernhard@intevation.de>
parents:
781
diff
changeset
|
229 ) |
ab9604a46075
client: add move after clicking search result
Bernhard Reiter <bernhard@intevation.de>
parents:
781
diff
changeset
|
230 }, |
ab9604a46075
client: add move after clicking search result
Bernhard Reiter <bernhard@intevation.de>
parents:
781
diff
changeset
|
231 700 |
ab9604a46075
client: add move after clicking search result
Bernhard Reiter <bernhard@intevation.de>
parents:
781
diff
changeset
|
232 ); |
781
f6a6ce90a1b5
client: improve search
Bernhard Reiter <bernhard@intevation.de>
parents:
779
diff
changeset
|
233 } |
783
ab9604a46075
client: add move after clicking search result
Bernhard Reiter <bernhard@intevation.de>
parents:
781
diff
changeset
|
234 // this.searchQuery = ""; // clear search query again |
ab9604a46075
client: add move after clicking search result
Bernhard Reiter <bernhard@intevation.de>
parents:
781
diff
changeset
|
235 this.toggleSearchbar(); |
781
f6a6ce90a1b5
client: improve search
Bernhard Reiter <bernhard@intevation.de>
parents:
779
diff
changeset
|
236 }, |
668
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
237 toggleSearchbar() { |
965
ac2e51d5bc40
feat: autofocus when search expands
Thomas Junk <thomas.junk@intevation.de>
parents:
923
diff
changeset
|
238 if (this.searchbarCollapsed) { |
ac2e51d5bc40
feat: autofocus when search expands
Thomas Junk <thomas.junk@intevation.de>
parents:
923
diff
changeset
|
239 setTimeout(setFocus, 300); |
ac2e51d5bc40
feat: autofocus when search expands
Thomas Junk <thomas.junk@intevation.de>
parents:
923
diff
changeset
|
240 } |
668
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
241 this.searchbarCollapsed = !this.searchbarCollapsed; |
3e2eeb215d0e
feat: searchbar collapsible
Thomas Junk <thomas.junk@intevation.de>
parents:
649
diff
changeset
|
242 }, |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
243 toggleSidebar() { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
244 this.$store.commit("application/toggleSidebar"); |
593
c4a4dc612191
feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents:
587
diff
changeset
|
245 }, |
c4a4dc612191
feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents:
587
diff
changeset
|
246 splitScreen() { |
1044
f8a4ec146d47
fixed Vue reactivity issue (splitscreen button)
Markus Kottlaender <markus@intevation.de>
parents:
1043
diff
changeset
|
247 if (Object.keys(this.currentProfile).length == 0) return; |
593
c4a4dc612191
feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents:
587
diff
changeset
|
248 this.$store.commit("application/toggleSplitScreen"); |
781
f6a6ce90a1b5
client: improve search
Bernhard Reiter <bernhard@intevation.de>
parents:
779
diff
changeset
|
249 } |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
250 } |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
251 }; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
252 </script> |