Revize ac9bd13c

Basic functionality of an annotation panel

The panel is without css styles. Basic functionality is implemented.

webapp/components/annotation/annotationItem.tsx

@@ +1 @@
+import { Row } from 'react-bootstrap';
+import { Occurrence, Tag } from '../models/tag';
+import { useState } from 'react';
+
+import 'antd/dist/antd.css';
+import { Button } from 'antd';
+import {
+    PlusOutlined,
+    EyeOutlined,
+    DownOutlined,
+    DeleteOutlined,
+} from '@ant-design/icons';
+
+function AnnotationItem(tag: Tag) {
+    const [visibleProperties, setVisibleProperties] = useState(false);
+    const [visible, setVisible] = useState(true);
+
+    const addOccurrence = () => {};
+
+    const deleteOccurrence = (occurrence: Occurrence) => (e: any) => {};
+
+    const changeVisibility = () => {};
+
+    const changePropertiesVisiblity = () => {
+        setVisibleProperties(!visibleProperties);
+    };
+
+    return (
+        <div>
+            <Row>
+                {tag.name}
+                <Button
+                    type="text"
+                    shape="circle"
+                    icon={<PlusOutlined />}
+                    onClick={addOccurrence}
+                />
+                <Button
+                    type="text"
+                    shape="circle"
+                    icon={<EyeOutlined />}
+                    onClick={changeVisibility}
+                />
+                <Button
+                    type="text"
+                    shape="circle"
+                    icon={<DownOutlined />}
+                    onClick={changePropertiesVisiblity}
+                />
+            </Row>
+            {visibleProperties && (
+                <Row>
+                    {tag.category}
+                    Výskyty
+                    {tag.occurrences.map((occurrence, index) => {
+                        return (
+                            <div key={index}>
+                                {occurrence.position}
+                                {occurrence.length}
+                                <Button
+                                    icon={<DeleteOutlined />}
+                                    onClick={deleteOccurrence(occurrence)}
+                                ></Button>
+                            </div>
+                        );
+                    })}
+                </Row>
+            )}
+        </div>
+    );
+}
+
+export default AnnotationItem;

webapp/components/annotation/annotationPanel.tsx

@@ +1 @@
+import AnnotationItem from './annotationItem';
+
 /**
  * Creates a panel in the annotation screen that contains a list of annotations.
  * @returns Panel with a list of annotations.
@@ -6 +8 @@
     return (
         <div>
             <p>Panel with a list of annotations</p>
+            <AnnotationItem name={'tag a'} category={'kategorie 1'} occurrences={[]} />
+            <AnnotationItem name={'tag b'} category={'kategorie 2'} occurrences={[]} />
         </div>
     );
 }

webapp/components/models/tag.tsx

@@ +1 @@
+import internal from 'stream';
+
+export type Tag = {
+    name: string;
+    category: string;
+    occurrences: Occurrence[];
+};
+
+export type Occurrence = {
+    position: number;
+    length: number;
+};