-
{{ $t('additional:modules.tools.cosi.selectionManager.cache') }}
+
+
-
- {{ $t('additional:modules.tools.cosi.selectionManager.dataLoaded') }}
-
-
@@ -782,11 +771,11 @@ export default {
}
}
- .all_function_buttons {
- width:90px;
+ .all_function_buttons, .cache_buttons {
+ width:auto;
height:30px;
margin:0px 5px 0px auto;
- border-bottom: 1px solid #aaa;
+ // border-bottom: 1px solid #aaa;
display:flex;
flex-flow:row wrap;
justify-content:flex-end;
@@ -835,10 +824,15 @@ export default {
}
.cache {
- margin:5px;
+ margin:3px 0px;
+ border-top:1px solid #ccc;
+ border-bottom:1px solid #ccc;
+ background:whitesmoke;
ul {
justify-content:flex-end;
+ padding:5px;
+ box-sizing:border-box;
li {
flex:0 0 auto;
@@ -851,6 +845,11 @@ export default {
button {
margin-left:10px;
+ &.disabled {
+ pointer-events:none;
+ opacity:0.6;
+ }
+
.v-icon {
font-size:10px;
color:#444;
@@ -860,6 +859,15 @@ export default {
}
}
+ .function_grp {
+ .menu_title {
+ color:#aaa;
+ font-size:90%;
+ line-height:30px;
+ margin-right:5px;
+ }
+ }
+
ul.groups {
.group_header {
width:100%;
@@ -882,7 +890,7 @@ export default {
background:whitesmoke;
border-bottom:1px solid #ccc;
height:30px;
- padding-left:20px;
+ padding-left:10px;
text-align:left;
box-sizing:border-box;
overflow:hidden;
@@ -954,8 +962,22 @@ export default {
}
}
+ span.hint {
+ display:inline;
+ font-size:75%;
+ padding:0px 3px;
+ box-sizing:border-box;
+ color:#888;
+ height:20px;
+ width:38px;
+ text-align:center;
+ line-height:20px;
+ margin:5px 6px 5px 0px;
+ border:1px solid #888;
+ }
+
p {
- flex-basis:calc(100% - 140px);
+ // flex-basis:calc(100% - 170px);
line-height:30px;
}
@@ -1062,6 +1084,10 @@ export default {
}
}
}
+
+ &:hover {
+ cursor:pointer;
+ }
}
}
}
diff --git a/cosi/SelectionManager/locales/de/additional.json b/cosi/SelectionManager/locales/de/additional.json
index 4201e2de7..d379e1f4e 100644
--- a/cosi/SelectionManager/locales/de/additional.json
+++ b/cosi/SelectionManager/locales/de/additional.json
@@ -8,6 +8,7 @@
"noData": "Keine Daten vorhanden",
"mergedSelections": "Kombinierte Auswahl",
"allSelections": "Alle aktiven ausgewählt",
+ "allSelectionsMenu": "Alle Auswahlen",
"connectedSelections": "Auswahl verbunden",
"buffer": "Veränderte Auswahl",
"cache": "Zwischenspeicher",
diff --git a/cosi/SelectionManager/store/actionsSelectionManager.js b/cosi/SelectionManager/store/actionsSelectionManager.js
index 172fdc41f..37171652f 100644
--- a/cosi/SelectionManager/store/actionsSelectionManager.js
+++ b/cosi/SelectionManager/store/actionsSelectionManager.js
@@ -10,7 +10,7 @@ import GeoJSON from "ol/format/GeoJSON";
* @returns {void}
*/
const actions = {
- addNewSelection ({commit}, {selection, source, id}) {
+ addNewSelection ({state, commit}, {selection, source, id}) {
let collection;
const format = new GeoJSON(),
selectionObject = {
@@ -18,6 +18,7 @@ const actions = {
bufferedSelection: Array,
source: String,
id: String,
+ abv: String,
storedLayers: [],
filterSettings: [],
settings: {
@@ -53,6 +54,7 @@ const actions = {
selectionObject.selection = mergedPolygons;
selectionObject.source = source;
selectionObject.id = id;
+ selectionObject.abv = state.selections.filter(selection => selection.abv === id.match(/\b([A-Z0-9])/g).join('')).length > 0 ? id.match(/\b([A-Z0-9])/g).join('') + "-" + state.selections.filter(selection => selection.abv === id.match(/\b([A-Z0-9])/g).join('')).length : id.match(/\b([A-Z0-9])/g).join('');
commit("addSelection", selectionObject);
}
From dbcc29447c91ae43296ecfc6464dd15d25edd189 Mon Sep 17 00:00:00 2001
From: bertramhillmann <43250699+bertramhillmann@users.noreply.github.com>
Date: Thu, 22 Dec 2022 10:43:13 +0100
Subject: [PATCH 4/4] push fuer pr
---
.../components/AccessibilityAnalysis.vue | 3 +-
.../components/SelectionManager.vue | 149 ++++++++++--------
.../store/actionsSelectionManager.js | 5 +-
.../store/mutationsSelectionManager.js | 9 +-
4 files changed, 95 insertions(+), 71 deletions(-)
diff --git a/cosi/AccessibilityAnalysis/components/AccessibilityAnalysis.vue b/cosi/AccessibilityAnalysis/components/AccessibilityAnalysis.vue
index 62272aebe..96b66e2fb 100644
--- a/cosi/AccessibilityAnalysis/components/AccessibilityAnalysis.vue
+++ b/cosi/AccessibilityAnalysis/components/AccessibilityAnalysis.vue
@@ -108,6 +108,7 @@ export default {
...mapGetters("Tools/DistrictSelector", ["boundingGeometry"]),
...mapGetters("Tools/FeaturesList", ["activeVectorLayerList", "isFeatureActive"]),
...mapGetters("Tools/AreaSelector", {areaSelectorGeom: "geometry"}),
+ ...mapGetters("Tools/SelectionManager", ["activeSelection"]),
...mapGetters("Tools/ScenarioBuilder", ["scenarioUpdated"]),
...mapGetters("Tools/Routing/Directions", ["directionsRouteSource", "directionsRouteLayer", "routingDirections"]),
...mapGetters("Tools/Routing", {routingActive: "active", activeRoutingToolOption: "activeRoutingToolOption"}),
@@ -255,7 +256,7 @@ export default {
mode () {
this.setSetByFeature(false);
- if (this.mode === "region") {
+ if (this.mode === "region" && this.activeSelection === null) {
this.resetIsochroneBBox();
}
diff --git a/cosi/SelectionManager/components/SelectionManager.vue b/cosi/SelectionManager/components/SelectionManager.vue
index 186f799db..19af67460 100644
--- a/cosi/SelectionManager/components/SelectionManager.vue
+++ b/cosi/SelectionManager/components/SelectionManager.vue
@@ -16,7 +16,6 @@ import {default as turfConcave} from "@turf/concave";
import {featureCollection as turfFeatureCollection} from "@turf/helpers";
import GeoJSON from "ol/format/GeoJSON";
import {Fill, Stroke, Style} from "ol/style.js";
-import LoaderOverlay from "../../../../src/utils/loaderOverlay.js";
export default {
name: "SelectionManager",
@@ -52,6 +51,9 @@ export default {
},
activeLayerList () {
return this.activeVectorLayerList.map(layer => layer.getProperties().name);
+ },
+ selectionsLength () {
+ return this.selections.length;
}
},
watch: {
@@ -59,32 +61,28 @@ export default {
// that pattern allows us to use data from external tools and apply internal methods to it.
acceptSelection (selection) {
if (selection) {
- let dataToLoad = false;
-
// check for stored vector layers to load
selection.storedLayers.forEach(layerName => {
if (!getModelByAttributes({type: "layer", name: layerName})) {
addModelsByAttributes({name: layerName});
- dataToLoad = true;
}
});
const format = new GeoJSON();
selection.selection = selection.selection.map(sel => format.readFeature(sel));
-
+ selection.abv = this.selections.filter(sel => sel.abv === selection.id.match(/\b([A-Z0-9])/g).join("")).length > 0 ? selection.id.match(/\b([A-Z0-9])/g).join("") + "-" + this.selections.filter(sel => sel.abv === selection.id.match(/\b([A-Z0-9])/g).join("")).length : selection.id.match(/\b([A-Z0-9])/g).join("");
this.addSelection(selection);
this.highlightSelection(this.selections.length - 1);
}
},
- // watcher on activeSet so that the active selection can be changed via the setActiveSelection mutation from outside of the component
- activeSet (oldValue, newValue) {
- if (oldValue === newValue) {
- this.removeLayer();
- this.setActiveSelection(null);
+ // watcher on activeSet so that the active selection can be changed via the inputActiveSelection mutation from outside of the component
+ activeSelection (value) {
+ if (value !== null) {
+ this.activateSelection(value);
}
else {
- this.toggleSelection(newValue);
+ this.removeLayer();
}
},
/**
@@ -122,11 +120,15 @@ export default {
}
}
},
- /**
- * @description Sets the all selections button active again if the this.selections array changes.
- * @returns {void}
- */
- selections () {
+ // Sets the all selections button active again if the this.selections array changes and updates the selection index
+ selectionsLength (newValue, oldValue) {
+ if ((oldValue && newValue && oldValue < newValue) || (!oldValue && newValue)) {
+ this.inputActiveSelection(newValue - 1);
+ }
+ else if (newValue && newValue < this.activeSelection + 1) {
+ this.inputActiveSelection(0);
+ }
+
this.allSelectionsPossible = true;
}
},
@@ -138,24 +140,16 @@ export default {
...mapActions("Tools/SelectionManager", Object.keys(actions)),
...mapMutations("Maps", ["setLayerVisibility", "addLayerToMap", "removeLayerFromMap"]),
/**
- * @description Toggles the active selection on click in frontend
- * @param {*} index - Index of the chosen selection in this.selections
- * @returns {void}
- */
- toggleSelection (index) {
- if (this.activeSelection !== index) {
- this.setActiveSelection(index);
-
- if (this.selections[index].settings.bufferActive) {
- this.rerenderSelection(index);
- }
- else {
- this.highlightSelection(index);
- }
+ * @description Highlights activeSelection
+ * @param {Integer} index - Index of the active selection in this.selections
+ * @returns {void}
+ */
+ activateSelection (index) {
+ if (this.selections[index].settings.bufferActive) {
+ this.rerenderSelection(index);
}
else {
- this.removeLayer();
- this.setActiveSelection(null);
+ this.highlightSelection(index);
}
},
/**
@@ -232,10 +226,11 @@ export default {
/**
* @description Creates VectorLayer for the chosen selection on hover in the selection menu.
* @param {Integer} index - Index of the chosen selection in this.selections
+ * @param {Integer} color - RGB String of color that the hover shall have
* @returns {void}
*/
- hoverSelection (index) {
- if(this.activeSelection != index) {
+ hoverSelection (index, color) {
+ if (this.activeSelection !== index) {
this.map.getLayers().getArray().filter(layer => layer.get("name") === "selection_manager_hover_layer").forEach(layer => this.map.removeLayer(layer));
const vectorSource = new VectorSource({
@@ -246,7 +241,7 @@ export default {
source: vectorSource,
style: new Style({
fill: new Fill({
- color: "rgba(214, 96, 93, 0.2)"
+ color: color
})
})
});
@@ -280,9 +275,8 @@ export default {
* @param {Array} storedLayers - The names of the stored layers inside the saved selection
* @returns {void}
*/
- setStoredLayersActive (storedLayers) {
- LoaderOverlay.show();
-
+ async setStoredLayersActive (storedLayers) {
+
// hide all active layers
this.activeVectorLayerList.forEach(layer => {
const layerId = layer.getProperties().id,
@@ -295,15 +289,23 @@ export default {
// show all layers stored in the current selection
storedLayers.forEach(async layerName => {
- await this.$nextTick();
const model = getModelByAttributes({type: "layer", name: layerName});
if (model) {
model.set("isSelected", true);
}
});
-
- LoaderOverlay.hide();
+
+ // a bug in the loaderOverlay.hide() is not working, even if it's fired with a timeOut
+ // so here's a very! uncanny workaround to make it work in this case
+ await this.$nextTick();
+
+ // setTimout because something triggers LoaderOverlay.show() after the last $nextTick() and I can't figure out what
+ setTimeout(()=> {
+ // remove the classes manually
+ document.getElementById("loader").classList.remove("loader-is-loading");
+ document.getElementById("masterportal-container").classList.remove("blurry");
+ }, 1500);
},
/**
* @description Adds index of selection to extendedOptions to extend to option menu in the frontend.
@@ -373,7 +375,6 @@ export default {
if (this.selections[index].settings.bufferActive) {
this.selections[index].settings.bufferActive = false;
if (this.activeSelection === index) {
- this.setActiveSelection(null);
this.highlightSelection(index);
}
}
@@ -419,7 +420,6 @@ export default {
* @returns {void}
*/
removeLayer () {
- this.setActiveSelection(null);
this.map.getLayers().getArray().filter(layer => layer.get("name") === "selection_manager").forEach(layer => this.map.removeLayer(layer));
},
/**
@@ -430,13 +430,21 @@ export default {
removeSelection (index) {
this.selections.splice(index, 1);
+ // if no selections are left => remove the ol layer
if (this.selections.length === 0) {
+ this.inputActiveSelection(null);
this.removeLayer();
}
+ // if selection was in cache => remove it there as well
if (this.selectionsToMerge.includes(index)) {
this.selectionsToMerge.splice(this.selectionsToMerge.indexOf(index), 1);
}
+
+ // if selection was active selection => reset active selection
+ if (this.selections.length > 0 && index === this.activeSelection) {
+ this.inputActiveSelection(0);
+ }
},
/**
* @description Resets the whole this.selections array
@@ -445,7 +453,7 @@ export default {
removeAllSelections () {
this.clearAllSelections();
this.removeLayer();
- this.setActiveSelection(null);
+ this.inputActiveSelection(null);
},
/**
* @description Merges selections from selectionToMerge array into a single selection.
@@ -507,11 +515,13 @@ export default {
:locale="currentLocale"
/>