-
-
-
Select {selectMode.name} position!
+
+
+
+
+
+
+
+ {children}
+
+
+ {newItemPopup &&
+
+ }
+
+
+ {selectMode != null &&
+
+
+
+ Select {selectMode.name} position!
+
-
+
+
+
-
-
-
);
}
diff --git a/src/Components/Map/data.ts b/src/Components/Map/data.ts
index c44f1b21..71991a11 100644
--- a/src/Components/Map/data.ts
+++ b/src/Components/Map/data.ts
@@ -70,7 +70,24 @@ export const events : Item[] = [
"end": "2022-10-08T12:00:00",
"tags": [5,6,11],
- }
+ },
+
+ {
+ "id": 247,
+ "name": "anderes Event",
+ "text": "Zu den Vollmonden vom März bis Oktober treffen sich traditionell Menschen zum gemeinsamen Musizieren, Tanzen, Spielen, Grillen und Entspannen am Gerloser Häuschen im Niesiger Wald.\r\n\r\nUhrzeit: immer ab 17 Uhr\r\n\r\nhttps://trommeln-fulda.de/vollmondtrommeln/",
+ "position": {
+ "type": "Point",
+ "coordinates": [
+ 9.67,
+ 50.589
+ ]
+ },
+ "start": "2022-03-18T12:00:00",
+ "end": "2022-10-08T12:00:00",
+ "tags": [5,6,11],
+
+}
];
export const places : Item[] = [
diff --git a/src/Components/Map/hooks/useItems.tsx b/src/Components/Map/hooks/useItems.tsx
new file mode 100644
index 00000000..98fa20d9
--- /dev/null
+++ b/src/Components/Map/hooks/useItems.tsx
@@ -0,0 +1,73 @@
+import { useCallback, useReducer, createContext, useContext } from "react";
+import * as React from "react";
+import { Item } from "../../../types";
+
+type ActionType =
+| { type: "ADD"; item: Item }
+| { type: "REMOVE"; item: Item };
+
+type UseItemManagerResult = ReturnType
;
+
+const ItemContext = createContext({
+ items: [],
+ addItem: () => {},
+ removeItem: () => {}
+});
+
+function useItemsManager (initialItems: Item[]): {
+ items: Item[];
+ addItem: (item: Item) => void;
+ removeItem: (item: Item) => void;
+} {
+ const [items, dispatch] = useReducer((state: Item[], action: ActionType) => {
+ switch (action.type) {
+ case "ADD":
+ return [
+ ...state,
+ action.item,
+ ];
+ case "REMOVE":
+ return state.filter(item => item !== action.item);
+ default:
+ throw new Error();
+ }
+ }, initialItems);
+
+ const addItem = useCallback((item: Item) => {
+ dispatch({
+ type: "ADD",
+ item,
+ });
+ }, []);
+
+ const removeItem = useCallback((item: Item) => {
+ dispatch({
+ type: "REMOVE",
+ item,
+ });
+ }, []);
+ return { items, addItem, removeItem };
+}
+
+export const ItemsProvider: React.FunctionComponent<{
+ initialItems: Item[], children?: React.ReactNode
+}> = ({ initialItems, children }) => (
+
+ {children}
+
+);
+
+export const useItems = (): Item[] => {
+ const { items } = useContext(ItemContext);
+ return items;
+};
+
+export const useAddItem = (): UseItemManagerResult["addItem"] => {
+ const { addItem } = useContext(ItemContext);
+ return addItem;
+};
+
+export const useRemoveItem = (): UseItemManagerResult["removeItem"] => {
+ const { removeItem } = useContext(ItemContext);
+ return removeItem;
+};
\ No newline at end of file
diff --git a/src/Components/Map/hooks/useLayers.tsx b/src/Components/Map/hooks/useLayers.tsx
index d14eb6ac..7a10c9ac 100644
--- a/src/Components/Map/hooks/useLayers.tsx
+++ b/src/Components/Map/hooks/useLayers.tsx
@@ -4,37 +4,33 @@ import { Item, Layer } from "../../../types";
type ActionType =
| { type: "ADD LAYER"; layer: Layer }
- | { type: "ADD ITEM"; item: Item; layer: Layer }
- | { type: "REMOVE ITEM"; id: number; layer: Layer };
+ | { type: "ADD ITEM"; item: Item; layer: Layer };
type UseItemManagerResult = ReturnType;
const LayerContext = createContext({
- layers: new Map([]),
+ layers: [],
addLayer: () => { },
- addItem: () => { },
- removeItem: () => { }
});
-function useLayerManager(initialLayers: Map): {
- layers: Map;
+function useLayerManager(initialLayers: Layer[]): {
+ layers: Layer[];
addLayer: (layer: Layer) => void;
- addItem: (item: Item, layer: Layer) => void;
- removeItem: (id: number, layer: Layer) => void;
} {
- const [layers, dispatch] = useReducer((state: Map, action: ActionType) => {
+ const [layers, dispatch] = useReducer((state: Layer[], action: ActionType) => {
switch (action.type) {
case "ADD LAYER":
{
- return state.set(action.layer.name, action.layer);
+ if (!state.includes(action.layer))
+ state.push(action.layer);
+ return state;
}
case "ADD ITEM":
{
- if(!state.get(action.layer.name)?.data?.includes(action.item))
- state.get(action.layer.name)?.data?.push(action.item);
+ if(!state.find(layer => layer.name === action.layer.name)?.data.find(item => item.id === action.item.id))
+ state.find(layer => layer.name === action.layer.name)?.data.push(action.item)
+ return state;
}
- case "REMOVE ITEM":
- { return state; }
default:
throw new Error();
}
@@ -47,33 +43,18 @@ function useLayerManager(initialLayers: Map): {
});
}, []);
- const addItem = useCallback((item: Item, layer: Layer) => {
- dispatch({
- type: "ADD ITEM",
- item,
- layer
- });
- }, []);
-
- const removeItem = useCallback((id: number, layer: Layer) => {
- dispatch({
- type: "REMOVE ITEM",
- id,
- layer
- });
- }, []);
- return { layers, addLayer, addItem, removeItem };
+ return { layers, addLayer};
}
export const LayersProvider: React.FunctionComponent<{
- initialLayers: Map, children?: React.ReactNode
+ initialLayers: Layer[], children?: React.ReactNode
}> = ({ initialLayers, children }) => (
{children}
);
-export const useLayers = (): Map => {
+export const useLayers = (): Layer[] => {
const { layers } = useContext(LayerContext);
return layers;
};
@@ -82,13 +63,3 @@ export const useAddLayer = (): UseItemManagerResult["addLayer"] => {
const { addLayer } = useContext(LayerContext);
return addLayer;
};
-
-export const useAddItem = (): UseItemManagerResult["addItem"] => {
- const { addItem } = useContext(LayerContext);
- return addItem;
-};
-
-export const useRemoveItem = (): UseItemManagerResult["removeItem"] => {
- const { removeItem } = useContext(LayerContext);
- return removeItem;
-};
diff --git a/src/types.ts b/src/types.ts
index 1258da65..07b85be0 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -11,7 +11,7 @@ export interface UtopiaMap {
}
export interface Layer {
- data?: Item[],
+ data: Item[],
children?: React.ReactNode
name: string,
menuIcon: string,
@@ -20,7 +20,7 @@ export interface Layer {
markerIcon: string,
markerShape: string,
markerDefaultColor: string,
- tags?: Tag[]
+ tags?: Tag[],
}
export class Item {
@@ -30,15 +30,16 @@ export class Item {
name: string;
text: string;
position: Geometry;
+ layer?: Layer;
start?: string;
end?: string;
tags?: number[];
- [key: string]: any;
- constructor(id:number,name:string,text:string,position:Geometry){
+ constructor(id:number,name:string,text:string,position:Geometry, layer: Layer){
this.id = id;
this.name = name;
this.text = text;
this.position = position;
+ this.layer = layer;
}
}
@@ -60,4 +61,6 @@ export interface Tag {
export interface API {
getAll(): Promise,
add(item : Item): Promise,
+ update(item : Item): Promise,
+ remove(id : number): Promise,
}
\ No newline at end of file