Merge pull request #34 from r00tat/enhancement/layer-grouping

Allow layers to be grouped
r00tat · Jan 17, 2024 · 1e4a9be · 1e4a9be
2 parents b7644cf + 7a1a104
commit 1e4a9be
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 17 deletions.
diff --git a/src/components/FirecallItems/FirecallItemCard.tsx b/src/components/FirecallItems/FirecallItemCard.tsx
@@ -145,7 +145,7 @@ export default function FirecallItemCard({
             )}
           </CardActions>
         )}
-        <Collapse in={expanded} timeout="auto" unmountOnExit>
+        <Collapse in={expanded} timeout={1000} unmountOnExit>
           <CardContent>
             <Grid container spacing={2}>
               {subItems &&

diff --git a/src/components/FirecallItems/elements/FirecallItemLayer.tsx b/src/components/FirecallItems/elements/FirecallItemLayer.tsx
@@ -1,15 +1,17 @@
-import { FirecallItem, FirecallLayer } from '../../firebase/firestore';
+import { SimpleMap } from '../../../common/types';
+import { FirecallLayer } from '../../firebase/firestore';
 import { FirecallItemBase } from './FirecallItemBase';
 
-export interface FirecallItemLayerInt extends FirecallItem, FirecallLayer {}
-
 export class FirecallItemLayer extends FirecallItemBase {
-  public constructor(firecallItem?: FirecallItemLayerInt) {
+  grouped?: string;
+
+  public constructor(firecallItem?: FirecallLayer) {
     super({
       ...(firecallItem || { name: '' }),
       type: 'layer',
     } as FirecallItemLayer);
     this.type = 'layer';
+    ({ grouped: this.grouped = '' } = firecallItem || {});
   }
 
   public static firebaseCollectionName(): string {
@@ -23,4 +25,25 @@ export class FirecallItemLayer extends FirecallItemBase {
   public copy(): FirecallItemBase {
     return Object.assign(new FirecallItemLayer(this.data()), this);
   }
+
+  public fields(): SimpleMap<string> {
+    return {
+      ...super.fields(),
+      grouped: 'Elemente gruppieren',
+    };
+  }
+
+  public fieldTypes(): SimpleMap<string> {
+    return {
+      ...super.fieldTypes(),
+      grouped: 'boolean',
+    };
+  }
+
+  public data(): FirecallLayer {
+    return {
+      ...super.data(),
+      grouped: this.grouped,
+    };
+  }
 }
diff --git a/src/components/Map/layers/FirecallLayer.tsx b/src/components/Map/layers/FirecallLayer.tsx
@@ -3,6 +3,7 @@ import { useFirecallId } from '../../../hooks/useFirecall';
 import FirecallItemsLayer from './FirecallItemsLayer';
 import FirecallMarker from '../markers/FirecallMarker';
 import { useFirecallLayers } from '../../../hooks/useFirecallLayers';
+import MarkerClusterLayer from './MarkerClusterLayer';
 
 export default function FirecallLayer() {
   const firecallId = useFirecallId();
@@ -28,9 +29,16 @@ export default function FirecallLayer() {
             checked
             key={layerId}
           >
-            <LayerGroup>
-              <FirecallItemsLayer layer={layer} />
-            </LayerGroup>
+            {layer.grouped === 'true' && (
+              <MarkerClusterLayer>
+                <FirecallItemsLayer layer={layer} />
+              </MarkerClusterLayer>
+            )}
+            {layer.grouped !== 'true' && (
+              <LayerGroup>
+                <FirecallItemsLayer layer={layer} />
+              </LayerGroup>
+            )}
           </LayersControl.Overlay>
         ))}
     </>

diff --git a/src/components/firebase/firestore.ts b/src/components/firebase/firestore.ts
@@ -22,10 +22,8 @@ export interface FirecallItem {
   created?: string;
 }
 
-export interface FirecallLayer {
-  id?: string;
-  name: string;
-  beschreibung?: string;
+export interface FirecallLayer extends FirecallItem {
+  grouped?: string;
 }
 
 export interface FcAttachment {

diff --git a/src/components/pages/Layers.tsx b/src/components/pages/Layers.tsx
@@ -172,11 +172,11 @@ export default function LayersPage() {
             <Grid item xs={6} md={6} lg={6} xl={8}>
               <Typography variant="h5">Erstellte Ebenen</Typography>
               <Grid container spacing={2}>
-                {Object.values(layers).map((item) => (
+                {Object.entries(layers).map(([layerId, item]) => (
                   <DroppableFirecallCard
                     item={item}
-                    key={item.id}
-                    subItems={layerItems[item.id]}
+                    key={layerId}
+                    subItems={layerItems[layerId]}
                   />
                 ))}
               </Grid>

diff --git a/src/hooks/useFirecallLayers.ts b/src/hooks/useFirecallLayers.ts
@@ -13,7 +13,7 @@ export type FirecallLayers = SimpleMap<FirecallLayer>;
 export const FirecallLayersContext = React.createContext<FirecallLayers>({});
 
 export const useFirecallLayers = () => {
-  const { layers } = useContext(FirecallLayersContext);
+  const layers = useContext(FirecallLayersContext);
   return layers;
 };
 
@@ -26,5 +26,5 @@ export function useFirecallLayersFromFirstore(): FirecallLayers {
     queryConstraints: [orderBy('name', 'asc')],
   });
 
-  return { layers: Object.fromEntries(layers.map((l) => [l.id, l])) };
+  return Object.fromEntries(layers.map((l) => [l.id, l]));
 }