From 10ba48fd08ca458a75aac139458bd48cec11d8ea Mon Sep 17 00:00:00 2001 From: TBS093A Date: Mon, 17 May 2021 12:24:47 +0200 Subject: [PATCH 01/33] Docker -> add docker files --- .dockerignore | 1 + Dockerfile | 20 ++++++++++++++++++++ 2 files changed, 21 insertions(+) create mode 100644 .dockerignore create mode 100644 Dockerfile diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 0000000..40b878d --- /dev/null +++ b/.dockerignore @@ -0,0 +1 @@ +node_modules/ \ No newline at end of file diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..540bdca --- /dev/null +++ b/Dockerfile @@ -0,0 +1,20 @@ +# 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 + +# add app +COPY . ./ + +CMD ["npm", "build"] + +# start app +CMD ["npm", "start"] \ No newline at end of file From bea0db148cf41416983f0ad83435b8f2c9037c4a Mon Sep 17 00:00:00 2001 From: TBS093A Date: Wed, 17 Feb 2021 09:15:23 +0100 Subject: [PATCH 02/33] Redux -> add all Slices / AsyncThunks / storage elements + create code in abstractServica & modelCrudAT --- src/redux/asyncThunks/abstractService.js | 103 ++++++++++++++++++ src/redux/asyncThunks/modelCrudAsyncThunk.js | 61 +++++++++++ src/redux/asyncThunks/renderCrudAsyncThunk.js | 0 .../asyncThunks/renderWebsocketAsyncThunk.js | 0 src/redux/asyncThunks/userAuthAsyncThunk.js | 0 src/redux/asyncThunks/userCrudAsyncThunk.js | 0 src/redux/slices/modelCrudSlice.js | 0 src/redux/slices/renderCrudSlice.js | 0 src/redux/slices/renderWebsocketSlice.js | 0 src/redux/slices/userAuthSlice.js | 0 src/redux/slices/userCrudSlice.js | 0 src/redux/stateLoader.js | 0 src/redux/store.js | 0 13 files changed, 164 insertions(+) create mode 100644 src/redux/asyncThunks/abstractService.js create mode 100644 src/redux/asyncThunks/modelCrudAsyncThunk.js create mode 100644 src/redux/asyncThunks/renderCrudAsyncThunk.js create mode 100644 src/redux/asyncThunks/renderWebsocketAsyncThunk.js create mode 100644 src/redux/asyncThunks/userAuthAsyncThunk.js create mode 100644 src/redux/asyncThunks/userCrudAsyncThunk.js create mode 100644 src/redux/slices/modelCrudSlice.js create mode 100644 src/redux/slices/renderCrudSlice.js create mode 100644 src/redux/slices/renderWebsocketSlice.js create mode 100644 src/redux/slices/userAuthSlice.js create mode 100644 src/redux/slices/userCrudSlice.js create mode 100644 src/redux/stateLoader.js create mode 100644 src/redux/store.js diff --git a/src/redux/asyncThunks/abstractService.js b/src/redux/asyncThunks/abstractService.js new file mode 100644 index 0000000..0f873c6 --- /dev/null +++ b/src/redux/asyncThunks/abstractService.js @@ -0,0 +1,103 @@ +import axios from 'axios' + + +const APIAddress = 'http://localhost:9090' + +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) => { + return await responseAbstract( + endpoint + '/' + objectId, + '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 = { + url: url, + method: method, + headers: { + 'Authorization': token, + 'accept': 'application/json', + 'Content-Type': 'application/json', + } + } + if (method === 'PUT' || method === 'POST' || method === 'PATCH') { + headers = Object.assign({}, headers, { + data: JSON.stringify(body), + withCredentials: true, + }) + } + return headers +} + + +export default { + APIAddress, + _getList, + _getOne, + _post, + _put, + _patch, + _delete +} \ No newline at end of file diff --git a/src/redux/asyncThunks/modelCrudAsyncThunk.js b/src/redux/asyncThunks/modelCrudAsyncThunk.js new file mode 100644 index 0000000..3de5608 --- /dev/null +++ b/src/redux/asyncThunks/modelCrudAsyncThunk.js @@ -0,0 +1,61 @@ +import { createAsyncThunk } from '@reduxjs/toolkit' +import abstractService from './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/fetchGetAllModels', + async ( + body, + thunkAPI + ) => { + return await abstractService._getOne( + trueEndpoint, + body.id, + body.token + ) + } +) + +/** + * @param body: + * param token: base64 token, + * param file: document.querySelector('#file').files[0] + * param user_id: user id + */ +const fetchUploadModel = createAsyncThunk( + 'model/fetchGetAllModels', + async ( + body, + thunkAPI + ) => { + let formData = FormData() + formData.append("blend", body.file) + return await abstractService._post( + trueEndpoint, + body, + body.token + ) + } +) + +export default { + fetchGetAllModels, + fetchGetOneModelAndDownload, +} \ No newline at end of file diff --git a/src/redux/asyncThunks/renderCrudAsyncThunk.js b/src/redux/asyncThunks/renderCrudAsyncThunk.js new file mode 100644 index 0000000..e69de29 diff --git a/src/redux/asyncThunks/renderWebsocketAsyncThunk.js b/src/redux/asyncThunks/renderWebsocketAsyncThunk.js new file mode 100644 index 0000000..e69de29 diff --git a/src/redux/asyncThunks/userAuthAsyncThunk.js b/src/redux/asyncThunks/userAuthAsyncThunk.js new file mode 100644 index 0000000..e69de29 diff --git a/src/redux/asyncThunks/userCrudAsyncThunk.js b/src/redux/asyncThunks/userCrudAsyncThunk.js new file mode 100644 index 0000000..e69de29 diff --git a/src/redux/slices/modelCrudSlice.js b/src/redux/slices/modelCrudSlice.js new file mode 100644 index 0000000..e69de29 diff --git a/src/redux/slices/renderCrudSlice.js b/src/redux/slices/renderCrudSlice.js new file mode 100644 index 0000000..e69de29 diff --git a/src/redux/slices/renderWebsocketSlice.js b/src/redux/slices/renderWebsocketSlice.js new file mode 100644 index 0000000..e69de29 diff --git a/src/redux/slices/userAuthSlice.js b/src/redux/slices/userAuthSlice.js new file mode 100644 index 0000000..e69de29 diff --git a/src/redux/slices/userCrudSlice.js b/src/redux/slices/userCrudSlice.js new file mode 100644 index 0000000..e69de29 diff --git a/src/redux/stateLoader.js b/src/redux/stateLoader.js new file mode 100644 index 0000000..e69de29 diff --git a/src/redux/store.js b/src/redux/store.js new file mode 100644 index 0000000..e69de29 From cd746fbb6b5af9ee7bff922264360f2283f97049 Mon Sep 17 00:00:00 2001 From: TBS093A Date: Wed, 17 Feb 2021 09:55:24 +0100 Subject: [PATCH 03/33] Redux -> add other endpoint operations in AsyncThunks --- src/redux/asyncThunks/abstractService.js | 46 +++++++++++-------- src/redux/asyncThunks/modelCrudAsyncThunk.js | 8 ++-- src/redux/asyncThunks/renderCrudAsyncThunk.js | 39 ++++++++++++++++ src/redux/asyncThunks/userAuthAsyncThunk.js | 27 +++++++++++ src/redux/asyncThunks/userCrudAsyncThunk.js | 43 +++++++++++++++++ 5 files changed, 141 insertions(+), 22 deletions(-) diff --git a/src/redux/asyncThunks/abstractService.js b/src/redux/asyncThunks/abstractService.js index 0f873c6..5063c49 100644 --- a/src/redux/asyncThunks/abstractService.js +++ b/src/redux/asyncThunks/abstractService.js @@ -16,7 +16,7 @@ const _getList = async (endpoint, token) => { const _getOne = async (endpoint, objectId, token) => { return await responseAbstract( - endpoint + '/' + objectId, + endpoint + objectId, 'GET', token, defaultBody @@ -34,7 +34,7 @@ const _post = async (endpoint, body, token) => { const _patch = async (endpoint, objectId, body, token) => { return await responseAbstract( - endpoint + '/' + objectId, + endpoint + objectId, 'PATCH', token, body @@ -43,7 +43,7 @@ const _patch = async (endpoint, objectId, body, token) => { const _put = async (endpoint, objectId, body, token) => { return await responseAbstract( - endpoint + '/' + objectId, + endpoint + objectId, 'PUT', token, body @@ -52,7 +52,7 @@ const _put = async (endpoint, objectId, body, token) => { const _delete = async (endpoint, objectId, token) => { return await responseAbstract( - endpoint + '/' + objectId, + endpoint + objectId, 'DELETE', token, defaultBody @@ -73,22 +73,30 @@ const responseAbstract = async (endpoint, method, token, body) => { } const headerBuilder = (url, method, token, body) => { - let headers = { - url: url, - method: method, - headers: { - 'Authorization': token, - 'accept': 'application/json', - 'Content-Type': 'application/json', + headers = { + 'Authorization': token, + 'accept': 'application/json', + 'Content-Type': 'application/json', } - } - if (method === 'PUT' || method === 'POST' || method === 'PATCH') { - headers = Object.assign({}, headers, { - data: JSON.stringify(body), - withCredentials: true, - }) - } - return headers + if ('file' in body) { + headers = { + 'Authorization': token, + 'accept': 'multipart/form-data', + 'Content-Type': 'multipart/form-data', + } + } + let headers = { + url: url, + method: method, + headers: headers + } + if (method === 'PUT' || method === 'POST' || method === 'PATCH') { + headers = Object.assign({}, headers, { + data: JSON.stringify(body), + withCredentials: true, + }) + } + return headers } diff --git a/src/redux/asyncThunks/modelCrudAsyncThunk.js b/src/redux/asyncThunks/modelCrudAsyncThunk.js index 3de5608..4f38010 100644 --- a/src/redux/asyncThunks/modelCrudAsyncThunk.js +++ b/src/redux/asyncThunks/modelCrudAsyncThunk.js @@ -1,7 +1,7 @@ import { createAsyncThunk } from '@reduxjs/toolkit' import abstractService from './abstractService' -let endpoint = '/model' +let endpoint = '/model/' const fetchGetAllModels = createAsyncThunk( @@ -47,6 +47,7 @@ const fetchUploadModel = createAsyncThunk( ) => { let formData = FormData() formData.append("blend", body.file) + body.file = formData return await abstractService._post( trueEndpoint, body, @@ -56,6 +57,7 @@ const fetchUploadModel = createAsyncThunk( ) export default { - fetchGetAllModels, - fetchGetOneModelAndDownload, + fetchGetAllModels, + fetchGetOneModelAndDownload, + fetchUploadModel } \ No newline at end of file diff --git a/src/redux/asyncThunks/renderCrudAsyncThunk.js b/src/redux/asyncThunks/renderCrudAsyncThunk.js index e69de29..13a6186 100644 --- a/src/redux/asyncThunks/renderCrudAsyncThunk.js +++ b/src/redux/asyncThunks/renderCrudAsyncThunk.js @@ -0,0 +1,39 @@ +import { createAsyncThunk } from '@reduxjs/toolkit' +import abstractService from './abstractService' + +let endpoint = '/render/' + + +const fetchGetAllRenders = createAsyncThunk( + 'model/fetchGetAllModels', + async ( + token, + thunkAPI + ) => { + return await abstractService._getList(endpoint, token) + } +) + +/** + * @param body: + * param token: base64 token, + * param id: render id + */ +const fetchGetOneRenderAndDownload = createAsyncThunk( + 'model/fetchGetAllModels', + async ( + body, + thunkAPI + ) => { + return await abstractService._getOne( + trueEndpoint, + body.id, + body.token + ) + } +) + +export default { + fetchGetAllRenders, + fetchGetOneRenderAndDownload +} \ No newline at end of file diff --git a/src/redux/asyncThunks/userAuthAsyncThunk.js b/src/redux/asyncThunks/userAuthAsyncThunk.js index e69de29..03557e8 100644 --- a/src/redux/asyncThunks/userAuthAsyncThunk.js +++ b/src/redux/asyncThunks/userAuthAsyncThunk.js @@ -0,0 +1,27 @@ +import { createAsyncThunk } from '@reduxjs/toolkit' +import abstractService from './abstractService' + +let endpoint = '/user/auth' + +/** + * @param body: + * param username: username string + * param password: password string + */ +const fetchLogin = createAsyncThunk( + 'model/fetchGetAllModels', + async ( + body, + thunkAPI + ) => { + return await abstractService._post( + endpoint, + body, + '' + ) + } +) + +export default { + fetchLogin +} \ No newline at end of file diff --git a/src/redux/asyncThunks/userCrudAsyncThunk.js b/src/redux/asyncThunks/userCrudAsyncThunk.js index e69de29..442d33c 100644 --- a/src/redux/asyncThunks/userCrudAsyncThunk.js +++ b/src/redux/asyncThunks/userCrudAsyncThunk.js @@ -0,0 +1,43 @@ +import { createAsyncThunk } from '@reduxjs/toolkit' +import abstractService from './abstractService' + +let endpoint = '/model/' + + +const fetchGetAllUsers = createAsyncThunk( + 'model/fetchGetAllModels', + async ( + token, + thunkAPI + ) => { + return await abstractService._getList( + endpoint, + token + ) + } +) + +/** + * @param body: + * param username: username string + * param password: password string + * param email: email string + */ +const fetchRegister = createAsyncThunk( + 'model/fetchGetAllModels', + async ( + body, + thunkAPI + ) => { + return await abstractService._post( + trueEndpoint, + body, + '' + ) + } +) + +export default { + fetchGetAllUsers, + fetchRegister +} \ No newline at end of file From 7078b4f4f2d3a74c25d82d3f886a14ea8b24158a Mon Sep 17 00:00:00 2001 From: TBS093A Date: Wed, 17 Feb 2021 10:00:09 +0100 Subject: [PATCH 04/33] Redux -> Fixes --- src/redux/asyncThunks/modelCrudAsyncThunk.js | 4 ++-- src/redux/asyncThunks/renderCrudAsyncThunk.js | 4 ++-- src/redux/asyncThunks/userAuthAsyncThunk.js | 23 +++++++++++++++++-- src/redux/asyncThunks/userCrudAsyncThunk.js | 6 ++--- 4 files changed, 28 insertions(+), 9 deletions(-) diff --git a/src/redux/asyncThunks/modelCrudAsyncThunk.js b/src/redux/asyncThunks/modelCrudAsyncThunk.js index 4f38010..8bbfe7c 100644 --- a/src/redux/asyncThunks/modelCrudAsyncThunk.js +++ b/src/redux/asyncThunks/modelCrudAsyncThunk.js @@ -20,7 +20,7 @@ const fetchGetAllModels = createAsyncThunk( * param id: model id */ const fetchGetOneModelAndDownload = createAsyncThunk( - 'model/fetchGetAllModels', + 'model/fetchGetOneModelAndDownload', async ( body, thunkAPI @@ -40,7 +40,7 @@ const fetchGetOneModelAndDownload = createAsyncThunk( * param user_id: user id */ const fetchUploadModel = createAsyncThunk( - 'model/fetchGetAllModels', + 'model/fetchUploadModel', async ( body, thunkAPI diff --git a/src/redux/asyncThunks/renderCrudAsyncThunk.js b/src/redux/asyncThunks/renderCrudAsyncThunk.js index 13a6186..afe56f2 100644 --- a/src/redux/asyncThunks/renderCrudAsyncThunk.js +++ b/src/redux/asyncThunks/renderCrudAsyncThunk.js @@ -5,7 +5,7 @@ let endpoint = '/render/' const fetchGetAllRenders = createAsyncThunk( - 'model/fetchGetAllModels', + 'render/fetchGetAllRenders', async ( token, thunkAPI @@ -20,7 +20,7 @@ const fetchGetAllRenders = createAsyncThunk( * param id: render id */ const fetchGetOneRenderAndDownload = createAsyncThunk( - 'model/fetchGetAllModels', + 'render/fetchGetOneRenderAndDownload', async ( body, thunkAPI diff --git a/src/redux/asyncThunks/userAuthAsyncThunk.js b/src/redux/asyncThunks/userAuthAsyncThunk.js index 03557e8..9c8999c 100644 --- a/src/redux/asyncThunks/userAuthAsyncThunk.js +++ b/src/redux/asyncThunks/userAuthAsyncThunk.js @@ -9,7 +9,7 @@ let endpoint = '/user/auth' * param password: password string */ const fetchLogin = createAsyncThunk( - 'model/fetchGetAllModels', + 'user/auth/fetchLogin', async ( body, thunkAPI @@ -22,6 +22,25 @@ const fetchLogin = createAsyncThunk( } ) +/** + * @param body: + * param token: user token + */ +const fetchLogout = createAsyncThunk( + 'user/auth/fetchLogout', + async ( + token, + thunkAPI + ) => { + return await abstractService._delete( + endpoint, + '', + token + ) + } +) + export default { - fetchLogin + fetchLogin, + fetchLogout } \ No newline at end of file diff --git a/src/redux/asyncThunks/userCrudAsyncThunk.js b/src/redux/asyncThunks/userCrudAsyncThunk.js index 442d33c..8f04df1 100644 --- a/src/redux/asyncThunks/userCrudAsyncThunk.js +++ b/src/redux/asyncThunks/userCrudAsyncThunk.js @@ -1,11 +1,11 @@ import { createAsyncThunk } from '@reduxjs/toolkit' import abstractService from './abstractService' -let endpoint = '/model/' +let endpoint = '/user/' const fetchGetAllUsers = createAsyncThunk( - 'model/fetchGetAllModels', + 'user/fetchGetAllUsers', async ( token, thunkAPI @@ -24,7 +24,7 @@ const fetchGetAllUsers = createAsyncThunk( * param email: email string */ const fetchRegister = createAsyncThunk( - 'model/fetchGetAllModels', + 'user/fetchRegister', async ( body, thunkAPI From 39c796eb1af6fddda561ce6cfee1bacdd995b51a Mon Sep 17 00:00:00 2001 From: TBS093A Date: Wed, 17 Feb 2021 10:58:17 +0100 Subject: [PATCH 05/33] Redux -> simple fixes in async thunks & add model & render crud slicers --- src/redux/asyncThunks/abstractAddress.js | 1 + src/redux/asyncThunks/abstractService.js | 4 ++-- src/redux/slices/modelCrudSlice.js | 30 ++++++++++++++++++++++++ src/redux/slices/renderCrudSlice.js | 25 ++++++++++++++++++++ 4 files changed, 58 insertions(+), 2 deletions(-) create mode 100644 src/redux/asyncThunks/abstractAddress.js diff --git a/src/redux/asyncThunks/abstractAddress.js b/src/redux/asyncThunks/abstractAddress.js new file mode 100644 index 0000000..0353f78 --- /dev/null +++ b/src/redux/asyncThunks/abstractAddress.js @@ -0,0 +1 @@ +export const GeneralAddress = 'localhost:9090' \ No newline at end of file diff --git a/src/redux/asyncThunks/abstractService.js b/src/redux/asyncThunks/abstractService.js index 5063c49..61375ea 100644 --- a/src/redux/asyncThunks/abstractService.js +++ b/src/redux/asyncThunks/abstractService.js @@ -1,7 +1,7 @@ import axios from 'axios' +import { GeneralAddress } from './abstractAddress' - -const APIAddress = 'http://localhost:9090' +const APIAddress = 'http://' + GeneralAddress let defaultBody = '' diff --git a/src/redux/slices/modelCrudSlice.js b/src/redux/slices/modelCrudSlice.js index e69de29..1f76bbc 100644 --- a/src/redux/slices/modelCrudSlice.js +++ b/src/redux/slices/modelCrudSlice.js @@ -0,0 +1,30 @@ +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 \ No newline at end of file diff --git a/src/redux/slices/renderCrudSlice.js b/src/redux/slices/renderCrudSlice.js index e69de29..d9d92d2 100644 --- a/src/redux/slices/renderCrudSlice.js +++ b/src/redux/slices/renderCrudSlice.js @@ -0,0 +1,25 @@ +import { createSlice } from '@reduxjs/toolkit' +import renderCrudAsyncThunk from '../asyncThunks/renderCrudAsyncThunk' + +const renderCrudSlice = createSlice( + { + name: 'render', + initialState: { + models_list: [], + download_zip_file: '' + }, + reducers: {}, + extraReducers: { + [renderCrudAsyncThunk.fetchGetAllRenders.fulfilled.type]: (state, action) => { + state.renders_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 \ No newline at end of file From e660ccce6fec43c93bf2a940dada73b0f59cd573 Mon Sep 17 00:00:00 2001 From: TBS093A Date: Wed, 17 Feb 2021 11:53:26 +0100 Subject: [PATCH 06/33] Redux -> simple fixes & upgrade slices --- src/redux/asyncThunks/abstractService.js | 8 +-- src/redux/asyncThunks/userCrudAsyncThunk.js | 69 ++++++++++++++++++++- src/redux/slices/renderCrudSlice.js | 4 +- src/redux/slices/userAuthSlice.js | 37 +++++++++++ src/redux/slices/userCrudSlice.js | 41 ++++++++++++ 5 files changed, 151 insertions(+), 8 deletions(-) diff --git a/src/redux/asyncThunks/abstractService.js b/src/redux/asyncThunks/abstractService.js index 61375ea..302950a 100644 --- a/src/redux/asyncThunks/abstractService.js +++ b/src/redux/asyncThunks/abstractService.js @@ -16,7 +16,7 @@ const _getList = async (endpoint, token) => { const _getOne = async (endpoint, objectId, token) => { return await responseAbstract( - endpoint + objectId, + endpoint + objectId + '/', 'GET', token, defaultBody @@ -34,7 +34,7 @@ const _post = async (endpoint, body, token) => { const _patch = async (endpoint, objectId, body, token) => { return await responseAbstract( - endpoint + objectId, + endpoint + objectId + '/', 'PATCH', token, body @@ -43,7 +43,7 @@ const _patch = async (endpoint, objectId, body, token) => { const _put = async (endpoint, objectId, body, token) => { return await responseAbstract( - endpoint + objectId, + endpoint + objectId + '/', 'PUT', token, body @@ -52,7 +52,7 @@ const _put = async (endpoint, objectId, body, token) => { const _delete = async (endpoint, objectId, token) => { return await responseAbstract( - endpoint + objectId, + endpoint + objectId + '/', 'DELETE', token, defaultBody diff --git a/src/redux/asyncThunks/userCrudAsyncThunk.js b/src/redux/asyncThunks/userCrudAsyncThunk.js index 8f04df1..c83677e 100644 --- a/src/redux/asyncThunks/userCrudAsyncThunk.js +++ b/src/redux/asyncThunks/userCrudAsyncThunk.js @@ -17,6 +17,25 @@ const fetchGetAllUsers = createAsyncThunk( } ) +/** + * @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 @@ -30,14 +49,60 @@ const fetchRegister = createAsyncThunk( thunkAPI ) => { return await abstractService._post( - trueEndpoint, + 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, - fetchRegister + fetchGetOneUser, + fetchRegister, + fetchUpdateUser, + fetchDeleteUser } \ No newline at end of file diff --git a/src/redux/slices/renderCrudSlice.js b/src/redux/slices/renderCrudSlice.js index d9d92d2..1019395 100644 --- a/src/redux/slices/renderCrudSlice.js +++ b/src/redux/slices/renderCrudSlice.js @@ -5,13 +5,13 @@ const renderCrudSlice = createSlice( { name: 'render', initialState: { - models_list: [], + render_list: [], download_zip_file: '' }, reducers: {}, extraReducers: { [renderCrudAsyncThunk.fetchGetAllRenders.fulfilled.type]: (state, action) => { - state.renders_list = action.payload.data + state.render_list = action.payload.data.render_list }, [renderCrudAsyncThunk.fetchGetOneRenderAndDownload.fulfilled.type]: (state, action) => { state.download_zip_file = action.payload.data diff --git a/src/redux/slices/userAuthSlice.js b/src/redux/slices/userAuthSlice.js index e69de29..b4b8fe0 100644 --- a/src/redux/slices/userAuthSlice.js +++ b/src/redux/slices/userAuthSlice.js @@ -0,0 +1,37 @@ +import { createSlice } from '@reduxjs/toolkit' +import userAuthAsyncThunk from '../asyncThunks/userAuthAsyncThunk' + +const userAuthSlice = createSlice( + { + name: 'user/auth', + initialState: { + token: '', + user: { + id: 0, + username: '', + email: '' + } + }, + reducers: {}, + extraReducers: { + [userAuthAsyncThunk.fetchLogin.fulfilled.type]: (state, action) => { + 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' + }, + [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 userAuthSelector = state => state.userAuthReducer \ No newline at end of file diff --git a/src/redux/slices/userCrudSlice.js b/src/redux/slices/userCrudSlice.js index e69de29..1e86608 100644 --- a/src/redux/slices/userCrudSlice.js +++ b/src/redux/slices/userCrudSlice.js @@ -0,0 +1,41 @@ +import { createSlice } from '@reduxjs/toolkit' +import userCrudAsyncThunk from '../asyncThunks/userCrudAsyncThunk' + +const userCrudSlice = createSlice( + { + name: 'user', + initialState: { + users_list: [], + user_get: {}, + user_register: {}, + user_update: {}, + user_delete: '' + }, + 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 + }, + [userCrudAsyncThunk.fetchUpdateUser.fulfilled.type]: (state, action) => { + state.user_update = action.payload.data + }, + [userCrudAsyncThunk.fetchDeleteUser.fulfilled.type]: (state, action) => { + 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 \ No newline at end of file From 42667b9297fe8583e9352a4d798bd65690942af1 Mon Sep 17 00:00:00 2001 From: TBS093A Date: Wed, 17 Feb 2021 13:35:20 +0100 Subject: [PATCH 07/33] Redux -> add async thunk & slicer for websocket usage --- .../asyncThunks/renderWebsocketAsyncThunk.js | 91 +++++++++++++++++++ src/redux/slices/renderWebsocketSlice.js | 42 +++++++++ 2 files changed, 133 insertions(+) diff --git a/src/redux/asyncThunks/renderWebsocketAsyncThunk.js b/src/redux/asyncThunks/renderWebsocketAsyncThunk.js index e69de29..5452050 100644 --- a/src/redux/asyncThunks/renderWebsocketAsyncThunk.js +++ b/src/redux/asyncThunks/renderWebsocketAsyncThunk.js @@ -0,0 +1,91 @@ +import { createAsyncThunk } from '@reduxjs/toolkit' +import GeneralAddress from './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 +} + +const fetchConnect = createAsyncThunk( + 'render/async/fetchConnect', + async ( + endpoint, + thunkAPI + ) => { + let uuid = __uuidv4() + let address = __make_address(endpoint) + return { + web_socket: new WebSocket(address + uuid), + address: address, + room_uuid: uuid + } + } +) + +const fetchSaveMessage = createAsyncThunk( + 'render/async/fetchSaveMessage', + async ( + message, + thunkAPI + ) => { + return { + message: message + } + } +) + +const fetchDisconnect = createAsyncThunk( + 'render/async/fetchDisconnect', + async ( + thunkAPI + ) => { + return { + web_socket: null, + } + } +) + +export default { + fetchConnect, + fetchSaveMessage, + fetchDisconnect, +} \ No newline at end of file diff --git a/src/redux/slices/renderWebsocketSlice.js b/src/redux/slices/renderWebsocketSlice.js index e69de29..e962a9a 100644 --- a/src/redux/slices/renderWebsocketSlice.js +++ b/src/redux/slices/renderWebsocketSlice.js @@ -0,0 +1,42 @@ +import { createSlice } from '@reduxjs/toolkit' +import renderWebsocketAsyncThunk from '../asyncThunks/renderWebsocketAsyncThunk' + +const renderWebsocketSlice = createSlice( + { + name: 'render/async', + initialState: { + web_socket: null, + address: '', + room_uuid: '', + messages: [], + connected: false + }, + reducers: {}, + extraReducers: { + [renderWebsocketAsyncThunk.fetchConnect.fulfilled.type]: (state, action) => { + state.web_socket = action.web_socket + state.address = action.address + state.room_uuid = action.room_uuid + state.messages = [] + state.connected = true + }, + [renderWebsocketAsyncThunk.fetchSaveMessage.fulfilled.type]: (state, action) => { + state.messages = [ + ...state.messages, + action.message + ] + }, + [renderWebsocketAsyncThunk.fetchDisconnect.fulfilled.type]: (state, action) => { + state.web_socket = action.web_socket, + state.address = '', + state.room_uuid = '', + state.messages = [], + state.connected = false + } + } + } +) + +export const userAuthReducer = userAuthSlice.reducer + +export const userAuthSelector = state => state.userAuthReducer \ No newline at end of file From e1cd04420fa9e7166f48f91e44caa88742fe3404 Mon Sep 17 00:00:00 2001 From: TBS093A Date: Wed, 17 Feb 2021 13:40:11 +0100 Subject: [PATCH 08/33] Redux -> install node components --- package-lock.json | 33 +++++++++++++++++++++++++++++++++ package.json | 3 +++ 2 files changed, 36 insertions(+) diff --git a/package-lock.json b/package-lock.json index d9f224f..e2b6547 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1664,6 +1664,17 @@ "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": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.1.tgz", @@ -8111,6 +8122,11 @@ "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz", "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": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz", @@ -12050,6 +12066,18 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, + "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": { "version": "0.8.3", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", @@ -12496,6 +12524,11 @@ "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=" }, + "reselect": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.0.0.tgz", + "integrity": "sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA==" + }, "resolve": { "version": "1.20.0", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz", diff --git a/package.json b/package.json index 9428c02..2d3326a 100644 --- a/package.json +++ b/package.json @@ -15,10 +15,13 @@ "clean": "gatsby clean" }, "dependencies": { + "@reduxjs/toolkit": "^1.5.0", "gatsby": "^2.32.3", "gatsby-plugin-sass": "^3.2.0", "react": "^16.13.1", "react-dom": "^16.13.1", + "react-redux": "^7.2.2", + "redux": "^4.0.5", "sass": "^1.32.7" } } From 08102edbd0de3b2a0805447a83624bd95f1a3c43 Mon Sep 17 00:00:00 2001 From: TBS093A Date: Wed, 17 Feb 2021 14:50:33 +0100 Subject: [PATCH 09/33] Redux -> simple fixes --- src/redux/asyncThunks/abstractService.js | 2 +- .../asyncThunks/renderWebsocketAsyncThunk.js | 30 ++++++++++++++++--- src/redux/slices/renderWebsocketSlice.js | 4 +-- 3 files changed, 29 insertions(+), 7 deletions(-) diff --git a/src/redux/asyncThunks/abstractService.js b/src/redux/asyncThunks/abstractService.js index 302950a..d6a74e1 100644 --- a/src/redux/asyncThunks/abstractService.js +++ b/src/redux/asyncThunks/abstractService.js @@ -3,7 +3,7 @@ import { GeneralAddress } from './abstractAddress' const APIAddress = 'http://' + GeneralAddress -let defaultBody = '' +let defaultBody = {} const _getList = async (endpoint, token) => { return await responseAbstract( diff --git a/src/redux/asyncThunks/renderWebsocketAsyncThunk.js b/src/redux/asyncThunks/renderWebsocketAsyncThunk.js index 5452050..e9649a6 100644 --- a/src/redux/asyncThunks/renderWebsocketAsyncThunk.js +++ b/src/redux/asyncThunks/renderWebsocketAsyncThunk.js @@ -45,14 +45,26 @@ const __make_address = async (endpoint) => { 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 ( - endpoint, + body, thunkAPI ) => { let uuid = __uuidv4() - let address = __make_address(endpoint) + let address = __make_address(body.endpoint) return { web_socket: new WebSocket(address + uuid), address: address, @@ -61,21 +73,31 @@ const fetchConnect = createAsyncThunk( } ) +/** + * @param body: + * param token: token + * param message: message string + */ const fetchSaveMessage = createAsyncThunk( 'render/async/fetchSaveMessage', async ( - message, + body, thunkAPI ) => { return { - message: message + message: body.message } } ) +/** + * @param body: + * param token: token + */ const fetchDisconnect = createAsyncThunk( 'render/async/fetchDisconnect', async ( + token, thunkAPI ) => { return { diff --git a/src/redux/slices/renderWebsocketSlice.js b/src/redux/slices/renderWebsocketSlice.js index e962a9a..0ffd28e 100644 --- a/src/redux/slices/renderWebsocketSlice.js +++ b/src/redux/slices/renderWebsocketSlice.js @@ -37,6 +37,6 @@ const renderWebsocketSlice = createSlice( } ) -export const userAuthReducer = userAuthSlice.reducer +export const renderWebsocketReducer = renderWebsocketSlice.reducer -export const userAuthSelector = state => state.userAuthReducer \ No newline at end of file +export const renderWebsocketSelector = state => state.renderWebsocketReducer \ No newline at end of file From f5747c51b096f46d3711bd161a816dbdfd9d2de4 Mon Sep 17 00:00:00 2001 From: TBS093A Date: Wed, 17 Feb 2021 14:58:14 +0100 Subject: [PATCH 10/33] Redux -> add localstorage backup & state loader functionality --- src/redux/stateLoader.js | 38 ++++++++++++++++++++++++++++++++++++++ src/redux/store.js | 32 ++++++++++++++++++++++++++++++++ 2 files changed, 70 insertions(+) diff --git a/src/redux/stateLoader.js b/src/redux/stateLoader.js index e69de29..5186487 100644 --- a/src/redux/stateLoader.js +++ b/src/redux/stateLoader.js @@ -0,0 +1,38 @@ +export const loadState = () => { + try { + const stateName = localStorage.getItem('user_key') + const serializedState = localStorage.getItem(stateName) + + if (stateName === null) { + return {} + } else if (serializedState === null) { + return {} + } else { + return JSON.parse(serializedState) + } + + + } catch (err) { + console.log(err) + return undefined + } +}; + +export const saveState = (state) => { + try { + + const stateName = localStorage.getItem('user_key') + const serializedState = JSON.stringify(state) + + if (stateName === null) { + return undefined + } else if (serializedState === null) { + return undefined + } else { + localStorage.setItem(stateName, serializedState) + + } + } catch (err) { + console.log('save in local storage error') + } +}; \ No newline at end of file diff --git a/src/redux/store.js b/src/redux/store.js index e69de29..d47e423 100644 --- a/src/redux/store.js +++ b/src/redux/store.js @@ -0,0 +1,32 @@ +import { configureStore } 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 +}) + +store.subscribe(() => { + saveState(store.getState()); +}); + +store.subscribe(lodash.throttle(() => { + saveState(store.getState()) +}, 100)) From 77a6fd801ec5d2f559deb1f68117dd2f640ef391 Mon Sep 17 00:00:00 2001 From: TBS093A Date: Wed, 17 Feb 2021 15:29:24 +0100 Subject: [PATCH 11/33] Redux / React -> implement redux localstorage --- src/pages/404.js | 54 ------ src/pages/func_group/root.js | 10 ++ src/pages/index.js | 154 ++---------------- .../{ => abstracts}/abstractAddress.js | 0 .../{ => abstracts}/abstractService.js | 0 src/redux/asyncThunks/modelCrudAsyncThunk.js | 6 +- src/redux/asyncThunks/renderCrudAsyncThunk.js | 4 +- .../asyncThunks/renderWebsocketAsyncThunk.js | 4 +- src/redux/asyncThunks/userAuthAsyncThunk.js | 2 +- src/redux/asyncThunks/userCrudAsyncThunk.js | 2 +- src/redux/slices/renderWebsocketSlice.js | 8 +- 11 files changed, 35 insertions(+), 209 deletions(-) delete mode 100644 src/pages/404.js create mode 100644 src/pages/func_group/root.js rename src/redux/asyncThunks/{ => abstracts}/abstractAddress.js (100%) rename src/redux/asyncThunks/{ => abstracts}/abstractService.js (100%) diff --git a/src/pages/404.js b/src/pages/404.js deleted file mode 100644 index 053ae0e..0000000 --- a/src/pages/404.js +++ /dev/null @@ -1,54 +0,0 @@ -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 ( -
- Not found -

Page not found

-

- Sorry{" "} - - 😔 - {" "} - we couldn’t find what you were looking for. -
- {process.env.NODE_ENV === "development" ? ( - <> -
- Try creating a page in src/pages/. -
- - ) : null} -
- Go home. -

-
- ) -} - -export default NotFoundPage diff --git a/src/pages/func_group/root.js b/src/pages/func_group/root.js new file mode 100644 index 0000000..b4bec8e --- /dev/null +++ b/src/pages/func_group/root.js @@ -0,0 +1,10 @@ +import * as React from 'react' + +const Root = () => { + return ( + <> + + ) +} + +export default Root \ No newline at end of file diff --git a/src/pages/index.js b/src/pages/index.js index 32b8fda..03ae8e1 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,150 +1,20 @@ -import * as React from "react" +import React from 'react'; +// import ReactDOM from 'react-dom'; -// styles -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 { Provider } from 'react-redux'; +import { store } from '../redux/store'; -const linkStyle = { - color: "#8954A8", - fontWeight: "bold", - fontSize: "16px", - verticalAlign: "5%", -} +import Root from './func_group/root'; -const docLinkStyle = { - ...linkStyle, - listStyleType: "none", - marginBottom: 24, -} +// if you have problem with watchers - use it: +// echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p -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 Index = () => { return ( -
- Home Page -

- Congratulations -
- — you just made a Gatsby site! - - 🎉🎉🎉 - -

-

- Edit src/pages/index.js to see this page - update in real-time.{" "} - - 😎 - -

- - Gatsby G Logo -
+ + + ) } -export default IndexPage +export default Index \ No newline at end of file diff --git a/src/redux/asyncThunks/abstractAddress.js b/src/redux/asyncThunks/abstracts/abstractAddress.js similarity index 100% rename from src/redux/asyncThunks/abstractAddress.js rename to src/redux/asyncThunks/abstracts/abstractAddress.js diff --git a/src/redux/asyncThunks/abstractService.js b/src/redux/asyncThunks/abstracts/abstractService.js similarity index 100% rename from src/redux/asyncThunks/abstractService.js rename to src/redux/asyncThunks/abstracts/abstractService.js diff --git a/src/redux/asyncThunks/modelCrudAsyncThunk.js b/src/redux/asyncThunks/modelCrudAsyncThunk.js index 8bbfe7c..c3c13a4 100644 --- a/src/redux/asyncThunks/modelCrudAsyncThunk.js +++ b/src/redux/asyncThunks/modelCrudAsyncThunk.js @@ -1,5 +1,5 @@ import { createAsyncThunk } from '@reduxjs/toolkit' -import abstractService from './abstractService' +import abstractService from './abstracts/abstractService' let endpoint = '/model/' @@ -26,7 +26,7 @@ const fetchGetOneModelAndDownload = createAsyncThunk( thunkAPI ) => { return await abstractService._getOne( - trueEndpoint, + endpoint, body.id, body.token ) @@ -49,7 +49,7 @@ const fetchUploadModel = createAsyncThunk( formData.append("blend", body.file) body.file = formData return await abstractService._post( - trueEndpoint, + endpoint, body, body.token ) diff --git a/src/redux/asyncThunks/renderCrudAsyncThunk.js b/src/redux/asyncThunks/renderCrudAsyncThunk.js index afe56f2..ded2022 100644 --- a/src/redux/asyncThunks/renderCrudAsyncThunk.js +++ b/src/redux/asyncThunks/renderCrudAsyncThunk.js @@ -1,5 +1,5 @@ import { createAsyncThunk } from '@reduxjs/toolkit' -import abstractService from './abstractService' +import abstractService from './abstracts/abstractService' let endpoint = '/render/' @@ -26,7 +26,7 @@ const fetchGetOneRenderAndDownload = createAsyncThunk( thunkAPI ) => { return await abstractService._getOne( - trueEndpoint, + endpoint, body.id, body.token ) diff --git a/src/redux/asyncThunks/renderWebsocketAsyncThunk.js b/src/redux/asyncThunks/renderWebsocketAsyncThunk.js index e9649a6..32c6bdb 100644 --- a/src/redux/asyncThunks/renderWebsocketAsyncThunk.js +++ b/src/redux/asyncThunks/renderWebsocketAsyncThunk.js @@ -1,5 +1,5 @@ import { createAsyncThunk } from '@reduxjs/toolkit' -import GeneralAddress from './abstractAddress' +import GeneralAddress from './abstracts/abstractAddress' let endpoint_single_image = '/render/single/image/' let endpoint_single_set = '/render/single/set/' @@ -109,5 +109,5 @@ const fetchDisconnect = createAsyncThunk( export default { fetchConnect, fetchSaveMessage, - fetchDisconnect, + fetchDisconnect } \ No newline at end of file diff --git a/src/redux/asyncThunks/userAuthAsyncThunk.js b/src/redux/asyncThunks/userAuthAsyncThunk.js index 9c8999c..85d3d00 100644 --- a/src/redux/asyncThunks/userAuthAsyncThunk.js +++ b/src/redux/asyncThunks/userAuthAsyncThunk.js @@ -1,5 +1,5 @@ import { createAsyncThunk } from '@reduxjs/toolkit' -import abstractService from './abstractService' +import abstractService from './abstracts/abstractService' let endpoint = '/user/auth' diff --git a/src/redux/asyncThunks/userCrudAsyncThunk.js b/src/redux/asyncThunks/userCrudAsyncThunk.js index c83677e..c68e013 100644 --- a/src/redux/asyncThunks/userCrudAsyncThunk.js +++ b/src/redux/asyncThunks/userCrudAsyncThunk.js @@ -1,5 +1,5 @@ import { createAsyncThunk } from '@reduxjs/toolkit' -import abstractService from './abstractService' +import abstractService from './abstracts/abstractService' let endpoint = '/user/' diff --git a/src/redux/slices/renderWebsocketSlice.js b/src/redux/slices/renderWebsocketSlice.js index 0ffd28e..eed01f0 100644 --- a/src/redux/slices/renderWebsocketSlice.js +++ b/src/redux/slices/renderWebsocketSlice.js @@ -27,10 +27,10 @@ const renderWebsocketSlice = createSlice( ] }, [renderWebsocketAsyncThunk.fetchDisconnect.fulfilled.type]: (state, action) => { - state.web_socket = action.web_socket, - state.address = '', - state.room_uuid = '', - state.messages = [], + state.web_socket = action.web_socket + state.address = '' + state.room_uuid = '' + state.messages = [] state.connected = false } } From 098270c434d81cccb503462a89d7c2eb74de8e61 Mon Sep 17 00:00:00 2001 From: TBS093A Date: Wed, 17 Feb 2021 15:56:48 +0100 Subject: [PATCH 12/33] Redux / React -> integrate views & pages --- package-lock.json | 5 +++++ package.json | 1 + .../func_group/model_crud/modelCrudIndex.js | 11 +++++++++++ .../func_group/render_crud/renderCrudIndex.js | 11 +++++++++++ .../render_websocket/renderWebsocketIndex.js | 11 +++++++++++ src/pages/func_group/root.js | 19 ++++++++++++++++--- .../func_group/user_auth/userAuthIndex.js | 11 +++++++++++ .../func_group/user_crud/userCrudIndex.js | 11 +++++++++++ 8 files changed, 77 insertions(+), 3 deletions(-) create mode 100644 src/pages/func_group/model_crud/modelCrudIndex.js create mode 100644 src/pages/func_group/render_crud/renderCrudIndex.js create mode 100644 src/pages/func_group/render_websocket/renderWebsocketIndex.js create mode 100644 src/pages/func_group/user_auth/userAuthIndex.js create mode 100644 src/pages/func_group/user_crud/userCrudIndex.js diff --git a/package-lock.json b/package-lock.json index e2b6547..bc6bc36 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9160,6 +9160,11 @@ } } }, + "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": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/loader-fs-cache/-/loader-fs-cache-1.0.3.tgz", diff --git a/package.json b/package.json index 2d3326a..d54e493 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@reduxjs/toolkit": "^1.5.0", "gatsby": "^2.32.3", "gatsby-plugin-sass": "^3.2.0", + "loadash": "^1.0.0", "react": "^16.13.1", "react-dom": "^16.13.1", "react-redux": "^7.2.2", diff --git a/src/pages/func_group/model_crud/modelCrudIndex.js b/src/pages/func_group/model_crud/modelCrudIndex.js new file mode 100644 index 0000000..2a88dc9 --- /dev/null +++ b/src/pages/func_group/model_crud/modelCrudIndex.js @@ -0,0 +1,11 @@ +import React, { useState, useEffect } from 'react' + +const ModelCrudIndex = () => { + + return ( +
+
+ ) +} + +export default ModelCrudIndex \ No newline at end of file diff --git a/src/pages/func_group/render_crud/renderCrudIndex.js b/src/pages/func_group/render_crud/renderCrudIndex.js new file mode 100644 index 0000000..6ca6d3c --- /dev/null +++ b/src/pages/func_group/render_crud/renderCrudIndex.js @@ -0,0 +1,11 @@ +import React, { useState, useEffect } from 'react' + +const RenderCrudIndex = () => { + + return ( +
+
+ ) +} + +export default RenderCrudIndex \ No newline at end of file diff --git a/src/pages/func_group/render_websocket/renderWebsocketIndex.js b/src/pages/func_group/render_websocket/renderWebsocketIndex.js new file mode 100644 index 0000000..adf516f --- /dev/null +++ b/src/pages/func_group/render_websocket/renderWebsocketIndex.js @@ -0,0 +1,11 @@ +import React, { useState, useEffect } from 'react' + +const RenderWebsocketIndex = () => { + + return ( +
+
+ ) +} + +export default RenderWebsocketIndex \ No newline at end of file diff --git a/src/pages/func_group/root.js b/src/pages/func_group/root.js index b4bec8e..d2c2f99 100644 --- a/src/pages/func_group/root.js +++ b/src/pages/func_group/root.js @@ -1,9 +1,22 @@ -import * as React from 'react' +import React, { useState, useEffect } from 'react' + +import UserAuthIndex from './user_auth/userAuthIndex' +import UserCrudIndex from './user_crud/userCrudIndex' +import ModelCrudIndex from './model_crud/modelCrudIndex' +import RenderCrudIndex from './render_crud/renderCrudIndex' +import RenderWebsocketIndex from './render_websocket/renderWebsocketIndex' const Root = () => { + + const [userAuthView, setUserAuthView] = useState(true) + const [userCrudView, setUserCrudView] = useState(false) + const [modelCrudView, setModelCrudView] = useState(false) + const [renderCrudView, setRenderCrudView] = useState(false) + const [renderWebsocketView, setRenderWebsocketView] = useState(false) + return ( - <> - +
+
) } diff --git a/src/pages/func_group/user_auth/userAuthIndex.js b/src/pages/func_group/user_auth/userAuthIndex.js new file mode 100644 index 0000000..b6ab53a --- /dev/null +++ b/src/pages/func_group/user_auth/userAuthIndex.js @@ -0,0 +1,11 @@ +import React, { useState, useEffect } from 'react' + +const UserAuthIndex = () => { + + return ( +
+
+ ) +} + +export default UserAuthIndex \ No newline at end of file diff --git a/src/pages/func_group/user_crud/userCrudIndex.js b/src/pages/func_group/user_crud/userCrudIndex.js new file mode 100644 index 0000000..91c49be --- /dev/null +++ b/src/pages/func_group/user_crud/userCrudIndex.js @@ -0,0 +1,11 @@ +import React, { useState, useEffect } from 'react' + +const UserCrudIndex = () => { + + return ( +
+
+ ) +} + +export default UserCrudIndex \ No newline at end of file From 09f638d3aaf761bcddee53222cf40f20ef89a06f Mon Sep 17 00:00:00 2001 From: TBS093A Date: Wed, 17 Feb 2021 16:29:15 +0100 Subject: [PATCH 13/33] Redux / React -> add movements --- src/pages/func_group/root.js | 10 +++--- src/pages/func_group/rootUtils.js | 55 +++++++++++++++++++++++++++++++ 2 files changed, 59 insertions(+), 6 deletions(-) create mode 100644 src/pages/func_group/rootUtils.js diff --git a/src/pages/func_group/root.js b/src/pages/func_group/root.js index d2c2f99..92585b7 100644 --- a/src/pages/func_group/root.js +++ b/src/pages/func_group/root.js @@ -1,21 +1,19 @@ import React, { useState, useEffect } from 'react' +import VerifyUserSession from './rootUtils' + import UserAuthIndex from './user_auth/userAuthIndex' import UserCrudIndex from './user_crud/userCrudIndex' import ModelCrudIndex from './model_crud/modelCrudIndex' import RenderCrudIndex from './render_crud/renderCrudIndex' import RenderWebsocketIndex from './render_websocket/renderWebsocketIndex' -const Root = () => { - const [userAuthView, setUserAuthView] = useState(true) - const [userCrudView, setUserCrudView] = useState(false) - const [modelCrudView, setModelCrudView] = useState(false) - const [renderCrudView, setRenderCrudView] = useState(false) - const [renderWebsocketView, setRenderWebsocketView] = useState(false) +const Root = () => { return (
+
) } diff --git a/src/pages/func_group/rootUtils.js b/src/pages/func_group/rootUtils.js new file mode 100644 index 0000000..8e36a83 --- /dev/null +++ b/src/pages/func_group/rootUtils.js @@ -0,0 +1,55 @@ +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 RenderCrudIndex from './render_crud/renderCrudIndex' +import RenderWebsocketIndex from './render_websocket/renderWebsocketIndex' + + +const GeneralView = () => { + + const [userAuthView, setUserAuthView] = useState(true) + const [userCrudView, setUserCrudView] = useState(false) + const [modelCrudView, setModelCrudView] = useState(false) + const [renderCrudView, setRenderCrudView] = useState(false) + const [renderWebsocketView, setRenderWebsocketView] = useState(false) + + return ( + <> + + + + + + + ) +} + +const __verifyUserSession = (token, user) => { + + if ( user.id > 0 && user.username !== '' && user.email !== '' && token !== '') + return false + else + return true + +} + +const VerifyUserSession = () => { + + const { token, user } = useSelector(userAuthSelector) + + return ( + <> + { + __verifyUserSession(token, user) + ? + : + } + + ) +} + +export default VerifyUserSession \ No newline at end of file From e9e3e04060bc6aeda3ed053e16d43ea63f04952c Mon Sep 17 00:00:00 2001 From: TBS093A Date: Wed, 17 Feb 2021 18:45:04 +0100 Subject: [PATCH 14/33] React -> complete NavigateBar --- src/pages/func_group/navigationBar.js | 236 ++++++++++++++++++++++++++ src/pages/func_group/rootUtils.js | 64 +++++-- src/pages/index.js | 4 +- src/redux/stateLoader.js | 14 +- 4 files changed, 294 insertions(+), 24 deletions(-) create mode 100644 src/pages/func_group/navigationBar.js diff --git a/src/pages/func_group/navigationBar.js b/src/pages/func_group/navigationBar.js new file mode 100644 index 0000000..a6b55d4 --- /dev/null +++ b/src/pages/func_group/navigationBar.js @@ -0,0 +1,236 @@ +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' + + +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 ( user_get !== {} && 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) + + return( + <> +
+ Menu +
+
setShowAccount( !showAccount ) }> + ├── Account Settings +
+
+
+ │ ├── User info +
+
+ │ │ ├── { user_get.username } +
+
+ │ │ └── { user_get.email } +
+
+
+
movements.user_view.setUserCrudView( + { + update_user: true, + delete_user: false + } + ) + }> + │ ├── Update User +
+
movements.user_view.setUserCrudView( + { + update_user: false, + delete_user: true + } + ) + }> + │ └── Delete User +
+
+
+
+
setShowModels( !showModels ) }> + ├── Models +
+
+
movements.model_view.setModelCrudView( + { + get_all_models: true, + get_one_model_and_download: false, + upload_model: false + } + ) + }> + │ ├── Get All Models +
+
movements.model_view.setModelCrudView( + { + get_all_models: false, + get_one_model_and_download: true, + upload_model: false + } + ) + }> + │ ├── Get One Model & Download +
+
movements.model_view.setModelCrudView( + { + get_all_models: false, + get_one_model_and_download: false, + upload_model: true + } + ) + }> + │ └── Upload Model +
+
+
+
+
setShowRender( !showRender ) }> + ├── Render +
+
+
movements.model_view.setModelCrudView( + { + show_ready_renders_and_download: true, + render_functionality: { + render_single_image: false, + render_single_set: false, + render_all: false, + render_image_by_vector: false, + render_set_by_vector: false + } + } + ) + }> + │ ├── Show Ready Renders & Download +
+
+
setShowRenderFunc( !showRenderFunc ) }> + │ ├── Render Functionality +
+
+
movements.model_view.setModelCrudView( + { + show_ready_renders_and_download: false, + render_functionality: { + render_single_image: true, + render_single_set: false, + render_all: false, + render_image_by_vector: false, + render_set_by_vector: false + } + } + ) + }> + │ │ ├── Render Single Image +
+
movements.model_view.setModelCrudView( + { + show_ready_renders_and_download: false, + render_functionality: { + render_single_image: false, + render_single_set: true, + render_all: false, + render_image_by_vector: false, + render_set_by_vector: false + } + } + ) + }> + │ │ ├── Render Single Set +
+
movements.model_view.setModelCrudView( + { + show_ready_renders_and_download: false, + render_functionality: { + render_single_image: false, + render_single_set: false, + render_all: true, + render_image_by_vector: false, + render_set_by_vector: false + } + } + ) + }> + │ │ ├── Render All Sets +
+
movements.model_view.setModelCrudView( + { + show_ready_renders_and_download: false, + render_functionality: { + render_single_image: false, + render_single_set: false, + render_all: false, + render_image_by_vector: true, + render_set_by_vector: false + } + } + ) + }> + │ │ ├── Render Image By Vector +
+
movements.model_view.setModelCrudView( + { + 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: true + } + } + ) + }> + │ │ └── Render Set By Vector +
+
+
+
+
+
+ └── Logout +
+
+ + ) +} + +export default NavigationBar \ No newline at end of file diff --git a/src/pages/func_group/rootUtils.js b/src/pages/func_group/rootUtils.js index 8e36a83..d1d3f9a 100644 --- a/src/pages/func_group/rootUtils.js +++ b/src/pages/func_group/rootUtils.js @@ -1,5 +1,6 @@ -import React, { useState, useEffect } from 'react' +import React, { useState } from 'react' import { useSelector } from 'react-redux' + import { userAuthSelector } from '../../redux/slices/userAuthSlice' import UserAuthIndex from './user_auth/userAuthIndex' @@ -8,18 +9,57 @@ import ModelCrudIndex from './model_crud/modelCrudIndex' import RenderCrudIndex from './render_crud/renderCrudIndex' import RenderWebsocketIndex from './render_websocket/renderWebsocketIndex' +import NavigationBar from './navigationBar' + const GeneralView = () => { - const [userAuthView, setUserAuthView] = useState(true) - const [userCrudView, setUserCrudView] = useState(false) - const [modelCrudView, setModelCrudView] = useState(false) - const [renderCrudView, setRenderCrudView] = useState(false) - const [renderWebsocketView, setRenderWebsocketView] = useState(false) + const [userCrudView, setUserCrudView] = useState( + { + update_user: false, + delete_user: false + } + ) + const [modelCrudView, setModelCrudView] = useState( + { + get_all_models: false, + get_one_model_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 ( <> - + @@ -29,9 +69,9 @@ const GeneralView = () => { } const __verifyUserSession = (token, user) => { - - if ( user.id > 0 && user.username !== '' && user.email !== '' && token !== '') - return false + + if ( user.id !== 0 && user.username !== '' && user.email !== '' && token !== '' ) + return true else return true @@ -45,8 +85,8 @@ const VerifyUserSession = () => { <> { __verifyUserSession(token, user) - ? - : + ? + : } ) diff --git a/src/pages/index.js b/src/pages/index.js index 03ae8e1..e020124 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -9,7 +9,7 @@ import Root from './func_group/root'; // if you have problem with watchers - use it: // echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p -const Index = () => { +const IndexPage = () => { return ( @@ -17,4 +17,4 @@ const Index = () => { ) } -export default Index \ No newline at end of file +export default IndexPage \ No newline at end of file diff --git a/src/redux/stateLoader.js b/src/redux/stateLoader.js index 5186487..1e7069c 100644 --- a/src/redux/stateLoader.js +++ b/src/redux/stateLoader.js @@ -1,11 +1,8 @@ export const loadState = () => { try { - const stateName = localStorage.getItem('user_key') - const serializedState = localStorage.getItem(stateName) + const serializedState = localStorage.getItem('state') - if (stateName === null) { - return {} - } else if (serializedState === null) { + if (serializedState === undefined || serializedState === null) { return {} } else { return JSON.parse(serializedState) @@ -21,15 +18,12 @@ export const loadState = () => { export const saveState = (state) => { try { - const stateName = localStorage.getItem('user_key') const serializedState = JSON.stringify(state) - if (stateName === null) { - return undefined - } else if (serializedState === null) { + if (serializedState === null) { return undefined } else { - localStorage.setItem(stateName, serializedState) + localStorage.setItem('state', serializedState) } } catch (err) { From f951ead34b898afa11eb7b2d24ebeae505c5f683 Mon Sep 17 00:00:00 2001 From: TBS093A Date: Wed, 17 Feb 2021 19:27:57 +0100 Subject: [PATCH 15/33] React / Redux -> simple fixes & upgrade movements statement --- src/pages/func_group/navigationBar.js | 190 +++++++----------- .../asyncThunks/abstracts/abstractService.js | 6 +- 2 files changed, 75 insertions(+), 121 deletions(-) diff --git a/src/pages/func_group/navigationBar.js b/src/pages/func_group/navigationBar.js index a6b55d4..b280230 100644 --- a/src/pages/func_group/navigationBar.js +++ b/src/pages/func_group/navigationBar.js @@ -7,6 +7,65 @@ import { userCrudSelector } from '../../redux/slices/userCrudSlice' import userCrudAsyncThunk from '../../redux/asyncThunks/userCrudAsyncThunk' +const __setShowGeneral = ( view, key, movements ) => { + + movements.user_view.setUserCrudView( + { + update_user: false, + delete_user: false + } + ) + + movements.model_view.setModelCrudView( + { + get_all_models: true, + get_one_model_and_download: false, + upload_model: false + } + ) + + movements.render_view.setRenderView( + { + show_ready_renders_and_download: false, + render_functionality: { + render_single_image: false, + render_single_set: false, + render_all: false, + render_image_by_vector: false, + render_set_by_vector: false + } + } + ) + + if (view === 'user_view') { + let new_move = movements.user_view.userCrudView + new_move[key] = true + movements.user_view.setUserCrudView( + new_move + ) + } else if (view === 'model_view') { + let new_move = movements.user_view.modelCrudView + new_move[key] = true + movements.model_view.setModelCrudView( + new_move + ) + } else if (view === 'render_view') { + let new_move = movements.render_view.renderView + if ( key in new_move ) { + new_move[key] = true + movements.model_view.setModelCrudView( + new_move + ) + } else { + new_move['render_functionality'][key] = true + movements.model_view.setModelCrudView( + new_move + ) + } + } + +} + const __styleChanger = ( bool ) => { let display = { @@ -57,29 +116,17 @@ const NavigationBar = ({ movements }) => { │ ├── User info
- │ │ ├── { user_get.username } + │ │ ├── Username: { user_get.username }
- │ │ └── { user_get.email } + │ │ └── E-mail: { user_get.email }
-
movements.user_view.setUserCrudView( - { - update_user: true, - delete_user: false - } - ) - }> +
__setShowGeneral( 'user_view', 'update_user', movements ) }> │ ├── Update User
-
movements.user_view.setUserCrudView( - { - update_user: false, - delete_user: true - } - ) - }> +
__setShowGeneral( 'user_view', 'delete_user', movements ) }> │ └── Delete User
@@ -89,34 +136,13 @@ const NavigationBar = ({ movements }) => { ├── Models
-
movements.model_view.setModelCrudView( - { - get_all_models: true, - get_one_model_and_download: false, - upload_model: false - } - ) - }> +
__setShowGeneral( 'model_view', 'get_all_models', movements ) }> │ ├── Get All Models
-
movements.model_view.setModelCrudView( - { - get_all_models: false, - get_one_model_and_download: true, - upload_model: false - } - ) - }> +
__setShowGeneral( 'model_view', 'get_one_model_and_download', movements )}> │ ├── Get One Model & Download
-
movements.model_view.setModelCrudView( - { - get_all_models: false, - get_one_model_and_download: false, - upload_model: true - } - ) - }> +
__setShowGeneral( 'model_view', 'upload_model', movements ) }> │ └── Upload Model
@@ -126,19 +152,7 @@ const NavigationBar = ({ movements }) => { ├── Render
-
movements.model_view.setModelCrudView( - { - show_ready_renders_and_download: true, - render_functionality: { - render_single_image: false, - render_single_set: false, - render_all: false, - render_image_by_vector: false, - render_set_by_vector: false - } - } - ) - }> +
__setShowGeneral( 'render_view', 'show_ready_renders_and_download', movements ) }> │ ├── Show Ready Renders & Download
@@ -146,79 +160,19 @@ const NavigationBar = ({ movements }) => { │ ├── Render Functionality
-
movements.model_view.setModelCrudView( - { - show_ready_renders_and_download: false, - render_functionality: { - render_single_image: true, - render_single_set: false, - render_all: false, - render_image_by_vector: false, - render_set_by_vector: false - } - } - ) - }> +
__setShowGeneral( 'render_view', 'render_single_image', movements ) }> │ │ ├── Render Single Image
-
movements.model_view.setModelCrudView( - { - show_ready_renders_and_download: false, - render_functionality: { - render_single_image: false, - render_single_set: true, - render_all: false, - render_image_by_vector: false, - render_set_by_vector: false - } - } - ) - }> +
__setShowGeneral( 'render_view', 'render_single_set', movements ) }> │ │ ├── Render Single Set
-
movements.model_view.setModelCrudView( - { - show_ready_renders_and_download: false, - render_functionality: { - render_single_image: false, - render_single_set: false, - render_all: true, - render_image_by_vector: false, - render_set_by_vector: false - } - } - ) - }> +
__setShowGeneral( 'render_view', 'render_all', movements ) }> │ │ ├── Render All Sets
-
movements.model_view.setModelCrudView( - { - show_ready_renders_and_download: false, - render_functionality: { - render_single_image: false, - render_single_set: false, - render_all: false, - render_image_by_vector: true, - render_set_by_vector: false - } - } - ) - }> +
__setShowGeneral( 'render_view', 'render_image_by_vector', movements ) }> │ │ ├── Render Image By Vector
-
movements.model_view.setModelCrudView( - { - 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: true - } - } - ) - }> +
__setShowGeneral( 'render_view', 'render_set_by_vector', movements ) }> │ │ └── Render Set By Vector
diff --git a/src/redux/asyncThunks/abstracts/abstractService.js b/src/redux/asyncThunks/abstracts/abstractService.js index d6a74e1..3866e1f 100644 --- a/src/redux/asyncThunks/abstracts/abstractService.js +++ b/src/redux/asyncThunks/abstracts/abstractService.js @@ -73,13 +73,13 @@ const responseAbstract = async (endpoint, method, token, body) => { } const headerBuilder = (url, method, token, body) => { - headers = { + let headers_r = { 'Authorization': token, 'accept': 'application/json', 'Content-Type': 'application/json', } if ('file' in body) { - headers = { + headers_r = { 'Authorization': token, 'accept': 'multipart/form-data', 'Content-Type': 'multipart/form-data', @@ -88,7 +88,7 @@ const headerBuilder = (url, method, token, body) => { let headers = { url: url, method: method, - headers: headers + headers: headers_r } if (method === 'PUT' || method === 'POST' || method === 'PATCH') { headers = Object.assign({}, headers, { From 520471c0f4d8a1511637e2c0cdb0de3e9218b4d9 Mon Sep 17 00:00:00 2001 From: TBS093A Date: Wed, 17 Feb 2021 20:05:48 +0100 Subject: [PATCH 16/33] Redux / React -> fixes & upgrades --- src/components/forms/formGenerator.js | 158 ++++++++++++++++++ .../forms/model_crud/model_get_all.js | 0 .../model_crud/model_get_one_and_download.js | 0 .../forms/model_crud/model_upload.js | 0 .../forms/render_crud/render_get_all.js | 0 .../render_get_one_and_download.js | 0 src/components/forms/user_auth/user_login.js | 0 .../forms/user_auth/user_register.js | 0 src/components/forms/user_crud/user_update.js | 0 src/pages/func_group/rootUtils.js | 16 +- 10 files changed, 170 insertions(+), 4 deletions(-) create mode 100644 src/components/forms/formGenerator.js create mode 100644 src/components/forms/model_crud/model_get_all.js create mode 100644 src/components/forms/model_crud/model_get_one_and_download.js create mode 100644 src/components/forms/model_crud/model_upload.js create mode 100644 src/components/forms/render_crud/render_get_all.js create mode 100644 src/components/forms/render_crud/render_get_one_and_download.js create mode 100644 src/components/forms/user_auth/user_login.js create mode 100644 src/components/forms/user_auth/user_register.js create mode 100644 src/components/forms/user_crud/user_update.js diff --git a/src/components/forms/formGenerator.js b/src/components/forms/formGenerator.js new file mode 100644 index 0000000..efba6d5 --- /dev/null +++ b/src/components/forms/formGenerator.js @@ -0,0 +1,158 @@ +import React 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() + 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 ( +
handler( event ) }> + { + inputList.map( (input, key) => { + + if ( input.type === 'info' ) { + info = input + } else if ( input.type === 'text' ) { + return ( + + ) + } else if ( input.type === 'file' ) { + return ( + + ) + } + }) + } +
-
__setShowGeneral( 'model_view', 'get_all_models', movements ) }> - │ ├── Get All Models -
-
__setShowGeneral( 'model_view', 'get_one_model_and_download', movements )}> - │ ├── Get One Model & Download +
__setShowGeneral( 'model_view', 'show_models_and_dwonload', movements )}> + │ ├── Show Models & Download
__setShowGeneral( 'model_view', 'upload_model', movements ) }> │ └── Upload Model diff --git a/src/pages/func_group/rootUtils.js b/src/pages/func_group/rootUtils.js index ad20678..c7d194a 100644 --- a/src/pages/func_group/rootUtils.js +++ b/src/pages/func_group/rootUtils.js @@ -22,8 +22,7 @@ const GeneralView = () => { ) const [modelCrudView, setModelCrudView] = useState( { - get_all_models: false, - get_one_model_and_download: false, + show_models_and_dwonload: false, upload_model: false } ) From 9e5fe8790b9598c004d2e9d5e52beef23d659c84 Mon Sep 17 00:00:00 2001 From: TBS093A Date: Wed, 17 Feb 2021 23:13:39 +0100 Subject: [PATCH 18/33] React -> Upgrade forms & simple fixes --- src/components/forms/formGenerator.js | 153 +++++++++++------- src/components/forms/user_auth/userLogin.js | 66 ++++++++ .../forms/user_auth/userRegister.js | 74 +++++++++ src/pages/func_group/rootUtils.js | 2 +- .../func_group/user_auth/userAuthIndex.js | 4 + .../asyncThunks/abstracts/abstractService.js | 34 +++- src/redux/slices/userAuthSlice.js | 14 +- 7 files changed, 279 insertions(+), 68 deletions(-) diff --git a/src/components/forms/formGenerator.js b/src/components/forms/formGenerator.js index efba6d5..300da2d 100644 --- a/src/components/forms/formGenerator.js +++ b/src/components/forms/formGenerator.js @@ -13,48 +13,58 @@ export const FormGenerator = ({ const handler = async (event) => { event.preventDefault() - for ( let i = 0; i < refList.length; i++ ) { - if ( - refList[i].current.value === '' + for (let i = 0; i < refList.length; i++) { + if (refList[i].current.value === '' && inputList[0].action !== 'Update' - || i === 0 && refList.length !== 1 + || i === 0 + && refList.length !== 1 ) { refList[i].current.focus() - } else if ( i === refList.length - 1 ) { - await action( refList ) + } else if (i === refList.length - 1) { + await action(refList) } } } - + let info return ( -
handler( event ) }> - { - inputList.map( (input, key) => { - - if ( input.type === 'info' ) { + handler(event)}> + { + inputList.map((input, key) => { + + if (input.type === 'info') { info = input - } else if ( input.type === 'text' ) { - return ( - - ) - } else if ( input.type === 'file' ) { + } else if (input.type === 'text') { return ( - + ) + } else if (input.type === 'password') { + return ( + + ) + } else if (input.type === 'file') { + return ( + ) } - }) + }) } - ) } @@ -74,16 +84,47 @@ export const FormGenerator = ({ * endpoint: 'Album' * } } info - information about form */ -const TextInputGenerator = ({ +const TextInputGenerator = ({ input, info }) => { return (
- { input.name + ':' } - +
+ ) +} + +/** + * 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 ( +
+ {input.name + ':'} +
) @@ -101,55 +142,55 @@ const TextInputGenerator = ({ * file: file, setFile: setFile() #useState * } } input - */ -const UploadInputGenerator = ({ +const UploadInputGenerator = ({ input, info }) => { - - const onLoadFile = async ( event ) => { + + const onLoadFile = async (event) => { event.preventDefault() let data = event.target.files[0] - input.setFile( await toBase64( data ) ) + input.setFile(await toBase64(data)) setDropInfos(data.name, data.size) } - const onLoadFileDrop = async ( event ) => { + const onLoadFileDrop = async (event) => { event.preventDefault() event.persist() let data = event.dataTransfer.files[0] - input.setFile( await toBase64( data ) ) + input.setFile(await toBase64(data)) setDropInfos(data.name, data.size) } - const toBase64 = ( file ) => new Promise( (resolve, reject) => { + const toBase64 = (file) => new Promise((resolve, reject) => { let fileReader = new FileReader() - fileReader.readAsDataURL( file ) - fileReader.onload = () => resolve( fileReader.result ) - fileReader.onerror = error => reject( error ) + 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' + input.setDropInfo( + 'name: "' + + name + + '"\nsize: ' + + (Math.round(size / 100 + 'e-2') / 100) + + ' MB' ) } return ( -
onLoadFileDrop( event ) } > - 
-                { input.dropInfo }
+        
 onLoadFileDrop(event)} >
+            
+                {input.dropInfo}
             

-             onLoadFile( event ) }
+                onChange={event => onLoadFile(event)}
             />
         

     )
diff --git a/src/components/forms/user_auth/userLogin.js b/src/components/forms/user_auth/userLogin.js
index e69de29..77fd589 100644
--- a/src/components/forms/user_auth/userLogin.js
+++ b/src/components/forms/user_auth/userLogin.js
@@ -0,0 +1,66 @@
+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()
+
+    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 (
+        <>
+            
+        
+    )
+
+}
+
+export default UserLoginForm
\ No newline at end of file
diff --git a/src/components/forms/user_auth/userRegister.js b/src/components/forms/user_auth/userRegister.js
index e69de29..eadeedd 100644
--- a/src/components/forms/user_auth/userRegister.js
+++ b/src/components/forms/user_auth/userRegister.js
@@ -0,0 +1,74 @@
+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()
+
+    let refList = [
+        usernameInput,
+        passwordInput,
+        emailInput
+    ]
+
+    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
+        },
+        {
+            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 (
+        <>
+            
+        
+    )
+
+}
+
+export default UserRegisterForm
\ No newline at end of file
diff --git a/src/pages/func_group/rootUtils.js b/src/pages/func_group/rootUtils.js
index c7d194a..7786566 100644
--- a/src/pages/func_group/rootUtils.js
+++ b/src/pages/func_group/rootUtils.js
@@ -80,7 +80,7 @@ const __verifyUserSession = (token, user)  => {
     if ( user.id !== 0 && user.username !== '' && user.email !== '' && token !== '' )
         return true
     else
-        return true
+        return false
     
 }
 
diff --git a/src/pages/func_group/user_auth/userAuthIndex.js b/src/pages/func_group/user_auth/userAuthIndex.js
index b6ab53a..942d191 100644
--- a/src/pages/func_group/user_auth/userAuthIndex.js
+++ b/src/pages/func_group/user_auth/userAuthIndex.js
@@ -1,9 +1,13 @@
 import React, { useState, useEffect } from 'react'
 
+import UserLoginForm from '../../../components/forms/user_auth/userLogin'
+
+
 const UserAuthIndex = () => {
 
     return (
         

+            
         

     )
 }
diff --git a/src/redux/asyncThunks/abstracts/abstractService.js b/src/redux/asyncThunks/abstracts/abstractService.js
index 3866e1f..816e130 100644
--- a/src/redux/asyncThunks/abstracts/abstractService.js
+++ b/src/redux/asyncThunks/abstracts/abstractService.js
@@ -74,31 +74,53 @@ const responseAbstract = async (endpoint, method, token, body) => {
 
 const headerBuilder = (url, method, token, body) => {
     let headers_r = {
-        'Authorization': token,
+        'authorization': token,
+        'x-csrftoken': getCookie('csrftoken'),
         'accept': 'application/json',
-        'Content-Type': 'application/json',
+        'content-type': 'application/json',
     }
     if ('file' in body) {
         headers_r = {
-            'Authorization': token,
+            'authorization': token,
+            'x-csrftoken': getCookie('csrftoken'),
             'accept': 'multipart/form-data',
-            'Content-Type': 'multipart/form-data',
+            'content-type': 'multipart/form-data',
         }
     }
     let headers = {
         url: url,
         method: method,
-        headers: headers_r
+        headers: headers_r,
+        credentials: 'same-origin'
     }
     if (method === 'PUT' || method === 'POST' || method === 'PATCH') {
         headers = Object.assign({}, headers, {
             data: JSON.stringify(body),
-            withCredentials: true,
         })
     }
+    console.log(headers)
     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]);
+}
+
+
 
 export default {
   APIAddress,
diff --git a/src/redux/slices/userAuthSlice.js b/src/redux/slices/userAuthSlice.js
index b4b8fe0..124792a 100644
--- a/src/redux/slices/userAuthSlice.js
+++ b/src/redux/slices/userAuthSlice.js
@@ -15,11 +15,15 @@ const userAuthSlice = createSlice(
         reducers: {},
         extraReducers: {
             [userAuthAsyncThunk.fetchLogin.fulfilled.type]: (state, action) => {
-                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'
+                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 = ''

From ba4489f0edb5108c3b68c910ef32cdaf87e2546c Mon Sep 17 00:00:00 2001
From: TBS093A 
Date: Wed, 17 Feb 2021 23:48:24 +0100
Subject: [PATCH 19/33] React -> upgrade forms / add register & login & logout
 operations

---
 src/components/forms/user_auth/userLogin.js   |  2 ++
 .../forms/user_auth/userRegister.js           |  4 +++-
 src/pages/func_group/navigationBar.js         | 19 +++++++++++-----
 .../func_group/user_auth/userAuthIndex.js     | 22 ++++++++++++++++++-
 .../asyncThunks/abstracts/abstractService.js  |  6 +++--
 src/redux/slices/userAuthSlice.js             |  3 ++-
 src/redux/slices/userCrudSlice.js             | 14 ++++++++++--
 7 files changed, 58 insertions(+), 12 deletions(-)

diff --git a/src/components/forms/user_auth/userLogin.js b/src/components/forms/user_auth/userLogin.js
index 77fd589..e53b006 100644
--- a/src/components/forms/user_auth/userLogin.js
+++ b/src/components/forms/user_auth/userLogin.js
@@ -14,6 +14,7 @@ const UserLoginForm = () => {
     const passwordInput = React.createRef()
 
     const dispatch = useDispatch()
+    const { info } = useSelector( userAuthSelector )
 
     let refList = [
         usernameInput,
@@ -58,6 +59,7 @@ const UserLoginForm = () => {
                 refList={ refList }
                 action={ login }
             />
+            { info }
         
     )
 
diff --git a/src/components/forms/user_auth/userRegister.js b/src/components/forms/user_auth/userRegister.js
index eadeedd..5b3599e 100644
--- a/src/components/forms/user_auth/userRegister.js
+++ b/src/components/forms/user_auth/userRegister.js
@@ -15,6 +15,7 @@ const UserRegisterForm = () => {
     const emailInput = React.createRef()
 
     const dispatch = useDispatch()
+    const { info } = useSelector( userCrudSelector )
 
     let refList = [
         usernameInput,
@@ -27,7 +28,7 @@ const UserRegisterForm = () => {
             type: 'info',
             action: 'Create',
             endpint: 'user/auth/login',
-            button_value: 'Sign In'
+            button_value: 'Sign Up'
         },
         {
             type: 'text',
@@ -66,6 +67,7 @@ const UserRegisterForm = () => {
                 refList={ refList }
                 action={ register }
             />
+            { info }
         
     )
 
diff --git a/src/pages/func_group/navigationBar.js b/src/pages/func_group/navigationBar.js
index e1f359f..215f20f 100644
--- a/src/pages/func_group/navigationBar.js
+++ b/src/pages/func_group/navigationBar.js
@@ -5,6 +5,7 @@ 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 ) => {
@@ -43,7 +44,7 @@ const __setShowGeneral = ( view, key, movements ) => {
             new_move
         )
     } else if (view === 'model_view') {
-        let new_move = movements.user_view.modelCrudView
+        let new_move = movements.model_view.modelCrudView
         new_move[key] = true
         movements.model_view.setModelCrudView( 
             new_move
@@ -86,7 +87,7 @@ const NavigationBar = ({ movements }) => {
     const dispatch = useDispatch()
 
     useEffect( () => {
-        if ( user_get !== {} && token !== '' && user.id > 0)
+        if ( user_get === {} && token !== '' && user.id > 0)
             dispatch(
                 userCrudAsyncThunk.fetchGetOneUser(
                     {
@@ -100,7 +101,15 @@ const NavigationBar = ({ movements }) => {
     const [showAccount, setShowAccount] = useState(false)
     const [showModels, setShowModels] = useState(false)
     const [showRender, setShowRender] = useState(false)
-    const [showRenderFunc, setShowRenderFunc] = useState(false)    
+    const [showRenderFunc, setShowRenderFunc] = useState(false)
+    
+    const logout = async () => {
+        dispatch(
+            userAuthAsyncThunk.fetchLogout(
+                token
+            )
+        )
+    }
 
     return(
         <>
@@ -175,8 +184,8 @@ const NavigationBar = ({ movements }) => {
-
- └── Logout +
logout() }> + └── Sign Out
diff --git a/src/pages/func_group/user_auth/userAuthIndex.js b/src/pages/func_group/user_auth/userAuthIndex.js index 942d191..e88b9dc 100644 --- a/src/pages/func_group/user_auth/userAuthIndex.js +++ b/src/pages/func_group/user_auth/userAuthIndex.js @@ -1,13 +1,33 @@ 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 (
- + { swapForm + ? + : + } +
) } diff --git a/src/redux/asyncThunks/abstracts/abstractService.js b/src/redux/asyncThunks/abstracts/abstractService.js index 816e130..e175e1c 100644 --- a/src/redux/asyncThunks/abstracts/abstractService.js +++ b/src/redux/asyncThunks/abstracts/abstractService.js @@ -51,8 +51,11 @@ const _put = async (endpoint, objectId, body, token) => { } const _delete = async (endpoint, objectId, token) => { + let slash = '/' + if ( objectId === '' ) + slash = '' return await responseAbstract( - endpoint + objectId + '/', + endpoint + objectId + slash, 'DELETE', token, defaultBody @@ -98,7 +101,6 @@ const headerBuilder = (url, method, token, body) => { data: JSON.stringify(body), }) } - console.log(headers) return headers } diff --git a/src/redux/slices/userAuthSlice.js b/src/redux/slices/userAuthSlice.js index 124792a..bb5aa25 100644 --- a/src/redux/slices/userAuthSlice.js +++ b/src/redux/slices/userAuthSlice.js @@ -10,7 +10,8 @@ const userAuthSlice = createSlice( id: 0, username: '', email: '' - } + }, + info: '' }, reducers: {}, extraReducers: { diff --git a/src/redux/slices/userCrudSlice.js b/src/redux/slices/userCrudSlice.js index 1e86608..fd33281 100644 --- a/src/redux/slices/userCrudSlice.js +++ b/src/redux/slices/userCrudSlice.js @@ -9,7 +9,8 @@ const userCrudSlice = createSlice( user_get: {}, user_register: {}, user_update: {}, - user_delete: '' + user_delete: '', + info: '' }, reducers: {}, extraReducers: { @@ -20,7 +21,16 @@ const userCrudSlice = createSlice( state.user_get = action.payload.data }, [userCrudAsyncThunk.fetchRegister.fulfilled.type]: (state, action) => { - state.user_register = action.payload.data + try { + state.user_register = { + id: action.payload.data.id, + username: action.payload.data.username, + email: action.payload.data.email + } + state.info = 'register success' + } catch { + state.info = 'register failed' + } }, [userCrudAsyncThunk.fetchUpdateUser.fulfilled.type]: (state, action) => { state.user_update = action.payload.data From 36a259812952eacc0e742d5178f3f75919b9014b Mon Sep 17 00:00:00 2001 From: TBS093A Date: Thu, 18 Feb 2021 13:55:08 +0100 Subject: [PATCH 20/33] React -> upgrade forms & init next views --- src/components/forms/formGenerator.js | 94 ++++++++++++++++--- .../model_crud/modelShowModelsAndDownload.js | 65 +++++++++++++ .../forms/model_crud/modelUpload.js | 10 ++ .../func_group/model_crud/modelCrudIndex.js | 37 +++++++- src/pages/func_group/navigationBar.js | 43 ++++----- src/pages/func_group/rootUtils.js | 10 +- .../asyncThunks/abstracts/abstractAddress.js | 2 +- .../asyncThunks/abstracts/abstractService.js | 2 +- src/redux/slices/modelCrudSlice.js | 1 - 9 files changed, 216 insertions(+), 48 deletions(-) diff --git a/src/components/forms/formGenerator.js b/src/components/forms/formGenerator.js index 300da2d..7f906c5 100644 --- a/src/components/forms/formGenerator.js +++ b/src/components/forms/formGenerator.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useState } from 'react' /** * @@ -13,15 +13,20 @@ export const FormGenerator = ({ const handler = async (event) => { event.preventDefault() - for (let i = 0; i < refList.length; i++) { - if (refList[i].current.value === '' - && inputList[0].action !== 'Update' - || i === 0 - && refList.length !== 1 - ) { - refList[i].current.focus() - } else if (i === refList.length - 1) { - await action(refList) + + if ( inputList[0].action === 'Download' ) { + await action() + } else { + for (let i = 0; i < refList.length; i++) { + if (refList[i].current.value === '' + && inputList[0].action !== 'Update' + || i === 0 + && refList.length !== 1 + ) { + refList[i].current.focus() + } else if (i === refList.length - 1) { + await action(refList) + } } } } @@ -51,6 +56,14 @@ export const FormGenerator = ({ key={key} /> ) + } else if (input.type === 'drop-box') { + return ( + + ) } else if (input.type === 'file') { return ( - { info.button_value } - + { + info.button_value === '' + ? <> + : + } + ) } @@ -130,6 +150,52 @@ const PasswordInputGenerator = ({ ) } +/** + * Text input generator, example: + * @param { + * { + * type: 'drop-box', + * name: 'name', + * values: list, + * link: link to the file + * } } input - basic text input + * @param { + * { + * type: 'info', + * action: 'Update' + * endpoint: 'Album' + * } } info - information about form + */ +const DownloadFilesListInputGenerator = ({ + input, info +}) => { + + return ( +
+ {input.name + ':'} + { + input.values.map( (item, index) => { + + return ( + + ) + } + ) + } +
+ ) +} + /** * Upload file input generator, example: * @param { @@ -196,4 +262,6 @@ const UploadInputGenerator = ({ ) } + + export default FormGenerator \ No newline at end of file diff --git a/src/components/forms/model_crud/modelShowModelsAndDownload.js b/src/components/forms/model_crud/modelShowModelsAndDownload.js index e69de29..a0fc798 100644 --- a/src/components/forms/model_crud/modelShowModelsAndDownload.js +++ b/src/components/forms/model_crud/modelShowModelsAndDownload.js @@ -0,0 +1,65 @@ +import React, { useEffect } from 'react' + +import { useSelector, useDispatch } from 'react-redux' + +import { userAuthSelector } from '../../../redux/slices/userAuthSlice' +import { modelCrudSelector } from '../../../redux/slices/modelCrudSlice' +import modelCrudAsyncThunk from '../../../redux/asyncThunks/modelCrudAsyncThunk' + +import { GeneralAddress } from '../../../redux/asyncThunks/abstracts/abstractAddress' + +import FormGenerator from '../formGenerator' + + +const ModelShowAndDownloadForm = () => { + + const dispatch = useDispatch() + + const { models_list } = useSelector( modelCrudSelector ) + const { user, token } = useSelector( userAuthSelector ) + + let blocker = false + + useEffect( + () => { + if ( models_list.length === 0 && user.id > 0 && token !== '' && !blocker ) { + dispatch( modelCrudAsyncThunk.fetchGetAllModels(token) ) + if ( models_list.length === 0 ) { + blocker = true + } + } + } + ) + + let inputList = [ + { + type: 'info', + action: 'Download', + endpint: 'model/download', + button_value: 'Refresh Models List' + }, + { + type: 'drop-box', + name: 'Models', + values: models_list, + link: GeneralAddress + '/model/', + } + ] + + const handleRefresh = () => { + dispatch( modelCrudAsyncThunk.fetchGetAllModels(token) ) + } + + return ( + <> + + + ) + +} + +export default ModelShowAndDownloadForm \ No newline at end of file diff --git a/src/components/forms/model_crud/modelUpload.js b/src/components/forms/model_crud/modelUpload.js index e69de29..de69c65 100644 --- a/src/components/forms/model_crud/modelUpload.js +++ b/src/components/forms/model_crud/modelUpload.js @@ -0,0 +1,10 @@ +import React from 'react' + +const ModelUploadForm = () => { + return ( + <> + + ) +} + +export default ModelUploadForm \ No newline at end of file diff --git a/src/pages/func_group/model_crud/modelCrudIndex.js b/src/pages/func_group/model_crud/modelCrudIndex.js index 2a88dc9..3161005 100644 --- a/src/pages/func_group/model_crud/modelCrudIndex.js +++ b/src/pages/func_group/model_crud/modelCrudIndex.js @@ -1,10 +1,41 @@ import React, { useState, useEffect } from 'react' -const ModelCrudIndex = () => { +import ModelShowAndDownloadForm from '../../../components/forms/model_crud/modelShowModelsAndDownload' +import ModelUpload from '../../../components/forms/model_crud/modelUpload' + + +const __handleSwap = (name, movement) => { + + let display = { + display: 'block' + } + + let hide = { + display: 'none' + } + + if ( Object.keys(movement['movement']).includes(name) ) { + if (movement['movement'][name]) + return display + else + return hide + } else { + return hide + } + +} + +const ModelCrudIndex = ( movement ) => { return ( -
-
+ <> +
+ +
+
+ +
+ ) } diff --git a/src/pages/func_group/navigationBar.js b/src/pages/func_group/navigationBar.js index 215f20f..857350c 100644 --- a/src/pages/func_group/navigationBar.js +++ b/src/pages/func_group/navigationBar.js @@ -10,32 +10,26 @@ import userAuthAsyncThunk from '../../redux/asyncThunks/userAuthAsyncThunk' const __setShowGeneral = ( view, key, movements ) => { - movements.user_view.setUserCrudView( - { - update_user: false, - delete_user: false - } - ) + movements.user_view.userCrudView = { + update_user: false, + delete_user: false + } - movements.model_view.setModelCrudView( - { - show_models_and_dwonload: false, - upload_model: false - } - ) + movements.model_view.modelCrudView = { + show_models_and_dwonload: false, + upload_model: false + } - movements.render_view.setRenderView( - { - show_ready_renders_and_download: false, - render_functionality: { - render_single_image: false, - render_single_set: false, - render_all: false, - render_image_by_vector: false, - render_set_by_vector: false - } + movements.render_view.renderView = { + show_ready_renders_and_download: false, + render_functionality: { + render_single_image: false, + render_single_set: false, + render_all: false, + render_image_by_vector: false, + render_set_by_vector: false } - ) + } if (view === 'user_view') { let new_move = movements.user_view.userCrudView @@ -44,6 +38,7 @@ const __setShowGeneral = ( view, key, movements ) => { new_move ) } else if (view === 'model_view') { + let new_move = movements.model_view.modelCrudView new_move[key] = true movements.model_view.setModelCrudView( @@ -144,7 +139,7 @@ const NavigationBar = ({ movements }) => { ├── Models
-
__setShowGeneral( 'model_view', 'show_models_and_dwonload', movements )}> +
__setShowGeneral( 'model_view', 'show_models_and_download', movements )}> │ ├── Show Models & Download
__setShowGeneral( 'model_view', 'upload_model', movements ) }> diff --git a/src/pages/func_group/rootUtils.js b/src/pages/func_group/rootUtils.js index 7786566..07fdfdd 100644 --- a/src/pages/func_group/rootUtils.js +++ b/src/pages/func_group/rootUtils.js @@ -22,7 +22,7 @@ const GeneralView = () => { ) const [modelCrudView, setModelCrudView] = useState( { - show_models_and_dwonload: false, + show_models_and_download: false, upload_model: false } ) @@ -60,16 +60,16 @@ const GeneralView = () => { movements={ movements } /> ) diff --git a/src/redux/asyncThunks/abstracts/abstractAddress.js b/src/redux/asyncThunks/abstracts/abstractAddress.js index 0353f78..164c1a8 100644 --- a/src/redux/asyncThunks/abstracts/abstractAddress.js +++ b/src/redux/asyncThunks/abstracts/abstractAddress.js @@ -1 +1 @@ -export const GeneralAddress = 'localhost:9090' \ No newline at end of file +export const GeneralAddress = 'http://localhost:9090' \ No newline at end of file diff --git a/src/redux/asyncThunks/abstracts/abstractService.js b/src/redux/asyncThunks/abstracts/abstractService.js index e175e1c..dc58850 100644 --- a/src/redux/asyncThunks/abstracts/abstractService.js +++ b/src/redux/asyncThunks/abstracts/abstractService.js @@ -1,7 +1,7 @@ import axios from 'axios' import { GeneralAddress } from './abstractAddress' -const APIAddress = 'http://' + GeneralAddress +const APIAddress = GeneralAddress let defaultBody = {} diff --git a/src/redux/slices/modelCrudSlice.js b/src/redux/slices/modelCrudSlice.js index 1f76bbc..f537fc8 100644 --- a/src/redux/slices/modelCrudSlice.js +++ b/src/redux/slices/modelCrudSlice.js @@ -8,7 +8,6 @@ const modelCrudSlice = createSlice( models_list: [], download_blend_file: '', upload_blend_file_status: '' - }, reducers: {}, extraReducers: { From 96f1d508fb2263d599f3a28e851f40ba11d1f93a Mon Sep 17 00:00:00 2001 From: TBS093A Date: Thu, 18 Feb 2021 19:12:32 +0100 Subject: [PATCH 21/33] React -> upgrade forms & fixes --- src/components/forms/formGenerator.js | 12 ++-- .../forms/model_crud/modelUpload.js | 52 ++++++++++++++- .../renderShowReadyRendersAndDownload.js | 65 +++++++++++++++++++ src/pages/func_group/navigationBar.js | 30 +++++++-- src/pages/func_group/render/renderIndex.js | 42 ++++++++++++ .../func_group/render_crud/renderCrudIndex.js | 11 ---- src/pages/func_group/root.js | 7 -- src/pages/func_group/rootUtils.js | 9 ++- .../asyncThunks/abstracts/abstractService.js | 17 +++-- src/redux/asyncThunks/modelCrudAsyncThunk.js | 3 - src/redux/slices/renderCrudSlice.js | 2 +- 11 files changed, 207 insertions(+), 43 deletions(-) create mode 100644 src/pages/func_group/render/renderIndex.js delete mode 100644 src/pages/func_group/render_crud/renderCrudIndex.js diff --git a/src/components/forms/formGenerator.js b/src/components/forms/formGenerator.js index 7f906c5..86b00d7 100644 --- a/src/components/forms/formGenerator.js +++ b/src/components/forms/formGenerator.js @@ -14,7 +14,9 @@ export const FormGenerator = ({ const handler = async (event) => { event.preventDefault() - if ( inputList[0].action === 'Download' ) { + if ( inputList[0].action === 'Download' + || inputList[0].action === 'Upload' + ) { await action() } else { for (let i = 0; i < refList.length; i++) { @@ -215,7 +217,8 @@ const UploadInputGenerator = ({ const onLoadFile = async (event) => { event.preventDefault() let data = event.target.files[0] - input.setFile(await toBase64(data)) + // input.setFile(await toBase64(data)) + input.setFile( data ) setDropInfos(data.name, data.size) } @@ -223,11 +226,12 @@ const UploadInputGenerator = ({ event.preventDefault() event.persist() let data = event.dataTransfer.files[0] - input.setFile(await toBase64(data)) + // input.setFile(await toBase64(data)) + input.setFile( data ) setDropInfos(data.name, data.size) } - const toBase64 = (file) => new Promise((resolve, reject) => { + const toBase64 = async (file) => new Promise((resolve, reject) => { let fileReader = new FileReader() fileReader.readAsDataURL(file) fileReader.onload = () => resolve(fileReader.result) diff --git a/src/components/forms/model_crud/modelUpload.js b/src/components/forms/model_crud/modelUpload.js index de69c65..f36572a 100644 --- a/src/components/forms/model_crud/modelUpload.js +++ b/src/components/forms/model_crud/modelUpload.js @@ -1,8 +1,58 @@ -import React from 'react' +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 ( <> + ) } diff --git a/src/components/forms/render_crud/renderShowReadyRendersAndDownload.js b/src/components/forms/render_crud/renderShowReadyRendersAndDownload.js index e69de29..5b003c4 100644 --- a/src/components/forms/render_crud/renderShowReadyRendersAndDownload.js +++ b/src/components/forms/render_crud/renderShowReadyRendersAndDownload.js @@ -0,0 +1,65 @@ +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: 'drop-box', + name: 'Renders', + values: render_list, + link: GeneralAddress + '/render/', + } + ] + + const handleRefresh = () => { + dispatch( renderCrudAsyncThunk.fetchGetAllRenders( token ) ) + } + + return ( + <> + + + ) + +} + +export default RenderShowAndDownloadForm \ No newline at end of file diff --git a/src/pages/func_group/navigationBar.js b/src/pages/func_group/navigationBar.js index 857350c..22da780 100644 --- a/src/pages/func_group/navigationBar.js +++ b/src/pages/func_group/navigationBar.js @@ -10,17 +10,17 @@ import userAuthAsyncThunk from '../../redux/asyncThunks/userAuthAsyncThunk' const __setShowGeneral = ( view, key, movements ) => { - movements.user_view.userCrudView = { + let user_default = { update_user: false, delete_user: false } - movements.model_view.modelCrudView = { + let model_default = { show_models_and_dwonload: false, upload_model: false } - movements.render_view.renderView = { + let render_default = { show_ready_renders_and_download: false, render_functionality: { render_single_image: false, @@ -37,6 +37,12 @@ const __setShowGeneral = ( view, key, movements ) => { 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 = movements.model_view.modelCrudView @@ -44,19 +50,31 @@ const __setShowGeneral = ( view, key, movements ) => { 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 = movements.render_view.renderView if ( key in new_move ) { new_move[key] = true - movements.model_view.setModelCrudView( + movements.render_view.setRenderView( new_move ) } else { new_move['render_functionality'][key] = true - movements.model_view.setModelCrudView( + movements.render_view.setRenderView( new_move ) } + movements.model_view.setModelCrudView( + model_default + ) + movements.user_view.setUserCrudView( + user_default + ) } } @@ -82,7 +100,7 @@ const NavigationBar = ({ movements }) => { const dispatch = useDispatch() useEffect( () => { - if ( user_get === {} && token !== '' && user.id > 0) + if ( Object.keys(user_get).length === 0 && token !== '' && user.id > 0) dispatch( userCrudAsyncThunk.fetchGetOneUser( { diff --git a/src/pages/func_group/render/renderIndex.js b/src/pages/func_group/render/renderIndex.js new file mode 100644 index 0000000..899c8bc --- /dev/null +++ b/src/pages/func_group/render/renderIndex.js @@ -0,0 +1,42 @@ +import React, { useState, useEffect } from 'react' + +import RenderShowAndDownloadForm from '../../../components/forms/render_crud/renderShowReadyRendersAndDownload' + +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 if (Object.keys(movement['movement']['render_functionality']).includes(name)) { + if (movement['movement'][name]) + return display + else + return hide + } else { + return hide + } + +} + +const RenderIndex = ( movement ) => { + + return ( +
+
+ +
+
+ ) +} + +export default RenderIndex \ No newline at end of file diff --git a/src/pages/func_group/render_crud/renderCrudIndex.js b/src/pages/func_group/render_crud/renderCrudIndex.js deleted file mode 100644 index 6ca6d3c..0000000 --- a/src/pages/func_group/render_crud/renderCrudIndex.js +++ /dev/null @@ -1,11 +0,0 @@ -import React, { useState, useEffect } from 'react' - -const RenderCrudIndex = () => { - - return ( -
-
- ) -} - -export default RenderCrudIndex \ No newline at end of file diff --git a/src/pages/func_group/root.js b/src/pages/func_group/root.js index 92585b7..47c7376 100644 --- a/src/pages/func_group/root.js +++ b/src/pages/func_group/root.js @@ -2,13 +2,6 @@ import React, { useState, useEffect } from 'react' import VerifyUserSession from './rootUtils' -import UserAuthIndex from './user_auth/userAuthIndex' -import UserCrudIndex from './user_crud/userCrudIndex' -import ModelCrudIndex from './model_crud/modelCrudIndex' -import RenderCrudIndex from './render_crud/renderCrudIndex' -import RenderWebsocketIndex from './render_websocket/renderWebsocketIndex' - - const Root = () => { return ( diff --git a/src/pages/func_group/rootUtils.js b/src/pages/func_group/rootUtils.js index 07fdfdd..45dbb27 100644 --- a/src/pages/func_group/rootUtils.js +++ b/src/pages/func_group/rootUtils.js @@ -6,8 +6,7 @@ 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 RenderCrudIndex from './render_crud/renderCrudIndex' -import RenderWebsocketIndex from './render_websocket/renderWebsocketIndex' +import RenderIndex from './render/renderIndex' import NavigationBar from './navigationBar' @@ -65,12 +64,12 @@ const GeneralView = () => { - - + /> */} ) } diff --git a/src/redux/asyncThunks/abstracts/abstractService.js b/src/redux/asyncThunks/abstracts/abstractService.js index dc58850..b3ae2b0 100644 --- a/src/redux/asyncThunks/abstracts/abstractService.js +++ b/src/redux/asyncThunks/abstracts/abstractService.js @@ -72,6 +72,7 @@ const responseAbstract = async (endpoint, method, token, body) => { body, ) ) + console.log(response) return response } @@ -86,8 +87,8 @@ const headerBuilder = (url, method, token, body) => { headers_r = { 'authorization': token, 'x-csrftoken': getCookie('csrftoken'), - 'accept': 'multipart/form-data', - 'content-type': 'multipart/form-data', + // 'accept': 'multipart/form-data', + // 'content-type': 'multipart/form-data' } } let headers = { @@ -97,9 +98,15 @@ const headerBuilder = (url, method, token, body) => { credentials: 'same-origin' } if (method === 'PUT' || method === 'POST' || method === 'PATCH') { - headers = Object.assign({}, headers, { - data: JSON.stringify(body), - }) + if ('file' in body) { + headers = Object.assign({}, headers, { + data: body, + }) + } else { + headers = Object.assign({}, headers, { + data: JSON.stringify(body), + }) + } } return headers } diff --git a/src/redux/asyncThunks/modelCrudAsyncThunk.js b/src/redux/asyncThunks/modelCrudAsyncThunk.js index c3c13a4..261312d 100644 --- a/src/redux/asyncThunks/modelCrudAsyncThunk.js +++ b/src/redux/asyncThunks/modelCrudAsyncThunk.js @@ -45,9 +45,6 @@ const fetchUploadModel = createAsyncThunk( body, thunkAPI ) => { - let formData = FormData() - formData.append("blend", body.file) - body.file = formData return await abstractService._post( endpoint, body, diff --git a/src/redux/slices/renderCrudSlice.js b/src/redux/slices/renderCrudSlice.js index 1019395..41786b5 100644 --- a/src/redux/slices/renderCrudSlice.js +++ b/src/redux/slices/renderCrudSlice.js @@ -11,7 +11,7 @@ const renderCrudSlice = createSlice( reducers: {}, extraReducers: { [renderCrudAsyncThunk.fetchGetAllRenders.fulfilled.type]: (state, action) => { - state.render_list = action.payload.data.render_list + state.render_list = action.payload.data }, [renderCrudAsyncThunk.fetchGetOneRenderAndDownload.fulfilled.type]: (state, action) => { state.download_zip_file = action.payload.data From 9b066d6d2f27e0721b52ba0256513ea6958a1f88 Mon Sep 17 00:00:00 2001 From: TBS093A Date: Thu, 18 Feb 2021 20:38:17 +0100 Subject: [PATCH 22/33] React / Forms -> compleate uploader form --- .../asyncThunks/abstracts/abstractService.js | 42 ++++++++++--------- src/redux/asyncThunks/modelCrudAsyncThunk.js | 9 +++- 2 files changed, 29 insertions(+), 22 deletions(-) diff --git a/src/redux/asyncThunks/abstracts/abstractService.js b/src/redux/asyncThunks/abstracts/abstractService.js index b3ae2b0..51fe1c1 100644 --- a/src/redux/asyncThunks/abstracts/abstractService.js +++ b/src/redux/asyncThunks/abstracts/abstractService.js @@ -72,7 +72,6 @@ const responseAbstract = async (endpoint, method, token, body) => { body, ) ) - console.log(response) return response } @@ -83,14 +82,6 @@ const headerBuilder = (url, method, token, body) => { 'accept': 'application/json', 'content-type': 'application/json', } - if ('file' in body) { - headers_r = { - 'authorization': token, - 'x-csrftoken': getCookie('csrftoken'), - // 'accept': 'multipart/form-data', - // 'content-type': 'multipart/form-data' - } - } let headers = { url: url, method: method, @@ -98,15 +89,9 @@ const headerBuilder = (url, method, token, body) => { credentials: 'same-origin' } if (method === 'PUT' || method === 'POST' || method === 'PATCH') { - if ('file' in body) { - headers = Object.assign({}, headers, { - data: body, - }) - } else { - headers = Object.assign({}, headers, { - data: JSON.stringify(body), - }) - } + headers = Object.assign({}, headers, { + data: JSON.stringify(body), + }) } return headers } @@ -129,7 +114,23 @@ const getCookie = (name) => { 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, @@ -138,5 +139,6 @@ export default { _post, _put, _patch, - _delete + _delete, + axiosFilePost } \ No newline at end of file diff --git a/src/redux/asyncThunks/modelCrudAsyncThunk.js b/src/redux/asyncThunks/modelCrudAsyncThunk.js index 261312d..1dab313 100644 --- a/src/redux/asyncThunks/modelCrudAsyncThunk.js +++ b/src/redux/asyncThunks/modelCrudAsyncThunk.js @@ -45,11 +45,16 @@ const fetchUploadModel = createAsyncThunk( body, thunkAPI ) => { - return await abstractService._post( - endpoint, + return await abstractService.axiosFilePost( + endpoint, body, body.token ) + // return await abstractService._post( + // endpoint, + // body, + // body.token + // ) } ) From 28492e2f2ad7339b4daf9f9faf72f2c7210e609a Mon Sep 17 00:00:00 2001 From: TBS093A Date: Thu, 18 Feb 2021 23:21:59 +0100 Subject: [PATCH 23/33] React / Froms / Websocket -> fixes & upgrades --- src/components/forms/formGenerator.js | 116 ++++++++++- .../model_crud/modelShowModelsAndDownload.js | 2 +- .../renderShowReadyRendersAndDownload.js | 2 +- .../render_websocket/renderSingleImage.js | 185 ++++++++++++++++++ src/pages/func_group/render/renderIndex.js | 10 +- src/redux/asyncThunks/modelCrudAsyncThunk.js | 7 +- .../asyncThunks/renderWebsocketAsyncThunk.js | 2 +- 7 files changed, 312 insertions(+), 12 deletions(-) diff --git a/src/components/forms/formGenerator.js b/src/components/forms/formGenerator.js index 86b00d7..b889a6f 100644 --- a/src/components/forms/formGenerator.js +++ b/src/components/forms/formGenerator.js @@ -14,7 +14,10 @@ export const FormGenerator = ({ const handler = async (event) => { event.preventDefault() - if ( inputList[0].action === 'Download' + if ( inputList[0].action === 'Async' ) { + await action(refList) + } else if ( + inputList[0].action === 'Download' || inputList[0].action === 'Upload' ) { await action() @@ -58,7 +61,7 @@ export const FormGenerator = ({ key={key} /> ) - } else if (input.type === 'drop-box') { + } else if (input.type === 'links-listing') { return ( ) + } else if (input.type === 'choice-listing') { + return ( + + ) + } else if (input.type === 'range') { + return ( + + ) } }) } @@ -198,6 +217,54 @@ const DownloadFilesListInputGenerator = ({ ) } +/** + * Text input generator, example: + * @param { + * { + * type: 'drop-box', + * name: 'name', + * values: [ 'string' ], + * ref: React.createRef() + * } } input - basic text input + * @param { + * { + * type: 'info', + * action: 'Update' + * endpoint: 'Album' + * } } info - information about form + */ +const ChoiceListingGenerator = ({ + input, info +}) => { + + const __handleRef = ( item ) => { + input.ref.current = { + value: item + } + } + + return ( +
+ {input.name + ':'} + { + input.values.map( (item) => { + return ( +
__handleRef( item ) } + > + { item } +
+ ) + } + ) + } +
+ ) +} + /** * Upload file input generator, example: * @param { @@ -266,6 +333,51 @@ const UploadInputGenerator = ({ ) } +/** + * 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 ( +
+
+ {input.name + ': ' + value + ' ' + input.unit } +
+ setValue( event.target.value ) } + /> +
+ ) +} export default FormGenerator \ No newline at end of file diff --git a/src/components/forms/model_crud/modelShowModelsAndDownload.js b/src/components/forms/model_crud/modelShowModelsAndDownload.js index a0fc798..7d84a01 100644 --- a/src/components/forms/model_crud/modelShowModelsAndDownload.js +++ b/src/components/forms/model_crud/modelShowModelsAndDownload.js @@ -39,7 +39,7 @@ const ModelShowAndDownloadForm = () => { button_value: 'Refresh Models List' }, { - type: 'drop-box', + type: 'links-listing', name: 'Models', values: models_list, link: GeneralAddress + '/model/', diff --git a/src/components/forms/render_crud/renderShowReadyRendersAndDownload.js b/src/components/forms/render_crud/renderShowReadyRendersAndDownload.js index 5b003c4..5122fcb 100644 --- a/src/components/forms/render_crud/renderShowReadyRendersAndDownload.js +++ b/src/components/forms/render_crud/renderShowReadyRendersAndDownload.js @@ -39,7 +39,7 @@ const RenderShowAndDownloadForm = () => { button_value: 'Refresh Renders List' }, { - type: 'drop-box', + type: 'links-listing', name: 'Renders', values: render_list, link: GeneralAddress + '/render/', diff --git a/src/components/forms/render_websocket/renderSingleImage.js b/src/components/forms/render_websocket/renderSingleImage.js index e69de29..6cd894d 100644 --- a/src/components/forms/render_websocket/renderSingleImage.js +++ b/src/components/forms/render_websocket/renderSingleImage.js @@ -0,0 +1,185 @@ +import React, { useState, useEffect } from 'react' +import { useSelector, useDispatch } from 'react-redux' + +import { userAuthSelector } from '../../../redux/slices/userAuthSlice' +import { modelCrudSelector } from '../../../redux/slices/modelCrudSlice' +import { renderWebsocketSelector } from '../../../redux/slices/renderWebsocketSlice' +import renderWebsocketAsyncThunk from '../../../redux/asyncThunks/renderWebsocketAsyncThunk' +import modelCrudAsyncThunk from '../../../redux/asyncThunks/modelCrudAsyncThunk' + +import FormGenerator from '../formGenerator' + + +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 { + web_socket, + address, + room_uuid, + messages, + connected + } = useSelector( renderWebsocketSelector ) + + 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: 'chice-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 + }, + ] + + const handleSendMessage = ( refs ) => { + + let rotate_conv = refs[2].current.value / 62 // on backend 0.1 - 6.2 value + + let body = { + // fileName: refs[0].current.value, + fileName: 'testHand.blend', + setID: refs[1].current.value, + rotate: rotate_conv, + nameSeries: 0, // index render picture in set (useless on the front & disable) + cameraID: refs[3].current.value, + resolutionX: refs[4].current.value, + resolutionY: refs[5].current.value + } + console.log( body ) + web_socket.send( + JSON.stringify( + body + ) + ) + } + + 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 + } + } + + if ( web_socket === null && address === '' && room_uuid === '') { + dispatch( renderWebsocketAsyncThunk.fetchConnect( 'image' ) ) + } + + if ( address !== '' ) { + web_socket.onmessage = (event) => { + dispatch( + renderWebsocketAsyncThunk.fetchSaveMessage( + JSON.parse( event.data ) + ) + ) + } + } + + } + ) + + return ( + <> + + { + messages.map( (item) => { + return ( + <> +
+ { item.info } +
+
+ { item.details } +
+
+ { item.group } +
+ + ) + } + ) + } + + ) +} + +export default RenderSingleImageForm \ No newline at end of file diff --git a/src/pages/func_group/render/renderIndex.js b/src/pages/func_group/render/renderIndex.js index 899c8bc..989e616 100644 --- a/src/pages/func_group/render/renderIndex.js +++ b/src/pages/func_group/render/renderIndex.js @@ -2,6 +2,9 @@ import React, { useState, useEffect } from 'react' import RenderShowAndDownloadForm from '../../../components/forms/render_crud/renderShowReadyRendersAndDownload' +import RenderSingleImageForm from '../../../components/forms/render_websocket/renderSingleImage' + + const __handleSwap = (name, movement) => { let display = { @@ -12,13 +15,15 @@ const __handleSwap = (name, movement) => { 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'][name]) + if (movement['movement']['render_functionality'][name]) return display else return hide @@ -35,6 +40,9 @@ const RenderIndex = ( movement ) => {
+
+ +
) } diff --git a/src/redux/asyncThunks/modelCrudAsyncThunk.js b/src/redux/asyncThunks/modelCrudAsyncThunk.js index 1dab313..9d4a1cd 100644 --- a/src/redux/asyncThunks/modelCrudAsyncThunk.js +++ b/src/redux/asyncThunks/modelCrudAsyncThunk.js @@ -36,7 +36,7 @@ const fetchGetOneModelAndDownload = createAsyncThunk( /** * @param body: * param token: base64 token, - * param file: document.querySelector('#file').files[0] + * param file: file binary * param user_id: user id */ const fetchUploadModel = createAsyncThunk( @@ -50,11 +50,6 @@ const fetchUploadModel = createAsyncThunk( body, body.token ) - // return await abstractService._post( - // endpoint, - // body, - // body.token - // ) } ) diff --git a/src/redux/asyncThunks/renderWebsocketAsyncThunk.js b/src/redux/asyncThunks/renderWebsocketAsyncThunk.js index 32c6bdb..3b08581 100644 --- a/src/redux/asyncThunks/renderWebsocketAsyncThunk.js +++ b/src/redux/asyncThunks/renderWebsocketAsyncThunk.js @@ -85,7 +85,7 @@ const fetchSaveMessage = createAsyncThunk( thunkAPI ) => { return { - message: body.message + message: body } } ) From 40881613632971f30099b10f311dce91a00f2d39 Mon Sep 17 00:00:00 2001 From: TBS093A Date: Fri, 19 Feb 2021 00:19:06 +0100 Subject: [PATCH 24/33] React -> upgrade websockets --- .../render_websocket/renderSingleImage.js | 24 +++++++----- .../asyncThunks/abstracts/abstractAddress.js | 4 +- src/redux/slices/renderWebsocketSlice.js | 37 +++++++++++++------ 3 files changed, 44 insertions(+), 21 deletions(-) diff --git a/src/components/forms/render_websocket/renderSingleImage.js b/src/components/forms/render_websocket/renderSingleImage.js index 6cd894d..5499e73 100644 --- a/src/components/forms/render_websocket/renderSingleImage.js +++ b/src/components/forms/render_websocket/renderSingleImage.js @@ -4,7 +4,9 @@ import { useSelector, useDispatch } from 'react-redux' import { userAuthSelector } from '../../../redux/slices/userAuthSlice' import { modelCrudSelector } from '../../../redux/slices/modelCrudSlice' import { renderWebsocketSelector } from '../../../redux/slices/renderWebsocketSlice' -import renderWebsocketAsyncThunk from '../../../redux/asyncThunks/renderWebsocketAsyncThunk' + +import { connect, saveMessage, disconnect } from '../../../redux/slices/renderWebsocketSlice' + import modelCrudAsyncThunk from '../../../redux/asyncThunks/modelCrudAsyncThunk' import FormGenerator from '../formGenerator' @@ -137,16 +139,20 @@ const RenderSingleImageForm = () => { } if ( web_socket === null && address === '' && room_uuid === '') { - dispatch( renderWebsocketAsyncThunk.fetchConnect( 'image' ) ) + connect( + { + address: '/single/image/' + } + ) } - if ( address !== '' ) { - web_socket.onmessage = (event) => { - dispatch( - renderWebsocketAsyncThunk.fetchSaveMessage( - JSON.parse( event.data ) - ) - ) + if ( address !== '' && web_socket !== null ) { + web_socket.onmessage = (event) => { + saveMessage( + { + message: JSON.parse( event.data ) + } + ) } } diff --git a/src/redux/asyncThunks/abstracts/abstractAddress.js b/src/redux/asyncThunks/abstracts/abstractAddress.js index 164c1a8..2e6fffa 100644 --- a/src/redux/asyncThunks/abstracts/abstractAddress.js +++ b/src/redux/asyncThunks/abstracts/abstractAddress.js @@ -1 +1,3 @@ -export const GeneralAddress = 'http://localhost:9090' \ No newline at end of file +const API = 'localhost:9090' +export const GeneralAddress = 'http://' + API +export const GeneralAddressWS = 'ws://' + API \ No newline at end of file diff --git a/src/redux/slices/renderWebsocketSlice.js b/src/redux/slices/renderWebsocketSlice.js index eed01f0..ed8ebad 100644 --- a/src/redux/slices/renderWebsocketSlice.js +++ b/src/redux/slices/renderWebsocketSlice.js @@ -1,6 +1,19 @@ 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 renderWebsocketSlice = createSlice( { name: 'render/async', @@ -11,32 +24,34 @@ const renderWebsocketSlice = createSlice( messages: [], connected: false }, - reducers: {}, - extraReducers: { - [renderWebsocketAsyncThunk.fetchConnect.fulfilled.type]: (state, action) => { - state.web_socket = action.web_socket - state.address = action.address - state.room_uuid = action.room_uuid + reducers: { + connect(state, action) { + state.room_uuid = __uuidv4() + state.address = GeneralAddressWS + action.payload.address + state.web_socket = new WebSocket( state.address + state.room_uuid ) state.messages = [] state.connected = true }, - [renderWebsocketAsyncThunk.fetchSaveMessage.fulfilled.type]: (state, action) => { + saveMessage(state, action) { state.messages = [ ...state.messages, - action.message + action.payload.message ] }, - [renderWebsocketAsyncThunk.fetchDisconnect.fulfilled.type]: (state, action) => { - state.web_socket = action.web_socket + disconnect(state) { + state.web_socket = null 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 \ No newline at end of file From f0cdf5823bc5c709d8b925e726cff962dc7fe43a Mon Sep 17 00:00:00 2001 From: TBS093A Date: Fri, 19 Feb 2021 02:54:34 +0100 Subject: [PATCH 25/33] React -> upgrade websocket & fix redux (delete websocket from redux because its crashed as shit) --- .../render_websocket/renderSingleImage.js | 109 +++++++++++++----- .../asyncThunks/abstracts/abstractAddress.js | 4 +- src/redux/slices/renderWebsocketSlice.js | 22 ++-- 3 files changed, 97 insertions(+), 38 deletions(-) diff --git a/src/components/forms/render_websocket/renderSingleImage.js b/src/components/forms/render_websocket/renderSingleImage.js index 5499e73..9e21844 100644 --- a/src/components/forms/render_websocket/renderSingleImage.js +++ b/src/components/forms/render_websocket/renderSingleImage.js @@ -1,10 +1,10 @@ -import React, { useState, useEffect } from 'react' +import React, { useState, useEffect, useCallback } from 'react' import { useSelector, useDispatch } from 'react-redux' import { userAuthSelector } from '../../../redux/slices/userAuthSlice' import { modelCrudSelector } from '../../../redux/slices/modelCrudSlice' -import { renderWebsocketSelector } from '../../../redux/slices/renderWebsocketSlice' +import { renderWebsocketSelector } from '../../../redux/slices/renderWebsocketSlice' import { connect, saveMessage, disconnect } from '../../../redux/slices/renderWebsocketSlice' import modelCrudAsyncThunk from '../../../redux/asyncThunks/modelCrudAsyncThunk' @@ -14,7 +14,10 @@ import FormGenerator from '../formGenerator' const RenderSingleImageForm = () => { + let web_socket = null + const dispatch = useDispatch() + const stableDispatch = useCallback(dispatch, []) const choiceListing = React.createRef() const setIdRange = React.createRef() @@ -24,7 +27,7 @@ const RenderSingleImageForm = () => { const resolutionYRange = React.createRef() const { - web_socket, + web_socket_address, address, room_uuid, messages, @@ -104,13 +107,34 @@ const RenderSingleImageForm = () => { }, ] + const handleConnect = ( event ) => { + + event.preventDefault() + + if ( web_socket === null && address === '' && room_uuid === '') { + stableDispatch( + connect( + { + address: '/single/image/' + } + ) + ) + if (web_socket_address !== '') { + web_socket = new WebSocket( web_socket_address ) + } + } + + console.log('connect') + + } + const handleSendMessage = ( refs ) => { let rotate_conv = refs[2].current.value / 62 // on backend 0.1 - 6.2 value let body = { // fileName: refs[0].current.value, - fileName: 'testHand.blend', + fileName: 'testHand', setID: refs[1].current.value, rotate: rotate_conv, nameSeries: 0, // index render picture in set (useless on the front & disable) @@ -119,11 +143,51 @@ const RenderSingleImageForm = () => { resolutionY: refs[5].current.value } console.log( body ) - web_socket.send( - JSON.stringify( - body + try { + web_socket.send( + JSON.stringify( + body + ) ) - ) + } catch (error) { + web_socket.close() + stableDispatch( + disconnect() + ) + console.log(error) + } + } + + const handleDisconnect = ( event ) => { + + event.preventDefault() + + if ( address !== '' && room_uuid !== '') { + try { + web_socket.close() + stableDispatch( + disconnect() + ) + } catch (error) { + console.log(error) + } + } + + console.log('disconnect') + + } + + if ( connected === true && address !== '' && web_socket !== null ) { + web_socket.onmessage = (event) => { + console.log( event.data ) + // stableDispatch( + // saveMessage( + // { + // message: JSON.parse( event.data ) + // } + // ) + // ) + } } let blocker = false @@ -137,24 +201,6 @@ const RenderSingleImageForm = () => { blocker = true } } - - if ( web_socket === null && address === '' && room_uuid === '') { - connect( - { - address: '/single/image/' - } - ) - } - - if ( address !== '' && web_socket !== null ) { - web_socket.onmessage = (event) => { - saveMessage( - { - message: JSON.parse( event.data ) - } - ) - } - } } ) @@ -166,6 +212,17 @@ const RenderSingleImageForm = () => { refList={ refList } action={ handleSendMessage } /> + { + connected + ? + + : + + } { messages.map( (item) => { return ( diff --git a/src/redux/asyncThunks/abstracts/abstractAddress.js b/src/redux/asyncThunks/abstracts/abstractAddress.js index 2e6fffa..0bd6cb8 100644 --- a/src/redux/asyncThunks/abstracts/abstractAddress.js +++ b/src/redux/asyncThunks/abstracts/abstractAddress.js @@ -1,3 +1,3 @@ -const API = 'localhost:9090' +let API = 'localhost:9090' export const GeneralAddress = 'http://' + API -export const GeneralAddressWS = 'ws://' + API \ No newline at end of file +export const GeneralAddressWS = 'ws://' + API + '/render' \ No newline at end of file diff --git a/src/redux/slices/renderWebsocketSlice.js b/src/redux/slices/renderWebsocketSlice.js index ed8ebad..093a2ff 100644 --- a/src/redux/slices/renderWebsocketSlice.js +++ b/src/redux/slices/renderWebsocketSlice.js @@ -1,7 +1,8 @@ import { createSlice } from '@reduxjs/toolkit' import renderWebsocketAsyncThunk from '../asyncThunks/renderWebsocketAsyncThunk' -import GeneralAddressWS from '../asyncThunks/abstracts/abstractAddress' +import { GeneralAddressWS } from '../asyncThunks/abstracts/abstractAddress' + const __uuidv4 = () => { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace( @@ -13,22 +14,23 @@ const __uuidv4 = () => { ) } +const initialState = { + web_socket_address: '', + address: '', + room_uuid: '', + messages: [], + connected: false +} const renderWebsocketSlice = createSlice( { name: 'render/async', - initialState: { - web_socket: null, - address: '', - room_uuid: '', - messages: [], - connected: false - }, + initialState, reducers: { connect(state, action) { state.room_uuid = __uuidv4() state.address = GeneralAddressWS + action.payload.address - state.web_socket = new WebSocket( state.address + state.room_uuid ) + state.web_socket_address = state.address + state.room_uuid state.messages = [] state.connected = true }, @@ -39,7 +41,7 @@ const renderWebsocketSlice = createSlice( ] }, disconnect(state) { - state.web_socket = null + state.web_socket_address = '' state.address = '' state.room_uuid = '' state.messages = [] From 0615309c193b9df5b8af069f278a85b509ed4f36 Mon Sep 17 00:00:00 2001 From: TBS093A Date: Fri, 19 Feb 2021 10:51:12 +0100 Subject: [PATCH 26/33] React -> create websocket abstract --- src/components/forms/abstractWebsocket.js | 163 ++++++++++++++++++ .../render_websocket/renderSingleImage.js | 137 +-------------- 2 files changed, 168 insertions(+), 132 deletions(-) create mode 100644 src/components/forms/abstractWebsocket.js diff --git a/src/components/forms/abstractWebsocket.js b/src/components/forms/abstractWebsocket.js new file mode 100644 index 0000000..d1bad59 --- /dev/null +++ b/src/components/forms/abstractWebsocket.js @@ -0,0 +1,163 @@ +import React, { useState, useEffect } from 'react' +import { useSelector, useDispatch } from 'react-redux' + +import { renderWebsocketSelector } from '../../../redux/slices/renderWebsocketSlice' +import { connect, saveMessage, disconnect } from '../../../redux/slices/renderWebsocketSlice' + +import FormGenerator from '../formGenerator' + + +const AbstractWebsocket = ({ addressWS, inputList, refList }) => { + + let web_socket = 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 + } + ) + ) + } + + console.log('connect') + + } + + const handleSendMessage = ( refs ) => { + + let rotate_conv = refs[2].current.value / 62 // on backend 0.1 - 6.2 value + + let body = { + // fileName: refs[0].current.value, + fileName: 'testHand', + setID: refs[1].current.value, + rotate: rotate_conv, + nameSeries: 0, // index render picture in set (useless on the front & disable) + cameraID: refs[3].current.value, + resolutionX: refs[4].current.value, + resolutionY: refs[5].current.value + } + console.log( body ) + try { + + web_socket.onopen = (event) => { + + web_socket.send( + JSON.stringify( + body + ) + ) + + } + + } catch (error) { + web_socket.close() + dispatch( + disconnect() + ) + 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 !== '' ) { + + } + + console.log('disconnect') + + } + + if ( web_socket !== null && connected === true && address !== '' ) { + web_socket.onmessage = (event) => { + console.log( event.data ) + dispatch( + saveMessage( + { + message: JSON.parse( event.data ) + } + ) + ) + } + } + + useEffect( + () => { + + if ( web_socket_address !== '' && web_socket === null ) { + web_socket = new WebSocket( web_socket_address ) + } + + } + ) + + return ( + <> + + { + connected + ? + + : + + } + { + messages.map( (item) => { + return ( + <> +
+ { item.info } +
+
+ { item.details } +
+
+ { item.group } +
+ + ) + } + ) + } + + ) +} + +export default AbstractWebsocket \ No newline at end of file diff --git a/src/components/forms/render_websocket/renderSingleImage.js b/src/components/forms/render_websocket/renderSingleImage.js index 9e21844..8b3ee9e 100644 --- a/src/components/forms/render_websocket/renderSingleImage.js +++ b/src/components/forms/render_websocket/renderSingleImage.js @@ -1,23 +1,17 @@ -import React, { useState, useEffect, useCallback } from 'react' +import React, { useEffect } from 'react' import { useSelector, useDispatch } from 'react-redux' import { userAuthSelector } from '../../../redux/slices/userAuthSlice' import { modelCrudSelector } from '../../../redux/slices/modelCrudSlice' -import { renderWebsocketSelector } from '../../../redux/slices/renderWebsocketSlice' -import { connect, saveMessage, disconnect } from '../../../redux/slices/renderWebsocketSlice' - import modelCrudAsyncThunk from '../../../redux/asyncThunks/modelCrudAsyncThunk' -import FormGenerator from '../formGenerator' +import AbstractWebsocket from '../abstractWebsocket' const RenderSingleImageForm = () => { - let web_socket = null - const dispatch = useDispatch() - const stableDispatch = useCallback(dispatch, []) const choiceListing = React.createRef() const setIdRange = React.createRef() @@ -25,17 +19,8 @@ const RenderSingleImageForm = () => { const cameraIdRange = React.createRef() const resolutionXRange = React.createRef() const resolutionYRange = React.createRef() - - const { - web_socket_address, - address, - room_uuid, - messages, - connected - } = useSelector( renderWebsocketSelector ) const { models_list } = useSelector( modelCrudSelector ) - const { user, token } = useSelector( userAuthSelector ) let refList = [ @@ -107,95 +92,12 @@ const RenderSingleImageForm = () => { }, ] - const handleConnect = ( event ) => { - - event.preventDefault() - - if ( web_socket === null && address === '' && room_uuid === '') { - stableDispatch( - connect( - { - address: '/single/image/' - } - ) - ) - if (web_socket_address !== '') { - web_socket = new WebSocket( web_socket_address ) - } - } - - console.log('connect') - - } - - const handleSendMessage = ( refs ) => { - - let rotate_conv = refs[2].current.value / 62 // on backend 0.1 - 6.2 value - - let body = { - // fileName: refs[0].current.value, - fileName: 'testHand', - setID: refs[1].current.value, - rotate: rotate_conv, - nameSeries: 0, // index render picture in set (useless on the front & disable) - cameraID: refs[3].current.value, - resolutionX: refs[4].current.value, - resolutionY: refs[5].current.value - } - console.log( body ) - try { - web_socket.send( - JSON.stringify( - body - ) - ) - } catch (error) { - web_socket.close() - stableDispatch( - disconnect() - ) - console.log(error) - } - } - - const handleDisconnect = ( event ) => { - - event.preventDefault() - - if ( address !== '' && room_uuid !== '') { - try { - web_socket.close() - stableDispatch( - disconnect() - ) - } catch (error) { - console.log(error) - } - } - - console.log('disconnect') - - } - - if ( connected === true && address !== '' && web_socket !== null ) { - web_socket.onmessage = (event) => { - console.log( event.data ) - // stableDispatch( - // saveMessage( - // { - // message: JSON.parse( event.data ) - // } - // ) - // ) - } - } - let blocker = false useEffect( () => { - if ( models_list.length === 0 && user.id > 0 && token !== '' && !blocker ) { + if ( models_list.length === 0 && user.id > 0 && token !== '' && blocker === false ) { dispatch( modelCrudAsyncThunk.fetchGetAllModels( token ) ) if ( models_list.length === 0 ) { blocker = true @@ -207,40 +109,11 @@ const RenderSingleImageForm = () => { return ( <> - - { - connected - ? - - : - - } - { - messages.map( (item) => { - return ( - <> -
- { item.info } -
-
- { item.details } -
-
- { item.group } -
- - ) - } - ) - } ) } From d5abcd0dbe572e36be43b961ab3c6dd38ec3da6f Mon Sep 17 00:00:00 2001 From: TBS093A Date: Fri, 19 Feb 2021 21:34:41 +0100 Subject: [PATCH 27/33] React -> big upgrades && big fixes --- src/components/forms/abstractWebsocket.js | 175 ++++--- src/components/forms/formGenerator.js | 115 ++++- .../forms/render_websocket/renderAll.js | 93 ++++ .../forms/render_websocket/renderSingleSet.js | 134 ++++++ .../render_websocket/renderVectorImage.js | 445 ++++++++++++++++++ src/pages/func_group/render/renderIndex.js | 13 + src/redux/slices/renderWebsocketSlice.js | 6 + 7 files changed, 927 insertions(+), 54 deletions(-) diff --git a/src/components/forms/abstractWebsocket.js b/src/components/forms/abstractWebsocket.js index d1bad59..f5f05d4 100644 --- a/src/components/forms/abstractWebsocket.js +++ b/src/components/forms/abstractWebsocket.js @@ -1,15 +1,46 @@ import React, { useState, useEffect } from 'react' import { useSelector, useDispatch } from 'react-redux' -import { renderWebsocketSelector } from '../../../redux/slices/renderWebsocketSlice' -import { connect, saveMessage, disconnect } from '../../../redux/slices/renderWebsocketSlice' +import { renderWebsocketSelector } from '../../redux/slices/renderWebsocketSlice' +import { connect, saveMessage, resetMessages, disconnect } from '../../redux/slices/renderWebsocketSlice' -import FormGenerator from '../formGenerator' +import FormGenerator from './formGenerator' -const AbstractWebsocket = ({ addressWS, inputList, refList }) => { +const ProgressBar = () => { - let web_socket = null + const { + percents, + connect + } = useSelector( renderWebsocketSelector ) + + return ( +
+
+ { + typeof percents === 'number' + ? 'Progress: ' + percents + '%' + : percents + } +
+
+ { + typeof percents === 'number' + ?
+
+ :
+
+ } +
+
+ ) + +} + + +const AbstractWebsocket = ({ addressWS, inputList, refList, bodyComparer }) => { + + const [web_socket, setWebsocket] = useState(null) const dispatch = useDispatch() @@ -36,43 +67,39 @@ const AbstractWebsocket = ({ addressWS, inputList, refList }) => { ) } - console.log('connect') } const handleSendMessage = ( refs ) => { + + let body = bodyComparer( refs ) - let rotate_conv = refs[2].current.value / 62 // on backend 0.1 - 6.2 value - - let body = { - // fileName: refs[0].current.value, - fileName: 'testHand', - setID: refs[1].current.value, - rotate: rotate_conv, - nameSeries: 0, // index render picture in set (useless on the front & disable) - cameraID: refs[3].current.value, - resolutionX: refs[4].current.value, - resolutionY: refs[5].current.value - } console.log( body ) try { - - web_socket.onopen = (event) => { - - web_socket.send( - JSON.stringify( - body - ) - ) - } + dispatch( + saveMessage( + { + message: { info: 0 } // start + } + ) + ) + + web_socket.send( + JSON.stringify( + body + ) + ) } catch (error) { + web_socket.close() dispatch( disconnect() ) + setWebsocket(null) console.log(error) + } } @@ -90,31 +117,42 @@ const AbstractWebsocket = ({ addressWS, inputList, refList }) => { console.log(error) } } else if ( address !== '' && room_uuid !== '' ) { - + dispatch( + disconnect() + ) } + setWebsocket(null) + console.log('disconnect') } - if ( web_socket !== null && connected === true && address !== '' ) { - web_socket.onmessage = (event) => { - console.log( event.data ) - dispatch( - saveMessage( - { - message: JSON.parse( event.data ) - } - ) - ) - } - } - useEffect( () => { if ( web_socket_address !== '' && web_socket === null ) { - web_socket = new WebSocket( web_socket_address ) + + 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 ) + } + ) + ) + } + } + } } @@ -127,6 +165,7 @@ const AbstractWebsocket = ({ addressWS, inputList, refList }) => { refList={ refList } action={ handleSendMessage } /> + { connected ? @@ -138,24 +177,54 @@ const AbstractWebsocket = ({ addressWS, inputList, refList }) => { Connect } +
{ messages.map( (item) => { return ( - <> -
- { item.info } -
-
- { item.details } -
-
- { item.group } -
- +
+ <> + { + Object.keys(item).map( (key) => { + + if ( key == 'details' ) { + return ( + <> + { + Object.keys(item[key]).map( (keyTwo) => { + return ( +
+ { ' ' + keyTwo + ': ' + item[key][keyTwo] + ' ' } +
+ ) + } + ) + } + + ) + } else if ( key === 'image' ) { + return ( + + ) + } else { + return ( + <> + { key + ': ' + item[key] + ' ' } + + ) + } + } + ) + } + +
) } ) } +
) } diff --git a/src/components/forms/formGenerator.js b/src/components/forms/formGenerator.js index b889a6f..cc1eefe 100644 --- a/src/components/forms/formGenerator.js +++ b/src/components/forms/formGenerator.js @@ -93,6 +93,14 @@ export const FormGenerator = ({ key={key} /> ) + } else if (input.type === 'vector') { + return ( + + ) } }) } @@ -223,7 +231,7 @@ const DownloadFilesListInputGenerator = ({ * { * type: 'drop-box', * name: 'name', - * values: [ 'string' ], + * values: list, * ref: React.createRef() * } } input - basic text input * @param { @@ -371,6 +379,7 @@ const RangeInputGenerator = ({ name={name} min={input.min} max={input.max} + defaultValue={input.min} step={input.step} ref={input.ref} type='range' @@ -380,4 +389,108 @@ const RangeInputGenerator = ({ ) } +const RangeGenerator = ({ + key, + label, + labelStyle, + valueStyle, + style, + name, + unit, + min, + max, + defaultValue, + step, + reference +}) => { + + const [value, setValue] = useState(0) + + return ( + <> +
+ { label + ': ' } +
+ setValue( event.target.value ) } + /> +
+ { value + ' ' + unit } +
+ + ) + +} + +/** + * 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 +}) => { + + const [value, setValue] = useState(0) + + return ( +
+
+ { input.name } +
+ { + Object.keys(input.refDict).map( (key) => { + + let name = input.name + key + info.action + info.endpoint + 'Input' + return ( +
+ +
+ ) + } + ) + } +
+ ) +} + + export default FormGenerator \ No newline at end of file diff --git a/src/components/forms/render_websocket/renderAll.js b/src/components/forms/render_websocket/renderAll.js index e69de29..2b6929f 100644 --- a/src/components/forms/render_websocket/renderAll.js +++ b/src/components/forms/render_websocket/renderAll.js @@ -0,0 +1,93 @@ +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 resolutionXRange = React.createRef() + const resolutionYRange = React.createRef() + + const { models_list } = useSelector( modelCrudSelector ) + const { user, token } = useSelector( userAuthSelector ) + + let refList = [ + choiceListing, + resolutionXRange, + resolutionYRange, + ] + + let inputList = [ + { + type: 'info', + action: 'Async', + endpint: 'render/async/all', + button_value: 'Render All Sets' + }, + { + type: 'chice-listing', + name: 'Models', + values: models_list, + ref: choiceListing + }, + { + 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, + fileName: 'testHand', + resolutionX: refs[1].current.value, + resolutionY: refs[2].current.value, + } + } + + return ( + <> + + + ) +} + +export default RenderAllForm \ No newline at end of file diff --git a/src/components/forms/render_websocket/renderSingleSet.js b/src/components/forms/render_websocket/renderSingleSet.js index e69de29..ff95594 100644 --- a/src/components/forms/render_websocket/renderSingleSet.js +++ b/src/components/forms/render_websocket/renderSingleSet.js @@ -0,0 +1,134 @@ +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: 'chice-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, + 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 ( + <> + + + ) +} + +export default RenderSingleSetForm \ No newline at end of file diff --git a/src/components/forms/render_websocket/renderVectorImage.js b/src/components/forms/render_websocket/renderVectorImage.js index e69de29..8e3144e 100644 --- a/src/components/forms/render_websocket/renderVectorImage.js +++ b/src/components/forms/render_websocket/renderVectorImage.js @@ -0,0 +1,445 @@ +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: 'chice-listing', + name: 'Models', + values: models_list, + ref: choiceListing + }, + { + type: 'range', + name: 'Rotate', + min: 1, + max: 360, + step: 1, + unit: 'deg', + ref: rotateRange + }, + { + type: 'range', + name: 'Camera ID', + min: 0, + max: 1, + step: 1, + unit: 'camera index', + ref: cameraIdRange + }, + { + type: 'range', + name: 'Resolution X', + min: 600, + max: 4096, + step: 10, + unit: 'px', + ref: resolutionXRange + }, + { + type: 'range', + name: 'Resolution Y', + min: 300, + max: 3112, + step: 10, + unit: 'px', + ref: resolutionYRange + }, + // { + // type: 'vector', + // name: 'Wirst (experimental)', + // native: 'Nadgarstek', + // min: fingers_min, + // max: fingers_max, + // refDict: IK_nadgarstek, + // }, + // { + // type: 'vector', + // name: 'Litte Finger Joint 3 (experimental)', + // native: 'Mały Palec Joint 3', + // min: fingers_min, + // max: fingers_max, + // refDict: IK_joint3_R, + // }, + // { + // type: 'vector', + // name: 'Ring Finger Joint 4 (experimental)', + // native: 'Serdeczny Palec Joint 4', + // min: fingers_min, + // max: fingers_max, + // refDict: IK_joint4_R, + // }, + // { + // type: 'vector', + // name: 'Middle Finger Joint 5 (experimental)', + // native: 'Środkowy Palec Joint 5', + // min: fingers_min, + // max: fingers_max, + // refDict: IK_joint5_R, + // }, + // { + // type: 'vector', + // name: 'Index Finger Joint 6 (experimental)', + // native: 'Wskazujący Palec Joint 6', + // min: fingers_min, + // max: fingers_max, + // refDict: IK_joint6_R, + // }, + { + type: 'vector', + name: 'Litte Finger 1', + native: 'Mały 1', + min: validate_fingers.others.min.part_1, + max: validate_fingers.others.max.part_1, + refDict: IK_maly_1_R, + }, + { + type: 'vector', + name: 'Litte Finger 2', + native: 'Mały 2', + min: validate_fingers.others.min.part_2, + max: validate_fingers.others.max.part_2, + refDict: IK_maly_2_R, + }, + { + type: 'vector', + name: 'Litte Finger 3', + native: 'Mały 3', + min: validate_fingers.others.min.part_3, + max: validate_fingers.others.max.part_3, + refDict: IK_maly_3_R, + }, + { + type: 'vector', + name: 'Ring Finger 1', + native: 'Serdeczny 1', + min: validate_fingers.others.min.part_1, + max: validate_fingers.others.max.part_1, + refDict: IK_serdeczny_1_R, + }, + { + type: 'vector', + name: 'Ring Finger 2', + native: 'Serdeczny 2', + min: validate_fingers.others.min.part_2, + max: validate_fingers.others.max.part_2, + refDict: IK_serdeczny_2_R, + }, + { + type: 'vector', + name: 'Ring Finger 3', + native: 'Serdeczny 3', + min: validate_fingers.others.min.part_3, + max: validate_fingers.others.max.part_3, + refDict: IK_serdeczny_3_R, + }, + { + type: 'vector', + name: 'Middle Finger 1', + native: 'Środkowy 1', + min: validate_fingers.others.min.part_1, + max: validate_fingers.others.max.part_1, + refDict: IK_srodkowy_1_R, + }, + { + type: 'vector', + name: 'Middle Finger 3', + native: 'Środkowy 3', + min: validate_fingers.others.min.part_2, + max: validate_fingers.others.max.part_2, + refDict: IK_srodkowy_2_R, + }, + { + type: 'vector', + name: 'Middle Finger 3', + native: 'Środkowy 3', + min: validate_fingers.others.min.part_3, + max: validate_fingers.others.max.part_3, + refDict: IK_srodkowy_3_R, + }, + { + type: 'vector', + name: 'Index Finger 1', + native: 'Wskazujący 1', + min: validate_fingers.others.min.part_1, + max: validate_fingers.others.max.part_1, + refDict: IK_wskazujacy_1_R, + }, + { + type: 'vector', + name: 'Index Finger 2', + native: 'Wskazujący 2', + min: validate_fingers.others.min.part_2, + max: validate_fingers.others.max.part_2, + refDict: IK_wskazujacy_2_R, + }, + { + type: 'vector', + name: 'Index Finger 3', + native: 'Wskazujący 3', + min: validate_fingers.others.min.part_3, + max: validate_fingers.others.max.part_3, + refDict: IK_wskazujacy_3_R, + }, + { + type: 'vector', + name: 'Thumb 0', + native: 'Kciuk 0', + min: validate_fingers.thumb.min.part_0, + max: validate_fingers.thumb.max.part_0, + refDict: IK_kciuk_0_R, + }, + { + type: 'vector', + name: 'Thumb 1', + native: 'Kciuk 1', + min: validate_fingers.thumb.min.part_1, + max: validate_fingers.thumb.max.part_1, + refDict: IK_kciuk_1_R, + }, + { + type: 'vector', + name: 'Thumb 2', + native: 'Kciuk 2', + min: validate_fingers.thumb.min.part_2, + max: validate_fingers.thumb.max.part_2, + refDict: IK_kciuk_2_R, + }, + ] + + let blocker = false + + useEffect( + () => { + + if ( models_list.length === 0 && user.id > 0 && token !== '' && blocker === false ) { + dispatch( modelCrudAsyncThunk.fetchGetAllModels( token ) ) + if ( models_list.length === 0 ) { + blocker = true + } + } + + } + ) + + const bodyComparer = ( refs ) => { + + let vectors = {} + + console.log( refs ) + + Object.keys(refs[5]).map( + ( key ) => { + let singleFinger = { + scale: 0, + x: 0, + y: 0, + z: 0 + } + singleFinger['scale'] = 0.9 + singleFinger['x'] = parseFloat(refs[5][key]['x'].current.value) + singleFinger['y'] = parseFloat(refs[5][key]['y'].current.value) + singleFinger['z'] = parseFloat(refs[5][key]['z'].current.value) + vectors[key] = singleFinger + } + ) + + return { + // fileName: refs[0].current.value, + fileName: 'testHand', + 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 ( + <> + + + ) +} + +export default RenderVectorSingleImageForm \ No newline at end of file diff --git a/src/pages/func_group/render/renderIndex.js b/src/pages/func_group/render/renderIndex.js index 989e616..11d7786 100644 --- a/src/pages/func_group/render/renderIndex.js +++ b/src/pages/func_group/render/renderIndex.js @@ -3,6 +3,10 @@ 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' const __handleSwap = (name, movement) => { @@ -43,6 +47,15 @@ const RenderIndex = ( movement ) => {
+
+ +
+
+ +
+
+ +
) } diff --git a/src/redux/slices/renderWebsocketSlice.js b/src/redux/slices/renderWebsocketSlice.js index 093a2ff..f03c5ac 100644 --- a/src/redux/slices/renderWebsocketSlice.js +++ b/src/redux/slices/renderWebsocketSlice.js @@ -19,6 +19,7 @@ const initialState = { address: '', room_uuid: '', messages: [], + percents: 0.0, connected: false } @@ -32,6 +33,7 @@ const renderWebsocketSlice = createSlice( 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) { @@ -39,6 +41,10 @@ const renderWebsocketSlice = createSlice( ...state.messages, action.payload.message ] + state.percents = action.payload.message.info + }, + resetMessages(state) { + state.messages = [] }, disconnect(state) { state.web_socket_address = '' From 28f755a0a237146ac92345db633976699965954b Mon Sep 17 00:00:00 2001 From: TBS093A Date: Sat, 20 Feb 2021 23:03:00 +0100 Subject: [PATCH 28/33] React -> add all styles && upgrade --- src/components/forms/abstractWebsocket.js | 162 ++++--- src/components/forms/formGenerator.js | 80 ++-- .../model_crud/modelShowModelsAndDownload.js | 7 +- .../forms/model_crud/modelUpload.js | 7 +- .../renderShowReadyRendersAndDownload.js | 4 +- .../render_websocket/renderVectorImage.js | 4 +- .../forms/render_websocket/renderVectorSet.js | 444 ++++++++++++++++++ src/components/forms/user_auth/userLogin.js | 4 +- .../forms/user_auth/userRegister.js | 4 +- .../func_group/model_crud/modelCrudIndex.js | 7 +- src/pages/func_group/navigationBar.js | 140 ++++-- src/pages/func_group/render/renderIndex.js | 4 + .../func_group/user_auth/userAuthIndex.js | 5 +- src/pages/index.js | 1 + src/redux/slices/userCrudSlice.js | 14 +- src/styles/form/form.scss | 0 src/styles/general.scss | 292 ++++++++++++ 17 files changed, 1014 insertions(+), 165 deletions(-) create mode 100644 src/styles/form/form.scss create mode 100644 src/styles/general.scss diff --git a/src/components/forms/abstractWebsocket.js b/src/components/forms/abstractWebsocket.js index f5f05d4..5bd449c 100644 --- a/src/components/forms/abstractWebsocket.js +++ b/src/components/forms/abstractWebsocket.js @@ -15,21 +15,31 @@ const ProgressBar = () => { } = useSelector( renderWebsocketSelector ) return ( -
-
+
+
{ typeof percents === 'number' ? 'Progress: ' + percents + '%' - : percents + : percents === 'render_success' || percents === 'Ready to work. Get params' + ? percents + : '' }
-
+
{ typeof percents === 'number' - ?
-
- :
+ ?
+ : percents === 'render success' + ?
+
+ : <> }
@@ -160,70 +170,94 @@ const AbstractWebsocket = ({ addressWS, inputList, refList, bodyComparer }) => { return ( <> - - - { - connected - ? +
+ +
+
+

+ { addressWS } +

+ + { + connected + ? - : + Disconnect + + : - } -
- { - messages.map( (item) => { - return ( -
- <> - { - Object.keys(item).map( (key) => { + Connect + + } +
+
+

+ console: +

+
+ { + messages.slice(0).reverse().map( (item) => { + return ( +
+ <> + { + Object.keys(item).map( (key) => { - if ( key == 'details' ) { - return ( - <> - { - Object.keys(item[key]).map( (keyTwo) => { - return ( -
- { ' ' + keyTwo + ': ' + item[key][keyTwo] + ' ' } -
+ if ( key == 'details' ) { + return ( + <> + { + Object.keys(item[key]).map( (keyTwo) => { + return ( +
+ { ' ' + keyTwo + ': ' + item[key][keyTwo] + ' ' } +
+ ) + } ) } - ) - } - - ) - } else if ( key === 'image' ) { - return ( - - ) - } else { - return ( - <> - { key + ': ' + item[key] + ' ' } - - ) - } - } - ) - } - -
+ + ) + } else if ( key === 'image' ) { + return ( + + ) + } else { + return ( + <> + { key + ': ' + item[key] + ' ' } + + ) + } + } + ) + } + +
+ ) + } ) } - ) - } +
) diff --git a/src/components/forms/formGenerator.js b/src/components/forms/formGenerator.js index cc1eefe..197a503 100644 --- a/src/components/forms/formGenerator.js +++ b/src/components/forms/formGenerator.js @@ -39,7 +39,7 @@ export const FormGenerator = ({ let info return ( -
handler(event)}> + handler(event)} className="form"> { inputList.map((input, key) => { @@ -137,8 +137,10 @@ const TextInputGenerator = ({ input, info }) => { return ( -
- {input.name + ':'} +
+
+ {input.name + ':'} +
{ return ( -
- {input.name + ':'} +
+
+ {input.name + ':'} +
onLoadFileDrop(event)} > - 
+            
                 {input.dropInfo}
             

             
             
+        

             

                 { label + ': ' }
             

@@ -427,7 +431,7 @@ const RangeGenerator = ({
             

                 { value + ' ' + unit }
             

-        
+        

     )
 
 }
@@ -456,38 +460,38 @@ const VectorInputGenerator = ({
     input, info
 }) => {
 
-    const [value, setValue] = useState(0)
-
     return (
-        

-            

+        

+            

                 { input.name }
             

-            {
-                Object.keys(input.refDict).map( (key) => {
+            

+                {
+                    Object.keys(input.refDict).map( (key) => {
 
-                        let name = input.name + key + info.action + info.endpoint + 'Input'
-                        return (
-                            

-                                
-                            

-                        )
-                    }
-                )
-            }
+                            let name = input.name + key + info.action + info.endpoint + 'Input'
+                            return (
+                                

+                                    
+                                

+                            )
+                        }
+                    )
+                }
+            

         

     )
 }
diff --git a/src/components/forms/model_crud/modelShowModelsAndDownload.js b/src/components/forms/model_crud/modelShowModelsAndDownload.js
index 7d84a01..df8e569 100644
--- a/src/components/forms/model_crud/modelShowModelsAndDownload.js
+++ b/src/components/forms/model_crud/modelShowModelsAndDownload.js
@@ -51,13 +51,16 @@ const ModelShowAndDownloadForm = () => {
     }
 
     return (
-        <>
+        

             
-        
+        

     )
 
 }
diff --git a/src/components/forms/model_crud/modelUpload.js b/src/components/forms/model_crud/modelUpload.js
index f36572a..95afef6 100644
--- a/src/components/forms/model_crud/modelUpload.js
+++ b/src/components/forms/model_crud/modelUpload.js
@@ -47,13 +47,16 @@ const ModelUploadForm = () => {
     }
 
     return (
-        <>
+        

             
-        
+        

     )
 }
 
diff --git a/src/components/forms/render_crud/renderShowReadyRendersAndDownload.js b/src/components/forms/render_crud/renderShowReadyRendersAndDownload.js
index 5122fcb..7f3657b 100644
--- a/src/components/forms/render_crud/renderShowReadyRendersAndDownload.js
+++ b/src/components/forms/render_crud/renderShowReadyRendersAndDownload.js
@@ -51,13 +51,13 @@ const RenderShowAndDownloadForm = () => {
     }
 
     return (
-        <>
+        

             
-        
+        

     )
 
 }
diff --git a/src/components/forms/render_websocket/renderVectorImage.js b/src/components/forms/render_websocket/renderVectorImage.js
index 8e3144e..21f7369 100644
--- a/src/components/forms/render_websocket/renderVectorImage.js
+++ b/src/components/forms/render_websocket/renderVectorImage.js
@@ -317,8 +317,8 @@ const RenderVectorSingleImageForm = () => {
         },
         {
             type: 'vector',
-            name: 'Middle Finger 3',
-            native: 'Åšrodkowy 3',
+            name: 'Middle Finger 2',
+            native: 'Åšrodkowy 2',
             min: validate_fingers.others.min.part_2,
             max: validate_fingers.others.max.part_2,
             refDict: IK_srodkowy_2_R,
diff --git a/src/components/forms/render_websocket/renderVectorSet.js b/src/components/forms/render_websocket/renderVectorSet.js
index e69de29..cb5c540 100644
--- a/src/components/forms/render_websocket/renderVectorSet.js
+++ b/src/components/forms/render_websocket/renderVectorSet.js
@@ -0,0 +1,444 @@
+import React, { useEffect } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+
+import { userAuthSelector } from '../../../redux/slices/userAuthSlice'
+import { modelCrudSelector } from '../../../redux/slices/modelCrudSlice'
+
+import modelCrudAsyncThunk from '../../../redux/asyncThunks/modelCrudAsyncThunk'
+
+import AbstractWebsocket from '../abstractWebsocket'
+
+
+const refVectorGenerator = () => {
+    return {
+        x: React.createRef(),
+        y: React.createRef(),
+        z: React.createRef(),
+    }
+}
+
+
+const RenderVectorSingleSetForm = () => {
+
+    const dispatch = useDispatch()
+
+    const choiceListing = React.createRef()
+    const rotateRange = React.createRef()
+    const cameraIdRange = React.createRef()
+    const resolutionXRange = React.createRef()
+    const resolutionYRange = React.createRef()
+
+    // const IK_nadgarstek = refVectorGenerator()
+    // const IK_joint3_R = refVectorGenerator()
+    // const IK_joint4_R = refVectorGenerator() 
+    // const IK_joint5_R = refVectorGenerator() 
+    // const IK_joint6_R = refVectorGenerator() 
+    const IK_maly_1_R = refVectorGenerator()
+    const IK_maly_2_R = refVectorGenerator()
+    const IK_maly_3_R = refVectorGenerator()
+    const IK_serdeczny_1_R = refVectorGenerator() 
+    const IK_serdeczny_2_R = refVectorGenerator() 
+    const IK_serdeczny_3_R = refVectorGenerator() 
+    const IK_srodkowy_1_R = refVectorGenerator() 
+    const IK_srodkowy_2_R = refVectorGenerator() 
+    const IK_srodkowy_3_R = refVectorGenerator() 
+    const IK_wskazujacy_1_R = refVectorGenerator() 
+    const IK_wskazujacy_2_R = refVectorGenerator() 
+    const IK_wskazujacy_3_R = refVectorGenerator() 
+    const IK_kciuk_0_R = refVectorGenerator()
+    const IK_kciuk_1_R = refVectorGenerator() 
+    const IK_kciuk_2_R = refVectorGenerator()
+
+
+    const { models_list } = useSelector( modelCrudSelector )
+    const { user, token } = useSelector( userAuthSelector )
+
+    let refList = [
+        choiceListing,
+        rotateRange,
+        cameraIdRange,
+        resolutionXRange,
+        resolutionYRange,
+        {
+            // IK_nadgarstek: IK_nadgarstek,
+            // IK_joint3_R: IK_joint3_R,
+            // IK_joint4_R: IK_joint4_R,
+            // IK_joint5_R: IK_joint5_R, 
+            // IK_joint6_R: IK_joint6_R, 
+            IK_maly_1_R: IK_maly_1_R,
+            IK_maly_2_R: IK_maly_2_R,
+            IK_maly_3_R: IK_maly_3_R,
+            IK_serdeczny_1_R: IK_serdeczny_1_R, 
+            IK_serdeczny_2_R: IK_serdeczny_2_R, 
+            IK_serdeczny_3_R: IK_serdeczny_3_R, 
+            IK_srodkowy_1_R: IK_srodkowy_1_R, 
+            IK_srodkowy_2_R: IK_srodkowy_2_R, 
+            IK_srodkowy_3_R: IK_srodkowy_3_R, 
+            IK_wskazujacy_1_R: IK_wskazujacy_1_R, 
+            IK_wskazujacy_2_R: IK_wskazujacy_2_R, 
+            IK_wskazujacy_3_R: IK_wskazujacy_3_R, 
+            IK_kciuk_0_R: IK_kciuk_0_R,
+            IK_kciuk_1_R: IK_kciuk_1_R, 
+            IK_kciuk_2_R: IK_kciuk_2_R,
+        }
+    ]
+
+    const fingers_max = {
+        x: 10,
+        y: 10,
+        z: 10
+    }
+    const fingers_min = {
+        x: -0.7,
+        y: -0.7,
+        z: -0.7
+    }
+
+    const validate_fingers = {
+        thumb: {
+            max:{ 
+                part_0: {
+                    y: 0.5,
+                    x: 0.5,
+                    z: 0.6
+                },
+                part_1: {
+                    y: 0,
+                    x: 0,
+                    z: 0.7,
+                },
+                part_2: {
+                    y: 0,
+                    x: 0,
+                    z: 0.7,
+                }
+            },
+            min: {
+                part_0: {
+                    y: -0.3,
+                    x: 0,
+                    z: -0.3,
+                },
+                part_1: {
+                    y: -0.1,
+                    x: 0,
+                    z: 0,
+                },
+                part_2: {
+                    y: 0,
+                    x: 0,
+                    z: -0.4,
+                }
+            }
+        },
+        others: {
+            max: {
+                part_1: {
+                    y: 0.2,
+                    x: 0,
+                    z: 0.7
+                },
+                part_2: {
+                    y: 0,
+                    x: 0,
+                    z: 1.6
+                },
+                part_3: {
+                    y: 0,
+                    x: 0,
+                    z: 0.7
+                }
+            },
+            min: {
+                part_1: {
+                    y: -0.3,
+                    x: 0,
+                    z: -0.3
+                },
+                part_2: {
+                    y: 0,
+                    x: 0,
+                    z: 0
+                },
+                part_3: {
+                    y: 0,
+                    x: 0,
+                    z: 0
+                }
+            }
+        }
+
+    }
+
+    let inputList = [
+        {
+            type: 'info',
+            action: 'Async',
+            endpint: 'render/async/single/set',
+            button_value: 'Render Single Set'
+        },
+        {
+            type: 'chice-listing',
+            name: 'Models',
+            values: models_list,
+            ref: choiceListing
+        },
+        {
+            type: 'range',
+            name: 'Rotate',
+            min: 1,
+            max: 360,
+            step: 1,
+            unit: 'deg',
+            ref: rotateRange
+        },
+        {
+            type: 'range',
+            name: 'Camera ID',
+            min: 0,
+            max: 1,
+            step: 1,
+            unit: 'camera index',
+            ref: cameraIdRange
+        },
+        {
+            type: 'range',
+            name: 'Resolution X',
+            min: 600,
+            max: 4096,
+            step: 10,
+            unit: 'px',
+            ref: resolutionXRange
+        },
+        {
+            type: 'range',
+            name: 'Resolution Y',
+            min: 300,
+            max: 3112,
+            step: 10,
+            unit: 'px',
+            ref: resolutionYRange
+        },
+        // {
+        //     type: 'vector',
+        //     name: 'Wirst (experimental)',
+        //     native: 'Nadgarstek',
+        //     min: fingers_min,
+        //     max: fingers_max,
+        //     refDict: IK_nadgarstek,
+        // },
+        // {
+        //     type: 'vector',
+        //     name: 'Litte Finger Joint 3 (experimental)',
+        //     native: 'Mały Palec Joint 3',
+        //     min: fingers_min,
+        //     max: fingers_max,
+        //     refDict: IK_joint3_R,
+        // },
+        // {
+        //     type: 'vector',
+        //     name: 'Ring Finger Joint 4 (experimental)',
+        //     native: 'Serdeczny Palec Joint 4',
+        //     min: fingers_min,
+        //     max: fingers_max,
+        //     refDict: IK_joint4_R,
+        // },
+        // {
+        //     type: 'vector',
+        //     name: 'Middle Finger Joint 5 (experimental)',
+        //     native: 'Åšrodkowy Palec Joint 5',
+        //     min: fingers_min,
+        //     max: fingers_max,
+        //     refDict: IK_joint5_R,
+        // },
+        // {
+        //     type: 'vector',
+        //     name: 'Index Finger Joint 6 (experimental)',
+        //     native: 'WskazujÄ…cy Palec Joint 6',
+        //     min: fingers_min,
+        //     max: fingers_max,
+        //     refDict: IK_joint6_R,
+        // },
+        {
+            type: 'vector',
+            name: 'Litte Finger 1',
+            native: 'Mały 1',
+            min: validate_fingers.others.min.part_1,
+            max: validate_fingers.others.max.part_1,
+            refDict: IK_maly_1_R,
+        },
+        {
+            type: 'vector',
+            name: 'Litte Finger 2',
+            native: 'Mały 2',
+            min: validate_fingers.others.min.part_2,
+            max: validate_fingers.others.max.part_2,
+            refDict: IK_maly_2_R,
+        },
+        {
+            type: 'vector',
+            name: 'Litte Finger 3',
+            native: 'Mały 3',
+            min: validate_fingers.others.min.part_3,
+            max: validate_fingers.others.max.part_3,
+            refDict: IK_maly_3_R,
+        },
+        {
+            type: 'vector',
+            name: 'Ring Finger 1',
+            native: 'Serdeczny 1',
+            min: validate_fingers.others.min.part_1,
+            max: validate_fingers.others.max.part_1,
+            refDict: IK_serdeczny_1_R,
+        },
+        {
+            type: 'vector',
+            name: 'Ring Finger 2',
+            native: 'Serdeczny 2',
+            min: validate_fingers.others.min.part_2,
+            max: validate_fingers.others.max.part_2,
+            refDict: IK_serdeczny_2_R,
+        },
+        {
+            type: 'vector',
+            name: 'Ring Finger 3',
+            native: 'Serdeczny 3',
+            min: validate_fingers.others.min.part_3,
+            max: validate_fingers.others.max.part_3,
+            refDict: IK_serdeczny_3_R,
+        },
+        {
+            type: 'vector',
+            name: 'Middle Finger 1',
+            native: 'Åšrodkowy 1',
+            min: validate_fingers.others.min.part_1,
+            max: validate_fingers.others.max.part_1,
+            refDict: IK_srodkowy_1_R,
+        },
+        {
+            type: 'vector',
+            name: 'Middle Finger 2',
+            native: 'Åšrodkowy 2',
+            min: validate_fingers.others.min.part_2,
+            max: validate_fingers.others.max.part_2,
+            refDict: IK_srodkowy_2_R,
+        },
+        {
+            type: 'vector',
+            name: 'Middle Finger 3',
+            native: 'Åšrodkowy 3',
+            min: validate_fingers.others.min.part_3,
+            max: validate_fingers.others.max.part_3,
+            refDict: IK_srodkowy_3_R,
+        },
+        {
+            type: 'vector',
+            name: 'Index Finger 1',
+            native: 'WskazujÄ…cy 1',
+            min: validate_fingers.others.min.part_1,
+            max: validate_fingers.others.max.part_1,
+            refDict: IK_wskazujacy_1_R,
+        },
+        {
+            type: 'vector',
+            name: 'Index Finger 2',
+            native: 'WskazujÄ…cy 2',
+            min: validate_fingers.others.min.part_2,
+            max: validate_fingers.others.max.part_2,
+            refDict: IK_wskazujacy_2_R,
+        },
+        {
+            type: 'vector',
+            name: 'Index Finger 3',
+            native: 'WskazujÄ…cy 3',
+            min: validate_fingers.others.min.part_3,
+            max: validate_fingers.others.max.part_3,
+            refDict: IK_wskazujacy_3_R,
+        },
+        {
+            type: 'vector',
+            name: 'Thumb 0',
+            native: 'Kciuk 0',
+            min: validate_fingers.thumb.min.part_0,
+            max: validate_fingers.thumb.max.part_0,
+            refDict: IK_kciuk_0_R,
+        },
+        {
+            type: 'vector',
+            name: 'Thumb 1',
+            native: 'Kciuk 1',
+            min: validate_fingers.thumb.min.part_1,
+            max: validate_fingers.thumb.max.part_1,
+            refDict: IK_kciuk_1_R,
+        },
+        {
+            type: 'vector',
+            name: 'Thumb 2',
+            native: 'Kciuk 2',
+            min: validate_fingers.thumb.min.part_2,
+            max: validate_fingers.thumb.max.part_2,
+            refDict: IK_kciuk_2_R,
+        },
+    ]
+
+    let blocker = false
+
+    useEffect( 
+        () => {
+            
+            if ( models_list.length === 0 && user.id > 0 && token !== '' && blocker === false ) {
+                dispatch( modelCrudAsyncThunk.fetchGetAllModels( token ) )
+                if ( models_list.length === 0 ) {
+                    blocker = true
+                }
+            }
+        
+        }
+    )
+
+    const bodyComparer = ( refs ) => {
+
+        let vectors = {}
+
+        console.log( refs )
+
+        Object.keys(refs[5]).map(
+            ( key ) => {
+                let singleFinger = {
+                    scale: 0,
+                    x: 0,
+                    y: 0,
+                    z: 0
+                }
+                singleFinger['scale'] = 0.9
+                singleFinger['x'] = parseFloat(refs[5][key]['x'].current.value)
+                singleFinger['y'] = parseFloat(refs[5][key]['y'].current.value)
+                singleFinger['z'] = parseFloat(refs[5][key]['z'].current.value)
+                vectors[key] = singleFinger
+            }
+        )
+
+        return {
+            // fileName: refs[0].current.value,
+            fileName: 'testHand',
+            angle: refs[1].current.value / 62, // on backend 0.1 - 6.2 value
+            cameraID: refs[2].current.value,
+            resolutionX: refs[3].current.value,
+            resolutionY: refs[4].current.value,
+            vectors: vectors
+        }
+    }
+
+    return (
+        <>
+            
+        
+    )
+}
+
+export default RenderVectorSingleSetForm
\ No newline at end of file
diff --git a/src/components/forms/user_auth/userLogin.js b/src/components/forms/user_auth/userLogin.js
index e53b006..d71b193 100644
--- a/src/components/forms/user_auth/userLogin.js
+++ b/src/components/forms/user_auth/userLogin.js
@@ -59,7 +59,9 @@ const UserLoginForm = () => {
                 refList={ refList }
                 action={ login }
             />
-            { info }
+            

+                { info }
+            

         
     )
 
diff --git a/src/components/forms/user_auth/userRegister.js b/src/components/forms/user_auth/userRegister.js
index 5b3599e..6848a60 100644
--- a/src/components/forms/user_auth/userRegister.js
+++ b/src/components/forms/user_auth/userRegister.js
@@ -67,7 +67,9 @@ const UserRegisterForm = () => {
                 refList={ refList }
                 action={ register }
             />
-            { info }
+            

+                { info }
+            

         
     )
 
diff --git a/src/pages/func_group/model_crud/modelCrudIndex.js b/src/pages/func_group/model_crud/modelCrudIndex.js
index 3161005..ef757dc 100644
--- a/src/pages/func_group/model_crud/modelCrudIndex.js
+++ b/src/pages/func_group/model_crud/modelCrudIndex.js
@@ -5,7 +5,7 @@ import ModelUpload from '../../../components/forms/model_crud/modelUpload'
 
 
 const __handleSwap = (name, movement) => {
-    
+
     let display = {
         display: 'block'
     }
@@ -27,15 +27,16 @@ const __handleSwap = (name, movement) => {
 
 const ModelCrudIndex = ( movement ) => {
 
+
     return (
-        <>
+        

             

                 
             

             

                 
             

-        
+        

     )
 }
 
diff --git a/src/pages/func_group/navigationBar.js b/src/pages/func_group/navigationBar.js
index 22da780..62c73c3 100644
--- a/src/pages/func_group/navigationBar.js
+++ b/src/pages/func_group/navigationBar.js
@@ -32,7 +32,7 @@ const __setShowGeneral = ( view, key, movements ) => {
     }
 
     if (view === 'user_view') {
-        let new_move = movements.user_view.userCrudView
+        let new_move = user_default
         new_move[key] = true
         movements.user_view.setUserCrudView( 
             new_move
@@ -45,7 +45,7 @@ const __setShowGeneral = ( view, key, movements ) => {
         )
     } else if (view === 'model_view') {
         
-        let new_move = movements.model_view.modelCrudView
+        let new_move = model_default
         new_move[key] = true
         movements.model_view.setModelCrudView( 
             new_move
@@ -57,7 +57,7 @@ const __setShowGeneral = ( view, key, movements ) => {
             render_default
         )
     } else if (view === 'render_view') {
-        let new_move = movements.render_view.renderView
+        let new_move = render_default
         if ( key in new_move ) {
             new_move[key] = true
             movements.render_view.setRenderView( 
@@ -115,6 +115,8 @@ const NavigationBar = ({ movements }) => {
     const [showModels, setShowModels] = useState(false)
     const [showRender, setShowRender] = useState(false)
     const [showRenderFunc, setShowRenderFunc] = useState(false)
+
+    const [clickHide, setClickHide] = useState(true)
     
     const logout = async () => {
         dispatch(
@@ -125,83 +127,135 @@ const NavigationBar = ({ movements }) => {
     }
 
     return(
-        <>
-            

+        

+            
 setClickHide( !clickHide ) }
+                className="nav_bar_clickable"
+            >
+            
 
+            

                 Menu
                 

-                    
 setShowAccount( !showAccount ) }>
-                    ├── Account Settings
+                    
 setShowAccount( !showAccount ) }
+                        className='nav_bar_header'
+                    >
+                        
  ├── 
 
 Account Settings 

                     

                     

                         

-                            │   ├── User info
+                            

+                                
  │   ├── 
 
 User info 

+                            

                             

-                                

-                                    │   │   ├── Username: { user_get.username } 
+                                

+                                    
  │   │   ├── 
 
Username: { user_get.username } 

                                 

-                                

-                                    │   │   └── E-mail: { user_get.email }
+                                

+                                    
  │   │   └── 
 
 E-mail: { user_get.email } 

                                 

                             

                         

-                        
 __setShowGeneral( 'user_view', 'update_user', movements ) }>
-                            │   ├── Update User
+                        
 __setShowGeneral( 'user_view', 'update_user', movements ) } 
+                            className='nav_bar_option'
+                        >
+                            
  │   ├── 
 
 Update User 

                         

-                        
 __setShowGeneral( 'user_view', 'delete_user', movements ) }>
-                            │   └── Delete User
+                        
 __setShowGeneral( 'user_view', 'delete_user', movements ) } 
+                            className='nav_bar_option'
+                        >
+                            
  │   └── 
 
 Delete User 

                         

                     

                 

                 

-                    
 setShowModels( !showModels ) }>
-                    ├── Models
+                    
 setShowModels( !showModels ) }
+                        className='nav_bar_header'
+                    >
+                        
  ├── 
Models

                     

-                    

-                        
 __setShowGeneral( 'model_view', 'show_models_and_download', movements )}>
-                            │   ├── Show Models & Download
+                    

+                        
 __setShowGeneral( 'model_view', 'show_models_and_download', movements )}
+                            className='nav_bar_option'
+                        >
+                            
  │   ├── 
 
 Show Models & Download

                         

-                        
 __setShowGeneral( 'model_view', 'upload_model', movements ) }>
-                            │   └── Upload Model
+                        
 __setShowGeneral( 'model_view', 'upload_model', movements ) }
+                            className='nav_bar_option'
+                        >
+                            
  │   └── 
 
 Upload Model

                         

                     

                 

                 

-                    
 setShowRender( !showRender ) }>
-                    ├── Render
+                    
 setShowRender( !showRender ) } 
+                        className='nav_bar_header'
+                    >
+                        
  ├── 
 
 Render 

                     

                     

-                        
 __setShowGeneral( 'render_view', 'show_ready_renders_and_download', movements ) }>
-                            │   ├── Show Ready Renders & Download
-                        

                         

-                            
 setShowRenderFunc( !showRenderFunc ) }>
-                            │   ├── Render Functionality
+                            
 setShowRenderFunc( !showRenderFunc ) } 
+                                className='nav_bar_option'
+                            >
+                                
  │   ├── 
 
 Render Functionality 

                             

                             

-                                
 __setShowGeneral( 'render_view', 'render_single_image', movements ) }>
-                                    │   │   ├── Render Single Image
+                                
 __setShowGeneral( 'render_view', 'render_single_image', movements ) } 
+                                    className='nav_bar_option'
+                                >
+                                    
  │   │   ├── 
 
 Render Single Image 

                                 

-                                
 __setShowGeneral( 'render_view', 'render_single_set', movements ) }>
-                                    │   │   ├── Render Single Set
+                                
 __setShowGeneral( 'render_view', 'render_single_set', movements ) } 
+                                    className='nav_bar_option'
+                                >
+                                    
  │   │   ├── 
 
 Render Single Set

                                 

-                                
 __setShowGeneral( 'render_view', 'render_all', movements ) }>
-                                    │   │   ├── Render All Sets
+                                
 __setShowGeneral( 'render_view', 'render_all', movements ) } 
+                                    className='nav_bar_option'
+                                >
+                                    
  │   │   ├── 
 
 Render All Sets

                                 

-                                
 __setShowGeneral( 'render_view', 'render_image_by_vector', movements ) }>
-                                    │   │   ├── Render Image By Vector
+                                
 __setShowGeneral( 'render_view', 'render_image_by_vector', movements ) } 
+                                    className='nav_bar_option'
+                                >
+                                    
  │   │   ├── 
 
 Render Image By Vector

                                 

-                                
 __setShowGeneral( 'render_view', 'render_set_by_vector', movements ) }>
-                                    │   │   └── Render Set By Vector
+                                
 __setShowGeneral( 'render_view', 'render_set_by_vector', movements ) } 
+                                    className='nav_bar_option'
+                                >
+                                    
  │   │   └── 
 
 Render Set By Vector

                                 

                             

                         

+                        
 __setShowGeneral( 'render_view', 'show_ready_renders_and_download', movements ) } 
+                            className='nav_bar_option'
+                        >
+                            
  │   └── 
 
 Show Ready Renders & Download 

+                        

                     

                 

-                
 logout() }>
-                    └── Sign Out
+                
 logout() } className='nav_bar_header'>
+                    
  └── 
 Sign Out

                 

             

-        
+        

     )
 }
 
diff --git a/src/pages/func_group/render/renderIndex.js b/src/pages/func_group/render/renderIndex.js
index 11d7786..28fcded 100644
--- a/src/pages/func_group/render/renderIndex.js
+++ b/src/pages/func_group/render/renderIndex.js
@@ -7,6 +7,7 @@ import RenderSingleSetForm from '../../../components/forms/render_websocket/rend
 import RenderAllForm from '../../../components/forms/render_websocket/renderAll'
 
 import RenderVectorSingleImageForm from '../../../components/forms/render_websocket/renderVectorImage'
+import RenderVectorSingleSetForm from '../../../components/forms/render_websocket/renderVectorSet'
 
 
 const __handleSwap = (name, movement) => {
@@ -56,6 +57,9 @@ const RenderIndex = ( movement ) => {
             

                 
             

+            

+                
+            

         

     )
 }
diff --git a/src/pages/func_group/user_auth/userAuthIndex.js b/src/pages/func_group/user_auth/userAuthIndex.js
index e88b9dc..ff2af04 100644
--- a/src/pages/func_group/user_auth/userAuthIndex.js
+++ b/src/pages/func_group/user_auth/userAuthIndex.js
@@ -16,7 +16,10 @@ const UserAuthIndex = () => {
     }
 
     return (
-        

+        

             {   swapForm
                 ? 
                 : 
diff --git a/src/pages/index.js b/src/pages/index.js
index e020124..c210635 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 // import ReactDOM from 'react-dom';
+import '../styles/general.scss'
 
 import { Provider } from 'react-redux';
 import { store } from '../redux/store';
diff --git a/src/redux/slices/userCrudSlice.js b/src/redux/slices/userCrudSlice.js
index fd33281..6c2541e 100644
--- a/src/redux/slices/userCrudSlice.js
+++ b/src/redux/slices/userCrudSlice.js
@@ -7,7 +7,11 @@ const userCrudSlice = createSlice(
         initialState: {
             users_list: [],
             user_get: {},
-            user_register: {},
+            user_register: {
+                id: -1,
+                username: '',
+                email: ''
+            },
             user_update: {},
             user_delete: '',
             info: ''
@@ -22,11 +26,9 @@ const userCrudSlice = createSlice(
             },
             [userCrudAsyncThunk.fetchRegister.fulfilled.type]: (state, action) => {
                 try {
-                    state.user_register = {
-                        id: action.payload.data.id,
-                        username: action.payload.data.username,
-                        email: action.payload.data.email
-                    }
+                    state.user_register.id = action.payload.data.id
+                    state.user_register.username = action.payload.data.username
+                    state.user_register.email = action.payload.data.email
                     state.info = 'register success'
                 } catch {
                     state.info = 'register failed'
diff --git a/src/styles/form/form.scss b/src/styles/form/form.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/styles/general.scss b/src/styles/general.scss
new file mode 100644
index 0000000..be688b4
--- /dev/null
+++ b/src/styles/general.scss
@@ -0,0 +1,292 @@
+
+body {
+    margin: 0 auto;
+    overflow: hidden;
+
+    input {
+        width: 200px;
+        height: 30px;
+        margin-left: 20px;
+        margin-top:10px;
+        margin-bottom: 5px;
+        // border: 0px;
+        // border-radius: 10px;
+        font-size: 12pt;
+        text-align: center;
+        color: rgba(111,108,106,1);
+        background-color: rgba(0,0,0,0);
+        border-bottom: 2px solid;
+        border-right: 0px;
+        border-top: 0px;
+        border-left: 0px;
+        border-color: green;
+
+        transition-duration: 0.5s;
+    }
+
+    input:hover {
+        border-color: rgba(111,108,106,1);
+    }
+
+    input:active {
+        background-color: rgba(0,128,0,1);
+    }
+
+    .input_generate {
+
+    }
+
+    button {
+        height: 30px;
+        margin-left: 20px;
+        margin-top:10px;
+        margin-bottom: 5px;
+        // border: 0px;
+        border-radius: 10px;
+        font-size: 12pt;
+        text-align: center;
+        color: green;
+        background-color: rgba(0,0,0,0);
+        border: 2px solid;
+        border-color: green;
+
+        padding-left: 20px;
+        padding-right: 20px;
+        padding-bottom: 30px;
+        padding-top: 12px;
+        transition-duration: 0.1s;
+    }
+
+    button:hover {
+        background-color: green;
+        color: black
+    }
+}
+
+.navigation_bar {
+    padding-top: 2%;
+    padding-bottom: 2%;
+    height: 96%;
+    width: 350px;
+    position: fixed;
+    right: 0;
+    color: green;
+    background-color: rgba(22,28,29,1);
+    display: flex;
+    transition-duration: 0.2s;
+
+    .nav_bar_clickable {
+        height: 110%;
+        width: 50px;
+        margin-top: -40px;
+        margin-left: -50px;
+        background-color: rgba(22,28,29,1);
+        transition-duration: 0.2s;
+    }
+
+    .nav_bar_clickable:hover {
+        background-color: rgba(0,128,0,1);
+    }
+
+    .nav_bar_general {
+        padding-left: 10px;
+
+        p {
+            margin-bottom: 0px;
+            margin-top: 10px;
+        }
+
+        pre {
+            margin-top: 10px;
+            margin-bottom: 0px;
+        }
+
+        .nav_bar_header {
+            width: 100%;
+            display: flex;
+            font-weight: bold;
+        }
+
+        .nav_bar_option {
+            width: 100%;
+            display: flex;
+        }
+}
+}
+
+.float_form_auth {
+    width: 400px;
+    padding: 50px;
+    border-radius: 10px;
+    color: green;
+    background-color: rgba(22,28,29,1);
+    margin-left: 50%;
+
+    input {
+        width: 75%;
+        float: right;
+    }
+
+    .input_generate {
+        width: 100%;
+        margin-top: 20px;
+        display: flex;
+
+        .input_labels {
+            width: 20%;
+            font-size: 20px;
+            padding-top: 25px;
+        }
+    }
+
+    button {
+        float: right;
+        position: relative;
+        margin-top: 30px;
+    }
+
+    .form_info {
+        float: float;
+        margin-top: -150px;
+    }
+
+}
+
+.float_form_render_sync {
+    position: fixed;
+    width: 600px;
+    height: 500px;
+    padding: 50px;
+    border-radius: 10px;
+    color: green;
+    background-color: rgba(22,28,29,1);
+    margin-top: 10%;
+    margin-left: 40%;
+    display: flex;
+    transition-duration: 0.2s;
+
+    overflow-y: scroll;
+
+    button {
+        float: left;
+    }
+}
+
+.float_form_render_async {
+    position: fixed;
+    width: 400px;
+    height: 500px;
+    padding: 50px;
+    border-radius: 10px;
+    color: green;
+    background-color: rgba(22,28,29,1);
+    margin-top: 10%;
+    margin-left: 50%;
+    display: flex;
+    transition-duration: 0.2s;
+
+    overflow: hidden;
+
+    button {
+        float: left;
+    }
+}
+
+.float_form_connect {
+    position: fixed;
+    width: 400px;
+    padding: 50px;
+    border-radius: 10px;
+    color: green;
+    background-color: rgba(22,28,29,1);
+    margin-top: 10%;
+    margin-left: 15%;
+
+    z-index: 1;
+
+    .progress_bar_form {
+        width: 400px - 4px;
+        height: 25px;
+        padding-top: 6px;
+        border: 2px solid;
+        border-radius: 10px;
+        text-align: center;
+
+
+        .progress_bar_progress {
+            background-color: green;
+        }
+
+    }
+
+    p {
+        position: absolute;
+        left: 30px;
+        top: -60px;
+        font-size: 20px;
+        font-weight: bold;
+    }
+
+    button {
+        width: 100%; 
+        margin-top: 25px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+}
+
+.float_form_console {
+    position: fixed;
+    width: 400px;
+    height: 100px;
+    padding: 50px;
+    border-radius: 10px;
+    color: green;
+    background-color: rgba(22,28,29,1);
+    margin-top: 25%;
+    margin-left: 15%;
+    transition-duration: 0.2s;
+
+    z-index: 0;
+
+    p {
+        position: absolute;
+        left: 30px;
+        top: -60px;
+        font-size: 20px;
+        font-weight: bold;
+    }
+
+    .console_data {
+        width: 100%;
+        height: 100%;
+        overflow-y: scroll;
+    }
+}
+
+.float_form_model {
+    position: fixed;
+    width: 400px;
+    padding: 50px;
+    border-radius: 10px;
+    color: green;
+    background-color: rgba(22,28,29,1);
+    margin-left: 50%;
+
+    .upload_input {
+        width: 0px !important;
+        height: 0px !important;
+        padding-top: 70px;
+        padding-left: 400px;
+        margin-left: 0px;
+        color: rgba(0,128,0,1);
+        font-family: Ubuntu;
+        border: dashed 2px rgba(0,128,0,1);
+        overflow: hidden;
+    }
+
+    button {
+        margin-left: 0px;
+    }
+}
\ No newline at end of file

From ce838b61f0ee7c9906fc82a2cc2cd2d12aeb6eb6 Mon Sep 17 00:00:00 2001
From: TBS093A 
Date: Sun, 21 Feb 2021 00:23:45 +0100
Subject: [PATCH 29/33] React -> add other forms && complete general tasks

---
 .../model_crud/modelShowModelsAndDownload.js  |  2 +-
 .../forms/model_crud/modelUpload.js           |  2 +-
 src/components/forms/user_crud/userDelete.js  | 77 ++++++++++++++++
 src/components/forms/user_crud/userUpdate.js  | 87 +++++++++++++++++++
 src/pages/func_group/rootUtils.js             | 21 ++---
 .../func_group/user_crud/userCrudIndex.js     | 34 +++++++-
 src/redux/slices/userAuthSlice.js             | 12 ++-
 src/redux/slices/userCrudSlice.js             | 12 +--
 8 files changed, 218 insertions(+), 29 deletions(-)
 create mode 100644 src/components/forms/user_crud/userDelete.js

diff --git a/src/components/forms/model_crud/modelShowModelsAndDownload.js b/src/components/forms/model_crud/modelShowModelsAndDownload.js
index df8e569..116a0fa 100644
--- a/src/components/forms/model_crud/modelShowModelsAndDownload.js
+++ b/src/components/forms/model_crud/modelShowModelsAndDownload.js
@@ -53,7 +53,7 @@ const ModelShowAndDownloadForm = () => {
     return (
         

              {
     return (
         

              {
+
+    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 (
+        

+            
+            

+                { info }
+            

+        

+    )
+
+}
+
+export default UserDeleteForm
\ No newline at end of file
diff --git a/src/components/forms/user_crud/userUpdate.js b/src/components/forms/user_crud/userUpdate.js
index e69de29..747ed8d 100644
--- a/src/components/forms/user_crud/userUpdate.js
+++ b/src/components/forms/user_crud/userUpdate.js
@@ -0,0 +1,87 @@
+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 (
+        

+            
+            

+                { info }
+            

+        

+    )
+
+}
+
+export default UserUpdateForm
\ No newline at end of file
diff --git a/src/pages/func_group/rootUtils.js b/src/pages/func_group/rootUtils.js
index 45dbb27..4a0ee86 100644
--- a/src/pages/func_group/rootUtils.js
+++ b/src/pages/func_group/rootUtils.js
@@ -54,7 +54,7 @@ const GeneralView = () => {
     }
 
     return (
-        <>
+        

             
@@ -67,34 +67,23 @@ const GeneralView = () => {
             
-            {/*  */}
-        
+        

     )
 }
 
-const __verifyUserSession = (token, user)  => {
-
-    if ( user.id !== 0 && user.username !== '' && user.email !== '' && token !== '' )
-        return true
-    else
-        return false
-    
-}
 
 const VerifyUserSession = () => {
     
     const { token, user } = useSelector(userAuthSelector)
 
     return (
-        <>
+        

             {
-                __verifyUserSession(token, user) 
+                user.id !== 0 && token !== ''
                 ?   
                 :  
             }
-        
+        

     )
 }
 
diff --git a/src/pages/func_group/user_crud/userCrudIndex.js b/src/pages/func_group/user_crud/userCrudIndex.js
index 91c49be..e02a3f6 100644
--- a/src/pages/func_group/user_crud/userCrudIndex.js
+++ b/src/pages/func_group/user_crud/userCrudIndex.js
@@ -1,9 +1,41 @@
 import React, { useState, useEffect } from 'react'
 
-const UserCrudIndex = () => {
+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 (
         

+            

+                
+            

+            

+                
+            

         

     )
 }
diff --git a/src/redux/slices/userAuthSlice.js b/src/redux/slices/userAuthSlice.js
index bb5aa25..89c125c 100644
--- a/src/redux/slices/userAuthSlice.js
+++ b/src/redux/slices/userAuthSlice.js
@@ -13,7 +13,15 @@ const userAuthSlice = createSlice(
             },
             info: ''
         },
-        reducers: {},
+        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 {
@@ -39,4 +47,6 @@ const userAuthSlice = createSlice(
 
 export const userAuthReducer = userAuthSlice.reducer
 
+export const { deleteUser } = userAuthSlice.actions
+
 export const userAuthSelector = state => state.userAuthReducer
\ No newline at end of file
diff --git a/src/redux/slices/userCrudSlice.js b/src/redux/slices/userCrudSlice.js
index 6c2541e..fe17c24 100644
--- a/src/redux/slices/userCrudSlice.js
+++ b/src/redux/slices/userCrudSlice.js
@@ -25,19 +25,13 @@ const userCrudSlice = createSlice(
                 state.user_get = action.payload.data
             },
             [userCrudAsyncThunk.fetchRegister.fulfilled.type]: (state, action) => {
-                try {
-                    state.user_register.id = action.payload.data.id
-                    state.user_register.username = action.payload.data.username
-                    state.user_register.email = action.payload.data.email
-                    state.info = 'register success'
-                } catch {
-                    state.info = 'register failed'
-                }
+                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, action) => {
+            [userCrudAsyncThunk.fetchDeleteUser.fulfilled.type]: (state) => {
                 state.users_list = []
                 state.user_get = {}
                 state.user_register = {}

From 7ae2ab3753922353de1e857b1a9098d151997fb6 Mon Sep 17 00:00:00 2001
From: TBS093A 
Date: Mon, 22 Feb 2021 15:18:13 +0100
Subject: [PATCH 30/33] React -> add select option divs for choice model &
 simple fixes / upgrades

---
 src/components/forms/abstractWebsocket.js     | 15 +++++-----
 src/components/forms/formGenerator.js         | 28 +++++++++++++------
 .../forms/render_websocket/renderAll.js       |  6 ++--
 .../render_websocket/renderSingleImage.js     | 16 ++++++++++-
 .../forms/render_websocket/renderSingleSet.js |  6 ++--
 .../render_websocket/renderVectorImage.js     |  6 ++--
 .../forms/render_websocket/renderVectorSet.js |  6 ++--
 src/redux/slices/renderWebsocketSlice.js      | 10 ++++++-
 src/styles/general.scss                       | 12 ++++++++
 9 files changed, 74 insertions(+), 31 deletions(-)

diff --git a/src/components/forms/abstractWebsocket.js b/src/components/forms/abstractWebsocket.js
index 5bd449c..80ef563 100644
--- a/src/components/forms/abstractWebsocket.js
+++ b/src/components/forms/abstractWebsocket.js
@@ -20,23 +20,22 @@ const ProgressBar = () => {
                 {
                     typeof percents === 'number'
                     ? 'Progress: ' + percents + '%'
-                    : percents === 'render_success' || percents === 'Ready to work. Get params'
-                        ? percents
-                        : ''
+                    : percents
                 }
             

             

                 {
-                    typeof percents === 'number'
+                    !isNaN(percents) 
+                    && percents.toString().indexOf('.') != -1
                     ? 

                       

                     : percents === 'render success'
                         ? 

                           

                         : <>
diff --git a/src/components/forms/formGenerator.js b/src/components/forms/formGenerator.js
index 197a503..2ae050d 100644
--- a/src/components/forms/formGenerator.js
+++ b/src/components/forms/formGenerator.js
@@ -233,7 +233,7 @@ const DownloadFilesListInputGenerator = ({
  * Text input generator, example:
  * @param {
  * {    
- *  type: 'drop-box',   
+ *  type: 'chice-listing',   
  *  name: 'name',
  *  values: list,
  *  ref: React.createRef()
@@ -249,30 +249,40 @@ const ChoiceListingGenerator = ({
     input, info
 }) => {
 
-    const __handleRef = ( item ) => {
+    const __handleRef = ( event ) => {
+        event.preventDefault()
         input.ref.current = {
-            value: item
+            value: event.target.value
         }
     }
 
     return (
         

             {input.name + ':'}
+            
         

     )
 }
@@ -482,7 +492,7 @@ const VectorInputGenerator = ({
                                         unit={ '' }
                                         min={input.min[key]}
                                         max={input.max[key]}
-                                        defaultValue={input.min[key]}
+                                        defaultValue={ input.min[key] > 0 ? input.min[key] : 0 }
                                         step={0.1}
                                         reference={input.refDict[key]}
                                     />
diff --git a/src/components/forms/render_websocket/renderAll.js b/src/components/forms/render_websocket/renderAll.js
index 2b6929f..edb0b33 100644
--- a/src/components/forms/render_websocket/renderAll.js
+++ b/src/components/forms/render_websocket/renderAll.js
@@ -34,7 +34,7 @@ const RenderAllForm = () => {
             button_value: 'Render All Sets'
         },
         {
-            type: 'chice-listing',
+            type: 'choice-listing',
             name: 'Models',
             values: models_list,
             ref: choiceListing
@@ -71,8 +71,8 @@ const RenderAllForm = () => {
 
     const bodyComparer = ( refs ) => {
         return {
-            // fileName: refs[0].current.value,
-            fileName: 'testHand',
+            fileName: refs[0].current.value.replace('.blend', ''),
+            // fileName: 'testHand',
             resolutionX: refs[1].current.value,
             resolutionY: refs[2].current.value,
         }
diff --git a/src/components/forms/render_websocket/renderSingleImage.js b/src/components/forms/render_websocket/renderSingleImage.js
index 8b3ee9e..7d203e4 100644
--- a/src/components/forms/render_websocket/renderSingleImage.js
+++ b/src/components/forms/render_websocket/renderSingleImage.js
@@ -40,7 +40,7 @@ const RenderSingleImageForm = () => {
             button_value: 'Render Single Image'
         },
         {
-            type: 'chice-listing',
+            type: 'choice-listing',
             name: 'Models',
             values: models_list,
             ref: choiceListing
@@ -107,12 +107,26 @@ const RenderSingleImageForm = () => {
         }
     )
 
+    const bodyComparer = ( refs ) => {
+
+        return {
+            fileName: refs[0].current.value.replace('.blend', ''),
+            // fileName: 'testHand',
+            rotate: refs[1].current.value / 62, // on backend 0.1 - 6.2 value
+            cameraID: refs[2].current.value,
+            nameSeries: 0,
+            resolutionX: refs[3].current.value,
+            resolutionY: refs[4].current.value
+        }
+    }
+
     return (
         <>
             
         
     )
diff --git a/src/components/forms/render_websocket/renderSingleSet.js b/src/components/forms/render_websocket/renderSingleSet.js
index ff95594..6378e9b 100644
--- a/src/components/forms/render_websocket/renderSingleSet.js
+++ b/src/components/forms/render_websocket/renderSingleSet.js
@@ -40,7 +40,7 @@ const RenderSingleSetForm = () => {
             button_value: 'Render Single Set'
         },
         {
-            type: 'chice-listing',
+            type: 'choice-listing',
             name: 'Models',
             values: models_list,
             ref: choiceListing
@@ -109,8 +109,8 @@ const RenderSingleSetForm = () => {
 
     const bodyComparer = ( refs ) => {
         return {
-            // fileName: refs[0].current.value,
-            fileName: 'testHand',
+            fileName: refs[0].current.value.replace('.blend', ''),
+            // fileName: 'testHand',
             setID: refs[1].current.value,
             cameraID: refs[2].current.value,
             resolutionX: refs[3].current.value,
diff --git a/src/components/forms/render_websocket/renderVectorImage.js b/src/components/forms/render_websocket/renderVectorImage.js
index 21f7369..87cb143 100644
--- a/src/components/forms/render_websocket/renderVectorImage.js
+++ b/src/components/forms/render_websocket/renderVectorImage.js
@@ -178,7 +178,7 @@ const RenderVectorSingleImageForm = () => {
             button_value: 'Render Single Image'
         },
         {
-            type: 'chice-listing',
+            type: 'choice-listing',
             name: 'Models',
             values: models_list,
             ref: choiceListing
@@ -419,8 +419,8 @@ const RenderVectorSingleImageForm = () => {
         )
 
         return {
-            // fileName: refs[0].current.value,
-            fileName: 'testHand',
+            fileName: refs[0].current.value.replace('.blend', ''),
+            // fileName: 'testHand',
             rotate: refs[1].current.value / 62, // on backend 0.1 - 6.2 value
             cameraID: refs[2].current.value,
             nameSeries: 0,
diff --git a/src/components/forms/render_websocket/renderVectorSet.js b/src/components/forms/render_websocket/renderVectorSet.js
index cb5c540..7156722 100644
--- a/src/components/forms/render_websocket/renderVectorSet.js
+++ b/src/components/forms/render_websocket/renderVectorSet.js
@@ -178,7 +178,7 @@ const RenderVectorSingleSetForm = () => {
             button_value: 'Render Single Set'
         },
         {
-            type: 'chice-listing',
+            type: 'choice-listing',
             name: 'Models',
             values: models_list,
             ref: choiceListing
@@ -419,8 +419,8 @@ const RenderVectorSingleSetForm = () => {
         )
 
         return {
-            // fileName: refs[0].current.value,
-            fileName: 'testHand',
+            fileName: refs[0].current.value.replace('.blend', ''),
+            // fileName: 'testHand',
             angle: refs[1].current.value / 62, // on backend 0.1 - 6.2 value
             cameraID: refs[2].current.value,
             resolutionX: refs[3].current.value,
diff --git a/src/redux/slices/renderWebsocketSlice.js b/src/redux/slices/renderWebsocketSlice.js
index f03c5ac..dc16cf9 100644
--- a/src/redux/slices/renderWebsocketSlice.js
+++ b/src/redux/slices/renderWebsocketSlice.js
@@ -41,10 +41,18 @@ const renderWebsocketSlice = createSlice(
                     ...state.messages,
                     action.payload.message
                 ]
-                state.percents = action.payload.message.info
+                if (
+                    (
+                        !isNaN(action.payload.message.info) 
+                        && action.payload.message.info.toString().indexOf('.') != -1
+                    ) || action.payload.message.info === 'render success'
+                ) {
+                    state.percents = action.payload.message.info
+                }
             },
             resetMessages(state) {
                 state.messages = []
+                state.percents = ''
             },
             disconnect(state) {
                 state.web_socket_address = ''
diff --git a/src/styles/general.scss b/src/styles/general.scss
index be688b4..eb597da 100644
--- a/src/styles/general.scss
+++ b/src/styles/general.scss
@@ -190,6 +190,18 @@ body {
     button {
         float: left;
     }
+
+    select {
+        width: 100%;
+        height: 50px;
+        margin-top: 15px;
+        margin-bottom: 15px;
+        background-color: rgba(22,28,29,1);
+        color: rgba(0,128,0,1);
+        border: 2px solid;
+        border-radius: 10px;
+    }
+
 }
 
 .float_form_connect {

From dccb479c8027c6a1c037b7e137e7b2589cb4b908 Mon Sep 17 00:00:00 2001
From: TBS093A 
Date: Mon, 17 May 2021 12:29:00 +0200
Subject: [PATCH 31/33] Deploy -> fix conflicts

---
 .dockerignore                                 |  4 +-
 Dockerfile                                    | 19 +++-
 package-lock.json                             | 23 +++++
 package.json                                  |  1 +
 src/components/forms/abstractWebsocket.js     |  6 +-
 .../forms/render_websocket/renderAll.js       |  4 +-
 .../render_websocket/renderSingleImage.js     |  4 +-
 .../forms/render_websocket/renderSingleSet.js |  4 +-
 .../render_websocket/renderVectorImage.js     |  4 +-
 .../forms/render_websocket/renderVectorSet.js |  4 +-
 src/components/forms/user_auth/userLogin.js   |  4 +-
 .../forms/user_auth/userRegister.js           |  4 +-
 .../func_group/canvasBackgroundAnimation.js   | 94 +++++++++++++++++++
 src/pages/func_group/rootUtils.js             | 20 +++-
 src/styles/general.scss                       | 12 ++-
 15 files changed, 183 insertions(+), 24 deletions(-)
 create mode 100644 src/pages/func_group/canvasBackgroundAnimation.js

diff --git a/.dockerignore b/.dockerignore
index 40b878d..b99378e 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -1 +1,3 @@
-node_modules/
\ No newline at end of file
+node_modules/
+.cache/
+public/
diff --git a/Dockerfile b/Dockerfile
index 540bdca..5830068 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -17,4 +17,21 @@ COPY . ./
 CMD ["npm", "build"]
 
 # start app
-CMD ["npm", "start"]
\ No newline at end of file
+CMD ["npm", "start"]
+
+
+
+
+
+# FROM node:14.4.0
+
+# WORKDIR /usr/src/app
+
+# COPY package*.json ./
+# RUN npm install
+
+# COPY . .
+
+# RUN npm install -g gatsby-cli
+
+# CMD ['gatsby', 'develop', '-H', '0.0.0.0:8000']
diff --git a/package-lock.json b/package-lock.json
index bc6bc36..d20a4eb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10690,6 +10690,12 @@
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
       "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": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.1.tgz",
@@ -12071,6 +12077,15 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "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",
@@ -14329,6 +14344,14 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
       "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": {
       "version": "3.20.0",
       "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.20.0.tgz",
diff --git a/package.json b/package.json
index d54e493..d05333b 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "loadash": "^1.0.0",
     "react": "^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"
diff --git a/src/components/forms/abstractWebsocket.js b/src/components/forms/abstractWebsocket.js
index 80ef563..a014755 100644
--- a/src/components/forms/abstractWebsocket.js
+++ b/src/components/forms/abstractWebsocket.js
@@ -168,7 +168,7 @@ const AbstractWebsocket = ({ addressWS, inputList, refList, bodyComparer }) => {
     )
 
     return (
-        <>
+        

             
 {
                                                             return (
                                                                 
                                                             )
                                                         } else {
@@ -258,7 +258,7 @@ const AbstractWebsocket = ({ addressWS, inputList, refList, bodyComparer }) => {
                     }
                 

             

-        
+        

     )
 }
 
diff --git a/src/components/forms/render_websocket/renderAll.js b/src/components/forms/render_websocket/renderAll.js
index edb0b33..996644b 100644
--- a/src/components/forms/render_websocket/renderAll.js
+++ b/src/components/forms/render_websocket/renderAll.js
@@ -79,14 +79,14 @@ const RenderAllForm = () => {
     }
 
     return (
-        <>
+        

             
-        
+        

     )
 }
 
diff --git a/src/components/forms/render_websocket/renderSingleImage.js b/src/components/forms/render_websocket/renderSingleImage.js
index 7d203e4..66544aa 100644
--- a/src/components/forms/render_websocket/renderSingleImage.js
+++ b/src/components/forms/render_websocket/renderSingleImage.js
@@ -121,14 +121,14 @@ const RenderSingleImageForm = () => {
     }
 
     return (
-        <>
+        

             
-        
+        

     )
 }
 
diff --git a/src/components/forms/render_websocket/renderSingleSet.js b/src/components/forms/render_websocket/renderSingleSet.js
index 6378e9b..8ed098f 100644
--- a/src/components/forms/render_websocket/renderSingleSet.js
+++ b/src/components/forms/render_websocket/renderSingleSet.js
@@ -120,14 +120,14 @@ const RenderSingleSetForm = () => {
     }
 
     return (
-        <>
+        

             
-        
+        

     )
 }
 
diff --git a/src/components/forms/render_websocket/renderVectorImage.js b/src/components/forms/render_websocket/renderVectorImage.js
index 87cb143..128f5ff 100644
--- a/src/components/forms/render_websocket/renderVectorImage.js
+++ b/src/components/forms/render_websocket/renderVectorImage.js
@@ -431,14 +431,14 @@ const RenderVectorSingleImageForm = () => {
     }
 
     return (
-        <>
+        

             
-        
+        

     )
 }
 
diff --git a/src/components/forms/render_websocket/renderVectorSet.js b/src/components/forms/render_websocket/renderVectorSet.js
index 7156722..faa223f 100644
--- a/src/components/forms/render_websocket/renderVectorSet.js
+++ b/src/components/forms/render_websocket/renderVectorSet.js
@@ -430,14 +430,14 @@ const RenderVectorSingleSetForm = () => {
     }
 
     return (
-        <>
+        

             
-        
+        

     )
 }
 
diff --git a/src/components/forms/user_auth/userLogin.js b/src/components/forms/user_auth/userLogin.js
index d71b193..e71d8c2 100644
--- a/src/components/forms/user_auth/userLogin.js
+++ b/src/components/forms/user_auth/userLogin.js
@@ -53,7 +53,7 @@ const UserLoginForm = () => {
     }
 
     return (
-        <>
+        

              {
             

                 { info }
             

-        
+        

     )
 
 }
diff --git a/src/components/forms/user_auth/userRegister.js b/src/components/forms/user_auth/userRegister.js
index 6848a60..0253a06 100644
--- a/src/components/forms/user_auth/userRegister.js
+++ b/src/components/forms/user_auth/userRegister.js
@@ -61,7 +61,7 @@ const UserRegisterForm = () => {
     }
 
     return (
-        <>
+        

              {
             

                 { info }
             

-        
+        

     )
 
 }
diff --git a/src/pages/func_group/canvasBackgroundAnimation.js b/src/pages/func_group/canvasBackgroundAnimation.js
new file mode 100644
index 0000000..86cc673
--- /dev/null
+++ b/src/pages/func_group/canvasBackgroundAnimation.js
@@ -0,0 +1,94 @@
+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: menuColor,
+              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 (
+        
+    )
+
+}
+
+export default CanvasBackgroundAnimation
\ No newline at end of file
diff --git a/src/pages/func_group/rootUtils.js b/src/pages/func_group/rootUtils.js
index 4a0ee86..755f8f4 100644
--- a/src/pages/func_group/rootUtils.js
+++ b/src/pages/func_group/rootUtils.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { useSelector } from 'react-redux'
 
 import { userAuthSelector } from '../../redux/slices/userAuthSlice'
@@ -9,6 +9,7 @@ import ModelCrudIndex from './model_crud/modelCrudIndex'
 import RenderIndex from './render/renderIndex'
 
 import NavigationBar from './navigationBar'
+import CanvasBackgroundAnimation from './canvasBackgroundAnimation'
 
 
 const GeneralView = () => {
@@ -76,13 +77,26 @@ 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 (
         

             {
-                user.id !== 0 && token !== ''
+                showGeneral
                 ?   
-                :  
+                : 
             }
+            
         

     )
 }
diff --git a/src/styles/general.scss b/src/styles/general.scss
index eb597da..aecf7df 100644
--- a/src/styles/general.scss
+++ b/src/styles/general.scss
@@ -2,6 +2,9 @@
 body {
     margin: 0 auto;
     overflow: hidden;
+    background-color: rgba(0,128,0,1);
+    width: 100%;
+    height: 100%;
 
     input {
         width: 200px;
@@ -85,7 +88,7 @@ body {
     }
 
     .nav_bar_clickable:hover {
-        background-color: rgba(0,128,0,1);
+        background-color: rgba(22,28,29,0.5);
     }
 
     .nav_bar_general {
@@ -115,6 +118,7 @@ body {
 }
 
 .float_form_auth {
+    position: fixed;
     width: 400px;
     padding: 50px;
     border-radius: 10px;
@@ -125,6 +129,7 @@ body {
     input {
         width: 75%;
         float: right;
+
     }
 
     .input_generate {
@@ -147,7 +152,8 @@ body {
 
     .form_info {
         float: float;
-        margin-top: -150px;
+        position: absolute;
+        margin-top: 0px;
     }
 
 }
@@ -237,6 +243,7 @@ body {
         top: -60px;
         font-size: 20px;
         font-weight: bold;
+        color: rgba(22,28,29,1);
     }
 
     button {
@@ -268,6 +275,7 @@ body {
         top: -60px;
         font-size: 20px;
         font-weight: bold;
+        color: rgba(22,28,29,1);
     }
 
     .console_data {

From 37f7f6448e222e5adfac127aa331f6ceea757cf8 Mon Sep 17 00:00:00 2001
From: TBS093A 
Date: Mon, 17 May 2021 12:30:18 +0200
Subject: [PATCH 32/33] Deploy -> fix conflicts

---
 Dockerfile | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 3e3dc8a..5830068 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,4 +1,3 @@
-<<<<<<< HEAD
 # pull official base image
 FROM node:13.12.0-alpine
 
@@ -36,17 +35,3 @@ CMD ["npm", "start"]
 # RUN npm install -g gatsby-cli
 
 # CMD ['gatsby', 'develop', '-H', '0.0.0.0:8000']
-=======
-FROM node:14.4.0
-
-WORKDIR /usr/src/app
-
-COPY package*.json ./
-RUN npm install
-
-COPY . .
-
-RUN npm install -g gatsby-cli
-
-CMD ['gatsby', 'develop', '-H', '0.0.0.0:8000']
->>>>>>> feature/2_forms

From 9e2efb8d069f2f50ed970c01f9e449ea5dd021ca Mon Sep 17 00:00:00 2001
From: TBS093A 
Date: Mon, 17 May 2021 21:18:27 +0200
Subject: [PATCH 33/33] Docker -> ready to work on remote

---
 .dockerignore                                 |  1 -
 .gitignore                                    |  2 +-
 Dockerfile                                    | 24 +++----------------
 .../asyncThunks/abstracts/abstractAddress.js  |  2 +-
 .../asyncThunks/abstracts/abstractService.js  |  4 ++--
 5 files changed, 7 insertions(+), 26 deletions(-)

diff --git a/.dockerignore b/.dockerignore
index b99378e..0a03045 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,3 +1,2 @@
 node_modules/
-.cache/
 public/
diff --git a/.gitignore b/.gitignore
index 557f97c..b99378e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,3 @@
 node_modules/
 .cache/
-public
+public/
diff --git a/Dockerfile b/Dockerfile
index 5830068..6912b40 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -10,28 +10,10 @@ COPY package.json ./
 COPY package-lock.json ./
 
 RUN npm install --silent
+RUN npm install gatsby-cli --silent
+
+ENV GATSBY_TELEMETRY_DISABLED=1
 
 # add app
 COPY . ./
 
-CMD ["npm", "build"]
-
-# start app
-CMD ["npm", "start"]
-
-
-
-
-
-# FROM node:14.4.0
-
-# WORKDIR /usr/src/app
-
-# COPY package*.json ./
-# RUN npm install
-
-# COPY . .
-
-# RUN npm install -g gatsby-cli
-
-# CMD ['gatsby', 'develop', '-H', '0.0.0.0:8000']
diff --git a/src/redux/asyncThunks/abstracts/abstractAddress.js b/src/redux/asyncThunks/abstracts/abstractAddress.js
index 0bd6cb8..3554bf6 100644
--- a/src/redux/asyncThunks/abstracts/abstractAddress.js
+++ b/src/redux/asyncThunks/abstracts/abstractAddress.js
@@ -1,3 +1,3 @@
-let API = 'localhost:9090'
+let API = '0.0.0.0:9090'
 export const GeneralAddress = 'http://' + API
 export const GeneralAddressWS = 'ws://' + API + '/render'
\ No newline at end of file
diff --git a/src/redux/asyncThunks/abstracts/abstractService.js b/src/redux/asyncThunks/abstracts/abstractService.js
index 51fe1c1..ddd2e8a 100644
--- a/src/redux/asyncThunks/abstracts/abstractService.js
+++ b/src/redux/asyncThunks/abstracts/abstractService.js
@@ -80,7 +80,7 @@ const headerBuilder = (url, method, token, body) => {
         'authorization': token,
         'x-csrftoken': getCookie('csrftoken'),
         'accept': 'application/json',
-        'content-type': 'application/json',
+        'content-type': 'application/json'
     }
     let headers = {
         url: url,
@@ -90,7 +90,7 @@ const headerBuilder = (url, method, token, body) => {
     }
     if (method === 'PUT' || method === 'POST' || method === 'PATCH') {
         headers = Object.assign({}, headers, {
-            data: JSON.stringify(body),
+            data: JSON.stringify(body)
         })
     }
     return headers