From 833a052fc29e11a5809bb2af730e7f4c63c34cc0 Mon Sep 17 00:00:00 2001 From: Anton Tranelis Date: Mon, 12 May 2025 11:08:57 +0200 Subject: [PATCH] loading svgs from backend --- src/Components/Map/Layer.tsx | 2 +- .../Subcomponents/Controls/SearchControl.tsx | 10 +- src/Components/Profile/ProfileForm.tsx | 5 +- src/Utils/MarkerIconFactory.ts | 64 ++------ src/assets/css/marker-icons.css | 150 ++---------------- src/types/FormState.d.ts | 3 +- src/types/Item.d.ts | 3 +- src/types/LayerProps.d.ts | 3 +- 8 files changed, 40 insertions(+), 200 deletions(-) diff --git a/src/Components/Map/Layer.tsx b/src/Components/Map/Layer.tsx index 9e4cc6cd..b359cab7 100644 --- a/src/Components/Map/Layer.tsx +++ b/src/Components/Map/Layer.tsx @@ -43,7 +43,7 @@ export const Layer = ({ menuIcon = 'MapPinIcon', menuText = 'add new place', menuColor = '#2E7D32', - markerIcon = 'point', + markerIcon, markerShape = 'circle', markerDefaultColor = '#777', markerDefaultColor2 = 'RGBA(35, 31, 32, 0.2)', diff --git a/src/Components/Map/Subcomponents/Controls/SearchControl.tsx b/src/Components/Map/Subcomponents/Controls/SearchControl.tsx index f95bb82a..1d974aa1 100644 --- a/src/Components/Map/Subcomponents/Controls/SearchControl.tsx +++ b/src/Components/Map/Subcomponents/Controls/SearchControl.tsx @@ -211,7 +211,10 @@ export const SearchControl = () => { onClick={() => { searchInput.current?.blur() marker(new LatLng(geo.geometry.coordinates[1], geo.geometry.coordinates[0]), { - icon: MarkerIconFactory('circle', '#777', 'RGBA(35, 31, 32, 0.2)', 'point'), + icon: MarkerIconFactory('circle', '#777', 'RGBA(35, 31, 32, 0.2)', { + image: + '', + }), }) .addTo(map) .bindPopup( @@ -266,7 +269,10 @@ export const SearchControl = () => { marker( new LatLng(extractCoordinates(value)![0], extractCoordinates(value)![1]), { - icon: MarkerIconFactory('circle', '#777', 'RGBA(35, 31, 32, 0.2)', 'point'), + icon: MarkerIconFactory('circle', '#777', 'RGBA(35, 31, 32, 0.2)', { + image: + '', + }), }, ) .addTo(map) diff --git a/src/Components/Profile/ProfileForm.tsx b/src/Components/Profile/ProfileForm.tsx index 03eefc5b..bdb1b76d 100644 --- a/src/Components/Profile/ProfileForm.tsx +++ b/src/Components/Profile/ProfileForm.tsx @@ -22,6 +22,7 @@ import { TabsForm } from './Templates/TabsForm' import type { FormState } from '#types/FormState' import type { Item } from '#types/Item' import type { Tag } from '#types/Tag' +import type { markerIcon } from '#utils/MarkerIconFactory' /** * @category Profile @@ -39,7 +40,7 @@ export function ProfileForm() { telephone: '', next_appointment: '', image: '', - marker_icon: '', + marker_icon: {} as markerIcon, offers: [] as Tag[], needs: [] as Tag[], relations: [] as Item[], @@ -132,7 +133,7 @@ export function ProfileForm() { next_appointment: item?.next_appointment ?? '', image: item?.image ?? '', // Do we actually mean marker_icon here? - marker_icon: item?.markerIcon ?? '', + marker_icon: item?.markerIcon, offers, needs, relations, diff --git a/src/Utils/MarkerIconFactory.ts b/src/Utils/MarkerIconFactory.ts index 1b1bcf35..2b2caa49 100644 --- a/src/Utils/MarkerIconFactory.ts +++ b/src/Utils/MarkerIconFactory.ts @@ -2,6 +2,13 @@ /* eslint-disable @typescript-eslint/no-unsafe-return */ import { divIcon, Point } from 'leaflet' +import { useAppState } from '#components/AppShell/hooks/useAppState' + +export interface markerIcon { + image: string + size?: number +} + const createSvg = (shape: string, markerColor: string, borderColor: string) => { const svgMap = { circle: @@ -29,62 +36,11 @@ const createSvg = (shape: string, markerColor: string, borderColor: string) => { return svgMap[shape] } -const addIcon = (icon: string) => { - switch (icon) { - case 'point': - return '' - case 'calendar': - return '' - case 'user': - return '' - case 'fire': - return '' - case 'tree': - return '' - case 'music': - return '' - case 'drum': - return '' - case 'quest': - return '' - case 'compass': - return '' - case 'liebevoll.jetzt': - return ' ' - case 'group': - return '' - case 'puzzle': - return '' - case 'staff-snake': - return '' - case 'flower': - return '' - case 'network': - return '' - case 'crosshair': - return '' - case 'shop': - return '' - case 'plant': - return '' - case 'circle-dot': - return '' - case 'cannabis': - return '' - case 'steps': - return '' - case 'suitcase': - return '' - case 'offer': - return '' - default: - return '' - } -} +const MarkerIconFactory = (shape: string, color1: string, color2: string, icon: markerIcon) => { + const appState = useAppState() -const MarkerIconFactory = (shape: string, color1: string, color2: string, icon: string) => { return divIcon({ - html: `${createSvg(shape, color1, color2)}${addIcon(icon)}`, + html: `
${createSvg(shape, color1, color2)}
`, iconAnchor: [17, 40], popupAnchor: [0, -40], iconSize: new Point(40, 46), diff --git a/src/assets/css/marker-icons.css b/src/assets/css/marker-icons.css index 836c1ef0..f46a16dc 100644 --- a/src/assets/css/marker-icons.css +++ b/src/assets/css/marker-icons.css @@ -1,139 +1,13 @@ -.calendar-icon { +.svg-container { position: relative; - top: -35px; - left: 10px; - width: 13px; -} - -.user-icon { - position: relative; - top: -36px; - left: 10px; - width: 13px; -} - -.circle-icon { - position: relative; - top: -33px; - left: 10px; - width: 13px; -} - -.fire-icon { - position: relative; - top: -36px; - left: 10px; - width: 13px; -} - -.tree-icon { - position: relative; - top: -38px; - left: 4px; - width: 24px; -} - -.music-icon { - position: relative; - top: -35px; - left: 4px; - width: 24px; -} - -.quest-icon { - position: relative; - top: -34px; - left: 4px; - width: 24px; -} - -.drum-icon { - position: relative; - top: -38px; - left: 4px; - width: 24px; -} - -.compass-icon { - position: relative; - top: -36.5px; - left: 4px; - width: 24px; -} - -.group-icon { - position: relative; - top: -37px; - left: 4px; - width: 24px; -} - -.liebevoll-jetzt-icon{ - position: relative; - top: -35px; - left: 4px; - width: 24px; -} - -.staff-snake-icon { - position: relative; - top: -35px; - left: 4px; - width: 24px; -} - -.flower-icon { - position: relative; - top: -35px; - left: 4px; - width: 24px; -} - -.network-icon { - position: relative; - top: -35px; - left: 4px; - width: 24px; -} - -.shop-icon { - position: relative; - top: -34px; - left: 4px; - width: 24px; -} - -.plant-icon { - position: relative; - top: -34px; - left: 4px; - width: 24px; -} - -.circle-dot-icon { - position: relative; - top: -36px; - left: 4px; - width: 24px; -} - -.steps-icon { - position: relative; - top: -34px; - left: 4px; - width: 24px; -} - -.suitcase-icon { - position: relative; - top: -34px; - left: 4px; - width: 24px; -} - -.offer-icon { - position: relative; - top: -34.5px; - left: 4px; - width: 24px; -} \ No newline at end of file + width: 33px; /* gleiche Breite wie das untere SVG */ + height: 44px; /* gleiche Höhe wie das untere SVG */ + } + + .overlay-svg { + position: absolute; + width: 12.5px; + top: calc(50% - 5px); + left: 50%; + transform: translate(-50%, -50%); + } \ No newline at end of file diff --git a/src/types/FormState.d.ts b/src/types/FormState.d.ts index a0ea8830..2384e6d2 100644 --- a/src/types/FormState.d.ts +++ b/src/types/FormState.d.ts @@ -1,3 +1,4 @@ +import type { markerIcon } from '#utils/MarkerIconFactory' import type { Item } from './Item' import type { Tag } from './Tag' @@ -13,7 +14,7 @@ export interface FormState { telephone: string next_appointment: string image: string - marker_icon: string + marker_icon: markerIcon | undefined offers: Tag[] needs: Tag[] relations: Item[] diff --git a/src/types/Item.d.ts b/src/types/Item.d.ts index 84dab001..dba3aa8e 100644 --- a/src/types/Item.d.ts +++ b/src/types/Item.d.ts @@ -1,3 +1,4 @@ +import type { markerIcon } from '#utils/MarkerIconFactory' import type { ItemsApi } from './ItemsApi' import type { LayerProps } from './LayerProps' import type { Relation } from './Relation' @@ -43,7 +44,7 @@ export interface Item { needs?: TagIds status?: string color?: string - markerIcon?: string + markerIcon?: markerIcon avatar?: string new?: boolean contact?: string diff --git a/src/types/LayerProps.d.ts b/src/types/LayerProps.d.ts index 9c720bc4..0085af2c 100644 --- a/src/types/LayerProps.d.ts +++ b/src/types/LayerProps.d.ts @@ -1,3 +1,4 @@ +import type { markerIcon } from '#utils/MarkerIconFactory' import type { Item } from './Item' import type { ItemFormPopupProps } from './ItemFormPopupProps' import type { ItemsApi } from './ItemsApi' @@ -14,7 +15,7 @@ export interface LayerProps { menuIcon: string menuColor: string menuText: string - markerIcon: string + markerIcon: markerIcon markerShape: string markerDefaultColor: string markerDefaultColor2?: string