tbs093a
/
render.app.frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

React -> upgrade forms & fixes

feature/2_forms
TBS093A 2021-02-18 19:12:32 +01:00
parent 4e4b5fee3f
commit 0026e41481
11 changed files with 207 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/forms/formGenerator.js
View File

@ -14,7 +14,9 @@ export const FormGenerator = ({
const handler = async (event) => {
event.preventDefault()
if ( inputList[0].action === 'Download' ) {
if ( inputList[0].action === 'Download'
|| inputList[0].action === 'Upload'
) {
await action()
} else {
for (let i = 0; i < refList.length; i++) {
@ -215,7 +217,8 @@ const UploadInputGenerator = ({
const onLoadFile = async (event) => {
event.preventDefault()
let data = event.target.files[0]
input.setFile(await toBase64(data))
// input.setFile(await toBase64(data))
input.setFile( data )
setDropInfos(data.name, data.size)
}
@ -223,11 +226,12 @@ const UploadInputGenerator = ({
event.preventDefault()
event.persist()
let data = event.dataTransfer.files[0]
input.setFile(await toBase64(data))
// input.setFile(await toBase64(data))
input.setFile( data )
setDropInfos(data.name, data.size)
}
const toBase64 = (file) => new Promise((resolve, reject) => {
const toBase64 = async (file) => new Promise((resolve, reject) => {
let fileReader = new FileReader()
fileReader.readAsDataURL(file)
fileReader.onload = () => resolve(fileReader.result)

52
src/components/forms/model_crud/modelUpload.js
View File

@ -1,8 +1,58 @@
import React from 'react'
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 (
<>
<FormGenerator
inputList={ inputList }
refList={ [] }
action={ handleModelUpload }
/>
</>
)
}

65
src/components/forms/render_crud/renderShowReadyRendersAndDownload.js
View File

@ -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: 'drop-box',
name: 'Renders',
values: render_list,
link: GeneralAddress + '/render/',
}
]
const handleRefresh = () => {
dispatch( renderCrudAsyncThunk.fetchGetAllRenders( token ) )
}
return (
<>
<FormGenerator
inputList={ inputList }
refList={ [] }
action={ handleRefresh }
/>
</>
)
}
export default RenderShowAndDownloadForm

30
src/pages/func_group/navigationBar.js
View File

@ -10,17 +10,17 @@ import userAuthAsyncThunk from '../../redux/asyncThunks/userAuthAsyncThunk'
const __setShowGeneral = ( view, key, movements ) => {
movements.user_view.userCrudView = {
let user_default = {
update_user: false,
delete_user: false
}
movements.model_view.modelCrudView = {
let model_default = {
show_models_and_dwonload: false,
upload_model: false
}
movements.render_view.renderView = {
let render_default = {
show_ready_renders_and_download: false,
render_functionality: {
render_single_image: false,
@ -37,6 +37,12 @@ const __setShowGeneral = ( view, key, movements ) => {
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 = movements.model_view.modelCrudView
@ -44,19 +50,31 @@ const __setShowGeneral = ( view, key, movements ) => {
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 = movements.render_view.renderView
if ( key in new_move ) {
new_move[key] = true
movements.model_view.setModelCrudView(
movements.render_view.setRenderView(
new_move
)
} else {
new_move['render_functionality'][key] = true
movements.model_view.setModelCrudView(
movements.render_view.setRenderView(
new_move
)
}
movements.model_view.setModelCrudView(
model_default
)
movements.user_view.setUserCrudView(
user_default
)
}
}
@ -82,7 +100,7 @@ const NavigationBar = ({ movements }) => {
const dispatch = useDispatch()
useEffect( () => {
if ( user_get === {} && token !== '' && user.id > 0)
if ( Object.keys(user_get).length === 0 && token !== '' && user.id > 0)
dispatch(
userCrudAsyncThunk.fetchGetOneUser(
{

42
src/pages/func_group/render/renderIndex.js 100644
View File

@ -0,0 +1,42 @@
import React, { useState, useEffect } from 'react'
import RenderShowAndDownloadForm from '../../../components/forms/render_crud/renderShowReadyRendersAndDownload'
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 if (Object.keys(movement['movement']['render_functionality']).includes(name)) {
if (movement['movement'][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>
)
}
export default RenderIndex

11
src/pages/func_group/render_crud/renderCrudIndex.js
View File

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

7
src/pages/func_group/root.js
View File

@ -2,13 +2,6 @@ import React, { useState, useEffect } from 'react'
import VerifyUserSession from './rootUtils'
import UserAuthIndex from './user_auth/userAuthIndex'
import UserCrudIndex from './user_crud/userCrudIndex'
import ModelCrudIndex from './model_crud/modelCrudIndex'
import RenderCrudIndex from './render_crud/renderCrudIndex'
import RenderWebsocketIndex from './render_websocket/renderWebsocketIndex'
const Root = () => {
return (

9
src/pages/func_group/rootUtils.js
View File

@ -6,8 +6,7 @@ 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 RenderCrudIndex from './render_crud/renderCrudIndex'
import RenderWebsocketIndex from './render_websocket/renderWebsocketIndex'
import RenderIndex from './render/renderIndex'
import NavigationBar from './navigationBar'
@ -65,12 +64,12 @@ const GeneralView = () => {
<ModelCrudIndex
movement={ movements.model_view.modelCrudView }
/>
<RenderCrudIndex
<RenderIndex
movement={ movements.render_view.renderView }
/>
<RenderWebsocketIndex
{/* <RenderWebsocketIndex
movement={ movements.render_view.renderView }
/>
/> */}
</>
)
}

17
src/redux/asyncThunks/abstracts/abstractService.js
View File

@ -72,6 +72,7 @@ const responseAbstract = async (endpoint, method, token, body) => {
body,
)
)
console.log(response)
return response
}
@ -86,8 +87,8 @@ const headerBuilder = (url, method, token, body) => {
headers_r = {
'authorization': token,
'x-csrftoken': getCookie('csrftoken'),
'accept': 'multipart/form-data',
'content-type': 'multipart/form-data',
// 'accept': 'multipart/form-data',
// 'content-type': 'multipart/form-data'
}
}
let headers = {
@ -97,9 +98,15 @@ const headerBuilder = (url, method, token, body) => {
credentials: 'same-origin'
}
if (method === 'PUT' || method === 'POST' || method === 'PATCH') {
headers = Object.assign({}, headers, {
data: JSON.stringify(body),
})
if ('file' in body) {
headers = Object.assign({}, headers, {
data: body,
})
} else {
headers = Object.assign({}, headers, {
data: JSON.stringify(body),
})
}
}
return headers
}

3
src/redux/asyncThunks/modelCrudAsyncThunk.js
View File

@ -45,9 +45,6 @@ const fetchUploadModel = createAsyncThunk(
body,
thunkAPI
) => {
let formData = FormData()
formData.append("blend", body.file)
body.file = formData
return await abstractService._post(
endpoint,
body,

2
src/redux/slices/renderCrudSlice.js
View File

@ -11,7 +11,7 @@ const renderCrudSlice = createSlice(
reducers: {},
extraReducers: {
[renderCrudAsyncThunk.fetchGetAllRenders.fulfilled.type]: (state, action) => {
state.render_list = action.payload.data.render_list
state.render_list = action.payload.data
},
[renderCrudAsyncThunk.fetchGetOneRenderAndDownload.fulfilled.type]: (state, action) => {
state.download_zip_file = action.payload.data