Revize 4e91ed40

Annotation panel events

Added events that propagate changes between panels in the annotation view

webapp/components/annotation/annotationPanel.tsx

@@ -1 @@
-import AnnotationItem from './annotationItem';
+import { Stack } from 'react-bootstrap';
+import { AnnotationItem } from './annotationItem';
+import { Occurrence, Tag } from '../models/tag';
+
+type AnnotationPanelProps = {
+    tags: Tag[];
+    onAddOccurrence: (tag: Tag) => void;
+    onDeleteOccurrence: (occurrence: Occurrence) => void;
+    onChangeVisibility: (tag: Tag) => void;
+    onChangePosition: (occurrence: Occurrence, newValue: number) => void;
+    onChangeLength: (occurrence: Occurrence, newValue: number) => void;
+};
 
 /**
  * Creates a panel in the annotation screen that contains a list of annotations.
  * @returns Panel with a list of annotations.
  */
-export function AnnotationPanel() {
+export function AnnotationPanel(props: AnnotationPanelProps) {
     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={[]} />
+            <Stack>
+                {props.tags.map((tag, index) => {
+                    return (
+                        <AnnotationItem
+                            key={index}
+                            tag={tag}
+                            onAddOccurrence={props.onAddOccurrence}
+                            onDeleteOccurrence={props.onDeleteOccurrence}
+                            onChangeVisibility={props.onChangeVisibility}
+                            onChangePosition={props.onChangePosition}
+                            onChangeLength={props.onChangeLength}
+                        />
+                    );
+                })}
+            </Stack>
         </div>
     );
 }