From b88a240ec1d34955d4b325fb77ffc687afe18b36 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sun, 26 Feb 2023 14:14:32 +0100
Subject: [PATCH] =?UTF-8?q?feature:=20like=20count=20historii=20dy=C5=BCur?=
 =?UTF-8?q?nych?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../JournalView/JournalDispatchersList.vue    | 26 ++++++++++++++++---
 .../interfaces/api/DispatchersAPIData.ts      |  5 ++--
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/components/JournalView/JournalDispatchersList.vue b/src/components/JournalView/JournalDispatchersList.vue
index 2b63c99..c3e3209 100644
--- a/src/components/JournalView/JournalDispatchersList.vue
+++ b/src/components/JournalView/JournalDispatchersList.vue
@@ -29,6 +29,10 @@
           <b class="text--primary">{{ item.dispatcherName }}</b> &bull; <b>{{ item.stationName }}</b>
           <span class="text--grayed">&nbsp;#{{ item.stationHash }}&nbsp;</span>
           <span class="region-badge" :class="item.region">PL1</span>
+          <span class="like-count" v-if="item.dispatcherRate">
+            <img :src="getIcon('like')" alt="like icon" />
+            {{ item.dispatcherRate }}
+          </span>
         </span>
 
         <span class="item-time">
@@ -55,6 +59,7 @@ import { defineComponent, PropType } from 'vue';
 import dateMixin from '../../mixins/dateMixin';
 import { DispatcherHistory } from '../../scripts/interfaces/api/DispatchersAPIData';
 import styleMixin from '../../mixins/styleMixin';
+import imageMixin from '../../mixins/imageMixin';
 
 export default defineComponent({
   props: {
@@ -64,7 +69,7 @@ export default defineComponent({
     },
   },
 
-  mixins: [dateMixin, styleMixin],
+  mixins: [dateMixin, styleMixin, imageMixin],
 
   computed: {
     computedDispatcherHistory() {
@@ -101,6 +106,7 @@ export default defineComponent({
 @import '../../styles/responsive.scss';
 @import '../../styles/badge.scss';
 @import '../../styles/JournalSection.scss';
+@import '../../styles/variables.scss';
 
 li.sticky {
   position: sticky;
@@ -114,7 +120,7 @@ li.sticky {
   flex-wrap: wrap;
   text-align: left;
 
-  gap: 0.25em;
+  gap: 0.5em 1em;
 
   line-height: 1.7em;
   padding: 0.75em;
@@ -134,11 +140,11 @@ li.sticky {
 
 .item-general {
   display: flex;
+  justify-content: center;
   align-items: center;
   gap: 0.25em;
   flex-wrap: wrap;
 
-
   .level-badge {
     margin-right: 0.25em;
   }
@@ -160,4 +166,18 @@ li.sticky {
     font-weight: bold;
   }
 }
+
+.like-count {
+  display: flex;
+  align-items: center;
+  gap: 0.25em;
+  font-size: 1.2em;
+  color: $accentCol;
+}
+
+@include smallScreen {
+  .journal_item {
+    flex-direction: column;
+  }
+}
 </style>
diff --git a/src/scripts/interfaces/api/DispatchersAPIData.ts b/src/scripts/interfaces/api/DispatchersAPIData.ts
index 434f754..26e39ca 100644
--- a/src/scripts/interfaces/api/DispatchersAPIData.ts
+++ b/src/scripts/interfaces/api/DispatchersAPIData.ts
@@ -1,10 +1,11 @@
 export interface DispatcherHistory {
   id: string;
-  
+
   currentDuration: number;
   dispatcherId: number;
   dispatcherName: string;
   dispatcherLevel: number | null;
+  dispatcherRate: number;
   dispatcherIsSupporter: boolean;
   isOnline: boolean;
   lastOnlineTimestamp: number;
@@ -13,4 +14,4 @@ export interface DispatcherHistory {
   stationName: string;
   timestampFrom: number;
   timestampTo?: number;
-}
\ No newline at end of file
+}