Fix date display

package.json

@@ -19,6 +19,7 @@
     "@mui/icons-material": "^5.2.4",
     "@mui/material": "^5.2.4",
     "@mui/x-data-grid": "^5.2.1",
+    "@mui/x-date-pickers": "^5.0.8",
     "@turf/bbox-polygon": "^6.5.0",
     "@turf/boolean-within": "^6.5.0",
     "@turf/center": "^6.5.0",

src/common/time-format.ts

@@ -2,7 +2,7 @@ import moment from 'moment';
 
 export const dateTimeFormat = 'DD.MM.YYYY HH:mm:ss';
 
-export function createTimestamp(timestamp?: string) {
+export function formatTimestamp(timestamp?: string) {
   return moment(timestamp).locale('de').format(dateTimeFormat);
 }
 export const timeFormats = [

src/components/DateTimePicker.tsx

@@ -0,0 +1,37 @@
+import TextField from '@mui/material/TextField';
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
+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/locale/de';
+
+export interface DateTimePickerProps {
+  value: Moment | null;
+  setValue: (newValue: Moment | null) => void;
+  label?: string;
+}
+
+export default function MyDateTimePicker({
+  value,
+  setValue,
+  label,
+}: DateTimePickerProps) {
+  // const [value, setValue] = React.useState<Moment | null>(moment());
+  return (
+    <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="de-DE">
+      <DateTimePicker
+        renderInput={(props) => (
+          <TextField {...props} fullWidth margin="dense" />
+        )}
+        label={label}
+        value={value}
+        onChange={(newValue) => {
+          setValue(newValue);
+        }}
+        ampm={false}
+      />
+    </LocalizationProvider>
+  );
+}

src/components/Einsaetze.tsx

@@ -10,6 +10,7 @@ import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { doc, orderBy, setDoc } from 'firebase/firestore';
 import { useCallback, useState } from 'react';
+import { formatTimestamp } from '../common/time-format';
 import { filterActiveItems, Firecall } from '../components/firebase/firestore';
 import useFirebaseCollection from '../hooks/useFirebaseCollection';
 import useFirebaseLogin from '../hooks/useFirebaseLogin';
@@ -76,7 +77,7 @@ function EinsatzCard({
             {firecallId === einsatz.id ? '(aktiv)' : ''}
           </Typography>
           <Typography sx={{ mb: 1.5 }} color="text.secondary">
-            {einsatz.date}
+            {formatTimestamp(einsatz.date)}
           </Typography>
           <Typography variant="body2">{einsatz.description}</Typography>
         </CardContent>

src/components/FirecallItems/EinsatzDialog.tsx

@@ -12,6 +12,8 @@ import { useFirecallSelect } from '../../hooks/useFirecall';
 import { defaultPosition } from '../../hooks/constants';
 import { firestore } from '../firebase/firebase';
 import { Firecall } from '../firebase/firestore';
+import MyDateTimePicker from '../DateTimePicker';
+import moment from 'moment';
 
 export interface EinsatzDialogOptions {
   onClose: (einsatz?: Firecall) => void;
@@ -29,6 +31,7 @@ export default function EinsatzDialog({
     einsatzDefault || {
       name: '',
       date: new Date().toLocaleString('de-DE'),
+      deleted: false,
     }
   );
   const { email } = useFirebaseLogin();
@@ -98,16 +101,13 @@ export default function EinsatzDialog({
           onChange={onChange('fw')}
           value={einsatz.fw}
         />
-        <TextField
-          margin="dense"
-          id="date"
-          label="Datum YYYY-MM-DD"
-          type="text"
-          fullWidth
-          variant="standard"
-          onChange={onChange('date')}
-          value={einsatz.date}
-        />
+        <MyDateTimePicker
+          label="Einsatzdatum"
+          value={moment(einsatz.date)}
+          setValue={(newValue) => {
+            setEinsatz({ ...einsatz, date: newValue?.toISOString() });
+          }}
+        ></MyDateTimePicker>
         <TextField
           margin="dense"
           id="description"

src/components/FirecallItems/FirecallItemDialog.tsx

@@ -9,8 +9,10 @@ import InputLabel from '@mui/material/InputLabel';
 import MenuItem from '@mui/material/MenuItem';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
 import TextField from '@mui/material/TextField';
-import { useState } from 'react';
+import moment from 'moment';
+import React, { useState } from 'react';
 import ConfirmDialog from '../ConfirmDialog';
+import MyDateTimePicker from '../DateTimePicker';
 import { FirecallItem } from '../firebase/firestore';
 import { firecallItemInfo, firecallItems } from './infos/firecallitems';
 import { FirecallItemInfo } from './infos/types';
@@ -36,19 +38,20 @@ export default function FirecallItemDialog({
 
   const itemInfo: FirecallItemInfo = firecallItemInfo(item.type);
 
+  const setItemField = (field: string, value: any) => {
+    setFirecallItem((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
   const onChange =
     (field: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
-      setFirecallItem((prev) => ({
-        ...prev,
-        [field]: event.target.value,
-      }));
+      setItemField(field, event.target.value);
     };
 
   const handleChange = (event: SelectChangeEvent) => {
-    setFirecallItem((prev) => ({
-      ...prev,
-      ['type']: event.target.value as string,
-    }));
+    setItemField('type', event.target.value);
   };
 
   return (
@@ -84,17 +87,34 @@ export default function FirecallItemDialog({
             </FormControl>
           )}
           {Object.entries(itemInfo.fields).map(([key, label]) => (
-            <TextField
-              margin="dense"
-              id={key}
-              key={key}
-              label={label}
-              type="text"
-              fullWidth
-              variant="standard"
-              onChange={onChange(key)}
-              value={((item as any)[key] as string) || ''}
-            />
+            <React.Fragment key={key}>
+              {itemInfo.dateFields.includes(key) && (
+                <MyDateTimePicker
+                  label={label}
+                  value={
+                    (((item as any)[key] as string) &&
+                      moment((item as any)[key] as string)) ||
+                    null
+                  }
+                  setValue={(newValue) => {
+                    setItemField(key, newValue?.toISOString());
+                  }}
+                />
+              )}
+              {!itemInfo.dateFields.includes(key) && (
+                <TextField
+                  margin="dense"
+                  id={key}
+                  key={key}
+                  label={label}
+                  type="text"
+                  fullWidth
+                  variant="standard"
+                  onChange={onChange(key)}
+                  value={((item as any)[key] as string) || ''}
+                />
+              )}
+            </React.Fragment>
           ))}
         </DialogContent>
         <DialogActions>

src/components/FirecallItems/infos/diary.tsx

@@ -1,25 +1,7 @@
-import L from 'leaflet';
-import { ReactNode } from 'react';
-import { createTimestamp } from '../../../common/time-format';
-import { toLatLng } from '../../../hooks/constants';
-import { mapPosition } from '../../../hooks/useMapPosition';
-import {
-  Connection,
-  Diary,
-  FirecallItem,
-  Fzg,
-  Rohr,
-} from '../../firebase/firestore';
-import {
-  asspIcon,
-  connectionIcon,
-  elIcon,
-  fallbackIcon,
-  markerIcon,
-} from '../icons';
-import { rohrItemInfo } from './rohr';
-import { FirecallItemInfo, FirecallItemInfoList } from './types';
-import { vehicleItemInfo } from './vehicle';
+import moment from 'moment';
+import { Diary, FirecallItem } from '../../firebase/firestore';
+import { markerIcon } from '../icons';
+import { FirecallItemInfo } from './types';
 
 export const diaryItemInfo: FirecallItemInfo<Diary> = {
   name: 'Einsatztagebuch',
@@ -42,7 +24,7 @@ export const diaryItemInfo: FirecallItemInfo<Diary> = {
     beschreibung: '',
     von: '',
     an: '',
-    datum: createTimestamp(),
+    datum: moment().toISOString(),
     erledigt: '',
   }),
   dialogText: (item) => `Eintrag ${item.name || ''}`,

src/components/FirecallItems/infos/rohr.tsx

@@ -1,6 +1,5 @@
 import L from 'leaflet';
-import { ReactNode } from 'react';
-import { createTimestamp } from '../../../common/time-format';
+import moment from 'moment';
 import { FirecallItem, Rohr } from '../../firebase/firestore';
 import { FirecallItemInfo } from './types';
 export const rohrItemInfo: FirecallItemInfo<Rohr> = {
@@ -20,7 +19,7 @@ export const rohrItemInfo: FirecallItemInfo<Rohr> = {
       name: '',
       durchfluss: 100,
       type: 'rohr',
-      datum: createTimestamp(),
+      datum: moment().toISOString(),
     } as Rohr),
   dialogText: (item) => `C/B Rohr oder Wasserwerfer`,
   popupFn: (gisObject: FirecallItem) => {

src/components/FirecallItems/infos/vehicle.tsx

@@ -1,5 +1,6 @@
 import L from 'leaflet';
-import { createTimestamp } from '../../../common/time-format';
+import moment from 'moment';
+import { formatTimestamp } from '../../../common/time-format';
 import { FirecallItem, Fzg } from '../../firebase/firestore';
 import { FirecallItemInfo } from './types';
 
@@ -30,8 +31,8 @@ export const vehicleItemInfo: FirecallItemInfo<Fzg> = {
       beschreibung: '',
       fw: '',
       type: 'vehicle',
-      alarmierung: createTimestamp(),
-      eintreffen: createTimestamp(),
+      alarmierung: moment().toISOString(),
+      eintreffen: moment().toISOString(),
     } as Fzg),
   dialogText: (item) => `Einsatzfahrzeug`,
   icon: (gisObj: FirecallItem) =>
@@ -60,19 +61,19 @@ export const vehicleItemInfo: FirecallItemInfo<Fzg> = {
         {v.alarmierung && (
           <>
             <br />
-            Alarmierung: {v.alarmierung}
+            Alarmierung: {formatTimestamp(v.alarmierung)}
           </>
         )}
         {v.eintreffen && (
           <>
             <br />
-            Eintreffen: {v.eintreffen}
+            Eintreffen: {formatTimestamp(v.eintreffen)}
           </>
         )}
         {v.abruecken && (
           <>
             <br />
-            Abrücken: {v.abruecken}{' '}
+            Abrücken: {formatTimestamp(v.abruecken)}
           </>
         )}
       </>

src/hooks/useFirecall.ts

@@ -5,6 +5,7 @@ import {
   onSnapshot,
   orderBy,
   query,
+  where,
 } from 'firebase/firestore';
 import {
   createContext,
@@ -40,6 +41,7 @@ export function useLastFirecall() {
     if (isAuthorized) {
       const q = query(
         collection(db, 'call'),
+        where('deleted', '==', false),
         orderBy('date', 'desc'),
         limit(1)
       );