Include basic frontend, nodemon for backend server, and connectivity between all modules
This commit is contained in:
parent
67aca89939
commit
311da62018
@ -7,6 +7,9 @@ services:
|
||||
- postgres
|
||||
ports:
|
||||
- "3005:3005"
|
||||
working_dir: /server
|
||||
volumes:
|
||||
- ./server:/server
|
||||
|
||||
postgres:
|
||||
image: postgres:10.4
|
||||
@ -27,8 +30,9 @@ services:
|
||||
restart: on-failure
|
||||
depends_on:
|
||||
- postgres
|
||||
- server
|
||||
ports:
|
||||
- 3002:3000
|
||||
- "3002:3000"
|
||||
environment:
|
||||
- CHOKIDAR_USEPOLLING=true
|
||||
stdin_open: true
|
||||
|
||||
31
frontend/package-lock.json
generated
31
frontend/package-lock.json
generated
@ -2437,6 +2437,37 @@
|
||||
"resolved": "https://registry.npmjs.org/aws4/-/aws4-1.10.0.tgz",
|
||||
"integrity": "sha512-3YDiu347mtVtjpyV3u5kVqQLP242c06zwDOgpeRnybmXlYYsLbtTrUBUm8i8srONt+FWobl5aibnU1030PeeuA=="
|
||||
},
|
||||
"axios": {
|
||||
"version": "0.19.2",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
|
||||
"integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
|
||||
"requires": {
|
||||
"follow-redirects": "1.5.10"
|
||||
},
|
||||
"dependencies": {
|
||||
"debug": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
|
||||
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
|
||||
"requires": {
|
||||
"ms": "2.0.0"
|
||||
}
|
||||
},
|
||||
"follow-redirects": {
|
||||
"version": "1.5.10",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
|
||||
"integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
|
||||
"requires": {
|
||||
"debug": "=3.1.0"
|
||||
}
|
||||
},
|
||||
"ms": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
|
||||
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
|
||||
}
|
||||
}
|
||||
},
|
||||
"axobject-query": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
"@testing-library/jest-dom": "^4.2.4",
|
||||
"@testing-library/react": "^9.5.0",
|
||||
"@testing-library/user-event": "^7.2.1",
|
||||
"axios": "^0.19.2",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1",
|
||||
"react-scripts": "3.4.1"
|
||||
@ -30,5 +31,10 @@
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
},
|
||||
"description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
|
||||
"main": "index.js",
|
||||
"devDependencies": {},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
|
||||
BIN
frontend/public/ACROTSRG.TTF
Normal file
BIN
frontend/public/ACROTSRG.TTF
Normal file
Binary file not shown.
@ -15,6 +15,7 @@
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
@ -24,7 +25,7 @@
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
<title>Astronomy</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
||||
BIN
frontend/public/stars.png
Normal file
BIN
frontend/public/stars.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 412 KiB |
@ -1,3 +1,102 @@
|
||||
body{
|
||||
background-color: #0d194a;
|
||||
background-image: url("http://45.33.13.215/stars.png");
|
||||
font-family: Copperplate,Verdana;
|
||||
color: #fff;
|
||||
text-shadow:
|
||||
0 0 1px #aaa,
|
||||
0 0 2px #aaa,
|
||||
0 0 4px #aaa,
|
||||
0 0 8px #ccc,
|
||||
0 0 16px #ccc,
|
||||
0 0 18px #ccc,
|
||||
0 0 20px #ccc,
|
||||
0 0 30px #ccc;
|
||||
}
|
||||
|
||||
.starbox{
|
||||
opacity:0.5;
|
||||
background-color:#0d194a;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
.starbox:hover{
|
||||
border: 1px white solid;
|
||||
opacity:0.8;
|
||||
background-color:#0d194a;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
.header{
|
||||
font: 32px ACROTSRG;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: ACROTSRG;
|
||||
src: local('ACROTSRG'), url(./fonts/ACROTSRG.TTF) format('truetype');
|
||||
}
|
||||
|
||||
.glowHeavy {
|
||||
color: #fff;
|
||||
text-shadow:
|
||||
0 0 5px #fff,
|
||||
0 0 10px #fff,
|
||||
0 0 20px #fff,
|
||||
0 0 40px #0ff,
|
||||
0 0 80px #0ff,
|
||||
0 0 90px #0ff,
|
||||
0 0 100px #0ff,
|
||||
0 0 150px #0ff;
|
||||
}
|
||||
|
||||
.glowLight {
|
||||
color: #fff;
|
||||
text-shadow:
|
||||
0 0 1px #aaa,
|
||||
0 0 2px #aaa,
|
||||
0 0 4px #aaa,
|
||||
0 0 8px #ccc,
|
||||
0 0 16px #ccc,
|
||||
0 0 18px #ccc,
|
||||
0 0 20px #ccc,
|
||||
0 0 30px #ccc;
|
||||
}
|
||||
|
||||
.fadein {
|
||||
animation-name: fadein;
|
||||
animation-duration: 4s;
|
||||
}
|
||||
.fadein3 {
|
||||
animation-name: fadein;
|
||||
animation-duration: 4s;
|
||||
animation-iteration-count: 3;
|
||||
}
|
||||
|
||||
.slowblink{
|
||||
animation-name: slowblink;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.longfadein {
|
||||
animation-name: fadein;
|
||||
animation-duration: 8s;
|
||||
}
|
||||
|
||||
@keyframes fadein {
|
||||
0% {opacity:0;}
|
||||
100% {opacity:1;}
|
||||
}
|
||||
@keyframes slowblink {
|
||||
0% {opacity:0;}
|
||||
50% {opacity:1;}
|
||||
100% {opacity:0;}
|
||||
}
|
||||
|
||||
.stars {
|
||||
}
|
||||
|
||||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -1,26 +1,84 @@
|
||||
import React from 'react';
|
||||
import React, {useState,useEffect} from 'react';
|
||||
import logo from './logo.svg';
|
||||
import './App.css';
|
||||
import './fonts/ACROTSRG.TTF'
|
||||
|
||||
const REMOTE_ADDR = "http://45.33.13.215:3005";
|
||||
|
||||
const axios = require('axios');
|
||||
|
||||
const ClickSubmitButton = (input) => {
|
||||
input.addEventListener("keydown", function(event) {
|
||||
if (event.keyCode === 13) {
|
||||
event.preventDefault();
|
||||
document.getElementById("submit").click();}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
const StartPage = ()=>{
|
||||
const [text,setText] = useState("");
|
||||
const [loaded,setLoaded] = useState(null);
|
||||
const [username,setUsername] = useState("");
|
||||
|
||||
const SubmitUsername = (e)=>{
|
||||
setText(<>
|
||||
<span className="slowblink">
|
||||
Communicating with the celestials...
|
||||
</span></>);
|
||||
}
|
||||
const UpdateUsername = (e)=>{
|
||||
setUsername(e.currentTarget.value);
|
||||
}
|
||||
|
||||
useEffect(()=>{setTimeout(()=>{
|
||||
setText(<span className="fadein3">Well hello there...</span>);
|
||||
},4000)},[loaded])
|
||||
useEffect(()=>{setTimeout(()=>{
|
||||
setText(<span className="fadein3">I see this is your first time here.</span>);
|
||||
},8000)},[loaded])
|
||||
useEffect(()=>{setTimeout(()=>{
|
||||
setText(<span className="fadein3">Tell me your name...</span>);
|
||||
},12000)},[loaded])
|
||||
useEffect(()=>{setTimeout(()=>{
|
||||
setText(<><span className="fadein3">Tell me your name...</span>
|
||||
<input type="text" id="username" className="starbox" onChange={(e)=>{UpdateUsername(e)}}/>
|
||||
<button className="starbox" onClick={(e)=>SubmitUsername()} id="submit">Continue</button>
|
||||
</>);
|
||||
document.getElementById("username").focus();
|
||||
ClickSubmitButton(document.getElementById("username"));
|
||||
},14000)},[loaded])
|
||||
return (<div className="container stars border rounded shadow-sm">
|
||||
<div className="row">
|
||||
<div className="col-md-12 header text-center">
|
||||
<span className="glowHeavy animated fadein">ASTRONOMY</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-md-12 text-center">
|
||||
{text}
|
||||
</div>
|
||||
</div>
|
||||
</div>);
|
||||
}
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="App">
|
||||
<header className="App-header">
|
||||
<img src={logo} className="App-logo" alt="logo" />
|
||||
<p>
|
||||
???
|
||||
</p>
|
||||
<a
|
||||
className="App-link"
|
||||
href="https://reactjs.org"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Learn React
|
||||
</a>
|
||||
</header>
|
||||
</div>
|
||||
);
|
||||
const [data,setData] = useState([]);
|
||||
const [loaded,setLoaded] = useState(null);
|
||||
const [page,setPage] = useState(null);
|
||||
|
||||
useEffect(()=>{
|
||||
axios.get(REMOTE_ADDR)
|
||||
.then((data)=>{
|
||||
setData(data.data);
|
||||
console.log(data);
|
||||
})
|
||||
},[loaded]);
|
||||
switch (page) {
|
||||
default:{
|
||||
return <StartPage/>;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
BIN
frontend/src/fonts/ACROTSRG.TTF
Normal file
BIN
frontend/src/fonts/ACROTSRG.TTF
Normal file
Binary file not shown.
@ -8,6 +8,8 @@ COPY . /src/app
|
||||
|
||||
RUN yarn install
|
||||
|
||||
RUN yarn global add nodemon
|
||||
|
||||
EXPOSE 3005
|
||||
|
||||
CMD [ "npm", "start" ]
|
||||
CMD [ "nodemon", "app.js" ]
|
||||
@ -4,6 +4,15 @@ const port = 3005
|
||||
app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`))
|
||||
const Pool = require('pg').Pool
|
||||
|
||||
|
||||
let allowCrossDomain = function(req, res, next) {
|
||||
res.header('Access-Control-Allow-Origin', "*");
|
||||
res.header('Access-Control-Allow-Headers', "*");
|
||||
res.header('Access-Control-Allow-Methods', "*");
|
||||
next();
|
||||
}
|
||||
app.use(allowCrossDomain);
|
||||
|
||||
const pool =
|
||||
new Pool({
|
||||
user: 'postgres',
|
||||
@ -14,7 +23,7 @@ new Pool({
|
||||
})
|
||||
|
||||
const getUsers = (request, response) => {
|
||||
pool.query('SELECT * FROM users', (error, results) => {
|
||||
pool.query('SELECT * FROM signs', (error, results) => {
|
||||
if (error) {
|
||||
response.status(500).json(error.message)
|
||||
} else {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user