From ccae7876d9ebb1a35629617f5692b236ee754f64 Mon Sep 17 00:00:00 2001
From: Vlad Stan <stan.v.vlad@gmail.com>
Date: Fri, 8 Jul 2022 13:50:09 +0300
Subject: [PATCH] feat: show status as badge

---
 .../satspay/templates/satspay/index.html      | 51 ++++++-------------
 1 file changed, 15 insertions(+), 36 deletions(-)

diff --git a/lnbits/extensions/satspay/templates/satspay/index.html b/lnbits/extensions/satspay/templates/satspay/index.html
index 2c60dc9b0..464b5107b 100644
--- a/lnbits/extensions/satspay/templates/satspay/index.html
+++ b/lnbits/extensions/satspay/templates/satspay/index.html
@@ -18,7 +18,6 @@
             <h5 class="text-subtitle1 q-my-none">Charges</h5>
           </div>
 
-
           <div class="col q-pr-lg">
             <q-input
               borderless
@@ -91,41 +90,6 @@
                 </q-btn>
               </q-td>
               <q-td auto-width>
-                <q-btn
-                  v-if="props.row.time_elapsed && props.row.balance < props.row.amount"
-                  unelevated
-                  flat
-                  dense
-                  size="xs"
-                  icon="error"
-                  :color="($q.dark.isActive) ? 'red' : 'red'"
-                >
-                  <q-tooltip> Time elapsed </q-tooltip>
-                </q-btn>
-
-                <q-btn
-                  v-else-if="props.row.balance >= props.row.amount"
-                  unelevated
-                  flat
-                  dense
-                  size="xs"
-                  icon="check"
-                  :color="($q.dark.isActive) ? 'green' : 'green'"
-                >
-                  <q-tooltip> PAID! </q-tooltip>
-                </q-btn>
-
-                <q-btn
-                  v-else
-                  unelevated
-                  dense
-                  size="xs"
-                  icon="cached"
-                  flat
-                  :color="($q.dark.isActive) ? 'blue' : 'blue'"
-                >
-                  <q-tooltip> Processing </q-tooltip>
-                </q-btn>
                 <q-btn
                   flat
                   dense
@@ -136,6 +100,21 @@
                 >
                   <q-tooltip> Delete charge </q-tooltip>
                 </q-btn>
+                <q-badge
+                  v-if="props.row.time_elapsed && props.row.balance < props.row.amount"
+                  color="red"
+                >
+                  expired
+                </q-badge>
+
+                <q-badge
+                  v-else-if="props.row.balance >= props.row.amount"
+                  color="green"
+                >
+                  paid
+                </q-badge>
+
+                <q-badge v-else color="blue"> waiting </q-badge>
               </q-td>
               <q-td
                 v-for="col in props.cols"