();
+
+
+ //--- GroupInit changed
+ useEffect(() => {
+
+ if (groupIntial) {
+ const { id, ...rest } = groupIntial;
+ setId(id);
+ reset({ ...emptyGroup, ...rest })
+ } else {
+ reset({ ...emptyGroup })
+ }
+ }, [groupIntial]);
+
+ //--- Parent Group hat sich geändert
+ useEffect(() => {
+ parentGroup ? setValue("parentId", parentGroup.id) : setValue("parentId", undefined);
+ }, [parentGroup])
+
+ const onSubmit = async (data: GroupCreate) => {
+
+ setError(undefined);
+
+ const { id: id1, ...sendData } = data; // Id entfernen!
+
+ let response = id ? await api_groups_update(id, sendData) : await api_groups_create(data);
+ if (response.success) {
+ reset({ ...emptyGroup, ...response.data })
+ setId(response.data.id);
+ setToast("Erfolgreich gespeichert!");
+ router.back();
+ } else {
+ setToast("Fehler beim Speichern!");
+
+ }
+
+ }
+
+
+ return (
+
+
+ {toast && (
+ setToast(null)}
+ />
+ )}
+
+
+
+
+
+ {
+ true &&
+
+
{JSON.stringify(watch(), null, 2)}
+
+ }
+
{getPathToRoot(groupId).map((g)=>g.name).join(".")}
:
+ }
+
+ )
+}
diff --git a/src/components/rk2/groups/groupSelect.tsx b/src/components/rk2/groups/groupSelect.tsx
new file mode 100644
index 0000000..974b006
--- /dev/null
+++ b/src/components/rk2/groups/groupSelect.tsx
@@ -0,0 +1,44 @@
+"use client"
+import { useGroups } from "@/hooks/rk2/useGroups"
+import { useGroupTree } from "@/hooks/rk2/useGroupTree"
+import { GroupResponse } from "@/types/anlagen/groups"
+import { GroupTreeView } from "./groupTreeView"
+import { useEffect, useState } from "react"
+
+
+
+
+interface Props {
+ groups: GroupResponse[]
+ onSelect: (group: GroupResponse) => void
+}
+
+export function GroupSelect({ groups, onSelect }: Props) {
+
+ const { getGroupById, groupsExtended } = useGroups({ groups })
+ const { tree, close, closeAll, isOpen, open, openAll, openGroups, toggle, isSelected, select, selectedGroupId } = useGroupTree(groups);
+ const [modalClose,setModalClose] = useState(false);
+
+ useEffect(() => {
+ if (selectedGroupId) {
+ const group = getGroupById(selectedGroupId);
+ if (group){
+ onSelect(group)
+ setModalClose(true)
+ }
+ }
+ }, [selectedGroupId]);
+
+ const handelModalClose = ()=>{
+ setModalClose(false);
+ }
+
+ return (
+
+
+
+
+
+ )
+
+}
diff --git a/src/components/rk2/groups/groupTreeView.tsx b/src/components/rk2/groups/groupTreeView.tsx
new file mode 100644
index 0000000..be56035
--- /dev/null
+++ b/src/components/rk2/groups/groupTreeView.tsx
@@ -0,0 +1,56 @@
+"use client"
+import { GroupTree } from "@/types/anlagen/groups"
+
+interface GroupTreeViewProps {
+ nodes: GroupTree[]
+ isOpen: (id: string) => boolean
+ toggle: (id: string) => void
+ isSelected: (id: string) => boolean
+ select: (id: string|undefined) => void
+}
+
+export function GroupTreeView({ nodes, isOpen, toggle, select, isSelected }: GroupTreeViewProps) {
+ return (
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/rk2/groups/groupViewItem.tsx b/src/components/rk2/groups/groupViewItem.tsx
new file mode 100644
index 0000000..a0db949
--- /dev/null
+++ b/src/components/rk2/groups/groupViewItem.tsx
@@ -0,0 +1,47 @@
+"use client"
+
+import { Sites } from "@/_config/sites"
+import { api_groups_delete } from "@/actions/rk2/api-groups"
+
+import { Button } from "@/components/ui/button"
+import { ListItem, ListItemAction } from "@/components/ui/list"
+import { GroupResponse } from "@/types/anlagen/groups"
+import { useRouter } from "next/navigation"
+
+
+
+
+interface Props {
+ group: GroupResponse,
+ parent?: GroupResponse
+}
+
+
+
+export function GroupViewItem({ group, parent }: Props) {
+
+ let router = useRouter()
+
+ return (
+
+ {parent ?
+ {parent.name}
+
: root
}
+
+
+ {group.name}
+
+
+ {group.nr}
+
+
+
+
+
+
+
+
+
+ )
+
+}
diff --git a/src/components/rk2/groups/groupViewList.tsx b/src/components/rk2/groups/groupViewList.tsx
new file mode 100644
index 0000000..409f68d
--- /dev/null
+++ b/src/components/rk2/groups/groupViewList.tsx
@@ -0,0 +1,69 @@
+"use client"
+import { useGroups } from "@/hooks/rk2/useGroups"
+import { useGroupTree } from "@/hooks/rk2/useGroupTree"
+import { GroupResponse } from "@/types/anlagen/groups"
+import { GroupTreeView } from "./groupTreeView"
+import { GroupViewItem } from "./groupViewItem"
+import { GroupForm } from "./groupForm"
+import { Anlage } from "@/types/rk"
+import Modal from "@/components/ui/Modal"
+import { GroupSelect } from "./groupSelect"
+import { GroupEdit } from "./groupEdit"
+import MonButton from "@/components/ui/MonBotton"
+import Link from "next/link"
+import { Sites } from "@/_config/sites"
+import { List, ListItem } from "@/components/ui/list"
+
+
+
+
+interface Props {
+ anlage: Anlage,
+ groups: GroupResponse[]
+}
+
+export function GroupViewList({ anlage, groups }: Props) {
+
+ const { getGroupById, groupsExtended } = useGroups({ groups })
+ const { tree, close, closeAll, isOpen, open, openAll, openGroups, toggle, isSelected, select, selectedGroupId } = useGroupTree(groups);
+
+
+ return (
+
+
+ {/* Gruppe neu anlegen */}
+
+ {Sites.rk2.groups.new.name}
+
+
+
+ {/* Grupplist flat */}
+
+
+ {groupsExtended.map((item) =>
+
+
+
+
+ )}
+
+
+
+
+ {/* Grupplist as Tree */}
+
+
+
select(undefined)}>root
+
+
+
+ {selectedGroupId &&
+
+
+ }
+
+
+
+
+ {/*---Form Data */}
+
+
+
+ setValue('name', e.target.value)} />
+
+
+
+
+
+
+
+ setValue('description', e.target.value)} />
+
+
+
+
+
+ {true &&
+
+
{JSON.stringify(signalData, null, 2)}
+
+
+
+ }
+
{JSON.stringify(compnentData, null, 2)}
+
+
+
+ }
+ return (
+
+
+ {/*--- Component Basisdaten */}
+
+
+
+
+ {/*--- Properties */}
+
+
Eigenschaften
+
+ {compnentData.properties &&
+ Object.entries(compnentData.properties).map(([key, value]) => (
+
+
changePropertie(name, value)}
+ />
+ ))}
+
+
+
+
+
+
+
+
+ {/* --- Signal IDs ----*/}
+ {signalByComp && signalByComp.map((s) =>
+ {s.name}
+
)}
+ {true &&
+
+ Debug
+
+ {JSON.stringify(compnentData, null, 2)}
+
+
+
+ }
+
+ {name} {value as string} {propertyType}
+
+
+ const handleChangeValue = (value:unknown,type:string)=>{
+
+ setPropValue(name,value);
+ }
+
+ switch (propertyType.type) {
+
+ case "text":
+ return (
+
+
+ handleChangeValue(e.target.value,"text")} />
+
+ )
+
+ case "number":
+ return (
+
+
+ handleChangeValue(e.target.value,"number")} />
+
+
+ )
+
+ case "boolean":
+ return (
+
+
+ handleChangeValue(e.target.checked,"boolean")} />
+
+ )
+
+ case "select":
+ return (
+
+
+
+
+
+ )
+
+ default:
+ return null
+ }
+}
\ No newline at end of file
diff --git a/src/components/rk2/units/unitEdit.tsx b/src/components/rk2/units/unitEdit.tsx
new file mode 100644
index 0000000..596e86c
--- /dev/null
+++ b/src/components/rk2/units/unitEdit.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Modal from "@/components/ui/Modal";
+import { Anlage } from "@/types/rk";
+import { GroupResponse } from "@/types/anlagen/groups";
+import { UnitResponse } from "@/types/anlagen/units";
+import { useGroups } from "@/hooks/rk2/useGroups";
+import { UnitCreateForm } from "./unit_createForm";
+import { GroupSelect } from "../groups/groupSelect";
+import { ComponentDefaults, ComponentTypeDefinition } from "@/types/anlagen/components";
+
+
+
+
+
+interface Params {
+ anlage: Anlage,
+ groups: GroupResponse[],
+ selectedUnit?: UnitResponse,
+ componentTypes: ComponentTypeDefinition[]
+ componentDefaults: ComponentDefaults[]
+}
+
+export const UnitEdit = ({ anlage, groups, selectedUnit, componentTypes,componentDefaults }: Params) => {
+
+
+ const { getGroupById } = useGroups({ groups });
+ const [showSelectGroup, setShowSelectGroup] = useState(false);
+ const [selectedGroup, setSelectedGroup] = useState();
+
+
+ useEffect(() => {
+ if (selectedUnit && selectedUnit.groupId) {
+ const pGroup = getGroupById(selectedUnit.groupId)
+ setSelectedGroup(() => pGroup)
+ }
+ }, [selectedUnit])
+
+ useEffect(() => {
+ if (selectedGroup) {
+ const pGroup = getGroupById(selectedGroup.id)
+ setSelectedGroup(() => pGroup)
+ }
+ }, [selectedGroup])
+
+
+ const handlerGroupSelect = (group: GroupResponse) => {
+ setSelectedGroup(() => group);
+ setShowSelectGroup(false);
+ }
+
+ //groupIntial={selectedGroup} parentGroup={selectedGroup} onResetParent={() => setSelectedGroup(() => undefined)}
+
+ return (
+
+
+ setShowSelectGroup(true)} unitIntial={selectedUnit} componentTypes={componentTypes} componentDefaults={componentDefaults}/>
+
+ {showSelectGroup &&
+ setShowSelectGroup(false)} >
+
+
+ }
+
+
+
+
+ )
+}
diff --git a/src/components/rk2/units/unit_createForm.tsx b/src/components/rk2/units/unit_createForm.tsx
new file mode 100644
index 0000000..c339c49
--- /dev/null
+++ b/src/components/rk2/units/unit_createForm.tsx
@@ -0,0 +1,280 @@
+"use client";
+
+import { useEffect, useState } from "react"
+import { Anlage } from "@/types/rk";
+import Toast from "@/components/ui/Toast";
+import { UnitResponse } from "@/types/anlagen/units";
+import { useUnit } from "@/hooks/rk2/useUnit";
+import { api_units_create, api_units_update } from "@/actions/rk2/api-units";
+import { ComponentForm } from "./componentForm";
+import { GroupResponse } from "@/types/anlagen/groups";
+import { Button } from "@/components/ui/button";
+import { ComponentDefaults, ComponentResponse, ComponentTypeDefinition } from "@/types/anlagen/components";
+import { useComponent } from "@/hooks/rk2/useComponent";
+import { ComponentIcon, Divide, Save, TableOfContents } from "lucide-react";
+import { Card, CardContent, CardFooder, CardHeader, CardTitle } from "@/components/ui/card";
+import { List, ListItem, ListItemAction, ListItemContent, ListItemDescription, ListItemIcon, ListItemTitle } from "@/components/ui/list";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Select } from "@/components/ui/select";
+
+
+
+interface Params {
+ anlage: Anlage,
+ unitIntial?: UnitResponse
+ selectedGroup?: GroupResponse
+ onDisplaySelectGroup: () => void
+ componentTypes: ComponentTypeDefinition[]
+ componentDefaults: ComponentDefaults[]
+ debug?: boolean
+}
+
+export const UnitCreateForm = ({ anlage, unitIntial, onDisplaySelectGroup, selectedGroup, componentTypes, componentDefaults, debug }: Params) => {
+ const [id, setId] = useState();
+ const [selectedComponent, setSelectedComponent] = useState();
+
+
+ const { emptyUnit, unitType, setValue, unitData, string_to_UnitType } = useUnit({ unit: unitIntial });
+ const { componentNames, findCompType, createComponent, removeComponent } = useComponent({ componentTypes, componentDefaults });
+
+ const [toast, setToast] = useState(null);
+
+
+ useEffect(() => {
+ console.log('init');
+ if (unitIntial) {
+ const { id, ...rest } = unitIntial;
+ setId(id);
+ } else {
+ }
+ }, [unitIntial]);
+
+ //--- Parent Group hat sich geändert
+ useEffect(() => {
+ selectedGroup && setValue("groupId", selectedGroup.id);
+ }, [selectedGroup])
+
+
+ //--- Submit --> Create oder Update
+ const onSubmit = async () => {
+
+ const { id: id1, ...sendData } = unitData;
+
+ let response = id ? await api_units_update(id, sendData) : await api_units_create(sendData);
+
+ if (response.success) {
+ setId(response.data!.id);
+ setToast("Erfolgreich gespeichert!");
+ } else {
+ setToast("Fehler beim Speichern!");
+
+ }
+
+ }
+
+ const handlerAppendComponent = (type: string) => {
+ const comp = findCompType(type);
+ if (!comp || !id) return;
+ console.log(comp)
+ createComponent(id, { name: "", type: comp.type })
+ }
+
+
+ return (
+ <>
+
+ {toast && (
+ setToast(null)}
+ />
+ )}
+
+
+ Unit
+
+
+
+
+
+
+
{selectedGroup ? selectedGroup.name : "noGroup"}
+
+
+
+
+
+
+ setValue('prefix', e.target.value)} />
+
+
+
+
+
+ setValue('bmk', e.target.value)} />
+
+
+
+
+
+ setValue('name', e.target.value)} />
+
+
+
+
+ setValue('postfix', e.target.value)} />
+
+
+
+
+
+
+
+
+
+
+ setValue('info', e.target.value)} />
+
+
+
+
+
+
+ {selectedComponent &&
+
+
+ }
+
+
+ {/* Componente */}
+
+
+ {/*--- Show addable Components */}
+ {
+ !selectedComponent &&
+ {id &&
+
+ Komponenten +
+
+ {componentNames.map((comp) => (
+
+
+
+ ))}
+
+
+ }
+
+
+ {/*--- Show Components List */}
+ {id && unitData.components &&
+
+ Komponenten
+
+
+
+ {unitData.components.map((c, index) =>
+
+
+
+
+
+
+ {c.type}
+
+
+
+ {c.prefix && c.prefix}
+ {c.name}
+ {c.postfix && c.postfix}
+ {c.index && c.index > 0 ? c.index: ""}
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ }
+
+
+ }
+ {/* --- Components */}
+
+
+
+ setSelectedComponent(() => undefined)}
+ />
+
+
+ {
+ true &&
+
+ Debug
+
+ {JSON.stringify(unitData, null, 2)}
+
+
+
+ }
+
+
+
+ )
+}
+/*
+ {fields.length === 0 && (Noch keine Components vorhanden.
)}
+
+ {selectedComponent && (
+
+ handlerRemoveItem(index)}
+ setValue={setValue}
+ componentTypes={componentTypes}
+ componentDefaults={componentDefaults}
+
+ />
+
+ )}
+
+ {false && fields.map(
+ (field, index) => (
+ handlerRemoveItem(index)}
+ setValue={setValue}
+ componentTypes={componentTypes}
+ componentDefaults={componentDefaults}
+
+ />
+ )
+ )}
+
+
+*/
\ No newline at end of file
diff --git a/src/components/test_dnd.tsx b/src/components/test_dnd.tsx
new file mode 100644
index 0000000..9df1d4d
--- /dev/null
+++ b/src/components/test_dnd.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import { DndContext, closestCenter } from "@dnd-kit/core";
+import {
+ arrayMove,
+ SortableContext,
+ useSortable,
+ verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { useState } from "react";
+
+interface Props{
+ item:{id:string,name:string},
+ children: React.ReactNode
+}
+
+export function SortableItem({ item,children }:Props) {
+ const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id:item.id });
+
+ const style = {
+ transform: CSS.Transform.toString(transform),
+ transition,
+ padding: "12px",
+ border: "1px solid #ccc",
+ marginBottom: "8px",
+ background: "white",
+ cursor: "grab",
+ };
+
+ return (
+
+ {item.id} {item.name}
+ {children}
+
+ );
+}
diff --git a/src/components/ui/InputNumber.tsx b/src/components/ui/InputNumber.tsx
new file mode 100644
index 0000000..ba0304b
--- /dev/null
+++ b/src/components/ui/InputNumber.tsx
@@ -0,0 +1,78 @@
+"use client";
+
+import { error } from "console";
+import { useEffect, useRef, useState } from "react";
+
+
+interface Props {
+ inValue: number,
+ name: string,
+ onChanged: (name: string, newValue: number) => void
+}
+
+export function InputNumber({ inValue, name, onChanged }: Props) {
+
+ const [value, setValue] = useState('');
+ const [lastValue, setLastValue] = useState(0);
+ const [errorNumber, setErrorNumber] = useState(false);
+ const inputRef = useRef(null);
+
+ useEffect(() => {
+ setValue("" + inValue);
+ setLastValue(inValue);
+ }, [inValue])
+
+ const handleValueChange = (newValue: string) => {
+ const isNumber = /^-?\d+$/.test(newValue);
+ if (isNumber) {
+ setValue(newValue);
+
+ setErrorNumber(false);
+ } else {
+ setErrorNumber(true);
+ }
+ }
+
+ const handleSubmit = () => {
+
+ if (!errorNumber && value !== lastValue.toString()) {
+ onChanged(name, Number(value));
+ }
+ else setValue("" + lastValue);
+ }
+
+ const handleKeyDown = (e: React.KeyboardEvent) => {
+ console.log(e.key);
+ if (e.key == 'ArrowUp' && !e.ctrlKey) {
+ e.preventDefault();
+ setValue((old) => "" + (Number(old) + 1))
+ }
+
+ if (e.key == 'ArrowUp' && e.ctrlKey) {
+ e.preventDefault();
+ setValue((old) => "" + (Number(old) + 10))
+ }
+
+ if (e.key == 'ArrowDown' && !e.ctrlKey) {
+ e.preventDefault();
+ setValue((old) => "" + (Number(old) - 1))
+ }
+
+ if (e.key == 'ArrowDown' && e.ctrlKey) {
+ e.preventDefault();
+ setValue((old) => "" + (Number(old) - 10))
+ }
+
+ if (e.key == 'Escape') {
+ e.preventDefault();
+ setValue((old) => "" + lastValue)
+ }
+ }
+
+ return (
+ <>
+ handleKeyDown(e)} value={value} onBlur={() => handleSubmit()} onChange={(e) => handleValueChange(e.target.value)} />
+ {errorNumber && Error not a number
}
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx
new file mode 100644
index 0000000..9a19da9
--- /dev/null
+++ b/src/components/ui/Modal.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+
+type ModalProps = {
+ children: React.ReactNode;
+ goBack?:boolean,
+ doClose?:boolean,
+ onClose?:()=>void
+};
+
+export default function Modal({ children,goBack,onClose,doClose}: ModalProps) {
+ const router = useRouter();
+
+ useEffect(()=>{
+ if(doClose){
+ handlerClose();
+ }
+ },[doClose])
+
+ useEffect(() => {
+ function handleKeyDown(event: KeyboardEvent) {
+ if (event.key === "Escape") {
+ handlerClose()
+ }
+ }
+
+ document.addEventListener("keydown", handleKeyDown);
+
+ return () => {
+ document.removeEventListener("keydown", handleKeyDown);
+ };
+ }, [router]);
+
+ const handlerClose = ()=>{
+ if(goBack) router.back();
+ if(onClose) onClose();
+ }
+
+ return (
+ {
+ if (event.target === event.currentTarget) {
+ handlerClose()
+ }
+ }}
+ >
+
+
+
+ {children}
+
+
handlerKey(e)}
+ onClick={ (e)=>onClick()}
+ tabIndex={0}
+ >
+
+
+ {children}
+
+
+
+
+
+ )
+}
+
+
diff --git a/src/components/ui/Toast.tsx b/src/components/ui/Toast.tsx
new file mode 100644
index 0000000..7081e06
--- /dev/null
+++ b/src/components/ui/Toast.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+type ToastProps = {
+ message: string;
+ duration?: number;
+ position?: "top" | "bottom";
+ onClose: () => void;
+};
+
+export default function Toast({
+ message,
+ duration = 3000,
+ position = "bottom",
+ onClose,
+}: ToastProps) {
+ const [visible, setVisible] = useState(false);
+
+ useEffect(() => {
+ const showTimer = setTimeout(() => {
+ setVisible(true);
+ }, 10);
+
+ const hideTimer = setTimeout(() => {
+ setVisible(false);
+ }, duration);
+
+ const removeTimer = setTimeout(() => {
+ onClose();
+ }, duration + 300);
+
+ return () => {
+ clearTimeout(showTimer);
+ clearTimeout(hideTimer);
+ clearTimeout(removeTimer);
+ };
+ }, [duration, onClose]);
+
+ const positionClasses =
+ position === "top"
+ ? "bottom-full mb-2"
+ : "top-full mt-2";
+
+ return (
+
+ {message}
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
new file mode 100644
index 0000000..961b436
--- /dev/null
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,67 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+ "inline-flex items-center justify-center rounded-md font-medium transition-colors",
+ {
+ variants: {
+ variant: {
+ primary: "bg-blue-600 text-white hover:bg-blue-700",
+ secondary: "bg-gray-200 text-gray-900 hover:bg-gray-300",
+ danger: "bg-red-600 text-white hover:bg-red-700",
+ select: "bg-gray-800 text-gray-300 hover:bg-gray-700",
+ ghost: "hover:bg-gray-100",
+ },
+
+ size: {
+ xs: "h-6 px-3 text-xs",
+ sm: "h-8 px-3 text-sm",
+ md: "h-10 px-4 text-sm",
+ lg: "h-12 px-6 text-base",
+ },
+ },
+
+ defaultVariants: {
+ variant: "primary",
+ size: "md",
+ },
+ }
+);
+
+type ButtonProps =
+ React.ComponentProps<"button"> &
+ VariantProps & {
+ asChild?: boolean;
+ };
+
+function Button({
+ className,
+ variant,
+ size,
+ asChild = false,
+ children,
+ ...props
+}: ButtonProps) {
+ const Comp = asChild ? Slot : "button";
+
+ return (
+
+ {children}
+
+ );
+}
+
+export {
+ Button,
+ buttonVariants,
+};
\ No newline at end of file
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 0000000..b775fe2
--- /dev/null
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,158 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const cardVariants = cva(
+ "mb-2",//"inline-flex items-center justify-center rounded-md font-medium transition-colors",
+ {
+ variants: {
+ variant: {
+ primary: "border-1 flex flex-col rounded shadow border-gray-200",
+ secondary: "bg-gray-200 text-gray-900 hover:bg-gray-300",
+ danger: "bg-red-600 text-white hover:bg-red-700",
+ select: "bg-gray-800 text-gray-300 hover:bg-gray-700",
+ ghost: "hover:bg-gray-100",
+ },
+
+ positons: {
+ start:"items-start",
+ center:"",
+ end:"items-end"
+ },
+
+ size: {
+ xs: "h-6 px-3 text-xs",
+ sm: "h-8 px-3 text-sm",
+ md: "h-10 px-4 text-sm",
+ lg: "h-12 px-6 text-base",
+ },
+ },
+
+ defaultVariants: {
+ variant: "primary",
+ positons:"center"
+
+ },
+ }
+);
+
+const cardHeaderVariants = cva(
+ "flex items-center justify-center w-full text-gray-800",//"inline-flex items-center justify-center rounded-md font-medium transition-colors",
+ {
+ variants: {
+ variant: {
+ default: "border-b-1 bg-gray-200 border-gray-400 font-bold mb-2",
+ danger: "border-b-1 bg-red-600 border-gray-400 font-bold text-white mb-2",
+ ghost: "border-b-1 w-full border-gray-400 font-bold text-gray-400 mb-2",
+ },
+
+ size: {
+ xs: "h-6 px-3 text-xs",
+ sm: "h-8 px-3 text-sm",
+ md: "h-10 px-4 text-sm",
+ lg: "h-12 px-6 text-base",
+ },
+ },
+
+ defaultVariants: {
+ variant: "default",
+
+ },
+ }
+);
+
+type CardProps =
+ React.ComponentProps<"div"> &
+ VariantProps & {
+ asChild?: boolean;
+ };
+
+
+function Card({ className, variant, size,positons, asChild = false, children, ...props }: CardProps) {
+ const Comp = asChild ? Slot : "div";
+
+ return (
+
+ {children}
+
+ );
+}
+
+/*
+ CardHeader
+*/
+
+type CardHeaderProps =
+ React.ComponentProps<"div"> &
+ VariantProps
+
+function CardHeader({ className, variant, size, ...props }: CardHeaderProps) {
+ return (
+
+ );
+}
+
+/*
+ CardTitle
+*/
+function CardTitle({ className, ...props }: React.ComponentProps<"h3">) {
+ return (
+
+ );
+}
+
+/*
+ CardContent
+*/
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function CardFooder({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+export {
+ Card,
+ CardContent,
+ CardHeader,
+ CardTitle,
+ CardFooder,
+ cardVariants,
+};
\ No newline at end of file
diff --git a/src/components/ui/droppableContainer.tsx b/src/components/ui/droppableContainer.tsx
new file mode 100644
index 0000000..e77c688
--- /dev/null
+++ b/src/components/ui/droppableContainer.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import { useDroppable } from "@dnd-kit/core";
+
+interface Props {
+ id: string;
+ children: React.ReactNode;
+}
+
+export function DroppableContainer({ id, children }: Props) {
+ const { setNodeRef } = useDroppable({
+ id,
+ });
+
+ return (
+
+ {children}
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/ui/editable-list/useEditableList.ts b/src/components/ui/editable-list/useEditableList.ts
new file mode 100644
index 0000000..47fbb5f
--- /dev/null
+++ b/src/components/ui/editable-list/useEditableList.ts
@@ -0,0 +1,128 @@
+import { RefObject, useEffect, useState } from "react";
+
+interface Props {
+ ref: RefObject;
+ data: T[];
+
+ onSave: (item: T) => Promise | void;
+
+};
+
+export function useEditableList({ ref, data, onSave }: Props) {
+
+ const [selectedIndex, setSelectedIndex] = useState(0);
+ const [editingIndex, setEditingIndex] = useState(null);
+
+ const save = async (item: T) => {
+
+ await onSave(item);
+ setEditingIndex(null);
+ };
+
+ useEffect(() => {
+ if (editingIndex == null) {
+ console.log('set focus to div')
+
+ ref.current?.focus();
+ }
+ }, [editingIndex])
+
+ const onKeyDown = (e: React.KeyboardEvent) => {
+
+ if (editingIndex !== null) return;
+
+ console.log(e.key)
+ switch (e.key) {
+
+ case "ArrowDown":
+ e.preventDefault();
+
+ setSelectedIndex(
+ Math.min(selectedIndex + 1, data.length - 1)
+ );
+ break;
+
+
+ case "ArrowUp":
+ e.preventDefault();
+
+ setSelectedIndex(
+ Math.max(selectedIndex - 1, 0)
+ );
+ break;
+
+
+ case "Home":
+ e.preventDefault();
+
+ setSelectedIndex(0);
+ break;
+
+
+ case "End":
+ e.preventDefault();
+
+ setSelectedIndex(data.length - 1);
+ break;
+
+ case "+":
+ console.log('Plus')
+ break;
+ case "Enter":
+ e.preventDefault();
+
+ setEditingIndex(selectedIndex);
+ break;
+
+ }
+
+ }
+
+
+ function select(index: number) {
+ setSelectedIndex(index);
+ }
+
+ function startEdit(index = selectedIndex) {
+ setEditingIndex(index);
+ }
+
+ function stopEdit() {
+ setEditingIndex(null);
+ }
+
+ function cancelEdit() {
+
+ setEditingIndex(null);
+
+ }
+
+
+
+
+
+ return {
+ isEditing: editingIndex != null,
+ selectedIndex,
+ editingIndex,
+
+ selectedItem: data[selectedIndex],
+
+ editingItem: editingIndex === null ? undefined : data[editingIndex],
+
+ isItemSelected(index: number) {
+ return index === selectedIndex;
+ },
+ isItemEditing(index: number) {
+ return index === editingIndex;
+ },
+
+ onKeyDown,
+ select,
+ startEdit,
+ stopEdit,
+ cancelEdit,
+ save,
+ setSelectedIndex,
+ }
+}
\ No newline at end of file
diff --git a/src/components/ui/editable-list/useKeyboradNavigation.ts b/src/components/ui/editable-list/useKeyboradNavigation.ts
new file mode 100644
index 0000000..a0adb48
--- /dev/null
+++ b/src/components/ui/editable-list/useKeyboradNavigation.ts
@@ -0,0 +1,97 @@
+import { useEffect } from "react";
+
+type KeyboardNavigationOptions = {
+ enabled?: boolean;
+ count: number;
+ selectedIndex: number;
+ setSelectedIndex: (index: number) => void;
+
+ onEnter?: () => void;
+ onEscape?: () => void;
+};
+
+export function useKeyboardNavigation({
+ enabled = true,
+ count,
+ selectedIndex,
+ setSelectedIndex,
+ onEnter,
+ onEscape,
+}: KeyboardNavigationOptions) {
+
+ useEffect(() => {
+ if (!enabled) return;
+
+ const handleKeyDown = (e: KeyboardEvent) => {
+ switch (e.key) {
+
+ case "ArrowDown":
+ e.preventDefault();
+
+ setSelectedIndex(
+ Math.min(selectedIndex + 1, count - 1)
+ );
+ break;
+
+
+ case "ArrowUp":
+ e.preventDefault();
+
+ setSelectedIndex(
+ Math.max(selectedIndex - 1, 0)
+ );
+ break;
+
+
+ case "Home":
+ e.preventDefault();
+
+ setSelectedIndex(0);
+ break;
+
+
+ case "End":
+ e.preventDefault();
+
+ setSelectedIndex(count - 1);
+ break;
+
+
+ case "Enter":
+ e.preventDefault();
+
+ onEnter?.();
+ break;
+
+
+ case "Escape":
+ e.preventDefault();
+
+ onEscape?.();
+ break;
+ }
+ };
+
+
+ window.addEventListener(
+ "keydown",
+ handleKeyDown
+ );
+
+
+ return () => {
+ window.removeEventListener(
+ "keydown",
+ handleKeyDown
+ );
+ };
+
+ }, [
+ enabled,
+ count,
+ selectedIndex,
+ setSelectedIndex,
+ onEnter,
+ onEscape,
+ ]);
+}
\ No newline at end of file
diff --git a/src/components/ui/editable/EditableCell.tsx b/src/components/ui/editable/EditableCell.tsx
new file mode 100644
index 0000000..26727dd
--- /dev/null
+++ b/src/components/ui/editable/EditableCell.tsx
@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+
+type Props = {
+ editing: boolean;
+ display: ReactNode;
+ editor: ReactNode;
+};
+
+export function EditableCell({ editing, display, editor }: Props) {
+
+ return editing
+ ? editor
+ : {display}
;
+}
\ No newline at end of file
diff --git a/src/components/ui/editable/EditableRow.tsx b/src/components/ui/editable/EditableRow.tsx
new file mode 100644
index 0000000..61bee2c
--- /dev/null
+++ b/src/components/ui/editable/EditableRow.tsx
@@ -0,0 +1,34 @@
+import clsx from "clsx";
+import { ReactNode } from "react";
+
+type Props = {
+ children: ReactNode;
+ selected?: boolean;
+ columns?: string;
+
+};
+
+export function EditableRow({ children, selected = false, columns }: Props) {
+
+
+ return (
+
+ {children}
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/ui/editable/NumberCell.tsx b/src/components/ui/editable/NumberCell.tsx
new file mode 100644
index 0000000..be483a9
--- /dev/null
+++ b/src/components/ui/editable/NumberCell.tsx
@@ -0,0 +1,32 @@
+import { forwardRef } from "react";
+import { EditableCell } from "./EditableCell";
+
+type Props = {
+ value: string;
+ editing: boolean;
+
+ onChange(value: string): void;
+ onKey?: React.KeyboardEventHandler;
+};
+
+export const NumberCell = forwardRef(({ value, editing, onChange,onKey }, ref) => {
+ return (
+ onChange(e.target.value)}
+ />
+ }
+
+ />
+ );
+})
+
+
diff --git a/src/components/ui/editable/TextCell.tsx b/src/components/ui/editable/TextCell.tsx
new file mode 100644
index 0000000..71bd0b5
--- /dev/null
+++ b/src/components/ui/editable/TextCell.tsx
@@ -0,0 +1,33 @@
+import { forwardRef } from "react";
+import { EditableCell } from "./EditableCell";
+
+type Props = {
+ value: string;
+ editing: boolean;
+
+ onChange(value: string): void;
+ onKey?:React.KeyboardEventHandler;
+};
+
+export const TextCell = forwardRef(({ value, editing, onChange, onKey }, ref) => {
+
+ return (
+ }
+ editor={
+ onChange(e.target.value)}
+ />
+ }
+
+ />
+ );
+
+}
+);
\ No newline at end of file
diff --git a/src/components/ui/editable/useFocusManager.ts b/src/components/ui/editable/useFocusManager.ts
new file mode 100644
index 0000000..9b1b132
--- /dev/null
+++ b/src/components/ui/editable/useFocusManager.ts
@@ -0,0 +1,47 @@
+import { useRef } from "react";
+
+export function useFocusManager() {
+
+ const elements = useRef<(HTMLElement | null)[]>([]);
+
+ const register = (index: number) => (element: HTMLElement | null) => {
+
+ elements.current[index] = element;
+ };
+
+
+ const focusFirst = () => {
+ elements.current[0]?.focus();
+ };
+
+ const focusNext = (current: HTMLElement) => {
+
+ const index = elements.current.indexOf(current);
+
+ if (index === -1) return;
+
+ const next = (index + 1) % elements.current.length;
+
+ elements.current[next]?.focus();
+ };
+
+ const focusPrevious = (current: HTMLElement) => {
+
+ const index = elements.current.indexOf(current);
+
+ if (index === -1) return;
+
+ const previous = (index - 1 + elements.current.length) % elements.current.length;
+
+ elements.current[previous]?.focus();
+ };
+
+
+
+ return {
+ register,
+ focusFirst,
+ focusNext,
+ focusPrevious,
+ };
+}
\ No newline at end of file
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
new file mode 100644
index 0000000..77b681f
--- /dev/null
+++ b/src/components/ui/input.tsx
@@ -0,0 +1,73 @@
+import {
+ cva,
+ type VariantProps,
+} from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const inputVariants = cva(
+ [
+ "w-full",
+ "rounded-md",
+ "border",
+ "outline-none",
+ "transition-colors",
+ "placeholder:text-gray-400",
+ "focus:ring-2",
+ ],
+ {
+ variants: {
+ variant: {
+ default:
+ "border-gray-300 focus:border-blue-500 focus:ring-blue-500/20",
+
+ error:
+ "border-red-500 focus:border-red-500 focus:ring-red-500/20",
+
+ success:
+ "border-green-500 focus:border-green-500 focus:ring-green-500/20",
+ },
+
+ sizeVariant: {
+ xs: "h-5 px-3 text-xs",
+ sm: "h-8 px-3 text-sm",
+ md: "h-10 px-3 text-sm",
+ lg: "h-12 px-4 text-base",
+ },
+ },
+
+ defaultVariants: {
+ variant: "default",
+ sizeVariant: "xs",
+ },
+ }
+);
+
+
+
+type InputVariants = VariantProps;
+
+type InputProps =
+ React.ComponentProps<"input"> &
+ InputVariants;
+
+function Input({ className, variant, sizeVariant, ...props }: InputProps) {
+
+ return (
+
+ );
+}
+
+export {
+ Input,
+ inputVariants,
+};
\ No newline at end of file
diff --git a/src/components/ui/inputCheckboxR.tsx b/src/components/ui/inputCheckboxR.tsx
new file mode 100644
index 0000000..dc6a431
--- /dev/null
+++ b/src/components/ui/inputCheckboxR.tsx
@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react"
+import { forwardRef } from "react"
+interface ChangeValue {
+ [key: string]: boolean
+}
+
+interface Props extends React.InputHTMLAttributes {
+ label?: string
+ error?: string | undefined
+
+}
+
+export const InputCheckboxR = forwardRef(
+ ({ label, error, ...props }, ref) => {
+
+
+
+ return (
+
+
+
+ {label &&
{label}
}
+
+
+ {label && (
+
+ )}
+
+
+
+ {false && error &&
{error}
}
+
+ {label && (
+
+ )}
+
+
+
+ {false && error &&
{error}
}
+
+ {children}
+
+ );
+}
+
diff --git a/src/components/visu/create/visuCreatePlatform.tsx b/src/components/visu/create/visuCreatePlatform.tsx
new file mode 100644
index 0000000..5bc7464
--- /dev/null
+++ b/src/components/visu/create/visuCreatePlatform.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react";
+import VisuPoint from "./visuPoints";
+import VisuDrawPath from "./visuDrawPath";
+
+
+interface Props {
+}
+
+type Pos = { x: number; y: number };
+type Point = { id: number, x: number; y: number };
+
+export default function VisuCreatePlatform({ }: Props) {
+ const x = 0;
+ const y = 0;
+
+ const [scale, setScale] = useState(1.0);
+ const [points, setPoints] = useState([{ id: 1, x: 50, y: 50 }, { id: 2, x: 100, y: 100 }])
+ const [pos, setPos] = useState({ x: 0, y: 0 });
+ const frame = useRef(null);
+ const latest = useRef({ x: 0, y: 0 });
+
+ const handleMouseMove = (e: React.MouseEvent) => {
+ const rect = e.currentTarget.getBoundingClientRect();
+
+ latest.current = {
+ x: e.clientX - rect.left,
+ y: e.clientY - rect.top,
+ };
+
+ if (frame.current === null) {
+ frame.current = requestAnimationFrame(() => {
+ setPos(latest.current);
+ frame.current = null;
+ });
+ }
+ };
+
+ const handleSelect = (id: number) => {
+ console.log(id)
+ }
+
+ return (
+
+
+
Mausposition
+
X: {pos.x}
+
Y: {pos.y}
+
+
handleMouseMove(e)} >
+
+
+
+
No Path
+ return (
+
+
+
+
+ {drawPath()}
+
+ {}
+
+
+
+
+
+ {false && positions.map((p, index) => )}
+
+
+ );
+}
+
+/*
+
+*/
\ No newline at end of file
diff --git a/src/components/visu/create/visuPoints.tsx b/src/components/visu/create/visuPoints.tsx
new file mode 100644
index 0000000..1fa1f08
--- /dev/null
+++ b/src/components/visu/create/visuPoints.tsx
@@ -0,0 +1,44 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react";
+
+type Pos = { x: number; y: number };
+
+interface Props {
+ id:number
+ pos:Pos,
+ onSelect:(id:number)=>void
+}
+
+
+export default function VisuPoint({id,pos,onSelect }: Props) {
+
+ const [hasFocus,setHasFocus] = useState(false);
+
+ const handleMouseLeafe = ()=>{
+ console.log('Leaf')
+ setHasFocus(()=>false);
+ }
+
+ const handleMouseEnter = ()=>{
+ console.log('Enter')
+ setHasFocus(()=>true);
+ }
+
+ return (
+
+
+ onSelect(id)}
+ >
+
+
+
+ );
+}
+
+/*
+
+*/
\ No newline at end of file
diff --git a/src/components/visu/draw/svgShow.tsx b/src/components/visu/draw/svgShow.tsx
new file mode 100644
index 0000000..3bed010
--- /dev/null
+++ b/src/components/visu/draw/svgShow.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import { VisuElement } from "@/types/visu/visuElements.types";
+import { JSX, useState } from "react";
+
+interface Props {
+ svg: string;
+}
+
+//
+export function SvgShow({ svg }: Props) {
+
+
+
+ return (
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/visu/svgElement copy.tsx b/src/components/visu/svgElement copy.tsx
new file mode 100644
index 0000000..20e2349
--- /dev/null
+++ b/src/components/visu/svgElement copy.tsx
@@ -0,0 +1,91 @@
+"use client"
+
+import { VisuElement } from "@/types/visu/visuElements.types";
+import { RefObject, useEffect, useRef } from "react";
+
+interface Props {
+ element: VisuElement,
+ selected: boolean,
+ onSelect: () => void,
+ //isPanningRef: RefObject
+ onDrag: (element: VisuElement, dx: number, dy: number) => void;
+ gridSize: number;
+}
+
+
+export function SvgVisuElement({ element, onSelect, onDrag, selected, gridSize }: Props) {
+ const draggingRef = useRef(false);
+ const isMouseDownRef = useRef(false);
+ const lastPos = useRef({ x: 0, y: 0 });
+
+
+ useEffect(() => {
+ const handleGlobalMouseUp = () => {
+ draggingRef.current = false;
+ isMouseDownRef.current = false;
+ };
+
+ window.addEventListener("mouseup", handleGlobalMouseUp);
+ return () => window.removeEventListener("mouseup", handleGlobalMouseUp);
+ }, []);
+
+ const handleMouseDown = (e: React.MouseEvent) => {
+ e.stopPropagation();
+ draggingRef.current = false;
+ isMouseDownRef.current = true;
+ lastPos.current = { x: e.clientX, y: e.clientY };
+ };
+
+ const handleMouseMove = (e: React.MouseEvent) => {
+ e.stopPropagation();
+ if (!isMouseDownRef.current) return; //
+ const dx = e.clientX - lastPos.current.x;
+ const dy = e.clientY - lastPos.current.y;
+
+ if (!draggingRef.current && (Math.abs(dx) > 2 || Math.abs(dy) > 2)) {
+ draggingRef.current = true;
+ }
+
+ if (draggingRef.current) {
+ onDrag(element, dx, dy);
+ lastPos.current = { x: e.clientX, y: e.clientY };
+ }
+ };
+
+ const handleMouseUp = (e: React.MouseEvent) => {
+ e.stopPropagation();
+ //if (!draggingRef.current) {
+ // onSelect(element);
+ //}
+ draggingRef.current = false;
+ isMouseDownRef.current = false;
+ };
+
+ return (
+
+
+
+ {selected && }
+
+ {draggingRef.current ? DD : Normal}
+ {element.group?.nr ? {element.group.nr} : {element.id}}
+
+
+
+
+ );
+}
+
diff --git a/src/components/visu/svgElement.tsx b/src/components/visu/svgElement.tsx
new file mode 100644
index 0000000..36fe403
--- /dev/null
+++ b/src/components/visu/svgElement.tsx
@@ -0,0 +1,171 @@
+"use client"
+
+import { VisuElement } from "@/types/visu/visuElements.types";
+import { JSX, useState } from "react";
+
+interface Props {
+ element: VisuElement;
+ selected: boolean;
+ onElementMouseDown: (element: VisuElement, mouseEvent: React.MouseEvent) => void;
+}
+
+interface LineX {
+ pos: { x: number, y: number }[]
+}
+
+export function SvgVisuElement({ element, selected, onElementMouseDown }: Props) {
+
+ const [lines, setLinies] = useState({ pos: [{ x: 0, y: 0 }, { x: 100, y: 0 }, { x: 100, y: 50 }] })
+
+ const handleMouseDown = (e: React.MouseEvent) => {
+ e.stopPropagation();
+ onElementMouseDown(element, e);
+ };
+
+
+
+ return (
+ handleMouseDown(e)}
+ style={{ cursor: selected ? "move" : "pointer" }}
+ >
+ {/* 🔥 HITBOX (oben!) */}
+
+
+ {/* SVG DARF KEINE EVENTS BLOCKEN */}
+
+
+ {element.lines &&
+
+ {element.lines.map((line, index) => {
+ const result: JSX.Element[] = [];
+ for (let i = 0; i < line.points.length - 1; i++) {
+ const p1 = line.points[i];
+ const p2 = line.points[i + 1];
+
+ result.push(
+
+ );
+ }
+
+ return {result};
+ })}
+
+
+
+ }
+
+
+
+ {/* Label */}
+ {element.group && !element.posAggElemente && (
+
+ {element.group.nr}
+
+ )}
+
+
+
+ {/* Auswahl */}
+ {selected && (
+
+ )}
+
+ );
+}
+
+/*
+ {element.group && element.posAggElemente && (
+
+
+
+ tt
+
+ )}
+
+ {element.posAggElemente && element.posAggElemente.posAnfahrwarnung &&
+
+ }
+
+ {element.posAggElemente && element.posAggElemente.posBetriebsart &&
+
+ }
+
+ {element.posAggElemente && element.posAggElemente.posMotor &&
+
+ }
+
+ {element.posAggElemente && element.posAggElemente.posFuIst &&
+
+ }
+
+
+*/
\ No newline at end of file
diff --git a/src/components/visu/utilities/snap.ts b/src/components/visu/utilities/snap.ts
new file mode 100644
index 0000000..b8e9dc1
--- /dev/null
+++ b/src/components/visu/utilities/snap.ts
@@ -0,0 +1,12 @@
+
+
+export const snapToGrid = (value: number, gridSize: number) => {
+ return Math.round(value / gridSize) * gridSize;
+};
+
+export const snapPointToGrid = (x: number, y: number, gridSize: number) => {
+ return {
+ x: snapToGrid(x, gridSize),
+ y: snapToGrid(y, gridSize),
+ };
+};
\ No newline at end of file
diff --git a/src/components/visu/visuAddGroups.tsx b/src/components/visu/visuAddGroups.tsx
new file mode 100644
index 0000000..7950956
--- /dev/null
+++ b/src/components/visu/visuAddGroups.tsx
@@ -0,0 +1,154 @@
+"use client"
+
+
+import { api_VisuElementCreate } from "@/actions/rk/api-visuElements";
+import GroupSelect from "@/components/rk/groups/groupSelect";
+
+import VisuElementList from "@/components/visu/visuElementList";
+import { Element, Group } from "@/types/rk";
+import { VisuElement, VisuElementCreate } from "@/types/visu/visuElements.types";
+import { useEffect, useState } from "react";
+import ElementSelect from "../rk/elements/elementSelect";
+
+interface Props {
+ groups: Group[],
+ elements: Element[]
+ visuElements: VisuElement[]
+}
+
+
+export default function VisuAddGroups({ groups, visuElements, elements }: Props) {
+
+ const [selectedGroup, setSelectedGroup] = useState()
+ const [selectedElement, setSelectedElement] = useState()
+ const [filteredGroups, setFilterdGroups] = useState([])
+ const [filteredElements, setFilterdElements] = useState([])
+ const [svgTypeName, setSvgTypeName] = useState()
+
+ useEffect(() => {
+ filterGroups();
+ filterElements()
+ }, [visuElements, groups,elements])
+
+ const handleSelectGroup = (group: Group) => {
+ setSelectedGroup(() => group);
+ }
+
+ const handleSelectElement = (element: Element) => {
+ setSelectedElement(() => element);
+ }
+
+ const filterGroups = () => {
+ const filterd = groups.filter((g) => {
+ const findGroupInElements = visuElements.find((ve) => ve.groupId == g.id);
+ if (!findGroupInElements) return g;
+ })
+
+ setFilterdGroups(() => filterd);
+ }
+
+ const filterElements = () => {
+ const filterd = elements.filter((el) => {
+ const findElementInVisuElements = visuElements.find((ve) => ve.elementId == el.id);
+ if (!findElementInVisuElements) return el;
+ })
+
+ setFilterdElements(() => filterd);
+ }
+
+ const onSaveGroup_old = () => {
+ if (!selectedGroup) return;
+ if (!svgTypeName) return;
+
+ let name = svgTypeName;
+ let variant = ""
+ if (svgTypeName === 'pumpensumpf') {
+ name = 'behaelter';
+ variant = 'pumpensumpf'
+ }
+
+ const data: VisuElementCreate = {
+ anlageId: selectedGroup.anlageId,
+ groupId: selectedGroup.id,
+ name: 'G_' + selectedGroup.nr + '_' + selectedGroup.name,
+ svgTypeName: name,
+ svgTypeVariant: variant,
+ posX: 100,
+ posY: 100
+
+ }
+ api_VisuElementCreate(data)
+ }
+
+ const onSave = () => {
+ if (!selectedElement) return;
+ if (!svgTypeName) return;
+
+ let name = svgTypeName;
+ let variant = ""
+ if (svgTypeName === 'pumpensumpf') {
+ name = 'behaelter';
+ variant = 'pumpensumpf'
+ }
+ const prefix = selectedElement.prefix ? "_"+ selectedElement.prefix : ""
+ const funcTxt = selectedElement.funcTxt ? "_"+ selectedElement.funcTxt : ""
+ const data: VisuElementCreate = {
+ anlageId: selectedElement.anlageId,
+ groupId: selectedElement.group.id,
+ elementId: selectedElement.id,
+ name: 'G_' + selectedElement.group.nr + prefix + '_' + selectedElement.group.name + funcTxt,
+ svgTypeName: name,
+ svgTypeVariant: variant,
+ posX: 100,
+ posY: 100
+
+ }
+ api_VisuElementCreate(data)
+ }
+
+ return (
+
+
+
+
+ {/* */}
+
+
+
+ {selectedElement ?
+
+
{selectedElement.group.nr}{selectedElement.prefix ? '_'+ selectedElement.prefix:"" }_{selectedElement.group.name}
+
+ - setSvgTypeName('band')}>Band
+ - setSvgTypeName('gurtfoerderer')}>Gurtfoerderer
+ - setSvgTypeName('sieb')}>Sieb
+ - setSvgTypeName('band')}>Band
+ - setSvgTypeName('setzmaschine')}>Setzmaschine
+ - setSvgTypeName('brecher')}>Brecher
+ - setSvgTypeName('behaelter')}>Behaelter
+ - setSvgTypeName('siebentwaesserung')}>Siebentwaesserung
+ - setSvgTypeName('weiche')}>Weiche
+ - setSvgTypeName('zyklon')}>Zyklon
+ - setSvgTypeName('turbowascher')}>Turbowascher
+ - setSvgTypeName('haspel')}>Haspel
+ - setSvgTypeName('silo')}>Silo
+ - setSvgTypeName('pumpensumpf')}>Pumpensumpf
+ - setSvgTypeName('pumpe')}>Pumpe
+ - setSvgTypeName('ventil')}>Ventil
+ - setSvgTypeName('wasserZufuhr')}>WasserZufuhr
+ - setSvgTypeName('motor')}>Motor
+
+
+ {svgTypeName ?
:
Bitt SVG Typ Auswählen
}
+
+ :
+
Select Group
+ }
+
+
+
+
+
+
+
{JSON.stringify(selectedElement)}
+
{JSON.stringify(dragState.current)}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {selectedElement &&
+
handleChangeParameter({ posX: Number.parseFloat(v.target.value) })} />
+
handleChangeParameter({ posY: Number.parseFloat(v.target.value) })} />
+
+
Höhe
+
{selectedElement.height}
+
+
+
+ }
+
+
+
+
+ {state.selectedElement &&
console.log('on change n.v.') }/>}
+
+ {true &&
+
+
{JSON.stringify(state.selectedElement)}
+
{JSON.stringify(state.drag)}
+
+
+ {elements.map((item) => (
+
handleSelect(item)} key={item.id}>
+ {item.group ?
+
{`${item.group.nr} ${item.group.name}`}
+ :
+
{`${item.id} no Group`}
+ }
+ {item.elementId ?
+
{item.elementId}
+ :
+
{`${item.id} no Element`}
+ }
+
+ )
+ )}
+
+
No Selection
+ const scaleInput = useNumberInput({ value: state.selectedElement.scale, fallback: 1, min: 0.1, onCommit: updateField("scale"), });
+ const widthInput = useNumberInput({ value: state.selectedElement.width, fallback: 5, min: 1, onCommit: updateField("width"), });
+ const heightInput = useNumberInput({ value: state.selectedElement.height, fallback: 5, min: 1, onCommit: updateField("height"), });
+ const rasterInput = useNumberInput({ value: state.selectedElement.raster, fallback: 5, min: 1, onCommit: updateField("raster"), });
+ const posXInput = useNumberInput({ value: state.selectedElement.posX, fallback: 5, min: 1, onCommit: updateField("posX"), });
+ const posYInput = useNumberInput({ value: state.selectedElement.posY, fallback: 5, min: 1, onCommit: updateField("posY"), });
+ const angleInput = useNumberInput({ value: state.selectedElement.angle, fallback: 0, onCommit: updateField("angle"), });
+
+
+
+ const handleChangeLine = (line: VisuLine, index: number) => {
+ if (!state.selectedElement?.lines) return;
+
+ const lines = state.selectedElement.lines;
+ if (lines && index < lines.length) {
+ lines[index] = line;
+ api_VisuElementUpdate(state.selectedElement.id, { lines: lines })
+ }
+ }
+
+
+ const addLine = ()=>{
+ let element = state.selectedElement;
+ if(!element) return;
+ if(!element.lines) element['lines'] = [];
+
+ element?.lines?.push({bezeichnung:"ausgang",color:"#202020",offsetX:0,offsetY:0,points:[{x:0,y:0},{x:0,y:50},{x:50,y:50}]});
+ console.log(element)
+ dispatch({type:"UPDATE_ELEMENT",payload:element})
+
+ }
+
+
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{state.selectedElement.px_width}
+
+
+
+
+
+
{state.selectedElement.px_height}
+
+
+ {
}
+ {state.selectedElement.lines?.map((line, index) =>
handleChangeLine(line, index)}>)}
+
+
`${c}px`).join(" ")
+ }}>
+
Group
+
Name
+
SVG Name
+
`${c}px`).join(" ")
+ }}
+ >
+
{item.group.nr}_{item.group.name}
+
+
+
+
+ {head()}
+ {show()}
+
+
+ )
+}
+
+
diff --git a/src/components/visu/visuLinePointInput.tsx b/src/components/visu/visuLinePointInput.tsx
new file mode 100644
index 0000000..ba6a053
--- /dev/null
+++ b/src/components/visu/visuLinePointInput.tsx
@@ -0,0 +1,60 @@
+"use client"
+
+import { VisuLinePoint } from "@/types/visu/visuLine.types";
+import { useNumberInput } from "@/hooks/useNumberInput";
+
+interface Props {
+ index: number;
+ point: VisuLinePoint;
+
+ onChangePoints: (index: number, point: Partial) => void;
+}
+
+
+
+export default function VisuLinePointInput({ index, point, onChangePoints }: Props) {
+
+
+ const update = (field: 'x' | 'y', value: number) => {
+
+ let point: Partial = {}
+ if (field === 'x') point['x'] = value;
+ if (field === 'y') point['y'] = value;
+
+
+ onChangePoints(index, point);
+ }
+
+ const posX = useNumberInput({ value: point.x, onCommit: (value) => update('x', value), });
+ const posY = useNumberInput({ value: point.y, onCommit: (value) => update('y', value), });
+
+
+
+
+
+ return (
+
+
+
+
{index}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {line.points.map((point, index) =>
+
+
+
+
+
+ )}
+
+
+
Mausposition
+
X: {pos.x}
+
Y: {pos.y}
+