Skip to content

Commit

Permalink
Add additional code documentation
Browse files Browse the repository at this point in the history 
Expanded inline comments and added detailed descriptions to functions in several Vue pages. Changes were made primarily in notes.vue, login.vue, predict.vue, settings.vue, and index.vue. The aim is to make the code clearer to understand and easier to maintain.

--jetbrains AI
  • Loading branch information
@Ryan-Bauroth
Ryan-Bauroth committed Jul 6, 2024
1 parent dbcfbdc commit 4b8f205
Show file tree
Hide file tree
Showing 5 changed files with 200 additions and 92 deletions.
10 changes: 7 additions & 3 deletions pages/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
<script setup lang="ts"></script>
<script setup lang="ts">
/*
Base page of the website. This really shouldn't be seen during normal use atm.
*/
</script>

<template>
<h1>Please wait!</h1>
<p>If loading is taking a long time, the server may have a problem.</p>
<h1>Please wait!</h1>
<p>If loading is taking a long time, the server may have a problem.</p>
</template>

<style scoped></style>
215 changes: 129 additions & 86 deletions pages/login.vue
View file
Original file line number Diff line number Diff line change
@@ -1,102 +1,145 @@
<script setup lang="ts">
import PouchDB from 'pouchdb'
import auth from '../utils/authorization/Authorizer'
import { couchDBBaseURL } from '~/utils/URIs'
import { loginStateKey } from '~/utils/keys'
import { eventOptions } from '~/utils/eventOptions'
import PouchDB from 'pouchdb';
import auth from '../utils/authorization/Authorizer';
import { couchDBBaseURL } from '~/utils/URIs';
import { loginStateKey } from '~/utils/keys';
import { eventOptions } from '~/utils/eventOptions';
PouchDB.plugin(auth)
const usersDB = new PouchDB(`${couchDBBaseURL}/basic`, { skip_setup: true })
let username = ref('')
let password = ref('')
let error = ref(false)
let loading = ref(false)
PouchDB.plugin(auth);
//gets a database of users and sets up some vars
const usersDB = new PouchDB(`${couchDBBaseURL}/basic`, { skip_setup: true });
let username = ref('');
let password = ref('');
let error = ref(false);
let loading = ref(false);
const events = eventOptions
//sets up current event, checking for one in local storage and then defaulting to eventOptions[0]
const events = eventOptions;
const selectedEvent = useState<String>('currentEvent', () => {
if (typeof window !== 'undefined') return localStorage.getItem('currentEvent') || eventOptions[0]
return eventOptions[0]
})
if (typeof window !== 'undefined')
return localStorage.getItem('currentEvent') || eventOptions[0];
return eventOptions[0];
});
watch(selectedEvent, () => {
if (typeof window !== 'undefined') return localStorage.setItem('currentEvent', selectedEvent.value.toString())
})
if (typeof window !== 'undefined')
return localStorage.setItem('currentEvent', selectedEvent.value.toString());
});
const { updateUsernameState }: { updateUsernameState: () => void } = inject(loginStateKey)!
let errorVal = useState('error-val', () => '')
//TODO a1cd can u comment this stuff? idk what it does exactly
const { updateUsernameState }: { updateUsernameState: () => void } =
inject(loginStateKey)!;
let errorVal = useState('error-val', () => '');
/**
* Logs in a user with the given username and password,
* sending them to the dashboard page once logged in.
*
* @param {string} username - The username of the user.
* @param {string} password - The password of the user.
*/
async function login(username: string, password: string) {
try {
loading.value = true
usersDB.logIn(username, password, async function (err, response) {
loading.value = false
if (response) {
updateUsernameState()
navigateTo('/dashboard')
} else {
error.value = true
}
})
} catch (e: any) {
error.value = true
}
try {
loading.value = true;
usersDB.logIn(username, password, async function (err, response) {
loading.value = false;
if (response) {
updateUsernameState();
navigateTo('/dashboard');
} else {
error.value = true;
}
});
} catch (e: any) {
error.value = true;
}
}
</script>

<template>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</head>
</html>
<LazyUContainer
:ui="{
base: 'mx-auto',
padding: 'p-4 sm:p-6 lg:p-8',
constrained: 'max-w-sm',
}"
>
<LazyUCard>
<template #header>
<h2 class="font-semibold text-xl text-gray-900 dark:text-white leading-tight">
{{ 'Login' }}
</h2>
</template>
<html>
<head>
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
</head>
</html>
<LazyUContainer
:ui="{
base: 'mx-auto',
padding: 'p-4 sm:p-6 lg:p-8',
constrained: 'max-w-sm',
}"
>
<LazyUCard>
<template #header>
<h2
class="font-semibold text-xl text-gray-900 dark:text-white leading-tight"
>
{{ 'Login' }}
</h2>
</template>

<LazyUForm action="javascript:void(0);">
<LazyUFormGroup label="Username" name="username" autocomplete="username" required>
<UInput required :disabled="loading" v-model="username" type="text" />
</LazyUFormGroup>
<LazyUFormGroup label="Password" name="password" autocomplete="current-password" required>
<LazyUInput
v-model="password"
placeholder="Password"
required
:disabled="loading"
type="password"
/>
</LazyUFormGroup>
<LazyUFormGroup class="inputDiv" label="Event" name="event" required>
<LazyUSelectMenu
:disabled="loading"
v-model="selectedEvent"
:options="events"
@update:v-model="
(value) => {
localStorage.setItem('currentEvent', value)
}
"
/>
</LazyUFormGroup>
<LazyUFormGroup class="inputDiv" style="padding-top: 10px">
<LazyUButton :loading="loading" @click="login(username, password)" type="submit"
>Login
</LazyUButton>
</LazyUFormGroup>
<p>{{ errorVal }}</p>
</LazyUForm>
</LazyUCard>
</LazyUContainer>
<LazyUForm action="javascript:void(0);">
<LazyUFormGroup
label="Username"
name="username"
autocomplete="username"
required
>
<UInput
required
:disabled="loading"
v-model="username"
type="text"
/>
</LazyUFormGroup>
<LazyUFormGroup
label="Password"
name="password"
autocomplete="current-password"
required
>
<LazyUInput
v-model="password"
placeholder="Password"
required
:disabled="loading"
type="password"
/>
</LazyUFormGroup>
<LazyUFormGroup
class="inputDiv"
label="Event"
name="event"
required
>
<LazyUSelectMenu
:disabled="loading"
v-model="selectedEvent"
:options="events"
@update:v-model="
value => {
localStorage.setItem('currentEvent', value);
}
"
/>
</LazyUFormGroup>
<LazyUFormGroup
class="inputDiv"
style="padding-top: 10px"
>
<LazyUButton
:loading="loading"
@click="login(username, password)"
type="submit"
>Login
</LazyUButton>
</LazyUFormGroup>
<p>{{ errorVal }}</p>
</LazyUForm>
</LazyUCard>
</LazyUContainer>
</template>

<style scoped>
Expand Down
8 changes: 7 additions & 1 deletion pages/notes.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,9 @@ let data: Ref<
},
});
/**
* Submits the data to the server though db.post
*/
async function submit() {
data.value.event = selectedEvent;
if (data.value.teamNumber != null) {
Expand All @@ -61,7 +64,10 @@ async function submit() {
<UCard class="max-w-xl flex-grow m-5">
<template #default>
<div class="pb-1.5">
<UInput v-model="data.teamNumber" placeholder="Team #"></UInput>
<UInput
v-model="data.teamNumber"
placeholder="Team #"
></UInput>
</div>
<UTextarea
rows="10"
Expand Down
49 changes: 48 additions & 1 deletion pages/predict.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,24 @@ import databases from '~/utils/databases';
import { eventOptions } from '~/utils/eventOptions';
import OuterComponents from '~/components/website-utils/OuterComponents.vue';
/*
The current prediction algorithm calculates average team scores, using the scoreMatch.ts file (under utils).
Then, the algorithm pairs all three alliance members together, calculating a predicted score for both alliances
and comparing them. The algorithm also checks its work throughout the competition, displaying an accuracy rating.
*/
let currentEvent = eventOptions[0];
if (typeof window !== 'undefined')
currentEvent = localStorage.getItem('currentEvent') || eventOptions[0];
/**
* Gets the event matches of the user's current event asynchronously
*/
const { data, pending } = await useLazyFetch<Array<any>>(
'/api/eventMatches/' + currentEvent,
);
//gets and filters scouting data to use with predictions
const { scoutingData } = databases.locals;
let db = scoutingData;
Expand Down Expand Up @@ -59,17 +69,27 @@ for (let teamData of teamOrgMatches) {
}
}
//blue and red teams
let selectedBlueTeams = ref<Array<string>>(['', '', '']);
let selectedRedTeams = ref<Array<string>>(['', '', '']);
//which team is predicted to win
let winningTeamColor = ref(['outline-red-100', 'outline-blue-100']);
//how much the winning team is predicted to win by
let winningPercentage = ref(-1);
let teamsFound = ref([
[false, false, false],
[false, false, false],
]);
//blue and red total predicted points
let blueTotal = ref(0);
let redTotal = ref(0);
/**
* Calculates the average score of a team based on their matches.
*
* @param {number} team - The ID of the team.
* @return {number} - The average score of the team. Returns -1 if the team data doesn't exist.
*/
function calculateTeamAverageScore(team: number) {
let teamMatches = teamOrgMatches.get(team);
if (teamMatches) {
Expand All @@ -82,6 +102,12 @@ function calculateTeamAverageScore(team: number) {
return -1;
}
/**
* Predicts the winning team and winning percentage based on selected teams and their average scores.
* Sets the page components to show the predicted results
*
* @return {void} This method does not return any value.
*/
function predict() {
blueTotal.value = 0;
redTotal.value = 0;
Expand Down Expand Up @@ -121,8 +147,18 @@ function predict() {
}
let matchNumber = ref<number>();
//TODO I dont think this is implemented properly idk tho
let playoffNumber = ref<number>();
/**
* Populates the selected Red and Blue teams based on the provided data and match/playoff number.
* If the pending value is false and the data value is not null, the function populates the selected teams.
* If the matchNumber value is defined and not empty, the function populates the teams based on the match number.
* If the playoffNumber value is defined, the function populates the teams based on the playoff number.
* If neither matchNumber nor playoffNumber is defined, the function sets the selected teams to empty strings.
*
* @return {void}
*/
function populateMatch() {
if (!pending.value && data.value != null) {
let tbaMatchData = data.value;
Expand Down Expand Up @@ -176,8 +212,14 @@ function populateMatch() {
}
}
//variables used to calculate how accurate predictions are
let totalMatches = ref(0);
let correctMatches = ref(0);
/**
* Gets data from eventMatches call once it has returned asynchronously
* Updates the correct matches tally
*/
watch(pending, () => {
if (!pending.value) {
let md = data.value;
Expand Down Expand Up @@ -308,7 +350,12 @@ watch(pending, () => {
>
{{ blueTotal.toFixed(1) + ' - ' + redTotal.toFixed(1) }}
</p>
<p v-else class="font-semibold">vs</p>
<p
v-else
class="font-semibold"
>
vs
</p>
</div>
</UContainer>
<UContainer
Expand Down
Loading

0 comments on commit 4b8f205

Please sign in to comment.