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

Also updated API call

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

@@ -1,10 +1,20 @@
+<script setup>
+import { ref } from 'vue';
+const props = defineProps(['Activity']);
 
+console.log(props.Activity);
+</script>
 
 <template>
 
-<div class="border-2 border-white rounded-xl p-2 px-4">
-    <h2>hello</h2>
-    <p>date</p>
+    <div class="border-2 border-white rounded-xl p-2 px-4 w-full m-2">
+        <div class="flex flex-row mt-2 pb-2">
+            <h2 v-if="props.Activity.Type == 0" class="bg-green-600 font-bold px-4 rounded-md mr-4">Attended</h2>
+            <h2 v-else-if="props.Activity.Type == 1" class="bg-yellow-400 font-bold px-4 rounded-md mr-4">Promotion</h2>
+            <h2 v-else="props.Activity.Type == 2" class="bg-cyan-500 font-bold px-4 rounded-md mr-4">Achived</h2>
+            <h2>{{props.Activity.EventName}}</h2>
+        </div>
+        <p class="text-white">{{props.Activity.EventDate}}</p>
     </div>
 
 </template>

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

@@ -1,18 +1,29 @@
-<script>
+<script setup>
 import activityCard from './activityCard.vue';
 
-export default {
-    components: {
-        activityCard,
-    }
-}
+const history = [
+    {
+        EventName: 'Operation Whatever',
+        EventDate: Date.now(),
+        Type: 0
+    },
+    {
+        EventName: 'SPC -> CPL ',
+        EventDate: Date.now(),
+        Type: 1
+    }, 
+    {
+        EventName: 'Ranger Tab',
+        EventDate: Date.now(),
+        Type: 2
+    },
+]
+
+
 </script>
 
 <template>
     <div class="flex flex-col w-full items-center">
-        <h1>This is activity history</h1>
-        <activityCard />
-        <activityCard />
-        <activityCard />
+        <activityCard v-for="event in history" :Activity="event" />
     </div>
 </template>

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

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

@@ -2,9 +2,8 @@
 import { RouterLink } from 'vue-router'
 import { Icon } from '@iconify/vue'
 
-const iconName = "carbon:tool-kit"
 export default {
-    props: ['link', 'content', 'active'],
+    props: ['link', 'content'],
     components: {
         RouterLink,
         Icon
@@ -20,10 +19,25 @@ export default {
 <template>
     <RouterLink :to="link">
         <p class="text-white h-fit xl:rounded-md my-0 sm:pb-3 p-2 hover:text-blue transition-colors 
-        xl:active:ring-1 sm:border-b-2 xl:border-b-0 sm:border-gray-light sm:active:border-blue 
-        xl:active:ring-blue xl:w-64 sm:w-36 sm:text-center xl:text-left" 
-        :class="{ active: active }">
+        sm:border-b-2 xl:border-b-0 sm:border-gray-light 
+        xl:w-64 sm:w-36 sm:text-center xl:text-left">
             {{ content }}
         </p>
     </RouterLink>
 </template>
+
+<style scoped>
+@media only screen and (min-width: 1375px) {
+    .router-link-active {
+        outline: 2px solid var(--accent-primary);
+        border-radius: 10px;
+    }
+}
+
+@media only screen and (max-width: 1376px) {
+    .router-link-active {
+        box-shadow: 0 2px 0 0 var(--accent-primary);
+        background-color: transparent;
+    }
+}
+</style>

17th Website/src/style.css

@@ -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;
+}