fyindr
/
siimee
Следить 4
В избранное 3
Форкнуть 1
Код Pull Request'ы 1 Релизы 4 Вики Активность
Просмотр исходного кода

Merge branch 'homeVue-template' of fyindr/siimee into dev

tags/0.0.1^2
jcarbajal 3 лет назад
Родитель
0aec6ab009 d08a2fed02
Сommit
46ffe9d811
6 измененных файлов: 40 добавлений и 36 удалений
Разделённый вид Показать статистику Diff
  1. 1
    1
      frontend/index.html
  2. 6
    25
      frontend/src/App.vue
  3. 1
    1
      frontend/src/components/Messages.vue
  4. 5
    3
      frontend/src/components/ProfileCardList.vue
  5. 1
    0
      frontend/src/utils/mixins.js
  6. 26
    6
      frontend/src/views/HomeView.vue

+ 1
- 1
frontend/index.html Просмотреть файл 

@@ -6,7 +6,7 @@
6 6 
         <title>Vite App</title>
7 7 
     </head>
8 8 
     <body>
9 
-        <div id="app"></div>
9 
+        <div id="app" style="width:90%;margin:5%;"></div>
10 10 
         <script>
11 11 
             // DUMB shim
12 12 
             var global = window

+ 6
- 25
frontend/src/App.vue Просмотреть файл 

@@ -1,31 +1,12 @@
1 1 
 <template lang="pug">
2 2 
 w-app
3 
-    w-drawer(v-model="openDrawer")
4 
-    w-flex.my12(:gap="3" align-center wrap)
5 
-        w-button.ma1(@click="$waveui.notify('Information.')" bg-color="info") Notify info
6 
-        w-button.ma1(@click="$waveui.notify('Success!', 'success')" bg-color="success") Notify success
7 
-        w-button.ma1(@click="$waveui.notify('Warning!', 'warning')" bg-color="warning") Notify warning
8 
-        w-button.ma1(@click="$waveui.notify('Error :(', 'error', 0)" bg-color="error") Permanent error
9 
-    w-flex.my12(align-center wrap)
10 
-        w-spinner(bounce)
11 
-        w-input Label
12 
-        w-checkbox Single option
13 
-    w-flex.my12
3 
+    div.nav(style="display: flex; justify-content: space-between;")
4 
+        header
5 
+            h2 home - profile: {{ getPid }}
6 
+        w-drawer(v-model="openDrawer")
7 
+            h2 content
14 8 
         w-button(@click="openDrawer = true" outline="")
15 
-            | Open drawer
16 
-    w-flex.my12(grow column)
17 
-        w-slider(:model-value="40" thumb-label step-label :step="20" color="primary-light3").mt12
18 
-        .mt4 v-model:
19 
-            code.ml1 {{ sliderVal }}
20 
-    w-flex.my12(:gap="3" align-center wrap)
21 
-        | Show menu on:
22 
-        w-menu
23 
-            template(#activator="{ on }")
24 
-                w-button(v-on="on") Show menu
25 
-            | Menu content
26 
-        w-badge.mr10(bg-color="error")
27 
-            template(#badge) 3
28 
-            w-icon(color="grey-light1" size="2.5em") mdi mdi-email
9 
+            | Active Chats
29 10 
     SideBar(
30 11 
         v-if="showSidebar"
31 12 
         :pid="getPid"

+ 1
- 1
frontend/src/components/Messages.vue Просмотреть файл 

@@ -7,7 +7,7 @@
7 7 
         :key='profile.profile_id'
8 8 
         :class="[pid == profile.profile_id ? 'active' : '', 'sidebar__message', 'f-col', 'start']"
9 9 
     )
10 
-    img(:src='profile.avatar')
10 
+    img(:src='profile.avatar' style="max-height:100px")
11 11 
     .message__right
12 12 
         h4.message__name {{ profile.name }}
13 13 
         p.message__content {{ profile.metadata.rawMetadata || &quot;Hello I&apos;m using tinder!&quot; }}

+ 5
- 3
frontend/src/components/ProfileCardList.vue Просмотреть файл 

@@ -1,5 +1,5 @@
1 1 
 <template lang="pug">
2 
-section.profile-card-list
2 
+section.profile-card-list(:style="{'display': 'flex', 'overflow':'auto',}")
3 3 
     .swipe(
4 4 
         v-if="!isGrid"
5 5 
         :config="config"
 
@@ -8,8 +8,10 @@ section.profile-card-list
8 8 
         v-for="(profile, i) in loadedProfiles"
9 9 
         :style="{ 'z-index': 1000-i }"
10 10 
     )
11 
-        .card.randomize(
12 
-            :style="{ 'background-image': `url(${profile.avatar})`, 'top': `${randomize(10)}px`, 'right': `${randomize(20)}px`, 'transform': `rotate(${randomize(7)}deg)` }"
11 
+
12 
+        w-card.card.randomize(
13 
+            :image="`${profile.avatar}`"
14 
+            :style="{'top': `${randomize(10)}px`, 'right': `${randomize(20)}px`, 'transform': `rotate(${randomize(7)}deg)`}"
13 15 
         )
14 16 
             .card--content
15 17 
                 p(style="color: magenta;") profile: {{ profile.pid }}

+ 1
- 0
frontend/src/utils/mixins.js Просмотреть файл 

@@ -11,6 +11,7 @@ const pidMixin = {
11 11 
 const cardMixin = {
12 12 
     data: () => ({
13 13 
         cards: [],
14 
+        matches: [],
14 15 
         loading: true,
15 16 
     }),
16 17 
     watch: {

+ 26
- 6
frontend/src/views/HomeView.vue Просмотреть файл 

@@ -1,21 +1,25 @@
1 1 
 <template lang="pug">
2 
-main.view--home
3 
-    header
4 
-        h2 home - profile: {{ pid }}
5 
-
2 
+main.view--home(style="display:flex; flex-direction:column; gap: 40px; margin-top: 1em;")
3 
+    h2 Match Queue
6 4 
     article(v-if="cards.length && !loading")
7 5 
         ProfileCardList(:profiles="cards" :pid="pid" @reload="getCards")
8 6
9 7 
     p(v-else) Loading...
10 8
11 
-    MainNav(@show-sidebar="$emit('show-sidebar')")
9 
+    h2 Matches
10 
+    article(v-if="matches.length && !loading")
11 
+        ProfileCardList(:profiles="matches" :pid="pid" @reload="getCards")
12 
+
13 
+    p(v-else-if="matches.length===0") No matches.
14 
+    p(v-else) Loading...
15 
+
12 16 
 </template>
13 17
14 18 
 <script>
15 19 
 import ProfileCardList from '../components/ProfileCardList.vue'
16 20
17 21 
 import { Card } from '../entities'
18 
-import { fetchQueueByProfileId } from '../services'
22 
+import { fetchQueueByProfileId, fetchMembershipsByProfileId } from '../services'
19 23 
 import { mixins } from '../utils'
20 24
21 25 
 /** Callback used to format incoming into card */
 
@@ -33,6 +37,20 @@ const convertToCard = profile => {
33 37 
     })
34 38 
 }
35 39
40 
+const converGroupingToCard = grouping => {
41 
+    if (grouping.type !== 'grouping') {
42 
+        console.error(`Cannot convert ${grouping} to Card. Invalid entity.`)
43 
+    }
44 
+    if (!grouping.profile.isValid()) {
45 
+        console.warn(`Profile in ${grouping} is not a valid profile.`)
46 
+    }
47 
+    return new Card({
48 
+        pid: grouping.profile.profile_id,
49 
+        name: grouping.profile.user_name,
50 
+        avatar: grouping.profile.profile_media[0],
51 
+    })
52 
+}
53 
+
36 54 
 export default {
37 55 
     name: 'HomeView',
38 56 
     components: { ProfileCardList },
 
@@ -44,6 +62,8 @@ export default {
44 62 
             try {
45 63 
                 const queueList = await fetchQueueByProfileId(this.pid)
46 64 
                 this.cards = this._reformat(queueList, convertToCard)
65 
+                const matchList = await fetchMembershipsByProfileId(this.pid)
66 
+                this.matches = this._reformat(matchList, converGroupingToCard)
47 67 
             } catch (err) {
48 68 
                 console.error(err)
49 69 
             }

Редактирование Предпросмотр
Загрузка…
Отмена
Сохранить