From 74a68fb6b4e63e6e9c8fbcf7bd4c2cc568521b6b Mon Sep 17 00:00:00 2001 From: TBS093A Date: Mon, 22 Feb 2021 23:33:25 +0100 Subject: [PATCH] Dockerize a gatsby instance --- .dockerignore | 3 + Dockerfile | 12 +++ 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, 177 insertions(+), 22 deletions(-) create mode 100644 .dockerignore create mode 100644 Dockerfile create mode 100644 src/pages/func_group/canvasBackgroundAnimation.js diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 0000000..b99378e --- /dev/null +++ b/.dockerignore @@ -0,0 +1,3 @@ +node_modules/ +.cache/ +public/ diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..b26d1e4 --- /dev/null +++ b/Dockerfile @@ -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'] \ No newline at end of file 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 {