From 38def5f5034af37fed9cbac95341e164d7a877b8 Mon Sep 17 00:00:00 2001 From: TBS093A Date: Thu, 18 Feb 2021 23:21:59 +0100 Subject: [PATCH] React / Froms / Websocket -> fixes & upgrades --- src/components/forms/formGenerator.js | 116 ++++++++++- .../model_crud/modelShowModelsAndDownload.js | 2 +- .../renderShowReadyRendersAndDownload.js | 2 +- .../render_websocket/renderSingleImage.js | 185 ++++++++++++++++++ src/pages/func_group/render/renderIndex.js | 10 +- src/redux/asyncThunks/modelCrudAsyncThunk.js | 7 +- .../asyncThunks/renderWebsocketAsyncThunk.js | 2 +- 7 files changed, 312 insertions(+), 12 deletions(-) diff --git a/src/components/forms/formGenerator.js b/src/components/forms/formGenerator.js index 86b00d7..b889a6f 100644 --- a/src/components/forms/formGenerator.js +++ b/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 ( ) + } else if (input.type === 'choice-listing') { + return ( + + ) + } else if (input.type === 'range') { + return ( + + ) } }) } @@ -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 ( +
+ {input.name + ':'} + { + input.values.map( (item) => { + return ( +
__handleRef( item ) } + > + { item } +
+ ) + } + ) + } +
+ ) +} + /** * 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 ( +
+
+ {input.name + ': ' + value + ' ' + input.unit } +
+ setValue( event.target.value ) } + /> +
+ ) +} export default FormGenerator \ No newline at end of file diff --git a/src/components/forms/model_crud/modelShowModelsAndDownload.js b/src/components/forms/model_crud/modelShowModelsAndDownload.js index a0fc798..7d84a01 100644 --- a/src/components/forms/model_crud/modelShowModelsAndDownload.js +++ b/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/', diff --git a/src/components/forms/render_crud/renderShowReadyRendersAndDownload.js b/src/components/forms/render_crud/renderShowReadyRendersAndDownload.js index 5b003c4..5122fcb 100644 --- a/src/components/forms/render_crud/renderShowReadyRendersAndDownload.js +++ b/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/', diff --git a/src/components/forms/render_websocket/renderSingleImage.js b/src/components/forms/render_websocket/renderSingleImage.js index e69de29..6cd894d 100644 --- a/src/components/forms/render_websocket/renderSingleImage.js +++ b/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 ( + <> + + { + messages.map( (item) => { + return ( + <> +
+ { item.info } +
+
+ { item.details } +
+
+ { item.group } +
+ + ) + } + ) + } + + ) +} + +export default RenderSingleImageForm \ No newline at end of file diff --git a/src/pages/func_group/render/renderIndex.js b/src/pages/func_group/render/renderIndex.js index 899c8bc..989e616 100644 --- a/src/pages/func_group/render/renderIndex.js +++ b/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 ) => {
+
+ +
) } diff --git a/src/redux/asyncThunks/modelCrudAsyncThunk.js b/src/redux/asyncThunks/modelCrudAsyncThunk.js index 1dab313..9d4a1cd 100644 --- a/src/redux/asyncThunks/modelCrudAsyncThunk.js +++ b/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 - // ) } ) diff --git a/src/redux/asyncThunks/renderWebsocketAsyncThunk.js b/src/redux/asyncThunks/renderWebsocketAsyncThunk.js index 32c6bdb..3b08581 100644 --- a/src/redux/asyncThunks/renderWebsocketAsyncThunk.js +++ b/src/redux/asyncThunks/renderWebsocketAsyncThunk.js @@ -85,7 +85,7 @@ const fetchSaveMessage = createAsyncThunk( thunkAPI ) => { return { - message: body.message + message: body } } )