The Active Duty Roster (ADR) is a Reactjs based app designed to automatically track membership of every position within the 7th Cavalry Gaming Regiment via the 7th Cavalry API. The ADR is structured as a client-server architecture and includes basic authentication for enhanced security. Though the ADR is accurate, semi-regular maintenence is needed in order to keep tracked billets up to date.
In order to run the ADR locally for development, you need the following:
- A valid 7th Cavalry Gaming account with member-level privileges (i.e. not a public account).
- An instance of Node.js installed on your system.
- Your choice of IDE such as VSCode.
Before you get started with your server, you require two methods of authentication. You require both an API token from 7th Cavalry Gaming and a local clientside token.
To get and apply your API token do the following steps:
- Log into your 7th Cavalry Gaming account.
- Navigate to your Connected Accounts and select the "view account" button for auth.7cav.us
- Once you have logged into keycloak, copy the provided API token into your clipboard.
- Open the adr project folder and navigate to
adr/server/credentials. Inside should be a file namedexample_token.js. - Make a duplicate
example_token.jsand rename it totoken.js. - Inside the new
token.jsfile, paste your API token in theAPI_TOKENconstant and save the file.
To make a clientside token, do the following:
- Open the adr project folder and navigate to
/client. - Inside the Client folder create a nameless
.envfile. When opened, the directory should beadr/client/.env - Paste the following code into the
.envfile.
REACT_APP_CLIENT_TOKEN ='XXXXXX'
REACT_APP_COMBAT_API_URL=http://localhost:4000/roster/combat
REACT_APP_RESERVE_API_URL=http://localhost:4000/roster/reserves
REACT_APP_CACHE_TIMESTAMP_URL=http://localhost:4000/cache-timestamp- Replace the
REACT_APP_CLIENT_TOKENconstant with a password of your choice and save. - Navigate to
adr/server/credentials/token.jsand ensure theCLIENT_TOKENconstant matches the same constant in the previous.envfile and save.
Before initializing the server, the dependancies for the ADR need to be installed on your end.
- Open a terminal/cmd prompt and navigate to the adr project folder and execute the command
npm install. - Once the install finishes, navigate to
adr/clientand execute the previous command.
You should now be ready to run the Server and the Client.
- Open two terminals. On the first terminal navigate to
adr/serverand enter the commandnode server.js. You should see that the server is listening on localhost:4000 and can be additionally verified by visiting localhost:4000 on your browser. - On the second terminal, navigate to
adr/client/srcand run the commandnpm start. Once the clientside is running, you should be automatically redirected to localhost:3000 on your browser. A sucessful response is when the ADR is completely filled.
You are now good to go! adr/client/src/app.js is the primary file in which everything on the clientside is ran. Closing the terminals will close the servers. Happy Coding!
To add a new billet to an existing category, you need to update the BilletBank.js file located in client/src/modules/Generic.
- Open
BilletBank.js. - Locate the array that corresponds to the category where you wish to add the new billet.
- Append the new billet ID to this array.
Suppose you want to add a new billet with an ID of 28 to the "Information Management Office Command" category. Update imoCommand as follows:
const imoCommand = ['5','9'];const imoCommand = ['5','9','28'];To introduce a new category, both BilletBank.js and App.js need to be updated.
-
In
BilletBank.js:- Add a new array for the subcategory and populate it with billet IDs.
- Add this new subcategory to the
billetBankconstant.
-
In
App.js:- Create a new
<div>with the classDepartmentContainer. - Inside this
<div>, add aCollapsiblecomponent for the new category and subcategory.
- Create a new
To add a new major category called "test" with a subcategory "subTest," do the following:
In BilletBank.js:
const subTest = ['1', '2', '3'];
const billetBank = {
regiCommand,
oneSevenCommand,
subTest,
};In App.js:
<div className='DepartmentContainer'>
<Collapsible trigger="test" triggerClassName="Title" triggerOpenedClassName="Title" open={true}>
<div className='subTest'>
<MilpacParse usePrimaryOnly={true} milpacArray={milpacArray} billetIDs={lists.subTest} subtitle={'Subcategory of Test'} />
</div>
</Collapsible>
</div>Note: Ensure that you add these elements in the proper locations in
App.jsto maintain the formatting.
- Redo whole tutorial section
- Change cache warning on client to display time since cache refresh
- Investigate the feasibility of sorting by rank after billet sorting (Subsorting? Consider using QuickSort)
- Add graphical data visualization
- Code Refactorizing
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent