annotate client/src/application/Topbar.vue @ 666:4c36b0e39d78

feat: prepareProfile converts geoJSON to diagram data. PrepareProfile assumes data given in geoJSON format. It extracts heigth and width information for the diagram and transposes every coordinate given relative to the first coordinate in the first set.
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 18 Sep 2018 13:43:24 +0200
parents 83081ba6c9c1
children 3e2eeb215d0e
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
1 <template>
621
b17a4482d07d feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
2 <div class="topbar d-flex flex-row justify-content-between">
638
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 632
diff changeset
3 <div @click="toggleSidebar">
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 632
diff changeset
4 <i class="ui-element menubutton fa fa-bars"></i>
621
b17a4482d07d feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
5 </div>
b17a4482d07d feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
6 <div v-if="routeName != 'usermanagement'" class="input-group searchcontainer">
b17a4482d07d feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
7 <div class="input-group-prepend shadow">
b17a4482d07d feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
8 <span class="input-group-text searchlabel" for="search">
b17a4482d07d feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
9 <i class="fa fa-search"></i>
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>
b17a4482d07d feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
12 <input id="search" type="text" class="form-control ui-element search searchbar">
b17a4482d07d feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
13 </div>
630
855cca0142ec refac: Usermanagement now flexible sidebar layout
Thomas Junk <thomas.junk@intevation.de>
parents: 629
diff changeset
14 <div v-if="routeName != 'usermanagement'">
621
b17a4482d07d feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
15 <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
16 </div>
b17a4482d07d feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
17 <Layers v-if="routeName != 'usermanagement'"></Layers>
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
18 </div>
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
19 </template>
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
20
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
21 <style lang="scss">
593
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 587
diff changeset
22 .splitscreen {
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 587
diff changeset
23 background-color: white;
632
f2097d2aa048 fix: adjusted icon sizes
Thomas Junk <thomas.junk@intevation.de>
parents: 630
diff changeset
24 padding: $small-offset;
638
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 632
diff changeset
25 margin-right: $small-offset;
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 632
diff changeset
26 margin-left: $offset;
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 632
diff changeset
27 border-radius: $border-radius;
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 632
diff changeset
28 height: $icon-width;
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 632
diff changeset
29 width: $icon-height;
593
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 587
diff changeset
30 }
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 587
diff changeset
31
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
32 .menubutton {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
33 background-color: white;
632
f2097d2aa048 fix: adjusted icon sizes
Thomas Junk <thomas.junk@intevation.de>
parents: 630
diff changeset
34 padding: $small-offset;
638
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 632
diff changeset
35 border-radius: $border-radius;
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 632
diff changeset
36 margin-left: $offset;
632
f2097d2aa048 fix: adjusted icon sizes
Thomas Junk <thomas.junk@intevation.de>
parents: 630
diff changeset
37 height: $icon-width;
f2097d2aa048 fix: adjusted icon sizes
Thomas Junk <thomas.junk@intevation.de>
parents: 630
diff changeset
38 width: $icon-height;
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
39 }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
40
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
41 .searchcontainer {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
42 margin-left: 20vw;
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
43 margin-right: auto;
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
44 width: 50vw !important;
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
45 height: 39px;
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
46 border-radius: 0.25rem;
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
47 }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
48
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
49 .searchbar {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
50 margin-left: auto;
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
51 margin-right: auto;
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
52 height: 50px;
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
53 }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
54
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
55 .topbar {
638
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 632
diff changeset
56 padding-top: $offset;
c2f040dba57f feat: collapsible layer selection
Thomas Junk <thomas.junk@intevation.de>
parents: 632
diff changeset
57 margin-right: $offset;
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
58 }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
59
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
60 .logout {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
61 font-size: x-large;
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
62 }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
63 </style>
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
64
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
65
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
66 <script>
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
67 import Layers from "../layers/Layers";
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
68
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
69 export default {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
70 name: "topbar",
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
71 components: {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
72 Layers: Layers
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
73 },
649
83081ba6c9c1 feat: Linetool added
Thomas Junk <thomas.junk@intevation.de>
parents: 638
diff changeset
74 props: ["routeName"],
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
75 methods: {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
76 toggleSidebar() {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
77 this.$store.commit("application/toggleSidebar");
593
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 587
diff changeset
78 },
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 587
diff changeset
79 splitScreen() {
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 587
diff changeset
80 this.$store.commit("application/toggleSplitScreen");
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
81 }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
82 }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
83 };
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
84 </script>