Compare commits
No commits in common. "release/v0.1.0" and "master" have entirely different histories.
release/v0
...
master
|
|
@ -1,3 +0,0 @@
|
||||||
node_modules/
|
|
||||||
.cache/
|
|
||||||
public/
|
|
||||||
|
|
@ -1,3 +1,3 @@
|
||||||
node_modules/
|
node_modules/
|
||||||
.cache/
|
.cache/
|
||||||
public/
|
public
|
||||||
|
|
|
||||||
18
Dockerfile
18
Dockerfile
|
|
@ -1,18 +0,0 @@
|
||||||
# pull official base image
|
|
||||||
FROM node:13.12.0-alpine
|
|
||||||
|
|
||||||
# set working directory
|
|
||||||
WORKDIR /app
|
|
||||||
|
|
||||||
# install app dependencies
|
|
||||||
|
|
||||||
COPY package.json ./
|
|
||||||
COPY package-lock.json ./
|
|
||||||
|
|
||||||
RUN npm install --silent
|
|
||||||
RUN npm install gatsby-cli@3.10.0 --silent
|
|
||||||
|
|
||||||
ENV GATSBY_TELEMETRY_DISABLED=1
|
|
||||||
|
|
||||||
# add app
|
|
||||||
COPY . ./
|
|
||||||
13
default.conf
13
default.conf
|
|
@ -1,13 +0,0 @@
|
||||||
server {
|
|
||||||
listen 80;
|
|
||||||
listen [::]:80;
|
|
||||||
|
|
||||||
root /var/www/work_front/html;
|
|
||||||
index index.html index.htm index.nginx-debian.html;
|
|
||||||
|
|
||||||
server_name work_front www.work_front;
|
|
||||||
|
|
||||||
location / {
|
|
||||||
try_files $uri $uri/ =404;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1664,17 +1664,6 @@
|
||||||
"react-lifecycles-compat": "^3.0.4"
|
"react-lifecycles-compat": "^3.0.4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@reduxjs/toolkit": {
|
|
||||||
"version": "1.5.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.5.0.tgz",
|
|
||||||
"integrity": "sha512-E/FUraRx+8guw9Hlg/Ja8jI/hwCrmIKed8Annt9YsZw3BQp+F24t5I5b2OWR6pkEHY4hn1BgP08FrTZFRKsdaQ==",
|
|
||||||
"requires": {
|
|
||||||
"immer": "^8.0.0",
|
|
||||||
"redux": "^4.0.0",
|
|
||||||
"redux-thunk": "^2.3.0",
|
|
||||||
"reselect": "^4.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"@sideway/address": {
|
"@sideway/address": {
|
||||||
"version": "4.1.1",
|
"version": "4.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.1.tgz",
|
||||||
|
|
@ -8122,11 +8111,6 @@
|
||||||
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
|
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
|
||||||
"integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw=="
|
"integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw=="
|
||||||
},
|
},
|
||||||
"immer": {
|
|
||||||
"version": "8.0.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/immer/-/immer-8.0.1.tgz",
|
|
||||||
"integrity": "sha512-aqXhGP7//Gui2+UrEtvxZxSquQVXTpZ7KDxfCcKAF3Vysvw0CViVaW9RZ1j1xlIYqaaaipBoqdqeibkc18PNvA=="
|
|
||||||
},
|
|
||||||
"import-cwd": {
|
"import-cwd": {
|
||||||
"version": "2.1.0",
|
"version": "2.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
|
||||||
|
|
@ -9160,11 +9144,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"loadash": {
|
|
||||||
"version": "1.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/loadash/-/loadash-1.0.0.tgz",
|
|
||||||
"integrity": "sha512-xlX5HBsXB3KG0FJbJJG/3kYWCfsCyCSus3T+uHVu6QL6YxAdggmm3QeyLgn54N2yi5/UE6xxL5ZWJAAiHzHYEg=="
|
|
||||||
},
|
|
||||||
"loader-fs-cache": {
|
"loader-fs-cache": {
|
||||||
"version": "1.0.3",
|
"version": "1.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/loader-fs-cache/-/loader-fs-cache-1.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/loader-fs-cache/-/loader-fs-cache-1.0.3.tgz",
|
||||||
|
|
@ -10690,12 +10669,6 @@
|
||||||
"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
|
||||||
"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
|
"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
|
||||||
},
|
},
|
||||||
"pathseg": {
|
|
||||||
"version": "1.2.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/pathseg/-/pathseg-1.2.0.tgz",
|
|
||||||
"integrity": "sha512-+pQS7lTaoVIXhaCW7R3Wd/165APzZHWzYVqe7dxzdupxQwebgpBaCmf0/XZwmoA/rkDq3qvzO0qv4d5oFVrBRw==",
|
|
||||||
"optional": true
|
|
||||||
},
|
|
||||||
"pbkdf2": {
|
"pbkdf2": {
|
||||||
"version": "3.1.1",
|
"version": "3.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.1.tgz",
|
||||||
|
|
@ -12077,27 +12050,6 @@
|
||||||
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
|
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
|
||||||
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
|
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
|
||||||
},
|
},
|
||||||
"react-particles-js": {
|
|
||||||
"version": "3.4.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/react-particles-js/-/react-particles-js-3.4.1.tgz",
|
|
||||||
"integrity": "sha512-c3+vITUMN9RlgbERZYd9Kzvjmf49ENp07+9+NDLvE1Jf9euabrJi/q6gCCcv5foxGHBYjHnGs47Tusmrl0/+GQ==",
|
|
||||||
"requires": {
|
|
||||||
"lodash": "^4.17.11",
|
|
||||||
"tsparticles": "^1.18.10"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"react-redux": {
|
|
||||||
"version": "7.2.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.2.tgz",
|
|
||||||
"integrity": "sha512-8+CQ1EvIVFkYL/vu6Olo7JFLWop1qRUeb46sGtIMDCSpgwPQq8fPLpirIB0iTqFe9XYEFPHssdX8/UwN6pAkEA==",
|
|
||||||
"requires": {
|
|
||||||
"@babel/runtime": "^7.12.1",
|
|
||||||
"hoist-non-react-statics": "^3.3.2",
|
|
||||||
"loose-envify": "^1.4.0",
|
|
||||||
"prop-types": "^15.7.2",
|
|
||||||
"react-is": "^16.13.1"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"react-refresh": {
|
"react-refresh": {
|
||||||
"version": "0.8.3",
|
"version": "0.8.3",
|
||||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
|
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
|
||||||
|
|
@ -12544,11 +12496,6 @@
|
||||||
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
|
||||||
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
|
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
|
||||||
},
|
},
|
||||||
"reselect": {
|
|
||||||
"version": "4.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/reselect/-/reselect-4.0.0.tgz",
|
|
||||||
"integrity": "sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA=="
|
|
||||||
},
|
|
||||||
"resolve": {
|
"resolve": {
|
||||||
"version": "1.20.0",
|
"version": "1.20.0",
|
||||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
|
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
|
||||||
|
|
@ -14344,14 +14291,6 @@
|
||||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
|
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
|
||||||
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
|
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
|
||||||
},
|
},
|
||||||
"tsparticles": {
|
|
||||||
"version": "1.18.12",
|
|
||||||
"resolved": "https://registry.npmjs.org/tsparticles/-/tsparticles-1.18.12.tgz",
|
|
||||||
"integrity": "sha512-7WY31HckCzzaiuudQlIeCE3Y5C4AslnJsuM/aeSDMErx7p7GjXzfUIO5qpzwyoJ7KRNURxIhADTXSDEtqkJFxw==",
|
|
||||||
"requires": {
|
|
||||||
"pathseg": "^1.2.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"tsutils": {
|
"tsutils": {
|
||||||
"version": "3.20.0",
|
"version": "3.20.0",
|
||||||
"resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.20.0.tgz",
|
"resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.20.0.tgz",
|
||||||
|
|
|
||||||
|
|
@ -15,15 +15,10 @@
|
||||||
"clean": "gatsby clean"
|
"clean": "gatsby clean"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@reduxjs/toolkit": "^1.5.0",
|
|
||||||
"gatsby": "^2.32.3",
|
"gatsby": "^2.32.3",
|
||||||
"gatsby-plugin-sass": "^3.2.0",
|
"gatsby-plugin-sass": "^3.2.0",
|
||||||
"loadash": "^1.0.0",
|
|
||||||
"react": "^16.13.1",
|
"react": "^16.13.1",
|
||||||
"react-dom": "^16.13.1",
|
"react-dom": "^16.13.1",
|
||||||
"react-particles-js": "^3.4.1",
|
|
||||||
"react-redux": "^7.2.2",
|
|
||||||
"redux": "^4.0.5",
|
|
||||||
"sass": "^1.32.7"
|
"sass": "^1.32.7"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,265 +0,0 @@
|
||||||
import React, { useState, useEffect } from 'react'
|
|
||||||
import { useSelector, useDispatch } from 'react-redux'
|
|
||||||
|
|
||||||
import { renderWebsocketSelector } from '../../redux/slices/renderWebsocketSlice'
|
|
||||||
import { connect, saveMessage, resetMessages, disconnect } from '../../redux/slices/renderWebsocketSlice'
|
|
||||||
|
|
||||||
import FormGenerator from './formGenerator'
|
|
||||||
|
|
||||||
|
|
||||||
const ProgressBar = () => {
|
|
||||||
|
|
||||||
const {
|
|
||||||
percents,
|
|
||||||
connect
|
|
||||||
} = useSelector( renderWebsocketSelector )
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="progress_bar_form">
|
|
||||||
<div>
|
|
||||||
{
|
|
||||||
typeof percents === 'number'
|
|
||||||
? 'Progress: ' + percents + '%'
|
|
||||||
: percents
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
{
|
|
||||||
!isNaN(percents)
|
|
||||||
&& percents.toString().indexOf('.') != -1
|
|
||||||
? <div
|
|
||||||
className='progress_bar_progress'
|
|
||||||
style={ { width: percents + '%', height: '100%', backgroundColor: 'green' } }
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
: percents === 'render success'
|
|
||||||
? <div
|
|
||||||
className='progress_bar_progress'
|
|
||||||
style={ { width: '100%', height: '100%', backgroundColor: 'green' } }
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
: <></>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
const AbstractWebsocket = ({ addressWS, inputList, refList, bodyComparer }) => {
|
|
||||||
|
|
||||||
const [web_socket, setWebsocket] = useState(null)
|
|
||||||
|
|
||||||
const dispatch = useDispatch()
|
|
||||||
|
|
||||||
const {
|
|
||||||
web_socket_address,
|
|
||||||
address,
|
|
||||||
room_uuid,
|
|
||||||
messages,
|
|
||||||
connected
|
|
||||||
} = useSelector( renderWebsocketSelector )
|
|
||||||
|
|
||||||
|
|
||||||
const handleConnect = ( event ) => {
|
|
||||||
|
|
||||||
event.preventDefault()
|
|
||||||
|
|
||||||
if ( web_socket === null && address === '' && room_uuid === '') {
|
|
||||||
dispatch(
|
|
||||||
connect(
|
|
||||||
{
|
|
||||||
address: addressWS
|
|
||||||
}
|
|
||||||
)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleSendMessage = ( refs ) => {
|
|
||||||
|
|
||||||
let body = bodyComparer( refs )
|
|
||||||
|
|
||||||
console.log( body )
|
|
||||||
try {
|
|
||||||
|
|
||||||
dispatch(
|
|
||||||
saveMessage(
|
|
||||||
{
|
|
||||||
message: { info: 0 } // start
|
|
||||||
}
|
|
||||||
)
|
|
||||||
)
|
|
||||||
|
|
||||||
web_socket.send(
|
|
||||||
JSON.stringify(
|
|
||||||
body
|
|
||||||
)
|
|
||||||
)
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
|
|
||||||
web_socket.close()
|
|
||||||
dispatch(
|
|
||||||
disconnect()
|
|
||||||
)
|
|
||||||
setWebsocket(null)
|
|
||||||
console.log(error)
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleDisconnect = ( event ) => {
|
|
||||||
|
|
||||||
event.preventDefault()
|
|
||||||
|
|
||||||
if ( web_socket !== null && address !== '' && room_uuid !== '' ) {
|
|
||||||
try {
|
|
||||||
web_socket.close()
|
|
||||||
dispatch(
|
|
||||||
disconnect()
|
|
||||||
)
|
|
||||||
} catch (error) {
|
|
||||||
console.log(error)
|
|
||||||
}
|
|
||||||
} else if ( address !== '' && room_uuid !== '' ) {
|
|
||||||
dispatch(
|
|
||||||
disconnect()
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
setWebsocket(null)
|
|
||||||
|
|
||||||
console.log('disconnect')
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(
|
|
||||||
() => {
|
|
||||||
|
|
||||||
if ( web_socket_address !== '' && web_socket === null ) {
|
|
||||||
|
|
||||||
console.log( 'connect' )
|
|
||||||
|
|
||||||
setWebsocket(new WebSocket( web_socket_address ))
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( web_socket !== null ) {
|
|
||||||
|
|
||||||
web_socket.onmessage = (event) => {
|
|
||||||
console.log( event.data )
|
|
||||||
if ( messages[ messages.length - 1 ] !== JSON.parse( event.data ) ) {
|
|
||||||
dispatch(
|
|
||||||
saveMessage(
|
|
||||||
{
|
|
||||||
message: JSON.parse( event.data )
|
|
||||||
}
|
|
||||||
)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<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
|
|
||||||
?
|
|
||||||
<button onClick={ (event) => handleDisconnect(event) }>
|
|
||||||
Disconnect
|
|
||||||
</button>
|
|
||||||
:
|
|
||||||
<button onClick={ (event) => handleConnect(event) }>
|
|
||||||
Connect
|
|
||||||
</button>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="float_form_console"
|
|
||||||
style={ connected ? { marginTop: '25%', height: '200px' } : { marginTop: '15%', height: '10px' } }
|
|
||||||
>
|
|
||||||
<p>
|
|
||||||
console:
|
|
||||||
</p>
|
|
||||||
<div className="console_data">
|
|
||||||
{
|
|
||||||
messages.slice(0).reverse().map( (item) => {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<>
|
|
||||||
{
|
|
||||||
Object.keys(item).map( (key) => {
|
|
||||||
|
|
||||||
if ( key == 'details' ) {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{
|
|
||||||
Object.keys(item[key]).map( (keyTwo) => {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
{ ' ' + keyTwo + ': ' + item[key][keyTwo] + ' ' }
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
} else if ( key === 'image' ) {
|
|
||||||
return (
|
|
||||||
<img
|
|
||||||
src={ 'data:image/png;base64, ' + item[key] }
|
|
||||||
style={ { width: '300px', height: '150px' } }
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{ key + ': ' + item[key] + ' ' }
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default AbstractWebsocket
|
|
||||||
|
|
@ -1,608 +0,0 @@
|
||||||
import React, { useState } from 'react'
|
|
||||||
|
|
||||||
/**
|
|
||||||
*
|
|
||||||
* @param { [ {}, {}, ...{} ] } inputList - list of dicts with info about input
|
|
||||||
* @param { [] } refList - react ref objects list for handler validation
|
|
||||||
* @param { } action - fetch method
|
|
||||||
*/
|
|
||||||
export const FormGenerator = ({
|
|
||||||
inputList, refList,
|
|
||||||
action
|
|
||||||
}) => {
|
|
||||||
|
|
||||||
const handler = async (event) => {
|
|
||||||
event.preventDefault()
|
|
||||||
|
|
||||||
if ( inputList[0].action === 'Async' ) {
|
|
||||||
await action(refList)
|
|
||||||
} else if (
|
|
||||||
inputList[0].action === 'Download'
|
|
||||||
|| inputList[0].action === 'Upload'
|
|
||||||
) {
|
|
||||||
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)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let info
|
|
||||||
|
|
||||||
return (
|
|
||||||
<form onSubmit={event => handler(event)} className="form">
|
|
||||||
{
|
|
||||||
inputList.map((input, key) => {
|
|
||||||
|
|
||||||
if (input.type === 'info') {
|
|
||||||
info = input
|
|
||||||
} else if (input.type === 'text') {
|
|
||||||
return (
|
|
||||||
<TextInputGenerator
|
|
||||||
input={input}
|
|
||||||
info={info}
|
|
||||||
key={key}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
} else if (input.type === 'password') {
|
|
||||||
return (
|
|
||||||
<PasswordInputGenerator
|
|
||||||
input={input}
|
|
||||||
info={info}
|
|
||||||
key={key}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
} else if (input.type === 'links-listing') {
|
|
||||||
return (
|
|
||||||
<DownloadFilesListInputGenerator
|
|
||||||
input={input}
|
|
||||||
info={info}
|
|
||||||
key={key}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
} else if (input.type === 'file') {
|
|
||||||
return (
|
|
||||||
<UploadInputGenerator
|
|
||||||
input={input}
|
|
||||||
info={info}
|
|
||||||
key={key}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
} else if (input.type === 'choice-listing') {
|
|
||||||
return (
|
|
||||||
<ChoiceListingGenerator
|
|
||||||
input={input}
|
|
||||||
info={info}
|
|
||||||
key={key}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
} else if (input.type === 'range') {
|
|
||||||
return (
|
|
||||||
<RangeInputGenerator
|
|
||||||
input={input}
|
|
||||||
info={info}
|
|
||||||
key={key}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
} else if (input.type === 'vector') {
|
|
||||||
return (
|
|
||||||
<VectorInputGenerator
|
|
||||||
input={input}
|
|
||||||
info={info}
|
|
||||||
key={key}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
{
|
|
||||||
info.button_value === ''
|
|
||||||
? <></>
|
|
||||||
: <button
|
|
||||||
type='submit'
|
|
||||||
>
|
|
||||||
{ info.button_value }
|
|
||||||
</button>
|
|
||||||
}
|
|
||||||
|
|
||||||
</form>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Text input generator, example:
|
|
||||||
* @param {
|
|
||||||
* {
|
|
||||||
* type: 'text',
|
|
||||||
* name: 'name',
|
|
||||||
* ref: React.createRef()
|
|
||||||
* } } input - basic text input
|
|
||||||
* @param {
|
|
||||||
* {
|
|
||||||
* type: 'info',
|
|
||||||
* action: 'Update'
|
|
||||||
* endpoint: 'Album'
|
|
||||||
* } } info - information about form
|
|
||||||
*/
|
|
||||||
const TextInputGenerator = ({
|
|
||||||
input, info
|
|
||||||
}) => {
|
|
||||||
return (
|
|
||||||
<div className="input_generate">
|
|
||||||
<div className="input_labels">
|
|
||||||
{input.name + ':'}
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
id={input.name + info.action + info.endpoint + 'Input'}
|
|
||||||
autoComplete='off'
|
|
||||||
ref={input.ref}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Text input generator, example:
|
|
||||||
* @param {
|
|
||||||
* {
|
|
||||||
* type: 'password',
|
|
||||||
* name: 'name',
|
|
||||||
* ref: React.createRef()
|
|
||||||
* } } input - basic text input
|
|
||||||
* @param {
|
|
||||||
* {
|
|
||||||
* type: 'info',
|
|
||||||
* action: 'Update'
|
|
||||||
* endpoint: 'Album'
|
|
||||||
* } } info - information about form
|
|
||||||
*/
|
|
||||||
const PasswordInputGenerator = ({
|
|
||||||
input, info
|
|
||||||
}) => {
|
|
||||||
return (
|
|
||||||
<div className="input_generate">
|
|
||||||
<div className="input_labels">
|
|
||||||
{input.name + ':'}
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
id={input.name + info.action + info.endpoint + 'Input'}
|
|
||||||
autoComplete='off'
|
|
||||||
ref={input.ref}
|
|
||||||
type='password'
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const ObjectIterator = ({
|
|
||||||
object, divPlacer
|
|
||||||
}) => {
|
|
||||||
return(
|
|
||||||
<>
|
|
||||||
{
|
|
||||||
typeof object == "object" ?
|
|
||||||
|
|
||||||
Object.keys( object ).map(
|
|
||||||
( key ) => {
|
|
||||||
return (
|
|
||||||
<div key={ key }>
|
|
||||||
{ divPlacer( object[key] ) }
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
:
|
|
||||||
|
|
||||||
object
|
|
||||||
}
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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.length == 0 ?
|
|
||||||
|
|
||||||
() => {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
empty
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
: input.values.map( (item, index) => {
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div
|
|
||||||
key={ info.action + '_element_' + index }
|
|
||||||
ls={ item }
|
|
||||||
>
|
|
||||||
{
|
|
||||||
typeof item == 'string' ?
|
|
||||||
|
|
||||||
item
|
|
||||||
|
|
||||||
: Object.keys(item).map(
|
|
||||||
( key, index ) => {
|
|
||||||
|
|
||||||
return(
|
|
||||||
<div style={{ paddingLeft: '10px' }}>
|
|
||||||
{ key + ': ' }
|
|
||||||
{
|
|
||||||
typeof item[key] === "object" ?
|
|
||||||
|
|
||||||
Object.keys( item[key] ).map(
|
|
||||||
( key_two, index ) => {
|
|
||||||
return (
|
|
||||||
<div style={{ paddingLeft: '20px' }}>
|
|
||||||
{ key_two + ': '}
|
|
||||||
{
|
|
||||||
typeof item[key][key_two] == 'object' ?
|
|
||||||
|
|
||||||
Object.keys( item[key][key_two] ).map(
|
|
||||||
(key_three, index) => {
|
|
||||||
return (
|
|
||||||
<div style={{ paddingLeft: '30px' }}>
|
|
||||||
{ key_three + ": " }
|
|
||||||
{ "x: " + item[key][key_two][key_three].x + ", " }
|
|
||||||
{ "y: " + item[key][key_two][key_three].y + ", " }
|
|
||||||
{ "z: " + item[key][key_two][key_three].z + ", " }
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
:
|
|
||||||
|
|
||||||
item[key][key_two]
|
|
||||||
}
|
|
||||||
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
:
|
|
||||||
|
|
||||||
item[key]
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
<a
|
|
||||||
href={ input.link + index + '/' }
|
|
||||||
>
|
|
||||||
download
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div style={{ width: '100%', height: '1px', backgroundColor: '#008000' }}>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Text input generator, example:
|
|
||||||
* @param {
|
|
||||||
* {
|
|
||||||
* type: 'chice-listing',
|
|
||||||
* name: 'name',
|
|
||||||
* values: list,
|
|
||||||
* ref: React.createRef()
|
|
||||||
* } } input - basic text input
|
|
||||||
* @param {
|
|
||||||
* {
|
|
||||||
* type: 'info',
|
|
||||||
* action: 'Update'
|
|
||||||
* endpoint: 'Album'
|
|
||||||
* } } info - information about form
|
|
||||||
*/
|
|
||||||
const ChoiceListingGenerator = ({
|
|
||||||
input, info
|
|
||||||
}) => {
|
|
||||||
|
|
||||||
const __handleRef = ( event ) => {
|
|
||||||
event.preventDefault()
|
|
||||||
input.ref.current = {
|
|
||||||
value: event.target.value
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
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 (
|
|
||||||
<option
|
|
||||||
key={ item.model }
|
|
||||||
value={ item.model }
|
|
||||||
>
|
|
||||||
{ item.model.replace('.blend', '') }
|
|
||||||
</option>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Upload file input generator, example:
|
|
||||||
* @param {
|
|
||||||
* {
|
|
||||||
* type: 'file',
|
|
||||||
* name: 'name',
|
|
||||||
* endpoint: 'Album',
|
|
||||||
* fileType: 'image' or 'audio',
|
|
||||||
* dropInfo: dropInfo, setDropInfo: setDropInfo(), #useState
|
|
||||||
* file: file, setFile: setFile() #useState
|
|
||||||
* } } input -
|
|
||||||
*/
|
|
||||||
const UploadInputGenerator = ({
|
|
||||||
input, info
|
|
||||||
}) => {
|
|
||||||
|
|
||||||
const onLoadFile = async (event) => {
|
|
||||||
event.preventDefault()
|
|
||||||
let data = event.target.files[0]
|
|
||||||
// input.setFile(await toBase64(data))
|
|
||||||
input.setFile( data )
|
|
||||||
setDropInfos(data.name, data.size)
|
|
||||||
}
|
|
||||||
|
|
||||||
const onLoadFileDrop = async (event) => {
|
|
||||||
event.preventDefault()
|
|
||||||
event.persist()
|
|
||||||
let data = event.dataTransfer.files[0]
|
|
||||||
// input.setFile(await toBase64(data))
|
|
||||||
input.setFile( data )
|
|
||||||
setDropInfos(data.name, data.size)
|
|
||||||
}
|
|
||||||
|
|
||||||
const toBase64 = async (file) => new Promise((resolve, reject) => {
|
|
||||||
let fileReader = new FileReader()
|
|
||||||
fileReader.readAsDataURL(file)
|
|
||||||
fileReader.onload = () => resolve(fileReader.result)
|
|
||||||
fileReader.onerror = error => reject(error)
|
|
||||||
})
|
|
||||||
|
|
||||||
const setDropInfos = (name, size) => {
|
|
||||||
input.setDropInfo(
|
|
||||||
'name: "'
|
|
||||||
+ name
|
|
||||||
+ '"\nsize: '
|
|
||||||
+ (Math.round(size / 100 + 'e-2') / 100)
|
|
||||||
+ ' MB'
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div onDrop={event => onLoadFileDrop(event)} >
|
|
||||||
<pre style={{ marginLeft: '40px' }}>
|
|
||||||
{input.dropInfo}
|
|
||||||
</pre>
|
|
||||||
<input
|
|
||||||
style={{ marginTop: '-55px' }}
|
|
||||||
id={input.name + info.action + info.endpoint + 'Input'}
|
|
||||||
className='upload_input'
|
|
||||||
type='file'
|
|
||||||
accept={input.fileType + '/*'}
|
|
||||||
autoComplete='off'
|
|
||||||
onChange={event => onLoadFile(event)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Text input generator, example:
|
|
||||||
* @param {
|
|
||||||
* {
|
|
||||||
* type: 'range',
|
|
||||||
* name: 'name',
|
|
||||||
* min: min range value,
|
|
||||||
* max: max range value,
|
|
||||||
* step: step of value,
|
|
||||||
* unit: unit of range value,
|
|
||||||
* ref: React.createRef()
|
|
||||||
* } } input - basic text input
|
|
||||||
* @param {
|
|
||||||
* {
|
|
||||||
* type: 'info',
|
|
||||||
* action: 'Update'
|
|
||||||
* endpoint: 'Album'
|
|
||||||
* } } info - information about form
|
|
||||||
*/
|
|
||||||
const RangeInputGenerator = ({
|
|
||||||
input, info
|
|
||||||
}) => {
|
|
||||||
|
|
||||||
let name = input.name + info.action + info.endpoint + 'Input'
|
|
||||||
|
|
||||||
const [value, setValue] = useState(0)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
{input.name + ': ' + value + ' ' + input.unit }
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
style={ { width: '380px' } }
|
|
||||||
id={name}
|
|
||||||
name={name}
|
|
||||||
min={input.min}
|
|
||||||
max={input.max}
|
|
||||||
defaultValue={input.min}
|
|
||||||
step={input.step}
|
|
||||||
ref={input.ref}
|
|
||||||
type='range'
|
|
||||||
onChange={ event => setValue( event.target.value ) }
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const RangeGenerator = ({
|
|
||||||
key,
|
|
||||||
label,
|
|
||||||
labelStyle,
|
|
||||||
valueStyle,
|
|
||||||
style,
|
|
||||||
name,
|
|
||||||
unit,
|
|
||||||
min,
|
|
||||||
max,
|
|
||||||
defaultValue,
|
|
||||||
step,
|
|
||||||
reference
|
|
||||||
}) => {
|
|
||||||
|
|
||||||
const [value, setValue] = useState(0)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div style={ { display: 'flex' } }>
|
|
||||||
<div style={ labelStyle }>
|
|
||||||
{ label + ': ' }
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
key={key}
|
|
||||||
style={ style }
|
|
||||||
id={ name }
|
|
||||||
name={ name }
|
|
||||||
min={min}
|
|
||||||
max={max}
|
|
||||||
defaultValue={ defaultValue }
|
|
||||||
step={step}
|
|
||||||
ref={reference}
|
|
||||||
type='range'
|
|
||||||
onChange={ event => setValue( event.target.value ) }
|
|
||||||
/>
|
|
||||||
<div style={ valueStyle }>
|
|
||||||
{ value + ' ' + unit }
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Text input generator, example:
|
|
||||||
* @param {
|
|
||||||
* {
|
|
||||||
* type: 'vector',
|
|
||||||
* name: 'name',
|
|
||||||
* refDict:
|
|
||||||
* {
|
|
||||||
* x: React.createRef(),
|
|
||||||
* y: React.createRef(),
|
|
||||||
* z: React.createRef()
|
|
||||||
* }
|
|
||||||
* } } input - basic text input
|
|
||||||
* @param {
|
|
||||||
* {
|
|
||||||
* type: 'info',
|
|
||||||
* action: 'Update'
|
|
||||||
* endpoint: 'Album'
|
|
||||||
* } } info - information about form
|
|
||||||
*/
|
|
||||||
const VectorInputGenerator = ({
|
|
||||||
input, info
|
|
||||||
}) => {
|
|
||||||
|
|
||||||
return (
|
|
||||||
<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: '140px' } }>
|
|
||||||
<RangeGenerator
|
|
||||||
key={key}
|
|
||||||
label={key}
|
|
||||||
labelStyle={ { width: '5px', marginTop: '15px' } }
|
|
||||||
valueStyle={ { width: '5px', marginTop: '15px', marginLeft: '5px' } }
|
|
||||||
style={ { width: '80px' } }
|
|
||||||
name={name}
|
|
||||||
unit={ '' }
|
|
||||||
min={input.min[key]}
|
|
||||||
max={input.max[key]}
|
|
||||||
defaultValue={ input.min[key] > 0 ? input.min[key] : 0 }
|
|
||||||
step={0.1}
|
|
||||||
reference={input.refDict[key]}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
export default FormGenerator
|
|
||||||
|
|
@ -1,68 +0,0 @@
|
||||||
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: 'links-listing',
|
|
||||||
name: 'Models',
|
|
||||||
values: models_list,
|
|
||||||
link: GeneralAddress + '/model/',
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
const handleRefresh = () => {
|
|
||||||
dispatch( modelCrudAsyncThunk.fetchGetAllModels(token) )
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="float_form_model"
|
|
||||||
style={ { marginTop: '10%' , overflowY: 'scroll', height: '500px' } }
|
|
||||||
>
|
|
||||||
<FormGenerator
|
|
||||||
inputList={ inputList }
|
|
||||||
refList={ [] }
|
|
||||||
action={ handleRefresh }
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ModelShowAndDownloadForm
|
|
||||||
|
|
@ -1,72 +0,0 @@
|
||||||
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 (
|
|
||||||
<div
|
|
||||||
className="float_form_model"
|
|
||||||
style={ { marginTop: '17%'} }
|
|
||||||
>
|
|
||||||
<FormGenerator
|
|
||||||
inputList={ inputList }
|
|
||||||
refList={ [] }
|
|
||||||
action={ handleModelUpload }
|
|
||||||
/>
|
|
||||||
<p>
|
|
||||||
{
|
|
||||||
typeof upload_blend_file_status === 'string'
|
|
||||||
? ''
|
|
||||||
: 'info' in upload_blend_file_status
|
|
||||||
? upload_blend_file_status.info
|
|
||||||
: ''
|
|
||||||
}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ModelUploadForm
|
|
||||||
|
|
@ -1,65 +0,0 @@
|
||||||
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: 'links-listing',
|
|
||||||
name: 'Renders',
|
|
||||||
values: render_list,
|
|
||||||
link: GeneralAddress + '/render/',
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
const handleRefresh = () => {
|
|
||||||
dispatch( renderCrudAsyncThunk.fetchGetAllRenders( token ) )
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='float_form_render_sync'>
|
|
||||||
<FormGenerator
|
|
||||||
inputList={ inputList }
|
|
||||||
refList={ [] }
|
|
||||||
action={ handleRefresh }
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
export default RenderShowAndDownloadForm
|
|
||||||
|
|
@ -1,106 +0,0 @@
|
||||||
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 RenderAllForm = () => {
|
|
||||||
|
|
||||||
const dispatch = useDispatch()
|
|
||||||
|
|
||||||
const choiceListing = React.createRef()
|
|
||||||
const rotateRange = React.createRef()
|
|
||||||
const resolutionXRange = React.createRef()
|
|
||||||
const resolutionYRange = React.createRef()
|
|
||||||
|
|
||||||
|
|
||||||
const { models_list } = useSelector( modelCrudSelector )
|
|
||||||
const { user, token } = useSelector( userAuthSelector )
|
|
||||||
|
|
||||||
let refList = [
|
|
||||||
choiceListing,
|
|
||||||
rotateRange,
|
|
||||||
resolutionXRange,
|
|
||||||
resolutionYRange,
|
|
||||||
]
|
|
||||||
|
|
||||||
let inputList = [
|
|
||||||
{
|
|
||||||
type: 'info',
|
|
||||||
action: 'Async',
|
|
||||||
endpint: 'render/async/all',
|
|
||||||
button_value: 'Render All Sets'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'choice-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: '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
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
useEffect(
|
|
||||||
() => {
|
|
||||||
|
|
||||||
if ( models_list.length === 0 && user.id > 0 && token !== '' ) {
|
|
||||||
dispatch( modelCrudAsyncThunk.fetchGetAllModels( token ) )
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
const bodyComparer = ( refs ) => {
|
|
||||||
return {
|
|
||||||
fileName: refs[0].current.value.replace('.blend', ''),
|
|
||||||
// fileName: 'testHand',
|
|
||||||
angle: refs[1].current.value / 62, // on backend 0.1 - 6.2 value
|
|
||||||
resolutionX: refs[2].current.value,
|
|
||||||
resolutionY: refs[3].current.value,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<AbstractWebsocket
|
|
||||||
addressWS={ '/all/' }
|
|
||||||
inputList={ inputList }
|
|
||||||
refList={ refList }
|
|
||||||
bodyComparer={ bodyComparer }
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default RenderAllForm
|
|
||||||
|
|
@ -1,136 +0,0 @@
|
||||||
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 RenderSingleImageForm = () => {
|
|
||||||
|
|
||||||
const dispatch = useDispatch()
|
|
||||||
|
|
||||||
const choiceListing = React.createRef()
|
|
||||||
const setIdRange = React.createRef()
|
|
||||||
const rotateRange = React.createRef()
|
|
||||||
const cameraIdRange = React.createRef()
|
|
||||||
const resolutionXRange = React.createRef()
|
|
||||||
const resolutionYRange = React.createRef()
|
|
||||||
|
|
||||||
const { models_list } = useSelector( modelCrudSelector )
|
|
||||||
const { user, token } = useSelector( userAuthSelector )
|
|
||||||
|
|
||||||
let refList = [
|
|
||||||
choiceListing,
|
|
||||||
setIdRange,
|
|
||||||
rotateRange,
|
|
||||||
cameraIdRange,
|
|
||||||
resolutionXRange,
|
|
||||||
resolutionYRange
|
|
||||||
]
|
|
||||||
|
|
||||||
let inputList = [
|
|
||||||
{
|
|
||||||
type: 'info',
|
|
||||||
action: 'Async',
|
|
||||||
endpint: 'render/async/single/image',
|
|
||||||
button_value: 'Render Single Image'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'choice-listing',
|
|
||||||
name: 'Models',
|
|
||||||
values: models_list,
|
|
||||||
ref: choiceListing
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'range',
|
|
||||||
name: 'Set ID',
|
|
||||||
min: 0,
|
|
||||||
max: 87,
|
|
||||||
step: 1,
|
|
||||||
unit: 'set',
|
|
||||||
ref: setIdRange
|
|
||||||
},
|
|
||||||
{
|
|
||||||
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
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
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 ) => {
|
|
||||||
|
|
||||||
return {
|
|
||||||
fileName: refs[0].current.value.replace('.blend', ''),
|
|
||||||
// fileName: 'testHand',
|
|
||||||
setID: refs[1].current.value,
|
|
||||||
rotate: refs[2].current.value / 62, // on backend 0.1 - 6.2 value
|
|
||||||
cameraID: refs[3].current.value,
|
|
||||||
nameSeries: 0,
|
|
||||||
resolutionX: refs[4].current.value,
|
|
||||||
resolutionY: refs[5].current.value
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<AbstractWebsocket
|
|
||||||
addressWS={ '/single/image/' }
|
|
||||||
inputList={ inputList }
|
|
||||||
refList={ refList }
|
|
||||||
bodyComparer={ bodyComparer }
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default RenderSingleImageForm
|
|
||||||
|
|
@ -1,134 +0,0 @@
|
||||||
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 RenderSingleSetForm = () => {
|
|
||||||
|
|
||||||
const dispatch = useDispatch()
|
|
||||||
|
|
||||||
const choiceListing = React.createRef()
|
|
||||||
const setIdRange = React.createRef()
|
|
||||||
const cameraIdRange = React.createRef()
|
|
||||||
const resolutionXRange = React.createRef()
|
|
||||||
const resolutionYRange = React.createRef()
|
|
||||||
const angleRange = React.createRef()
|
|
||||||
|
|
||||||
const { models_list } = useSelector( modelCrudSelector )
|
|
||||||
const { user, token } = useSelector( userAuthSelector )
|
|
||||||
|
|
||||||
let refList = [
|
|
||||||
choiceListing,
|
|
||||||
setIdRange,
|
|
||||||
cameraIdRange,
|
|
||||||
resolutionXRange,
|
|
||||||
resolutionYRange,
|
|
||||||
angleRange
|
|
||||||
]
|
|
||||||
|
|
||||||
let inputList = [
|
|
||||||
{
|
|
||||||
type: 'info',
|
|
||||||
action: 'Async',
|
|
||||||
endpint: 'render/async/single/set',
|
|
||||||
button_value: 'Render Single Set'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'choice-listing',
|
|
||||||
name: 'Models',
|
|
||||||
values: models_list,
|
|
||||||
ref: choiceListing
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'range',
|
|
||||||
name: 'Set ID',
|
|
||||||
min: 0,
|
|
||||||
max: 87,
|
|
||||||
step: 1,
|
|
||||||
unit: 'set',
|
|
||||||
ref: setIdRange
|
|
||||||
},
|
|
||||||
{
|
|
||||||
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: 'range',
|
|
||||||
name: 'Rotate',
|
|
||||||
min: 1,
|
|
||||||
max: 360,
|
|
||||||
step: 1,
|
|
||||||
unit: 'deg',
|
|
||||||
ref: angleRange
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
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 ) => {
|
|
||||||
return {
|
|
||||||
fileName: refs[0].current.value.replace('.blend', ''),
|
|
||||||
// fileName: 'testHand',
|
|
||||||
setID: refs[1].current.value,
|
|
||||||
cameraID: refs[2].current.value,
|
|
||||||
resolutionX: refs[3].current.value,
|
|
||||||
resolutionY: refs[4].current.value,
|
|
||||||
angle: refs[5].current.value / 62, // on backend 0.1 - 6.2 value
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<AbstractWebsocket
|
|
||||||
addressWS={ '/single/set/' }
|
|
||||||
inputList={ inputList }
|
|
||||||
refList={ refList }
|
|
||||||
bodyComparer={ bodyComparer }
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default RenderSingleSetForm
|
|
||||||
|
|
@ -1,445 +0,0 @@
|
||||||
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 RenderVectorSingleImageForm = () => {
|
|
||||||
|
|
||||||
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/image',
|
|
||||||
button_value: 'Render Single Image'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'choice-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.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,
|
|
||||||
vectors: vectors
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<AbstractWebsocket
|
|
||||||
addressWS={ '/vector/single/image/' }
|
|
||||||
inputList={ inputList }
|
|
||||||
refList={ refList }
|
|
||||||
bodyComparer={ bodyComparer }
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default RenderVectorSingleImageForm
|
|
||||||
|
|
@ -1,444 +0,0 @@
|
||||||
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: 'choice-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.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,
|
|
||||||
resolutionY: refs[4].current.value,
|
|
||||||
vectors: vectors
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<AbstractWebsocket
|
|
||||||
addressWS={ '/vector/single/set/' }
|
|
||||||
inputList={ inputList }
|
|
||||||
refList={ refList }
|
|
||||||
bodyComparer={ bodyComparer }
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default RenderVectorSingleSetForm
|
|
||||||
|
|
@ -1,70 +0,0 @@
|
||||||
import React, { useState, useEffect } from 'react'
|
|
||||||
|
|
||||||
import { useSelector, useDispatch } from 'react-redux'
|
|
||||||
|
|
||||||
import { userAuthSelector } from '../../../redux/slices/userAuthSlice'
|
|
||||||
import userAuthAsyncThunk from '../../../redux/asyncThunks/userAuthAsyncThunk'
|
|
||||||
|
|
||||||
import FormGenerator from '../formGenerator'
|
|
||||||
|
|
||||||
|
|
||||||
const UserLoginForm = () => {
|
|
||||||
|
|
||||||
const usernameInput = React.createRef()
|
|
||||||
const passwordInput = React.createRef()
|
|
||||||
|
|
||||||
const dispatch = useDispatch()
|
|
||||||
const { info } = useSelector( userAuthSelector )
|
|
||||||
|
|
||||||
let refList = [
|
|
||||||
usernameInput,
|
|
||||||
passwordInput
|
|
||||||
]
|
|
||||||
|
|
||||||
let inputList = [
|
|
||||||
{
|
|
||||||
type: 'info',
|
|
||||||
action: 'Create',
|
|
||||||
endpint: 'user/auth/login',
|
|
||||||
button_value: 'Sign In'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'text',
|
|
||||||
name: 'Username',
|
|
||||||
ref: usernameInput
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'password',
|
|
||||||
name: 'Password',
|
|
||||||
ref: passwordInput
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
const login = async ( refs ) => {
|
|
||||||
let pass = {
|
|
||||||
username: refs[0].current.value,
|
|
||||||
password: refs[1].current.value
|
|
||||||
}
|
|
||||||
dispatch(
|
|
||||||
userAuthAsyncThunk.fetchLogin(
|
|
||||||
pass
|
|
||||||
)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<FormGenerator
|
|
||||||
inputList={ inputList }
|
|
||||||
refList={ refList }
|
|
||||||
action={ login }
|
|
||||||
/>
|
|
||||||
<div className='form_info'>
|
|
||||||
{ info }
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
export default UserLoginForm
|
|
||||||
|
|
@ -1,78 +0,0 @@
|
||||||
import React, { useState, useEffect } from 'react'
|
|
||||||
|
|
||||||
import { useSelector, useDispatch } from 'react-redux'
|
|
||||||
|
|
||||||
import { userCrudSelector } from '../../../redux/slices/userCrudSlice'
|
|
||||||
import userCrudAsyncThunk from '../../../redux/asyncThunks/userCrudAsyncThunk'
|
|
||||||
|
|
||||||
import FormGenerator from '../formGenerator'
|
|
||||||
|
|
||||||
|
|
||||||
const UserRegisterForm = () => {
|
|
||||||
|
|
||||||
const usernameInput = React.createRef()
|
|
||||||
const passwordInput = React.createRef()
|
|
||||||
const emailInput = React.createRef()
|
|
||||||
|
|
||||||
const dispatch = useDispatch()
|
|
||||||
const { info } = useSelector( userCrudSelector )
|
|
||||||
|
|
||||||
let refList = [
|
|
||||||
usernameInput,
|
|
||||||
passwordInput,
|
|
||||||
emailInput
|
|
||||||
]
|
|
||||||
|
|
||||||
let inputList = [
|
|
||||||
{
|
|
||||||
type: 'info',
|
|
||||||
action: 'Create',
|
|
||||||
endpint: 'user/auth/login',
|
|
||||||
button_value: 'Sign Up'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'text',
|
|
||||||
name: 'Username',
|
|
||||||
ref: usernameInput
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'password',
|
|
||||||
name: 'Password',
|
|
||||||
ref: passwordInput
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'text',
|
|
||||||
name: 'Email',
|
|
||||||
ref: emailInput
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
const register = async ( refs ) => {
|
|
||||||
let pass = {
|
|
||||||
username: refs[0].current.value,
|
|
||||||
password: refs[1].current.value,
|
|
||||||
email: refs[2].current.value,
|
|
||||||
}
|
|
||||||
dispatch(
|
|
||||||
userCrudAsyncThunk.fetchRegister(
|
|
||||||
pass
|
|
||||||
)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<FormGenerator
|
|
||||||
inputList={ inputList }
|
|
||||||
refList={ refList }
|
|
||||||
action={ register }
|
|
||||||
/>
|
|
||||||
<div className='form_info'>
|
|
||||||
{ info }
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
export default UserRegisterForm
|
|
||||||
|
|
@ -1,77 +0,0 @@
|
||||||
import React, { useState, useEffect } from 'react'
|
|
||||||
|
|
||||||
import { useSelector, useDispatch } from 'react-redux'
|
|
||||||
|
|
||||||
import { userAuthSelector } from '../../../redux/slices/userAuthSlice'
|
|
||||||
import { userCrudSelector } from '../../../redux/slices/userCrudSlice'
|
|
||||||
|
|
||||||
import { deleteUser } from '../../../redux/slices/userAuthSlice'
|
|
||||||
|
|
||||||
import userCrudAsyncThunk from '../../../redux/asyncThunks/userCrudAsyncThunk'
|
|
||||||
|
|
||||||
import FormGenerator from '../formGenerator'
|
|
||||||
|
|
||||||
|
|
||||||
const UserDeleteForm = () => {
|
|
||||||
|
|
||||||
const usernameInput = React.createRef()
|
|
||||||
|
|
||||||
const { user, token } = useSelector( userAuthSelector )
|
|
||||||
|
|
||||||
const dispatch = useDispatch()
|
|
||||||
const { info } = useSelector( userCrudSelector )
|
|
||||||
|
|
||||||
let refList = [
|
|
||||||
usernameInput,
|
|
||||||
]
|
|
||||||
|
|
||||||
let inputList = [
|
|
||||||
{
|
|
||||||
type: 'info',
|
|
||||||
action: 'Create',
|
|
||||||
endpint: 'user/crud/delete',
|
|
||||||
button_value: 'Delete'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'text',
|
|
||||||
name: 'Username',
|
|
||||||
ref: usernameInput
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
const handleDelete = async ( refs ) => {
|
|
||||||
if ( refs[0].current.value === user.username ) {
|
|
||||||
let pass = {
|
|
||||||
token: token,
|
|
||||||
user_id: user.id
|
|
||||||
}
|
|
||||||
dispatch(
|
|
||||||
deleteUser()
|
|
||||||
)
|
|
||||||
dispatch(
|
|
||||||
userCrudAsyncThunk.fetchDeleteUser(
|
|
||||||
pass
|
|
||||||
)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="float_form_model"
|
|
||||||
style={ { marginTop: '17%'} }
|
|
||||||
>
|
|
||||||
<FormGenerator
|
|
||||||
inputList={ inputList }
|
|
||||||
refList={ refList }
|
|
||||||
action={ handleDelete }
|
|
||||||
/>
|
|
||||||
<div className='form_info'>
|
|
||||||
{ info }
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
export default UserDeleteForm
|
|
||||||
|
|
@ -1,87 +0,0 @@
|
||||||
import React, { useState, useEffect } from 'react'
|
|
||||||
|
|
||||||
import { useSelector, useDispatch } from 'react-redux'
|
|
||||||
|
|
||||||
import { userCrudSelector } from '../../../redux/slices/userCrudSlice'
|
|
||||||
import { userAuthSelector } from '../../../redux/slices/userAuthSlice'
|
|
||||||
import userCrudAsyncThunk from '../../../redux/asyncThunks/userCrudAsyncThunk'
|
|
||||||
|
|
||||||
import FormGenerator from '../formGenerator'
|
|
||||||
|
|
||||||
|
|
||||||
const UserUpdateForm = () => {
|
|
||||||
|
|
||||||
const usernameInput = React.createRef()
|
|
||||||
const passwordInput = React.createRef()
|
|
||||||
const emailInput = React.createRef()
|
|
||||||
|
|
||||||
const dispatch = useDispatch()
|
|
||||||
const { info } = useSelector( userCrudSelector )
|
|
||||||
const { user, token } = useSelector( userAuthSelector )
|
|
||||||
|
|
||||||
let refList = [
|
|
||||||
usernameInput,
|
|
||||||
passwordInput,
|
|
||||||
emailInput
|
|
||||||
]
|
|
||||||
|
|
||||||
let inputList = [
|
|
||||||
{
|
|
||||||
type: 'info',
|
|
||||||
action: 'Create',
|
|
||||||
endpint: 'user/crud/update',
|
|
||||||
button_value: 'Update User'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'text',
|
|
||||||
name: 'Username',
|
|
||||||
ref: usernameInput
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'password',
|
|
||||||
name: 'Password',
|
|
||||||
ref: passwordInput
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'text',
|
|
||||||
name: 'Email',
|
|
||||||
ref: emailInput
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
const update = async ( refs ) => {
|
|
||||||
let pass = {
|
|
||||||
user_id: user.id,
|
|
||||||
token: token,
|
|
||||||
user: {
|
|
||||||
username: refs[0].current.value,
|
|
||||||
password: refs[1].current.value,
|
|
||||||
email: refs[2].current.value,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
dispatch(
|
|
||||||
userCrudAsyncThunk.fetchUpdateUser(
|
|
||||||
pass
|
|
||||||
)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="float_form_model"
|
|
||||||
style={ { marginTop: '10%'} }
|
|
||||||
>
|
|
||||||
<FormGenerator
|
|
||||||
inputList={ inputList }
|
|
||||||
refList={ refList }
|
|
||||||
action={ update }
|
|
||||||
/>
|
|
||||||
<div className='form_info'>
|
|
||||||
{ info }
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
export default UserUpdateForm
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
|
|
@ -0,0 +1,54 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import { Link } from "gatsby"
|
||||||
|
|
||||||
|
// styles
|
||||||
|
const pageStyles = {
|
||||||
|
color: "#232129",
|
||||||
|
padding: "96px",
|
||||||
|
fontFamily: "-apple-system, Roboto, sans-serif, serif",
|
||||||
|
}
|
||||||
|
const headingStyles = {
|
||||||
|
marginTop: 0,
|
||||||
|
marginBottom: 64,
|
||||||
|
maxWidth: 320,
|
||||||
|
}
|
||||||
|
|
||||||
|
const paragraphStyles = {
|
||||||
|
marginBottom: 48,
|
||||||
|
}
|
||||||
|
const codeStyles = {
|
||||||
|
color: "#8A6534",
|
||||||
|
padding: 4,
|
||||||
|
backgroundColor: "#FFF4DB",
|
||||||
|
fontSize: "1.25rem",
|
||||||
|
borderRadius: 4,
|
||||||
|
}
|
||||||
|
|
||||||
|
// markup
|
||||||
|
const NotFoundPage = () => {
|
||||||
|
return (
|
||||||
|
<main style={pageStyles}>
|
||||||
|
<title>Not found</title>
|
||||||
|
<h1 style={headingStyles}>Page not found</h1>
|
||||||
|
<p style={paragraphStyles}>
|
||||||
|
Sorry{" "}
|
||||||
|
<span role="img" aria-label="Pensive emoji">
|
||||||
|
😔
|
||||||
|
</span>{" "}
|
||||||
|
we couldn’t find what you were looking for.
|
||||||
|
<br />
|
||||||
|
{process.env.NODE_ENV === "development" ? (
|
||||||
|
<>
|
||||||
|
<br />
|
||||||
|
Try creating a page in <code style={codeStyles}>src/pages/</code>.
|
||||||
|
<br />
|
||||||
|
</>
|
||||||
|
) : null}
|
||||||
|
<br />
|
||||||
|
<Link to="/">Go home</Link>.
|
||||||
|
</p>
|
||||||
|
</main>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default NotFoundPage
|
||||||
|
|
@ -1,94 +0,0 @@
|
||||||
import React from 'react'
|
|
||||||
import Particles from 'react-particles-js'
|
|
||||||
|
|
||||||
|
|
||||||
const CanvasBackgroundAnimation = () => {
|
|
||||||
|
|
||||||
let particleColor = '#008000'
|
|
||||||
let darkGreen = '#005e00'
|
|
||||||
let menuColor = '#161c1d'
|
|
||||||
|
|
||||||
let params = {
|
|
||||||
particles: {
|
|
||||||
number: { value: 120, density: { enable: true, value_area: 800 } },
|
|
||||||
color: { value: particleColor },
|
|
||||||
shape: {
|
|
||||||
type: "circle",
|
|
||||||
stroke: { width: 0, color: darkGreen },
|
|
||||||
polygon: { nb_sides: 5 }
|
|
||||||
},
|
|
||||||
opacity: {
|
|
||||||
value: 1,
|
|
||||||
random: false,
|
|
||||||
anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false }
|
|
||||||
},
|
|
||||||
size: {
|
|
||||||
value: 3,
|
|
||||||
random: true,
|
|
||||||
anim: { enable: false, speed: 40, size_min: 0.1, sync: false }
|
|
||||||
},
|
|
||||||
line_linked: {
|
|
||||||
enable: true,
|
|
||||||
distance: 150,
|
|
||||||
color: darkGreen,
|
|
||||||
opacity: 0.4,
|
|
||||||
width: 1
|
|
||||||
},
|
|
||||||
move: {
|
|
||||||
enable: true,
|
|
||||||
speed: 6,
|
|
||||||
direction: "none",
|
|
||||||
random: false,
|
|
||||||
straight: false,
|
|
||||||
out_mode: "out",
|
|
||||||
bounce: false,
|
|
||||||
attract: { enable: false, rotateX: 600, rotateY: 1200 }
|
|
||||||
}
|
|
||||||
},
|
|
||||||
interactivity: {
|
|
||||||
detect_on: "canvas",
|
|
||||||
events: {
|
|
||||||
onhover: { enable: true, mode: "repulse" },
|
|
||||||
onclick: { enable: true, mode: "push" },
|
|
||||||
resize: true
|
|
||||||
},
|
|
||||||
},
|
|
||||||
modes: {
|
|
||||||
grab: {
|
|
||||||
distance: 400,
|
|
||||||
line_linked: {
|
|
||||||
opacity: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
bubble: {
|
|
||||||
distance: 400,
|
|
||||||
size: 40,
|
|
||||||
duration: 2,
|
|
||||||
opacity: 8,
|
|
||||||
speed: 3
|
|
||||||
},
|
|
||||||
repulse: {
|
|
||||||
distance: 200,
|
|
||||||
duration: 0.4
|
|
||||||
},
|
|
||||||
push: { particles_nb: 4 },
|
|
||||||
remove: { particles_nb: 2 }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Particles
|
|
||||||
params={ params }
|
|
||||||
style={
|
|
||||||
{
|
|
||||||
width: '100%',
|
|
||||||
height: '100%',
|
|
||||||
zIndex: '-100',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
export default CanvasBackgroundAnimation
|
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
import React, { useState, useEffect } from 'react'
|
|
||||||
|
|
||||||
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 style={ __handleSwap( 'show_models_and_download', movement ) }>
|
|
||||||
<ModelShowAndDownloadForm />
|
|
||||||
</div>
|
|
||||||
<div style={ __handleSwap( 'upload_model', movement ) }>
|
|
||||||
<ModelUpload />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ModelCrudIndex
|
|
||||||
|
|
@ -1,262 +0,0 @@
|
||||||
import React, { useState, useEffect } from 'react'
|
|
||||||
import { useSelector, useDispatch } from 'react-redux'
|
|
||||||
|
|
||||||
import { userAuthSelector } from '../../redux/slices/userAuthSlice'
|
|
||||||
import { userCrudSelector } from '../../redux/slices/userCrudSlice'
|
|
||||||
|
|
||||||
import userCrudAsyncThunk from '../../redux/asyncThunks/userCrudAsyncThunk'
|
|
||||||
import userAuthAsyncThunk from '../../redux/asyncThunks/userAuthAsyncThunk'
|
|
||||||
|
|
||||||
|
|
||||||
const __setShowGeneral = ( view, key, movements ) => {
|
|
||||||
|
|
||||||
let user_default = {
|
|
||||||
update_user: false,
|
|
||||||
delete_user: false
|
|
||||||
}
|
|
||||||
|
|
||||||
let model_default = {
|
|
||||||
show_models_and_dwonload: false,
|
|
||||||
upload_model: false
|
|
||||||
}
|
|
||||||
|
|
||||||
let render_default = {
|
|
||||||
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 = user_default
|
|
||||||
new_move[key] = true
|
|
||||||
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 = model_default
|
|
||||||
new_move[key] = true
|
|
||||||
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 = render_default
|
|
||||||
if ( key in new_move ) {
|
|
||||||
new_move[key] = true
|
|
||||||
movements.render_view.setRenderView(
|
|
||||||
new_move
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
new_move['render_functionality'][key] = true
|
|
||||||
movements.render_view.setRenderView(
|
|
||||||
new_move
|
|
||||||
)
|
|
||||||
}
|
|
||||||
movements.model_view.setModelCrudView(
|
|
||||||
model_default
|
|
||||||
)
|
|
||||||
movements.user_view.setUserCrudView(
|
|
||||||
user_default
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
const __styleChanger = ( bool ) => {
|
|
||||||
|
|
||||||
let display = {
|
|
||||||
display: 'block'
|
|
||||||
}
|
|
||||||
|
|
||||||
let hide = {
|
|
||||||
display: 'none'
|
|
||||||
}
|
|
||||||
|
|
||||||
return bool ? display : hide
|
|
||||||
}
|
|
||||||
|
|
||||||
const NavigationBar = ({ movements }) => {
|
|
||||||
|
|
||||||
const { user_get } = useSelector(userCrudSelector)
|
|
||||||
const { token, user } = useSelector(userAuthSelector)
|
|
||||||
|
|
||||||
const dispatch = useDispatch()
|
|
||||||
|
|
||||||
useEffect( () => {
|
|
||||||
if ( Object.keys(user_get).length === 0 && token !== '' && user.id > 0)
|
|
||||||
dispatch(
|
|
||||||
userCrudAsyncThunk.fetchGetOneUser(
|
|
||||||
{
|
|
||||||
user_id: user.id,
|
|
||||||
token: token
|
|
||||||
}
|
|
||||||
)
|
|
||||||
)
|
|
||||||
})
|
|
||||||
|
|
||||||
const [showAccount, setShowAccount] = useState(false)
|
|
||||||
const [showModels, setShowModels] = useState(false)
|
|
||||||
const [showRender, setShowRender] = useState(false)
|
|
||||||
const [showRenderFunc, setShowRenderFunc] = useState(false)
|
|
||||||
|
|
||||||
const [clickHide, setClickHide] = useState(true)
|
|
||||||
|
|
||||||
const logout = async () => {
|
|
||||||
dispatch(
|
|
||||||
userAuthAsyncThunk.fetchLogout(
|
|
||||||
token
|
|
||||||
)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
return(
|
|
||||||
<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 ) }
|
|
||||||
className='nav_bar_header'
|
|
||||||
>
|
|
||||||
<pre> ├── </pre> <p> Account Settings </p>
|
|
||||||
</div>
|
|
||||||
<div style={ __styleChanger( showAccount) }>
|
|
||||||
<div>
|
|
||||||
<div className='nav_bar_option'>
|
|
||||||
<pre> │ ├── </pre> <p> User info </p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<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 ) }
|
|
||||||
className='nav_bar_option'
|
|
||||||
>
|
|
||||||
<pre> │ ├── </pre> <p> Update User </p>
|
|
||||||
</div>
|
|
||||||
<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 ) }
|
|
||||||
className='nav_bar_header'
|
|
||||||
>
|
|
||||||
<pre> ├── </pre><p>Models</p>
|
|
||||||
</div>
|
|
||||||
<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 ) }
|
|
||||||
className='nav_bar_option'
|
|
||||||
>
|
|
||||||
<pre> │ └── </pre> <p> Upload Model</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div
|
|
||||||
onClick={ () => setShowRender( !showRender ) }
|
|
||||||
className='nav_bar_header'
|
|
||||||
>
|
|
||||||
<pre> ├── </pre> <p> Render </p>
|
|
||||||
</div>
|
|
||||||
<div style={ __styleChanger( showRender ) }>
|
|
||||||
<div>
|
|
||||||
<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 ) }
|
|
||||||
className='nav_bar_option'
|
|
||||||
>
|
|
||||||
<pre> │ │ ├── </pre> <p> Render Single Image </p>
|
|
||||||
</div>
|
|
||||||
<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 ) }
|
|
||||||
className='nav_bar_option'
|
|
||||||
>
|
|
||||||
<pre> │ │ ├── </pre> <p> Render All Sets</p>
|
|
||||||
</div>
|
|
||||||
<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 ) }
|
|
||||||
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>
|
|
||||||
<div onClick={ () => logout() } className='nav_bar_header'>
|
|
||||||
<pre> └── </pre><p> Sign Out</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default NavigationBar
|
|
||||||
|
|
@ -1,67 +0,0 @@
|
||||||
import React, { useState, useEffect } from 'react'
|
|
||||||
|
|
||||||
import RenderShowAndDownloadForm from '../../../components/forms/render_crud/renderShowReadyRendersAndDownload'
|
|
||||||
|
|
||||||
import RenderSingleImageForm from '../../../components/forms/render_websocket/renderSingleImage'
|
|
||||||
import RenderSingleSetForm from '../../../components/forms/render_websocket/renderSingleSet'
|
|
||||||
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) => {
|
|
||||||
|
|
||||||
let display = {
|
|
||||||
display: 'block'
|
|
||||||
}
|
|
||||||
|
|
||||||
let hide = {
|
|
||||||
display: 'none'
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(movement)
|
|
||||||
|
|
||||||
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']['render_functionality'][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 style={ __handleSwap( 'render_single_image', movement ) }>
|
|
||||||
<RenderSingleImageForm />
|
|
||||||
</div>
|
|
||||||
<div style={ __handleSwap( 'render_single_set', movement ) }>
|
|
||||||
<RenderSingleSetForm />
|
|
||||||
</div>
|
|
||||||
<div style={ __handleSwap( 'render_all', movement ) }>
|
|
||||||
<RenderAllForm />
|
|
||||||
</div>
|
|
||||||
<div style={ __handleSwap( 'render_image_by_vector', movement ) }>
|
|
||||||
<RenderVectorSingleImageForm />
|
|
||||||
</div>
|
|
||||||
<div style={ __handleSwap( 'render_set_by_vector', movement ) }>
|
|
||||||
<RenderVectorSingleSetForm />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default RenderIndex
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
import React, { useState, useEffect } from 'react'
|
|
||||||
|
|
||||||
const RenderWebsocketIndex = () => {
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default RenderWebsocketIndex
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
import React, { useState, useEffect } from 'react'
|
|
||||||
|
|
||||||
import VerifyUserSession from './rootUtils'
|
|
||||||
|
|
||||||
const Root = () => {
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<VerifyUserSession />
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Root
|
|
||||||
|
|
@ -1,104 +0,0 @@
|
||||||
import React, { useState, useEffect } from 'react'
|
|
||||||
import { useSelector } from 'react-redux'
|
|
||||||
|
|
||||||
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 RenderIndex from './render/renderIndex'
|
|
||||||
|
|
||||||
import NavigationBar from './navigationBar'
|
|
||||||
import CanvasBackgroundAnimation from './canvasBackgroundAnimation'
|
|
||||||
|
|
||||||
|
|
||||||
const GeneralView = () => {
|
|
||||||
|
|
||||||
const [userCrudView, setUserCrudView] = useState(
|
|
||||||
{
|
|
||||||
update_user: false,
|
|
||||||
delete_user: false
|
|
||||||
}
|
|
||||||
)
|
|
||||||
const [modelCrudView, setModelCrudView] = useState(
|
|
||||||
{
|
|
||||||
show_models_and_download: false,
|
|
||||||
upload_model: false
|
|
||||||
}
|
|
||||||
)
|
|
||||||
const [renderCrudView, setRenderCrudView] = useState(
|
|
||||||
{
|
|
||||||
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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
let movements = {
|
|
||||||
user_view: {
|
|
||||||
userCrudView: userCrudView,
|
|
||||||
setUserCrudView: setUserCrudView
|
|
||||||
},
|
|
||||||
model_view: {
|
|
||||||
modelCrudView: modelCrudView,
|
|
||||||
setModelCrudView: setModelCrudView
|
|
||||||
},
|
|
||||||
render_view: {
|
|
||||||
renderView: renderCrudView,
|
|
||||||
setRenderView: setRenderCrudView
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<NavigationBar
|
|
||||||
movements={ movements }
|
|
||||||
/>
|
|
||||||
<UserCrudIndex
|
|
||||||
movement={ movements.user_view.userCrudView }
|
|
||||||
/>
|
|
||||||
<ModelCrudIndex
|
|
||||||
movement={ movements.model_view.modelCrudView }
|
|
||||||
/>
|
|
||||||
<RenderIndex
|
|
||||||
movement={ movements.render_view.renderView }
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
const VerifyUserSession = () => {
|
|
||||||
|
|
||||||
const { token, user } = useSelector(userAuthSelector)
|
|
||||||
|
|
||||||
const [showGeneral, setShowGeneral] = useState(false)
|
|
||||||
|
|
||||||
useEffect(
|
|
||||||
() => {
|
|
||||||
if ( user.id > 0 && token !== '' && showGeneral === false ) {
|
|
||||||
setShowGeneral(true)
|
|
||||||
} else if ( user.id <= 0 && token === '' && showGeneral === true ) {
|
|
||||||
setShowGeneral(false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
{
|
|
||||||
showGeneral
|
|
||||||
? <GeneralView />
|
|
||||||
: <UserAuthIndex />
|
|
||||||
}
|
|
||||||
<CanvasBackgroundAnimation />
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default VerifyUserSession
|
|
||||||
|
|
@ -1,38 +0,0 @@
|
||||||
import React, { useState, useEffect } from 'react'
|
|
||||||
|
|
||||||
import UserLoginForm from '../../../components/forms/user_auth/userLogin'
|
|
||||||
import UserRegisterForm from '../../../components/forms/user_auth/userRegister'
|
|
||||||
|
|
||||||
|
|
||||||
const UserAuthIndex = () => {
|
|
||||||
|
|
||||||
const [swapForm, setSwapForm] = useState(true)
|
|
||||||
|
|
||||||
const handleSwap = (event) => {
|
|
||||||
event.preventDefault()
|
|
||||||
setSwapForm(
|
|
||||||
!swapForm
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="float_form_auth"
|
|
||||||
style={ swapForm ? { height: '200px', marginTop: '15%' } : { height: '290px', marginTop: '13%' } }
|
|
||||||
>
|
|
||||||
{ swapForm
|
|
||||||
? <UserLoginForm />
|
|
||||||
: <UserRegisterForm />
|
|
||||||
}
|
|
||||||
<button onClick={ (event) => handleSwap(event) }>
|
|
||||||
{
|
|
||||||
swapForm
|
|
||||||
? 'Sign Up'
|
|
||||||
: 'Sign In'
|
|
||||||
}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default UserAuthIndex
|
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
import React, { useState, useEffect } from 'react'
|
|
||||||
|
|
||||||
import UserUpdateForm from '../../../components/forms/user_crud/userUpdate'
|
|
||||||
import UserDeleteForm from '../../../components/forms/user_crud/userDelete'
|
|
||||||
|
|
||||||
|
|
||||||
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 UserCrudIndex = ( movement ) => {
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<div style={ __handleSwap( 'update_user', movement ) }>
|
|
||||||
<UserUpdateForm />
|
|
||||||
</div>
|
|
||||||
<div style={ __handleSwap( 'delete_user', movement ) }>
|
|
||||||
<UserDeleteForm />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default UserCrudIndex
|
|
||||||
|
|
@ -1,25 +1,149 @@
|
||||||
import React from 'react';
|
import * as React from "react"
|
||||||
import '../styles/general.scss'
|
|
||||||
|
|
||||||
import { Provider } from 'react-redux';
|
// styles
|
||||||
import { store } from '../redux/store';
|
const pageStyles = {
|
||||||
|
color: "#232129",
|
||||||
|
padding: "96px",
|
||||||
|
fontFamily: "-apple-system, Roboto, sans-serif, serif",
|
||||||
|
}
|
||||||
|
const headingStyles = {
|
||||||
|
marginTop: 0,
|
||||||
|
marginBottom: 64,
|
||||||
|
maxWidth: 320,
|
||||||
|
}
|
||||||
|
const headingAccentStyles = {
|
||||||
|
color: "#663399",
|
||||||
|
}
|
||||||
|
const paragraphStyles = {
|
||||||
|
marginBottom: 48,
|
||||||
|
}
|
||||||
|
const codeStyles = {
|
||||||
|
color: "#8A6534",
|
||||||
|
padding: 4,
|
||||||
|
backgroundColor: "#FFF4DB",
|
||||||
|
fontSize: "1.25rem",
|
||||||
|
borderRadius: 4,
|
||||||
|
}
|
||||||
|
const listStyles = {
|
||||||
|
marginBottom: 96,
|
||||||
|
paddingLeft: 0,
|
||||||
|
}
|
||||||
|
const listItemStyles = {
|
||||||
|
fontWeight: "300",
|
||||||
|
fontSize: "24px",
|
||||||
|
maxWidth: "560px",
|
||||||
|
}
|
||||||
|
|
||||||
import Root from './func_group/root';
|
const linkStyle = {
|
||||||
|
color: "#8954A8",
|
||||||
|
fontWeight: "bold",
|
||||||
|
fontSize: "16px",
|
||||||
|
verticalAlign: "5%",
|
||||||
|
}
|
||||||
|
|
||||||
// if you have problem with watchers - use it:
|
const docLinkStyle = {
|
||||||
// echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
|
...linkStyle,
|
||||||
|
listStyleType: "none",
|
||||||
|
marginBottom: 24,
|
||||||
|
}
|
||||||
|
|
||||||
|
const descriptionStyle = {
|
||||||
|
color: "#232129",
|
||||||
|
fontSize: "14px",
|
||||||
|
}
|
||||||
|
|
||||||
|
const docLink = {
|
||||||
|
text: "Documentation",
|
||||||
|
url: "https://www.gatsbyjs.com/docs/",
|
||||||
|
color: "#8954A8",
|
||||||
|
}
|
||||||
|
// data
|
||||||
|
const links = [
|
||||||
|
{
|
||||||
|
text: "Tutorial",
|
||||||
|
url: "https://www.gatsbyjs.com/docs/tutorial/",
|
||||||
|
description:
|
||||||
|
"A great place to get started if you're new to web development. Designed to guide you through setting up your first Gatsby site.",
|
||||||
|
color: "#E95800",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "How to Guides",
|
||||||
|
url: "https://www.gatsbyjs.com/docs/how-to/",
|
||||||
|
description:
|
||||||
|
"Practical step-by-step guides to help you achieve a specific goal. Most useful when you're trying to get something done.",
|
||||||
|
color: "#1099A8",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "Reference Guides",
|
||||||
|
url: "https://www.gatsbyjs.com/docs/reference/",
|
||||||
|
description:
|
||||||
|
"Nitty-gritty technical descriptions of how Gatsby works. Most useful when you need detailed information about Gatsby's APIs.",
|
||||||
|
color: "#BC027F",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "Conceptual Guides",
|
||||||
|
url: "https://www.gatsbyjs.com/docs/conceptual/",
|
||||||
|
description:
|
||||||
|
"Big-picture explanations of higher-level Gatsby concepts. Most useful for building understanding of a particular topic.",
|
||||||
|
color: "#0D96F2",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "Plugin Library",
|
||||||
|
url: "https://www.gatsbyjs.com/plugins",
|
||||||
|
description:
|
||||||
|
"Add functionality and customize your Gatsby site or app with thousands of plugins built by our amazing developer community.",
|
||||||
|
color: "#000000",
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
// markup
|
||||||
const IndexPage = () => {
|
const IndexPage = () => {
|
||||||
if (typeof window !== `undefined` && store !== 0)
|
|
||||||
return (
|
return (
|
||||||
<Provider store={ store }>
|
<main style={pageStyles}>
|
||||||
<Root />
|
<title>Home Page</title>
|
||||||
</Provider>
|
<h1 style={headingStyles}>
|
||||||
)
|
Congratulations
|
||||||
else
|
<br />
|
||||||
return (
|
<span style={headingAccentStyles}>— you just made a Gatsby site! </span>
|
||||||
<>
|
<span role="img" aria-label="Party popper emojis">
|
||||||
</>
|
🎉🎉🎉
|
||||||
|
</span>
|
||||||
|
</h1>
|
||||||
|
<p style={paragraphStyles}>
|
||||||
|
Edit <code style={codeStyles}>src/pages/index.js</code> to see this page
|
||||||
|
update in real-time.{" "}
|
||||||
|
<span role="img" aria-label="Sunglasses smiley emoji">
|
||||||
|
😎
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<ul style={listStyles}>
|
||||||
|
<li style={docLinkStyle}>
|
||||||
|
<a
|
||||||
|
style={linkStyle}
|
||||||
|
href={`${docLink.url}?utm_source=starter&utm_medium=start-page&utm_campaign=minimal-starter`}
|
||||||
|
>
|
||||||
|
{docLink.text}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
{links.map(link => (
|
||||||
|
<li key={link.url} style={{ ...listItemStyles, color: link.color }}>
|
||||||
|
<span>
|
||||||
|
<a
|
||||||
|
style={linkStyle}
|
||||||
|
href={`${link.url}?utm_source=starter&utm_medium=start-page&utm_campaign=minimal-starter`}
|
||||||
|
>
|
||||||
|
{link.text}
|
||||||
|
</a>
|
||||||
|
<p style={descriptionStyle}>{link.description}</p>
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<img
|
||||||
|
alt="Gatsby G Logo"
|
||||||
|
src="data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a10 10 0 110 20 10 10 0 010-20zm0 2c-3.73 0-6.86 2.55-7.75 6L14 19.75c3.45-.89 6-4.02 6-7.75h-5.25v1.5h3.45a6.37 6.37 0 01-3.89 4.44L6.06 9.69C7 7.31 9.3 5.63 12 5.63c2.13 0 4 1.04 5.18 2.65l1.23-1.06A7.959 7.959 0 0012 4zm-8 8a8 8 0 008 8c.04 0 .09 0-8-8z' fill='%23639'/%3E%3C/svg%3E"
|
||||||
|
/>
|
||||||
|
</main>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
let API = '0.0.0.0:9090'
|
|
||||||
export const GeneralAddress = 'http://' + API
|
|
||||||
export const GeneralAddressWS = 'ws://' + API + '/render'
|
|
||||||
|
|
@ -1,144 +0,0 @@
|
||||||
import axios from 'axios'
|
|
||||||
import { GeneralAddress } from './abstractAddress'
|
|
||||||
|
|
||||||
const APIAddress = GeneralAddress
|
|
||||||
|
|
||||||
let defaultBody = {}
|
|
||||||
|
|
||||||
const _getList = async (endpoint, token) => {
|
|
||||||
return await responseAbstract(
|
|
||||||
endpoint,
|
|
||||||
'GET',
|
|
||||||
token,
|
|
||||||
defaultBody
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const _getOne = async (endpoint, objectId, token) => {
|
|
||||||
return await responseAbstract(
|
|
||||||
endpoint + objectId + '/',
|
|
||||||
'GET',
|
|
||||||
token,
|
|
||||||
defaultBody
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const _post = async (endpoint, body, token) => {
|
|
||||||
return await responseAbstract(
|
|
||||||
endpoint,
|
|
||||||
'POST',
|
|
||||||
token,
|
|
||||||
body
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const _patch = async (endpoint, objectId, body, token) => {
|
|
||||||
return await responseAbstract(
|
|
||||||
endpoint + objectId + '/',
|
|
||||||
'PATCH',
|
|
||||||
token,
|
|
||||||
body
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const _put = async (endpoint, objectId, body, token) => {
|
|
||||||
return await responseAbstract(
|
|
||||||
endpoint + objectId + '/',
|
|
||||||
'PUT',
|
|
||||||
token,
|
|
||||||
body
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const _delete = async (endpoint, objectId, token) => {
|
|
||||||
let slash = '/'
|
|
||||||
if ( objectId === '' )
|
|
||||||
slash = ''
|
|
||||||
return await responseAbstract(
|
|
||||||
endpoint + objectId + slash,
|
|
||||||
'DELETE',
|
|
||||||
token,
|
|
||||||
defaultBody
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
const responseAbstract = async (endpoint, method, token, body) => {
|
|
||||||
let response = await axios(
|
|
||||||
headerBuilder(
|
|
||||||
APIAddress + endpoint,
|
|
||||||
method,
|
|
||||||
token,
|
|
||||||
body,
|
|
||||||
)
|
|
||||||
)
|
|
||||||
return response
|
|
||||||
}
|
|
||||||
|
|
||||||
const headerBuilder = (url, method, token, body) => {
|
|
||||||
let headers_r = {
|
|
||||||
'authorization': token,
|
|
||||||
'x-csrftoken': getCookie('csrftoken'),
|
|
||||||
'accept': 'application/json',
|
|
||||||
'content-type': 'application/json'
|
|
||||||
}
|
|
||||||
let headers = {
|
|
||||||
url: url,
|
|
||||||
method: method,
|
|
||||||
headers: headers_r,
|
|
||||||
credentials: 'same-origin'
|
|
||||||
}
|
|
||||||
if (method === 'PUT' || method === 'POST' || method === 'PATCH') {
|
|
||||||
headers = Object.assign({}, headers, {
|
|
||||||
data: JSON.stringify(body)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
return headers
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* get cookie method for CSRF verification
|
|
||||||
* @param {string} name - name of handled cookie
|
|
||||||
*/
|
|
||||||
const getCookie = (name) => {
|
|
||||||
if (!document.cookie) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
const token = document.cookie.split(';')
|
|
||||||
.map(c => c.trim())
|
|
||||||
.filter(c => c.startsWith(name + '='));
|
|
||||||
|
|
||||||
if (token.length === 0) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
return decodeURIComponent(token[0].split('=')[1]);
|
|
||||||
}
|
|
||||||
|
|
||||||
const axiosFilePost = async ( endpoint, body, token ) => {
|
|
||||||
let formData = new FormData()
|
|
||||||
formData.append('file', body.file)
|
|
||||||
formData.append('user_id', body.user_id)
|
|
||||||
let response = await axios.post(
|
|
||||||
APIAddress + endpoint,
|
|
||||||
formData,
|
|
||||||
{
|
|
||||||
headers: {
|
|
||||||
'authorization': token,
|
|
||||||
'x-csrftoken': getCookie('csrftoken')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
console.log(response)
|
|
||||||
return response
|
|
||||||
}
|
|
||||||
|
|
||||||
export default {
|
|
||||||
APIAddress,
|
|
||||||
_getList,
|
|
||||||
_getOne,
|
|
||||||
_post,
|
|
||||||
_put,
|
|
||||||
_patch,
|
|
||||||
_delete,
|
|
||||||
axiosFilePost
|
|
||||||
}
|
|
||||||
|
|
@ -1,60 +0,0 @@
|
||||||
import { createAsyncThunk } from '@reduxjs/toolkit'
|
|
||||||
import abstractService from './abstracts/abstractService'
|
|
||||||
|
|
||||||
let endpoint = '/model/'
|
|
||||||
|
|
||||||
|
|
||||||
const fetchGetAllModels = createAsyncThunk(
|
|
||||||
'model/fetchGetAllModels',
|
|
||||||
async (
|
|
||||||
token,
|
|
||||||
thunkAPI
|
|
||||||
) => {
|
|
||||||
return await abstractService._getList(endpoint, token)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param body:
|
|
||||||
* param token: base64 token,
|
|
||||||
* param id: model id
|
|
||||||
*/
|
|
||||||
const fetchGetOneModelAndDownload = createAsyncThunk(
|
|
||||||
'model/fetchGetOneModelAndDownload',
|
|
||||||
async (
|
|
||||||
body,
|
|
||||||
thunkAPI
|
|
||||||
) => {
|
|
||||||
return await abstractService._getOne(
|
|
||||||
endpoint,
|
|
||||||
body.id,
|
|
||||||
body.token
|
|
||||||
)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param body:
|
|
||||||
* param token: base64 token,
|
|
||||||
* param file: file binary
|
|
||||||
* param user_id: user id
|
|
||||||
*/
|
|
||||||
const fetchUploadModel = createAsyncThunk(
|
|
||||||
'model/fetchUploadModel',
|
|
||||||
async (
|
|
||||||
body,
|
|
||||||
thunkAPI
|
|
||||||
) => {
|
|
||||||
return await abstractService.axiosFilePost(
|
|
||||||
endpoint,
|
|
||||||
body,
|
|
||||||
body.token
|
|
||||||
)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
export default {
|
|
||||||
fetchGetAllModels,
|
|
||||||
fetchGetOneModelAndDownload,
|
|
||||||
fetchUploadModel
|
|
||||||
}
|
|
||||||
|
|
@ -1,39 +0,0 @@
|
||||||
import { createAsyncThunk } from '@reduxjs/toolkit'
|
|
||||||
import abstractService from './abstracts/abstractService'
|
|
||||||
|
|
||||||
let endpoint = '/render/'
|
|
||||||
|
|
||||||
|
|
||||||
const fetchGetAllRenders = createAsyncThunk(
|
|
||||||
'render/fetchGetAllRenders',
|
|
||||||
async (
|
|
||||||
token,
|
|
||||||
thunkAPI
|
|
||||||
) => {
|
|
||||||
return await abstractService._getList(endpoint, token)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param body:
|
|
||||||
* param token: base64 token,
|
|
||||||
* param id: render id
|
|
||||||
*/
|
|
||||||
const fetchGetOneRenderAndDownload = createAsyncThunk(
|
|
||||||
'render/fetchGetOneRenderAndDownload',
|
|
||||||
async (
|
|
||||||
body,
|
|
||||||
thunkAPI
|
|
||||||
) => {
|
|
||||||
return await abstractService._getOne(
|
|
||||||
endpoint,
|
|
||||||
body.id,
|
|
||||||
body.token
|
|
||||||
)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
export default {
|
|
||||||
fetchGetAllRenders,
|
|
||||||
fetchGetOneRenderAndDownload
|
|
||||||
}
|
|
||||||
|
|
@ -1,113 +0,0 @@
|
||||||
import { createAsyncThunk } from '@reduxjs/toolkit'
|
|
||||||
import GeneralAddress from './abstracts/abstractAddress'
|
|
||||||
|
|
||||||
let endpoint_single_image = '/render/single/image/'
|
|
||||||
let endpoint_single_set = '/render/single/set/'
|
|
||||||
let endpoint_all = '/render/all/'
|
|
||||||
|
|
||||||
let endpoint_vector_single_image = '/render/vector/single/image/'
|
|
||||||
let endpoint_vector_single_set = '/render/vector/single/set/'
|
|
||||||
|
|
||||||
|
|
||||||
const __uuidv4 = () => {
|
|
||||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
|
|
||||||
/[xy]/g,
|
|
||||||
(c) => {
|
|
||||||
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
|
|
||||||
return v.toString(16);
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
*
|
|
||||||
* @param {string} endpoint:
|
|
||||||
* examples:
|
|
||||||
* 'image' - connect to single image ws renderer
|
|
||||||
* 'set' - connect to single set ws renderer
|
|
||||||
* 'all' - connect to all ws renderer
|
|
||||||
*
|
|
||||||
* 'vector/image' - connect to vector single image ws renderer
|
|
||||||
* 'vector/set' - connerct to vector single set ws renderer
|
|
||||||
*/
|
|
||||||
const __make_address = async (endpoint) => {
|
|
||||||
if (endpoint === 'image')
|
|
||||||
endpoint = endpoint_single_image
|
|
||||||
else if (endpoint === 'set')
|
|
||||||
endpoint = endpoint_single_set
|
|
||||||
else if (endpoint === 'all')
|
|
||||||
endpoint = endpoint_all
|
|
||||||
else if (endpoint === 'vector/image')
|
|
||||||
endpoint = endpoint_vector_single_image
|
|
||||||
else if (endpoint === 'vector/set')
|
|
||||||
endpoint = endpoint_vector_single_set
|
|
||||||
|
|
||||||
return GeneralAddress + endpoint
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param body:
|
|
||||||
* param token: token
|
|
||||||
* param endpoint:
|
|
||||||
* examples:
|
|
||||||
* 'image' - connect to single image ws renderer
|
|
||||||
* 'set' - connect to single set ws renderer
|
|
||||||
* 'all' - connect to all ws renderer
|
|
||||||
*
|
|
||||||
* 'vector/image' - connect to vector single image ws renderer
|
|
||||||
* 'vector/set' - connerct to vector single set ws renderer
|
|
||||||
*/
|
|
||||||
const fetchConnect = createAsyncThunk(
|
|
||||||
'render/async/fetchConnect',
|
|
||||||
async (
|
|
||||||
body,
|
|
||||||
thunkAPI
|
|
||||||
) => {
|
|
||||||
let uuid = __uuidv4()
|
|
||||||
let address = __make_address(body.endpoint)
|
|
||||||
return {
|
|
||||||
web_socket: new WebSocket(address + uuid),
|
|
||||||
address: address,
|
|
||||||
room_uuid: uuid
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param body:
|
|
||||||
* param token: token
|
|
||||||
* param message: message string
|
|
||||||
*/
|
|
||||||
const fetchSaveMessage = createAsyncThunk(
|
|
||||||
'render/async/fetchSaveMessage',
|
|
||||||
async (
|
|
||||||
body,
|
|
||||||
thunkAPI
|
|
||||||
) => {
|
|
||||||
return {
|
|
||||||
message: body
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param body:
|
|
||||||
* param token: token
|
|
||||||
*/
|
|
||||||
const fetchDisconnect = createAsyncThunk(
|
|
||||||
'render/async/fetchDisconnect',
|
|
||||||
async (
|
|
||||||
token,
|
|
||||||
thunkAPI
|
|
||||||
) => {
|
|
||||||
return {
|
|
||||||
web_socket: null,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
export default {
|
|
||||||
fetchConnect,
|
|
||||||
fetchSaveMessage,
|
|
||||||
fetchDisconnect
|
|
||||||
}
|
|
||||||
|
|
@ -1,46 +0,0 @@
|
||||||
import { createAsyncThunk } from '@reduxjs/toolkit'
|
|
||||||
import abstractService from './abstracts/abstractService'
|
|
||||||
|
|
||||||
let endpoint = '/user/auth'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param body:
|
|
||||||
* param username: username string
|
|
||||||
* param password: password string
|
|
||||||
*/
|
|
||||||
const fetchLogin = createAsyncThunk(
|
|
||||||
'user/auth/fetchLogin',
|
|
||||||
async (
|
|
||||||
body,
|
|
||||||
thunkAPI
|
|
||||||
) => {
|
|
||||||
return await abstractService._post(
|
|
||||||
endpoint,
|
|
||||||
body,
|
|
||||||
''
|
|
||||||
)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param body:
|
|
||||||
* param token: user token
|
|
||||||
*/
|
|
||||||
const fetchLogout = createAsyncThunk(
|
|
||||||
'user/auth/fetchLogout',
|
|
||||||
async (
|
|
||||||
token,
|
|
||||||
thunkAPI
|
|
||||||
) => {
|
|
||||||
return await abstractService._delete(
|
|
||||||
endpoint,
|
|
||||||
'',
|
|
||||||
token
|
|
||||||
)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
export default {
|
|
||||||
fetchLogin,
|
|
||||||
fetchLogout
|
|
||||||
}
|
|
||||||
|
|
@ -1,108 +0,0 @@
|
||||||
import { createAsyncThunk } from '@reduxjs/toolkit'
|
|
||||||
import abstractService from './abstracts/abstractService'
|
|
||||||
|
|
||||||
let endpoint = '/user/'
|
|
||||||
|
|
||||||
|
|
||||||
const fetchGetAllUsers = createAsyncThunk(
|
|
||||||
'user/fetchGetAllUsers',
|
|
||||||
async (
|
|
||||||
token,
|
|
||||||
thunkAPI
|
|
||||||
) => {
|
|
||||||
return await abstractService._getList(
|
|
||||||
endpoint,
|
|
||||||
token
|
|
||||||
)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param body:
|
|
||||||
* param token: token
|
|
||||||
* param user_id: user_id
|
|
||||||
*/
|
|
||||||
const fetchGetOneUser = createAsyncThunk(
|
|
||||||
'user/fetchGetAllUsers',
|
|
||||||
async (
|
|
||||||
body,
|
|
||||||
thunkAPI
|
|
||||||
) => {
|
|
||||||
return await abstractService._getOne(
|
|
||||||
endpoint,
|
|
||||||
body.user_id,
|
|
||||||
body.token
|
|
||||||
)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param body:
|
|
||||||
* param username: username string
|
|
||||||
* param password: password string
|
|
||||||
* param email: email string
|
|
||||||
*/
|
|
||||||
const fetchRegister = createAsyncThunk(
|
|
||||||
'user/fetchRegister',
|
|
||||||
async (
|
|
||||||
body,
|
|
||||||
thunkAPI
|
|
||||||
) => {
|
|
||||||
return await abstractService._post(
|
|
||||||
endpoint,
|
|
||||||
body,
|
|
||||||
''
|
|
||||||
)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param body:
|
|
||||||
* param token: token
|
|
||||||
* param user_id: user_id
|
|
||||||
* param user:
|
|
||||||
* param username: username
|
|
||||||
* param password: password
|
|
||||||
* param email: email
|
|
||||||
*/
|
|
||||||
const fetchUpdateUser = createAsyncThunk(
|
|
||||||
'user/fetchRegister',
|
|
||||||
async (
|
|
||||||
body,
|
|
||||||
thunkAPI
|
|
||||||
) => {
|
|
||||||
return await abstractService._patch(
|
|
||||||
endpoint,
|
|
||||||
body.user_id,
|
|
||||||
body.user,
|
|
||||||
body.token
|
|
||||||
)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param body:
|
|
||||||
* param user_id: user_id
|
|
||||||
* param token: user token
|
|
||||||
*/
|
|
||||||
const fetchDeleteUser = createAsyncThunk(
|
|
||||||
'user/fetchRegister',
|
|
||||||
async (
|
|
||||||
body,
|
|
||||||
thunkAPI
|
|
||||||
) => {
|
|
||||||
return await abstractService._delete(
|
|
||||||
endpoint,
|
|
||||||
body.user_id,
|
|
||||||
body.token
|
|
||||||
)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
export default {
|
|
||||||
fetchGetAllUsers,
|
|
||||||
fetchGetOneUser,
|
|
||||||
fetchRegister,
|
|
||||||
fetchUpdateUser,
|
|
||||||
fetchDeleteUser
|
|
||||||
}
|
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
import { createSlice } from '@reduxjs/toolkit'
|
|
||||||
import modelCrudAsyncThunk from '../asyncThunks/modelCrudAsyncThunk'
|
|
||||||
|
|
||||||
const modelCrudSlice = createSlice(
|
|
||||||
{
|
|
||||||
name: 'model',
|
|
||||||
initialState: {
|
|
||||||
models_list: [],
|
|
||||||
download_blend_file: '',
|
|
||||||
upload_blend_file_status: ''
|
|
||||||
},
|
|
||||||
reducers: {},
|
|
||||||
extraReducers: {
|
|
||||||
[modelCrudAsyncThunk.fetchGetAllModels.fulfilled.type]: (state, action) => {
|
|
||||||
state.models_list = action.payload.data
|
|
||||||
},
|
|
||||||
[modelCrudAsyncThunk.fetchGetOneModelAndDownload.fulfilled.type]: (state, action) => {
|
|
||||||
state.download_blend_file = action.payload.data
|
|
||||||
},
|
|
||||||
[modelCrudAsyncThunk.fetchUploadModel.fulfilled.type]: (state, action) => {
|
|
||||||
state.upload_blend_file_status = action.payload.data
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
export const modelCrudReducer = modelCrudSlice.reducer
|
|
||||||
|
|
||||||
export const modelCrudSelector = state => state.modelCrudReducer
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
import { createSlice } from '@reduxjs/toolkit'
|
|
||||||
import renderCrudAsyncThunk from '../asyncThunks/renderCrudAsyncThunk'
|
|
||||||
|
|
||||||
const renderCrudSlice = createSlice(
|
|
||||||
{
|
|
||||||
name: 'render',
|
|
||||||
initialState: {
|
|
||||||
render_list: [],
|
|
||||||
download_zip_file: ''
|
|
||||||
},
|
|
||||||
reducers: {},
|
|
||||||
extraReducers: {
|
|
||||||
[renderCrudAsyncThunk.fetchGetAllRenders.fulfilled.type]: (state, action) => {
|
|
||||||
state.render_list = action.payload.data
|
|
||||||
},
|
|
||||||
[renderCrudAsyncThunk.fetchGetOneRenderAndDownload.fulfilled.type]: (state, action) => {
|
|
||||||
state.download_zip_file = action.payload.data
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
export const renderCrudReducer = renderCrudSlice.reducer
|
|
||||||
|
|
||||||
export const renderCrudSelector = state => state.renderCrudReducer
|
|
||||||
|
|
@ -1,73 +0,0 @@
|
||||||
import { createSlice } from '@reduxjs/toolkit'
|
|
||||||
import renderWebsocketAsyncThunk from '../asyncThunks/renderWebsocketAsyncThunk'
|
|
||||||
|
|
||||||
import { GeneralAddressWS } from '../asyncThunks/abstracts/abstractAddress'
|
|
||||||
|
|
||||||
|
|
||||||
const __uuidv4 = () => {
|
|
||||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
|
|
||||||
/[xy]/g,
|
|
||||||
(c) => {
|
|
||||||
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
|
|
||||||
return v.toString(16);
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const initialState = {
|
|
||||||
web_socket_address: '',
|
|
||||||
address: '',
|
|
||||||
room_uuid: '',
|
|
||||||
messages: [],
|
|
||||||
percents: 0.0,
|
|
||||||
connected: false
|
|
||||||
}
|
|
||||||
|
|
||||||
const renderWebsocketSlice = createSlice(
|
|
||||||
{
|
|
||||||
name: 'render/async',
|
|
||||||
initialState,
|
|
||||||
reducers: {
|
|
||||||
connect(state, action) {
|
|
||||||
state.room_uuid = __uuidv4()
|
|
||||||
state.address = GeneralAddressWS + action.payload.address
|
|
||||||
state.web_socket_address = state.address + state.room_uuid
|
|
||||||
state.messages = []
|
|
||||||
state.percents = 0.0
|
|
||||||
state.connected = true
|
|
||||||
},
|
|
||||||
saveMessage(state, action) {
|
|
||||||
state.messages = [
|
|
||||||
...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 = ''
|
|
||||||
state.address = ''
|
|
||||||
state.room_uuid = ''
|
|
||||||
state.messages = []
|
|
||||||
state.connected = false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
extraReducers: {}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
export const renderWebsocketReducer = renderWebsocketSlice.reducer
|
|
||||||
|
|
||||||
export const { connect, saveMessage, disconnect } = renderWebsocketSlice.actions
|
|
||||||
|
|
||||||
export const renderWebsocketSelector = state => state.renderWebsocketReducer
|
|
||||||
|
|
@ -1,52 +0,0 @@
|
||||||
import { createSlice } from '@reduxjs/toolkit'
|
|
||||||
import userAuthAsyncThunk from '../asyncThunks/userAuthAsyncThunk'
|
|
||||||
|
|
||||||
const userAuthSlice = createSlice(
|
|
||||||
{
|
|
||||||
name: 'user/auth',
|
|
||||||
initialState: {
|
|
||||||
token: '',
|
|
||||||
user: {
|
|
||||||
id: 0,
|
|
||||||
username: '',
|
|
||||||
email: ''
|
|
||||||
},
|
|
||||||
info: ''
|
|
||||||
},
|
|
||||||
reducers: {
|
|
||||||
deleteUser(state) {
|
|
||||||
state.token = ''
|
|
||||||
state.user.id = 0
|
|
||||||
state.user.username = ''
|
|
||||||
state.user.email = ''
|
|
||||||
state.info = 'user has been deleted'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
extraReducers: {
|
|
||||||
[userAuthAsyncThunk.fetchLogin.fulfilled.type]: (state, action) => {
|
|
||||||
try {
|
|
||||||
state.token = action.payload.data.Authorization
|
|
||||||
state.user.id = action.payload.data.user.id
|
|
||||||
state.user.username = action.payload.data.user.username
|
|
||||||
state.user.email = action.payload.data.user.email
|
|
||||||
state.info = 'login success'
|
|
||||||
} catch {
|
|
||||||
state.info = 'login failed'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[userAuthAsyncThunk.fetchLogout.fulfilled.type]: (state, action) => {
|
|
||||||
state.token = ''
|
|
||||||
state.user.id = 0
|
|
||||||
state.user.username = ''
|
|
||||||
state.user.email = ''
|
|
||||||
state.info = action.payload.data.info
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
export const userAuthReducer = userAuthSlice.reducer
|
|
||||||
|
|
||||||
export const { deleteUser } = userAuthSlice.actions
|
|
||||||
|
|
||||||
export const userAuthSelector = state => state.userAuthReducer
|
|
||||||
|
|
@ -1,47 +0,0 @@
|
||||||
import { createSlice } from '@reduxjs/toolkit'
|
|
||||||
import userCrudAsyncThunk from '../asyncThunks/userCrudAsyncThunk'
|
|
||||||
|
|
||||||
const userCrudSlice = createSlice(
|
|
||||||
{
|
|
||||||
name: 'user',
|
|
||||||
initialState: {
|
|
||||||
users_list: [],
|
|
||||||
user_get: {},
|
|
||||||
user_register: {
|
|
||||||
id: -1,
|
|
||||||
username: '',
|
|
||||||
email: ''
|
|
||||||
},
|
|
||||||
user_update: {},
|
|
||||||
user_delete: '',
|
|
||||||
info: ''
|
|
||||||
},
|
|
||||||
reducers: {},
|
|
||||||
extraReducers: {
|
|
||||||
[userCrudAsyncThunk.fetchGetAllUsers.fulfilled.type]: (state, action) => {
|
|
||||||
state.users_list = action.payload.data
|
|
||||||
},
|
|
||||||
[userCrudAsyncThunk.fetchGetOneUser.fulfilled.type]: (state, action) => {
|
|
||||||
state.user_get = action.payload.data
|
|
||||||
},
|
|
||||||
[userCrudAsyncThunk.fetchRegister.fulfilled.type]: (state, action) => {
|
|
||||||
state.user_register = action.payload.data
|
|
||||||
state.info = 'register success'
|
|
||||||
},
|
|
||||||
[userCrudAsyncThunk.fetchUpdateUser.fulfilled.type]: (state, action) => {
|
|
||||||
state.user_update = action.payload.data
|
|
||||||
},
|
|
||||||
[userCrudAsyncThunk.fetchDeleteUser.fulfilled.type]: (state) => {
|
|
||||||
state.users_list = []
|
|
||||||
state.user_get = {}
|
|
||||||
state.user_register = {}
|
|
||||||
state.user_update = {}
|
|
||||||
state.user_delete = 'true'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
export const userCrudReducer = userCrudSlice.reducer
|
|
||||||
|
|
||||||
export const userCrudSelector = state => state.userCrudReducer
|
|
||||||
|
|
@ -1,36 +0,0 @@
|
||||||
export const loadState = () => {
|
|
||||||
if ( typeof window !== 'undefined' ) {
|
|
||||||
try {
|
|
||||||
const serializedState = localStorage.getItem('state')
|
|
||||||
|
|
||||||
if (serializedState === undefined || serializedState === null) {
|
|
||||||
return {}
|
|
||||||
} else {
|
|
||||||
return JSON.parse(serializedState)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
console.log(err)
|
|
||||||
return undefined
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export const saveState = (state) => {
|
|
||||||
if ( typeof window !== 'undefined' ) {
|
|
||||||
try {
|
|
||||||
|
|
||||||
const serializedState = JSON.stringify(state)
|
|
||||||
|
|
||||||
if (serializedState === null) {
|
|
||||||
return undefined
|
|
||||||
} else {
|
|
||||||
localStorage.setItem('state', serializedState)
|
|
||||||
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.log('save in local storage error')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,37 +0,0 @@
|
||||||
import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
|
|
||||||
|
|
||||||
import { loadState, saveState } from './stateLoader'
|
|
||||||
import lodash from 'lodash'
|
|
||||||
|
|
||||||
import { modelCrudReducer } from './slices/modelCrudSlice'
|
|
||||||
import { renderCrudReducer } from './slices/renderCrudSlice'
|
|
||||||
import { renderWebsocketReducer } from './slices/renderWebsocketSlice'
|
|
||||||
import { userAuthReducer } from './slices/userAuthSlice'
|
|
||||||
import { userCrudReducer } from './slices/userCrudSlice'
|
|
||||||
|
|
||||||
|
|
||||||
let persistedState = loadState()
|
|
||||||
|
|
||||||
export const store = configureStore({
|
|
||||||
reducer: {
|
|
||||||
modelCrudReducer,
|
|
||||||
renderCrudReducer,
|
|
||||||
renderWebsocketReducer,
|
|
||||||
userAuthReducer,
|
|
||||||
userCrudReducer
|
|
||||||
},
|
|
||||||
preloadedState: persistedState,
|
|
||||||
middleware: getDefaultMiddleware (
|
|
||||||
{
|
|
||||||
serializableCheck: false,
|
|
||||||
}
|
|
||||||
),
|
|
||||||
})
|
|
||||||
|
|
||||||
store.subscribe(() => {
|
|
||||||
saveState(store.getState());
|
|
||||||
});
|
|
||||||
|
|
||||||
store.subscribe(lodash.throttle(() => {
|
|
||||||
saveState(store.getState())
|
|
||||||
}, 100))
|
|
||||||
|
|
@ -1,320 +0,0 @@
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0 auto;
|
|
||||||
overflow: hidden;
|
|
||||||
background:
|
|
||||||
linear-gradient(
|
|
||||||
10deg,
|
|
||||||
black 0%,
|
|
||||||
#0a670a 40%,
|
|
||||||
#097309 50%,
|
|
||||||
#0a670a 60%,
|
|
||||||
black 100%
|
|
||||||
);
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
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(22,28,29,0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.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 {
|
|
||||||
position: fixed;
|
|
||||||
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;
|
|
||||||
position: absolute;
|
|
||||||
margin-top: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
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 {
|
|
||||||
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;
|
|
||||||
color: rgba(22,28,29,1);
|
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
color: rgba(22,28,29,1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue