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

Dockerize a gatsby instance

feature/2_forms
TBS093A 2021-02-22 23:33:25 +01:00
parent 4a0a6d088c
commit 74a68fb6b4
15 changed files with 177 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.dockerignore 100644
View File

@ -0,0 +1,3 @@
node_modules/
.cache/
public/

12
Dockerfile 100644
View File

@ -0,0 +1,12 @@
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']

23
package-lock.json generated
View File

@ -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",

1
package.json
View File

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

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

@ -168,7 +168,7 @@ const AbstractWebsocket = ({ addressWS, inputList, refList, bodyComparer }) => {
)
return (
<>
<div>
<div
className="float_form_render_async"
style={
@ -237,7 +237,7 @@ const AbstractWebsocket = ({ addressWS, inputList, refList, bodyComparer }) => {
return (
<img
src={ 'data:image/png;base64, ' + item[key] }
style={ { width: '300px', height: '200px' } }
style={ { width: '300px', height: '150px' } }
/>
)
} else {
@ -258,7 +258,7 @@ const AbstractWebsocket = ({ addressWS, inputList, refList, bodyComparer }) => {
}
</div>
</div>
</>
</div>
)
}

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

@ -79,14 +79,14 @@ const RenderAllForm = () => {
}
return (
<>
<div>
<AbstractWebsocket
addressWS={ '/all/' }
inputList={ inputList }
refList={ refList }
bodyComparer={ bodyComparer }
/>
</>
</div>
)
}

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

@ -121,14 +121,14 @@ const RenderSingleImageForm = () => {
}
return (
<>
<div>
<AbstractWebsocket
addressWS={ '/single/image/' }
inputList={ inputList }
refList={ refList }
bodyComparer={ bodyComparer }
/>
</>
</div>
)
}

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

@ -120,14 +120,14 @@ const RenderSingleSetForm = () => {
}
return (
<>
<div>
<AbstractWebsocket
addressWS={ '/single/set/' }
inputList={ inputList }
refList={ refList }
bodyComparer={ bodyComparer }
/>
</>
</div>
)
}

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

@ -431,14 +431,14 @@ const RenderVectorSingleImageForm = () => {
}
return (
<>
<div>
<AbstractWebsocket
addressWS={ '/vector/single/image/' }
inputList={ inputList }
refList={ refList }
bodyComparer={ bodyComparer }
/>
</>
</div>
)
}

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

@ -430,14 +430,14 @@ const RenderVectorSingleSetForm = () => {
}
return (
<>
<div>
<AbstractWebsocket
addressWS={ '/vector/single/set/' }
inputList={ inputList }
refList={ refList }
bodyComparer={ bodyComparer }
/>
</>
</div>
)
}

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

@ -53,7 +53,7 @@ const UserLoginForm = () => {
}
return (
<>
<div>
<FormGenerator
inputList={ inputList }
refList={ refList }
@ -62,7 +62,7 @@ const UserLoginForm = () => {
<div className='form_info'>
{ info }
</div>
</>
</div>
)
}

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

@ -61,7 +61,7 @@ const UserRegisterForm = () => {
}
return (
<>
<div>
<FormGenerator
inputList={ inputList }
refList={ refList }
@ -70,7 +70,7 @@ const UserRegisterForm = () => {
<div className='form_info'>
{ info }
</div>
</>
</div>
)
}

94
src/pages/func_group/canvasBackgroundAnimation.js 100644
View File

@ -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 (
<Particles
params={ params }
style={
{
width: '100%',
height: '100%',
zIndex: '-100',
}
}
/>
)
}
export default CanvasBackgroundAnimation

20
src/pages/func_group/rootUtils.js
View File

@ -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 (
<div>
{
user.id !== 0 && token !== ''
showGeneral
? <GeneralView />
: <UserAuthIndex />
: <UserAuthIndex />
}
<CanvasBackgroundAnimation />
</div>
)
}

12
src/styles/general.scss
View File

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