# HG changeset patch # User Markus Kottlaender # Date 1558442528 -7200 # Node ID b01bf2399c20a7fb5b3be395e4232d51afb91715 # Parent 399a2eb496ee804ffe309a389a6ab851b58bec63 client: available fairway depth vs lnwl: fetching data for diagrams on map Data gets stored in the client for 15 mins. Diagrams are still drawn with static data for demo purpose. diff -r 399a2eb496ee -r b01bf2399c20 client/src/components/map/layers.js --- a/client/src/components/map/layers.js Tue May 21 14:24:55 2019 +0200 +++ b/client/src/components/map/layers.js Tue May 21 14:42:08 2019 +0200 @@ -470,9 +470,41 @@ }, source, false, - async f => { + async (f, store) => { if (f.get("fa_critical")) { - f.set("fa_data", []); + // look for fairway availability data in store. If present and + // not older than 15 min use it or fetch new data and store it. + let data = store.getters[ + "fairwayavailability/fwLNWLOverviewData" + ](f); + if ( + data && + new Date().getTime() - data.createdAt.getTime() < 900000 + ) { + f.set("fa_data", data.data); + } else { + let from = new Date(); + from.setDate(from.getDate() - 30); + let to = new Date(); + data = await store.dispatch( + "fairwayavailability/loadAvailableFairwayDepthLNWL", + { + feature: f, + from: from.toISOString().split("T")[0], + to: to.toISOString().split("T")[0], + frequency: "monthly", + LOS: 3 + } + ); + if (data) { + store.commit("fairwayavailability/addFwLNWLOverviewData", { + feature: f, + data, + createdAt: new Date() + }); + f.set("fa_data", data); + } + } } return f; } diff -r 399a2eb496ee -r b01bf2399c20 client/src/store/fairwayavailability.js --- a/client/src/store/fairwayavailability.js Tue May 21 14:24:55 2019 +0200 +++ b/client/src/store/fairwayavailability.js Tue May 21 14:42:08 2019 +0200 @@ -33,6 +33,7 @@ breadthlimit: null, fwData: null, fwLNWLData: null, + fwLNWLOverviewData: [], legend: null, LOS: 3 }; @@ -42,6 +43,13 @@ init, namespaced: true, state: init(), + getters: { + fwLNWLOverviewData: state => feature => { + return state.fwLNWLOverviewData.find( + d => d.feature.get("id") === feature.get("id") + ); + } + }, mutations: { type: (state, type) => { state.type = type; @@ -73,6 +81,14 @@ setFwData: (state, fwData) => { state.fwData = fwData; }, + addFwLNWLOverviewData: (state, data) => { + let existingIndex = state.fwLNWLOverviewData.findIndex( + d => d.feature.get("id") === data.feature.get("id") + ); + if (existingIndex !== -1) + state.fwLNWLOverviewData.splice(existingIndex, 1); + state.fwLNWLOverviewData.push(data); + }, setLegend: (state, header) => { const headerEntries = header.split(","); headerEntries.shift(); @@ -132,6 +148,29 @@ reject(error); }); }); + }, + loadAvailableFairwayDepthLNWL: (context, options) => { + return new Promise((resolve, reject) => { + const { feature, from, to, frequency, LOS } = options; + let name = + feature.constructor.name === "Feature" + ? feature.get("objnam") + : feature.properties.name; + const start = encodeURIComponent("00:00:00+00:00"); + const end = encodeURIComponent("23:59:59+00:00"); + const URL = `/data/bottleneck/availability/${encodeURIComponent( + name + )}?from=${from}T${start}&to=${to}T${end}&mode=${frequency}&los=${LOS}`; + HTTP.get(URL, { + headers: { "X-Gemma-Auth": localStorage.getItem("token") } + }) + .then(response => { + resolve(response.data); + }) + .catch(error => { + reject(error); + }); + }); } } };