Revize 5593c10b

Connected tag panel to server

webapp/components/annotation/SubTagItem.tsx

@@ -1 @@
-import { SubTagInfo } from '../../api';
+import { SubTagInfo, TagInfo } from '../../api';
 import { Container, Row } from 'react-bootstrap';
 import { Button } from 'antd';
+import { useContext } from 'react';
+import { TagCategoryContext } from '../../contexts/TagCategoryContext';
 
 /**
  * Creates a single tag item in a tag panel.
  * @param props Properties should contain the tag.
  * @returns The item that represents the tag.
  */
-export function SubTagItem(props: { subTag: SubTagInfo }) {
+export function SubTagItem(props: { tag: TagInfo; subTag: SubTagInfo }) {
+    const { selectTag } = useContext(TagCategoryContext);
+
     /**
      * Selects the sub tag.
      */
-    const selectSubTag = () => {};
+    const onSelectSubTag = () => {
+        selectTag(props.tag, props.subTag);
+    };
 
     return (
         <Container>
             <Row>
-                <Button type="text" onClick={selectSubTag} className="w-100 text-start">
+                <Button type="text" onClick={onSelectSubTag} className="w-100 text-start">
                     {props.subTag.name}
                 </Button>
             </Row>

webapp/components/annotation/TagItem.tsx

@@ -2 +2 @@
 import { TagInfo } from '../../api';
 import { Button } from 'antd';
 import { DownOutlined, TagOutlined } from '@ant-design/icons';
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import { SubTagItem } from './SubTagItem';
+import { TagCategoryContext } from '../../contexts/TagCategoryContext';
 
 /**
  * Creates a single tag item in a tag panel.
@@ -16 +17 @@
      */
     const [visibleSubTags, setVisibleSubTags] = useState(false);
 
+    const { selectTag } = useContext(TagCategoryContext);
+
     /**
      * Changes visibility of sub tags.
      */
@@ -26 +29 @@
     /**
      * Selects the tag.
      */
-    const selectTag = () => {};
+    const onSelectTag = () => {
+        selectTag(props.tag, null);
+    };
 
     return (
         <Container>
@@ -45 +50 @@
                     {!props.tag.subTags && (
                         <Button
                             type="text"
-                            onClick={selectTag}
+                            onClick={onSelectTag}
                             className="w-100 text-start"
                         >
                             {props.tag.name}
@@ -59 +64 @@
             {props.tag.subTags && visibleSubTags && (
                 <Stack>
                     {props.tag.subTags?.map((subTag, index) => (
-                        <SubTagItem subTag={subTag} key={index} />
+                        <SubTagItem tag={props.tag} subTag={subTag} key={index} />
                     ))}
                 </Stack>
             )}

webapp/components/annotation/TagPanel.tsx

@@ -1 +1 @@
 import { CategoryItem } from './CategoryItem';
 import { TagCategoryInfo } from '../../api';
 import { Stack } from 'react-bootstrap';
+import { useContext } from 'react';
+import { TagCategoryContext } from '../../contexts/TagCategoryContext';
 
 /**
  * Creates a panel in the annotation screen that contains a list of tag.
  * @returns Panel with a list of tags.
  */
 export function TagPanel() {
-    const tags: TagCategoryInfo[] = [
-        {
-            name: 'kategorie 1',
-            color: '#FF0000',
-            tags: [
-                {
-                    name: 'tag 1',
-                    color: '#CD5C5C',
-                    subTags: [{ name: 'subTag 1' }, { name: 'subTag 2' }],
-                },
-                { name: 'tag 2', color: '#F08080' },
-            ],
-        },
-        {
-            name: 'kategorie 2',
-            color: '#0000FF',
-            tags: [{ name: 'tag 3', color: '#3498DB' }],
-        },
-    ];
+    const { tagCategories } = useContext(TagCategoryContext);
 
     return (
         <div>
             <Stack>
-                {tags.map((category, index) => (
+                {tagCategories?.map((category, index) => (
                     <CategoryItem category={category} key={index} />
                 ))}
             </Stack>