Bugfix/display issues

src/components/FirecallItems/FirecallItemCard.tsx

@@ -43,6 +43,7 @@ export interface FirecallItemCardOptions extends RegularBreakpoints {
   allowTypeChange?: boolean;
   children?: ReactNode;
   draggable?: boolean;
+  subItemsDraggable?: boolean;
 }
 
 export default function FirecallItemCard({
@@ -52,6 +53,7 @@ export default function FirecallItemCard({
   allowTypeChange,
   children,
   draggable = false,
+  subItemsDraggable = false,
   ...breakpoints
 }: FirecallItemCardOptions) {
   const [displayUpdateDialog, setDisplayUpdateDialog] = useState(false);
@@ -157,7 +159,7 @@ export default function FirecallItemCard({
                     md={12}
                     lg={6}
                     xl={4}
-                    draggable
+                    draggable={subItemsDraggable}
                   />
                 ))}
             </Grid>

src/components/FirecallItems/elements/FirecallArea.tsx

@@ -14,19 +14,19 @@ export class FirecallArea extends FirecallItemBase {
   positions?: string;
   color?: string;
   opacity?: number;
-  alwaysShowMarker?: boolean;
+  alwaysShowMarker?: string;
 
   public constructor(firecallItem?: Area) {
     super(firecallItem);
-    this.distance = firecallItem?.distance || 0;
-    this.destLat = firecallItem?.destLat || defaultPosition.lat;
-    this.destLng = firecallItem?.destLng || defaultPosition.lng + 0.0001;
-    this.positions = firecallItem?.positions || JSON.stringify([]);
-    this.color = firecallItem?.color || 'blue';
-    this.opacity = firecallItem?.opacity || 50;
-    this.alwaysShowMarker =
-      //firecallItem?.alwaysShowMarker === true ?? false;
-      (firecallItem?.alwaysShowMarker as unknown as string) === 'true' ?? false;
+    ({
+      distance: this.distance = 0,
+      destLat: this.destLat = defaultPosition.lat,
+      destLng: this.destLng = defaultPosition.lng + 0.0001,
+      positions: this.positions = JSON.stringify([]),
+      color: this.color = 'blue',
+      opacity: this.opacity = 50,
+      alwaysShowMarker: this.alwaysShowMarker,
+    } = firecallItem || {});
   }
 
   public copy(): FirecallArea {

src/components/FirecallItems/elements/FirecallConnection.tsx

@@ -13,7 +13,7 @@ export class FirecallConnection extends FirecallItemBase {
   positions?: string;
   distance?: number;
   color?: string;
-  alwaysShowMarker?: boolean;
+  alwaysShowMarker?: string;
 
   public constructor(firecallItem?: Connection) {
     super(firecallItem);
@@ -25,10 +25,8 @@ export class FirecallConnection extends FirecallItemBase {
         positions: this.positions,
         distance: this.distance,
         color: this.color,
+        alwaysShowMarker: this.alwaysShowMarker = 'false',
       } = firecallItem);
-      this.alwaysShowMarker =
-        (firecallItem?.alwaysShowMarker as unknown as string) === 'true' ??
-        false;
     }
   }
 
@@ -72,7 +70,7 @@ export class FirecallConnection extends FirecallItemBase {
   // }
 
   public info(): string {
-    return `Länge: ${this.distance || 0}m ${Math.ceil(
+    return `Länge: ${Math.round(this.distance || 0)}m ${Math.ceil(
       (this.distance || 0) / 20
     )} B-Längen`;
   }
@@ -83,8 +81,12 @@ export class FirecallConnection extends FirecallItemBase {
         {super.body()}
         {this.lat},{this.lng} => {this.destLat},{this.destLng}
         <br />
-        Länge: {this.distance}m<br />
-        Farbe: {this.color}
+        {this.distance && (
+          <>
+            Länge: {Math.round(this.distance)}m<br />
+          </>
+        )}
+        {this.color && <>Farbe: {this.color}</>}
       </>
     );
   }
@@ -121,7 +123,7 @@ export class FirecallConnection extends FirecallItemBase {
           {this.markerName()} {this.name}
         </b>
         <br />
-        {this.distance || 0}
+        {Math.round(this.distance || 0)}
         m, {Math.ceil((this.distance || 0) / 20)} B Schläuche
       </>
     );

src/components/FirecallItems/elements/FirecallLine.tsx

@@ -4,6 +4,7 @@ import { FirecallConnection } from './FirecallConnection';
 import { FirecallItemBase } from './FirecallItemBase';
 import { LatLngPosition } from '../../../common/geo';
 import React from 'react';
+import { Collapse } from '@mui/material';
 
 export class FirecallLine extends FirecallConnection {
   opacity?: number;
@@ -26,7 +27,7 @@ export class FirecallLine extends FirecallConnection {
   }
 
   public info(): string {
-    return `Länge: ${this.distance || 0}m`;
+    return `Länge: ${Math.round(this.distance || 0)}m`;
   }
 
   public static factory(): FirecallItemBase {
@@ -47,6 +48,18 @@ export class FirecallLine extends FirecallConnection {
     };
   }
 
+  public popupFn(): ReactNode {
+    return (
+      <>
+        <b>
+          {this.markerName()} {this.name}
+        </b>
+        <br />
+        {Math.round(this.distance || 0)}m
+      </>
+    );
+  }
+
   public body(): ReactNode {
     return (
       <>

src/components/FirecallItems/elements/area/AreaComponent.tsx

@@ -52,7 +52,7 @@ export default function AreaMarker({ record, selectItem }: AreaMarkerProps) {
 
   return (
     <>
-      {(record.alwaysShowMarker === true || showMarkers) &&
+      {(record.alwaysShowMarker === 'true' || showMarkers) &&
         positions.map((p, index) => (
           <Marker
             key={index}

src/components/FirecallItems/elements/connection/ConnectionComponent.tsx

@@ -55,7 +55,7 @@ export default function ConnectionMarker({
 
   return (
     <>
-      {(record.alwaysShowMarker === true || showMarkers) &&
+      {(record.alwaysShowMarker === 'true' || showMarkers) &&
         positions.map((p, index) => (
           <Marker
             key={index}

src/components/Map/PositionAction.tsx

@@ -7,7 +7,7 @@ import { usePositionContext } from './Position';
 
 export default function PositionAction() {
   const map = useMap();
-  const [position] = usePositionContext();
+  const [position, isPositionSet] = usePositionContext();
 
   const setPos = useCallback(() => {
     if (position) {
@@ -24,17 +24,19 @@ export default function PositionAction() {
         left: 16,
       }}
     >
-      <Fab
-        color="primary"
-        aria-label="add"
-        size="small"
-        onClick={(event) => {
-          event.preventDefault();
-          setPos();
-        }}
-      >
-        <LocationSearchingIcon />
-      </Fab>
+      {isPositionSet && (
+        <Fab
+          color="primary"
+          aria-label="add"
+          size="small"
+          onClick={(event) => {
+            event.preventDefault();
+            setPos();
+          }}
+        >
+          <LocationSearchingIcon />
+        </Fab>
+      )}
     </Box>
   );
 }

src/components/Map/RecordButton.tsx

@@ -28,11 +28,11 @@ export default function RecordButton() {
 
   const addPos = useCallback(
     async (newPos: LatLngPosition, record: Line) => {
+      // we need an id to update the item
       if (recordItem?.id) {
         console.info(
           `adding new position to track ${recordItem.id}: ${newPos}`
         );
-        // we need an id to update the item
         const allPos: LatLngPosition[] = [
           ...JSON.parse(record.positions || '[]'),
           newPos,
@@ -66,6 +66,7 @@ export default function RecordButton() {
           positions: JSON.stringify([[pos.lat, pos.lng]]),
           destLat: pos.lat,
           destLng: pos.lng,
+          color: `#${Math.floor(Math.random() * 16777215).toString(16)}`,
         };
         setPositions([[pos.lat, pos.lng]]);
         const ref = await addFirecallItem(newRecord);
@@ -81,7 +82,7 @@ export default function RecordButton() {
   const stopRecording = useCallback(
     async (pos: LatLng) => {
       if (recordItem) {
-        addPos([pos.lat, pos.lng], recordItem);
+        await addPos([pos.lat, pos.lng], recordItem);
       }
       setPositions([]);
       setRecordItem(undefined);
@@ -93,7 +94,7 @@ export default function RecordButton() {
   useEffect(() => {
     const interval = setInterval(() => {
       setCurrentTime(new Date());
-    }, 3000);
+    }, 2000);
 
     return () => {
       clearInterval(interval);
@@ -108,11 +109,16 @@ export default function RecordButton() {
       // more than 5m and > 1 sec or > 30 seconds
 
       const timeSinceLastPos = (+currentTime - +timestamp) / 1000;
-      if ((distance > 5 && timeSinceLastPos > 1) || timeSinceLastPos > 30) {
+      if ((distance > 5 && timeSinceLastPos > 1) || timeSinceLastPos > 15) {
+        // console.info(`updating pos`);
         map.setView(position);
         setTimestamp(new Date());
         addPos([position.lat, position.lng], recordItem);
+      } else {
+        // console.info(`distance or time to small`);
       }
+    } else {
+      // console.warn('not recording');
     }
   }, [
     addPos,

src/components/firebase/firestore.ts

@@ -83,12 +83,12 @@ export interface Connection extends FirecallItem {
   positions?: string;
   distance?: number;
   color?: string;
-  alwaysShowMarker?: boolean;
+  alwaysShowMarker?: string;
 }
 
 export interface Area extends Connection {
   opacity?: number;
-  alwaysShowMarker?: boolean;
+  alwaysShowMarker?: string;
 }
 
 export interface Line extends Connection {

src/components/pages/Layers.tsx

@@ -34,6 +34,10 @@ import {
 } from '@dnd-kit/core';
 import useFirecallItemUpdate from '../../hooks/useFirecallItemUpdate';
 import KmlImport from '../firebase/KmlImport';
+import FormGroup from '@mui/material/FormGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import Switch from '@mui/material/Switch';
 
 interface DropBoxProps {
   id: string;
@@ -80,6 +84,7 @@ export function DroppableFirecallCard({
 export default function LayersPage() {
   const { isAuthorized } = useFirebaseLogin();
   const [addDialog, setAddDialog] = useState(false);
+  const [dragEnabled, setDragEnabled] = useState(false);
   // const columns = useGridColumns();
   const firecallId = useFirecallId();
   const layers = useFirecallLayers();
@@ -145,11 +150,15 @@ export default function LayersPage() {
 
   const pointerSensor = useSensor(PointerSensor, {
     activationConstraint: {
-      distance: 0.1,
+      distance: 1,
     },
   });
   const mouseSensor = useSensor(MouseSensor);
-  const touchSensor = useSensor(TouchSensor);
+  const touchSensor = useSensor(TouchSensor, {
+    activationConstraint: {
+      distance: 1,
+    },
+  });
   const keyboardSensor = useSensor(KeyboardSensor);
 
   const sensors = useSensors(
@@ -172,13 +181,27 @@ export default function LayersPage() {
           </Typography>
           <Grid container spacing={2}>
             <Grid item xs={6} md={6} lg={6} xl={8}>
-              <Typography variant="h5">Erstellte Ebenen</Typography>
+              <Typography variant="h5">
+                Erstellte Ebenen
+                <FormGroup>
+                  <FormControlLabel
+                    control={
+                      <Switch
+                        checked={dragEnabled}
+                        onChange={() => setDragEnabled((old) => !old)}
+                      />
+                    }
+                    label={'Elemente verschieben'}
+                  />
+                </FormGroup>
+              </Typography>
               <Grid container spacing={2}>
                 {Object.entries(layers).map(([layerId, item]) => (
                   <DroppableFirecallCard
                     item={item}
                     key={layerId}
                     subItems={layerItems[layerId]}
+                    subItemsDraggable={dragEnabled}
                   />
                 ))}
               </Grid>
@@ -188,7 +211,11 @@ export default function LayersPage() {
               <DropBox id="default">keiner Ebene zuoordnen</DropBox>
               <Grid container spacing={2}>
                 {layerItems['default'].map((item) => (
-                  <FirecallItemCard item={item} key={item.id} draggable />
+                  <FirecallItemCard
+                    item={item}
+                    key={item.id}
+                    draggable={false}
+                  />
                 ))}
               </Grid>
             </Grid>