chore: merge the rest of the nodes back into this structure, and make sure that start and end nodes are not deletable.

src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.tsx

@@ -8,6 +8,8 @@ import {
 } from '@xyflow/react';
 import { Toolbar } from '../components/NodeComponents';
 import styles from '../../VisProg.module.css';
+import { TextField } from '../../../../components/TextField';
+import useFlowStore from '../VisProgStores';
 
 /**
  * The default data dot a Goal node
@@ -17,8 +19,9 @@ import styles from '../../VisProg.module.css';
  */
 export type GoalNodeData = {
   label: string;
+  description: string;
   droppable: boolean;
-  GoalList: string[];
+  achieved: boolean;
   hasReduce: boolean;
 };
 
@@ -37,23 +40,47 @@ export function GoalNodeCanConnect(connection: Connection | Edge): boolean {
  * @returns React.JSX.Element
  */
 export default function GoalNode(props: NodeProps<Node>) {
-  const label_input_id = `Goal_${props.id}_label_input`;
   const data = props.data as GoalNodeData;
-  return (
-    <>
-      <Toolbar nodeId={props.id} allowDelete={true}/>
-      <div className={`${styles.defaultNode} ${styles.nodeGoal}`}>
-        <div className={"flex-row gap-sm"}>
-          <label htmlFor={label_input_id}></label>
-          {props.data.label as string}
-        </div>
-        {data.GoalList.map((Goal) => (<div>{Goal}</div>))}
-        <Handle type="target" position={Position.Right} id="phase"/>
+  const {updateNodeData} = useFlowStore();
+
+  const text_input_id = `goal_${props.id}_text_input`;
+  const checkbox_id = `goal_${props.id}_checkbox`;
+
+  const setDescription = (value: string) => {
+    updateNodeData(props.id, {...data, description: value});
+  }
+
+  const setAchieved = (value: boolean) => {
+    updateNodeData(props.id, {...data, achieved: value});
+  }
+
+  return <>
+    <Toolbar nodeId={props.id} allowDelete={true}/>
+    <div className={`${styles.defaultNode} ${styles.nodeGoal} flex-col gap-sm`}>
+      <div className={"flex-row gap-md"}>
+        <label htmlFor={text_input_id}>Goal:</label>
+        <TextField
+          id={text_input_id}
+          value={data.description}
+          setValue={(val) => setDescription(val)}
+          placeholder={"To ..."}
+        />
       </div>
-    </>
-  );
+      <div className={"flex-row gap-md align-center"}>
+        <label htmlFor={checkbox_id}>Achieved:</label>
+        <input
+          id={checkbox_id}
+          type={"checkbox"}
+          value={data.achieved ? "checked" : ""}
+          onChange={(e) => setAchieved(e.target.checked)}
+        />
+      </div>
+      <Handle type="source" position={Position.Right} id="GoalSource"/>
+    </div>
+  </>;
 }
 
+
 /**
  * Reduces each Goal, including its children down into its relevant data.
  * @param props: The Node Properties of this node.
@@ -66,7 +93,7 @@ export function GoalReduce(node: Node, nodes: Node[]) {
   const data = node.data as GoalNodeData;
     return {
       label: data.label,
-      list: data.GoalList,
+      achieved: data.achieved,
     }
 }