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

React -> add all styles && upgrade

feature/2_forms
TBS093A 2021-02-20 23:03:00 +01:00
parent d5abcd0dbe
commit 28f755a0a2
17 changed files with 1014 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/forms/abstractWebsocket.js
View File

@ -15,21 +15,31 @@ const ProgressBar = () => {
} = useSelector( renderWebsocketSelector )
return (
<div style={ { width: '300px', height: '20px' } }>
<div style={ { width: '100%', height: '100%', marginBottom: '-20px', textAlign: 'center' } }>
<div className="progress_bar_form">
<div>
{
typeof percents === 'number'
? 'Progress: ' + percents + '%'
: percents
: percents === 'render_success' || percents === 'Ready to work. Get params'
? percents
: ''
}
</div>
<div style={ { width: '100%', height: '100%', backgroundColor: 'white' } }>
<div>
{
typeof percents === 'number'
? <div style={ { width: percents + '%', height: '100%', backgroundColor: 'green' } }>
? <div
className='progerss_bar_progress'
style={ { width: percents + '%', height: '100%' } }
>
</div>
: <div style={ { width: '100%', height: '100%', backgroundColor: 'green' } }>
: percents === 'render success'
? <div
className='progerss_bar_progress'
style={ { width: '100%', height: '100%' } }
>
</div>
: <></>
}
</div>
</div>
@ -160,11 +170,26 @@ const AbstractWebsocket = ({ addressWS, inputList, refList, bodyComparer }) => {
return (
<>
<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
@ -177,9 +202,17 @@ const AbstractWebsocket = ({ addressWS, inputList, refList, bodyComparer }) => {
Connect
</button>
}
<div>
</div>
<div
className="float_form_console"
style={ connected ? { marginTop: '25%', height: '200px' } : { marginTop: '15%', height: '10px' } }
>
<p>
console:
</p>
<div className="console_data">
{
messages.map( (item) => {
messages.slice(0).reverse().map( (item) => {
return (
<div>
<>
@ -225,6 +258,7 @@ const AbstractWebsocket = ({ addressWS, inputList, refList, bodyComparer }) => {
)
}
</div>
</div>
</>
)
}

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

@ -39,7 +39,7 @@ export const FormGenerator = ({
let info
return (
<form onSubmit={event => handler(event)}>
<form onSubmit={event => handler(event)} className="form">
{
inputList.map((input, key) => {
@ -137,8 +137,10 @@ const TextInputGenerator = ({
input, info
}) => {
return (
<div>
<div className="input_generate">
<div className="input_labels">
{input.name + ':'}
</div>
<input
id={input.name + info.action + info.endpoint + 'Input'}
autoComplete='off'
@ -167,8 +169,10 @@ const PasswordInputGenerator = ({
input, info
}) => {
return (
<div>
<div className="input_generate">
<div className="input_labels">
{input.name + ':'}
</div>
<input
id={input.name + info.action + info.endpoint + 'Input'}
autoComplete='off'
@ -325,13 +329,13 @@ const UploadInputGenerator = ({
return (
<div onDrop={event => onLoadFileDrop(event)} >
<pre style={{ marginTop: '25px', marginLeft: '40px' }}>
<pre style={{ marginLeft: '40px' }}>
{input.dropInfo}
</pre>
<input
style={{ marginTop: '-55px' }}
id={input.name + info.action + info.endpoint + 'Input'}
className='uploadInput'
className='upload_input'
type='file'
accept={input.fileType + '/*'}
autoComplete='off'
@ -374,7 +378,7 @@ const RangeInputGenerator = ({
{input.name + ': ' + value + ' ' + input.unit }
</div>
<input
style={ { width: '300px' } }
style={ { width: '380px' } }
id={name}
name={name}
min={input.min}
@ -407,7 +411,7 @@ const RangeGenerator = ({
const [value, setValue] = useState(0)
return (
<>
<div style={ { display: 'flex' } }>
<div style={ labelStyle }>
{ label + ': ' }
</div>
@ -427,7 +431,7 @@ const RangeGenerator = ({
<div style={ valueStyle }>
{ value + ' ' + unit }
</div>
</>
</div>
)
}
@ -456,24 +460,23 @@ const VectorInputGenerator = ({
input, info
}) => {
const [value, setValue] = useState(0)
return (
<div style={ { display: 'flex', width: '' } }>
<div style={ { width: '300px' } }>
<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: '150px' } }>
<div style={ { display: 'flex', width: '140px' } }>
<RangeGenerator
key={key}
label={key}
labelStyle={ { width: '40px' } }
valueStyle={ { width: '100px' } }
labelStyle={ { width: '5px', marginTop: '15px' } }
valueStyle={ { width: '5px', marginTop: '15px', marginLeft: '5px' } }
style={ { width: '80px' } }
name={name}
unit={ '' }
@ -489,6 +492,7 @@ const VectorInputGenerator = ({
)
}
</div>
</div>
)
}

7
src/components/forms/model_crud/modelShowModelsAndDownload.js
View File

@ -51,13 +51,16 @@ const ModelShowAndDownloadForm = () => {
}
return (
<>
<div
className="float_form_model"
style={ { marginTop: '10%' } }
>
<FormGenerator
inputList={ inputList }
refList={ [] }
action={ handleRefresh }
/>
</>
</div>
)
}

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

@ -47,13 +47,16 @@ const ModelUploadForm = () => {
}
return (
<>
<div
className="float_form_model"
style={ { marginTop: '17%' } }
>
<FormGenerator
inputList={ inputList }
refList={ [] }
action={ handleModelUpload }
/>
</>
</div>
)
}

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

@ -51,13 +51,13 @@ const RenderShowAndDownloadForm = () => {
}
return (
<>
<div className='float_form_render_sync'>
<FormGenerator
inputList={ inputList }
refList={ [] }
action={ handleRefresh }
/>
</>
</div>
)
}

4
src/components/forms/render_websocket/renderVectorImage.js
View File

@ -317,8 +317,8 @@ const RenderVectorSingleImageForm = () => {
},
{
type: 'vector',
name: 'Middle Finger 3',
native: 'Środkowy 3',
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,

444
src/components/forms/render_websocket/renderVectorSet.js
View File

@ -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: 'chice-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,
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 (
<>
<AbstractWebsocket
addressWS={ '/vector/single/set/' }
inputList={ inputList }
refList={ refList }
bodyComparer={ bodyComparer }
/>
</>
)
}
export default RenderVectorSingleSetForm

2
src/components/forms/user_auth/userLogin.js
View File

@ -59,7 +59,9 @@ const UserLoginForm = () => {
refList={ refList }
action={ login }
/>
<div className='form_info'>
{ info }
</div>
</>
)

2
src/components/forms/user_auth/userRegister.js
View File

@ -67,7 +67,9 @@ const UserRegisterForm = () => {
refList={ refList }
action={ register }
/>
<div className='form_info'>
{ info }
</div>
</>
)

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

@ -27,15 +27,16 @@ const __handleSwap = (name, movement) => {
const ModelCrudIndex = ( movement ) => {
return (
<>
<div>
<div style={ __handleSwap( 'show_models_and_download', movement ) }>
<ModelShowAndDownloadForm />
</div>
<div style={ __handleSwap( 'upload_model', movement ) }>
<ModelUpload />
</div>
</>
</div>
)
}

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

@ -32,7 +32,7 @@ const __setShowGeneral = ( view, key, movements ) => {
}
if (view === 'user_view') {
let new_move = movements.user_view.userCrudView
let new_move = user_default
new_move[key] = true
movements.user_view.setUserCrudView(
new_move
@ -45,7 +45,7 @@ const __setShowGeneral = ( view, key, movements ) => {
)
} else if (view === 'model_view') {
let new_move = movements.model_view.modelCrudView
let new_move = model_default
new_move[key] = true
movements.model_view.setModelCrudView(
new_move
@ -57,7 +57,7 @@ const __setShowGeneral = ( view, key, movements ) => {
render_default
)
} else if (view === 'render_view') {
let new_move = movements.render_view.renderView
let new_move = render_default
if ( key in new_move ) {
new_move[key] = true
movements.render_view.setRenderView(
@ -116,6 +116,8 @@ const NavigationBar = ({ movements }) => {
const [showRender, setShowRender] = useState(false)
const [showRenderFunc, setShowRenderFunc] = useState(false)
const [clickHide, setClickHide] = useState(true)
const logout = async () => {
dispatch(
userAuthAsyncThunk.fetchLogout(
@ -125,83 +127,135 @@ const NavigationBar = ({ movements }) => {
}
return(
<>
<div>
<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 ) }>
├── Account Settings
<div
onClick={ () => setShowAccount( !showAccount ) }
className='nav_bar_header'
>
<pre> ├── </pre> <p> Account Settings </p>
</div>
<div style={ __styleChanger( showAccount) }>
<div>
│ ├── User info
<div>
<div>
│ │ ├── Username: { user_get.username }
<div className='nav_bar_option'>
<pre> │ ├── </pre> <p> User info </p>
</div>
<div>
│ │ └── E-mail: { user_get.email }
<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 ) }>
│ ├── Update User
<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 ) }>
│ └── Delete User
<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 ) }>
├── Models
<div
onClick={ () => setShowModels( !showModels ) }
className='nav_bar_header'
>
<pre> ├── </pre><p>Models</p>
</div>
<div style={ __styleChanger( showModels ) }>
<div onClick={ () => __setShowGeneral( 'model_view', 'show_models_and_download', movements )}>
│ ├── Show Models & Download
<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 ) }>
│ └── Upload Model
<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 ) }>
├── Render
<div
onClick={ () => setShowRender( !showRender ) }
className='nav_bar_header'
>
<pre> ├── </pre> <p> Render </p>
</div>
<div style={ __styleChanger( showRender ) }>
<div onClick={ () => __setShowGeneral( 'render_view', 'show_ready_renders_and_download', movements ) }>
│ ├── Show Ready Renders & Download
</div>
<div>
<div onClick={ () => setShowRenderFunc( !showRenderFunc ) }>
│ ├── Render Functionality
<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 ) }>
│ │ ├── Render Single Image
<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 ) }>
│ │ ├── Render Single Set
<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 ) }>
│ │ ├── Render All Sets
<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 ) }>
│ │ ├── Render Image By Vector
<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 ) }>
│ │ └── Render Set By Vector
<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 onClick={ () => logout() }>
└── Sign Out
</div>
<div onClick={ () => logout() } className='nav_bar_header'>
<pre> └── </pre><p> Sign Out</p>
</div>
</div>
</div>
</>
)
}

4
src/pages/func_group/render/renderIndex.js
View File

@ -7,6 +7,7 @@ import RenderSingleSetForm from '../../../components/forms/render_websocket/rend
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) => {
@ -56,6 +57,9 @@ const RenderIndex = ( movement ) => {
<div style={ __handleSwap( 'render_image_by_vector', movement ) }>
<RenderVectorSingleImageForm />
</div>
<div style={ __handleSwap( 'render_set_by_vector', movement ) }>
<RenderVectorSingleSetForm />
</div>
</div>
)
}

5
src/pages/func_group/user_auth/userAuthIndex.js
View File

@ -16,7 +16,10 @@ const UserAuthIndex = () => {
}
return (
<div>
<div
className="float_form_auth"
style={ swapForm ? { height: '200px', marginTop: '15%' } : { height: '290px', marginTop: '13%' } }
>
{ swapForm
? <UserLoginForm />
: <UserRegisterForm />

1
src/pages/index.js
View File

@ -1,5 +1,6 @@
import React from 'react';
// import ReactDOM from 'react-dom';
import '../styles/general.scss'
import { Provider } from 'react-redux';
import { store } from '../redux/store';

14
src/redux/slices/userCrudSlice.js
View File

@ -7,7 +7,11 @@ const userCrudSlice = createSlice(
initialState: {
users_list: [],
user_get: {},
user_register: {},
user_register: {
id: -1,
username: '',
email: ''
},
user_update: {},
user_delete: '',
info: ''
@ -22,11 +26,9 @@ const userCrudSlice = createSlice(
},
[userCrudAsyncThunk.fetchRegister.fulfilled.type]: (state, action) => {
try {
state.user_register = {
id: action.payload.data.id,
username: action.payload.data.username,
email: action.payload.data.email
}
state.user_register.id = action.payload.data.id
state.user_register.username = action.payload.data.username
state.user_register.email = action.payload.data.email
state.info = 'register success'
} catch {
state.info = 'register failed'

0
src/styles/form/form.scss 100644
View File

292
src/styles/general.scss 100644
View File

@ -0,0 +1,292 @@
body {
margin: 0 auto;
overflow: hidden;
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(0,128,0,1);
}
.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 {
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;
margin-top: -150px;
}
}
.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;
}
}
.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;
}
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;
}
.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;
}
}