Feature/rotation (#5)

* Add rotation to vehicles

* Add option to use external icon urls

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",

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)}

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<FirecallItemMarker> = {
   name: 'Marker',
@@ -11,6 +12,7 @@ export const markerInfo: FirecallItemInfo<FirecallItemMarker> = {
   fields: {
     name: 'Bezeichnung',
     beschreibung: 'Beschreibung',
+    icon: 'Icon URL',
   },
   dateFields: [],
   factory: () => ({
@@ -19,6 +21,7 @@ export const markerInfo: FirecallItemInfo<FirecallItemMarker> = {
     beschreibung: '',
     datum: '',
   }),
+  // fieldTypes: { beschreibung: 'multiline' },
   dialogText: (item) => `Markierung`,
   popupFn: (item: FirecallItem) => {
     return (
@@ -30,7 +33,13 @@ export const markerInfo: FirecallItemInfo<FirecallItemMarker> = {
     );
   },
   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;
   },
 };

src/components/FirecallItems/infos/rohr.tsx

@@ -11,8 +11,10 @@ export const rohrItemInfo: FirecallItemInfo<Rohr> = {
     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',

src/components/FirecallItems/infos/types.ts

@@ -12,6 +12,8 @@ export interface FirecallItemInfo<T = FirecallItem> {
   };
 
   dateFields: string[];
+
+  fieldTypes?: { [fieldName: string]: string };
   /**
    * render popup html
    */

src/components/FirecallItems/infos/vehicle.tsx

@@ -23,8 +23,10 @@ export const vehicleItemInfo: FirecallItemInfo<Fzg> = {
     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<Fzg> = {
       type: 'vehicle',
       alarmierung: moment().toISOString(),
       eintreffen: moment().toISOString(),
+      ats: 0,
+      rotation: '0',
     } as Fzg),
   dialogText: (item) => `Einsatzfahrzeug`,
   icon: (gisObj: FirecallItem) =>

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 (
     <>
-      <Marker
+      <RotatedMarker
         position={startPos}
         title={itemInfo.titleFn(record)}
         icon={icon}
@@ -88,6 +89,13 @@ export function FirecallItemMarkerDefault({
             updateFircallItemPos(firecallId, event, record);
           },
         }}
+        rotationAngle={
+          record?.rotation &&
+          !Number.isNaN(Number.parseInt(record?.rotation, 10))
+            ? Number.parseInt(record?.rotation, 10) % 360
+            : 0
+        }
+        rotationOrigin="center"
       >
         <Popup>
           <IconButton
@@ -98,7 +106,7 @@ export function FirecallItemMarkerDefault({
           </IconButton>
           {itemInfo.popupFn(record)}
         </Popup>
-      </Marker>
+      </RotatedMarker>
     </>
   );
 }

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<L.Marker, RotatedMarkerProps>(
+  ({ children, rotationAngle, rotationOrigin, ...props }, forwardRef) => {
+    const markerRef = useRef<L.Marker>();
+
+    useEffect(() => {
+      const marker = markerRef.current;
+      if (marker) {
+        (marker as any).setRotationAngle(rotationAngle);
+        (marker as any).setRotationOrigin(rotationOrigin);
+      }
+    }, [rotationAngle, rotationOrigin]);
+
+    return (
+      <Marker
+        ref={(ref) => {
+          if (ref) {
+            markerRef.current = ref;
+            // if (forwardRef) {
+            //   forwardRef.current = ref;
+            // }
+          }
+        }}
+        {...props}
+      >
+        {children}
+      </Marker>
+    );
+  }
+);
+
+RotatedMarker.displayName = 'RotatedMarker';

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 {

src/pages/api/fzg.ts

@@ -5,13 +5,16 @@ export default function handler(
   req: NextApiRequest,
   res: NextApiResponse<string>
 ) {
-  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(`
   <svg xmlns="http://www.w3.org/2000/svg" width="45px" height="20" fill="#ff0000">
-  <rect width="45" height="20" x="0" y="0" style="fill:#ff0000"></rect>
+  <rect width="45" height="20" x="0" y="0" style="fill:#ff0000" transform="rotate(${rotateInt})"></rect>
   <circle cx="4" cy="6" r="1.5" fill="blue" />
   <circle cx="4" cy="14" r="1.5" fill="blue" />
-  <line x1="8" y1="0" x2="8" y2="20" style="stroke:rgb(255,255,255);stroke-width:2" />
+  <line x1="8" y1="0" x2="8" y2="20" style="stroke:rgb(255,255,255);stroke-width:2" transform="rotate(${rotateInt})" />
   <text x="12" y="9" fill="#ffffff" font-family="Arial, Helvetica, sans-serif" font-size="8">
     ${name}
     <tspan x="12" y="17">${fw}</tspan>