Merge pull request #33 from r00tat/enahance-import-and-display

Enahance import and display
r00tat · Jan 17, 2024 · b7644cf · b7644cf
2 parents 9f067d6 + e5613f2
commit b7644cf
Show file tree

Hide file tree

Showing 13 changed files with 87 additions and 59 deletions.
diff --git a/src/components/FirecallItems/FirecallItemCard.tsx b/src/components/FirecallItems/FirecallItemCard.tsx
@@ -1,13 +1,16 @@
 import { useDraggable } from '@dnd-kit/core';
 import { CSS } from '@dnd-kit/utilities';
 import CloseIcon from '@mui/icons-material/Close';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import Button from '@mui/material/Button';
 import Card from '@mui/material/Card';
 import CardActions from '@mui/material/CardActions';
 import CardContent from '@mui/material/CardContent';
+import Collapse from '@mui/material/Collapse';
 import Grid, { RegularBreakpoints } from '@mui/material/Grid';
-import IconButton from '@mui/material/IconButton';
+import IconButton, { IconButtonProps } from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
+import { styled } from '@mui/material/styles';
 import { collection, getDocs, query, where } from 'firebase/firestore';
 import { ReactNode, useCallback, useMemo, useState } from 'react';
 import { useFirecallId } from '../../hooks/useFirecall';
@@ -18,6 +21,21 @@ import { FirecallItem } from '../firebase/firestore';
 import FirecallItemUpdateDialog from './FirecallItemUpdateDialog';
 import { getItemInstance } from './elements';
 
+interface ExpandMoreProps extends IconButtonProps {
+  expand: boolean;
+}
+
+const ExpandMore = styled((props: ExpandMoreProps) => {
+  const { expand, ...other } = props;
+  return <IconButton {...other} />;
+})(({ theme, expand }) => ({
+  transform: !expand ? 'rotate(0deg)' : 'rotate(180deg)',
+  marginLeft: 'auto',
+  transition: theme.transitions.create('transform', {
+    duration: theme.transitions.duration.shortest,
+  }),
+}));
+
 export interface FirecallItemCardOptions extends RegularBreakpoints {
   item: FirecallItem;
   close?: () => void;
@@ -40,6 +58,7 @@ export default function FirecallItemCard({
   const [isConfirmOpen, setIsConfirmOpen] = useState(false);
   const updateItem = useFirecallItemUpdate();
   const firecallId = useFirecallId();
+  const [expanded, setExpanded] = useState(false);
 
   const item = useMemo(() => getItemInstance(itemData), [itemData]);
   const deleteFn = useCallback(
@@ -85,7 +104,7 @@ export default function FirecallItemCard({
       <Card ref={setNodeRef} style={style} {...listeners} {...attributes}>
         <CardContent>
           <Typography variant="h5" component="div" flex={1}>
-            {item.titleFn()} {item.deleted && <b>gelöscht</b>}
+            {item.title()} {item.deleted && <b>gelöscht</b>}
             {close && (
               <IconButton
                 onClick={close}
@@ -100,20 +119,6 @@ export default function FirecallItemCard({
           </Typography>
           <Typography variant="body2">{item.body()}</Typography>
 
-          <Grid container spacing={2}>
-            {subItems &&
-              subItems.map((si) => (
-                <FirecallItemCard
-                  item={si}
-                  key={si.id}
-                  xs={12}
-                  md={12}
-                  lg={6}
-                  xl={4}
-                  draggable
-                />
-              ))}
-          </Grid>
           {children}
         </CardContent>
         {item.editable !== false && (
@@ -128,8 +133,36 @@ export default function FirecallItemCard({
             >
               Löschen
             </Button>
+            {subItems && subItems.length > 0 && (
+              <ExpandMore
+                expand={expanded}
+                onClick={() => setExpanded((prev) => !prev)}
+                aria-expanded={expanded}
+                aria-label="show more"
+              >
+                <ExpandMoreIcon />
+              </ExpandMore>
+            )}
           </CardActions>
         )}
+        <Collapse in={expanded} timeout="auto" unmountOnExit>
+          <CardContent>
+            <Grid container spacing={2}>
+              {subItems &&
+                subItems.map((si) => (
+                  <FirecallItemCard
+                    item={si}
+                    key={si.id}
+                    xs={12}
+                    md={12}
+                    lg={6}
+                    xl={4}
+                    draggable
+                  />
+                ))}
+            </Grid>
+          </CardContent>
+        </Collapse>
       </Card>
       {displayUpdateDialog && (
         <FirecallItemUpdateDialog

diff --git a/src/components/FirecallItems/elements/CircleMarker.tsx b/src/components/FirecallItems/elements/CircleMarker.tsx
@@ -80,6 +80,7 @@ export class CircleMarker extends FirecallItemBase {
 
   public fieldTypes(): { [fieldName: string]: string } {
     return {
+      ...super.fieldTypes(),
       fill: 'boolean',
     };
   }

diff --git a/src/components/FirecallItems/elements/FirecallArea.tsx b/src/components/FirecallItems/elements/FirecallArea.tsx
@@ -91,6 +91,7 @@ export class FirecallArea extends FirecallItemBase {
 
   public fieldTypes(): { [fieldName: string]: string } {
     return {
+      ...super.fieldTypes(),
       opacity: 'number',
       alwaysShowMarker: 'boolean',
     };

diff --git a/src/components/FirecallItems/elements/FirecallAssp.tsx b/src/components/FirecallItems/elements/FirecallAssp.tsx
@@ -24,37 +24,10 @@ export class FirecallAssp extends FirecallItemBase {
     return 'Atemschutzsammelplatz';
   }
 
-  // public title(): string {
-  //   return `Marker ${this.name}`;
-  // }
-
-  // public info(): string {
-  //   return `${this.beschreibung || ''}`;
-  // }
-
-  // public body(): string {
-  //   return `${this.markerName()} ${this.name}
-  //       ${this.beschreibung}
-  //       position: ${this.lat},${this.lng}`;
-  // }
-
   public dialogText(): ReactNode {
     return <>ASSP {this.name}</>;
   }
 
-  // public fields(): { [fieldName: string]: string } {
-  //   return {
-  //     ...super.fields(),
-  //   };
-  // }
-
-  // public dateFields(): string[] {
-  //   return [];
-  // }
-
-  public fieldTypes(): { [fieldName: string]: string } {
-    return {};
-  }
   public popupFn(): ReactNode {
     return (
       <>

diff --git a/src/components/FirecallItems/elements/FirecallConnection.tsx b/src/components/FirecallItems/elements/FirecallConnection.tsx
@@ -50,6 +50,7 @@ export class FirecallConnection extends FirecallItemBase {
 
   public fieldTypes(): { [fieldName: string]: string } {
     return {
+      ...super.fieldTypes(),
       alwaysShowMarker: 'boolean',
     };
   }

diff --git a/src/components/FirecallItems/elements/FirecallDiary.tsx b/src/components/FirecallItems/elements/FirecallDiary.tsx
@@ -61,6 +61,7 @@ export class FirecallDiary extends FirecallItemBase {
 
   public fieldTypes(): { [fieldName: string]: string } {
     return {
+      ...super.fieldTypes(),
       name: 'textarea',
       beschreibung: 'textarea',
       art: 'select',

diff --git a/src/components/FirecallItems/elements/FirecallEl.tsx b/src/components/FirecallItems/elements/FirecallEl.tsx
@@ -59,10 +59,6 @@ export class FirecallEinsatzleitung extends FirecallItemBase {
     return elIcon;
   }
 
-  public fieldTypes(): { [fieldName: string]: string } {
-    return {};
-  }
-
   public static factory(): FirecallItemBase {
     return new FirecallEinsatzleitung();
   }

diff --git a/src/components/FirecallItems/elements/FirecallItemBase.tsx b/src/components/FirecallItems/elements/FirecallItemBase.tsx
@@ -131,16 +131,21 @@ export class FirecallItemBase {
       <>
         {this.beschreibung && (
           <>
-            {this.beschreibung}
-            <br />
+            {this.beschreibung.split('\n').map((s) => (
+              <>
+                {s}
+                <br />
+              </>
+            ))}
           </>
         )}
         {this.lat &&
           this.lng &&
           this.lat !== defaultPosition.lat &&
           this.lng !== defaultPosition.lng && (
             <>
-              Position: {this.lat},{this.lng}
+              Position: {Number.parseFloat('' + this.lat).toFixed(4)},
+              {Number.parseFloat('' + this.lng).toFixed(4)}
               {this.alt && ` ${Math.round(this.alt)}m`}
               <br />
             </>
@@ -171,7 +176,9 @@ export class FirecallItemBase {
   }
 
   public fieldTypes(): SimpleMap<string> {
-    return {};
+    return {
+      beschreibung: 'textarea',
+    };
   }
 
   public selectValues(): SimpleMap<SelectOptions> {

diff --git a/src/components/FirecallItems/elements/FirecallItemMarker.tsx b/src/components/FirecallItems/elements/FirecallItemMarker.tsx
@@ -57,6 +57,7 @@ export class FirecallItemMarker extends FirecallItemBase {
 
   public fieldTypes(): { [fieldName: string]: string } {
     return {
+      ...super.fieldTypes(),
       zeichen: 'TaktischesZeichen',
       attachments: 'attachment',
     };
@@ -130,4 +131,7 @@ export class FirecallItemMarker extends FirecallItemBase {
       </>
     );
   }
+  public info(): string {
+    return ``;
+  }
 }
diff --git a/src/components/FirecallItems/elements/FirecallRohr.tsx b/src/components/FirecallItems/elements/FirecallRohr.tsx
@@ -35,6 +35,7 @@ export class FirecallRohr extends FirecallItemBase {
 
   public fieldTypes(): { [fieldName: string]: string } {
     return {
+      ...super.fieldTypes(),
       rotation: 'number',
       durchfluss: 'number',
       art: 'select',

diff --git a/src/components/FirecallItems/elements/FirecallVehicle.tsx b/src/components/FirecallItems/elements/FirecallVehicle.tsx
@@ -51,6 +51,7 @@ export class FirecallVehicle extends FirecallItemBase {
 
   public fieldTypes(): { [fieldName: string]: string } {
     return {
+      ...super.fieldTypes(),
       rotation: 'number',
       ats: 'number',
     };

diff --git a/src/components/firebase/KmlImport.tsx b/src/components/firebase/KmlImport.tsx
@@ -29,6 +29,7 @@ export interface KmlGeoProperties {
   fill?: string;
   'fill-opacity'?: number;
   visibility?: string;
+  [key: string]: any;
 }
 
 export type GeoJsonFeatureColleaction = FeatureCollection<
@@ -48,6 +49,7 @@ function kmlToGeoJson(kml: string) {
     }
     return f;
   });
+  // console.info(`geojson\n${JSON.stringify(geoJson)}`);
   return geoJson;
 }
 
@@ -61,9 +63,21 @@ function parseGeoJson(geojson: GeoJsonFeatureColleaction): FirecallItem[] {
     const item: FirecallItem = {
       type: 'marker',
       name: `${f.properties.name}`,
+      datum: new Date(
+        f.properties['Time Stamp'] ??
+          f.properties['timestamp'] ??
+          new Date().toISOString()
+      ).toISOString(),
       lat: latlng.lat,
       lng: latlng.lng,
       alt: latlng.alt,
+      beschreibung: Object.entries(f.properties)
+        .filter(
+          ([k, v]) =>
+            ['styleurl', 'stylehash', 'name'].indexOf(k.toLowerCase()) < 0
+        )
+        .map(([k, v]) => `${k}: ${v}`)
+        .join('\n'),
     };
 
     if (f.geometry.type === 'Point') {
@@ -136,7 +150,7 @@ export default function KmlImport() {
 
               const fcItems = parseGeoJson(geoJson);
 
-              console.log(`importing Kml \n${JSON.stringify(fcItems)}`);
+              // console.log(`importing Kml \n${JSON.stringify(fcItems)}`);
 
               const layer = await addFirecallItem({
                 name: `KML Import ${formatTimestamp(new Date())}`,
@@ -148,12 +162,7 @@ export default function KmlImport() {
                   .map(addFirecallItem)
               );
 
-              // const ref = await importFirecall({
-              //   ...firecallData,
-              //   name: `${firecallData.name} Kopie ${formatTimestamp(new Date())}`,
-              // });
-
-              // console.debug(`import finished with ID: ${ref.id}`);
+              // console.debug(`import finished with IDs: ${ref.id}`);
               // return ref;
             } catch (err) {
               console.error('failed to parse geojson', err);

diff --git a/src/components/pages/Layers.tsx b/src/components/pages/Layers.tsx
@@ -143,7 +143,7 @@ export default function LayersPage() {
 
   const pointerSensor = useSensor(PointerSensor, {
     activationConstraint: {
-      distance: 0.01,
+      distance: 0.1,
     },
   });
   const mouseSensor = useSensor(MouseSensor);