Skip to content

Commit fb8bcb0

Browse files
Der-Alex-KDer-Alex-K
authored
DAVE-697 (#464)
1 parent ceddfb1 commit fb8bcb0

File tree

1 file changed

+82
-106
lines changed

1 file changed

+82
-106
lines changed

‎frontend/src/components/messstelle/MessstelleGeometrie.vue

Lines changed: 82 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import type MessquerschnittInfoDTO from "@/types/messstelle/MessquerschnittInfoD
1111
1212
import * as SVG from "@svgdotjs/svg.js";
1313
import { Svg } from "@svgdotjs/svg.js";
14-
import { chain } from "lodash";
1514
import { computed, nextTick, onMounted, ref, watch } from "vue";
1615
1716
import { useMessstelleStore } from "@/store/MessstelleStore";
@@ -84,107 +83,76 @@ function draw() {
8483
startY.value = 250;
8584
canvas.value.clear();
8685
querschnittGroup.value = canvas.value.group();
87-
const directions: Array<Himmelsrichtungen> = [];
88-
const groupedByDirection = chain(props.messquerschnitte)
89-
.filter((messquerschnitt) => {
90-
if (directions.includes(messquerschnitt.fahrtrichtung)) {
91-
return false;
92-
} else {
93-
directions.push(messquerschnitt.fahrtrichtung);
94-
return true;
95-
}
96-
})
97-
.groupBy("fahrtrichtung")
98-
.map((value, key) => ({ direction: key, data: value }))
99-
.value();
100-
drawArrowsPointingSouth(groupedByDirection);
86+
drawArrowsPointingSouth();
10187
startX.value += 500;
102-
drawArrowsPointingNorth(groupedByDirection);
88+
drawArrowsPointingNorth();
10389
rotateArrowsIfNecessary();
10490
}
10591
106-
function drawArrowsPointingSouth(
107-
groupedByDirection: {
108-
data: MessquerschnittInfoDTO[];
109-
direction: string;
110-
}[]
111-
) {
112-
const arrayOfDataForDirectionSouth = groupedByDirection.find(
113-
(obj) =>
114-
obj.direction === Himmelsrichtungen.SUED ||
115-
obj.direction === Himmelsrichtungen.WEST
92+
function drawArrowsPointingSouth() {
93+
querschnittGroup.value.add(
94+
SVG.SVG()
95+
.line(
96+
startX.value + 10,
97+
startY.value,
98+
startX.value + 10,
99+
startY.value + 850
100+
)
101+
.stroke({
102+
width: strokeSize,
103+
color: calculateColor(Himmelsrichtungen.SUED, Himmelsrichtungen.WEST),
104+
})
116105
);
117-
arrayOfDataForDirectionSouth?.data.forEach((mq) => {
118-
querschnittGroup.value.add(
119-
SVG.SVG()
120-
.line(
121-
startX.value + 10,
122-
startY.value,
123-
startX.value + 10,
124-
startY.value + 850
125-
)
126-
.stroke({
127-
width: strokeSize,
128-
color: calculateColor(mq.fahrtrichtung),
129-
})
130-
);
131-
querschnittGroup.value.add(
132-
SVG.SVG()
133-
.polygon(
134-
`${startX.value + 25},${startY.value + 853} ${
135-
startX.value - 5
136-
},${startY.value + 853} ${startX.value + 10} ${startY.value + 872}`
137-
)
138-
.stroke({
139-
width: strokeSize,
140-
color: calculateColor(mq.fahrtrichtung),
141-
})
142-
.attr("fill", calculateColor(mq.fahrtrichtung))
143-
);
144-
startX.value += 50;
145-
});
106+
querschnittGroup.value.add(
107+
SVG.SVG()
108+
.polygon(
109+
`${startX.value + 25},${startY.value + 853} ${
110+
startX.value - 5
111+
},${startY.value + 853} ${startX.value + 10} ${startY.value + 872}`
112+
)
113+
.stroke({
114+
width: strokeSize,
115+
color: calculateColor(Himmelsrichtungen.SUED, Himmelsrichtungen.WEST),
116+
})
117+
.attr(
118+
"fill",
119+
calculateColor(Himmelsrichtungen.SUED, Himmelsrichtungen.WEST)
120+
)
121+
);
122+
startX.value += 50;
146123
}
147124
148-
function drawArrowsPointingNorth(
149-
groupedByDirection: {
150-
data: MessquerschnittInfoDTO[];
151-
direction: string;
152-
}[]
153-
) {
154-
const arrayOfDataForDirectionNorth = groupedByDirection.find(
155-
(obj) =>
156-
obj.direction === Himmelsrichtungen.NORD ||
157-
obj.direction === Himmelsrichtungen.OST
125+
function drawArrowsPointingNorth() {
126+
querschnittGroup.value.add(
127+
SVG.SVG()
128+
.line(
129+
startX.value + 10,
130+
startY.value,
131+
startX.value + 10,
132+
startY.value + 850
133+
)
134+
.stroke({
135+
width: strokeSize,
136+
color: calculateColor(Himmelsrichtungen.OST, Himmelsrichtungen.NORD),
137+
})
158138
);
159-
arrayOfDataForDirectionNorth?.data.forEach((mq) => {
160-
querschnittGroup.value.add(
161-
SVG.SVG()
162-
.line(
163-
startX.value + 10,
164-
startY.value,
165-
startX.value + 10,
166-
startY.value + 850
167-
)
168-
.stroke({
169-
width: strokeSize,
170-
color: calculateColor(mq.fahrtrichtung),
171-
})
172-
);
173-
querschnittGroup.value.add(
174-
SVG.SVG()
175-
.polygon(
176-
`${startX.value + 25},${startY.value - 3} ${startX.value - 5},${
177-
startY.value - 3
178-
} ${startX.value + 10} ${startY.value - 22}`
179-
)
180-
.stroke({
181-
width: strokeSize,
182-
color: calculateColor(mq.fahrtrichtung),
183-
})
184-
.attr("fill", calculateColor(mq.fahrtrichtung))
185-
);
186-
startX.value += 50;
187-
});
139+
querschnittGroup.value.add(
140+
SVG.SVG()
141+
.polygon(
142+
`${startX.value + 25},${startY.value - 3} ${startX.value - 5},${
143+
startY.value - 3
144+
} ${startX.value + 10} ${startY.value - 22}`
145+
)
146+
.stroke({
147+
width: strokeSize,
148+
color: calculateColor(Himmelsrichtungen.OST, Himmelsrichtungen.NORD),
149+
})
150+
.attr(
151+
"fill",
152+
calculateColor(Himmelsrichtungen.OST, Himmelsrichtungen.NORD)
153+
)
154+
);
155+
startX.value += 50;
188156
}
189157
190158
function rotateArrowsIfNecessary() {
@@ -197,21 +165,29 @@ function rotateArrowsIfNecessary() {
197165
}
198166
}
199167
200-
/**
201-
* Wenn für der knotenarm im Array gefunden wurde, wird diese in der Grafik in der "activeColor" dargestellt,
202-
* ansonsten in der passiveColor.
203-
*/
204168
function calculateColor(
205-
himmelsrichtung: Himmelsrichtungen
169+
himmelsrichtung1: Himmelsrichtungen,
170+
himmelsrichtung2: Himmelsrichtungen
206171
): string | undefined {
207-
let color = props.passiveColor;
208-
209-
const gefilteterKnotenarm = selectedMessquerschnitte.value.filter(
210-
(k) => k.fahrtrichtung === himmelsrichtung
172+
// Wenn selected dann active
173+
const selectedKnotenarm = selectedMessquerschnitte.value.filter(
174+
(k) =>
175+
k.fahrtrichtung === himmelsrichtung1 ||
176+
k.fahrtrichtung === himmelsrichtung2
177+
)[0];
178+
if (selectedKnotenarm) {
179+
return props.activeColor;
180+
}
181+
// Wenn nicht selected, aber vorhanden, dann passiv
182+
const existingKnotenarm = props.messquerschnitte.filter(
183+
(k) =>
184+
k.fahrtrichtung === himmelsrichtung1 ||
185+
k.fahrtrichtung === himmelsrichtung2
211186
)[0];
212-
if (gefilteterKnotenarm) {
213-
color = props.activeColor;
187+
if (existingKnotenarm) {
188+
return props.passiveColor;
214189
}
215-
return color;
190+
// wenn nicht selected und nicht vorhanden, dann transparent
191+
return "transparent";
216192
}
217193
</script>

0 commit comments

Comments
 (0)