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

17th Website/src/components/ProfilePage/personnel.vue

@@ -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>

17th Website/src/components/ProfilePage/profileHeader.vue

@@ -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;
+        let uid = this.$route.params.name;
-        // QueryApolloGraphQL("getPageViewMemberRankStatusAll", `query GetPageViewMemberRankStatusAll {
+        console.log(uid)
-        //     getPageViewMemberRankStatusAll(filter: "member_name = ${this.user}") {
+
-        //         items {
+        fetch(`http://iceberg-gaming.com:1323/api/v1/member/${uid}`).then(res => {
-        //         member_name
+            res.json().then(user => {
-        //         status
+                this.user = user;
-        //         rank
+                console.log(this.user)
-        //         }
+            })
-        //     }
+        })
-        //     }`).then(value => { this.items = value; });
     },
-    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>
+            <h1>{{ user.name }}</h1>
-            <h2>{{ memberRank }}</h2>
+            <h2>{{ user.rank }}</h2>
-            <h2>{{ memberStatus }}</h2>
+            <h2>{{ user.company }}</h2>
         </div>
     </div>
 </template>
 
+//wee woo wee woo
+
 <style>
 #mainInfo h1 {
     margin: 20px 0 10px 0px;

17th Website/src/style.css

@@ -26,4 +26,11 @@ h2 {
     font-size: 40px;
     margin: 0px 0 0px 0px;
 
+}
+
+h3 {
+  color: var(--white);
+  font-weight: 300;
+  font-size: 28px;
+  margin: 0px 0 0px 0px;
 }

17th Website/src/views/users.vue

@@ -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: 2, name: 'Alpha', filter: 'Alpha', disabled: false },
-                { id: 3, name: 'Echo', filter: 'Echo Company', 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,35 +38,44 @@ 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,
     },
     mounted() {
-    //    QueryApolloGraphQL("getPageViewMemberRankStatusAll", "query Query {getPageViewMemberRankStatusAll {items {member_name,rank,status}}}").then(value => { this.items = value }) //console.log(value); for debug reasons
+        //    QueryApolloGraphQL("getPageViewMemberRankStatusAll", "query Query {getPageViewMemberRankStatusAll {items {member_name,rank,status}}}").then(value => { this.items = value }) //console.log(value); for debug reasons
         // 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: {
+    computed: { 
         filteredTable() {
             var newTable = this.items;
             newTable = newTable.filter(this.filterByUnit);
@@ -91,12 +98,12 @@ export default {
                     class="mx-2 max-w-md" />
                 <div id="dropdownWrapper">
 
-                    <Dropdown :values="statusFilters" :currentIndex="currentStatusFilterIndex" display="name" 
+                    <Dropdown :values="statusFilters" :currentIndex="currentStatusFilterIndex" display="name"
-                    @changeSelection="(index) => currentStatusFilterIndex = index" class="w-36 mr-2">
+                        @changeSelection="(index) => currentStatusFilterIndex = index" class="w-36 mr-2">
                     </Dropdown>
 
                     <Dropdown :values="roleFilters" :currentIndex="currentRoleFilter" display="name"
-                    @changeSelection="(index) => currentRoleFilter = index" class="w-36">
+                        @changeSelection="(index) => currentRoleFilter = index" class="w-36">
                     </Dropdown>
 
                     <button @click="resetFilters()"
@@ -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` })">
+                    v-on:click="$router.push({ path: `/profile/${item.id}/home` })">
-                    <td>{{ item.member_name }}</td>
+                    <td>{{ item.name }}</td>
-                    <td>{{ item.status }}</td>
+                    <td>{{ item.company }}</td>
-                    <td>{{ item.rank }}</td>
+                    <td>{{ item.rank.name }}</td>
+                    <td>{{ item.created_at.split('T')[0] }}</td>
+                    <td>hello</td>
+                    <td>hello</td>
                 </tr>
             </tbody>
         </table>