Statistics Addition

7Cav · Oct 1, 2023 · 11f2e8d · 11f2e8d
1 parent c6f12d6
commit 11f2e8d
Show file tree

Hide file tree

Showing 6 changed files with 468 additions and 17 deletions.
diff --git a/client/src/index.js b/client/src/index.js
@@ -7,7 +7,7 @@ import reportWebVitals from "./reportWebVitals";
 import Layout from "./pages/Layout";
 import CavApps from "./pages/Cavapps";
 import ActiveDutyRoster from "./pages/Activedutyroster"
-import Statistics from "./pages/Rosterstatistics";
+import Statisticspage from "./pages/Rosterstatistics";
 import NoPage from "./pages/NoPage";
 
 export default function App() {
@@ -17,7 +17,7 @@ export default function App() {
         <Route path="/" element={<Layout />}>
           <Route index element={<CavApps title="7th Cavalry Apps"/>} />
           <Route path="adr" element={<ActiveDutyRoster title="7th Cavalry ADR"/>} />
-          <Route path="rosterstatistics" element={<Statistics title="7th Cavalry Statistics"/>} />
+          <Route path="rosterstatistics" element={<Statisticspage title="7th Cavalry Statistics"/>} />
           <Route path="*" element={<NoPage />} />
         </Route>
       </Routes>

diff --git a/client/src/pages/Activedutyroster.js b/client/src/pages/Activedutyroster.js
@@ -3,7 +3,7 @@ import "./Activedutyroster.css";
 import ErrorMessage from "../errorMessage";
 import AdrListEntry from "../modules/Generic/AdrListEntry";
 import Logo from "../style/themes/7cav/adrLogo";
-import { Outlet, Link } from "react-router-dom";
+import { Link } from "react-router-dom";
 
 const CLIENT_TOKEN = process.env.REACT_APP_CLIENT_TOKEN;
 const combatApiUrl = process.env.REACT_APP_COMBAT_API_URL;
@@ -13,8 +13,6 @@ const millisecondsToMinutes = (milliseconds) => {
   return Math.round(milliseconds / (1000 * 60));
 };
 
-// import {Helmet} from 'react-helmet';
-
 function ActiveDutyRoster(props) {
   const [milpacList, setMilpacList] = useState([]);
   const [reserveList, setReserveList] = useState([]);
@@ -30,7 +28,7 @@ function ActiveDutyRoster(props) {
   </script>`;
 
   // Change Page Title
-  useEffect(() => document.title = props.title, [])
+  document.title = props.title
 
   // Reusable API fetching function
   async function fetchData(url, setFunction) {

diff --git a/client/src/pages/CavApps.js b/client/src/pages/CavApps.js
@@ -1,12 +1,11 @@
-import { Outlet, Link } from "react-router-dom";
+import { Link } from "react-router-dom";
 import Logo from '../style/themes/7cav/appsLogo'
 import './CavApps.css';
-import React, { useEffect } from "react";
 
 function CavApps(props) {
 
   // Change Page Title
-  useEffect(() => document.title = props.title, [])
+  document.title = props.title
 
   return (
     <div className='masterbox'>

diff --git a/client/src/pages/Layout.js b/client/src/pages/Layout.js
@@ -1,4 +1,7 @@
-import { Outlet, Link } from "react-router-dom";
+import { Outlet } from "react-router-dom";
+
+//This will be used in future implementations for an overall Nav Bar. For now this code is set to solely disply the contents of the page you are currently on.
+//so for the love of god, dont delete the Outlet return.
 
 const Layout = () => {
   return (

diff --git a/client/src/pages/Rosterstatistics.css b/client/src/pages/Rosterstatistics.css
@@ -0,0 +1,239 @@
+.DepartmentContainer {
+    margin: auto;
+    min-width: 30%;
+    max-width: 30%;
+  }
+
+  @media only screen and (max-width: 1000px) {
+    .DepartmentContainer {
+      min-width: 50%;
+      max-width: 95%;
+    }
+  }
+
+  .p-nav-primary {
+    position: sticky;
+    top: 0;
+    z-index: 400;
+    background-color: #2e2e2e;
+    margin-bottom: 1.2em;
+  }
+
+  .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;
+  }
+
+  .loading-container {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    height: 100%;
+    min-height: 100vh;
+  }
+
+  .gif-spinner-wrapper {
+    position: relative;
+  }
+
+  .spinner {
+    border: 0.5em solid #f3f3f3;
+    border-top: 0.5em solid #ebc729;
+    border-radius: 50%;
+    width: 8em; /* Make this larger than the GIF */
+    height: 8em; /* Make this larger than the GIF */
+    animation: spin 2s linear infinite;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: 1;
+    margin: -4em 0 0 -4.5em; /* Half of width and height */
+  }
+
+  .p-loading-png {
+    width: 6em;
+    height: 6em;
+    position: relative;
+    z-index: 2;
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  .cache-time {
+    color: #ebc729;
+    font-weight: bold;
+    margin-left: 20px;
+  }
+
+  .error-container {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    height: 100%;
+    min-height: 100vh;
+  }
+
+  .p-nav-scroller {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .p-nav-png {
+    max-width: 220px;
+    max-height: 37.7167px;
+    flex: 1 1 auto;
+  }
+
+  .p-nav-opposite {
+    text-align: right;
+    flex: 1 1 auto;
+    margin: 5px;
+  }
+
+  .p-nav-opposite-link {
+    color: #f1f1f1;
+    font-weight: bold;
+  }
+
+  .p-nav-png {
+    width: 220px;
+    height: 37.7167px;
+  }
+
+  .p-nav-info p {
+    display: flex;
+    align-items: center;
+  }
+
+  /* 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;
+    font-size: x-large;
+    font-weight: bold;
+    border-width: 1px;
+    border-style: solid;
+    border-image: linear-gradient(to right, #ebc729, transparent) 1 0%;
+    border-top: transparent;
+  }
+
+  @media only screen and (max-width: 1000px) {
+    .Title {
+      border-image: none;
+      border-color: #ebc729;
+      border-left: transparent;
+      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 {
+    color: #f1f1f1;
+    font-size: larger;
+    font-weight: bold;
+    padding-top: 15px;
+    padding-bottom: 15px;
+  }
+
+  .Title:hover {
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  .HeaderContainer {
+    display: flex;
+  }
+
+  .Counter {
+    font-size: smaller;
+    padding-top: 20px;
+    padding-bottom: 15px;
+    margin-left: auto;
+  }
+
+  .ItemList table {
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .ItemList thead {
+    display: none;
+  }
+
+  .ItemList td {
+    padding-bottom: 7px;
+    padding-left: 10px;
+    width: 50%;
+  }
+
+  a {
+    color: #ebc729;
+    text-decoration: none;
+  }
+
+  a:hover {
+    color: #ebc729;
+    text-decoration: underline;
+  }
+
+  .Collapsible__trigger {
+    display: block;
+    position: relative;
+  }
+
+  .Collapsible__trigger:after {
+    content: url("../style/themes/7cav/Chevron.png");
+    position: absolute;
+    right: 0px;
+    top: 0px;
+    display: block;
+    transition: transform 300ms;
+    transform: rotateZ(90deg);
+
+    /* 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%;
+  }
+
+  .Collapsible__trigger.is-open::after {
+    transform: rotateZ(180deg);
+    position: absolute;
+    right: 0px;
+    top: 0px;
+
+    /* 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%;
+  }
+