diff --git a/package-lock.json b/package-lock.json index ef3cf66..1394ff3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,6 +28,7 @@ "geofire-common": "^6.0.0", "googleapis": "^117.0.0", "leaflet": "^1.7.1", + "leaflet-rotatedmarker": "^0.2.0", "leaflet.markercluster": "^1.5.3", "moment": "^2.29.1", "moment-timezone": "^0.5.34", @@ -5226,6 +5227,11 @@ "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.3.tgz", "integrity": "sha512-iB2cR9vAkDOu5l3HAay2obcUHZ7xwUBBjph8+PGtmW/2lYhbLizWtG7nTeYht36WfOslixQF9D/uSIzhZgGMfQ==" }, + "node_modules/leaflet-rotatedmarker": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/leaflet-rotatedmarker/-/leaflet-rotatedmarker-0.2.0.tgz", + "integrity": "sha512-yc97gxLXwbZa+Gk9VCcqI0CkvIBC9oNTTjFsHqq4EQvANrvaboib4UdeQLyTnEqDpaXHCqzwwVIDHtvz2mUiDg==" + }, "node_modules/leaflet.markercluster": { "version": "1.5.3", "resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz", diff --git a/package.json b/package.json index a6c879c..63c5263 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "geofire-common": "^6.0.0", "googleapis": "^117.0.0", "leaflet": "^1.7.1", + "leaflet-rotatedmarker": "^0.2.0", "leaflet.markercluster": "^1.5.3", "moment": "^2.29.1", "moment-timezone": "^0.5.34", diff --git a/src/components/FirecallItems/FirecallItemDialog.tsx b/src/components/FirecallItems/FirecallItemDialog.tsx index 4d2cee8..8124297 100644 --- a/src/components/FirecallItems/FirecallItemDialog.tsx +++ b/src/components/FirecallItems/FirecallItemDialog.tsx @@ -107,7 +107,9 @@ export default function FirecallItemDialog({ id={key} key={key} label={label} - type="text" + type={ + (itemInfo.fieldTypes && itemInfo.fieldTypes[key]) || 'text' + } fullWidth variant="standard" onChange={onChange(key)} diff --git a/src/components/FirecallItems/infos/marker.tsx b/src/components/FirecallItems/infos/marker.tsx index 924147d..e7984b7 100644 --- a/src/components/FirecallItems/infos/marker.tsx +++ b/src/components/FirecallItems/infos/marker.tsx @@ -1,6 +1,7 @@ import { FirecallItem, FirecallItemMarker } from '../../firebase/firestore'; import { markerIcon } from '../icons'; import { FirecallItemInfo } from './types'; +import L from 'leaflet'; export const markerInfo: FirecallItemInfo = { name: 'Marker', @@ -11,6 +12,7 @@ export const markerInfo: FirecallItemInfo = { fields: { name: 'Bezeichnung', beschreibung: 'Beschreibung', + icon: 'Icon URL', }, dateFields: [], factory: () => ({ @@ -19,6 +21,7 @@ export const markerInfo: FirecallItemInfo = { beschreibung: '', datum: '', }), + // fieldTypes: { beschreibung: 'multiline' }, dialogText: (item) => `Markierung`, popupFn: (item: FirecallItem) => { return ( @@ -30,7 +33,13 @@ export const markerInfo: FirecallItemInfo = { ); }, titleFn: (item: FirecallItem) => `${item.name}\n${item.beschreibung || ''}`, - icon: (gisObject: FirecallItem) => { + icon: (m: FirecallItem) => { + if ((m as any)?.icon) { + return L.icon({ + iconUrl: (m as any)?.icon, + iconSize: [24, 24], + }); + } return markerIcon; }, }; diff --git a/src/components/FirecallItems/infos/rohr.tsx b/src/components/FirecallItems/infos/rohr.tsx index 67172b2..1c20eda 100644 --- a/src/components/FirecallItems/infos/rohr.tsx +++ b/src/components/FirecallItems/infos/rohr.tsx @@ -11,8 +11,10 @@ export const rohrItemInfo: FirecallItemInfo = { art: 'Art (C/B oder Wasserwerfer)', name: 'Bezeichnung', durchfluss: 'Durchfluss (l/min)', + rotation: 'Drehung in Grad', }, dateFields: ['datum'], + fieldTypes: { rotation: 'number', durchfluss: 'number' }, factory: () => ({ art: 'C', diff --git a/src/components/FirecallItems/infos/types.ts b/src/components/FirecallItems/infos/types.ts index 90215fe..6e7e3f6 100644 --- a/src/components/FirecallItems/infos/types.ts +++ b/src/components/FirecallItems/infos/types.ts @@ -12,6 +12,8 @@ export interface FirecallItemInfo { }; dateFields: string[]; + + fieldTypes?: { [fieldName: string]: string }; /** * render popup html */ diff --git a/src/components/FirecallItems/infos/vehicle.tsx b/src/components/FirecallItems/infos/vehicle.tsx index e56f95f..d6d317b 100644 --- a/src/components/FirecallItems/infos/vehicle.tsx +++ b/src/components/FirecallItems/infos/vehicle.tsx @@ -23,8 +23,10 @@ export const vehicleItemInfo: FirecallItemInfo = { alarmierung: 'Alarmierung', eintreffen: 'Eintreffen', abruecken: 'Abrücken', + rotation: 'Drehung in Grad', }, dateFields: ['alarmierung', 'eintreffen', 'abruecken'], + fieldTypes: { rotation: 'number', ats: 'number' }, factory: () => ({ name: '', @@ -33,6 +35,8 @@ export const vehicleItemInfo: FirecallItemInfo = { type: 'vehicle', alarmierung: moment().toISOString(), eintreffen: moment().toISOString(), + ats: 0, + rotation: '0', } as Fzg), dialogText: (item) => `Einsatzfahrzeug`, icon: (gisObj: FirecallItem) => diff --git a/src/components/Map/markers/FirecallItemMarker.tsx b/src/components/Map/markers/FirecallItemMarker.tsx index bae5d1e..cccb730 100644 --- a/src/components/Map/markers/FirecallItemMarker.tsx +++ b/src/components/Map/markers/FirecallItemMarker.tsx @@ -10,6 +10,7 @@ import { firestore } from '../../firebase/firebase'; import { Connection, FirecallItem } from '../../firebase/firestore'; import { firecallItemInfo } from '../../FirecallItems/infos/firecallitems'; import ConnectionMarker from './ConnectionMarker'; +import { RotatedMarker } from './RotatedMarker'; export interface FirecallItemMarkerProps { record: FirecallItem; @@ -76,7 +77,7 @@ export function FirecallItemMarkerDefault({ return ( <> - {itemInfo.popupFn(record)} - + ); } diff --git a/src/components/Map/markers/RotatedMarker.tsx b/src/components/Map/markers/RotatedMarker.tsx new file mode 100644 index 0000000..51cc426 --- /dev/null +++ b/src/components/Map/markers/RotatedMarker.tsx @@ -0,0 +1,38 @@ +import 'leaflet-rotatedmarker'; +import { forwardRef, useEffect, useRef } from 'react'; +import { Marker, MarkerProps } from 'react-leaflet'; +export interface RotatedMarkerProps extends MarkerProps { + rotationAngle?: number; + rotationOrigin?: string; +} +export const RotatedMarker = forwardRef( + ({ children, rotationAngle, rotationOrigin, ...props }, forwardRef) => { + const markerRef = useRef(); + + useEffect(() => { + const marker = markerRef.current; + if (marker) { + (marker as any).setRotationAngle(rotationAngle); + (marker as any).setRotationOrigin(rotationOrigin); + } + }, [rotationAngle, rotationOrigin]); + + return ( + { + if (ref) { + markerRef.current = ref; + // if (forwardRef) { + // forwardRef.current = ref; + // } + } + }} + {...props} + > + {children} + + ); + } +); + +RotatedMarker.displayName = 'RotatedMarker'; diff --git a/src/components/firebase/firestore.ts b/src/components/firebase/firestore.ts index 4f2b5c1..06cc554 100644 --- a/src/components/firebase/firestore.ts +++ b/src/components/firebase/firestore.ts @@ -9,6 +9,7 @@ export interface FirecallItem { datum?: string; editable?: boolean; original?: FirecallItem; + rotation?: string; } export interface FirecallItemMarker extends FirecallItem { diff --git a/src/pages/api/fzg.ts b/src/pages/api/fzg.ts index 7640193..a8bef38 100644 --- a/src/pages/api/fzg.ts +++ b/src/pages/api/fzg.ts @@ -5,13 +5,16 @@ export default function handler( req: NextApiRequest, res: NextApiResponse ) { - const { name = '', fw = '' } = req.query; + const { name = '', fw = '', rotate = '0' } = req.query; + const rotateInt = !Number.isNaN(Number.parseInt('' + rotate, 10)) + ? Number.parseInt('' + rotate, 10) % 360 + : 0; res.setHeader(`Content-Type`, 'image/svg+xml').send(` - + - + ${name} ${fw}