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

src/components/forms/abstractWebsocket.js

@@ -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' 
+                          className='progress_bar_progress' 
-                          style={ { width: percents + '%', height: '100%' } }
+                          style={ { width: percents + '%', height: '100%', backgroundColor: 'green' } }
                       >
                       </div>
                     : percents === 'render success'
                         ? <div 
-                              className='progerss_bar_progress'
+                              className='progress_bar_progress'
-                              style={ { width: '100%', height: '100%' } }
+                              style={ { width: '100%', height: '100%', backgroundColor: 'green' } }
                           >
                           </div>
                         : <></>

src/components/forms/formGenerator.js

@@ -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 }
+                                    { item.replace('.blend', '') }
-                            </div>
+                            </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]}
                                     />

src/components/forms/render_websocket/renderAll.js

@@ -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: refs[0].current.value.replace('.blend', ''),
-            fileName: 'testHand',
+            // fileName: 'testHand',
             resolutionX: refs[1].current.value,
             resolutionY: refs[2].current.value,
         }

src/components/forms/render_websocket/renderSingleImage.js

@@ -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 }
             />
         </>
     )

src/components/forms/render_websocket/renderSingleSet.js

@@ -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: refs[0].current.value.replace('.blend', ''),
-            fileName: 'testHand',
+            // fileName: 'testHand',
             setID: refs[1].current.value,
             cameraID: refs[2].current.value,
             resolutionX: refs[3].current.value,

src/components/forms/render_websocket/renderVectorImage.js

@@ -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: refs[0].current.value.replace('.blend', ''),
-            fileName: 'testHand',
+            // fileName: 'testHand',
             rotate: refs[1].current.value / 62, // on backend 0.1 - 6.2 value
             cameraID: refs[2].current.value,
             nameSeries: 0,

src/components/forms/render_websocket/renderVectorSet.js

@@ -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: refs[0].current.value.replace('.blend', ''),
-            fileName: 'testHand',
+            // 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,

src/redux/slices/renderWebsocketSlice.js

@@ -41,10 +41,18 @@ const renderWebsocketSlice = createSlice(
                     ...state.messages,
                     action.payload.message
                 ]
+                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 = ''

src/styles/general.scss

@@ -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 {