React / Froms / Websocket -> fixes & upgrades

src/components/forms/formGenerator.js

@@ -14,7 +14,10 @@ export const FormGenerator = ({
     const handler = async (event) => {
         event.preventDefault()
 
-        if ( inputList[0].action === 'Download'
+        if ( inputList[0].action === 'Async' ) {
+            await action(refList)
+        } else if ( 
+             inputList[0].action === 'Download'
              || inputList[0].action === 'Upload'
         ) {
             await action()
@@ -58,7 +61,7 @@ export const FormGenerator = ({
                                 key={key}
                             />
                         )
-                    } else if (input.type === 'drop-box') {
+                    } else if (input.type === 'links-listing') {
                         return (
                             <DownloadFilesListInputGenerator 
                                 input={input}
@@ -74,6 +77,22 @@ export const FormGenerator = ({
                                 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}
+                            />
+                        )
                     }
                 })
             }
@@ -198,6 +217,54 @@ const DownloadFilesListInputGenerator = ({
     )
 }
 
+/**
+ * Text input generator, example:
+ * @param {
+ * {    
+ *  type: 'drop-box',   
+ *  name: 'name',
+ *  values: [ 'string' ],
+ *  ref: React.createRef()
+ * }    } input - basic text input 
+ * @param {
+ * {
+ *  type: 'info',
+ *  action: 'Update'
+ *  endpoint: 'Album'
+ * }    } info - information about form
+ */
+const ChoiceListingGenerator = ({
+    input, info
+}) => {
+
+    const __handleRef = ( item ) => {
+        input.ref.current = {
+            value: item
+        }
+    }
+
+    return (
+        <div
+            id={input.name + info.action + info.endpoint + 'DropBox'}
+        >
+            {input.name + ':'}
+            {
+                input.values.map( (item) => {
+                        return (
+                            <div
+                                key={ item }
+                                onClick={ () => __handleRef( item ) }
+                            >
+                                    { item }
+                            </div>
+                        )
+                    }
+                )
+            }
+        </div>
+    )
+}
+
 /**
  * Upload file input generator, example:
  * @param {
@@ -266,6 +333,51 @@ const UploadInputGenerator = ({
     )
 }
 
+/**
+ * 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: '300px' } }
+                id={name}
+                name={name}
+                min={input.min}
+                max={input.max}
+                step={input.step}
+                ref={input.ref}
+                type='range'
+                onChange={ event => setValue( event.target.value ) }
+            />
+        </div>
+    )
+}
 
 export default FormGenerator

src/components/forms/model_crud/modelShowModelsAndDownload.js

@@ -39,7 +39,7 @@ const ModelShowAndDownloadForm = () => {
             button_value: 'Refresh Models List'
         },
         {
-            type: 'drop-box',
+            type: 'links-listing',
             name: 'Models',
             values: models_list,
             link: GeneralAddress + '/model/',

src/components/forms/render_crud/renderShowReadyRendersAndDownload.js

@@ -39,7 +39,7 @@ const RenderShowAndDownloadForm = () => {
             button_value: 'Refresh Renders List'
         },
         {
-            type: 'drop-box',
+            type: 'links-listing',
             name: 'Renders',
             values: render_list,
             link: GeneralAddress + '/render/',

src/components/forms/render_websocket/renderSingleImage.js

@@ -0,0 +1,185 @@
+import React, { useState, useEffect } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+
+import { userAuthSelector } from '../../../redux/slices/userAuthSlice'
+import { modelCrudSelector } from '../../../redux/slices/modelCrudSlice'
+import { renderWebsocketSelector } from '../../../redux/slices/renderWebsocketSlice'
+import renderWebsocketAsyncThunk from '../../../redux/asyncThunks/renderWebsocketAsyncThunk'
+import modelCrudAsyncThunk from '../../../redux/asyncThunks/modelCrudAsyncThunk'
+
+import FormGenerator from '../formGenerator'
+
+
+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 { 
+        web_socket,
+        address,
+        room_uuid,
+        messages,
+        connected
+    } = useSelector( renderWebsocketSelector )
+
+    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: 'chice-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
+        },
+    ]
+
+    const handleSendMessage = ( refs ) => {
+
+        let rotate_conv = refs[2].current.value / 62  // on backend 0.1 - 6.2 value
+
+        let body = {
+            // fileName: refs[0].current.value,
+            fileName: 'testHand.blend',
+            setID: refs[1].current.value,
+            rotate: rotate_conv,
+            nameSeries: 0,  // index render picture in set (useless on the front & disable)
+            cameraID: refs[3].current.value,
+            resolutionX: refs[4].current.value,
+            resolutionY: refs[5].current.value
+        }
+        console.log( body )
+        web_socket.send(
+            JSON.stringify(
+                body
+            )
+        )
+    }
+
+    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
+                }
+            }
+
+            if ( web_socket === null && address === '' && room_uuid === '') {
+                dispatch( renderWebsocketAsyncThunk.fetchConnect( 'image' ) )
+            }
+
+            if ( address !== '' ) {
+                web_socket.onmessage = (event) => {
+                    dispatch( 
+                        renderWebsocketAsyncThunk.fetchSaveMessage(
+                            JSON.parse( event.data )
+                        ) 
+                    )
+                }
+            }
+        
+        }
+    )
+
+    return (
+        <>
+            <FormGenerator 
+                inputList={ inputList }
+                refList={ refList }
+                action={ handleSendMessage }
+            />
+            {
+                messages.map( (item) => {
+                        return (
+                            <>
+                                <div>
+                                    { item.info }
+                                </div>
+                                <div>
+                                    { item.details }
+                                </div>
+                                <div>
+                                    { item.group }
+                                </div>
+                            </>
+                        )
+                    }
+                )
+            }
+        </>
+    )
+}
+
+export default RenderSingleImageForm

src/pages/func_group/render/renderIndex.js

@@ -2,6 +2,9 @@ import React, { useState, useEffect } from 'react'
 
 import RenderShowAndDownloadForm from '../../../components/forms/render_crud/renderShowReadyRendersAndDownload'
 
+import RenderSingleImageForm from '../../../components/forms/render_websocket/renderSingleImage'
+
+
 const __handleSwap = (name, movement) => {
     
     let display = {
@@ -12,13 +15,15 @@ const __handleSwap = (name, movement) => {
         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'][name])
+        if (movement['movement']['render_functionality'][name])
             return display
         else
             return hide
@@ -35,6 +40,9 @@ const RenderIndex = ( movement ) => {
             <div style={ __handleSwap( 'show_ready_renders_and_download', movement ) }>
                 <RenderShowAndDownloadForm />
             </div>
+            <div style={ __handleSwap( 'render_single_image', movement ) }>
+                <RenderSingleImageForm />
+            </div>
         </div>
     )
 }

src/redux/asyncThunks/modelCrudAsyncThunk.js

@@ -36,7 +36,7 @@ const fetchGetOneModelAndDownload = createAsyncThunk(
 /**
  * @param body:
  *      param token: base64 token,
- *      param file: document.querySelector('#file').files[0]
+ *      param file: file binary
  *      param user_id: user id
  */
 const fetchUploadModel = createAsyncThunk(
@@ -50,11 +50,6 @@ const fetchUploadModel = createAsyncThunk(
             body,
             body.token
         )
-        // return await abstractService._post(
-        //     endpoint, 
-        //     body,
-        //     body.token
-        // )
     }
 )
 

src/redux/asyncThunks/renderWebsocketAsyncThunk.js

@@ -85,7 +85,7 @@ const fetchSaveMessage = createAsyncThunk(
         thunkAPI
     ) => {
         return {
-            message: body.message
+            message: body
         }
     }
 )