17th-Ranger-Battalion-ORG/17th-Site-Front-End-V2
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'User-API-integration' into profile-overhaul

Browse Source
This commit is contained in:
ajdj100
2024-06-07 18:04:13 -04:00
parent 21fc11210e a268192c44
commit dd5ac5d418
4 changed files with 99 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
17th Website/src/components/ProfilePage/personnel.vue
View File

@@ -1,5 +1,48 @@
<template>
<h1>this is a personnel file</h1>
<!-- header stuff -->
<!-- <h1>this is a personnel file</h1> -->
<!-- scrollable container -->
<div class="w-full">
<!-- section -->
<div class="outline outline-white rounded-xl px-4 w-full">
<h2>Infantry Qualifications</h2>
<!-- card -->
<div>
<h3>Ranger School</h3>
<p class="text-white">Ranger School 1</p>
<p class="text-white">Ranger School 2</p>
<p class="text-white">Ranger School 3</p>
<p class="text-white">Ranger School 4</p>
</div>
<div>
<h3>Medical</h3>
<p class="text-white">Combat Life Saver (CLS)</p>
<p class="text-white">Advanced Triage and Masscas</p>
<p class="text-white">Medic (68W)</p>
</div>
<div>
<h3>Sapper</h3>
<p class="text-white">Demo</p>
<p class="text-white">Explosive Ordinance Disposal (EOD)</p>
</div>
<div>
<h3>Rifle Qualifications</h3>
<p class="text-white">Marksman</p>
<p class="text-white">Sharpshooter</p>
</div>
<div>
<h3>Heavy Weapons</h3>
<p class="text-white">Heavy Weapons</p>
<p class="text-white">Anti Armor</p>
</div>
<div>
<h3>Other</h3>
<p class="text-white">Jump Wings</p>
<p class="text-white">Radio Telephone Operator (RTO)</p>
<p class="text-white">Air Assault</p>
</div>
</div>
</div>
</template>

57
17th Website/src/components/ProfilePage/profileHeader.vue
View File

@@ -1,5 +1,4 @@
<script>
import QueryApolloGraphQL from '../../api/request';
export default {
name: 'profileHeader',
@@ -7,48 +6,20 @@ export default {
return {
count: 0,
items: [],
user: '',
user: {},
}
},
mounted() {
this.user = this.$route.params.name;
// QueryApolloGraphQL("getPageViewMemberRankStatusAll", `query GetPageViewMemberRankStatusAll {
// getPageViewMemberRankStatusAll(filter: "member_name = ${this.user}") {
// items {
// member_name
// status
// rank
// }
// }
// }`).then(value => { this.items = value; });
let uid = this.$route.params.name;
console.log(uid)
fetch(`http://iceberg-gaming.com:1323/api/v1/member/${uid}`).then(res => {
res.json().then(user => {
this.user = user;
console.log(this.user)
})
})
},
computed: {
headerInfo() {
console.log(this.items)
return this.items[0];
},
memberName() {
try {
return this.items[0].member_name;
} catch (E) {
console.log("too slow")
}
},
memberRank() {
try {
return this.items[0].rank;
} catch (E) {
console.log("too slow")
}
},
memberStatus() {
try {
return this.items[0].status;
} catch (E) {
console.log("too slow")
}
},
}
}
</script>
@@ -59,13 +30,15 @@ export default {
<img id="rangerTab" src="../icons/misc/test.png" class="xl:w-32 w-28" />
</div>
<div id="mainInfo">
<h1>{{ memberName }}</h1>
<h2>{{ memberRank }}</h2>
<h2>{{ memberStatus }}</h2>
<h1>{{ user.name }}</h1>
<h2>{{ user.rank }}</h2>
<h2>{{ user.company }}</h2>
</div>
</div>
</template>
//wee woo wee woo
<style>
#mainInfo h1 {
margin: 20px 0 10px 0px;

7
17th Website/src/style.css
View File

@@ -27,3 +27,10 @@ h2 {
margin: 0px 0 0px 0px;
}
h3 {
color: var(--white);
font-weight: 300;
font-size: 28px;
margin: 0px 0 0px 0px;
}

42
17th Website/src/views/users.vue
View File

@@ -1,7 +1,5 @@
<script>
import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue'
import { Icon } from '@iconify/vue'
import QueryApolloGraphQL from '../api/request'
import Dropdown from '../components/dropdown/Dropdown.vue'
export default {
@@ -13,8 +11,8 @@ export default {
statusFilters: [
{ id: 1, name: 'All Groups', filter: 'none', disabled: false },
{ id: 2, name: 'Alpha', filter: 'Alpha Company', disabled: false },
{ id: 3, name: 'Echo', filter: 'Echo Company', disabled: false },
{ id: 2, name: 'Alpha', filter: 'Alpha', disabled: false },
{ id: 3, name: 'Echo', filter: 'Echo', disabled: false },
{ id: 4, name: 'HHC', filter: 'HHC', disabled: false },
{ id: 5, name: 'Recruit', filter: 'Recruit', disabled: false },
],
@@ -40,25 +38,25 @@ export default {
},
filterByName(item) {
if (this.search != '')
return item.member_name.toLowerCase().includes(this.search.toLowerCase());
return item.name.toLowerCase().includes(this.search.toLowerCase());
else
return true;
},
filterByUnit(item) {
// console.log(item, this.statusFilters[this.currentStatusFilterIndex]);
if (this.statusFilters[this.currentStatusFilterIndex].filter != 'none')
return item.status == this.unitFilter.filter;
//do the filter
return item.company.toLowerCase() == this.statusFilters[this.currentStatusFilterIndex].filter.toLowerCase();
else
//no filter applied
return true;
},
filterByRole(item) { //THIS IS NOT IMPLEMENTED YET
return true;
}
},
},
components: {
Listbox,
ListboxButton,
ListboxOption,
ListboxOptions,
Icon,
Dropdown,
},
@@ -67,6 +65,15 @@ export default {
// this.items = fetch("http://iceberg-gaming.com:1323/api/members");
//make API request here
fetch('http://iceberg-gaming.com:1323/api/v1/member').then(res => {
console.log(res);
res.json().then(list => {
this.items = list;
console.log(this.items);
});
});
},
computed: {
filteredTable() {
@@ -110,7 +117,7 @@ export default {
<thead>
<tr>
<th>Member</th>
<th>Unit</th>
<th>Status</th>
<th>Rank</th>
<th>Join Date</th>
<th>LOA Until</th>
@@ -119,10 +126,13 @@ export default {
</thead>
<tbody id="tableBody">
<tr v-for="(item, index) in filteredTable"
v-on:click="$router.push({ path: `/profile/${item.member_name}/home` })">
<td>{{ item.member_name }}</td>
<td>{{ item.status }}</td>
<td>{{ item.rank }}</td>
v-on:click="$router.push({ path: `/profile/${item.id}/home` })">
<td>{{ item.name }}</td>
<td>{{ item.company }}</td>
<td>{{ item.rank.name }}</td>
<td>{{ item.created_at.split('T')[0] }}</td>
<td>hello</td>
<td>hello</td>
</tr>
</tbody>
</table>