React -> add select option divs for choice model & simple fixes / upgrades

feature/2_forms
TBS093A 2021-02-22 15:18:13 +01:00
parent ce838b61f0
commit 7ae2ab3753
9 changed files with 74 additions and 31 deletions

View File

@ -20,23 +20,22 @@ const ProgressBar = () => {
{
typeof percents === 'number'
? 'Progress: ' + percents + '%'
: percents === 'render_success' || percents === 'Ready to work. Get params'
? percents
: ''
: percents
}
</div>
<div>
{
typeof percents === 'number'
!isNaN(percents)
&& percents.toString().indexOf('.') != -1
? <div
className='progerss_bar_progress'
style={ { width: percents + '%', height: '100%' } }
className='progress_bar_progress'
style={ { width: percents + '%', height: '100%', backgroundColor: 'green' } }
>
</div>
: percents === 'render success'
? <div
className='progerss_bar_progress'
style={ { width: '100%', height: '100%' } }
className='progress_bar_progress'
style={ { width: '100%', height: '100%', backgroundColor: 'green' } }
>
</div>
: <></>

View File

@ -233,7 +233,7 @@ const DownloadFilesListInputGenerator = ({
* Text input generator, example:
* @param {
* {
* type: 'drop-box',
* type: 'chice-listing',
* name: 'name',
* values: list,
* ref: React.createRef()
@ -249,30 +249,40 @@ const ChoiceListingGenerator = ({
input, info
}) => {
const __handleRef = ( item ) => {
const __handleRef = ( event ) => {
event.preventDefault()
input.ref.current = {
value: item
value: event.target.value
}
}
return (
<div
id={input.name + info.action + info.endpoint + 'DropBox'}
id={input.name + info.action + info.endpoint + 'ChoiceListing'}
>
{input.name + ':'}
<select
onChange={ (event) => __handleRef( event ) }
>
<option
value={ '--Select-Model--' }
>
--Select-Model--
</option>
{
input.values.map( (item) => {
return (
<div
<option
key={ item }
onClick={ () => __handleRef( item ) }
value={ item }
>
{ item }
</div>
{ item.replace('.blend', '') }
</option>
)
}
)
}
</select>
</div>
)
}
@ -482,7 +492,7 @@ const VectorInputGenerator = ({
unit={ '' }
min={input.min[key]}
max={input.max[key]}
defaultValue={input.min[key]}
defaultValue={ input.min[key] > 0 ? input.min[key] : 0 }
step={0.1}
reference={input.refDict[key]}
/>

View File

@ -34,7 +34,7 @@ const RenderAllForm = () => {
button_value: 'Render All Sets'
},
{
type: 'chice-listing',
type: 'choice-listing',
name: 'Models',
values: models_list,
ref: choiceListing
@ -71,8 +71,8 @@ const RenderAllForm = () => {
const bodyComparer = ( refs ) => {
return {
// fileName: refs[0].current.value,
fileName: 'testHand',
fileName: refs[0].current.value.replace('.blend', ''),
// fileName: 'testHand',
resolutionX: refs[1].current.value,
resolutionY: refs[2].current.value,
}

View File

@ -40,7 +40,7 @@ const RenderSingleImageForm = () => {
button_value: 'Render Single Image'
},
{
type: 'chice-listing',
type: 'choice-listing',
name: 'Models',
values: models_list,
ref: choiceListing
@ -107,12 +107,26 @@ const RenderSingleImageForm = () => {
}
)
const bodyComparer = ( refs ) => {
return {
fileName: refs[0].current.value.replace('.blend', ''),
// fileName: 'testHand',
rotate: refs[1].current.value / 62, // on backend 0.1 - 6.2 value
cameraID: refs[2].current.value,
nameSeries: 0,
resolutionX: refs[3].current.value,
resolutionY: refs[4].current.value
}
}
return (
<>
<AbstractWebsocket
addressWS={ '/single/image/' }
inputList={ inputList }
refList={ refList }
bodyComparer={ bodyComparer }
/>
</>
)

View File

@ -40,7 +40,7 @@ const RenderSingleSetForm = () => {
button_value: 'Render Single Set'
},
{
type: 'chice-listing',
type: 'choice-listing',
name: 'Models',
values: models_list,
ref: choiceListing
@ -109,8 +109,8 @@ const RenderSingleSetForm = () => {
const bodyComparer = ( refs ) => {
return {
// fileName: refs[0].current.value,
fileName: 'testHand',
fileName: refs[0].current.value.replace('.blend', ''),
// fileName: 'testHand',
setID: refs[1].current.value,
cameraID: refs[2].current.value,
resolutionX: refs[3].current.value,

View File

@ -178,7 +178,7 @@ const RenderVectorSingleImageForm = () => {
button_value: 'Render Single Image'
},
{
type: 'chice-listing',
type: 'choice-listing',
name: 'Models',
values: models_list,
ref: choiceListing
@ -419,8 +419,8 @@ const RenderVectorSingleImageForm = () => {
)
return {
// fileName: refs[0].current.value,
fileName: 'testHand',
fileName: refs[0].current.value.replace('.blend', ''),
// fileName: 'testHand',
rotate: refs[1].current.value / 62, // on backend 0.1 - 6.2 value
cameraID: refs[2].current.value,
nameSeries: 0,

View File

@ -178,7 +178,7 @@ const RenderVectorSingleSetForm = () => {
button_value: 'Render Single Set'
},
{
type: 'chice-listing',
type: 'choice-listing',
name: 'Models',
values: models_list,
ref: choiceListing
@ -419,8 +419,8 @@ const RenderVectorSingleSetForm = () => {
)
return {
// fileName: refs[0].current.value,
fileName: 'testHand',
fileName: refs[0].current.value.replace('.blend', ''),
// 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,

View File

@ -41,10 +41,18 @@ const renderWebsocketSlice = createSlice(
...state.messages,
action.payload.message
]
state.percents = action.payload.message.info
if (
(
!isNaN(action.payload.message.info)
&& action.payload.message.info.toString().indexOf('.') != -1
) || action.payload.message.info === 'render success'
) {
state.percents = action.payload.message.info
}
},
resetMessages(state) {
state.messages = []
state.percents = ''
},
disconnect(state) {
state.web_socket_address = ''

View File

@ -190,6 +190,18 @@ body {
button {
float: left;
}
select {
width: 100%;
height: 50px;
margin-top: 15px;
margin-bottom: 15px;
background-color: rgba(22,28,29,1);
color: rgba(0,128,0,1);
border: 2px solid;
border-radius: 10px;
}
}
.float_form_connect {