React -> add all styles && upgrade

src/components/forms/abstractWebsocket.js

@@ -15,21 +15,31 @@ const ProgressBar = () => {
     } = useSelector( renderWebsocketSelector )
 
     return (
-        <div style={ { width: '300px', height: '20px' } }>
+        <div className="progress_bar_form">
-            <div style={ { width: '100%', height: '100%', marginBottom: '-20px', textAlign: 'center' } }>
+            <div>
                 {
                     typeof percents === 'number'
                     ? 'Progress: ' + percents + '%'
-                    : percents
+                    : percents === 'render_success' || percents === 'Ready to work. Get params'
+                        ? percents
+                        : ''
                 }
             </div>
-            <div style={ { width: '100%', height: '100%', backgroundColor: 'white' } }>
+            <div>
                 {
                     typeof percents === 'number'
-                    ? <div style={ { width: percents + '%', height: '100%', backgroundColor: 'green' } }>
+                    ? <div 
-                      </div>
+                          className='progerss_bar_progress' 
-                    : <div style={ { width: '100%', height: '100%', backgroundColor: 'green' } }>
+                          style={ { width: percents + '%', height: '100%' } }
+                      >
                       </div>
+                    : percents === 'render success'
+                        ? <div 
+                              className='progerss_bar_progress'
+                              style={ { width: '100%', height: '100%' } }
+                          >
+                          </div>
+                        : <></>
                 }
             </div>
         </div>
@@ -160,70 +170,94 @@ const AbstractWebsocket = ({ addressWS, inputList, refList, bodyComparer }) => {
 
     return (
         <>
-            <FormGenerator 
+            <div 
-                inputList={ inputList }
+                className="float_form_render_async"
-                refList={ refList }
+                style={ 
-                action={ handleSendMessage }
+                    connected 
-            />
+                    ? addressWS === '/vector/single/set/' || addressWS === '/vector/single/image/'
-            <ProgressBar />
+                        ? { marginTop: '10%', overflowY: 'scroll' }
-            {
+                        : { marginTop: '10%' } 
-                connected
+                    : { marginTop: '100%' } 
-                ? 
+                }
+            >
+                <FormGenerator 
+                    inputList={ inputList }
+                    refList={ refList }
+                    action={ handleSendMessage }
+                />
+            </div>
+            <div className="float_form_connect">
+                <p>
+                    { addressWS }
+                </p>
+                <ProgressBar />
+                {
+                    connected
+                    ? 
                     <button onClick={ (event) => handleDisconnect(event) }>
-                        Disconnect
+                            Disconnect
-                    </button>
+                        </button>
-                :
+                    :
                     <button onClick={ (event) => handleConnect(event) }>
-                        Connect
+                            Connect
-                    </button>
+                        </button>
-            }
+                }
-            <div>
+            </div>
-            {
+            <div 
-                messages.map( (item) => {
+                className="float_form_console"
-                        return (
+                style={ connected ? { marginTop: '25%', height: '200px' } : { marginTop: '15%', height: '10px' } }
-                            <div>
+            >
-                                <>
+                <p>
-                                    {
+                    console:
-                                        Object.keys(item).map( (key) => {
+                </p>
+                <div className="console_data">
+                    {
+                        messages.slice(0).reverse().map( (item) => {
+                                return (
+                                    <div>
+                                        <>
+                                            {
+                                                Object.keys(item).map( (key) => {
 
-                                                if ( key == 'details' ) {
+                                                        if ( key == 'details' ) {
-                                                    return (
+                                                            return (
-                                                        <>
+                                                                <>
-                                                            {
+                                                                    {
-                                                                Object.keys(item[key]).map( (keyTwo) => {
+                                                                        Object.keys(item[key]).map( (keyTwo) => {
-                                                                        return (
+                                                                                return (
-                                                                            <div>
+                                                                                    <div>
-                                                                                { '    ' + keyTwo + ': ' + item[key][keyTwo] + ' ' }
+                                                                                        { '    ' + keyTwo + ': ' + item[key][keyTwo] + ' ' }
-                                                                            </div>
+                                                                                    </div>
+                                                                                )
+                                                                            }
                                                                         )
                                                                     }
-                                                                )
+                                                                </>
-                                                            }
+                                                            )
-                                                        </>
+                                                        } else if ( key === 'image' ) {
-                                                    )
+                                                            return (
-                                                } else if ( key === 'image' ) {
+                                                                <img 
-                                                    return (
+                                                                    src={ 'data:image/png;base64, ' + item[key] }
-                                                        <img 
+                                                                    style={ { width: '300px', height: '200px' } }
-                                                            src={ 'data:image/png;base64, ' + item[key] }
+                                                                />
-                                                            style={ { width: '300px', height: '200px' } }
+                                                            )
-                                                        />
+                                                        } else {
-                                                    )
+                                                            return (
-                                                } else {
+                                                                <>
-                                                    return (
+                                                                { key + ': ' + item[key] + ' ' }
-                                                        <>
+                                                                </>
-                                                        { key + ': ' + item[key] + ' ' }
+                                                            )
-                                                        </>
+                                                        }
-                                                    )
+                                                    } 
-                                                }
+                                                )
                                             }
-                                        )
+                                        </>
-                                    }
+                                    </div>
-                                </>
+                                )
-                            </div>
+                            }
                         )
                     }
-                )
+                </div>
-            }
             </div>
         </>
     )

src/components/forms/formGenerator.js

@@ -39,7 +39,7 @@ export const FormGenerator = ({
     let info
 
     return (
-        <form onSubmit={event => handler(event)}>
+        <form onSubmit={event => handler(event)} className="form">
             {
                 inputList.map((input, key) => {
 
@@ -137,8 +137,10 @@ const TextInputGenerator = ({
     input, info
 }) => {
     return (
-        <div>
+        <div className="input_generate">
-            {input.name + ':'}
+            <div className="input_labels">
+                {input.name + ':'}
+            </div>
             <input
                 id={input.name + info.action + info.endpoint + 'Input'}
                 autoComplete='off'
@@ -167,8 +169,10 @@ const PasswordInputGenerator = ({
     input, info
 }) => {
     return (
-        <div>
+        <div className="input_generate">
-            {input.name + ':'}
+            <div className="input_labels">
+                {input.name + ':'}
+            </div>
             <input
                 id={input.name + info.action + info.endpoint + 'Input'}
                 autoComplete='off'
@@ -325,13 +329,13 @@ const UploadInputGenerator = ({
 
     return (
         <div onDrop={event => onLoadFileDrop(event)} >
-            <pre style={{ marginTop: '25px', marginLeft: '40px' }}>
+            <pre style={{ marginLeft: '40px' }}>
                 {input.dropInfo}
             </pre>
             <input
                 style={{ marginTop: '-55px' }}
                 id={input.name + info.action + info.endpoint + 'Input'}
-                className='uploadInput'
+                className='upload_input'
                 type='file'
                 accept={input.fileType + '/*'}
                 autoComplete='off'
@@ -374,7 +378,7 @@ const RangeInputGenerator = ({
                 {input.name + ': ' + value + ' ' + input.unit }
             </div>
             <input
-                style={ { width: '300px' } }
+                style={ { width: '380px' } }
                 id={name}
                 name={name}
                 min={input.min}
@@ -407,7 +411,7 @@ const RangeGenerator = ({
     const [value, setValue] = useState(0)
 
     return (
-        <>
+        <div style={ { display: 'flex' } }>
             <div style={ labelStyle }>
                 { label + ': ' }
             </div>
@@ -427,7 +431,7 @@ const RangeGenerator = ({
             <div style={ valueStyle }>
                 { value + ' ' + unit }
             </div>
-        </>
+        </div>
     )
 
 }
@@ -456,38 +460,38 @@ const VectorInputGenerator = ({
     input, info
 }) => {
 
-    const [value, setValue] = useState(0)
-
     return (
-        <div style={ { display: 'flex', width: '' } }>
+        <div style={ { width: '' } }>
-            <div style={ { width: '300px' } }>
+            <div style={ { width: '100%' } }>
                 { input.name }
             </div>
-            {
+            <div style={ { display: 'flex' } }>
-                Object.keys(input.refDict).map( (key) => {
+                {
+                    Object.keys(input.refDict).map( (key) => {
 
-                        let name = input.name + key + info.action + info.endpoint + 'Input'
+                            let name = input.name + key + info.action + info.endpoint + 'Input'
-                        return (
+                            return (
-                            <div style={ { display: 'flex', width: '150px' } }>
+                                <div style={ { display: 'flex', width: '140px' } }>
-                                <RangeGenerator 
+                                    <RangeGenerator 
-                                    key={key}
+                                        key={key}
-                                    label={key}
+                                        label={key}
-                                    labelStyle={ { width: '40px' } }
+                                        labelStyle={ { width: '5px', marginTop: '15px' } }
-                                    valueStyle={ { width: '100px' } }
+                                        valueStyle={ { width: '5px', marginTop: '15px', marginLeft: '5px' } }
-                                    style={ { width: '80px' } }
+                                        style={ { width: '80px' } }
-                                    name={name}
+                                        name={name}
-                                    unit={ '' }
+                                        unit={ '' }
-                                    min={input.min[key]}
+                                        min={input.min[key]}
-                                    max={input.max[key]}
+                                        max={input.max[key]}
-                                    defaultValue={input.min[key]}
+                                        defaultValue={input.min[key]}
-                                    step={0.1}
+                                        step={0.1}
-                                    reference={input.refDict[key]}
+                                        reference={input.refDict[key]}
-                                />
+                                    />
-                            </div>
+                                </div>
-                        )
+                            )
-                    }
+                        }
-                )
+                    )
-            }
+                }
+            </div>
         </div>
     )
 }

src/components/forms/model_crud/modelShowModelsAndDownload.js

@@ -51,13 +51,16 @@ const ModelShowAndDownloadForm = () => {
     }
 
     return (
-        <>
+        <div 
+            className="float_form_model"
+            style={ { marginTop: '10%' } }
+        >
             <FormGenerator 
                 inputList={ inputList }
                 refList={ [] }
                 action={ handleRefresh }
             />
-        </>
+        </div>
     )
 
 }

src/components/forms/model_crud/modelUpload.js

@@ -47,13 +47,16 @@ const ModelUploadForm = () => {
     }
 
     return (
-        <>
+        <div 
+            className="float_form_model"
+            style={ { marginTop: '17%' } }
+        >
             <FormGenerator 
                 inputList={ inputList }
                 refList={ [] }
                 action={ handleModelUpload }
             />
-        </>
+        </div>
     )
 }
 

src/components/forms/render_crud/renderShowReadyRendersAndDownload.js

@@ -51,13 +51,13 @@ const RenderShowAndDownloadForm = () => {
     }
 
     return (
-        <>
+        <div className='float_form_render_sync'>
             <FormGenerator 
                 inputList={ inputList }
                 refList={ [] }
                 action={ handleRefresh }
             />
-        </>
+        </div>
     )
 
 }

src/components/forms/render_websocket/renderVectorImage.js

@@ -317,8 +317,8 @@ const RenderVectorSingleImageForm = () => {
         },
         {
             type: 'vector',
-            name: 'Middle Finger 3',
+            name: 'Middle Finger 2',
-            native: 'Środkowy 3',
+            native: 'Środkowy 2',
             min: validate_fingers.others.min.part_2,
             max: validate_fingers.others.max.part_2,
             refDict: IK_srodkowy_2_R,

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 (
+        <>
+            <AbstractWebsocket 
+                addressWS={ '/vector/single/set/' }
+                inputList={ inputList }
+                refList={ refList }
+                bodyComparer={ bodyComparer }
+            />
+        </>
+    )
+}
+
+export default RenderVectorSingleSetForm

src/components/forms/user_auth/userLogin.js

@@ -59,7 +59,9 @@ const UserLoginForm = () => {
                 refList={ refList }
                 action={ login }
             />
-            { info }
+            <div className='form_info'>
+                { info }
+            </div>
         </>
     )
 

src/components/forms/user_auth/userRegister.js

@@ -67,7 +67,9 @@ const UserRegisterForm = () => {
                 refList={ refList }
                 action={ register }
             />
-            { info }
+            <div className='form_info'>
+                { info }
+            </div>
         </>
     )
 

src/pages/func_group/model_crud/modelCrudIndex.js

@@ -27,15 +27,16 @@ const __handleSwap = (name, movement) => {
 
 const ModelCrudIndex = ( movement ) => {
 
+
     return (
-        <>
+        <div>
             <div style={ __handleSwap( 'show_models_and_download', movement ) }>
                 <ModelShowAndDownloadForm />
             </div>
             <div style={ __handleSwap( 'upload_model', movement ) }>
                 <ModelUpload />
             </div>
-        </>
+        </div>
     )
 }
 

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( 
@@ -116,6 +116,8 @@ const NavigationBar = ({ movements }) => {
     const [showRender, setShowRender] = useState(false)
     const [showRenderFunc, setShowRenderFunc] = useState(false)
 
+    const [clickHide, setClickHide] = useState(true)
+    
     const logout = async () => {
         dispatch(
             userAuthAsyncThunk.fetchLogout(
@@ -125,83 +127,135 @@ const NavigationBar = ({ movements }) => {
     }
 
     return(
-        <>
+        <div 
-            <div>
+            className="navigation_bar"
+            style={ clickHide ? { marginRight: '-350px' } : { marginRight: '0px' } }
+        >
+            <div 
+                onClick={ () => setClickHide( !clickHide ) }
+                className="nav_bar_clickable"
+            >
+            </div> 
+            <div className="nav_bar_general">
                 Menu
                 <div>
-                    <div onClick={ () => setShowAccount( !showAccount ) }>
+                    <div 
-                    ├── Account Settings
+                        onClick={ () => setShowAccount( !showAccount ) }
+                        className='nav_bar_header'
+                    >
+                        <pre>  ├── </pre> <p> Account Settings </p>
                     </div>
                     <div style={ __styleChanger( showAccount) }>
                         <div>
-                            │   ├── User info
+                            <div className='nav_bar_option'>
+                                <pre>  │   ├── </pre> <p> User info </p>
+                            </div>
                             <div>
-                                <div>
+                                <div className='nav_bar_option'>
-                                    │   │   ├── Username: { user_get.username } 
+                                    <pre>  │   │   ├── </pre> <p>Username: { user_get.username } </p>
                                 </div>
-                                <div>
+                                <div className='nav_bar_option'>
-                                    │   │   └── E-mail: { user_get.email }
+                                    <pre>  │   │   └── </pre> <p> E-mail: { user_get.email } </p>
                                 </div>
                             </div>
                         </div>
-                        <div onClick={ () => __setShowGeneral( 'user_view', 'update_user', movements ) }>
+                        <div 
-                            │   ├── Update User
+                            onClick={ () => __setShowGeneral( 'user_view', 'update_user', movements ) } 
+                            className='nav_bar_option'
+                        >
+                            <pre>  │   ├── </pre> <p> Update User </p>
                         </div>
-                        <div onClick={ () => __setShowGeneral( 'user_view', 'delete_user', movements ) }>
+                        <div 
-                            │   └── Delete User
+                            onClick={ () => __setShowGeneral( 'user_view', 'delete_user', movements ) } 
+                            className='nav_bar_option'
+                        >
+                            <pre>  │   └── </pre> <p> Delete User </p>
                         </div>
                     </div>
                 </div>
                 <div>
-                    <div onClick={ () => setShowModels( !showModels ) }>
+                    <div 
-                    ├── Models
+                        onClick={ () => setShowModels( !showModels ) }
+                        className='nav_bar_header'
+                    >
+                        <pre>  ├── </pre><p>Models</p>
                     </div>
-                    <div style={ __styleChanger( showModels ) }>
+                    <div style={ __styleChanger( showModels ) } className='nav_bar_option'>
-                        <div onClick={ () => __setShowGeneral( 'model_view', 'show_models_and_download', movements )}>
+                        <div 
-                            │   ├── Show Models & Download
+                            onClick={ () => __setShowGeneral( 'model_view', 'show_models_and_download', movements )}
+                            className='nav_bar_option'
+                        >
+                            <pre>  │   ├── </pre> <p> Show Models & Download</p>
                         </div>
-                        <div onClick={ () => __setShowGeneral( 'model_view', 'upload_model', movements ) }>
+                        <div 
-                            │   └── Upload Model
+                            onClick={ () => __setShowGeneral( 'model_view', 'upload_model', movements ) }
+                            className='nav_bar_option'
+                        >
+                            <pre>  │   └── </pre> <p> Upload Model</p>
                         </div>
                     </div>
                 </div>
                 <div>
-                    <div onClick={ () => setShowRender( !showRender ) }>
+                    <div 
-                    ├── Render
+                        onClick={ () => setShowRender( !showRender ) } 
+                        className='nav_bar_header'
+                    >
+                        <pre>  ├── </pre> <p> Render </p>
                     </div>
                     <div style={ __styleChanger( showRender ) }>
-                        <div onClick={ () => __setShowGeneral( 'render_view', 'show_ready_renders_and_download', movements ) }>
-                            │   ├── Show Ready Renders & Download
-                        </div>
                         <div>
-                            <div onClick={ () => setShowRenderFunc( !showRenderFunc ) }>
+                            <div 
-                            │   ├── Render Functionality
+                                onClick={ () => setShowRenderFunc( !showRenderFunc ) } 
+                                className='nav_bar_option'
+                            >
+                                <pre>  │   ├── </pre> <p> Render Functionality </p>
                             </div>
                             <div style={ __styleChanger( showRenderFunc ) }>
-                                <div onClick={ () => __setShowGeneral( 'render_view', 'render_single_image', movements ) }>
+                                <div 
-                                    │   │   ├── Render Single Image
+                                    onClick={ () => __setShowGeneral( 'render_view', 'render_single_image', movements ) } 
+                                    className='nav_bar_option'
+                                >
+                                    <pre>  │   │   ├── </pre> <p> Render Single Image </p>
                                 </div>
-                                <div onClick={ () => __setShowGeneral( 'render_view', 'render_single_set', movements ) }>
+                                <div 
-                                    │   │   ├── Render Single Set
+                                    onClick={ () => __setShowGeneral( 'render_view', 'render_single_set', movements ) } 
+                                    className='nav_bar_option'
+                                >
+                                    <pre>  │   │   ├── </pre> <p> Render Single Set</p>
                                 </div>
-                                <div onClick={ () => __setShowGeneral( 'render_view', 'render_all', movements ) }>
+                                <div 
-                                    │   │   ├── Render All Sets
+                                    onClick={ () => __setShowGeneral( 'render_view', 'render_all', movements ) } 
+                                    className='nav_bar_option'
+                                >
+                                    <pre>  │   │   ├── </pre> <p> Render All Sets</p>
                                 </div>
-                                <div onClick={ () => __setShowGeneral( 'render_view', 'render_image_by_vector', movements ) }>
+                                <div 
-                                    │   │   ├── Render Image By Vector
+                                    onClick={ () => __setShowGeneral( 'render_view', 'render_image_by_vector', movements ) } 
+                                    className='nav_bar_option'
+                                >
+                                    <pre>  │   │   ├── </pre> <p> Render Image By Vector</p>
                                 </div>
-                                <div onClick={ () => __setShowGeneral( 'render_view', 'render_set_by_vector', movements ) }>
+                                <div 
-                                    │   │   └── Render Set By Vector
+                                    onClick={ () => __setShowGeneral( 'render_view', 'render_set_by_vector', movements ) } 
+                                    className='nav_bar_option'
+                                >
+                                    <pre>  │   │   └── </pre> <p> Render Set By Vector</p>
                                 </div>
                             </div>
                         </div>
+                        <div 
+                            onClick={ () => __setShowGeneral( 'render_view', 'show_ready_renders_and_download', movements ) } 
+                            className='nav_bar_option'
+                        >
+                            <pre>  │   └── </pre> <p> Show Ready Renders & Download </p>
+                        </div>
                     </div>
                 </div>
-                <div onClick={ () => logout() }>
+                <div onClick={ () => logout() } className='nav_bar_header'>
-                    └── Sign Out
+                    <pre>  └── </pre><p> Sign Out</p>
                 </div>
             </div>
-        </>
+        </div>
     )
 }
 

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 ) => {
             <div style={ __handleSwap( 'render_image_by_vector', movement ) }>
                 <RenderVectorSingleImageForm />
             </div>
+            <div style={ __handleSwap( 'render_set_by_vector', movement ) }>
+                <RenderVectorSingleSetForm />
+            </div>
         </div>
     )
 }

src/pages/func_group/user_auth/userAuthIndex.js

@@ -16,7 +16,10 @@ const UserAuthIndex = () => {
     }
 
     return (
-        <div>
+        <div 
+            className="float_form_auth" 
+            style={ swapForm ? { height: '200px', marginTop: '15%' } : { height: '290px', marginTop: '13%' } } 
+        >
             {   swapForm
                 ? <UserLoginForm />
                 : <UserRegisterForm />

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';

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 = {
+                    state.user_register.id = action.payload.data.id
-                        id: action.payload.data.id,
+                    state.user_register.username = action.payload.data.username
-                        username: action.payload.data.username,
+                    state.user_register.email = action.payload.data.email
-                        email: action.payload.data.email
-                    }
                     state.info = 'register success'
                 } catch {
                     state.info = 'register failed'

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;
+    }
+}