From 358c44decc742aab88893732735c495de4d91aab Mon Sep 17 00:00:00 2001
From: ekzyis <ekzyis@ekzyis.com>
Date: Mon, 27 Nov 2023 18:06:56 +0100
Subject: [PATCH] Colorize status

---
 vue/src/components/OrderRow.vue     | 16 ++++++++++++----
 vue/src/components/UserInvoices.vue |  6 ++++--
 vue/src/index.css                   |  9 +++++++++
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/vue/src/components/OrderRow.vue b/vue/src/components/OrderRow.vue
index 410b06b..41d495f 100644
--- a/vue/src/components/OrderRow.vue
+++ b/vue/src/components/OrderRow.vue
@@ -1,9 +1,10 @@
 <template>
-  <tr :class="className">
+  <tr>
     <td v-if="order.MarketId"><router-link :to="/market/ + order.MarketId">{{ order.MarketId }}</router-link></td>
-    <td>{{ order.side }} {{ order.quantity }} {{ order.ShareDescription }} @ {{ order.price }} sats</td>
+    <td :class="descClassName">{{ order.side }} {{ order.quantity }} {{ order.ShareDescription }} @ {{ order.price }} sats
+    </td>
     <td :title="order.CreatedAt" class="hidden-sm">{{ ago(new Date(order.CreatedAt)) }}</td>
-    <td class="font-mono">{{ order.Status }}</td>
+    <td :class="'font-mono ' + statusClassName">{{ order.Status }}</td>
   </tr>
 </template>
 
@@ -15,8 +16,15 @@ const props = defineProps(['order'])
 
 const order = ref(props.order)
 
-const className = computed(() => {
+const descClassName = computed(() => {
   return order.value.side === 'BUY' ? 'success' : 'error'
 })
 
+const statusClassName = computed(() => {
+  const status = order.value.Status
+  if (status === 'PAID') return 'success'
+  if (status === 'WAITING') return 'info'
+  return 'error'
+})
+
 </script>
diff --git a/vue/src/components/UserInvoices.vue b/vue/src/components/UserInvoices.vue
index 7554146..b6dbf4f 100644
--- a/vue/src/components/UserInvoices.vue
+++ b/vue/src/components/UserInvoices.vue
@@ -9,11 +9,11 @@
         <th>details</th>
       </thead>
       <tbody>
-        <tr v-for="i in  invoices " :key="i.id">
+        <tr v-for="i in  invoices" :key="i.id">
           <td>{{ i.Msats / 1000 }}</td>
           <td :title="i.CreatedAt">{{ ago(new Date(i.CreatedAt)) }}</td>
           <td :title="i.ExpiresAt" class="hidden-sm">{{ ago(new Date(i.ExpiresAt)) }}</td>
-          <td class="font-mono">{{ i.Status }}</td>
+          <td :class="'font-mono ' + classFromStatus(i.Status)">{{ i.Status }}</td>
           <td>
             <router-link :to="/invoice/ + i.Id">open</router-link>
           </td>
@@ -27,6 +27,8 @@
 import { ref } from 'vue'
 import ago from 's-ago'
 
+const classFromStatus = (status) => status === 'PAID' ? 'success' : 'error'
+
 const invoices = ref(null)
 
 const url = '/api/invoices'
diff --git a/vue/src/index.css b/vue/src/index.css
index d3d3e38..f0763c0 100644
--- a/vue/src/index.css
+++ b/vue/src/index.css
@@ -67,6 +67,15 @@ a.selected {
   color: white;
 }
 
+.info {
+  background-color: #f9db6d3d;
+  color: rgba(245, 198, 57, 0.78);
+}
+.info:hover {
+  background-color: rgba(245, 198, 57, 0.78);
+  color: white;
+}
+
 .text-muted {
   opacity: 0.67
 }
\ No newline at end of file