Mercurial > gemma

comparison client/src/components/fairway/AvailableFairwayDepth.vue @ 3184:1ba2a7d22fbb

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
available_fairway_depth: display selected feature
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 07 May 2019 16:59:11 +0200
parents 429e28295902
children 505414dfe3e7
comparison
equal deleted inserted replaced
3183:f64cc98746a1 3184:1ba2a7d22fbb
1 <template> 1 <template>
2 <div> 2 <div class="d-flex flex-column flex-fill">
3 <h1>Available Fairway Depth</h1> 3 <UIBoxHeader icon="chart-area" :title="title" :closeCallback="close" />
4 <UISpinnerOverlay v-if="loading" /> 4 <UISpinnerOverlay v-if="loading" />
5 <div class="d-flex flex-row"> 5 <div class="mt-3 d-flex flex-row">
6 <div class="d-flex flex-column mr-auto"> 6 <div class="d-flex flex-column mr-auto">
7 <div class="d-flex flex-row"> 7 <div class="d-flex flex-row">
8 <div class="mr-3 my-auto ml-auto"> 8 <div class="mr-3 my-auto ml-auto">
9 <select class="form-control mr-3"> 9 <select class="form-control mr-3">
10 <option>Monthly</option> 10 <option>Monthly</option>
50 import app from "@/main"; 50 import app from "@/main";
51 import { displayError } from "@/lib/errors"; 51 import { displayError } from "@/lib/errors";
52 import debounce from "debounce"; 52 import debounce from "debounce";
53 import { HTTP } from "@/lib/http"; 53 import { HTTP } from "@/lib/http";
54 import { diagram } from "@/lib/mixins"; 54 import { diagram } from "@/lib/mixins";
55 import { mapState } from "vuex";
55 56
56 const MOCKDATA = `#label,# >= LDC [h],# < 200.00 [h],# >= 200.00 [h],# >= 230.00 [h],# >= 250.00 [h] 57 const MOCKDATA = `#label,# >= LDC [h],# < 200.00 [h],# >= 200.00 [h],# >= 230.00 [h],# >= 250.00 [h]
57 01-2019, 22.000,1.000, 4.000,6.000, 20.000 58 01-2019, 22.000,1.000, 4.000,6.000, 20.000
58 02-2019, 24.000,0.000,0.000,0.000, 23.000 59 02-2019, 24.000,0.000,0.000,0.000, 23.000
59 03-2019, 30.000,0.000,0.000,0.000, 30.000 60 03-2019, 30.000,0.000,0.000,0.000, 30.000
86 }, 87 },
87 mounted() { 88 mounted() {
88 this.loadData(); 89 this.loadData();
89 }, 90 },
90 computed: { 91 computed: {
92 ...mapState("diagram", ["selectedFairwayAvailabilityFeature"]),
91 availability() { 93 availability() {
92 return this.plainAvailability; 94 return this.plainAvailability;
95 },
96 title() {
97 return `Available Fairway Depth: ${this.featureName}`;
98 },
99 featureName() {
100 return this.selectedFairwayAvailabilityFeature.properties.name;
93 } 101 }
94 }, 102 },
95 methods: { 103 methods: {
104 close() {
105 this.$store.commit("application/paneSetup", "DEFAULT");
106 },
96 prepareLegend(header) { 107 prepareLegend(header) {
97 const headerEntries = header.split(","); 108 const headerEntries = header.split(",");
98 headerEntries.shift(); 109 headerEntries.shift();
99 return headerEntries.map(x => { 110 return headerEntries.map(x => {
100 return x.split("#")[1].trim(); 111 return x.split("#")[1].trim();
116 }; 127 };
117 }); 128 });
118 this.fwData = transformed; 129 this.fwData = transformed;
119 }, 130 },
120 loadData() { 131 loadData() {
121 const URL = 132 const URL = `/data/bottleneck/fairway-depth/${
122 "/data/bottleneck/fairway-depth/Furt%20Wendeplatz%20Theben?from=2019-01-01T15:04:05%2b00:00&to=2019-05-02T15:04:05%2b07:00&mode=monthly"; 133 this.featureName
134 }?from=2019-01-01T15:04:05%2b00:00&to=2019-05-02T15:04:05%2b07:00&mode=monthly`;
123 HTTP.get(URL, { 135 HTTP.get(URL, {
124 headers: { "X-Gemma-Auth": localStorage.getItem("token") } 136 headers: { "X-Gemma-Auth": localStorage.getItem("token") }
125 }) 137 })
126 .then(() => { 138 .then(() => {
127 // const { data } = response; 139 // const { data } = response;