diff --git a/client/src/App.css b/client/src/App.css index 49fa019..5d6ad6d 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -1,78 +1,103 @@ - .DepartmentContainer { margin: auto; - min-width: 30%; max-width: 30%; + min-width: 30%; + max-width: 30%; } @media only screen and (max-width: 1000px) { - .DepartmentContainer { min-width: 50%; max-width: 95%; - } + .DepartmentContainer { + min-width: 50%; + max-width: 95%; + } } .p-nav-primary { position: sticky; - top:0; + top: 0; z-index: 400; background-color: #2e2e2e; margin-bottom: 1.2em; } - -.p-nav{ + +.p-nav { display: block; overflow-wrap: break-word; } - + .p-nav-logo { align-self: center; box-sizing: border-box; display: block; max-width: 220px; line-height: 21px; - padding:3px + padding: 3px } - + .p-nav-inner { margin-left: 25%; } - -.p-nav-scroller{ - display: flex; + +.p-nav-scroller { + display: flex; + align-items: center; + justify-content: flex-start; } - -.p-nav-png{ - max-width:220px; - max-height:37.7167px; + +.p-nav-png { + max-width: 220px; + max-height: 37.7167px; flex: 1 1 auto; } - -.p-nav-opposite{ + +.p-nav-opposite { text-align: right; flex: 1 1 auto; margin: 5px } - -.p-nav-opposite-link{ - color:#f1f1f1; + +.p-nav-opposite-link { + color: #f1f1f1; font-weight: bold; } .p-nav-png { - width:220px; - height:37.7167px; + width: 220px; + height: 37.7167px; +} + +.p-nav-info p { + color: #ff0000; + /* Red text */ + font-size: 14px; + margin: 20px; +} + +/* Mobile layout */ +@media (max-width: 768px) { + .p-nav-scroller { + flex-direction: column; + align-items: center; + justify-content: center; + /* Center-align items vertically */ + } + + .p-nav-info p { + margin-left: 0; + margin-top: 10px; + /* Add some space between the logo and the text */ + } } .Title { - color:#f1f1f1; + color: #f1f1f1; font-size: x-large; font-weight: bold; border-width: 1px; border-style: solid; - border-image: - linear-gradient( - to right, - #ebc729, - transparent - ) 1 0%; + border-image: + linear-gradient(to right, + #ebc729, + transparent) 1 0%; border-top: transparent; } @@ -84,6 +109,7 @@ border-right: transparent; } } + /* This is a very hack-y way to make the borders look proper on mobile browsers. This is because the border image property does not appear to be properly supported with IOS' Safari */ .Subtitle { @@ -104,7 +130,7 @@ display: flex; } -.Counter{ +.Counter { font-size: smaller; padding-top: 20px; padding-bottom: 15px; @@ -135,7 +161,7 @@ a { a:hover { color: #ebc729; text-decoration: underline; -} +} .Collapsible__trigger { display: block; @@ -163,4 +189,4 @@ a:hover { /* No idea why i have to do this stupidity. For some reason if I dont do this, this shit becomes off centered */ transform-origin: 67% 67%; -} +} \ No newline at end of file diff --git a/client/src/App.js b/client/src/App.js index b40d704..28b014f 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -1,14 +1,14 @@ -import React, {useEffect, useState} from 'react'; +import React, { useEffect, useState } from 'react'; import './App.css'; import Collapsible from 'react-collapsible'; import lists from './modules/Generic/BilletBank'; import MilpacParse from './modules/Generic/MilpacParse'; // import {Helmet} from 'react-helmet'; -function MilpacRequest () { +function MilpacRequest() { - const [milpacList, setMilpacList] = useState ([]); - const [reserveList, setReserveList] = useState ([]); + const [milpacList, setMilpacList] = useState([]); + const [reserveList, setReserveList] = useState([]); const clscript = `` - + useEffect(() => { - async function fetchMilpacList() { - try { - const requestUrl = 'https://bff.adr.7cav.us/roster/combat' - //const requestUrl = 'http://localhost:4000/roster/combat' //Use this for local hosting - const response = await fetch (requestUrl); - const responseJSON = await response.json(); - setMilpacList(responseJSON); - } catch { + async function fetchMilpacList() { + try { + //const requestUrl = 'https://bff.adr.7cav.us/roster/combat' + const requestUrl = 'http://localhost:4000/roster/combat' //Use this for local hosting + const response = await fetch(requestUrl); + const responseJSON = await response.json(); + setMilpacList(responseJSON); + } catch { - } - } - fetchMilpacList(); - },[]); + } + } + fetchMilpacList(); + }, []); useEffect(() => { async function fetchReserveList() { - try { - const requestUrl = 'https://bff.adr.7cav.us/roster/reserves' - //const requestUrl = 'http://localhost:4000/roster/reserves' //Use this for local hosting - const response = await fetch (requestUrl); - const responseJSON = await response.json(); - setReserveList(responseJSON); - } catch { + try { + //const requestUrl = 'https://bff.adr.7cav.us/roster/reserves' + const requestUrl = 'http://localhost:4000/roster/reserves' //Use this for local hosting + const response = await fetch(requestUrl); + const responseJSON = await response.json(); + setReserveList(responseJSON); + } catch { - } - } + } + } fetchReserveList(); - },[]); + }, []); var milpacArray = [] milpacArray.push({ @@ -53,158 +53,162 @@ function MilpacRequest () { "reserve": reserveList, }) - return( -
-
-
-
- -
-
-
-
- - - -
-
- -
- -
-
- -
-
- -
-
- -
-
-
-
- -
- -
-
- -
-
- -
-
- -
-
-
-
- -
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
+ +
-
- -
- -
-
- -
-
- -
-
- -
-
-
-
- -
- -
-
- -
-
- -
-
- -
-
-
-
- -
- -
-
- -
-
- -
-
- -
-
-
-
- -
- -
-
- -
-
- -
-
- -
-
+
+
+ + + +
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+
-
) -} +} export default MilpacRequest diff --git a/server/controllers/cRequest b/server/controllers/cRequest deleted file mode 100644 index 43e8c7c..0000000 --- a/server/controllers/cRequest +++ /dev/null @@ -1,21 +0,0 @@ -const express = require("express"); -const axios = require("axios"); -const Token = require("../credentials/token") - - -let getCombatRoster = async () => { -let response = await axios('https://api.7cav.us/api/v1/roster/1', { - headers: { - Accept: 'application/json', - 'Content-Type': 'application/json', - Authorization: 'Bearer ' + Token - }, -}) -return response.data -} -//controller function getCombatRoster - -module.exports = async (req, res) => { -let responseCombat = await getCombatRoster(); -res.send(responseCombat); -}; diff --git a/server/controllers/cRequest.js b/server/controllers/cRequest.js new file mode 100644 index 0000000..90979a8 --- /dev/null +++ b/server/controllers/cRequest.js @@ -0,0 +1,11 @@ +const cacheManager = require('../controllers/cacheManager'); + +module.exports = async (req, res) => { + const cachedCombatRoster = cacheManager.getCachedCombatRoster(); + + if (cachedCombatRoster) { + res.send(cachedCombatRoster); + } else { + res.status(503).send("Cache is empty"); + } +}; diff --git a/server/controllers/cacheManager.js b/server/controllers/cacheManager.js new file mode 100644 index 0000000..a8f7ce5 --- /dev/null +++ b/server/controllers/cacheManager.js @@ -0,0 +1,67 @@ +const axios = require("axios"); +const Token = require("../credentials/token"); + +let cachedCombatRoster; +let cachedReserveRoster; +let cacheTime = {}; + +const updateCombatRosterCache = async () => { + try { + const response = await axios('https://api.7cav.us/api/v1/roster/1', { + headers: { + Accept: 'application/json', + 'Content-Type': 'application/json', + Authorization: 'Bearer ' + Token + }, + }); + cachedCombatRoster = response.data; + cacheTime['combat'] = Date.now(); + } catch (error) { + console.error("Failed to update combat cache:", error); + } +}; + +const updateReserveRosterCache = async () => { + try { + const response = await axios('https://api.7cav.us/api/v1/roster/2', { + headers: { + Accept: 'application/json', + 'Content-Type': 'application/json', + Authorization: 'Bearer ' + Token + }, + }); + cachedReserveRoster = response.data; + cacheTime['reserve'] = Date.now(); + } catch (error) { + console.error("Failed to update reserve cache:", error); + } +}; + +const scheduleCacheUpdate = (updateFunction, key) => { + const now = new Date(); + const delay = (60 - now.getMinutes()) * 60 * 1000 + (60 - now.getSeconds()) * 1000; + + setTimeout(() => { + updateFunction(); + setInterval(updateFunction, 3660 * 1000); // Update every 3660 seconds (1 hour and 1 minute) + }, delay); +}; + +// Initialize the cache and schedule the updates +updateCombatRosterCache(); +scheduleCacheUpdate(updateCombatRosterCache, 'combat'); +updateReserveRosterCache(); +scheduleCacheUpdate(updateReserveRosterCache, 'reserve'); + +const getCachedCombatRoster = () => { + return cachedCombatRoster; +}; + +const getCachedReserveRoster = () => { + return cachedReserveRoster; +}; + +module.exports = { + getCachedCombatRoster, + getCachedReserveRoster +}; \ No newline at end of file diff --git a/server/controllers/rRequest b/server/controllers/rRequest deleted file mode 100644 index cd5de4f..0000000 --- a/server/controllers/rRequest +++ /dev/null @@ -1,20 +0,0 @@ -const express = require("express"); -const axios = require("axios"); -const Token = require("../credentials/token") - -let getReserveRoster = async () => { -let response = await axios('https://api.7cav.us/api/v1/roster/2', { - headers: { - Accept: 'application/json', - 'Content-Type': 'application/json', - Authorization: 'Bearer ' + Token - }, -}) -return response.data -} -//controller function getReserveRoster - -module.exports = async (req, res) => { -let responseReserves = await getReserveRoster(); -res.send(responseReserves); -}; diff --git a/server/controllers/rRequest.js b/server/controllers/rRequest.js new file mode 100644 index 0000000..8ad0445 --- /dev/null +++ b/server/controllers/rRequest.js @@ -0,0 +1,11 @@ +const cacheManager = require('../controllers/cacheManager'); + +module.exports = async (req, res) => { + const cachedReserveRoster = cacheManager.getCachedReserveRoster(); + + if (cachedReserveRoster) { + res.send(cachedReserveRoster); + } else { + res.status(503).send("Cache is empty"); + } +}; \ No newline at end of file diff --git a/server/routes/index.js b/server/routes/index.js index d3ae033..052e238 100644 --- a/server/routes/index.js +++ b/server/routes/index.js @@ -5,7 +5,7 @@ const cRequest = require("../controllers/cRequest"); const rRequest = require("../controllers/rRequest"); const app = express(); -app.use (cors({ +app.use(cors({ origin: '*', })); diff --git a/server/server.js b/server/server.js index 3576a4b..386d0f2 100644 --- a/server/server.js +++ b/server/server.js @@ -9,11 +9,9 @@ app.use(cors({ })); app.use("/roster", middleware); app.get("/", (req, res) => { -res.send("Ayy Lmao! Successful response! Any issues? Submit a ticket to S6!"); + res.send("Ayy Lmao! Successful response! Any issues? Submit a ticket to S6!"); }); app.listen(port, () => { - console.log(`Roster Server listening on ${port}`) + console.log(`Roster Server listening on ${port}`) }) - -