+
+ {/*This gif is about 150kb. Kinda big, relatively speaking. An Svg may be desired in the furture */}
+
+
+
Loading...
+
+ );
+}
diff --git a/client/app/test/modules/AdrListEntry.jsx b/client/app/test/modules/AdrListEntry.jsx
new file mode 100644
index 0000000..a979b2a
--- /dev/null
+++ b/client/app/test/modules/AdrListEntry.jsx
@@ -0,0 +1,23 @@
+import React from "react";
+import MilpacParse from "./MilpacParse";
+import lists from "../../reusableModules/BilletBank";
+
+function AdrListEntry(props) {
+ let billetBankObject = lists.billetBankObject;
+ let selector = props.bBGroup;
+
+ return (
+
+
{billetBankObject[selector].collapsibleTitle}
+
+
+
+
+ );
+}
+
+export default AdrListEntry;
diff --git a/client/app/test/modules/ArrayBuilder.js b/client/app/test/modules/ArrayBuilder.js
new file mode 100644
index 0000000..094b05a
--- /dev/null
+++ b/client/app/test/modules/ArrayBuilder.js
@@ -0,0 +1,11 @@
+//This is included as a dev tool to generate bulk billet list entries in sequential order. run this outside of cavApps.
+let countString = "";
+let i = 629;
+let stopper = 644;
+
+do {
+ countString = `${countString},'${i}'`;
+ i++;
+} while (i <= stopper);
+
+console.log(countString);
diff --git a/client/app/test/modules/ArrayMap.jsx b/client/app/test/modules/ArrayMap.jsx
new file mode 100644
index 0000000..8a24947
--- /dev/null
+++ b/client/app/test/modules/ArrayMap.jsx
@@ -0,0 +1,41 @@
+import React from "react";
+
+/*This function is probably the most complicated code in the ADR. Essentially, it takes inputArray and headerTitles, and iterates through the first layer of inputArray's arrays
+which in this case is the battalion level. At the battalion level, it creates a table row for each company, adding the company title (defined in BilletBank.js) and unit strength counter.
+After the title and counter are created for the company level, the lists themselves for each company are created, which are the second layer of arrays. The lists themselves contain
+milpac link, name and rank, and position title.*/
+
+function ArrayMap(props) {
+ let inputArray = props.inputArray;
+
+ return (
+
+ );
+}
+
+export default ArrayMap;
diff --git a/client/app/test/modules/MilpacParse.jsx b/client/app/test/modules/MilpacParse.jsx
new file mode 100644
index 0000000..a7526be
--- /dev/null
+++ b/client/app/test/modules/MilpacParse.jsx
@@ -0,0 +1,137 @@
+import React from "react";
+import ArrayMap from "./ArrayMap";
+
+/*Milpac Parse is used to compare the API response (milpacArray) against desired position ID's (billetBankObject). If for example, a person is a Milpacs Clerk and billetBankObject
+is set to check for Milpacs Clerks, Milpac Parse will search for matching entries within the API resonse. If there is someone that matches, they are pushed to an output array. (returnArray)
+This particular instance of milpacArray is designed to parse an entire object for matching entries, i.e. It will parse all of First Battalion, and push out an array
+for each company within first battalion if asked to do so.*/
+
+function MilpacParse(props) {
+ const billetBankObject = props.billetBankObject;
+ let milpacArray = props.milpacArray;
+
+ //Currently broken. Sypolt, pls fix.
+ //const uniqueNamesSet = new Set();
+
+ let returnArray = Array(billetBankObject.length)
+ .fill()
+ .map(() => []);
+
+ //First, check the combat roster primaries for matching billet id's, then push them to the return array if match is found.
+
+ for (let milpacIdCombat in milpacArray[0].combat.profiles) {
+ let name = milpacArray[0].combat.profiles[milpacIdCombat].realName;
+ let rank = milpacArray[0].combat.profiles[milpacIdCombat].rank.rankFull;
+ let primary = milpacArray[0].combat.profiles[milpacIdCombat].primary;
+ let fullName = rank + " " + name;
+ let primarySortKey =
+ milpacArray[0].combat.profiles[milpacIdCombat].primary.positionId;
+
+ for (let index in billetBankObject) {
+ if (billetBankObject[index].includes(primary.positionId)) {
+ returnArray[index].push({
+ fullName: fullName,
+ position: primary,
+ isPrimary: "true",
+ sortKey: primarySortKey,
+ itemKey: milpacIdCombat,
+ listKey: primarySortKey + milpacIdCombat,
+ });
+ //uniqueNamesSet.add(fullName);
+ }
+
+ //Next, check the combat roster secondaries for matching billet id's, then push to return array if match is found.
+
+ for (let index2 in milpacArray[0].combat.profiles[milpacIdCombat]
+ .secondaries) {
+ let secondary =
+ milpacArray[0].combat.profiles[milpacIdCombat].secondaries[index2];
+ let secondarySortKey =
+ milpacArray[0].combat.profiles[milpacIdCombat].secondaries[index2]
+ .positionId;
+
+ if (!billetBankObject[index].includes(secondary.positionId)) {
+ continue;
+ }
+
+ returnArray[index].push({
+ fullName: fullName,
+ position: secondary,
+ isPrimary: "false",
+ sortKey: secondarySortKey,
+ itemKey: milpacIdCombat,
+ listKey: secondarySortKey + milpacIdCombat,
+ });
+ //uniqueNamesSet.add(fullName);
+ }
+ }
+ }
+
+ //After the Combat Roster, check the Reserves.
+
+ for (let milpacIdReserve in milpacArray[0].reserve.profiles) {
+ let rName = milpacArray[0].reserve.profiles[milpacIdReserve].realName;
+ let rRank = milpacArray[0].reserve.profiles[milpacIdReserve].rank.rankFull;
+ let rPrimary = milpacArray[0].reserve.profiles[milpacIdReserve].primary;
+ let rFullName = rRank + " " + rName;
+ let rPrimarySortKey =
+ milpacArray[0].reserve.profiles[milpacIdReserve].primary.positionId;
+
+ //Check the Reserve primaries, then push to return array if match is found.
+
+ for (let index in billetBankObject) {
+ if (billetBankObject[index].includes(rPrimary.positionId)) {
+ returnArray[index].push({
+ fullName: rFullName,
+ position: rPrimary,
+ isPrimary: "true",
+ sortKey: rPrimarySortKey,
+ itemKey: milpacIdReserve,
+ listKey: rPrimarySortKey + milpacIdReserve,
+ });
+ //uniqueNamesSet.add(rFullName);
+ }
+
+ //Check the Reserve secondaries, then push to return array if match is found.
+
+ for (let rIndex in milpacArray[0].reserve.profiles[milpacIdReserve]
+ .secondaries) {
+ let rSecondary =
+ milpacArray[0].reserve.profiles[milpacIdReserve].secondaries[rIndex];
+ let rSecondarySortKey =
+ milpacArray[0].reserve.profiles[milpacIdReserve].secondaries[rIndex]
+ .positionId;
+
+ if (!billetBankObject[index].includes(rSecondary.positionId)) {
+ continue;
+ }
+
+ returnArray[index].push({
+ fullName: rFullName,
+ position: rSecondary,
+ isPrimary: "false",
+ sortKey: rSecondarySortKey,
+ itemKey: milpacIdReserve,
+ listKey: rSecondarySortKey + milpacIdReserve,
+ });
+ //uniqueNamesSet.add(rFullName);
+ }
+
+ // Sort the array based on the order of positionIds in the billetBankObject array. This is mostly accurate, however ranks are not taken into account in the final display
+
+ returnArray[index].sort((a, b) => {
+ const aIndex = billetBankObject[index].indexOf(a.sortKey);
+ const bIndex = billetBankObject[index].indexOf(b.sortKey);
+ return aIndex - bIndex;
+ });
+ }
+ }
+
+ return (
+
+
+
+ );
+}
+
+export default MilpacParse;
diff --git a/client/app/test/page.css b/client/app/test/page.css
new file mode 100644
index 0000000..1ae39a9
--- /dev/null
+++ b/client/app/test/page.css
@@ -0,0 +1,241 @@
+.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: center;
+ height: 100%;
+ min-height: 60vh;
+ flex-direction: column;
+}
+
+.gif-spinner-wrapper {
+ position: relative;
+}
+
+.spinner {
+ border: 0.5em solid #f3f3f3;
+ border-top: 0.5em solid #ebc729;
+ border-radius: 50%;
+ width: 11em;
+ /* Make this larger than the GIF */
+ height: 11em;
+ /* Make this larger than the GIF */
+ animation: spin 2s linear infinite;
+ position: absolute;
+ top: 30%;
+ left: 30%;
+ z-index: 1;
+ margin: -4em 0 0 -4.5em;
+ /* Half of width and height */
+}
+
+.p-loading-png {
+ width: 8em;
+ height: 8em;
+ position: relative;
+ z-index: 2;
+ transform: translatex(-7%);
+}
+
+.loading-subtitle {
+ color: #f1f1f1;
+ font-size: x-large;
+ font-weight: bold;
+ padding: 1em;
+}
+
+@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%;
+}
+
+.Collapsible__trigger {
+ display: block;
+ position: relative;
+}
+
+.Collapsible__trigger:after {
+ content: none;
+ 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%;
+}
diff --git a/client/app/test/page.jsx b/client/app/test/page.jsx
index 3d60884..f919052 100644
--- a/client/app/test/page.jsx
+++ b/client/app/test/page.jsx
@@ -3,9 +3,10 @@ import GetCombatRoster from "../reusableModules/getCombatRoster";
import GetReserveRoster from "../reusableModules/getReserveRoster";
import GetApiTimestamp from "../reusableModules/getApiTimestamp";
import GetRosterGroups from "../reusableModules/getGroups";
+import AdrListEntry from "./modules/AdrListEntry";
import Logo from "../theme/adrLogo";
-//import "./page.css";
-//import "../globals.css";
+import "./page.css";
+import "../globals.css";
export const metadata = {
title: "Active Duty Roster",
@@ -25,5 +26,46 @@ export default async function ActiveDutyRoster() {
console.log(milpacArray);
console.log(rosterGroups);
- return
Hello there!
;
+ return (
+
+
+
+
+
+
+
+ {/* note: bBGroup = Billet Bank Group */}
+
+
+
+
+
+
+
+
+
-
- {/*This gif is about 150kb. Kinda big, relatively speaking. An Svg may be desired in the furture */}
-
-
-
Loading...
-
- );
-}
diff --git a/client/app/test/modules/AdrListEntry.jsx b/client/app/test/modules/AdrListEntry.jsx
deleted file mode 100644
index e106148..0000000
--- a/client/app/test/modules/AdrListEntry.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-//Honestly, I could probably just delete this file.
-
-import React from "react";
-import MilpacParse from "./MilpacParse";
-
-function AdrListEntry(props) {
- const rosterGroups = props.rosterGroups.groups;
- const selector = props.rGSelector;
-
- return (
-
-
-
- );
-}
-
-export default AdrListEntry;
diff --git a/client/app/test/modules/ArrayBuilder.js b/client/app/test/modules/ArrayBuilder.js
deleted file mode 100644
index 094b05a..0000000
--- a/client/app/test/modules/ArrayBuilder.js
+++ /dev/null
@@ -1,11 +0,0 @@
-//This is included as a dev tool to generate bulk billet list entries in sequential order. run this outside of cavApps.
-let countString = "";
-let i = 629;
-let stopper = 644;
-
-do {
- countString = `${countString},'${i}'`;
- i++;
-} while (i <= stopper);
-
-console.log(countString);
diff --git a/client/app/test/modules/ArrayMap.jsx b/client/app/test/modules/ArrayMap.jsx
deleted file mode 100644
index 262f801..0000000
--- a/client/app/test/modules/ArrayMap.jsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from "react";
-
-/*This function is probably the most complicated code in the ADR. Essentially, it takes inputArray and headerTitles, and iterates through the first layer of inputArray's arrays
-which in this case is the battalion level. At the battalion level, it creates a table row for each company, adding the company title (defined in BilletBank.js) and unit strength counter.
-After the title and counter are created for the company level, the lists themselves for each company are created, which are the second layer of arrays. The lists themselves contain
-milpac link, name and rank, and position title.*/
-
-function ArrayMap(props) {
- let inputArray = props.inputArray;
- console.log(inputArray);
-
- return (
-
- );
-}
-
-export default ArrayMap;
diff --git a/client/app/test/modules/MilpacParse.jsx b/client/app/test/modules/MilpacParse.jsx
deleted file mode 100644
index 0dc8960..0000000
--- a/client/app/test/modules/MilpacParse.jsx
+++ /dev/null
@@ -1,141 +0,0 @@
-import React from "react";
-import ArrayMap from "./ArrayMap";
-
-/*Milpac Parse is used to compare the API response (milpacArray) against desired position ID's (billetBankObject). If for example, a person is a Milpacs Clerk and billetBankObject
-is set to check for Milpacs Clerks, Milpac Parse will search for matching entries within the API resonse. If there is someone that matches, they are pushed to an output array. (returnArray)
-This particular instance of milpacArray is designed to parse an entire object for matching entries, i.e. It will parse all of First Battalion, and push out an array
-for each company within first battalion if asked to do so.*/
-
-function MilpacParse(props) {
- const rosterGroups = props.rosterGroups;
- let milpacArray = props.milpacArray;
-
- console.log(rosterGroups);
-
- const uniqueNamesSet = new Set();
-
- let returnArray = [];
-
- //First, check the combat roster primaries for matching billet id's, then push them to the return array if match is found.
-
- for (let milpacIdCombat in milpacArray[0].combat.profiles) {
- let name = milpacArray[0].combat.profiles[milpacIdCombat].realName;
- let rank = milpacArray[0].combat.profiles[milpacIdCombat].rank.rankFull;
- let primary = milpacArray[0].combat.profiles[milpacIdCombat].primary;
- let fullName = rank + " " + name;
- let primarySortKey =
- milpacArray[0].combat.profiles[milpacIdCombat].primary.positionId;
-
- for (let index in rosterGroups) {
- if (rosterGroups[index].positionId == primary.positionId) {
- returnArray.push({
- fullName: fullName,
- position: primary,
- isPrimary: "true",
- sortKey: rosterGroups[index].positionDisplayOrder,
- itemKey: milpacIdCombat,
- listKey: primarySortKey + milpacIdCombat,
- });
- uniqueNamesSet.add(fullName);
- }
-
- //Next, check the combat roster secondaries for matching billet id's, then push to return array if match is found.
-
- for (let index2 in milpacArray[0].combat.profiles[milpacIdCombat]
- .secondaries) {
- let secondary =
- milpacArray[0].combat.profiles[milpacIdCombat].secondaries[index2];
- let secondarySortKey =
- milpacArray[0].combat.profiles[milpacIdCombat].secondaries[index2]
- .positionId;
-
- if (rosterGroups[index].positionId == secondary.positionId) {
- returnArray.push({
- fullName: fullName,
- position: secondary,
- isPrimary: "false",
- sortKey: rosterGroups[index].positionDisplayOrder,
- itemKey: milpacIdCombat,
- listKey: secondarySortKey + milpacIdCombat,
- });
- uniqueNamesSet.add(fullName);
- }
- }
- }
- }
-
- //After the Combat Roster, check the Reserves.
-
- for (let milpacIdReserve in milpacArray[0].reserve.profiles) {
- let rName = milpacArray[0].reserve.profiles[milpacIdReserve].realName;
- let rRank = milpacArray[0].reserve.profiles[milpacIdReserve].rank.rankFull;
- let rPrimary = milpacArray[0].reserve.profiles[milpacIdReserve].primary;
- let rFullName = rRank + " " + rName;
- let rPrimarySortKey =
- milpacArray[0].reserve.profiles[milpacIdReserve].primary.positionId;
-
- //Check the Reserve primaries, then push to return array if match is found.
-
- for (let index in rosterGroups) {
- if (rosterGroups[index].positionId == rPrimary.positionId) {
- returnArray.push({
- fullName: rFullName,
- position: rPrimary,
- isPrimary: "true",
- sortKey: rosterGroups[index].positionDisplayOrder,
- itemKey: milpacIdReserve,
- listKey: rPrimarySortKey + milpacIdReserve,
- });
- uniqueNamesSet.add(rFullName);
- }
-
- //Check the Reserve secondaries, then push to return array if match is found.
-
- for (let rIndex in milpacArray[0].reserve.profiles[milpacIdReserve]
- .secondaries) {
- let rSecondary =
- milpacArray[0].reserve.profiles[milpacIdReserve].secondaries[rIndex];
- let rSecondarySortKey =
- milpacArray[0].reserve.profiles[milpacIdReserve].secondaries[rIndex]
- .positionId;
-
- if (rosterGroups[index].positionId == rSecondary.positionId) {
- returnArray.push({
- fullName: rFullName,
- position: rSecondary,
- isPrimary: "false",
- sortKey: rosterGroups[index].positionDisplayOrder,
- itemKey: milpacIdReserve,
- listKey: rSecondarySortKey + milpacIdReserve,
- });
- uniqueNamesSet.add(rFullName);
- }
- }
-
- // Sort the array based on the order of positionIds in the billetBankObject array. This is mostly accurate, however ranks are not taken into account in the final display
- }
- }
- returnArray.sort((a, b) => {
- const aIndex = a.sortKey;
- const bIndex = b.sortKey;
- return aIndex - bIndex;
- });
-
- console.log(returnArray);
-
- return (
-
![Loading]({"/hamster-hamtaro.gif"})
+