Rework Word Detection + Generate Action (#8)

* feat(): add babel-eslint to help IDE

* feat(localstorage): create Generic class

* fix(Actions): save locally list of actions
rename
+ rename event to action !

* feat(LocalStorage): 100% coverage

* feat(Word Detection): add Actions + save Events

* fix(): update sidebar
Audio part
Video part
Action part

* fix(test): remove unupdated tests

Author: Mitix-EPI

package.json

@@ -25,6 +25,7 @@
     "@types/react-dom": "^16.9.8",
     "@types/react-ranger": "^2.0.1",
     "@types/styled-components": "^5.1.17",
+    "babel-eslint": "^10.1.0",
     "concurrently": "^5.2.0",
     "electron-is-dev": "^1.2.0",
     "electron-renderer": "^2.0.4",
@@ -61,6 +62,7 @@
     "publish": "electron-forge publish",
     "build": "yarn react-build && npm run electron-build",
     "test": "react-scripts test",
+    "test-coverage": "react-scripts test --coverage",
     "compile": "electron-webpack",
     "dist:dir": "yarn dist --dir -c.compression=store -c.mac.identity=null",
     "eject": "react-scripts eject",

src/Components/Events/GeneralEvent.css renamed to src/Components/Actions/GeneralActions.css

@@ -1,5 +1,5 @@
 import React from 'react';
-import './GeneralEvent.css';
+import './GeneralActions.css';
 import Card from '@mui/material/Card';
 import CardActions from '@mui/material/CardActions';
 import CardContent from '@mui/material/CardContent';
@@ -16,80 +16,63 @@ import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
 import NumericInput from 'material-ui-numeric-input';
+import { LocalStorage } from '../../LocalStorage/LocalStorage';
 
-export enum EventType {
+export enum ActionType {
   ChangeCamera,
   ChangeScene,
   StartLive,
   StopLive,
   ActivateSoundboard
 }
 
-export const GeneralEvent = () => {
+export const GeneralActions = () => {
 
-  const keysEventType = Object.keys(EventType).filter(k => typeof EventType[k as any] === "number");
-  const valuesEventType = keysEventType.map(k => EventType[k as any]);
+  const keysActionType = Object.keys(ActionType).filter(k => typeof ActionType[k as any] === "number");
+  const valuesActionType = keysActionType.map(k => ActionType[k as any]);
 
   const [open, setOpen] = React.useState(false);
-  const [newEventName, setNewEventName] = React.useState("");
-  const [newEventSelected, setNewEventSelected] = React.useState(0);
-  const [newEventParam, setNewEventParam] = React.useState(0)
+  const [newActionName, setNewActionName] = React.useState("");
+  const [newActionSelected, setNewActionSelected] = React.useState(0);
+  const [newActionParam, setNewActionParam] = React.useState(0)
 
-  const handleOnChangeSelect = (event: SelectChangeEvent<unknown>) => {
-    const value = event.target.value as EventType;
-    setNewEventSelected(value);
+  const handleOnChangeSelect = (action: SelectChangeEvent<unknown>) => {
+    const value = action.target.value as ActionType;
+    setNewActionSelected(value);
   };
 
   const handleClickOpen = () => {
     setOpen(true);
   };
 
-  const [ exampleEvents, setExampleEvents ] = React.useState([
-    {
-      id: 1,
-      name: "Change to camera 2",
-      event: EventType.ChangeCamera,
-      param_value: 2
-    },
-    {
-      id: 4,
-      name: "Cut the live with 30delay",
-      event: EventType.StopLive,
-      param_value: 30
-    },
-    {
-      id: 5,
-      name: "LoL Sound",
-      event: EventType.ActivateSoundboard,
-      param_value: 8
-    }
-  ])
+  const [ actionsList, setActionsList ] = React.useState(LocalStorage.getItemObject("actionsList") || [])
 
   const handleSave = () => {
-    console.log("newEventName", newEventName);
-    console.log("newEventSelected", newEventSelected);
-    console.log("newEventParam", newEventParam);
-    if (newEventName !== "") {
+    console.log("newActionName", newActionName);
+    console.log("newActionSelected", newActionSelected);
+    console.log("newActionParam", newActionParam);
+    if (newActionName !== "") {
       let newElem: any = {
-        id: Math.max(...exampleEvents.map(o => o.id)) + 1,
-        name: newEventName,
-        event: newEventSelected as EventType,
+        id: actionsList.length > 0 ? Math.max(...actionsList.map((o: any) => o.id)) + 1 : 1,
+        name: newActionName,
+        action: newActionSelected as ActionType,
       }
-      if (newEventParam) {
-        newElem.param_value = newEventParam;
+      if (newActionParam) {
+        newElem.param_value = newActionParam;
       }
 
-      const newList = exampleEvents.concat([newElem]);
+      const newList = actionsList.concat([newElem]);
 
-      setExampleEvents(newList);
-      alert("Event saved");
+      setActionsList(newList);
+      LocalStorage.setItemObject("actionsList", newList)
+      alert("Action saved");
     } else {
       // Put alert
       alert("Missing parameters");
     }
-    setNewEventName("");
-    setNewEventSelected(0);
-    setNewEventParam(0);
+    setNewActionName("");
+    setNewActionSelected(0);
+    setNewActionParam(0);
     setOpen(false);
   };
 
@@ -98,36 +81,37 @@ export const GeneralEvent = () => {
   }
 
 
-    function deleteEvent(id: number) {
-      const newList = exampleEvents.filter((item) => item.id !== id);
+    function deleteAction(id: number) {
+      const newList = actionsList.filter((item: any) => item.id !== id);
 
-      setExampleEvents(newList);
+      LocalStorage.setItemObject("actionsList", newList)
+      setActionsList(newList);
     }
 
-    function getEvent(eventEnum: any) {
-      if (eventEnum === EventType.ActivateSoundboard)
+    function getAction(actionEnum: any) {
+      if (actionEnum === ActionType.ActivateSoundboard)
         return "Activate Soundboard";
-      if (eventEnum === EventType.ChangeCamera)
+      if (actionEnum === ActionType.ChangeCamera)
         return "Change the camera"
-      if (eventEnum === EventType.ChangeScene)
+      if (actionEnum === ActionType.ChangeScene)
         return "Change the scene"
-      if (eventEnum === EventType.StartLive)
+      if (actionEnum === ActionType.StartLive)
         return "Start the live"
-      if (eventEnum === EventType.StopLive)
+      if (actionEnum === ActionType.StopLive)
         return "Stop the live"
       return ""
     }
 
-    function getIcon(eventEnum: EventType) {
-      if (eventEnum === EventType.ActivateSoundboard)
+    function getIcon(actionEnum: ActionType) {
+      if (actionEnum === ActionType.ActivateSoundboard)
         return <AiOutlineSound />
-      if (eventEnum === EventType.ChangeCamera)
+      if (actionEnum === ActionType.ChangeCamera)
         return <AiOutlineVideoCamera />
-      if (eventEnum === EventType.ChangeScene)
+      if (actionEnum === ActionType.ChangeScene)
         return <MdPanoramaHorizontal />
-      if (eventEnum === EventType.StartLive)
+      if (actionEnum === ActionType.StartLive)
         return <AiOutlinePlayCircle />
-      if (eventEnum === EventType.StopLive)
+      if (actionEnum === ActionType.StopLive)
         return <AiOutlineStop />
       return <AiOutlineBug />
     }
@@ -136,29 +120,29 @@ export const GeneralEvent = () => {
       <>
         <div className="container events-container">
 
-          <h2>List of Events</h2>
+          <h2>List of Actions</h2>
 
           {
-            exampleEvents.length === 0 ? (
+            actionsList.length === 0 ? (
               <>
-                <h4>No events found.</h4>
+                <h4>No action found.</h4>
               </>
-            ) : (exampleEvents.map((item, index) => {
+            ) : (actionsList.map((item: any, index: any) => {
               return (
                 <Card key={index} className="card-event" sx={{ minWidth: 150, minHeight: 100, margin: 2 }}>
                   <CardContent>
                     <Typography variant="h5" component="div">
-                      { getIcon(item.event) } "{ item.name }"
+                      { getIcon(item.action) } "{ item.name }"
                     </Typography>
                     <Typography sx={{ mb: 1.5 }} color="text.secondary">
-                      { getEvent(item.event) }
+                      { getAction(item.action) }
                     </Typography>
                     <Typography variant="body2">
                       { item.param_value ? "Parameter:" + item.param_value : "" }
                     </Typography>
                   </CardContent>
                   <CardActions disableSpacing className="rightAlignItem">
-                    <IconButton onClick={() => deleteEvent(item.id)} aria-label="delete">
+                    <IconButton onClick={() => deleteAction(item.id)} aria-label="delete">
                       <BsTrash />
                     </IconButton>
                   </CardActions>
@@ -170,7 +154,7 @@ export const GeneralEvent = () => {
         </div>
 
         <Dialog open={open} onClose={handleCancel}>
-          <DialogTitle>Add Event</DialogTitle>
+          <DialogTitle>Add Action</DialogTitle>
           <DialogContent>
             <DialogContentText>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -184,40 +168,40 @@ export const GeneralEvent = () => {
               <TextField
                 autoFocus
                 id="name"
-                label="Name of the event"
+                label="Name of the action"
                 type="text"
-                value={newEventName}
+                value={newActionName}
                 variant="standard"
-                onChange={(newValue) => setNewEventName(newValue.target.value)}
+                onChange={(newValue) => setNewActionName(newValue.target.value)}
               />
             </div>
 
             <div className="form-item">
-              <InputLabel id="select-event-label">Event</InputLabel>
+              <InputLabel id="select-event-label">Action</InputLabel>
               <Select
                 labelId="select-event-label"
                 id="select-event"
-                value={newEventSelected}
+                value={newActionSelected}
                 onChange={handleOnChangeSelect}
                 autoWidth
-                label="Event"
+                label="Action"
               >
                 {
-                  keysEventType.map((k) => {
-                    return (<MenuItem key={EventType[k as any]} value={EventType[k as any]}>{getEvent(EventType[k as any])}</MenuItem>)
+                  keysActionType.map((k) => {
+                    return (<MenuItem key={ActionType[k as any]} value={ActionType[k as any]}>{getAction(ActionType[k as any])}</MenuItem>)
                   })
                 }
               </Select>
             </div>
 
             <div className="form-item">
               <NumericInput
-                name='Parameter event'
+                name='Parameter action'
                 precision={0}
                 decimalChar=','
                 thousandChar='.'
-                label='Parameter event'
-                onChange={(event) => setNewEventParam(event.target.value as number)}
+                label='Parameter action'
+                onChange={(action) => setNewActionParam(action.target.value as number)}
                 variant='outlined'
               />
             </div>
@@ -232,7 +216,7 @@ export const GeneralEvent = () => {
         <div className="add_button_pos">
           <Button variant="contained" className="add_button" onClick={handleClickOpen}
           >
-            Add Event
+            Add Action
           </Button>
         </div>
       </>

src/Components/Events/GeneralEvent.tsx renamed to src/Components/Actions/GeneralActions.tsx

@@ -46,12 +46,12 @@ export const AddNewWord = (props: any) => {
   const handleClose = () => setOpen(false);
 
   const save = () => {
-    if (props.newEvent.keywords.length != 0) {
+    if (props.newEvent.keywords.length !== 0 && props.newEvent.source && props.newEvent.source.name) {
       props.addNewEvent(props.newEvent);
+      handleClose();
     } else {
-      props.setnewEvent({ id: props.newEvent, keywords: [], sources: [] });
+      alert("Please insert at least one keyword and one source.")
     }
-    handleClose();
   };
 
   const closeWithoutSave = () => {
@@ -60,7 +60,7 @@ export const AddNewWord = (props: any) => {
   };
 
   const handleChange = (e: any) => {
-    if (e.key === "Enter" && e.currentTarget.value != "") {
+    if (e.key === "Enter" && e.currentTarget.value !== "") {
       if (props.newEvent.keywords.length >= 10) {
         e.currentTarget.value = ""
         alert("You cannot have more than 10 keywords");
@@ -82,13 +82,9 @@ export const AddNewWord = (props: any) => {
 
   const addSource = (event: SelectChangeEvent) => {
     let cpy = {...props.newEvent};
-
-    if (props.newEvent.sources.indexOf(event.target.value as string) !== -1) {
-      alert("This source already exists!");
-    } else {
-      cpy.sources.push(event.target.value as string);
-      setsources(cpy);
-    }
+  
+    cpy.source = props.sources.find((elem: any) => elem.name === event.target.value)
+    props.setnewEvent(cpy);
   };
 
   const deleteKeyWord = (i: number) => {
@@ -98,16 +94,7 @@ export const AddNewWord = (props: any) => {
       cpy.keywords.splice(i, 1);
     }
     props.setnewEvent(cpy);
-  };
-
-  const deleteSource = (i: number) => {
-    let cpy = {...props.newEvent};
-
-    if (i > -1) {
-      cpy.sources.splice(i, 1);
-    }
-    props.setnewEvent(cpy);
-  };
+  }
 
   return (
     <>
@@ -127,7 +114,6 @@ export const AddNewWord = (props: any) => {
         handleChange={handleChange}
         addSource={addSource}
         deleteKeyWord={deleteKeyWord}
-        deleteSource={deleteSource}
 
         sources={props.sources}
         newEvent={props.newEvent}

src/Components/AddNewWord/AddNewWord.tsx

@@ -8,11 +8,11 @@ import {
 	Link
 } from "react-router-dom";
 import { Home } from '../Home/Home'
-import { Product } from '../Product/Product'
+import { Subtitles } from '../Subtitles/Subtitles'
 import { Report } from '../Report/Report'
 import { MicsLevel } from '../MicsLevel/MicsLevel';
 import { WordDetection } from '../WordDetection/WordDetection';
-import { GeneralEvent } from '../Events/GeneralEvent';
+import { GeneralActions } from '../Actions/GeneralActions';
 import { AllMics, resultFormat } from '../../Socket/interfaces';
 import { Scenes } from '../Scenes/Scenes';
 const ipcRenderer = window.require('electron').ipcRenderer
@@ -70,11 +70,11 @@ export default function App() {
 					<Routes>
 						<Route path='/' element={<Home/>}/>
 						<Route path='/reports' element={<Report/>} />
-						<Route path='/products' element={<Product/>} />
 						<Route path='/audio/mics-level' element={<MicsLevel/>} />
 						<Route path='/audio/word-detection' element={<WordDetection/>} />
-						<Route path='/events/general' element={<GeneralEvent/>} />
-						<Route path='/audio/Scenes' element={<Scenes/>} />
+						<Route path='/video/scenes' element={<Scenes/>} />
+						<Route path='/video/subtitles' element={<Subtitles/>} />
+						<Route path='/action/general' element={<GeneralActions/>} />
 					</Routes>
 				</div>
 			</Router>