sigonasr2/astronomy
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Include basic frontend, nodemon for backend server, and connectivity between all modules

Browse Source
This commit is contained in:
sigonasr2 2020-07-09 11:11:24 -05:00
parent 67aca89939
commit 311da62018
11 changed files with 234 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docker-compose.yml
View File

@ -7,6 +7,9 @@ services:
- postgres - postgres
ports: ports:
- "3005:3005" - "3005:3005"
working_dir: /server
volumes:
- ./server:/server
postgres: postgres:
image: postgres:10.4 image: postgres:10.4
@ -27,8 +30,9 @@ services:
restart: on-failure restart: on-failure
depends_on: depends_on:
- postgres - postgres
- server
ports: ports:
- 3002:3000 - "3002:3000"
environment: environment:
- CHOKIDAR_USEPOLLING=true - CHOKIDAR_USEPOLLING=true
stdin_open: true stdin_open: true

31
frontend/package-lock.json generated
View File

@ -2437,6 +2437,37 @@
"resolved": "https://registry.npmjs.org/aws4/-/aws4-1.10.0.tgz", "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.10.0.tgz",
"integrity": "sha512-3YDiu347mtVtjpyV3u5kVqQLP242c06zwDOgpeRnybmXlYYsLbtTrUBUm8i8srONt+FWobl5aibnU1030PeeuA==" "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": { "axobject-query": {
"version": "2.2.0", "version": "2.2.0",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",

8
frontend/package.json
View File

@ -6,6 +6,7 @@
"@testing-library/jest-dom": "^4.2.4", "@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0", "@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1", "@testing-library/user-event": "^7.2.1",
"axios": "^0.19.2",
"react": "^16.13.1", "react": "^16.13.1",
"react-dom": "^16.13.1", "react-dom": "^16.13.1",
"react-scripts": "3.4.1" "react-scripts": "3.4.1"
@ -30,5 +31,10 @@
"last 1 firefox version", "last 1 firefox version",
"last 1 safari 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
View File

Binary file not shown.

3
frontend/public/index.html
View File

@ -15,6 +15,7 @@
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ 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="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. Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build. 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. 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`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>Astronomy</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

BIN
frontend/public/stars.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 412 KiB

99
frontend/src/App.css
View File

@ -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 { .App {
text-align: center; text-align: center;
} }

96
frontend/src/App.js
View File

@ -1,26 +1,84 @@
import React from 'react'; import React, {useState,useEffect} from 'react';
import logo from './logo.svg'; import logo from './logo.svg';
import './App.css'; 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() { function App() {
return ( const [data,setData] = useState([]);
<div className="App"> const [loaded,setLoaded] = useState(null);
<header className="App-header"> const [page,setPage] = useState(null);
<img src={logo} className="App-logo" alt="logo" />
<p> useEffect(()=>{
??? axios.get(REMOTE_ADDR)
</p> .then((data)=>{
<a setData(data.data);
className="App-link" console.log(data);
href="https://reactjs.org" })
target="_blank" },[loaded]);
rel="noopener noreferrer" switch (page) {
> default:{
Learn React return <StartPage/>;
</a> }
</header> }
</div>
);
} }
export default App; export default App;

BIN
frontend/src/fonts/ACROTSRG.TTF Normal file
View File

Binary file not shown.

4
server/Dockerfile
View File

@ -8,6 +8,8 @@ COPY . /src/app
RUN yarn install RUN yarn install
RUN yarn global add nodemon
EXPOSE 3005 EXPOSE 3005
CMD [ "npm", "start" ] CMD [ "nodemon", "app.js" ]

11
server/app.js
View File

@ -4,6 +4,15 @@ const port = 3005
app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`)) app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`))
const Pool = require('pg').Pool 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 = const pool =
new Pool({ new Pool({
user: 'postgres', user: 'postgres',
@ -14,7 +23,7 @@ new Pool({
}) })
const getUsers = (request, response) => { const getUsers = (request, response) => {
pool.query('SELECT * FROM users', (error, results) => { pool.query('SELECT * FROM signs', (error, results) => {
if (error) { if (error) {
response.status(500).json(error.message) response.status(500).json(error.message)
} else { } else {