Merge branch 'spider-graph' of fyindr/siimee into dev

frontend/package-lock.json

@@ -8,6 +8,7 @@
             "name": "vite-project",
             "version": "0.0.0",
             "dependencies": {
+                "chart.js": "^3.9.1",
                 "joi": "^17.6.0",
                 "pubnub": "^5.0.0",
                 "vue": "^3.2.31",
@@ -1288,6 +1289,11 @@
                 "is-regex": "^1.0.3"
             }
         },
+        "node_modules/chart.js": {
+            "version": "3.9.1",
+            "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz",
+            "integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w=="
+        },
         "node_modules/chokidar": {
             "version": "3.5.3",
             "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -6918,6 +6924,11 @@
                 "is-regex": "^1.0.3"
             }
         },
+        "chart.js": {
+            "version": "3.9.1",
+            "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz",
+            "integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w=="
+        },
         "chokidar": {
             "version": "3.5.3",
             "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",

frontend/package.json

@@ -12,6 +12,7 @@
         "test": "ava"
     },
     "dependencies": {
+        "chart.js": "^3.9.1",
         "joi": "^17.6.0",
         "pubnub": "^5.0.0",
         "vue": "^3.2.31",

frontend/src/components/ProfileCard.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-w-card.profile-card-list--card.xs12.pa12
+w-card.profile-card-list--card.xs12
     header.xs12.w-flex.column.center
         NamePlate(
             :is-list='isList'
@@ -10,12 +10,17 @@ w-card.profile-card-list--card.xs12.pa12
             :role='card.role'
         )
 
-        w-button.text-upper.xs12.pa6(v-if='isPaired && !isList')
-            w-icon.mr1(xl) mdi mdi-chat
-            | start chat
-
         template(v-if='!isList')
-            SummaryBar(:is-tab='isPaired' :tab-content='card.summary')
+            w-button.text-upper.xs12.pa6(v-if='currentTab == 0 && isPaired')
+                w-icon.mr1(xl) mdi mdi-chat
+                | start chat
+
+            SummaryBar(
+                :aspects='aspects'
+                :is-tab='isPaired'
+                :tab-content='card.summary'
+                @tab-change='onTab'
+            )
             TagList(v-if='!isPaired || isList')
 
     article.xs12.w-flex.column.justify-space-between
@@ -27,10 +32,13 @@ w-card.profile-card-list--card.xs12.pa12
             v-if='!isPaired || isList'
         )
 
-    footer(v-if='!isList && !isPaired')
-        .pa12
+    footer
+        .pa12(v-if='!isPaired && !isList')
             p {{ card.summary.about.tab }}
         PairingButton(@pair='onPair' @pass='onPass' v-if='!isPaired')
+        w-button.text-upper.xs12.pa6(v-else-if='currentTab != 0')
+            w-icon.mr1(xl) mdi mdi-chat
+            | start chat
 </template>
 
 <script setup>
@@ -49,8 +57,8 @@ import TagList from './TagList.vue'
 import PairingButton from './PairingButton.vue'
 
 const router = useRouter()
-// const isPaired = ref(true)
-const isPaired = ref(false)
+const isPaired = ref(true)
+// const isPaired = ref(false)
 
 const props = defineProps({
     card: {
@@ -68,6 +76,15 @@ const props = defineProps({
     },
 })
 
+/**
+ * Track tab state for conditional rendering
+ */
+const currentTab = ref(0)
+const onTab = tabIndex => {
+    if (currentTab.value == tabIndex) return
+    currentTab.value = tabIndex
+}
+
 /**
  * Attempt to pair with target profile
  * Creates a grouping, and a membership

frontend/src/components/ProfileCardItem.vue

@@ -0,0 +1,109 @@
+<template lang="pug">
+w-card.profile-card-list--card.xs12.pa12
+    header.xs12.w-flex.column.center
+        NamePlate(
+            :is-list='isList'
+            :is-paired='isPaired'
+            :name='card.name'
+            :pid='card.pid'
+            :pronouns='card.pronouns'
+            :role='card.role'
+        )
+
+        w-button.text-upper.xs12.pa6(v-if='isPaired && !isList')
+            w-icon.mr1(xl) mdi mdi-chat
+            | start chat
+
+        template(v-if='!isList')
+            SummaryBar(:is-tab='isPaired' :tab-content='card.summary')
+            TagList(v-if='!isPaired || isList')
+
+    article.xs12.w-flex.column.justify-space-between
+        AspectBar(
+            :key='aspect.name'
+            :labels='aspect.labels'
+            :percentage='aspect.percentage'
+            v-for='aspect in aspects'
+            v-if='!isPaired || isList'
+        )
+
+    footer(v-if='!isList && !isPaired')
+        .pa12
+            p {{ card.summary.about.tab }}
+        PairingButton(@pair='onPair' @pass='onPass' v-if='!isPaired')
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import {
+    updateQueueByProfileId,
+    postMembershipByProfileId,
+    currentProfile,
+} from '../services'
+
+import NamePlate from './NamePlate.vue'
+import AspectBar from './AspectBar.vue'
+import SummaryBar from './SummaryBar.vue'
+import TagList from './TagList.vue'
+import PairingButton from './PairingButton.vue'
+
+const router = useRouter()
+// const isPaired = ref(true)
+const isPaired = ref(false)
+
+const props = defineProps({
+    card: {
+        type: Object,
+        required: true,
+    },
+    aspects: {
+        type: Array,
+        required: true,
+    },
+    isList: {
+        type: Boolean,
+        required: false,
+        default: true,
+    },
+})
+
+/**
+ * Attempt to pair with target profile
+ * Creates a grouping, and a membership
+ * for both profileId and targetId
+ */
+const onPair = async () => {
+    const group = await postMembershipByProfileId({
+        profileId: currentProfile.id.value,
+        targetId: props.card.pid,
+    })
+    updateQueueByProfileId(currentProfile.id.value, props.card.pid, false)
+    currentProfile.getGroupings()
+    console.warn('created grouping:', group)
+
+    let goToRoute = { name: 'HomeView' }
+    // if (group.membershipMatch.hasMatch) {
+    //     goToRoute = { name: 'PairsView' }
+    // }
+    router.push(goToRoute)
+}
+
+/**
+ * Send to the back of the matchQueue
+ * and forward back home
+ */
+const onPass = async () => {
+    updateQueueByProfileId(currentProfile.id.value, props.card.pid, true)
+    router.push({ name: 'HomeView' })
+}
+</script>
+
+<style lang="sass">
+.profile-card-list--card
+    background-color: #000
+    color: #fff
+    header > .w-button
+        background-color: #116006
+        color: #fff
+</style>

frontend/src/components/ProfileCardList.vue

@@ -4,7 +4,7 @@ section.profile-card-list.xs12.w-flex.column
         w-select(:items="['one', 'two', 'three']" outline) Label
     
     article
-        ProfileCard.match-layout(
+        ProfileCardItem.match-layout(
             v-for="(card, i) in cards"
             :key="`${card.pid}-${i}`"
             :card="card"
@@ -21,7 +21,7 @@ import {
     postMembershipByProfileId,
     currentProfile,
 } from '../services'
-import ProfileCard from './ProfileCard.vue'
+import ProfileCardItem from './ProfileCardItem.vue'
 
 class Aspect {
     constructor({ name, labels, percentage = 50 }) {

frontend/src/components/SpiderChart.vue

@@ -0,0 +1,91 @@
+<template lang="pug">
+.spider-chart.w-flex.pt6.pb6
+    canvas#spider-chart-canvas
+</template>
+
+<script setup>
+import { Chart, registerables } from 'chart.js'
+import { onMounted } from 'vue'
+
+const props = defineProps({
+    profileName: {
+        required: true,
+        type: String,
+    },
+    profileData: {
+        required: true,
+        type: Object,
+    },
+    targetData: {
+        required: true,
+        type: Object,
+    },
+    labels: {
+        required: true,
+        type: Array,
+    },
+})
+
+const chartStyleDefaults = {
+    borderWidth: '1px',
+    fill: true,
+}
+const profile = {
+    label: props.profileName,
+    data: props.profileData,
+    backgroundColor: 'rgba(242, 205, 92, 0.3)',
+    borderColor: '#F2CD5C',
+    ...chartStyleDefaults,
+}
+const role = {
+    label: 'Role',
+    data: props.targetData,
+    backgroundColor: 'rgba(3, 136, 166, 0.30)',
+    borderColor: '#0388A6',
+    ...chartStyleDefaults,
+}
+
+const options = {
+    plugins: {
+        legend: {
+            position: 'bottom',
+            labels: {
+                color: '#FFFFFF',
+                boxWidth: 10,
+            },
+        },
+    },
+    scales: {
+        r: {
+            angleLines: {
+                color: '#FFFFFF',
+            },
+            grid: {
+                color: '#EAF0F4',
+                lineWidth: 1,
+            },
+            pointLabels: {
+                color: '#FFFFFF',
+            },
+            suggestedMax: 6,
+            ticks: {
+                display: false,
+                stepSize: 1.6,
+            },
+        },
+    },
+}
+
+onMounted(() => {
+    Chart.register(...registerables)
+    const ctx = document.getElementById('spider-chart-canvas')
+    new Chart(ctx, {
+        type: 'radar',
+        data: {
+            labels: props.labels,
+            datasets: [profile, role],
+        },
+        options,
+    })
+})
+</script>

frontend/src/components/SummaryBar.vue

@@ -1,51 +1,73 @@
 <template lang="pug">
 section.w-flex.column.pb5
     nav.fill-width.w-flex.column.justify-space-between
-
         // Tabbed Layout
-        w-tabs(v-if="isTab" :items="Object.keys(tabContent)" center fill-bar)
-            template(#item-title="{ item }")
+        w-tabs(
+            :items='Object.keys(tabContent)'
+            @input='onTabChanged'
+            center
+            fill-bar
+            v-if='isTab'
+        )
+            template(#item-title='{ item }')
                 .w-flex.column.justify-start
-                    p(v-if="tabContent[item].matchPerc") {{ tabContent[item].matchPerc }}%
+                    p(v-if='tabContent[item].matchPerc') {{ tabContent[item].matchPerc }}%
                     p(v-else) &nbsp;
                     p {{ item }}
             // About Tab
-            template(#item-content.1="{ item }")
+            template(#item-content.1='{ item }')
                 .tab--about
                     p {{ tabContent[item].tab }}
                     br
                     p {{ tabContent[item].tab }}
                     br
                     hr
-            
+
             // Passion Tab
-            template(#item-content.2="{ item }")
+            template(#item-content.2='{ item }')
                 .tab--passion
                     p {{ tabContent[item].tab }}
+                    SpiderChart(
+                        :labels='aspects.map(label => label.name)'
+                        :profile-data='profileScore'
+                        :target-data='targetScore'
+                        profile-name='lucy'
+                        v-if='isTab'
+                    )
 
             // Aspirations Tab
-            template(#item-content.3="{ item }")
+            template(#item-content.3='{ item }')
                 .tab--aspirations
                     p {{ tabContent[item].tab }}
 
             // Skills Tab
-            template(#item-content.4="{ item }")
+            template(#item-content.4='{ item }')
                 .tab--skills
                     p {{ tabContent[item].tab }}
 
         // Untabbed Layout
         ul.w-flex.row.justify-space-between(v-else)
-            template(v-for="(item, index) in Object.keys(tabContent)" :key="index")
-                li.w-flex.row(v-if="item !== 'about'")
-                    w-icon(xl).mr1 mdi mdi-heart
+            template(
+                :key='index'
+                v-for='(item, index) in Object.keys(tabContent)'
+            )
+                li.w-flex.row(v-if='item !== "about"')
+                    w-icon.mr1(xl) mdi mdi-heart
                     .w-flex.column.justify-start
                         p {{ tabContent[item].matchPerc }}%
                         p {{ item }}
 </template>
 
 <script>
+import SpiderChart from './SpiderChart.vue'
+
 export default {
+    components: { SpiderChart },
     props: {
+        aspects: {
+            required: true,
+            type: Array,
+        },
         tabContent: {
             required: true,
             type: Object,
@@ -61,5 +83,15 @@ export default {
             default: true,
         },
     },
+    emits: ['tab-change'],
+    data: () => ({
+        profileScore: [5.7, 5.2, 4.8, 5.2, 4.9, 4.9],
+        targetScore: [5.3, 4.8, 5.7, 4.8, 5.6, 4.8],
+    }),
+    methods: {
+        onTabChanged(tabs) {
+            this.$emit('tab-change', tabs)
+        },
+    },
 }
 </script>

frontend/src/views/HomeView.vue

@@ -1,6 +1,5 @@
 <template lang="pug">
 main.view--home
-    
     article(v-if='cards.length && !loading')
         ProfileCardList(:pid='pid' :cards='cards' @reload='getCards')