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

React -> upgrade forms & init next views

feature/2_forms
TBS093A 2021-02-18 13:55:08 +01:00
parent ba4489f0ed
commit 36a2598129
9 changed files with 216 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import React from 'react'
import React, { useState } from 'react'
/**
*
@ -13,15 +13,20 @@ export const FormGenerator = ({
const handler = async (event) => {
event.preventDefault()
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)
if ( inputList[0].action === 'Download' ) {
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)
}
}
}
}
@ -51,6 +56,14 @@ export const FormGenerator = ({
key={key}
/>
)
} else if (input.type === 'drop-box') {
return (
<DownloadFilesListInputGenerator
input={input}
info={info}
key={key}
/>
)
} else if (input.type === 'file') {
return (
<UploadInputGenerator
@ -62,9 +75,16 @@ export const FormGenerator = ({
}
})
}
<button type='submit'>
{ info.button_value }
</button>
{
info.button_value === ''
? <></>
: <button
type='submit'
>
{ info.button_value }
</button>
}
</form>
)
}
@ -130,6 +150,52 @@ const PasswordInputGenerator = ({
)
}
/**
* 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.map( (item, index) => {
return (
<div
key={ item }
>
<a
href={ input.link + index + '/' }
>
{ item }
</a>
</div>
)
}
)
}
</div>
)
}
/**
* Upload file input generator, example:
* @param {
@ -196,4 +262,6 @@ const UploadInputGenerator = ({
)
}
export default FormGenerator

65
src/components/forms/model_crud/modelShowModelsAndDownload.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 { 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: 'drop-box',
name: 'Models',
values: models_list,
link: GeneralAddress + '/model/',
}
]
const handleRefresh = () => {
dispatch( modelCrudAsyncThunk.fetchGetAllModels(token) )
}
return (
<>
<FormGenerator
inputList={ inputList }
refList={ [] }
action={ handleRefresh }
/>
</>
)
}
export default ModelShowAndDownloadForm

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

@ -0,0 +1,10 @@
import React from 'react'
const ModelUploadForm = () => {
return (
<>
</>
)
}
export default ModelUploadForm

37
src/pages/func_group/model_crud/modelCrudIndex.js
View File

@ -1,10 +1,41 @@
import React, { useState, useEffect } from 'react'
const ModelCrudIndex = () => {
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>
<>
<div style={ __handleSwap( 'show_models_and_download', movement ) }>
<ModelShowAndDownloadForm />
</div>
<div style={ __handleSwap( 'upload_model', movement ) }>
<ModelUpload />
</div>
</>
)
}

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

@ -10,32 +10,26 @@ import userAuthAsyncThunk from '../../redux/asyncThunks/userAuthAsyncThunk'
const __setShowGeneral = ( view, key, movements ) => {
movements.user_view.setUserCrudView(
{
update_user: false,
delete_user: false
}
)
movements.user_view.userCrudView = {
update_user: false,
delete_user: false
}
movements.model_view.setModelCrudView(
{
show_models_and_dwonload: false,
upload_model: false
}
)
movements.model_view.modelCrudView = {
show_models_and_dwonload: false,
upload_model: false
}
movements.render_view.setRenderView(
{
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
}
movements.render_view.renderView = {
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 = movements.user_view.userCrudView
@ -44,6 +38,7 @@ const __setShowGeneral = ( view, key, movements ) => {
new_move
)
} else if (view === 'model_view') {
let new_move = movements.model_view.modelCrudView
new_move[key] = true
movements.model_view.setModelCrudView(
@ -144,7 +139,7 @@ const NavigationBar = ({ movements }) => {
├── Models
</div>
<div style={ __styleChanger( showModels ) }>
<div onClick={ () => __setShowGeneral( 'model_view', 'show_models_and_dwonload', movements )}>
<div onClick={ () => __setShowGeneral( 'model_view', 'show_models_and_download', movements )}>
│ ├── Show Models & Download
</div>
<div onClick={ () => __setShowGeneral( 'model_view', 'upload_model', movements ) }>

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

@ -22,7 +22,7 @@ const GeneralView = () => {
)
const [modelCrudView, setModelCrudView] = useState(
{
show_models_and_dwonload: false,
show_models_and_download: false,
upload_model: false
}
)
@ -60,16 +60,16 @@ const GeneralView = () => {
movements={ movements }
/>
<UserCrudIndex
movements={ movements }
movement={ movements.user_view.userCrudView }
/>
<ModelCrudIndex
movements={ movements }
movement={ movements.model_view.modelCrudView }
/>
<RenderCrudIndex
movements={ movements }
movement={ movements.render_view.renderView }
/>
<RenderWebsocketIndex
movements={ movements }
movement={ movements.render_view.renderView }
/>
</>
)

2
src/redux/asyncThunks/abstracts/abstractAddress.js
View File

@ -1 +1 @@
export const GeneralAddress = 'localhost:9090'
export const GeneralAddress = 'http://localhost:9090'

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

@ -1,7 +1,7 @@
import axios from 'axios'
import { GeneralAddress } from './abstractAddress'
const APIAddress = 'http://' + GeneralAddress
const APIAddress = GeneralAddress
let defaultBody = {}

1
src/redux/slices/modelCrudSlice.js
View File

@ -8,7 +8,6 @@ const modelCrudSlice = createSlice(
models_list: [],
download_blend_file: '',
upload_blend_file_status: ''
},
reducers: {},
extraReducers: {