From 28f755a0a237146ac92345db633976699965954b Mon Sep 17 00:00:00 2001 From: TBS093A Date: Sat, 20 Feb 2021 23:03:00 +0100 Subject: [PATCH] React -> add all styles && upgrade --- src/components/forms/abstractWebsocket.js | 162 ++++--- src/components/forms/formGenerator.js | 80 ++-- .../model_crud/modelShowModelsAndDownload.js | 7 +- .../forms/model_crud/modelUpload.js | 7 +- .../renderShowReadyRendersAndDownload.js | 4 +- .../render_websocket/renderVectorImage.js | 4 +- .../forms/render_websocket/renderVectorSet.js | 444 ++++++++++++++++++ src/components/forms/user_auth/userLogin.js | 4 +- .../forms/user_auth/userRegister.js | 4 +- .../func_group/model_crud/modelCrudIndex.js | 7 +- src/pages/func_group/navigationBar.js | 140 ++++-- src/pages/func_group/render/renderIndex.js | 4 + .../func_group/user_auth/userAuthIndex.js | 5 +- src/pages/index.js | 1 + src/redux/slices/userCrudSlice.js | 14 +- src/styles/form/form.scss | 0 src/styles/general.scss | 292 ++++++++++++ 17 files changed, 1014 insertions(+), 165 deletions(-) create mode 100644 src/styles/form/form.scss create mode 100644 src/styles/general.scss diff --git a/src/components/forms/abstractWebsocket.js b/src/components/forms/abstractWebsocket.js index f5f05d4..5bd449c 100644 --- a/src/components/forms/abstractWebsocket.js +++ b/src/components/forms/abstractWebsocket.js @@ -15,21 +15,31 @@ const ProgressBar = () => { } = useSelector( renderWebsocketSelector ) return ( -
-
+
+
{ typeof percents === 'number' ? 'Progress: ' + percents + '%' - : percents + : percents === 'render_success' || percents === 'Ready to work. Get params' + ? percents + : '' }
-
+
{ typeof percents === 'number' - ?
-
- :
+ ?
+ : percents === 'render success' + ?
+
+ : <> }
@@ -160,70 +170,94 @@ const AbstractWebsocket = ({ addressWS, inputList, refList, bodyComparer }) => { return ( <> - - - { - connected - ? +
+ +
+
+

+ { addressWS } +

+ + { + connected + ? - : + Disconnect + + : - } -
- { - messages.map( (item) => { - return ( -
- <> - { - Object.keys(item).map( (key) => { + Connect + + } +
+
+

+ console: +

+
+ { + messages.slice(0).reverse().map( (item) => { + return ( +
+ <> + { + Object.keys(item).map( (key) => { - if ( key == 'details' ) { - return ( - <> - { - Object.keys(item[key]).map( (keyTwo) => { - return ( -
- { ' ' + keyTwo + ': ' + item[key][keyTwo] + ' ' } -
+ if ( key == 'details' ) { + return ( + <> + { + Object.keys(item[key]).map( (keyTwo) => { + return ( +
+ { ' ' + keyTwo + ': ' + item[key][keyTwo] + ' ' } +
+ ) + } ) } - ) - } - - ) - } else if ( key === 'image' ) { - return ( - - ) - } else { - return ( - <> - { key + ': ' + item[key] + ' ' } - - ) - } - } - ) - } - -
+ + ) + } else if ( key === 'image' ) { + return ( + + ) + } else { + return ( + <> + { key + ': ' + item[key] + ' ' } + + ) + } + } + ) + } + +
+ ) + } ) } - ) - } +
) diff --git a/src/components/forms/formGenerator.js b/src/components/forms/formGenerator.js index cc1eefe..197a503 100644 --- a/src/components/forms/formGenerator.js +++ b/src/components/forms/formGenerator.js @@ -39,7 +39,7 @@ export const FormGenerator = ({ let info return ( -
handler(event)}> + handler(event)} className="form"> { inputList.map((input, key) => { @@ -137,8 +137,10 @@ const TextInputGenerator = ({ input, info }) => { return ( -
- {input.name + ':'} +
+
+ {input.name + ':'} +
{ return ( -
- {input.name + ':'} +
+
+ {input.name + ':'} +
onLoadFileDrop(event)} > - 
+            
                 {input.dropInfo}
             

             
             
+        

             

                 { label + ': ' }
             

@@ -427,7 +431,7 @@ const RangeGenerator = ({
             

                 { value + ' ' + unit }
             

-        
+        

     )
 
 }
@@ -456,38 +460,38 @@ const VectorInputGenerator = ({
     input, info
 }) => {
 
-    const [value, setValue] = useState(0)
-
     return (
-        

-            

+        

+            

                 { input.name }
             

-            {
-                Object.keys(input.refDict).map( (key) => {
+            

+                {
+                    Object.keys(input.refDict).map( (key) => {
 
-                        let name = input.name + key + info.action + info.endpoint + 'Input'
-                        return (
-                            

-                                
-                            

-                        )
-                    }
-                )
-            }
+                            let name = input.name + key + info.action + info.endpoint + 'Input'
+                            return (
+                                

+                                    
+                                

+                            )
+                        }
+                    )
+                }
+            

         

     )
 }
diff --git a/src/components/forms/model_crud/modelShowModelsAndDownload.js b/src/components/forms/model_crud/modelShowModelsAndDownload.js
index 7d84a01..df8e569 100644
--- a/src/components/forms/model_crud/modelShowModelsAndDownload.js
+++ b/src/components/forms/model_crud/modelShowModelsAndDownload.js
@@ -51,13 +51,16 @@ const ModelShowAndDownloadForm = () => {
     }
 
     return (
-        <>
+        

             
-        
+        

     )
 
 }
diff --git a/src/components/forms/model_crud/modelUpload.js b/src/components/forms/model_crud/modelUpload.js
index f36572a..95afef6 100644
--- a/src/components/forms/model_crud/modelUpload.js
+++ b/src/components/forms/model_crud/modelUpload.js
@@ -47,13 +47,16 @@ const ModelUploadForm = () => {
     }
 
     return (
-        <>
+        

             
-        
+        

     )
 }
 
diff --git a/src/components/forms/render_crud/renderShowReadyRendersAndDownload.js b/src/components/forms/render_crud/renderShowReadyRendersAndDownload.js
index 5122fcb..7f3657b 100644
--- a/src/components/forms/render_crud/renderShowReadyRendersAndDownload.js
+++ b/src/components/forms/render_crud/renderShowReadyRendersAndDownload.js
@@ -51,13 +51,13 @@ const RenderShowAndDownloadForm = () => {
     }
 
     return (
-        <>
+        

             
-        
+        

     )
 
 }
diff --git a/src/components/forms/render_websocket/renderVectorImage.js b/src/components/forms/render_websocket/renderVectorImage.js
index 8e3144e..21f7369 100644
--- a/src/components/forms/render_websocket/renderVectorImage.js
+++ b/src/components/forms/render_websocket/renderVectorImage.js
@@ -317,8 +317,8 @@ const RenderVectorSingleImageForm = () => {
         },
         {
             type: 'vector',
-            name: 'Middle Finger 3',
-            native: 'Środkowy 3',
+            name: 'Middle Finger 2',
+            native: 'Środkowy 2',
             min: validate_fingers.others.min.part_2,
             max: validate_fingers.others.max.part_2,
             refDict: IK_srodkowy_2_R,
diff --git a/src/components/forms/render_websocket/renderVectorSet.js b/src/components/forms/render_websocket/renderVectorSet.js
index e69de29..cb5c540 100644
--- a/src/components/forms/render_websocket/renderVectorSet.js
+++ b/src/components/forms/render_websocket/renderVectorSet.js
@@ -0,0 +1,444 @@
+import React, { useEffect } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+
+import { userAuthSelector } from '../../../redux/slices/userAuthSlice'
+import { modelCrudSelector } from '../../../redux/slices/modelCrudSlice'
+
+import modelCrudAsyncThunk from '../../../redux/asyncThunks/modelCrudAsyncThunk'
+
+import AbstractWebsocket from '../abstractWebsocket'
+
+
+const refVectorGenerator = () => {
+    return {
+        x: React.createRef(),
+        y: React.createRef(),
+        z: React.createRef(),
+    }
+}
+
+
+const RenderVectorSingleSetForm = () => {
+
+    const dispatch = useDispatch()
+
+    const choiceListing = React.createRef()
+    const rotateRange = React.createRef()
+    const cameraIdRange = React.createRef()
+    const resolutionXRange = React.createRef()
+    const resolutionYRange = React.createRef()
+
+    // const IK_nadgarstek = refVectorGenerator()
+    // const IK_joint3_R = refVectorGenerator()
+    // const IK_joint4_R = refVectorGenerator() 
+    // const IK_joint5_R = refVectorGenerator() 
+    // const IK_joint6_R = refVectorGenerator() 
+    const IK_maly_1_R = refVectorGenerator()
+    const IK_maly_2_R = refVectorGenerator()
+    const IK_maly_3_R = refVectorGenerator()
+    const IK_serdeczny_1_R = refVectorGenerator() 
+    const IK_serdeczny_2_R = refVectorGenerator() 
+    const IK_serdeczny_3_R = refVectorGenerator() 
+    const IK_srodkowy_1_R = refVectorGenerator() 
+    const IK_srodkowy_2_R = refVectorGenerator() 
+    const IK_srodkowy_3_R = refVectorGenerator() 
+    const IK_wskazujacy_1_R = refVectorGenerator() 
+    const IK_wskazujacy_2_R = refVectorGenerator() 
+    const IK_wskazujacy_3_R = refVectorGenerator() 
+    const IK_kciuk_0_R = refVectorGenerator()
+    const IK_kciuk_1_R = refVectorGenerator() 
+    const IK_kciuk_2_R = refVectorGenerator()
+
+
+    const { models_list } = useSelector( modelCrudSelector )
+    const { user, token } = useSelector( userAuthSelector )
+
+    let refList = [
+        choiceListing,
+        rotateRange,
+        cameraIdRange,
+        resolutionXRange,
+        resolutionYRange,
+        {
+            // IK_nadgarstek: IK_nadgarstek,
+            // IK_joint3_R: IK_joint3_R,
+            // IK_joint4_R: IK_joint4_R,
+            // IK_joint5_R: IK_joint5_R, 
+            // IK_joint6_R: IK_joint6_R, 
+            IK_maly_1_R: IK_maly_1_R,
+            IK_maly_2_R: IK_maly_2_R,
+            IK_maly_3_R: IK_maly_3_R,
+            IK_serdeczny_1_R: IK_serdeczny_1_R, 
+            IK_serdeczny_2_R: IK_serdeczny_2_R, 
+            IK_serdeczny_3_R: IK_serdeczny_3_R, 
+            IK_srodkowy_1_R: IK_srodkowy_1_R, 
+            IK_srodkowy_2_R: IK_srodkowy_2_R, 
+            IK_srodkowy_3_R: IK_srodkowy_3_R, 
+            IK_wskazujacy_1_R: IK_wskazujacy_1_R, 
+            IK_wskazujacy_2_R: IK_wskazujacy_2_R, 
+            IK_wskazujacy_3_R: IK_wskazujacy_3_R, 
+            IK_kciuk_0_R: IK_kciuk_0_R,
+            IK_kciuk_1_R: IK_kciuk_1_R, 
+            IK_kciuk_2_R: IK_kciuk_2_R,
+        }
+    ]
+
+    const fingers_max = {
+        x: 10,
+        y: 10,
+        z: 10
+    }
+    const fingers_min = {
+        x: -0.7,
+        y: -0.7,
+        z: -0.7
+    }
+
+    const validate_fingers = {
+        thumb: {
+            max:{ 
+                part_0: {
+                    y: 0.5,
+                    x: 0.5,
+                    z: 0.6
+                },
+                part_1: {
+                    y: 0,
+                    x: 0,
+                    z: 0.7,
+                },
+                part_2: {
+                    y: 0,
+                    x: 0,
+                    z: 0.7,
+                }
+            },
+            min: {
+                part_0: {
+                    y: -0.3,
+                    x: 0,
+                    z: -0.3,
+                },
+                part_1: {
+                    y: -0.1,
+                    x: 0,
+                    z: 0,
+                },
+                part_2: {
+                    y: 0,
+                    x: 0,
+                    z: -0.4,
+                }
+            }
+        },
+        others: {
+            max: {
+                part_1: {
+                    y: 0.2,
+                    x: 0,
+                    z: 0.7
+                },
+                part_2: {
+                    y: 0,
+                    x: 0,
+                    z: 1.6
+                },
+                part_3: {
+                    y: 0,
+                    x: 0,
+                    z: 0.7
+                }
+            },
+            min: {
+                part_1: {
+                    y: -0.3,
+                    x: 0,
+                    z: -0.3
+                },
+                part_2: {
+                    y: 0,
+                    x: 0,
+                    z: 0
+                },
+                part_3: {
+                    y: 0,
+                    x: 0,
+                    z: 0
+                }
+            }
+        }
+
+    }
+
+    let inputList = [
+        {
+            type: 'info',
+            action: 'Async',
+            endpint: 'render/async/single/set',
+            button_value: 'Render Single Set'
+        },
+        {
+            type: 'chice-listing',
+            name: 'Models',
+            values: models_list,
+            ref: choiceListing
+        },
+        {
+            type: 'range',
+            name: 'Rotate',
+            min: 1,
+            max: 360,
+            step: 1,
+            unit: 'deg',
+            ref: rotateRange
+        },
+        {
+            type: 'range',
+            name: 'Camera ID',
+            min: 0,
+            max: 1,
+            step: 1,
+            unit: 'camera index',
+            ref: cameraIdRange
+        },
+        {
+            type: 'range',
+            name: 'Resolution X',
+            min: 600,
+            max: 4096,
+            step: 10,
+            unit: 'px',
+            ref: resolutionXRange
+        },
+        {
+            type: 'range',
+            name: 'Resolution Y',
+            min: 300,
+            max: 3112,
+            step: 10,
+            unit: 'px',
+            ref: resolutionYRange
+        },
+        // {
+        //     type: 'vector',
+        //     name: 'Wirst (experimental)',
+        //     native: 'Nadgarstek',
+        //     min: fingers_min,
+        //     max: fingers_max,
+        //     refDict: IK_nadgarstek,
+        // },
+        // {
+        //     type: 'vector',
+        //     name: 'Litte Finger Joint 3 (experimental)',
+        //     native: 'Mały Palec Joint 3',
+        //     min: fingers_min,
+        //     max: fingers_max,
+        //     refDict: IK_joint3_R,
+        // },
+        // {
+        //     type: 'vector',
+        //     name: 'Ring Finger Joint 4 (experimental)',
+        //     native: 'Serdeczny Palec Joint 4',
+        //     min: fingers_min,
+        //     max: fingers_max,
+        //     refDict: IK_joint4_R,
+        // },
+        // {
+        //     type: 'vector',
+        //     name: 'Middle Finger Joint 5 (experimental)',
+        //     native: 'Środkowy Palec Joint 5',
+        //     min: fingers_min,
+        //     max: fingers_max,
+        //     refDict: IK_joint5_R,
+        // },
+        // {
+        //     type: 'vector',
+        //     name: 'Index Finger Joint 6 (experimental)',
+        //     native: 'Wskazujący Palec Joint 6',
+        //     min: fingers_min,
+        //     max: fingers_max,
+        //     refDict: IK_joint6_R,
+        // },
+        {
+            type: 'vector',
+            name: 'Litte Finger 1',
+            native: 'Mały 1',
+            min: validate_fingers.others.min.part_1,
+            max: validate_fingers.others.max.part_1,
+            refDict: IK_maly_1_R,
+        },
+        {
+            type: 'vector',
+            name: 'Litte Finger 2',
+            native: 'Mały 2',
+            min: validate_fingers.others.min.part_2,
+            max: validate_fingers.others.max.part_2,
+            refDict: IK_maly_2_R,
+        },
+        {
+            type: 'vector',
+            name: 'Litte Finger 3',
+            native: 'Mały 3',
+            min: validate_fingers.others.min.part_3,
+            max: validate_fingers.others.max.part_3,
+            refDict: IK_maly_3_R,
+        },
+        {
+            type: 'vector',
+            name: 'Ring Finger 1',
+            native: 'Serdeczny 1',
+            min: validate_fingers.others.min.part_1,
+            max: validate_fingers.others.max.part_1,
+            refDict: IK_serdeczny_1_R,
+        },
+        {
+            type: 'vector',
+            name: 'Ring Finger 2',
+            native: 'Serdeczny 2',
+            min: validate_fingers.others.min.part_2,
+            max: validate_fingers.others.max.part_2,
+            refDict: IK_serdeczny_2_R,
+        },
+        {
+            type: 'vector',
+            name: 'Ring Finger 3',
+            native: 'Serdeczny 3',
+            min: validate_fingers.others.min.part_3,
+            max: validate_fingers.others.max.part_3,
+            refDict: IK_serdeczny_3_R,
+        },
+        {
+            type: 'vector',
+            name: 'Middle Finger 1',
+            native: 'Środkowy 1',
+            min: validate_fingers.others.min.part_1,
+            max: validate_fingers.others.max.part_1,
+            refDict: IK_srodkowy_1_R,
+        },
+        {
+            type: 'vector',
+            name: 'Middle Finger 2',
+            native: 'Środkowy 2',
+            min: validate_fingers.others.min.part_2,
+            max: validate_fingers.others.max.part_2,
+            refDict: IK_srodkowy_2_R,
+        },
+        {
+            type: 'vector',
+            name: 'Middle Finger 3',
+            native: 'Środkowy 3',
+            min: validate_fingers.others.min.part_3,
+            max: validate_fingers.others.max.part_3,
+            refDict: IK_srodkowy_3_R,
+        },
+        {
+            type: 'vector',
+            name: 'Index Finger 1',
+            native: 'Wskazujący 1',
+            min: validate_fingers.others.min.part_1,
+            max: validate_fingers.others.max.part_1,
+            refDict: IK_wskazujacy_1_R,
+        },
+        {
+            type: 'vector',
+            name: 'Index Finger 2',
+            native: 'Wskazujący 2',
+            min: validate_fingers.others.min.part_2,
+            max: validate_fingers.others.max.part_2,
+            refDict: IK_wskazujacy_2_R,
+        },
+        {
+            type: 'vector',
+            name: 'Index Finger 3',
+            native: 'Wskazujący 3',
+            min: validate_fingers.others.min.part_3,
+            max: validate_fingers.others.max.part_3,
+            refDict: IK_wskazujacy_3_R,
+        },
+        {
+            type: 'vector',
+            name: 'Thumb 0',
+            native: 'Kciuk 0',
+            min: validate_fingers.thumb.min.part_0,
+            max: validate_fingers.thumb.max.part_0,
+            refDict: IK_kciuk_0_R,
+        },
+        {
+            type: 'vector',
+            name: 'Thumb 1',
+            native: 'Kciuk 1',
+            min: validate_fingers.thumb.min.part_1,
+            max: validate_fingers.thumb.max.part_1,
+            refDict: IK_kciuk_1_R,
+        },
+        {
+            type: 'vector',
+            name: 'Thumb 2',
+            native: 'Kciuk 2',
+            min: validate_fingers.thumb.min.part_2,
+            max: validate_fingers.thumb.max.part_2,
+            refDict: IK_kciuk_2_R,
+        },
+    ]
+
+    let blocker = false
+
+    useEffect( 
+        () => {
+            
+            if ( models_list.length === 0 && user.id > 0 && token !== '' && blocker === false ) {
+                dispatch( modelCrudAsyncThunk.fetchGetAllModels( token ) )
+                if ( models_list.length === 0 ) {
+                    blocker = true
+                }
+            }
+        
+        }
+    )
+
+    const bodyComparer = ( refs ) => {
+
+        let vectors = {}
+
+        console.log( refs )
+
+        Object.keys(refs[5]).map(
+            ( key ) => {
+                let singleFinger = {
+                    scale: 0,
+                    x: 0,
+                    y: 0,
+                    z: 0
+                }
+                singleFinger['scale'] = 0.9
+                singleFinger['x'] = parseFloat(refs[5][key]['x'].current.value)
+                singleFinger['y'] = parseFloat(refs[5][key]['y'].current.value)
+                singleFinger['z'] = parseFloat(refs[5][key]['z'].current.value)
+                vectors[key] = singleFinger
+            }
+        )
+
+        return {
+            // fileName: refs[0].current.value,
+            fileName: 'testHand',
+            angle: refs[1].current.value / 62, // on backend 0.1 - 6.2 value
+            cameraID: refs[2].current.value,
+            resolutionX: refs[3].current.value,
+            resolutionY: refs[4].current.value,
+            vectors: vectors
+        }
+    }
+
+    return (
+        <>
+            
+        
+    )
+}
+
+export default RenderVectorSingleSetForm
\ No newline at end of file
diff --git a/src/components/forms/user_auth/userLogin.js b/src/components/forms/user_auth/userLogin.js
index e53b006..d71b193 100644
--- a/src/components/forms/user_auth/userLogin.js
+++ b/src/components/forms/user_auth/userLogin.js
@@ -59,7 +59,9 @@ const UserLoginForm = () => {
                 refList={ refList }
                 action={ login }
             />
-            { info }
+            

+                { info }
+            

         
     )
 
diff --git a/src/components/forms/user_auth/userRegister.js b/src/components/forms/user_auth/userRegister.js
index 5b3599e..6848a60 100644
--- a/src/components/forms/user_auth/userRegister.js
+++ b/src/components/forms/user_auth/userRegister.js
@@ -67,7 +67,9 @@ const UserRegisterForm = () => {
                 refList={ refList }
                 action={ register }
             />
-            { info }
+            

+                { info }
+            

         
     )
 
diff --git a/src/pages/func_group/model_crud/modelCrudIndex.js b/src/pages/func_group/model_crud/modelCrudIndex.js
index 3161005..ef757dc 100644
--- a/src/pages/func_group/model_crud/modelCrudIndex.js
+++ b/src/pages/func_group/model_crud/modelCrudIndex.js
@@ -5,7 +5,7 @@ import ModelUpload from '../../../components/forms/model_crud/modelUpload'
 
 
 const __handleSwap = (name, movement) => {
-    
+
     let display = {
         display: 'block'
     }
@@ -27,15 +27,16 @@ const __handleSwap = (name, movement) => {
 
 const ModelCrudIndex = ( movement ) => {
 
+
     return (
-        <>
+        

             

                 
             

             

                 
             

-        
+        

     )
 }
 
diff --git a/src/pages/func_group/navigationBar.js b/src/pages/func_group/navigationBar.js
index 22da780..62c73c3 100644
--- a/src/pages/func_group/navigationBar.js
+++ b/src/pages/func_group/navigationBar.js
@@ -32,7 +32,7 @@ const __setShowGeneral = ( view, key, movements ) => {
     }
 
     if (view === 'user_view') {
-        let new_move = movements.user_view.userCrudView
+        let new_move = user_default
         new_move[key] = true
         movements.user_view.setUserCrudView( 
             new_move
@@ -45,7 +45,7 @@ const __setShowGeneral = ( view, key, movements ) => {
         )
     } else if (view === 'model_view') {
         
-        let new_move = movements.model_view.modelCrudView
+        let new_move = model_default
         new_move[key] = true
         movements.model_view.setModelCrudView( 
             new_move
@@ -57,7 +57,7 @@ const __setShowGeneral = ( view, key, movements ) => {
             render_default
         )
     } else if (view === 'render_view') {
-        let new_move = movements.render_view.renderView
+        let new_move = render_default
         if ( key in new_move ) {
             new_move[key] = true
             movements.render_view.setRenderView( 
@@ -115,6 +115,8 @@ const NavigationBar = ({ movements }) => {
     const [showModels, setShowModels] = useState(false)
     const [showRender, setShowRender] = useState(false)
     const [showRenderFunc, setShowRenderFunc] = useState(false)
+
+    const [clickHide, setClickHide] = useState(true)
     
     const logout = async () => {
         dispatch(
@@ -125,83 +127,135 @@ const NavigationBar = ({ movements }) => {
     }
 
     return(
-        <>
-            

+        

+            
 setClickHide( !clickHide ) }
+                className="nav_bar_clickable"
+            >
+            
 
+            

                 Menu
                 

-                    
 setShowAccount( !showAccount ) }>
-                    ├── Account Settings
+                    
 setShowAccount( !showAccount ) }
+                        className='nav_bar_header'
+                    >
+                        
  ├── 
 
 Account Settings 

                     

                     

                         

-                            │   ├── User info
+                            

+                                
  │   ├── 
 
 User info 

+                            

                             

-                                

-                                    │   │   ├── Username: { user_get.username } 
+                                

+                                    
  │   │   ├── 
 
Username: { user_get.username } 

                                 

-                                

-                                    │   │   └── E-mail: { user_get.email }
+                                

+                                    
  │   │   └── 
 
 E-mail: { user_get.email } 

                                 

                             

                         

-                        
 __setShowGeneral( 'user_view', 'update_user', movements ) }>
-                            │   ├── Update User
+                        
 __setShowGeneral( 'user_view', 'update_user', movements ) } 
+                            className='nav_bar_option'
+                        >
+                            
  │   ├── 
 
 Update User 

                         

-                        
 __setShowGeneral( 'user_view', 'delete_user', movements ) }>
-                            │   └── Delete User
+                        
 __setShowGeneral( 'user_view', 'delete_user', movements ) } 
+                            className='nav_bar_option'
+                        >
+                            
  │   └── 
 
 Delete User 

                         

                     

                 

                 

-                    
 setShowModels( !showModels ) }>
-                    ├── Models
+                    
 setShowModels( !showModels ) }
+                        className='nav_bar_header'
+                    >
+                        
  ├── 
Models

                     

-                    

-                        
 __setShowGeneral( 'model_view', 'show_models_and_download', movements )}>
-                            │   ├── Show Models & Download
+                    

+                        
 __setShowGeneral( 'model_view', 'show_models_and_download', movements )}
+                            className='nav_bar_option'
+                        >
+                            
  │   ├── 
 
 Show Models & Download

                         

-                        
 __setShowGeneral( 'model_view', 'upload_model', movements ) }>
-                            │   └── Upload Model
+                        
 __setShowGeneral( 'model_view', 'upload_model', movements ) }
+                            className='nav_bar_option'
+                        >
+                            
  │   └── 
 
 Upload Model

                         

                     

                 

                 

-                    
 setShowRender( !showRender ) }>
-                    ├── Render
+                    
 setShowRender( !showRender ) } 
+                        className='nav_bar_header'
+                    >
+                        
  ├── 
 
 Render 

                     

                     

-                        
 __setShowGeneral( 'render_view', 'show_ready_renders_and_download', movements ) }>
-                            │   ├── Show Ready Renders & Download
-                        

                         

-                            
 setShowRenderFunc( !showRenderFunc ) }>
-                            │   ├── Render Functionality
+                            
 setShowRenderFunc( !showRenderFunc ) } 
+                                className='nav_bar_option'
+                            >
+                                
  │   ├── 
 
 Render Functionality 

                             

                             

-                                
 __setShowGeneral( 'render_view', 'render_single_image', movements ) }>
-                                    │   │   ├── Render Single Image
+                                
 __setShowGeneral( 'render_view', 'render_single_image', movements ) } 
+                                    className='nav_bar_option'
+                                >
+                                    
  │   │   ├── 
 
 Render Single Image 

                                 

-                                
 __setShowGeneral( 'render_view', 'render_single_set', movements ) }>
-                                    │   │   ├── Render Single Set
+                                
 __setShowGeneral( 'render_view', 'render_single_set', movements ) } 
+                                    className='nav_bar_option'
+                                >
+                                    
  │   │   ├── 
 
 Render Single Set

                                 

-                                
 __setShowGeneral( 'render_view', 'render_all', movements ) }>
-                                    │   │   ├── Render All Sets
+                                
 __setShowGeneral( 'render_view', 'render_all', movements ) } 
+                                    className='nav_bar_option'
+                                >
+                                    
  │   │   ├── 
 
 Render All Sets

                                 

-                                
 __setShowGeneral( 'render_view', 'render_image_by_vector', movements ) }>
-                                    │   │   ├── Render Image By Vector
+                                
 __setShowGeneral( 'render_view', 'render_image_by_vector', movements ) } 
+                                    className='nav_bar_option'
+                                >
+                                    
  │   │   ├── 
 
 Render Image By Vector

                                 

-                                
 __setShowGeneral( 'render_view', 'render_set_by_vector', movements ) }>
-                                    │   │   └── Render Set By Vector
+                                
 __setShowGeneral( 'render_view', 'render_set_by_vector', movements ) } 
+                                    className='nav_bar_option'
+                                >
+                                    
  │   │   └── 
 
 Render Set By Vector

                                 

                             

                         

+                        
 __setShowGeneral( 'render_view', 'show_ready_renders_and_download', movements ) } 
+                            className='nav_bar_option'
+                        >
+                            
  │   └── 
 
 Show Ready Renders & Download 

+                        

                     

                 

-                
 logout() }>
-                    └── Sign Out
+                
 logout() } className='nav_bar_header'>
+                    
  └── 
 Sign Out

                 

             

-        
+        

     )
 }
 
diff --git a/src/pages/func_group/render/renderIndex.js b/src/pages/func_group/render/renderIndex.js
index 11d7786..28fcded 100644
--- a/src/pages/func_group/render/renderIndex.js
+++ b/src/pages/func_group/render/renderIndex.js
@@ -7,6 +7,7 @@ import RenderSingleSetForm from '../../../components/forms/render_websocket/rend
 import RenderAllForm from '../../../components/forms/render_websocket/renderAll'
 
 import RenderVectorSingleImageForm from '../../../components/forms/render_websocket/renderVectorImage'
+import RenderVectorSingleSetForm from '../../../components/forms/render_websocket/renderVectorSet'
 
 
 const __handleSwap = (name, movement) => {
@@ -56,6 +57,9 @@ const RenderIndex = ( movement ) => {
             

                 
             

+            

+                
+            

         

     )
 }
diff --git a/src/pages/func_group/user_auth/userAuthIndex.js b/src/pages/func_group/user_auth/userAuthIndex.js
index e88b9dc..ff2af04 100644
--- a/src/pages/func_group/user_auth/userAuthIndex.js
+++ b/src/pages/func_group/user_auth/userAuthIndex.js
@@ -16,7 +16,10 @@ const UserAuthIndex = () => {
     }
 
     return (
-        

+        

             {   swapForm
                 ? 
                 : 
diff --git a/src/pages/index.js b/src/pages/index.js
index e020124..c210635 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 // import ReactDOM from 'react-dom';
+import '../styles/general.scss'
 
 import { Provider } from 'react-redux';
 import { store } from '../redux/store';
diff --git a/src/redux/slices/userCrudSlice.js b/src/redux/slices/userCrudSlice.js
index fd33281..6c2541e 100644
--- a/src/redux/slices/userCrudSlice.js
+++ b/src/redux/slices/userCrudSlice.js
@@ -7,7 +7,11 @@ const userCrudSlice = createSlice(
         initialState: {
             users_list: [],
             user_get: {},
-            user_register: {},
+            user_register: {
+                id: -1,
+                username: '',
+                email: ''
+            },
             user_update: {},
             user_delete: '',
             info: ''
@@ -22,11 +26,9 @@ const userCrudSlice = createSlice(
             },
             [userCrudAsyncThunk.fetchRegister.fulfilled.type]: (state, action) => {
                 try {
-                    state.user_register = {
-                        id: action.payload.data.id,
-                        username: action.payload.data.username,
-                        email: action.payload.data.email
-                    }
+                    state.user_register.id = action.payload.data.id
+                    state.user_register.username = action.payload.data.username
+                    state.user_register.email = action.payload.data.email
                     state.info = 'register success'
                 } catch {
                     state.info = 'register failed'
diff --git a/src/styles/form/form.scss b/src/styles/form/form.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/styles/general.scss b/src/styles/general.scss
new file mode 100644
index 0000000..be688b4
--- /dev/null
+++ b/src/styles/general.scss
@@ -0,0 +1,292 @@
+
+body {
+    margin: 0 auto;
+    overflow: hidden;
+
+    input {
+        width: 200px;
+        height: 30px;
+        margin-left: 20px;
+        margin-top:10px;
+        margin-bottom: 5px;
+        // border: 0px;
+        // border-radius: 10px;
+        font-size: 12pt;
+        text-align: center;
+        color: rgba(111,108,106,1);
+        background-color: rgba(0,0,0,0);
+        border-bottom: 2px solid;
+        border-right: 0px;
+        border-top: 0px;
+        border-left: 0px;
+        border-color: green;
+
+        transition-duration: 0.5s;
+    }
+
+    input:hover {
+        border-color: rgba(111,108,106,1);
+    }
+
+    input:active {
+        background-color: rgba(0,128,0,1);
+    }
+
+    .input_generate {
+
+    }
+
+    button {
+        height: 30px;
+        margin-left: 20px;
+        margin-top:10px;
+        margin-bottom: 5px;
+        // border: 0px;
+        border-radius: 10px;
+        font-size: 12pt;
+        text-align: center;
+        color: green;
+        background-color: rgba(0,0,0,0);
+        border: 2px solid;
+        border-color: green;
+
+        padding-left: 20px;
+        padding-right: 20px;
+        padding-bottom: 30px;
+        padding-top: 12px;
+        transition-duration: 0.1s;
+    }
+
+    button:hover {
+        background-color: green;
+        color: black
+    }
+}
+
+.navigation_bar {
+    padding-top: 2%;
+    padding-bottom: 2%;
+    height: 96%;
+    width: 350px;
+    position: fixed;
+    right: 0;
+    color: green;
+    background-color: rgba(22,28,29,1);
+    display: flex;
+    transition-duration: 0.2s;
+
+    .nav_bar_clickable {
+        height: 110%;
+        width: 50px;
+        margin-top: -40px;
+        margin-left: -50px;
+        background-color: rgba(22,28,29,1);
+        transition-duration: 0.2s;
+    }
+
+    .nav_bar_clickable:hover {
+        background-color: rgba(0,128,0,1);
+    }
+
+    .nav_bar_general {
+        padding-left: 10px;
+
+        p {
+            margin-bottom: 0px;
+            margin-top: 10px;
+        }
+
+        pre {
+            margin-top: 10px;
+            margin-bottom: 0px;
+        }
+
+        .nav_bar_header {
+            width: 100%;
+            display: flex;
+            font-weight: bold;
+        }
+
+        .nav_bar_option {
+            width: 100%;
+            display: flex;
+        }
+}
+}
+
+.float_form_auth {
+    width: 400px;
+    padding: 50px;
+    border-radius: 10px;
+    color: green;
+    background-color: rgba(22,28,29,1);
+    margin-left: 50%;
+
+    input {
+        width: 75%;
+        float: right;
+    }
+
+    .input_generate {
+        width: 100%;
+        margin-top: 20px;
+        display: flex;
+
+        .input_labels {
+            width: 20%;
+            font-size: 20px;
+            padding-top: 25px;
+        }
+    }
+
+    button {
+        float: right;
+        position: relative;
+        margin-top: 30px;
+    }
+
+    .form_info {
+        float: float;
+        margin-top: -150px;
+    }
+
+}
+
+.float_form_render_sync {
+    position: fixed;
+    width: 600px;
+    height: 500px;
+    padding: 50px;
+    border-radius: 10px;
+    color: green;
+    background-color: rgba(22,28,29,1);
+    margin-top: 10%;
+    margin-left: 40%;
+    display: flex;
+    transition-duration: 0.2s;
+
+    overflow-y: scroll;
+
+    button {
+        float: left;
+    }
+}
+
+.float_form_render_async {
+    position: fixed;
+    width: 400px;
+    height: 500px;
+    padding: 50px;
+    border-radius: 10px;
+    color: green;
+    background-color: rgba(22,28,29,1);
+    margin-top: 10%;
+    margin-left: 50%;
+    display: flex;
+    transition-duration: 0.2s;
+
+    overflow: hidden;
+
+    button {
+        float: left;
+    }
+}
+
+.float_form_connect {
+    position: fixed;
+    width: 400px;
+    padding: 50px;
+    border-radius: 10px;
+    color: green;
+    background-color: rgba(22,28,29,1);
+    margin-top: 10%;
+    margin-left: 15%;
+
+    z-index: 1;
+
+    .progress_bar_form {
+        width: 400px - 4px;
+        height: 25px;
+        padding-top: 6px;
+        border: 2px solid;
+        border-radius: 10px;
+        text-align: center;
+
+
+        .progress_bar_progress {
+            background-color: green;
+        }
+
+    }
+
+    p {
+        position: absolute;
+        left: 30px;
+        top: -60px;
+        font-size: 20px;
+        font-weight: bold;
+    }
+
+    button {
+        width: 100%; 
+        margin-top: 25px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+}
+
+.float_form_console {
+    position: fixed;
+    width: 400px;
+    height: 100px;
+    padding: 50px;
+    border-radius: 10px;
+    color: green;
+    background-color: rgba(22,28,29,1);
+    margin-top: 25%;
+    margin-left: 15%;
+    transition-duration: 0.2s;
+
+    z-index: 0;
+
+    p {
+        position: absolute;
+        left: 30px;
+        top: -60px;
+        font-size: 20px;
+        font-weight: bold;
+    }
+
+    .console_data {
+        width: 100%;
+        height: 100%;
+        overflow-y: scroll;
+    }
+}
+
+.float_form_model {
+    position: fixed;
+    width: 400px;
+    padding: 50px;
+    border-radius: 10px;
+    color: green;
+    background-color: rgba(22,28,29,1);
+    margin-left: 50%;
+
+    .upload_input {
+        width: 0px !important;
+        height: 0px !important;
+        padding-top: 70px;
+        padding-left: 400px;
+        margin-left: 0px;
+        color: rgba(0,128,0,1);
+        font-family: Ubuntu;
+        border: dashed 2px rgba(0,128,0,1);
+        overflow: hidden;
+    }
+
+    button {
+        margin-left: 0px;
+    }
+}
\ No newline at end of file