All -> huge changes

.dockerignore

@@ -0,0 +1,3 @@
+node_modules/
+.cache/
+public/

.gitignore

@@ -1,3 +1,3 @@
 node_modules/
 .cache/
-public
+public/

Dockerfile

@@ -0,0 +1,18 @@
+# pull official base image
+FROM node:13.12.0-alpine
+
+# set working directory
+WORKDIR /app
+
+# install app dependencies
+
+COPY package.json ./
+COPY package-lock.json ./
+
+RUN npm install --silent
+RUN npm install gatsby-cli@3.10.0 --silent
+
+ENV GATSBY_TELEMETRY_DISABLED=1
+
+# add app
+COPY . ./

default.conf

@@ -0,0 +1,13 @@
+server {
+        listen 80;
+        listen [::]:80;
+
+        root /var/www/work_front/html;
+        index index.html index.htm index.nginx-debian.html;
+
+        server_name work_front www.work_front;
+
+        location / {
+                try_files $uri $uri/ =404;
+        }
+}

package-lock.json

@@ -1664,6 +1664,17 @@
         "react-lifecycles-compat": "^3.0.4"
       }
     },
+    "@reduxjs/toolkit": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.5.0.tgz",
+      "integrity": "sha512-E/FUraRx+8guw9Hlg/Ja8jI/hwCrmIKed8Annt9YsZw3BQp+F24t5I5b2OWR6pkEHY4hn1BgP08FrTZFRKsdaQ==",
+      "requires": {
+        "immer": "^8.0.0",
+        "redux": "^4.0.0",
+        "redux-thunk": "^2.3.0",
+        "reselect": "^4.0.0"
+      }
+    },
     "@sideway/address": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.1.tgz",
@@ -8111,6 +8122,11 @@
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
       "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw=="
     },
+    "immer": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-8.0.1.tgz",
+      "integrity": "sha512-aqXhGP7//Gui2+UrEtvxZxSquQVXTpZ7KDxfCcKAF3Vysvw0CViVaW9RZ1j1xlIYqaaaipBoqdqeibkc18PNvA=="
+    },
     "import-cwd": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
@@ -9144,6 +9160,11 @@
         }
       }
     },
+    "loadash": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/loadash/-/loadash-1.0.0.tgz",
+      "integrity": "sha512-xlX5HBsXB3KG0FJbJJG/3kYWCfsCyCSus3T+uHVu6QL6YxAdggmm3QeyLgn54N2yi5/UE6xxL5ZWJAAiHzHYEg=="
+    },
     "loader-fs-cache": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/loader-fs-cache/-/loader-fs-cache-1.0.3.tgz",
@@ -10669,6 +10690,12 @@
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
     },
+    "pathseg": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/pathseg/-/pathseg-1.2.0.tgz",
+      "integrity": "sha512-+pQS7lTaoVIXhaCW7R3Wd/165APzZHWzYVqe7dxzdupxQwebgpBaCmf0/XZwmoA/rkDq3qvzO0qv4d5oFVrBRw==",
+      "optional": true
+    },
     "pbkdf2": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.1.tgz",
@@ -12050,6 +12077,27 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "react-particles-js": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/react-particles-js/-/react-particles-js-3.4.1.tgz",
+      "integrity": "sha512-c3+vITUMN9RlgbERZYd9Kzvjmf49ENp07+9+NDLvE1Jf9euabrJi/q6gCCcv5foxGHBYjHnGs47Tusmrl0/+GQ==",
+      "requires": {
+        "lodash": "^4.17.11",
+        "tsparticles": "^1.18.10"
+      }
+    },
+    "react-redux": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.2.tgz",
+      "integrity": "sha512-8+CQ1EvIVFkYL/vu6Olo7JFLWop1qRUeb46sGtIMDCSpgwPQq8fPLpirIB0iTqFe9XYEFPHssdX8/UwN6pAkEA==",
+      "requires": {
+        "@babel/runtime": "^7.12.1",
+        "hoist-non-react-statics": "^3.3.2",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.13.1"
+      }
+    },
     "react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -12496,6 +12544,11 @@
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
     },
+    "reselect": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.0.0.tgz",
+      "integrity": "sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA=="
+    },
     "resolve": {
       "version": "1.20.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
@@ -14291,6 +14344,14 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
+    "tsparticles": {
+      "version": "1.18.12",
+      "resolved": "https://registry.npmjs.org/tsparticles/-/tsparticles-1.18.12.tgz",
+      "integrity": "sha512-7WY31HckCzzaiuudQlIeCE3Y5C4AslnJsuM/aeSDMErx7p7GjXzfUIO5qpzwyoJ7KRNURxIhADTXSDEtqkJFxw==",
+      "requires": {
+        "pathseg": "^1.2.0"
+      }
+    },
     "tsutils": {
       "version": "3.20.0",
       "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.20.0.tgz",

package.json

@@ -15,10 +15,15 @@
     "clean": "gatsby clean"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^1.5.0",
     "gatsby": "^2.32.3",
     "gatsby-plugin-sass": "^3.2.0",
+    "loadash": "^1.0.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-particles-js": "^3.4.1",
+    "react-redux": "^7.2.2",
+    "redux": "^4.0.5",
     "sass": "^1.32.7"
   }
 }

src/components/forms/abstractWebsocket.js

@@ -0,0 +1,265 @@
+import React, { useState, useEffect } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+
+import { renderWebsocketSelector } from '../../redux/slices/renderWebsocketSlice'
+import { connect, saveMessage, resetMessages, disconnect } from '../../redux/slices/renderWebsocketSlice'
+
+import FormGenerator from './formGenerator'
+
+
+const ProgressBar = () => {
+
+    const {
+        percents,
+        connect
+    } = useSelector( renderWebsocketSelector )
+
+    return (
+        <div className="progress_bar_form">
+            <div>
+                {
+                    typeof percents === 'number'
+                    ? 'Progress: ' + percents + '%'
+                    : percents
+                }
+            </div>
+            <div>
+                {
+                    !isNaN(percents) 
+                    && percents.toString().indexOf('.') != -1
+                    ? <div 
+                          className='progress_bar_progress' 
+                          style={ { width: percents + '%', height: '100%', backgroundColor: 'green' } }
+                      >
+                      </div>
+                    : percents === 'render success'
+                        ? <div 
+                              className='progress_bar_progress'
+                              style={ { width: '100%', height: '100%', backgroundColor: 'green' } }
+                          >
+                          </div>
+                        : <></>
+                }
+            </div>
+        </div>
+    )
+
+}
+
+
+const AbstractWebsocket = ({ addressWS, inputList, refList, bodyComparer }) => {
+
+    const [web_socket, setWebsocket] = useState(null)
+
+    const dispatch = useDispatch()
+
+    const { 
+        web_socket_address,
+        address,
+        room_uuid,
+        messages,
+        connected
+    } = useSelector( renderWebsocketSelector )
+
+
+    const handleConnect = ( event ) => {
+
+        event.preventDefault()
+
+        if ( web_socket === null && address === '' && room_uuid === '') {
+            dispatch(
+                connect( 
+                    {
+                        address: addressWS
+                    } 
+                )
+            )
+        }
+
+
+    }
+
+    const handleSendMessage = ( refs ) => {
+        
+        let body = bodyComparer( refs )
+
+        console.log( body )
+        try {
+
+            dispatch(
+                saveMessage(
+                    {
+                        message: { info: 0 } // start
+                    }
+                )
+            )
+            
+            web_socket.send(
+                JSON.stringify(
+                    body
+                )
+            )
+
+        } catch (error) {
+
+            web_socket.close()
+            dispatch(
+                disconnect()
+            )
+            setWebsocket(null)
+            console.log(error)
+        
+        }
+    }
+
+    const handleDisconnect = ( event ) => {
+
+        event.preventDefault()
+
+        if ( web_socket !== null && address !== '' && room_uuid !== '' ) {
+            try {
+                web_socket.close()
+                dispatch(
+                    disconnect()
+                )
+            } catch (error) {
+                console.log(error)
+            }
+        } else if ( address !== '' && room_uuid !== '' ) {
+            dispatch(
+                disconnect()
+            )
+        }
+
+        setWebsocket(null)
+
+        console.log('disconnect')
+
+    }
+
+    useEffect( 
+        () => {
+
+            if ( web_socket_address !== '' && web_socket === null ) {
+
+                console.log( 'connect' )
+                
+                setWebsocket(new WebSocket( web_socket_address ))
+            }
+
+            if ( web_socket !== null ) {
+
+                web_socket.onmessage = (event) => {
+                    console.log( event.data )
+                    if ( messages[ messages.length - 1 ] !== JSON.parse( event.data ) ) {
+                        dispatch(
+                            saveMessage(
+                                {
+                                    message: JSON.parse( event.data )
+                                }
+                            )
+                        )
+                    }
+                }
+
+            }
+        
+        }
+    )
+
+    return (
+        <div>
+            <div 
+                className="float_form_render_async"
+                style={ 
+                    connected 
+                    ? addressWS === '/vector/single/set/' || addressWS === '/vector/single/image/'
+                        ? { marginTop: '10%', overflowY: 'scroll' }
+                        : { marginTop: '10%' } 
+                    : { 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
+                        </button>
+                    :
+                    <button onClick={ (event) => handleConnect(event) }>
+                            Connect
+                        </button>
+                }
+            </div>
+            <div 
+                className="float_form_console"
+                style={ connected ? { marginTop: '25%', height: '200px' } : { marginTop: '15%', height: '10px' } }
+            >
+                <p>
+                    console:
+                </p>
+                <div className="console_data">
+                    {
+                        messages.slice(0).reverse().map( (item) => {
+                                return (
+                                    <div>
+                                        <>
+                                            {
+                                                Object.keys(item).map( (key) => {
+
+                                                        if ( key == 'details' ) {
+                                                            return (
+                                                                <>
+                                                                    {
+                                                                        Object.keys(item[key]).map( (keyTwo) => {
+                                                                                return (
+                                                                                    <div>
+                                                                                        { '    ' + keyTwo + ': ' + item[key][keyTwo] + ' ' }
+                                                                                    </div>
+                                                                                )
+                                                                            }
+                                                                        )
+                                                                    }
+                                                                </>
+                                                            )
+                                                        } else if ( key === 'image' ) {
+                                                            return (
+                                                                <img 
+                                                                    src={ 'data:image/png;base64, ' + item[key] }
+                                                                    style={ { width: '300px', height: '150px' } }
+                                                                />
+                                                            )
+                                                        } else {
+                                                            return (
+                                                                <>
+                                                                { key + ': ' + item[key] + ' ' }
+                                                                </>
+                                                            )
+                                                        }
+                                                    } 
+                                                )
+                                            }
+                                        </>
+                                    </div>
+                                )
+                            }
+                        )
+                    }
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default AbstractWebsocket

src/components/forms/formGenerator.js

@@ -0,0 +1,608 @@
+import React, { useState } from 'react'
+
+/**
+ * 
+ * @param { [ {}, {}, ...{} ] } inputList - list of dicts with info about input
+ * @param { [] } refList - react ref objects list for handler validation
+ * @param { } action - fetch method
+ */
+export const FormGenerator = ({
+    inputList, refList,
+    action
+}) => {
+
+    const handler = async (event) => {
+        event.preventDefault()
+
+        if ( inputList[0].action === 'Async' ) {
+            await action(refList)
+        } else if ( 
+             inputList[0].action === 'Download'
+             || inputList[0].action === 'Upload'
+        ) {
+            await action()
+        } else {
+            for (let i = 0; i < refList.length; i++) {
+                if (refList[i].current.value === ''
+                    && inputList[0].action !== 'Update'
+                    || i === 0
+                    && refList.length !== 1
+                ) {
+                    refList[i].current.focus()
+                } else if (i === refList.length - 1) {
+                    await action(refList)
+                }
+            }
+        }
+    }
+
+    let info
+
+    return (
+        <form onSubmit={event => handler(event)} className="form">
+            {
+                inputList.map((input, key) => {
+
+                    if (input.type === 'info') {
+                        info = input
+                    } else if (input.type === 'text') {
+                        return (
+                            <TextInputGenerator
+                                input={input}
+                                info={info}
+                                key={key}
+                            />
+                        )
+                    } else if (input.type === 'password') {
+                        return (
+                            <PasswordInputGenerator 
+                                input={input}
+                                info={info}
+                                key={key}
+                            />
+                        )
+                    } else if (input.type === 'links-listing') {
+                        return (
+                            <DownloadFilesListInputGenerator 
+                                input={input}
+                                info={info}
+                                key={key}
+                            />
+                        )
+                    } else if (input.type === 'file') {
+                        return (
+                            <UploadInputGenerator
+                                input={input}
+                                info={info}
+                                key={key}
+                            />
+                        )
+                    } else if (input.type === 'choice-listing') {
+                        return (
+                            <ChoiceListingGenerator 
+                                input={input}
+                                info={info}
+                                key={key}
+                            />
+                        )
+                    } else if (input.type === 'range') {
+                        return (
+                            <RangeInputGenerator 
+                                input={input}
+                                info={info}
+                                key={key}
+                            />
+                        )
+                    } else if (input.type === 'vector') {
+                        return (
+                            <VectorInputGenerator
+                                input={input}
+                                info={info}
+                                key={key}
+                            />
+                        )
+                    }
+                })
+            }
+            {
+                info.button_value === ''
+                ? <></>
+                : <button 
+                      type='submit'
+                  >
+                      { info.button_value }
+                  </button>
+            }
+            
+        </form>
+    )
+}
+
+/**
+ * Text input generator, example:
+ * @param {
+ * {    
+ *  type: 'text',   
+ *  name: 'name',       
+ *  ref: React.createRef()  
+ * }    } input - basic text input 
+ * @param {
+ * {
+ *  type: 'info',
+ *  action: 'Update'
+ *  endpoint: 'Album'
+ * }    } info - information about form
+ */
+const TextInputGenerator = ({
+    input, info
+}) => {
+    return (
+        <div className="input_generate">
+            <div className="input_labels">
+                {input.name + ':'}
+            </div>
+            <input
+                id={input.name + info.action + info.endpoint + 'Input'}
+                autoComplete='off'
+                ref={input.ref}
+            />
+        </div>
+    )
+}
+
+/**
+ * Text input generator, example:
+ * @param {
+ * {    
+ *  type: 'password',   
+ *  name: 'name',       
+ *  ref: React.createRef()  
+ * }    } input - basic text input 
+ * @param {
+ * {
+ *  type: 'info',
+ *  action: 'Update'
+ *  endpoint: 'Album'
+ * }    } info - information about form
+ */
+const PasswordInputGenerator = ({
+    input, info
+}) => {
+    return (
+        <div className="input_generate">
+            <div className="input_labels">
+                {input.name + ':'}
+            </div>
+            <input
+                id={input.name + info.action + info.endpoint + 'Input'}
+                autoComplete='off'
+                ref={input.ref}
+                type='password'
+            />
+        </div>
+    )
+}
+
+const ObjectIterator = ({
+    object, divPlacer
+}) => {
+    return(
+        <>
+            {
+                typeof object == "object" ?
+                
+                    Object.keys( object ).map(
+                        ( key ) => {
+                            return (
+                                <div key={ key }>
+                                    { divPlacer( object[key] ) }
+                                </div>
+                            )
+                        }
+                    )
+                :
+
+                    object
+            }
+        </>
+    )
+}
+
+/**
+ * Text input generator, example:
+ * @param {
+ * {    
+ *  type: 'drop-box',   
+ *  name: 'name',
+ *  values: list,
+ *  link: link to the file
+ * }    } input - basic text input 
+ * @param {
+ * {
+ *  type: 'info',
+ *  action: 'Update'
+ *  endpoint: 'Album'
+ * }    } info - information about form
+ */
+const DownloadFilesListInputGenerator = ({
+    input, info
+}) => {
+
+    return (
+        <div
+            id={input.name + info.action + info.endpoint + 'DropBox'}
+        >
+            {input.name + ':'}
+            {   
+                input.values.length == 0 ? 
+                
+                () => {
+                        return (
+                            <div>
+                                empty
+                            </div>
+                        )
+                } 
+                
+                : input.values.map( (item, index) => {
+
+                        return (
+                            <>
+                                <div
+                                    key={ info.action + '_element_' + index }
+                                    ls={ item }
+                                >
+                                    {
+                                        typeof item == 'string' ?
+
+                                            item 
+
+                                        : Object.keys(item).map(
+                                            ( key, index ) => {
+
+                                                return(
+                                                    <div style={{ paddingLeft: '10px' }}> 
+                                                        { key + ': ' }
+                                                        {
+                                                            typeof item[key] === "object" ?
+                                                            
+                                                                Object.keys( item[key] ).map(
+                                                                    ( key_two, index ) => {
+                                                                        return (
+                                                                            <div style={{ paddingLeft: '20px' }}>
+                                                                                { key_two + ': '}
+                                                                                {
+                                                                                    typeof item[key][key_two] == 'object' ?
+                                                                                    
+                                                                                        Object.keys( item[key][key_two] ).map(
+                                                                                            (key_three, index) => {
+                                                                                                return (
+                                                                                                    <div style={{ paddingLeft: '30px' }}>
+                                                                                                        { key_three + ": " } 
+                                                                                                            { "x: " + item[key][key_two][key_three].x + ", " }
+                                                                                                            { "y: " + item[key][key_two][key_three].y + ", " }
+                                                                                                            { "z: " + item[key][key_two][key_three].z + ", " }
+                                                                                                    </div>
+                                                                                                )
+                                                                                            }
+                                                                                        )
+                                                                                    
+                                                                                    :
+                                                                                        
+                                                                                        item[key][key_two]
+                                                                                }
+
+                                                                            </div>
+                                                                        )
+                                                                    }
+                                                                )
+                                                            
+                                                            :
+                                                            
+                                                                item[key] 
+                                                        }
+                                                    </div>
+                                                
+                                                )
+                                            }
+                                        )
+                                    }
+                                    <br />
+                                    <br />
+                                    <a 
+                                        href={ input.link + index + '/' }
+                                    >
+                                        download
+                                    </a>
+                                </div>
+                                <div style={{ width: '100%', height: '1px', backgroundColor: '#008000' }}>
+                                </div>
+                            </>
+                        )
+
+                    }
+                )
+            }
+        </div>
+    )
+}
+
+/**
+ * Text input generator, example:
+ * @param {
+ * {    
+ *  type: 'chice-listing',   
+ *  name: 'name',
+ *  values: list,
+ *  ref: React.createRef()
+ * }    } input - basic text input 
+ * @param {
+ * {
+ *  type: 'info',
+ *  action: 'Update'
+ *  endpoint: 'Album'
+ * }    } info - information about form
+ */
+const ChoiceListingGenerator = ({
+    input, info
+}) => {
+
+    const __handleRef = ( event ) => {
+        event.preventDefault()
+        input.ref.current = {
+            value: event.target.value
+        }
+    }
+
+    return (
+        <div
+            id={input.name + info.action + info.endpoint + 'ChoiceListing'}
+        >
+            {input.name + ':'}
+            <select
+                onChange={ (event) => __handleRef( event ) }
+            >
+                <option
+                    value={ '--Select-Model--' }
+                >
+                    --Select-Model--
+                </option>
+            {
+                input.values.map( (item) => {
+                        return (
+                            <option
+                                key={ item.model }
+                                value={ item.model }
+                            >
+                                    { item.model.replace('.blend', '') }
+                            </option>
+                        )
+                    }
+                )
+            }
+            </select>
+        </div>
+    )
+}
+
+/**
+ * Upload file input generator, example:
+ * @param {
+ * {    
+ *  type: 'file',   
+ *  name: 'name',   
+ *  endpoint: 'Album',     
+ *  fileType: 'image' or 'audio',       
+ *  dropInfo: dropInfo, setDropInfo: setDropInfo(), #useState  
+ *  file: file, setFile: setFile()  #useState
+ * }    } input -  
+ */
+const UploadInputGenerator = ({
+    input, info
+}) => {
+
+    const onLoadFile = async (event) => {
+        event.preventDefault()
+        let data = event.target.files[0]
+        // input.setFile(await toBase64(data))
+        input.setFile( data )
+        setDropInfos(data.name, data.size)
+    }
+
+    const onLoadFileDrop = async (event) => {
+        event.preventDefault()
+        event.persist()
+        let data = event.dataTransfer.files[0]
+        // input.setFile(await toBase64(data))
+        input.setFile( data )
+        setDropInfos(data.name, data.size)
+    }
+
+    const toBase64 = async (file) => new Promise((resolve, reject) => {
+        let fileReader = new FileReader()
+        fileReader.readAsDataURL(file)
+        fileReader.onload = () => resolve(fileReader.result)
+        fileReader.onerror = error => reject(error)
+    })
+
+    const setDropInfos = (name, size) => {
+        input.setDropInfo(
+            'name: "'
+            + name
+            + '"\nsize: '
+            + (Math.round(size / 100 + 'e-2') / 100)
+            + ' MB'
+        )
+    }
+
+    return (
+        <div onDrop={event => onLoadFileDrop(event)} >
+            <pre style={{ marginLeft: '40px' }}>
+                {input.dropInfo}
+            </pre>
+            <input
+                style={{ marginTop: '-55px' }}
+                id={input.name + info.action + info.endpoint + 'Input'}
+                className='upload_input'
+                type='file'
+                accept={input.fileType + '/*'}
+                autoComplete='off'
+                onChange={event => onLoadFile(event)}
+            />
+        </div>
+    )
+}
+
+/**
+ * Text input generator, example:
+ * @param {
+ * {    
+ *  type: 'range',   
+ *  name: 'name',
+ *  min: min range value,
+ *  max: max range value,
+ *  step: step of value,
+ *  unit: unit of range value,       
+ *  ref: React.createRef()  
+ * }    } input - basic text input 
+ * @param {
+ * {
+ *  type: 'info',
+ *  action: 'Update'
+ *  endpoint: 'Album'
+ * }    } info - information about form
+ */
+const RangeInputGenerator = ({
+    input, info
+}) => {
+
+    let name = input.name + info.action + info.endpoint + 'Input'
+
+    const [value, setValue] = useState(0)
+
+    return (
+        <div>
+            <div>
+                {input.name + ': ' + value + ' ' + input.unit }
+            </div>
+            <input
+                style={ { width: '380px' } }
+                id={name}
+                name={name}
+                min={input.min}
+                max={input.max}
+                defaultValue={input.min}
+                step={input.step}
+                ref={input.ref}
+                type='range'
+                onChange={ event => setValue( event.target.value ) }
+            />
+        </div>
+    )
+}
+
+const RangeGenerator = ({ 
+    key,
+    label,
+    labelStyle,
+    valueStyle,
+    style,
+    name,
+    unit,
+    min,
+    max,
+    defaultValue,
+    step,
+    reference
+}) => {
+
+    const [value, setValue] = useState(0)
+
+    return (
+        <div style={ { display: 'flex' } }>
+            <div style={ labelStyle }>
+                { label + ': ' }
+            </div>
+            <input
+                key={key}
+                style={ style }
+                id={ name }
+                name={ name }
+                min={min}
+                max={max}
+                defaultValue={ defaultValue }
+                step={step}
+                ref={reference}
+                type='range'
+                onChange={ event => setValue( event.target.value ) }
+            />
+            <div style={ valueStyle }>
+                { value + ' ' + unit }
+            </div>
+        </div>
+    )
+
+}
+
+/**
+ * Text input generator, example:
+ * @param {
+ * {    
+ *  type: 'vector',   
+ *  name: 'name',     
+ *  refDict: 
+ *  {
+ *      x: React.createRef(),
+ *      y: React.createRef(),
+ *      z: React.createRef()
+ *  }  
+ * }    } input - basic text input 
+ * @param {
+ * {
+ *  type: 'info',
+ *  action: 'Update'
+ *  endpoint: 'Album'
+ * }    } info - information about form
+ */
+const VectorInputGenerator = ({
+    input, info
+}) => {
+
+    return (
+        <div style={ { width: '' } }>
+            <div style={ { width: '100%' } }>
+                { input.name }
+            </div>
+            <div style={ { display: 'flex' } }>
+                {
+                    Object.keys(input.refDict).map( (key) => {
+
+                            let name = input.name + key + info.action + info.endpoint + 'Input'
+                            return (
+                                <div style={ { display: 'flex', width: '140px' } }>
+                                    <RangeGenerator 
+                                        key={key}
+                                        label={key}
+                                        labelStyle={ { width: '5px', marginTop: '15px' } }
+                                        valueStyle={ { width: '5px', marginTop: '15px', marginLeft: '5px' } }
+                                        style={ { width: '80px' } }
+                                        name={name}
+                                        unit={ '' }
+                                        min={input.min[key]}
+                                        max={input.max[key]}
+                                        defaultValue={ input.min[key] > 0 ? input.min[key] : 0 }
+                                        step={0.1}
+                                        reference={input.refDict[key]}
+                                    />
+                                </div>
+                            )
+                        }
+                    )
+                }
+            </div>
+        </div>
+    )
+}
+
+
+export default FormGenerator

src/components/forms/model_crud/modelShowModelsAndDownload.js

@@ -0,0 +1,68 @@
+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 { GeneralAddress } from '../../../redux/asyncThunks/abstracts/abstractAddress'
+
+import FormGenerator from '../formGenerator'
+
+
+const ModelShowAndDownloadForm = () => {
+
+    const dispatch = useDispatch()
+    
+    const { models_list } = useSelector( modelCrudSelector )
+    const { user, token } = useSelector( userAuthSelector )
+
+    let blocker = false
+
+    useEffect(
+        () => {
+            if ( models_list.length === 0 && user.id > 0 && token !== '' && !blocker ) {
+                dispatch( modelCrudAsyncThunk.fetchGetAllModels(token) )
+                if ( models_list.length === 0 ) {
+                    blocker = true
+                }
+            }
+        }
+    )
+
+    let inputList = [
+        {
+            type: 'info',
+            action: 'Download',
+            endpint: 'model/download',
+            button_value: 'Refresh Models List'
+        },
+        {
+            type: 'links-listing',
+            name: 'Models',
+            values: models_list,
+            link: GeneralAddress + '/model/',
+        }
+    ]
+
+    const handleRefresh = () => {
+        dispatch( modelCrudAsyncThunk.fetchGetAllModels(token) )
+    }
+
+    return (
+        <div 
+            className="float_form_model"
+            style={ { marginTop: '10%' , overflowY: 'scroll', height: '500px' } }
+        >
+            <FormGenerator 
+                inputList={ inputList }
+                refList={ [] }
+                action={ handleRefresh }
+            />
+        </div>
+    )
+
+}
+
+export default ModelShowAndDownloadForm

src/components/forms/model_crud/modelUpload.js

@@ -0,0 +1,72 @@
+import React, { useState } 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 FormGenerator from '../formGenerator'
+
+
+const ModelUploadForm = () => {
+
+    const dispatch = useDispatch()
+
+    const [blend, setBlend] = useState('')
+    const [blendInfo, setBlendInfo] = useState('Drop/Click\nfor upload "*.blend" file')
+    
+    const { upload_blend_file_status } = useSelector( modelCrudSelector )
+    const { user, token } = useSelector( userAuthSelector )
+
+    let inputList = [
+        {
+            type: 'info',
+            action: 'Upload',
+            endpint: 'model/upload',
+            button_value: 'Upload Model'
+        },
+        {
+            type: 'file',
+            name: 'Model',
+            fileType: 'blender',
+            dropInfo: blendInfo,
+            setDropInfo: setBlendInfo,
+            file: blend,
+            setFile: setBlend
+        }
+    ]
+
+    const handleModelUpload = () => {
+        let body = {
+            user_id: user.id,
+            file: blend,
+            token: token
+        }
+        console.log( body )
+        dispatch( modelCrudAsyncThunk.fetchUploadModel( body ) )
+    }
+
+    return (
+        <div 
+            className="float_form_model"
+            style={ { marginTop: '17%'} }
+        >
+            <FormGenerator 
+                inputList={ inputList }
+                refList={ [] }
+                action={ handleModelUpload }
+            />
+            <p>
+                {   
+                    typeof upload_blend_file_status === 'string'
+                    ? ''
+                    : 'info' in upload_blend_file_status 
+                        ? upload_blend_file_status.info
+                        : ''
+                }
+            </p>
+        </div>
+    )
+}
+
+export default ModelUploadForm

src/components/forms/render_crud/renderShowReadyRendersAndDownload.js

@@ -0,0 +1,65 @@
+import React, { useEffect } from 'react'
+
+import { useSelector, useDispatch } from 'react-redux'
+
+import { userAuthSelector } from '../../../redux/slices/userAuthSlice'
+import { renderCrudSelector } from '../../../redux/slices/renderCrudSlice'
+import renderCrudAsyncThunk from '../../../redux/asyncThunks/renderCrudAsyncThunk'
+
+import { GeneralAddress } from '../../../redux/asyncThunks/abstracts/abstractAddress'
+
+import FormGenerator from '../formGenerator'
+
+
+const RenderShowAndDownloadForm = () => {
+
+    const dispatch = useDispatch()
+    
+    const { render_list } = useSelector( renderCrudSelector )
+    const { user, token } = useSelector( userAuthSelector )
+
+    let blocker = false
+
+    useEffect(
+        () => {
+            if ( render_list.length === 0 && user.id > 0 && token !== '' && !blocker ) {
+                dispatch( renderCrudAsyncThunk.fetchGetAllRenders( token ) )
+                if ( render_list.length === 0 ) {
+                    blocker = true
+                }
+            }
+        }
+    )
+
+    let inputList = [
+        {
+            type: 'info',
+            action: 'Download',
+            endpint: 'model/download',
+            button_value: 'Refresh Renders List'
+        },
+        {
+            type: 'links-listing',
+            name: 'Renders',
+            values: render_list,
+            link: GeneralAddress + '/render/',
+        }
+    ]
+
+    const handleRefresh = () => {
+        dispatch( renderCrudAsyncThunk.fetchGetAllRenders( token ) )
+    }
+
+    return (
+        <div className='float_form_render_sync'>
+            <FormGenerator 
+                inputList={ inputList }
+                refList={ [] }
+                action={ handleRefresh }
+            />
+        </div>
+    )
+
+}
+
+export default RenderShowAndDownloadForm

src/components/forms/render_websocket/renderAll.js

@@ -0,0 +1,93 @@
+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 RenderAllForm = () => {
+
+    const dispatch = useDispatch()
+
+    const choiceListing = React.createRef()
+    const resolutionXRange = React.createRef()
+    const resolutionYRange = React.createRef()
+
+    const { models_list } = useSelector( modelCrudSelector )
+    const { user, token } = useSelector( userAuthSelector )
+
+    let refList = [
+        choiceListing,
+        resolutionXRange,
+        resolutionYRange,
+    ]
+
+    let inputList = [
+        {
+            type: 'info',
+            action: 'Async',
+            endpint: 'render/async/all',
+            button_value: 'Render All Sets'
+        },
+        {
+            type: 'choice-listing',
+            name: 'Models',
+            values: models_list,
+            ref: choiceListing
+        },
+        {
+            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
+        },
+    ]
+
+    useEffect( 
+        () => {
+            
+            if ( models_list.length === 0 && user.id > 0 && token !== '' ) {
+                dispatch( modelCrudAsyncThunk.fetchGetAllModels( token ) )
+            }
+        
+        }
+    )
+
+    const bodyComparer = ( refs ) => {
+        return {
+            fileName: refs[0].current.value.replace('.blend', ''),
+            // fileName: 'testHand',
+            resolutionX: refs[1].current.value,
+            resolutionY: refs[2].current.value,
+        }
+    }
+
+    return (
+        <div>
+            <AbstractWebsocket 
+                addressWS={ '/all/' }
+                inputList={ inputList }
+                refList={ refList }
+                bodyComparer={ bodyComparer }
+            />
+        </div>
+    )
+}
+
+export default RenderAllForm

src/components/forms/render_websocket/renderSingleImage.js

@@ -0,0 +1,136 @@
+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 RenderSingleImageForm = () => {
+
+    const dispatch = useDispatch()
+
+    const choiceListing = React.createRef()
+    const setIdRange = React.createRef()
+    const rotateRange = React.createRef()
+    const cameraIdRange = React.createRef()
+    const resolutionXRange = React.createRef()
+    const resolutionYRange = React.createRef()
+
+    const { models_list } = useSelector( modelCrudSelector )
+    const { user, token } = useSelector( userAuthSelector )
+
+    let refList = [
+        choiceListing,
+        setIdRange,
+        rotateRange,
+        cameraIdRange,
+        resolutionXRange,
+        resolutionYRange
+    ]
+
+    let inputList = [
+        {
+            type: 'info',
+            action: 'Async',
+            endpint: 'render/async/single/image',
+            button_value: 'Render Single Image'
+        },
+        {
+            type: 'choice-listing',
+            name: 'Models',
+            values: models_list,
+            ref: choiceListing
+        },
+        {
+            type: 'range',
+            name: 'Set ID',
+            min: 0,
+            max: 87,
+            step: 1,
+            unit: 'set',
+            ref: setIdRange
+        },
+        {
+            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
+        },
+    ]
+
+    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 ) => {
+
+        return {
+            fileName: refs[0].current.value.replace('.blend', ''),
+            // fileName: 'testHand',
+            setID: refs[1].current.value,
+            rotate: refs[2].current.value / 62, // on backend 0.1 - 6.2 value
+            cameraID: refs[3].current.value,
+            nameSeries: 0,
+            resolutionX: refs[4].current.value,
+            resolutionY: refs[5].current.value
+        }
+    }
+
+    return (
+        <div>
+            <AbstractWebsocket 
+                addressWS={ '/single/image/' }
+                inputList={ inputList }
+                refList={ refList }
+                bodyComparer={ bodyComparer }
+            />
+        </div>
+    )
+}
+
+export default RenderSingleImageForm

src/components/forms/render_websocket/renderSingleSet.js

@@ -0,0 +1,134 @@
+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 RenderSingleSetForm = () => {
+
+    const dispatch = useDispatch()
+
+    const choiceListing = React.createRef()
+    const setIdRange = React.createRef()
+    const cameraIdRange = React.createRef()
+    const resolutionXRange = React.createRef()
+    const resolutionYRange = React.createRef()
+    const angleRange = React.createRef()
+
+    const { models_list } = useSelector( modelCrudSelector )
+    const { user, token } = useSelector( userAuthSelector )
+
+    let refList = [
+        choiceListing,
+        setIdRange,
+        cameraIdRange,
+        resolutionXRange,
+        resolutionYRange,
+        angleRange
+    ]
+
+    let inputList = [
+        {
+            type: 'info',
+            action: 'Async',
+            endpint: 'render/async/single/set',
+            button_value: 'Render Single Set'
+        },
+        {
+            type: 'choice-listing',
+            name: 'Models',
+            values: models_list,
+            ref: choiceListing
+        },
+        {
+            type: 'range',
+            name: 'Set ID',
+            min: 0,
+            max: 87,
+            step: 1,
+            unit: 'set',
+            ref: setIdRange
+        },
+        {
+            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: 'range',
+            name: 'Rotate',
+            min: 1,
+            max: 360,
+            step: 1,
+            unit: 'deg',
+            ref: angleRange
+        },
+    ]
+
+    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 ) => {
+        return {
+            fileName: refs[0].current.value.replace('.blend', ''),
+            // fileName: 'testHand',
+            setID: refs[1].current.value,
+            cameraID: refs[2].current.value,
+            resolutionX: refs[3].current.value,
+            resolutionY: refs[4].current.value,
+            angle: refs[5].current.value / 62, // on backend 0.1 - 6.2 value
+        }
+    }
+
+    return (
+        <div>
+            <AbstractWebsocket 
+                addressWS={ '/single/set/' }
+                inputList={ inputList }
+                refList={ refList }
+                bodyComparer={ bodyComparer }
+            />
+        </div>
+    )
+}
+
+export default RenderSingleSetForm

src/components/forms/render_websocket/renderVectorImage.js

@@ -0,0 +1,445 @@
+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 RenderVectorSingleImageForm = () => {
+
+    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/image',
+            button_value: 'Render Single Image'
+        },
+        {
+            type: 'choice-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.replace('.blend', ''),
+            // fileName: 'testHand',
+            rotate: refs[1].current.value / 62, // on backend 0.1 - 6.2 value
+            cameraID: refs[2].current.value,
+            nameSeries: 0,
+            resolutionX: refs[3].current.value,
+            resolutionY: refs[4].current.value,
+            vectors: vectors
+        }
+    }
+
+    return (
+        <div>
+            <AbstractWebsocket 
+                addressWS={ '/vector/single/image/' }
+                inputList={ inputList }
+                refList={ refList }
+                bodyComparer={ bodyComparer }
+            />
+        </div>
+    )
+}
+
+export default RenderVectorSingleImageForm

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: 'choice-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.replace('.blend', ''),
+            // 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 (
+        <div>
+            <AbstractWebsocket 
+                addressWS={ '/vector/single/set/' }
+                inputList={ inputList }
+                refList={ refList }
+                bodyComparer={ bodyComparer }
+            />
+        </div>
+    )
+}
+
+export default RenderVectorSingleSetForm

src/components/forms/user_auth/userLogin.js

@@ -0,0 +1,70 @@
+import React, { useState, useEffect } from 'react'
+
+import { useSelector, useDispatch } from 'react-redux'
+
+import { userAuthSelector } from '../../../redux/slices/userAuthSlice'
+import userAuthAsyncThunk from '../../../redux/asyncThunks/userAuthAsyncThunk'
+
+import FormGenerator from '../formGenerator'
+
+
+const UserLoginForm = () => {
+
+    const usernameInput = React.createRef()
+    const passwordInput = React.createRef()
+
+    const dispatch = useDispatch()
+    const { info } = useSelector( userAuthSelector )
+
+    let refList = [
+        usernameInput,
+        passwordInput
+    ]
+
+    let inputList = [
+        {
+            type: 'info',
+            action: 'Create',
+            endpint: 'user/auth/login',
+            button_value: 'Sign In'
+        },
+        {
+            type: 'text',
+            name: 'Username',
+            ref: usernameInput
+        },
+        {
+            type: 'password',
+            name: 'Password',
+            ref: passwordInput
+        }
+    ]
+
+    const login = async ( refs ) => {
+        let pass = {
+            username: refs[0].current.value,
+            password: refs[1].current.value
+        }
+        dispatch(
+            userAuthAsyncThunk.fetchLogin(
+                pass
+            )
+        )
+    }
+
+    return (
+        <div>
+            <FormGenerator 
+                inputList={ inputList }
+                refList={ refList }
+                action={ login }
+            />
+            <div className='form_info'>
+                { info }
+            </div>
+        </div>
+    )
+
+}
+
+export default UserLoginForm

src/components/forms/user_auth/userRegister.js

@@ -0,0 +1,78 @@
+import React, { useState, useEffect } from 'react'
+
+import { useSelector, useDispatch } from 'react-redux'
+
+import { userCrudSelector } from '../../../redux/slices/userCrudSlice'
+import userCrudAsyncThunk from '../../../redux/asyncThunks/userCrudAsyncThunk'
+
+import FormGenerator from '../formGenerator'
+
+
+const UserRegisterForm = () => {
+
+    const usernameInput = React.createRef()
+    const passwordInput = React.createRef()
+    const emailInput = React.createRef()
+
+    const dispatch = useDispatch()
+    const { info } = useSelector( userCrudSelector )
+
+    let refList = [
+        usernameInput,
+        passwordInput,
+        emailInput
+    ]
+
+    let inputList = [
+        {
+            type: 'info',
+            action: 'Create',
+            endpint: 'user/auth/login',
+            button_value: 'Sign Up'
+        },
+        {
+            type: 'text',
+            name: 'Username',
+            ref: usernameInput
+        },
+        {
+            type: 'password',
+            name: 'Password',
+            ref: passwordInput
+        },
+        {
+            type: 'text',
+            name: 'Email',
+            ref: emailInput
+        }
+    ]
+
+    const register = async ( refs ) => {
+        let pass = {
+            username: refs[0].current.value,
+            password: refs[1].current.value,
+            email: refs[2].current.value,
+        }
+        dispatch(
+            userCrudAsyncThunk.fetchRegister(
+                pass
+            )
+        )
+    }
+
+    return (
+        <div>
+            <FormGenerator 
+                inputList={ inputList }
+                refList={ refList }
+                action={ register }
+            />
+            <div className='form_info'>
+                { info }
+            </div>
+        </div>
+    )
+
+}
+
+export default UserRegisterForm

src/components/forms/user_crud/userDelete.js

@@ -0,0 +1,77 @@
+import React, { useState, useEffect } from 'react'
+
+import { useSelector, useDispatch } from 'react-redux'
+
+import { userAuthSelector } from '../../../redux/slices/userAuthSlice'
+import { userCrudSelector } from '../../../redux/slices/userCrudSlice'
+
+import { deleteUser } from '../../../redux/slices/userAuthSlice'
+
+import userCrudAsyncThunk from '../../../redux/asyncThunks/userCrudAsyncThunk'
+
+import FormGenerator from '../formGenerator'
+
+
+const UserDeleteForm = () => {
+
+    const usernameInput = React.createRef()
+
+    const { user, token } = useSelector( userAuthSelector )
+
+    const dispatch = useDispatch()
+    const { info } = useSelector( userCrudSelector )
+
+    let refList = [
+        usernameInput,
+    ]
+
+    let inputList = [
+        {
+            type: 'info',
+            action: 'Create',
+            endpint: 'user/crud/delete',
+            button_value: 'Delete'
+        },
+        {
+            type: 'text',
+            name: 'Username',
+            ref: usernameInput
+        }
+    ]
+
+    const handleDelete = async ( refs ) => {
+        if ( refs[0].current.value === user.username ) {
+            let pass = {
+                token: token,
+                user_id: user.id
+            }
+            dispatch(
+                deleteUser()
+            )
+            dispatch(
+                userCrudAsyncThunk.fetchDeleteUser(
+                    pass
+                )
+            )
+        }
+    }
+
+    return (
+        <div 
+            className="float_form_model"
+            style={ { marginTop: '17%'} }
+        >
+            <FormGenerator 
+                inputList={ inputList }
+                refList={ refList }
+                action={ handleDelete }
+            />
+            <div className='form_info'>
+                { info }
+            </div>
+        </div>
+    )
+
+}
+
+export default UserDeleteForm

src/components/forms/user_crud/userUpdate.js

@@ -0,0 +1,87 @@
+import React, { useState, useEffect } from 'react'
+
+import { useSelector, useDispatch } from 'react-redux'
+
+import { userCrudSelector } from '../../../redux/slices/userCrudSlice'
+import { userAuthSelector } from '../../../redux/slices/userAuthSlice'
+import userCrudAsyncThunk from '../../../redux/asyncThunks/userCrudAsyncThunk'
+
+import FormGenerator from '../formGenerator'
+
+
+const UserUpdateForm = () => {
+
+    const usernameInput = React.createRef()
+    const passwordInput = React.createRef()
+    const emailInput = React.createRef()
+
+    const dispatch = useDispatch()
+    const { info } = useSelector( userCrudSelector )
+    const { user, token } = useSelector( userAuthSelector )
+
+    let refList = [
+        usernameInput,
+        passwordInput,
+        emailInput
+    ]
+
+    let inputList = [
+        {
+            type: 'info',
+            action: 'Create',
+            endpint: 'user/crud/update',
+            button_value: 'Update User'
+        },
+        {
+            type: 'text',
+            name: 'Username',
+            ref: usernameInput
+        },
+        {
+            type: 'password',
+            name: 'Password',
+            ref: passwordInput
+        },
+        {
+            type: 'text',
+            name: 'Email',
+            ref: emailInput
+        }
+    ]
+
+    const update = async ( refs ) => {
+        let pass = {
+            user_id: user.id,
+            token: token,
+            user: {
+                username: refs[0].current.value,
+                password: refs[1].current.value,
+                email: refs[2].current.value,
+            }
+        }
+        dispatch(
+            userCrudAsyncThunk.fetchUpdateUser(
+                pass
+            )
+        )
+    }
+
+    return (
+        <div 
+            className="float_form_model"
+            style={ { marginTop: '10%'} }
+        >
+            <FormGenerator 
+                inputList={ inputList }
+                refList={ refList }
+                action={ update }
+            />
+            <div className='form_info'>
+                { info }
+            </div>
+        </div>
+    )
+
+}
+
+export default UserUpdateForm

src/pages/404.js

@@ -1,54 +0,0 @@
-import * as React from "react"
-import { Link } from "gatsby"
-
-// styles
-const pageStyles = {
-  color: "#232129",
-  padding: "96px",
-  fontFamily: "-apple-system, Roboto, sans-serif, serif",
-}
-const headingStyles = {
-  marginTop: 0,
-  marginBottom: 64,
-  maxWidth: 320,
-}
-
-const paragraphStyles = {
-  marginBottom: 48,
-}
-const codeStyles = {
-  color: "#8A6534",
-  padding: 4,
-  backgroundColor: "#FFF4DB",
-  fontSize: "1.25rem",
-  borderRadius: 4,
-}
-
-// markup
-const NotFoundPage = () => {
-  return (
-    <main style={pageStyles}>
-      <title>Not found</title>
-      <h1 style={headingStyles}>Page not found</h1>
-      <p style={paragraphStyles}>
-        Sorry{" "}
-        <span role="img" aria-label="Pensive emoji">
-          😔
-        </span>{" "}
-        we couldn’t find what you were looking for.
-        <br />
-        {process.env.NODE_ENV === "development" ? (
-          <>
-            <br />
-            Try creating a page in <code style={codeStyles}>src/pages/</code>.
-            <br />
-          </>
-        ) : null}
-        <br />
-        <Link to="/">Go home</Link>.
-      </p>
-    </main>
-  )
-}
-
-export default NotFoundPage

src/pages/func_group/canvasBackgroundAnimation.js

@@ -0,0 +1,94 @@
+import React from 'react'
+import Particles from 'react-particles-js'
+
+
+const CanvasBackgroundAnimation = () => {
+
+    let particleColor = '#008000'
+    let darkGreen = '#005e00'
+    let menuColor = '#161c1d'
+
+    let params = {
+        particles: {
+            number: { value: 120, density: { enable: true, value_area: 800 } },
+            color: { value: particleColor },
+            shape: {
+              type: "circle",
+              stroke: { width: 0, color: darkGreen },
+              polygon: { nb_sides: 5 }
+            },
+            opacity: {
+              value: 1,
+              random: false,
+              anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false }
+            },
+            size: {
+              value: 3,
+              random: true,
+              anim: { enable: false, speed: 40, size_min: 0.1, sync: false }
+            },
+            line_linked: {
+              enable: true,
+              distance: 150,
+              color: darkGreen,
+              opacity: 0.4,
+              width: 1
+            },
+            move: {
+              enable: true,
+              speed: 6,
+              direction: "none",
+              random: false,
+              straight: false,
+              out_mode: "out",
+              bounce: false,
+              attract: { enable: false, rotateX: 600, rotateY: 1200 }
+            }
+        },
+        interactivity: {
+            detect_on: "canvas",
+            events: {
+              onhover: { enable: true, mode: "repulse" },
+              onclick: { enable: true, mode: "push" },
+              resize: true
+            },
+        },
+        modes: {
+            grab: { 
+                distance: 400, 
+                line_linked: { 
+                    opacity: 1 
+                } 
+            },
+            bubble: { 
+                distance: 400, 
+                size: 40, 
+                duration: 2, 
+                opacity: 8, 
+                speed: 3 
+            },
+            repulse: { 
+                distance: 200,
+                duration: 0.4 
+            },
+            push: { particles_nb: 4 },
+            remove: { particles_nb: 2 }
+        }
+    }
+
+    return (
+        <Particles 
+            params={ params }
+            style={
+                {
+                    width: '100%',
+                    height: '100%',
+                    zIndex: '-100',
+                }
+            }
+        />
+    )
+
+}
+
+export default CanvasBackgroundAnimation

src/pages/func_group/model_crud/modelCrudIndex.js

@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from 'react'
+
+import ModelShowAndDownloadForm from '../../../components/forms/model_crud/modelShowModelsAndDownload'
+import ModelUpload from '../../../components/forms/model_crud/modelUpload'
+
+
+const __handleSwap = (name, movement) => {
+
+    let display = {
+        display: 'block'
+    }
+
+    let hide = {
+        display: 'none'
+    }
+
+    if ( Object.keys(movement['movement']).includes(name) ) {
+        if (movement['movement'][name])
+            return display
+        else
+            return hide
+    } else {
+        return hide
+    }
+
+}
+
+const ModelCrudIndex = ( movement ) => {
+
+
+    return (
+        <div>
+            <div style={ __handleSwap( 'show_models_and_download', movement ) }>
+                <ModelShowAndDownloadForm />
+            </div>
+            <div style={ __handleSwap( 'upload_model', movement ) }>
+                <ModelUpload />
+            </div>
+        </div>
+    )
+}
+
+export default ModelCrudIndex

src/pages/func_group/navigationBar.js

@@ -0,0 +1,262 @@
+import React, { useState, useEffect } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+
+import { userAuthSelector } from '../../redux/slices/userAuthSlice'
+import { userCrudSelector } from '../../redux/slices/userCrudSlice'
+
+import userCrudAsyncThunk from '../../redux/asyncThunks/userCrudAsyncThunk'
+import userAuthAsyncThunk from '../../redux/asyncThunks/userAuthAsyncThunk'
+
+
+const __setShowGeneral = ( view, key, movements ) => {
+
+    let user_default = {
+        update_user: false,
+        delete_user: false
+    }
+
+    let model_default = {
+        show_models_and_dwonload: false,
+        upload_model: false
+    }
+
+    let render_default = {
+        show_ready_renders_and_download: false,
+        render_functionality: {
+            render_single_image: false,
+            render_single_set: false,
+            render_all: false,
+            render_image_by_vector: false,
+            render_set_by_vector: false
+        }
+    }
+
+    if (view === 'user_view') {
+        let new_move = user_default
+        new_move[key] = true
+        movements.user_view.setUserCrudView( 
+            new_move
+        )
+        movements.model_view.setModelCrudView(
+            model_default
+        )
+        movements.render_view.setRenderView(
+            render_default
+        )
+    } else if (view === 'model_view') {
+        
+        let new_move = model_default
+        new_move[key] = true
+        movements.model_view.setModelCrudView( 
+            new_move
+        )
+        movements.user_view.setUserCrudView( 
+            user_default
+        )
+        movements.render_view.setRenderView(
+            render_default
+        )
+    } else if (view === 'render_view') {
+        let new_move = render_default
+        if ( key in new_move ) {
+            new_move[key] = true
+            movements.render_view.setRenderView( 
+                new_move
+            )
+        } else {
+            new_move['render_functionality'][key] = true
+            movements.render_view.setRenderView( 
+                new_move
+            )
+        }
+        movements.model_view.setModelCrudView( 
+            model_default
+        )
+        movements.user_view.setUserCrudView( 
+            user_default
+        )
+    }
+    
+}
+
+const __styleChanger = ( bool ) => {
+    
+    let display = {
+        display: 'block'
+    }
+
+    let hide = {
+        display: 'none'
+    }
+    
+    return bool ? display : hide
+}
+
+const NavigationBar = ({ movements }) => {
+
+    const { user_get } = useSelector(userCrudSelector)
+    const { token, user } = useSelector(userAuthSelector)
+
+    const dispatch = useDispatch()
+
+    useEffect( () => {
+        if ( Object.keys(user_get).length === 0 && token !== '' && user.id > 0)
+            dispatch(
+                userCrudAsyncThunk.fetchGetOneUser(
+                    {
+                        user_id: user.id,
+                        token: token
+                    }
+                )
+            )
+    })
+
+    const [showAccount, setShowAccount] = useState(false)
+    const [showModels, setShowModels] = useState(false)
+    const [showRender, setShowRender] = useState(false)
+    const [showRenderFunc, setShowRenderFunc] = useState(false)
+
+    const [clickHide, setClickHide] = useState(true)
+    
+    const logout = async () => {
+        dispatch(
+            userAuthAsyncThunk.fetchLogout(
+                token
+            )
+        )
+    }
+
+    return(
+        <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 ) }
+                        className='nav_bar_header'
+                    >
+                        <pre>  ├── </pre> <p> Account Settings </p>
+                    </div>
+                    <div style={ __styleChanger( showAccount) }>
+                        <div>
+                            <div className='nav_bar_option'>
+                                <pre>  │   ├── </pre> <p> User info </p>
+                            </div>
+                            <div>
+                                <div className='nav_bar_option'>
+                                    <pre>  │   │   ├── </pre> <p>Username: { user_get.username } </p>
+                                </div>
+                                <div className='nav_bar_option'>
+                                    <pre>  │   │   └── </pre> <p> E-mail: { user_get.email } </p>
+                                </div>
+                            </div>
+                        </div>
+                        <div 
+                            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 ) } 
+                            className='nav_bar_option'
+                        >
+                            <pre>  │   └── </pre> <p> Delete User </p>
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <div 
+                        onClick={ () => setShowModels( !showModels ) }
+                        className='nav_bar_header'
+                    >
+                        <pre>  ├── </pre><p>Models</p>
+                    </div>
+                    <div style={ __styleChanger( showModels ) } className='nav_bar_option'>
+                        <div 
+                            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 ) }
+                            className='nav_bar_option'
+                        >
+                            <pre>  │   └── </pre> <p> Upload Model</p>
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <div 
+                        onClick={ () => setShowRender( !showRender ) } 
+                        className='nav_bar_header'
+                    >
+                        <pre>  ├── </pre> <p> Render </p>
+                    </div>
+                    <div style={ __styleChanger( showRender ) }>
+                        <div>
+                            <div 
+                                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 ) } 
+                                    className='nav_bar_option'
+                                >
+                                    <pre>  │   │   ├── </pre> <p> Render Single Image </p>
+                                </div>
+                                <div 
+                                    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 ) } 
+                                    className='nav_bar_option'
+                                >
+                                    <pre>  │   │   ├── </pre> <p> Render All Sets</p>
+                                </div>
+                                <div 
+                                    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 ) } 
+                                    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() } className='nav_bar_header'>
+                    <pre>  └── </pre><p> Sign Out</p>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default NavigationBar

src/pages/func_group/render/renderIndex.js

@@ -0,0 +1,67 @@
+import React, { useState, useEffect } from 'react'
+
+import RenderShowAndDownloadForm from '../../../components/forms/render_crud/renderShowReadyRendersAndDownload'
+
+import RenderSingleImageForm from '../../../components/forms/render_websocket/renderSingleImage'
+import RenderSingleSetForm from '../../../components/forms/render_websocket/renderSingleSet'
+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) => {
+    
+    let display = {
+        display: 'block'
+    }
+
+    let hide = {
+        display: 'none'
+    }
+
+    console.log(movement)
+
+    if ( Object.keys(movement['movement']).includes(name) ) {
+        if (movement['movement'][name])
+            return display
+        else
+            return hide
+    } else if (Object.keys(movement['movement']['render_functionality']).includes(name)) {
+        if (movement['movement']['render_functionality'][name])
+            return display
+        else
+            return hide
+    } else {
+        return hide
+    }
+
+}
+
+const RenderIndex = ( movement ) => {
+
+    return (
+        <div>
+            <div style={ __handleSwap( 'show_ready_renders_and_download', movement ) }>
+                <RenderShowAndDownloadForm />
+            </div>
+            <div style={ __handleSwap( 'render_single_image', movement ) }>
+                <RenderSingleImageForm />
+            </div>
+            <div style={ __handleSwap( 'render_single_set', movement ) }>
+                <RenderSingleSetForm />
+            </div>
+            <div style={ __handleSwap( 'render_all', movement ) }>
+                <RenderAllForm />
+            </div>
+            <div style={ __handleSwap( 'render_image_by_vector', movement ) }>
+                <RenderVectorSingleImageForm />
+            </div>
+            <div style={ __handleSwap( 'render_set_by_vector', movement ) }>
+                <RenderVectorSingleSetForm />
+            </div>
+        </div>
+    )
+}
+
+export default RenderIndex

src/pages/func_group/render_websocket/renderWebsocketIndex.js

@@ -0,0 +1,11 @@
+import React, { useState, useEffect } from 'react'
+
+const RenderWebsocketIndex = () => {
+
+    return (
+        <div>
+        </div>
+    )
+}
+
+export default RenderWebsocketIndex

src/pages/func_group/root.js

@@ -0,0 +1,14 @@
+import React, { useState, useEffect } from 'react'
+
+import VerifyUserSession from './rootUtils'
+
+const Root = () => {
+
+    return (
+        <div>
+            <VerifyUserSession />
+        </div>
+    )
+}
+
+export default Root

src/pages/func_group/rootUtils.js

@@ -0,0 +1,104 @@
+import React, { useState, useEffect } from 'react'
+import { useSelector } from 'react-redux'
+
+import { userAuthSelector } from '../../redux/slices/userAuthSlice'
+
+import UserAuthIndex from './user_auth/userAuthIndex'
+import UserCrudIndex from './user_crud/userCrudIndex'
+import ModelCrudIndex from './model_crud/modelCrudIndex'
+import RenderIndex from './render/renderIndex'
+
+import NavigationBar from './navigationBar'
+import CanvasBackgroundAnimation from './canvasBackgroundAnimation'
+
+
+const GeneralView = () => {
+
+    const [userCrudView, setUserCrudView] = useState(
+        {
+            update_user: false,
+            delete_user: false
+        }
+    )
+    const [modelCrudView, setModelCrudView] = useState(
+        {
+            show_models_and_download: false,
+            upload_model: false
+        }
+    )
+    const [renderCrudView, setRenderCrudView] = useState(
+        {
+            show_ready_renders_and_download: false,
+            render_functionality: {
+                render_single_image: false,
+                render_single_set: false,
+                render_all: false,
+                render_image_by_vector: false,
+                render_set_by_vector: false
+            }
+        }
+    )
+
+    let movements = {
+        user_view: {
+            userCrudView: userCrudView,
+            setUserCrudView: setUserCrudView
+        },
+        model_view: {
+            modelCrudView: modelCrudView,
+            setModelCrudView: setModelCrudView
+        },
+        render_view: {
+            renderView: renderCrudView, 
+            setRenderView: setRenderCrudView
+        }
+    }
+
+    return (
+        <div>
+            <NavigationBar 
+                movements={ movements }
+            />
+            <UserCrudIndex 
+                movement={ movements.user_view.userCrudView }
+            />
+            <ModelCrudIndex 
+                movement={ movements.model_view.modelCrudView }
+            />
+            <RenderIndex 
+                movement={ movements.render_view.renderView }
+            />
+        </div>
+    )
+}
+
+
+const VerifyUserSession = () => {
+    
+    const { token, user } = useSelector(userAuthSelector)
+
+    const [showGeneral, setShowGeneral] = useState(false)
+
+    useEffect(
+        () => {
+            if ( user.id > 0 && token !== '' && showGeneral === false ) {
+                setShowGeneral(true)
+            } else if ( user.id <= 0 && token === '' && showGeneral === true ) {
+                setShowGeneral(false)
+            }
+        }
+    )
+
+    return (
+        <div>
+            {
+                showGeneral
+                ? <GeneralView />  
+                : <UserAuthIndex />
+            }
+            <CanvasBackgroundAnimation />
+        </div>
+    )
+}
+
+export default VerifyUserSession

src/pages/func_group/user_auth/userAuthIndex.js

@@ -0,0 +1,38 @@
+import React, { useState, useEffect } from 'react'
+
+import UserLoginForm from '../../../components/forms/user_auth/userLogin'
+import UserRegisterForm from '../../../components/forms/user_auth/userRegister'
+
+
+const UserAuthIndex = () => {
+
+    const [swapForm, setSwapForm] = useState(true)
+
+    const handleSwap = (event) => {
+        event.preventDefault()
+        setSwapForm(
+            !swapForm
+        )
+    }
+
+    return (
+        <div 
+            className="float_form_auth" 
+            style={ swapForm ? { height: '200px', marginTop: '15%' } : { height: '290px', marginTop: '13%' } } 
+        >
+            {   swapForm
+                ? <UserLoginForm />
+                : <UserRegisterForm />
+            }
+            <button onClick={ (event) => handleSwap(event) }>
+                {
+                    swapForm
+                    ? 'Sign Up'
+                    : 'Sign In'
+                }
+            </button>
+        </div>
+    )
+}
+
+export default UserAuthIndex

src/pages/func_group/user_crud/userCrudIndex.js

@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from 'react'
+
+import UserUpdateForm from '../../../components/forms/user_crud/userUpdate'
+import UserDeleteForm from '../../../components/forms/user_crud/userDelete'
+
+
+const __handleSwap = (name, movement) => {
+
+    let display = {
+        display: 'block'
+    }
+
+    let hide = {
+        display: 'none'
+    }
+
+    if ( Object.keys(movement['movement']).includes(name) ) {
+        if (movement['movement'][name])
+            return display
+        else
+            return hide
+    } else {
+        return hide
+    }
+
+}
+
+const UserCrudIndex = ( movement ) => {
+
+
+    return (
+        <div>
+            <div style={ __handleSwap( 'update_user', movement ) }>
+                <UserUpdateForm />
+            </div>
+            <div style={ __handleSwap( 'delete_user', movement ) }>
+                <UserDeleteForm />
+            </div>
+        </div>
+    )
+}
+
+export default UserCrudIndex

src/pages/index.js

@@ -1,150 +1,26 @@
-import * as React from "react"
+import React from 'react';
+import '../styles/general.scss'
 
-// styles
+import { Provider } from 'react-redux';
-const pageStyles = {
+import { store } from '../redux/store';
-  color: "#232129",
-  padding: "96px",
-  fontFamily: "-apple-system, Roboto, sans-serif, serif",
-}
-const headingStyles = {
-  marginTop: 0,
-  marginBottom: 64,
-  maxWidth: 320,
-}
-const headingAccentStyles = {
-  color: "#663399",
-}
-const paragraphStyles = {
-  marginBottom: 48,
-}
-const codeStyles = {
-  color: "#8A6534",
-  padding: 4,
-  backgroundColor: "#FFF4DB",
-  fontSize: "1.25rem",
-  borderRadius: 4,
-}
-const listStyles = {
-  marginBottom: 96,
-  paddingLeft: 0,
-}
-const listItemStyles = {
-  fontWeight: "300",
-  fontSize: "24px",
-  maxWidth: "560px",
-}
 
-const linkStyle = {
+import Root from './func_group/root';
-  color: "#8954A8",
-  fontWeight: "bold",
-  fontSize: "16px",
-  verticalAlign: "5%",
-}
 
-const docLinkStyle = {
+// if you have problem with watchers - use it:
-  ...linkStyle,
+// echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
-  listStyleType: "none",
-  marginBottom: 24,
-}
 
-const descriptionStyle = {
-  color: "#232129",
-  fontSize: "14px",
-}
-
-const docLink = {
-  text: "Documentation",
-  url: "https://www.gatsbyjs.com/docs/",
-  color: "#8954A8",
-}
-// data
-const links = [
-  {
-    text: "Tutorial",
-    url: "https://www.gatsbyjs.com/docs/tutorial/",
-    description:
-      "A great place to get started if you're new to web development. Designed to guide you through setting up your first Gatsby site.",
-    color: "#E95800",
-  },
-  {
-    text: "How to Guides",
-    url: "https://www.gatsbyjs.com/docs/how-to/",
-    description:
-      "Practical step-by-step guides to help you achieve a specific goal. Most useful when you're trying to get something done.",
-    color: "#1099A8",
-  },
-  {
-    text: "Reference Guides",
-    url: "https://www.gatsbyjs.com/docs/reference/",
-    description:
-      "Nitty-gritty technical descriptions of how Gatsby works. Most useful when you need detailed information about Gatsby's APIs.",
-    color: "#BC027F",
-  },
-  {
-    text: "Conceptual Guides",
-    url: "https://www.gatsbyjs.com/docs/conceptual/",
-    description:
-      "Big-picture explanations of higher-level Gatsby concepts. Most useful for building understanding of a particular topic.",
-    color: "#0D96F2",
-  },
-  {
-    text: "Plugin Library",
-    url: "https://www.gatsbyjs.com/plugins",
-    description:
-      "Add functionality and customize your Gatsby site or app with thousands of plugins built by our amazing developer community.",
-    color: "#000000",
-  },
-]
-
-// markup
 const IndexPage = () => {
-  return (
+  if (typeof window !== `undefined` && store !== 0)
-    <main style={pageStyles}>
+    return (
-      <title>Home Page</title>
+      <Provider store={ store }>
-      <h1 style={headingStyles}>
+        <Root />
-        Congratulations
+      </Provider>
-        <br />
+    )
-        <span style={headingAccentStyles}>— you just made a Gatsby site! </span>
+  else
-        <span role="img" aria-label="Party popper emojis">
+    return (
-          🎉🎉🎉
+      <>
-        </span>
+      </>
-      </h1>
+    )
-      <p style={paragraphStyles}>
-        Edit <code style={codeStyles}>src/pages/index.js</code> to see this page
-        update in real-time.{" "}
-        <span role="img" aria-label="Sunglasses smiley emoji">
-          😎
-        </span>
-      </p>
-      <ul style={listStyles}>
-        <li style={docLinkStyle}>
-          <a
-            style={linkStyle}
-            href={`${docLink.url}?utm_source=starter&utm_medium=start-page&utm_campaign=minimal-starter`}
-          >
-            {docLink.text}
-          </a>
-        </li>
-        {links.map(link => (
-          <li key={link.url} style={{ ...listItemStyles, color: link.color }}>
-            <span>
-              <a
-                style={linkStyle}
-                href={`${link.url}?utm_source=starter&utm_medium=start-page&utm_campaign=minimal-starter`}
-              >
-                {link.text}
-              </a>
-              <p style={descriptionStyle}>{link.description}</p>
-            </span>
-          </li>
-        ))}
-      </ul>
-      <img
-        alt="Gatsby G Logo"
-        src="data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a10 10 0 110 20 10 10 0 010-20zm0 2c-3.73 0-6.86 2.55-7.75 6L14 19.75c3.45-.89 6-4.02 6-7.75h-5.25v1.5h3.45a6.37 6.37 0 01-3.89 4.44L6.06 9.69C7 7.31 9.3 5.63 12 5.63c2.13 0 4 1.04 5.18 2.65l1.23-1.06A7.959 7.959 0 0012 4zm-8 8a8 8 0 008 8c.04 0 .09 0-8-8z' fill='%23639'/%3E%3C/svg%3E"
-      />
-    </main>
-  )
 }
 
-export default IndexPage
+export default IndexPage

src/redux/asyncThunks/abstracts/abstractAddress.js

@@ -0,0 +1,3 @@
+let API = '0.0.0.0:9090'
+export const GeneralAddress = 'http://' + API
+export const GeneralAddressWS = 'ws://' + API + '/render'

src/redux/asyncThunks/abstracts/abstractService.js

@@ -0,0 +1,144 @@
+import axios from 'axios'
+import { GeneralAddress } from './abstractAddress'
+
+const APIAddress = GeneralAddress
+
+let defaultBody = {}
+
+const _getList = async (endpoint, token) => {
+  return await responseAbstract(
+    endpoint,
+    'GET',
+    token,
+    defaultBody
+  )
+}
+
+const _getOne = async (endpoint, objectId, token) => {
+  return await responseAbstract(
+    endpoint + objectId + '/',
+    'GET',
+    token,
+    defaultBody
+  )
+}
+
+const _post = async (endpoint, body, token) => {
+  return await responseAbstract(
+    endpoint,
+    'POST',
+    token,
+    body
+  )
+}
+
+const _patch = async (endpoint, objectId, body, token) => {
+  return await responseAbstract(
+    endpoint + objectId + '/',
+    'PATCH',
+    token,
+    body
+  )
+}
+
+const _put = async (endpoint, objectId, body, token) => {
+  return await responseAbstract(
+    endpoint + objectId + '/',
+    'PUT',
+    token,
+    body
+  )
+}
+
+const _delete = async (endpoint, objectId, token) => {
+  let slash = '/'
+  if ( objectId === '' )
+    slash = ''
+  return await responseAbstract(
+    endpoint + objectId + slash,
+    'DELETE',
+    token,
+    defaultBody
+  )
+}
+
+
+const responseAbstract = async (endpoint, method, token, body) => {
+  let response = await axios(
+    headerBuilder(
+      APIAddress + endpoint,
+      method,
+      token,
+      body,
+    )
+  )
+  return response
+}
+
+const headerBuilder = (url, method, token, body) => {
+    let headers_r = {
+        'authorization': token,
+        'x-csrftoken': getCookie('csrftoken'),
+        'accept': 'application/json',
+        'content-type': 'application/json'
+    }
+    let headers = {
+        url: url,
+        method: method,
+        headers: headers_r,
+        credentials: 'same-origin'
+    }
+    if (method === 'PUT' || method === 'POST' || method === 'PATCH') {
+        headers = Object.assign({}, headers, {
+            data: JSON.stringify(body)
+        })
+    }
+    return headers
+}
+
+/**
+ * get cookie method for CSRF verification
+ * @param {string} name - name of handled cookie
+ */
+const getCookie = (name) => {
+    if (!document.cookie) {
+        return null;
+    }
+    const token = document.cookie.split(';')
+        .map(c => c.trim())
+        .filter(c => c.startsWith(name + '='));
+
+    if (token.length === 0) {
+        return null;
+    }
+    return decodeURIComponent(token[0].split('=')[1]);
+}
+
+const axiosFilePost = async ( endpoint, body, token ) => {
+    let formData = new FormData()
+    formData.append('file', body.file)
+    formData.append('user_id', body.user_id)
+    let response = await axios.post( 
+        APIAddress + endpoint,
+        formData,
+        {
+            headers: {
+              'authorization': token,
+              'x-csrftoken': getCookie('csrftoken')
+          }
+        } 
+    )
+    console.log(response)
+    return response
+}
+
+export default {
+  APIAddress,
+  _getList,
+  _getOne,
+  _post,
+  _put,
+  _patch,
+  _delete,
+  axiosFilePost
+}

src/redux/asyncThunks/modelCrudAsyncThunk.js

@@ -0,0 +1,60 @@
+import { createAsyncThunk } from '@reduxjs/toolkit'
+import abstractService from './abstracts/abstractService'
+
+let endpoint = '/model/'
+
+
+const fetchGetAllModels = createAsyncThunk(
+    'model/fetchGetAllModels',
+    async (
+        token,
+        thunkAPI
+    ) => {
+        return await abstractService._getList(endpoint, token)
+    }
+)
+
+/**
+ * @param body:
+ *      param token: base64 token,
+ *      param id: model id
+ */
+const fetchGetOneModelAndDownload = createAsyncThunk(
+    'model/fetchGetOneModelAndDownload',
+    async (
+        body,
+        thunkAPI
+    ) => {
+        return await abstractService._getOne(
+            endpoint, 
+            body.id, 
+            body.token
+        )
+    }
+)
+
+/**
+ * @param body:
+ *      param token: base64 token,
+ *      param file: file binary
+ *      param user_id: user id
+ */
+const fetchUploadModel = createAsyncThunk(
+    'model/fetchUploadModel',
+    async (
+        body,
+        thunkAPI
+    ) => {
+       return await abstractService.axiosFilePost(
+            endpoint,
+            body,
+            body.token
+        )
+    }
+)
+
+export default {
+    fetchGetAllModels,
+    fetchGetOneModelAndDownload,
+    fetchUploadModel
+}

src/redux/asyncThunks/renderCrudAsyncThunk.js

@@ -0,0 +1,39 @@
+import { createAsyncThunk } from '@reduxjs/toolkit'
+import abstractService from './abstracts/abstractService'
+
+let endpoint = '/render/'
+
+
+const fetchGetAllRenders = createAsyncThunk(
+    'render/fetchGetAllRenders',
+    async (
+        token,
+        thunkAPI
+    ) => {
+        return await abstractService._getList(endpoint, token)
+    }
+)
+
+/**
+ * @param body:
+ *      param token: base64 token,
+ *      param id: render id
+ */
+const fetchGetOneRenderAndDownload = createAsyncThunk(
+    'render/fetchGetOneRenderAndDownload',
+    async (
+        body,
+        thunkAPI
+    ) => {
+        return await abstractService._getOne(
+            endpoint, 
+            body.id, 
+            body.token
+        )
+    }
+)
+
+export default {
+    fetchGetAllRenders,
+    fetchGetOneRenderAndDownload
+}

src/redux/asyncThunks/renderWebsocketAsyncThunk.js

@@ -0,0 +1,113 @@
+import { createAsyncThunk } from '@reduxjs/toolkit'
+import GeneralAddress from './abstracts/abstractAddress'
+
+let endpoint_single_image = '/render/single/image/'
+let endpoint_single_set = '/render/single/set/'
+let endpoint_all = '/render/all/'
+
+let endpoint_vector_single_image = '/render/vector/single/image/'
+let endpoint_vector_single_set = '/render/vector/single/set/'
+
+
+const __uuidv4 = () => {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
+        /[xy]/g,
+        (c) => {
+                var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+                return v.toString(16);
+        }
+    )
+}
+
+/**
+ * 
+ * @param {string} endpoint:
+ *      examples:
+ *          'image' - connect to single image ws renderer 
+ *          'set' - connect to single set ws renderer
+ *          'all' - connect to all ws renderer
+ * 
+ *          'vector/image' - connect to vector single image ws renderer
+ *          'vector/set' - connerct to vector single set ws renderer
+ */
+const __make_address = async (endpoint) => {
+    if (endpoint === 'image')
+        endpoint = endpoint_single_image
+    else if (endpoint === 'set')
+        endpoint = endpoint_single_set
+    else if (endpoint === 'all')
+        endpoint = endpoint_all
+    else if (endpoint === 'vector/image')
+        endpoint = endpoint_vector_single_image
+    else if (endpoint === 'vector/set')
+        endpoint = endpoint_vector_single_set
+
+    return GeneralAddress + endpoint
+}
+
+/**
+ *  @param body:
+ *      param token: token
+ *      param endpoint:
+ *          examples:
+ *          'image' - connect to single image ws renderer 
+ *          'set' - connect to single set ws renderer
+ *          'all' - connect to all ws renderer
+ * 
+ *          'vector/image' - connect to vector single image ws renderer
+ *          'vector/set' - connerct to vector single set ws renderer
+ */
+const fetchConnect = createAsyncThunk(
+    'render/async/fetchConnect',
+    async (
+        body,
+        thunkAPI
+    ) => {
+        let uuid = __uuidv4()
+        let address = __make_address(body.endpoint)
+        return {
+            web_socket: new WebSocket(address + uuid),
+            address: address,
+            room_uuid: uuid
+        }
+    }
+)
+
+/**
+ *  @param body:
+ *      param token: token
+ *      param message: message string
+ */
+const fetchSaveMessage = createAsyncThunk(
+    'render/async/fetchSaveMessage',
+    async (
+        body,
+        thunkAPI
+    ) => {
+        return {
+            message: body
+        }
+    }
+)
+
+/**
+ *  @param body:
+ *      param token: token
+ */
+const fetchDisconnect = createAsyncThunk(
+    'render/async/fetchDisconnect',
+    async (
+        token,
+        thunkAPI
+    ) => {
+        return {
+            web_socket: null,
+        }
+    }
+)
+
+export default {
+    fetchConnect,
+    fetchSaveMessage,
+    fetchDisconnect
+}

src/redux/asyncThunks/userAuthAsyncThunk.js

@@ -0,0 +1,46 @@
+import { createAsyncThunk } from '@reduxjs/toolkit'
+import abstractService from './abstracts/abstractService'
+
+let endpoint = '/user/auth'
+
+/**
+ * @param body:
+ *      param username: username string
+ *      param password: password string
+ */
+const fetchLogin = createAsyncThunk(
+    'user/auth/fetchLogin',
+    async (
+        body,
+        thunkAPI
+    ) => {
+        return await abstractService._post(
+            endpoint, 
+            body,
+            ''
+        )
+    }
+)
+
+/**
+ * @param body:
+ *      param token: user token
+ */
+const fetchLogout = createAsyncThunk(
+    'user/auth/fetchLogout',
+    async (
+        token,
+        thunkAPI
+    ) => {
+        return await abstractService._delete(
+            endpoint, 
+            '',
+            token
+        )
+    }
+)
+
+export default {
+    fetchLogin,
+    fetchLogout
+}

src/redux/asyncThunks/userCrudAsyncThunk.js

@@ -0,0 +1,108 @@
+import { createAsyncThunk } from '@reduxjs/toolkit'
+import abstractService from './abstracts/abstractService'
+
+let endpoint = '/user/'
+
+
+const fetchGetAllUsers = createAsyncThunk(
+    'user/fetchGetAllUsers',
+    async (
+        token,
+        thunkAPI
+    ) => {
+        return await abstractService._getList(
+            endpoint, 
+            token
+        )
+    }
+)
+
+/**
+ * @param body:
+ *      param token: token
+ *      param user_id: user_id
+ */
+const fetchGetOneUser = createAsyncThunk(
+    'user/fetchGetAllUsers',
+    async (
+        body,
+        thunkAPI
+    ) => {
+        return await abstractService._getOne(
+            endpoint,
+            body.user_id, 
+            body.token
+        )
+    }
+)
+
+/**
+ * @param body:
+ *      param username: username string
+ *      param password: password string
+ *      param email: email string
+ */
+const fetchRegister = createAsyncThunk(
+    'user/fetchRegister',
+    async (
+        body,
+        thunkAPI
+    ) => {
+        return await abstractService._post(
+            endpoint, 
+            body,
+            ''
+        )
+    }
+)
+
+/**
+ * @param body:
+ *      param token: token
+ *      param user_id: user_id
+ *      param user:
+ *          param username: username
+ *          param password: password
+ *          param email: email
+ */
+const fetchUpdateUser = createAsyncThunk(
+    'user/fetchRegister',
+    async (
+        body,
+        thunkAPI
+    ) => {
+        return await abstractService._patch(
+            endpoint, 
+            body.user_id,
+            body.user,
+            body.token
+        )
+    }
+)
+
+/**
+ * @param body:
+ *      param user_id: user_id
+ *      param token: user token
+ */
+const fetchDeleteUser = createAsyncThunk(
+    'user/fetchRegister',
+    async (
+        body,
+        thunkAPI
+    ) => {
+        return await abstractService._delete(
+            endpoint, 
+            body.user_id,
+            body.token
+        )
+    }
+)
+
+export default {
+    fetchGetAllUsers,
+    fetchGetOneUser,
+    fetchRegister,
+    fetchUpdateUser,
+    fetchDeleteUser
+}

src/redux/slices/modelCrudSlice.js

@@ -0,0 +1,29 @@
+import { createSlice } from '@reduxjs/toolkit'
+import modelCrudAsyncThunk from '../asyncThunks/modelCrudAsyncThunk'
+
+const modelCrudSlice = createSlice(
+    {
+        name: 'model',
+        initialState: {
+            models_list: [],
+            download_blend_file: '',
+            upload_blend_file_status: ''
+        },
+        reducers: {},
+        extraReducers: {
+            [modelCrudAsyncThunk.fetchGetAllModels.fulfilled.type]: (state, action) => {
+                state.models_list = action.payload.data
+            },
+            [modelCrudAsyncThunk.fetchGetOneModelAndDownload.fulfilled.type]: (state, action) => {
+                state.download_blend_file = action.payload.data
+            },
+            [modelCrudAsyncThunk.fetchUploadModel.fulfilled.type]: (state, action) => {
+                state.upload_blend_file_status = action.payload.data
+            }
+        }
+    }
+)
+
+export const modelCrudReducer = modelCrudSlice.reducer
+
+export const modelCrudSelector = state => state.modelCrudReducer

src/redux/slices/renderCrudSlice.js

@@ -0,0 +1,25 @@
+import { createSlice } from '@reduxjs/toolkit'
+import renderCrudAsyncThunk from '../asyncThunks/renderCrudAsyncThunk'
+
+const renderCrudSlice = createSlice(
+    {
+        name: 'render',
+        initialState: {
+            render_list: [],
+            download_zip_file: ''
+        },
+        reducers: {},
+        extraReducers: {
+            [renderCrudAsyncThunk.fetchGetAllRenders.fulfilled.type]: (state, action) => {
+                state.render_list = action.payload.data
+            },
+            [renderCrudAsyncThunk.fetchGetOneRenderAndDownload.fulfilled.type]: (state, action) => {
+                state.download_zip_file = action.payload.data
+            }
+        }
+    }
+)
+
+export const renderCrudReducer = renderCrudSlice.reducer
+
+export const renderCrudSelector = state => state.renderCrudReducer

src/redux/slices/renderWebsocketSlice.js

@@ -0,0 +1,73 @@
+import { createSlice } from '@reduxjs/toolkit'
+import renderWebsocketAsyncThunk from '../asyncThunks/renderWebsocketAsyncThunk'
+
+import { GeneralAddressWS } from '../asyncThunks/abstracts/abstractAddress'
+
+
+const __uuidv4 = () => {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
+        /[xy]/g,
+        (c) => {
+                var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+                return v.toString(16);
+        }
+    )
+}
+
+const initialState = {
+    web_socket_address: '',
+    address: '',
+    room_uuid: '',
+    messages: [],
+    percents: 0.0,
+    connected: false
+}
+
+const renderWebsocketSlice = createSlice(
+    {
+        name: 'render/async',
+        initialState,
+        reducers: {
+            connect(state, action) {
+                state.room_uuid = __uuidv4()
+                state.address = GeneralAddressWS + action.payload.address 
+                state.web_socket_address = state.address + state.room_uuid
+                state.messages = []
+                state.percents = 0.0
+                state.connected = true
+            },
+            saveMessage(state, action) {
+                state.messages = [
+                    ...state.messages,
+                    action.payload.message
+                ]
+                if (
+                    (
+                        !isNaN(action.payload.message.info) 
+                        && action.payload.message.info.toString().indexOf('.') != -1
+                    ) || action.payload.message.info === 'render success'
+                ) {
+                    state.percents = action.payload.message.info
+                }
+            },
+            resetMessages(state) {
+                state.messages = []
+                state.percents = ''
+            },
+            disconnect(state) {
+                state.web_socket_address = ''
+                state.address = ''
+                state.room_uuid = ''
+                state.messages = []
+                state.connected = false
+            }
+        },
+        extraReducers: {}
+    }
+)
+
+export const renderWebsocketReducer = renderWebsocketSlice.reducer
+
+export const { connect, saveMessage, disconnect } = renderWebsocketSlice.actions
+
+export const renderWebsocketSelector = state => state.renderWebsocketReducer

src/redux/slices/userAuthSlice.js

@@ -0,0 +1,52 @@
+import { createSlice } from '@reduxjs/toolkit'
+import userAuthAsyncThunk from '../asyncThunks/userAuthAsyncThunk'
+
+const userAuthSlice = createSlice(
+    {
+        name: 'user/auth',
+        initialState: {
+            token: '',
+            user: {
+                id: 0,
+                username: '',
+                email: ''
+            },
+            info: ''
+        },
+        reducers: {
+            deleteUser(state) {
+                state.token = ''
+                state.user.id = 0
+                state.user.username = ''
+                state.user.email = ''
+                state.info = 'user has been deleted'
+            }
+        },
+        extraReducers: {
+            [userAuthAsyncThunk.fetchLogin.fulfilled.type]: (state, action) => {
+                try {
+                    state.token = action.payload.data.Authorization
+                    state.user.id = action.payload.data.user.id
+                    state.user.username = action.payload.data.user.username
+                    state.user.email = action.payload.data.user.email
+                    state.info = 'login success'
+                } catch {
+                    state.info = 'login failed'
+                }
+            },
+            [userAuthAsyncThunk.fetchLogout.fulfilled.type]: (state, action) => {
+                state.token = ''
+                state.user.id = 0
+                state.user.username = ''
+                state.user.email = ''
+                state.info = action.payload.data.info
+            }
+        }
+    }
+)
+
+export const userAuthReducer = userAuthSlice.reducer
+
+export const { deleteUser } = userAuthSlice.actions
+
+export const userAuthSelector = state => state.userAuthReducer

src/redux/slices/userCrudSlice.js

@@ -0,0 +1,47 @@
+import { createSlice } from '@reduxjs/toolkit'
+import userCrudAsyncThunk from '../asyncThunks/userCrudAsyncThunk'
+
+const userCrudSlice = createSlice(
+    {
+        name: 'user',
+        initialState: {
+            users_list: [],
+            user_get: {},
+            user_register: {
+                id: -1,
+                username: '',
+                email: ''
+            },
+            user_update: {},
+            user_delete: '',
+            info: ''
+        },
+        reducers: {},
+        extraReducers: {
+            [userCrudAsyncThunk.fetchGetAllUsers.fulfilled.type]: (state, action) => {
+                state.users_list = action.payload.data
+            },
+            [userCrudAsyncThunk.fetchGetOneUser.fulfilled.type]: (state, action) => {
+                state.user_get = action.payload.data
+            },
+            [userCrudAsyncThunk.fetchRegister.fulfilled.type]: (state, action) => {
+                state.user_register = action.payload.data
+                state.info = 'register success'
+            },
+            [userCrudAsyncThunk.fetchUpdateUser.fulfilled.type]: (state, action) => {
+                state.user_update = action.payload.data
+            },
+            [userCrudAsyncThunk.fetchDeleteUser.fulfilled.type]: (state) => {
+                state.users_list = []
+                state.user_get = {}
+                state.user_register = {}
+                state.user_update = {}
+                state.user_delete = 'true'
+            }
+        }
+    }
+)
+
+export const userCrudReducer = userCrudSlice.reducer
+
+export const userCrudSelector = state => state.userCrudReducer

src/redux/stateLoader.js

@@ -0,0 +1,36 @@
+export const loadState = () => {
+    if ( typeof window !== 'undefined' ) {
+        try {
+            const serializedState = localStorage.getItem('state')
+
+            if (serializedState === undefined || serializedState === null) {
+                return {}
+            } else {
+                return JSON.parse(serializedState)
+            }
+
+
+        } catch (err) {
+            console.log(err)
+            return undefined
+        }
+    }
+};
+
+export const saveState = (state) => {
+    if ( typeof window !== 'undefined' ) {
+        try {
+
+            const serializedState = JSON.stringify(state)
+
+            if (serializedState === null) {
+                return undefined
+            } else {
+                localStorage.setItem('state', serializedState)
+
+            }
+        } catch (err) {
+            console.log('save in local storage error')
+        }
+    }
+};

src/redux/store.js

@@ -0,0 +1,37 @@
+import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
+
+import { loadState, saveState } from './stateLoader'
+import lodash from 'lodash'
+
+import { modelCrudReducer } from './slices/modelCrudSlice'
+import { renderCrudReducer } from './slices/renderCrudSlice'
+import { renderWebsocketReducer } from './slices/renderWebsocketSlice'
+import { userAuthReducer } from './slices/userAuthSlice'
+import { userCrudReducer } from './slices/userCrudSlice'
+
+
+let persistedState = loadState()
+
+export const store = configureStore({
+    reducer: {
+        modelCrudReducer,
+        renderCrudReducer,
+        renderWebsocketReducer,
+        userAuthReducer,
+        userCrudReducer
+    },
+    preloadedState: persistedState,
+    middleware: getDefaultMiddleware (
+        { 
+            serializableCheck: false, 
+        }
+    ),
+})
+
+store.subscribe(() => {
+    saveState(store.getState());
+});
+
+store.subscribe(lodash.throttle(() => {
+    saveState(store.getState())
+}, 100))

src/styles/general.scss

@@ -0,0 +1,320 @@
+
+body {
+    margin: 0 auto;
+    overflow: hidden;
+    background: 
+        linear-gradient(
+            10deg, 
+            black 0%, 
+            #0a670a 40%, 
+            #097309 50%, 
+            #0a670a 60%, 
+            black 100%
+        );
+    width: 100%;
+    height: 100%;
+
+    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(22,28,29,0.5);
+    }
+
+    .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 {
+    position: fixed;
+    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;
+        position: absolute;
+        margin-top: 0px;
+    }
+
+}
+
+.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;
+    }
+
+    select {
+        width: 100%;
+        height: 50px;
+        margin-top: 15px;
+        margin-bottom: 15px;
+        background-color: rgba(22,28,29,1);
+        color: rgba(0,128,0,1);
+        border: 2px solid;
+        border-radius: 10px;
+    }
+
+}
+
+.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;
+        color: rgba(22,28,29,1);
+    }
+
+    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;
+        color: rgba(22,28,29,1);
+    }
+
+    .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;
+    }
+}