feat: add save and load actions and init tutorial

Author: alberto-abarzua

backend/src/main.py

@@ -6,6 +6,14 @@
 from routers.move import router as move_router
 from routers.settings import router as settings_router
 from utils.general import start_controller, stop_controller
+import logging
+
+class IgnoreEndpointFilter(logging.Filter):
+    def filter(self, record):
+        return '/settings/status/' not in record.getMessage()
+
+logging.basicConfig(level=logging.INFO)
+logging.getLogger('uvicorn.access').addFilter(IgnoreEndpointFilter())
 
 
 @asynccontextmanager

backend/src/utils/general.py

@@ -9,7 +9,7 @@
 CONFIG_FILE = PARENT_DIR / "config" / "main_arm.toml"
 
 
-PRINT_DEBUG = True
+PRINT_DEBUG = False
 
 
 def get_controller() -> ArmController:

frontend/package-lock.json

@@ -19,10 +19,12 @@
         "@mui/icons-material": "^5.14.7",
         "@radix-ui/react-accordion": "^1.1.2",
         "@radix-ui/react-context-menu": "^2.1.5",
+        "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-dropdown-menu": "^2.0.6",
         "@radix-ui/react-label": "^2.0.2",
         "@radix-ui/react-slot": "^1.0.2",
         "@radix-ui/react-switch": "^1.0.3",
+        "@radix-ui/react-toast": "^1.1.5",
         "@radix-ui/react-tooltip": "^1.0.7",
         "@reduxjs/toolkit": "^1.9.5",
         "autoprefixer": "10.4.15",
@@ -45,6 +47,7 @@
         "react-dnd": "^16.0.1",
         "react-dnd-html5-backend": "^16.0.1",
         "react-dom": "18.2.0",
+        "react-dropzone": "^14.2.3",
         "react-redux": "^8.1.2",
         "redux-saga": "^1.2.3",
         "shadcn-ui": "^0.4.1",

frontend/package.json

@@ -6,56 +6,83 @@ import AddIcon from '@mui/icons-material/Add';
 import PropTypes from 'prop-types';
 import { useContext, useState } from 'react';
 import { useDrop } from 'react-dnd';
+import { NativeTypes } from 'react-dnd-html5-backend';
 import { useDispatch } from 'react-redux';
 
-const ActionContainer = ({ actionList }) => {
+const ActionContainer = ({ actionList, action = null }) => {
     const dispatch = useDispatch();
     const byId = useContext(byIdContext);
     const [isOver, setIsOver] = useState(false);
+    console.log('IN action container', action);
 
     actionList = actionList.map(action => byId[action.id]);
     const [, drop] = useDrop({
-        accept: ItemTypes.ACTION,
+        accept: [ItemTypes.ACTION, NativeTypes.FILE],
         collect(monitor) {
             setIsOver(monitor.isOver());
             return {
                 handlerId: monitor.getHandlerId(),
             };
         },
         drop(item) {
-            dispatch(
-                actionListActions.pushActionToValue({
-                    actionId: null,
-                    actionToAddId: item.id,
-                    type: item.type,
-                    value: item.value,
-                })
-            );
+            if (item.files) {
+                const file = item.files[0];
+                const reader = new FileReader();
+                reader.onload = event => {
+                    const actionToAdd = JSON.parse(event.target.result);
+                    console.log('action container drop', action);
+                    dispatch(
+                        actionListActions.addFromJson({
+                            actionId: action ? action.id : null,
+                            actionToAdd: actionToAdd,
+                        })
+                    );
+                };
+
+                reader.readAsText(file);
+            } else {
+                dispatch(
+                    actionListActions.pushActionToValue({
+                        actionId: action ? action.id : null,
+                        actionToAddId: item.id,
+                        type: item.type,
+                        value: item.value,
+                    })
+                );
+            }
         },
     });
 
     const dropAreaStyles = isOver ? 'bg-blue-300 ' : '';
 
-    if (actionList.length > 0) {
-        return (
-            <div className="flex h-full w-full flex-col gap-y-4 p-4">
-                {actionList && actionList.map(action => renderAction(action))}
-            </div>
-        );
-    } else {
-        return (
-            <div
-                className={`flex h-24 w-full items-center justify-center rounded-md ${dropAreaStyles}`}
-                ref={drop}
-            >
-                <AddIcon className="scale-[2.0] transform text-gray-500"></AddIcon>
-            </div>
-        );
-    }
+    return (
+        <div className="flex h-full w-full flex-col gap-y-4 p-4">
+            {actionList && actionList.map(action => renderAction(action))}
+            {((action && action.value.length === 0) || action == null) && (
+                <div
+                    className={`flex h-24 w-full cursor-cell flex-col items-center justify-center rounded-md hover:bg-slate-200 ${dropAreaStyles}`}
+                    ref={drop}
+                >
+                    <AddIcon className="scale-[2.0] transform text-gray-500"></AddIcon>
+                    <p className="select-none p-3 italic text-gray-700">
+                        Drag Actions or Action File here!
+                    </p>
+                </div>
+            )}
+        </div>
+    );
 };
 
 ActionContainer.propTypes = {
     actionList: PropTypes.arrayOf(PropTypes.object).isRequired,
+    action: PropTypes.shape({
+        id: PropTypes.number,
+        parentId: PropTypes.number,
+        running: PropTypes.bool,
+        valid: PropTypes.bool,
+        type: PropTypes.string,
+        value: PropTypes.any,
+    }),
 };
 
 export default ActionContainer;