ui: Dynamic offers tables + various updates.

basicswap/js_server.py

@@ -229,11 +229,14 @@ def js_offers(self, url_split, post_string, is_json, sent=False) -> bytes:
             'amount_to': ci_to.format_amount((o.amount_from * o.rate) // ci_from.COIN()),
             'rate': ci_to.format_amount(o.rate),
             'min_bid_amount': ci_from.format_amount(o.min_bid_amount),
+            'is_expired': o.expire_at <= swap_client.getTime(),
+            'is_own_offer': o.was_sent,
+            'amount_variable': o.amount_negotiable,
+            'rate_variable': o.rate_negotiable
         }
         if with_extra_info:
             offer_data['amount_negotiable'] = o.amount_negotiable
             offer_data['rate_negotiable'] = o.rate_negotiable
-
             if o.swap_type == SwapTypes.XMR_SWAP:
                 _, xmr_offer = swap_client.getXmrOffer(o.offer_id)
                 offer_data['lock_time_1'] = xmr_offer.lock_time_1

basicswap/templates/header.html

@@ -7,6 +7,7 @@
   <meta http-equiv="refresh" content="{{ refresh }}">
   {% endif %}
   <script src="/static/js/libs/chart.js"></script>
+  <script src="/static/js/libs/chartjs-adapter-date-fns.bundle.min.js"></script>
   <link type="text/css" media="all" href="/static/css/libs/flowbite.min.css" rel="stylesheet" />
   <link type="text/css" media="all" href="/static/css/libs/tailwind.min.css" rel="stylesheet">
   <link type="text/css" media="all" href="/static/css/style.css" rel="stylesheet">
@@ -91,6 +92,8 @@ document.addEventListener('DOMContentLoaded', function() {
     const shutdownButtons = document.querySelectorAll('.shutdown-button');
     const shutdownModal = document.getElementById('shutdownModal');
     const closeModalButton = document.getElementById('closeShutdownModal');
+    const confirmShutdownButton = document.getElementById('confirmShutdown');
+    const shutdownWarning = document.getElementById('shutdownWarning');
 
     function updateShutdownButtons() {
         const activeSwaps = parseInt(shutdownButtons[0].getAttribute('data-active-swaps') || '0');
@@ -99,7 +102,7 @@ document.addEventListener('DOMContentLoaded', function() {
             if (activeSwaps > 0) {
                 button.classList.add('shutdown-disabled');
                 button.setAttribute('data-disabled', 'true');
-                button.setAttribute('title', 'Cannot shutdown while swaps are in progress');
+                button.setAttribute('title', 'Caution: Swaps in progress');
             } else {
                 button.classList.remove('shutdown-disabled');
                 button.removeAttribute('data-disabled');
@@ -109,6 +112,14 @@ document.addEventListener('DOMContentLoaded', function() {
     }
 
     function showShutdownModal() {
+        const activeSwaps = parseInt(shutdownButtons[0].getAttribute('data-active-swaps') || '0');
+        if (activeSwaps > 0) {
+            shutdownWarning.classList.remove('hidden');
+            confirmShutdownButton.textContent = 'Yes, Shut Down Anyway';
+        } else {
+            shutdownWarning.classList.add('hidden');
+            confirmShutdownButton.textContent = 'Yes, Shut Down';
+        }
         shutdownModal.classList.remove('hidden');
         document.body.style.overflow = 'hidden';
     }
@@ -120,15 +131,18 @@ document.addEventListener('DOMContentLoaded', function() {
 
     shutdownButtons.forEach(button => {
         button.addEventListener('click', function(e) {
-            if (this.hasAttribute('data-disabled')) {
-                e.preventDefault();
-                showShutdownModal();
-            }
+            e.preventDefault();
+            showShutdownModal();
         });
     });
 
     closeModalButton.addEventListener('click', hideShutdownModal);
 
+    confirmShutdownButton.addEventListener('click', function() {
+        const shutdownToken = document.querySelector('.shutdown-button').getAttribute('href').split('/').pop();
+        window.location.href = '/shutdown/' + shutdownToken;
+    });
+
     shutdownModal.addEventListener('click', function(e) {
         if (e.target === this) {
             hideShutdownModal();
@@ -236,18 +250,23 @@ document.addEventListener('DOMContentLoaded', function() {
 </a>
 </div>
 </div> 
- <div id="shutdownModal" tabindex="-1" class="hidden fixed inset-0 z-50 overflow-y-auto overflow-x-hidden">
-    <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity"></div>
+
+<div id="shutdownModal" tabindex="-1" class="hidden fixed inset-0 z-50 overflow-y-auto overflow-x-hidden">
+    <div class="fixed inset-0 bg-black bg-opacity-60 transition-opacity"></div>
     <div class="flex items-center justify-center min-h-screen p-4 relative z-10">
         <div class="bg-white dark:bg-gray-500 rounded-lg shadow-xl max-w-md w-full">
             <div class="p-6 text-center">
                 <svg class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
                 </svg>
-                <h3 class="mb-5 text-lg font-normal text-gray-300 dark:text-gray-400">Cannot Shutdown</h3>
-                <p class="mb-5 text-sm text-gray-500 dark:text-gray-300">Shutdown is not possible while swaps are in progress. Please wait for all swaps to complete before shutting down.</p>
-                <button id="closeShutdownModal" type="button" class="text-white bg-red-600 hover:bg-red-800 focus:ring-0 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center">
-                    Close
+                <h3 class="mb-5 text-lg font-normal text-gray-700 dark:text-gray-300">Are you sure you want to shut down?</h3>
+                <p id="shutdownWarning" class="mb-5 text-sm text-red-500 font-bold hidden">Warning: Swaps are in progress. Please wait for swaps to complete before shutting down.</p>
+                <p class="mb-5 text-sm text-gray-500 dark:text-gray-300">This action will shut down the application. Are you sure you want to proceed?</p>
+                <button id="confirmShutdown" type="button" class="text-white bg-red-600 hover:bg-red-800 focus:ring-0 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center mr-2">
+                    Yes, Shut Down
+                </button>
+                <button id="closeShutdownModal" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-0 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">
+                    Cancel
                 </button>
             </div>
         </div>