Update print view (#11)

r00tat · Oct 4, 2023 · f585385 · f585385
1 parent 9224ac6
commit f585385
Show file tree

Hide file tree

Showing 20 changed files with 748 additions and 367 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,14 +14,14 @@
     "updateClusters": "npx tsc --outDir dist src/server/cluster-import && node dist/server/cluster-import.js"
   },
   "dependencies": {
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@mdi/js": "^7.2.96",
     "@mdi/react": "^1.6.1",
     "@mui/icons-material": "^5.11.16",
-    "@mui/material": "^5.12.0",
+    "@mui/material": "^5.14.11",
     "@mui/x-data-grid": "^6.1.0",
-    "@mui/x-date-pickers": "^6.1.0",
+    "@mui/x-date-pickers": "^6.16.0",
     "@turf/bbox-polygon": "^6.5.0",
     "@turf/boolean-within": "^6.5.0",
     "@turf/center": "^6.5.0",

diff --git a/src/components/FirecallItems/FirecallItemDialog.tsx b/src/components/FirecallItems/FirecallItemDialog.tsx
@@ -52,6 +52,10 @@ export default function FirecallItemDialog({
 
   const handleChange = (event: SelectChangeEvent) => {
     setItemField('type', event.target.value);
+    setFirecallItem((prev) => ({
+      ...firecallItemInfo(event.target.value).factory(),
+      ...prev,
+    }));
   };
 
   return (

diff --git a/src/components/FirecallItems/infos/area.tsx b/src/components/FirecallItems/infos/area.tsx
@@ -19,6 +19,7 @@ export const areaInfo: FirecallItemInfo<Connection> = {
     name: 'Bezeichnung',
     beschreibung: 'Beschreibung',
     color: 'Farbe (HTML bzw. Englisch)',
+    opacity: 'Deckkraft (in Prozent)',
   },
   dateFields: [],
   factory: () => ({
@@ -29,6 +30,8 @@ export const areaInfo: FirecallItemInfo<Connection> = {
     destLng: mapPosition.lng + 0.0001,
     positions: JSON.stringify([]),
     color: 'blue',
+    opacity: 50,
+    datum: new Date().toISOString(),
   }),
   popupFn: (item: Connection) => (
     <>

diff --git a/src/components/FirecallItems/infos/circle.tsx b/src/components/FirecallItems/infos/circle.tsx
@@ -28,6 +28,7 @@ export const circleInfo: FirecallItemInfo<Circle> = {
     beschreibung: '',
     color: 'green',
     radius: 50,
+    datum: new Date().toISOString(),
   }),
   popupFn: (item: Circle) => (
     <>

diff --git a/src/components/FirecallItems/infos/connection.tsx b/src/components/FirecallItems/infos/connection.tsx
@@ -64,6 +64,7 @@ export const connectionInfo: FirecallItemInfo<Connection> = {
     destLng: mapPosition.lng + 0.0001,
     positions: JSON.stringify([]),
     color: 'blue',
+    datum: new Date().toISOString(),
   }),
   popupFn: (item: Connection) => (
     <>

diff --git a/src/components/FirecallItems/infos/diary.tsx b/src/components/FirecallItems/infos/diary.tsx
@@ -2,12 +2,15 @@ import moment from 'moment';
 import { Diary, FirecallItem } from '../../firebase/firestore';
 import { markerIcon } from '../icons';
 import { FirecallItemInfo } from './types';
+import { formatTimestamp } from '../../../common/time-format';
 
 export const diaryItemInfo: FirecallItemInfo<Diary> = {
   name: 'Einsatztagebuch',
   title: (item) => `${item.name || ''}`,
   info: (item) =>
-    `${item.datum} ${item.von || item.an ? `${item.von} => ${item.an}` : ''}`,
+    `${formatTimestamp(item.datum)} ${
+      item.von || item.an ? `${item.von} => ${item.an}` : ''
+    }`,
   body: (item) => `${item.beschreibung || ''}`,
   fields: {
     name: 'Bezeichnung',

diff --git a/src/components/FirecallItems/infos/line.tsx b/src/components/FirecallItems/infos/line.tsx
@@ -31,6 +31,7 @@ export const lineInfo: FirecallItemInfo<Line> = {
     positions: JSON.stringify([]),
     color: 'green',
     opacity: 100,
+    datum: new Date().toISOString(),
   }),
   popupFn: (item: Line) => (
     <>

diff --git a/src/components/FirecallItems/infos/marker.tsx b/src/components/FirecallItems/infos/marker.tsx
@@ -19,7 +19,7 @@ export const markerInfo: FirecallItemInfo<FirecallItemMarker> = {
     type: 'marker',
     name: '',
     beschreibung: '',
-    datum: '',
+    datum: new Date().toISOString(),
   }),
   // fieldTypes: { beschreibung: 'multiline' },
   dialogText: (item) => `Markierung`,

diff --git a/src/components/FirecallItems/infos/vehicle.tsx b/src/components/FirecallItems/infos/vehicle.tsx
@@ -9,10 +9,16 @@ export const vehicleItemInfo: FirecallItemInfo<Fzg> = {
   title: (item) => `${item.name} ${item.fw}`,
   info: (vehicle) => `1:${vehicle.besatzung || 0} ATS: ${vehicle.ats || 0}`,
   body: (vehicle) => `${
-    vehicle.alarmierung ? 'Alarmierung: ' + vehicle.alarmierung : ''
+    vehicle.alarmierung
+      ? 'Alarmierung: ' + formatTimestamp(vehicle.alarmierung)
+      : ''
   }
-  ${vehicle.eintreffen ? ' Eintreffen: ' + vehicle.eintreffen : ''}
-  ${vehicle.abruecken ? ' Abrücken: ' + vehicle.abruecken : ''}
+  ${
+    vehicle.eintreffen
+      ? ' Eintreffen: ' + formatTimestamp(vehicle.eintreffen)
+      : ''
+  }
+  ${vehicle.abruecken ? ' Abrücken: ' + formatTimestamp(vehicle.abruecken) : ''}
   Position ${vehicle.lat} ${vehicle.lng}`,
   fields: {
     name: 'Bezeichnung',
@@ -33,10 +39,13 @@ export const vehicleItemInfo: FirecallItemInfo<Fzg> = {
       beschreibung: '',
       fw: '',
       type: 'vehicle',
-      alarmierung: moment().toISOString(),
-      eintreffen: moment().toISOString(),
+      // alarmierung: moment().toISOString(),
+      // eintreffen: moment().toISOString(),
+      alarmierung: '',
+      eintreffen: '',
       ats: 0,
       rotation: '0',
+      datum: new Date().toISOString(),
     } as Fzg),
   dialogText: (item) => `Einsatzfahrzeug`,
   icon: (gisObj: FirecallItem) =>

diff --git a/src/components/Map/MapActionButtons.tsx b/src/components/Map/MapActionButtons.tsx
@@ -26,6 +26,7 @@ export default function MapActionButtons({ map }: MapActionButtonsOptions) {
     (item?: FirecallItem) => {
       if (item) {
         addDoc(collection(firestore, 'call', firecallId, 'item'), {
+          datum: new Date().toISOString(),
           ...firecallItemInfo(item.type).factory(),
           ...item,
           lat: map.getCenter().lat,

diff --git a/src/components/Map/markers/AreaMarker.tsx b/src/components/Map/markers/AreaMarker.tsx
@@ -138,7 +138,8 @@ export default function AreaMarker({ record, selectItem }: AreaMarkerProps) {
         positions={positions}
         pathOptions={{
           color: record.color || '#0000ff',
-          opacity: ((record as any)?.opacity || 100.0) / 100,
+          opacity: ((record as any)?.opacity || 50.0) / 100,
+          fillOpacity: ((record as any)?.opacity || 50.0) / 100,
         }}
       >
         <Popup>

diff --git a/src/components/Map/markers/FirecallMarker.tsx b/src/components/Map/markers/FirecallMarker.tsx
@@ -1,6 +1,7 @@
 import { doc, setDoc } from 'firebase/firestore';
 import L, { LeafletEventHandlerFnMap } from 'leaflet';
-import { Marker, Popup } from 'react-leaflet';
+import { useEffect } from 'react';
+import { Marker, Popup, useMap } from 'react-leaflet';
 import { defaultPosition } from '../../../hooks/constants';
 import { firestore } from '../../firebase/firebase';
 import { Firecall } from '../../firebase/firestore';
@@ -36,6 +37,15 @@ function onDragEnd(firecall: Firecall, event: L.DragEndEvent) {
 }
 
 export default function FirecallMarker({ firecall }: FirecallMarkerProps) {
+  const map = useMap();
+
+  useEffect(() => {
+    map.setView([
+      firecall.lat || defaultPosition.lat,
+      firecall.lng || defaultPosition.lng,
+    ]);
+  }, [firecall.lat, firecall.lng, map]);
+
   return (
     <Marker
       position={[

diff --git a/src/components/inputs/DateTimePicker.tsx b/src/components/inputs/DateTimePicker.tsx
@@ -1,11 +1,14 @@
-import TextField from '@mui/material/TextField';
+import IconButton from '@mui/material/IconButton';
 import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import type {} from '@mui/x-date-pickers/themeAugmentation';
-import moment, { Moment } from 'moment';
-import React from 'react';
-import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import { Moment } from 'moment';
 import 'moment/locale/de';
+import TimeIcon from '@mui/icons-material/AccessTime';
+import Grid from '@mui/material/Grid';
+import Tooltip from '@mui/material/Tooltip';
+import moment from 'moment';
 
 export interface DateTimePickerProps {
   value: Moment | null;
@@ -20,16 +23,30 @@ export default function MyDateTimePicker({
 }: DateTimePickerProps) {
   // const [value, setValue] = React.useState<Moment | null>(moment());
   return (
-    <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="de-DE">
-      <DateTimePicker
-        slotProps={{ textField: { fullWidth: true, margin: 'dense' } }}
-        label={label}
-        value={value}
-        onChange={(newValue) => {
-          setValue(newValue);
-        }}
-        ampm={false}
-      />
-    </LocalizationProvider>
+    <Grid container>
+      <Grid item xs={11}>
+        <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="de-DE">
+          <DateTimePicker
+            slotProps={{
+              textField: { fullWidth: true, margin: 'dense' },
+              field: { clearable: true },
+            }}
+            label={label}
+            value={value}
+            onChange={(newValue) => {
+              setValue(newValue);
+            }}
+            ampm={false}
+          />
+        </LocalizationProvider>
+      </Grid>
+      <Grid item xs={1}>
+        <Tooltip title="Auf aktuelle Uhrzeit setzten">
+          <IconButton onClick={() => setValue(moment())}>
+            <TimeIcon />
+          </IconButton>
+        </Tooltip>
+      </Grid>
+    </Grid>
   );
 }