From 00c8af68530f8f7a9733cdaf7be1ad8fe267e4cb Mon Sep 17 00:00:00 2001
From: gerlofvanek <gerlof@particl.io>
Date: Sat, 16 Mar 2024 22:54:26 +0100
Subject: [PATCH] ui: Offers page update

---
 basicswap/templates/offers.html | 127 +++++++++++++++++++++-----------
 1 file changed, 84 insertions(+), 43 deletions(-)

diff --git a/basicswap/templates/offers.html b/basicswap/templates/offers.html
index 4914491..3958683 100644
--- a/basicswap/templates/offers.html
+++ b/basicswap/templates/offers.html
@@ -643,8 +643,7 @@ const chart = new Chart(ctx, {
   }
 });
 </script>
-  {% endif %}
-
+{% endif %}
   <section>
     <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden">
       <div class="pb-6 border-coolGray-100">
@@ -655,32 +654,45 @@ const chart = new Chart(ctx, {
                 <div class="rounded-b-md">
                   <div class="w-full md:w-0/12">
                     <div class="flex flex-wrap justify-center -m-1.5">
-                      <div class="w-full md:w-auto p-1.5">
-                        <div class="relative">{{ input_arrow_down_svg | safe }}
-                          <select name="coin_to" class="hover:border-blue-500 bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0">
-                            <option value="any" {% if filters.coin_to==-1 %} selected{% endif %}>Filter Bids</option>
-                            {% for c in coins_from %}
-                            <option class="text-sm" value="{{ c[0] }}" {% if filters.coin_to==c[0] %} selected{% endif %} data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}-20.png">{{ c[1] }}</option>
-                            {% endfor %}
-                          </select>
+
+                      <div class="w-full md:w-auto p-1.5 hover-container">
+                        <div class="flex">
+                          <button id="coin_to_button" class="bg-gray-50 text-gray-900 appearance-none w-10 dark:bg-gray-500 dark:text-white border-l border-t border-b border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-50 text-sm rounded-l-lg flex items-center" disabled>
+                          </button>
+                          <div class="relative">
+                            {{ input_arrow_down_svg | safe }}
+                            <select name="coin_to" id="coin_to" class="bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-50 text-sm rounded-none rounded-r-lg outline-none block w-full p-2.5 focus:ring-0">
+                              <option value="any" {% if filters.coin_to==-1 %} selected{% endif %}>Filter Bids</option>
+                              {% for c in coins_from %}
+                              <option class="text-sm" value="{{ c[0] }}" {% if filters.coin_to==c[0] %} selected{% endif %} data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}-20.png">{{ c[1] }}</option>
+                              {% endfor %}
+                            </select>
+                          </div>
                         </div>
                       </div>
+
                       <div class="flex items-center">
                         <div class="w-full md:w-auto p-1.5">
-                          <p class="text-sm font-heading">{{ arrow_right_svg | safe }}
-                          </p>
+                          <p class="text-sm font-heading">{{ arrow_right_svg | safe }}</p>
                         </div>
                       </div>
-                      <div class="w-full md:w-auto p-1.5">
-                        <div class="relative">{{ input_arrow_down_svg | safe }}
-                          <select name="coin_from" class="hover:border-blue-500 bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0">
-                            <option value="any" {% if filters.coin_from==-1 %} selected{% endif %}>Filter Offers</option>
-                            {% for c in coins %}
-                            <option class="text-sm" value="{{ c[0] }}" {% if filters.coin_from==c[0] %} selected{% endif %} data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}-20.png">{{ c[1] }}</option>
-                            {% endfor %}
-                          </select>
+
+                      <div class="w-full md:w-auto p-1.5 hover-container">
+                        <div class="flex">
+                          <button id="coin_from_button" class="bg-gray-50 text-gray-900 appearance-none w-10 dark:bg-gray-500 dark:text-white border-l border-t border-b border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-50 text-sm rounded-l-lg flex items-center" disabled>
+                          </button>
+                          <div class="relative">
+                            {{ input_arrow_down_svg | safe }}
+                            <select name="coin_from" id="coin_from" class="bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-50 text-sm rounded-none rounded-r-lg outline-none block w-full p-2.5 focus:ring-0">
+                              <option value="any" {% if filters.coin_from==-1 %} selected{% endif %}>Filter Offers</option>
+                              {% for c in coins %}
+                              <option class="text-sm" value="{{ c[0] }}" {% if filters.coin_from==c[0] %} selected{% endif %} data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}-20.png">{{ c[1] }}</option>
+                              {% endfor %}
+                            </select>
+                          </div>
                         </div>
                       </div>
+
                       <div class="flex items-center">
                         <div class="w-full md:w-auto p-1.5">
                           <p class="text-sm font-heading bold">Sort By:</p>
@@ -734,7 +746,7 @@ const chart = new Chart(ctx, {
                       {% endif %}
                       <div class="w-full md:w-auto p-1.5">
                         <div class="relative">
-                          <button type="submit" name='clearfilters' value="Clear Filters" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm dark:text-white dark:bg-gray-500 bg-coolGray-200 hover:bg-green-600 hover:border-green-600 rounded-lg transition duration-200 border border-coolGray-200 dark:border-gray-400 rounded-md shadow-button focus:ring-0 focus:outline-none">
+                          <button type="submit" name='clearfilters' value="Clear Filters" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm hover:text-white dark:text-white dark:bg-gray-500 bg-coolGray-200 hover:bg-green-600 hover:border-green-600 rounded-lg transition duration-200 border border-coolGray-200 dark:border-gray-400 rounded-md shadow-button focus:ring-0 focus:outline-none">
                             <span>Clear Filters</span>
                           </button>
                         </div>
@@ -750,6 +762,7 @@ const chart = new Chart(ctx, {
                   </div>
                 </div>
               </div>
+
               <div class="container mt-5 mx-auto">
                 <div class="pt-0 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
                   <div class="px-0">
@@ -1055,29 +1068,29 @@ const chart = new Chart(ctx, {
                   </div>
                   <div class="rounded-b-md">
                       <div class="w-full md:w-0/12">
-                          <div class="flex flex-wrap justify-end pt-6 pr-6 border-t border-gray-100 dark:border-gray-400">
-                              {% if filters.page_no > 1 %}
-                              <div class="w-full md:w-auto p-1.5">
-                                  <button type="submit" name='pageback' value="Previous" class="inline-flex items-center h-9 py-1 px-4 text-xs text-blue-50 font-semibold bg-blue-500 hover:bg-green-600 rounded-lg transition duration-200 focus:ring-0 focus:outline-none">
-                                      {{ page_back_svg | safe }}
-                                      <span>Previous</span>
-                                  </button>
-                              </div>
-                              {% endif %}
-                              <div class="flex items-center">
-                                  <div class="w-full md:w-auto p-1.5">
-                                      <p class="text-sm font-heading dark:text-white">Page: {{ filters.page_no }}</p>
-                                  </div>
-                              </div>
-                              {% if offers_count > 10 %}
-                              <div class="w-full md:w-auto p-1.5">
-                                      <button type="submit" name='pageforwards' value="Next" class="inline-flex items-center h-9 py-1 px-4 text-xs text-blue-50 font-semibold bg-blue-500 hover:bg-green-600 rounded-lg transition duration-200 focus:ring-0 focus:outline-none">
-                                          <span>Next</span>
-                                          {{ page_forwards_svg | safe }}
-                                      </button>
-                              </div>
-                              {% endif %}
+                        <div class="flex flex-wrap justify-end pt-6 pr-6 border-t border-gray-100 dark:border-gray-400">
+                          {% if filters.page_no > 1 %}
+                          <div class="w-full md:w-auto p-1.5">
+                              <button type="submit" name='pageback' value="Previous" class="inline-flex items-center h-9 py-1 px-4 text-xs text-blue-50 font-semibold bg-blue-500 hover:bg-green-600 rounded-lg transition duration-200 focus:ring-0 focus:outline-none">
+                                  {{ page_back_svg | safe }}
+                                  <span>Previous</span>
+                              </button>
                           </div>
+                          {% endif %}
+                          <div class="flex items-center">
+                              <div class="w-full md:w-auto p-1.5">
+                                  <p class="text-sm font-heading dark:text-white">Page: {{ filters.page_no }}</p>
+                              </div>
+                          </div>
+                          {% if offers_count > 20 %}
+                          <div class="w-full md:w-auto p-1.5">
+                                  <button type="submit" name='pageforwards' value="Next" class="inline-flex items-center h-9 py-1 px-4 text-xs text-blue-50 font-semibold bg-blue-500 hover:bg-green-600 rounded-lg transition duration-200 focus:ring-0 focus:outline-none">
+                                      <span>Next</span>
+                                      {{ page_forwards_svg | safe }}
+                                  </button>
+                          </div>
+                          {% endif %}
+                        </div>
                       </div>
                   </div>
                   </div>
@@ -1258,6 +1271,34 @@ function sortTable(columnIndex) {
 
     rows.forEach(row => table.querySelector('tbody').appendChild(row));
 }
+document.addEventListener('DOMContentLoaded', function() {
+  const coinToSelect = document.getElementById('coin_to');
+  const coinFromSelect = document.getElementById('coin_from');
+  const coinToButton = document.getElementById('coin_to_button');
+  const coinFromButton = document.getElementById('coin_from_button');
+
+  function updateSelectedImage(selectElement, buttonElement) {
+    const selectedOption = selectElement.options[selectElement.selectedIndex];
+    const imageURL = selectedOption.getAttribute('data-image');
+    if (imageURL) {
+      buttonElement.style.backgroundImage = `url('${imageURL}')`;
+    } else {
+      buttonElement.style.backgroundImage = 'none';
+    }
+  }
+
+  coinToSelect.addEventListener('change', function() {
+    updateSelectedImage(coinToSelect, coinToButton);
+  });
+
+  coinFromSelect.addEventListener('change', function() {
+    updateSelectedImage(coinFromSelect, coinFromButton);
+  });
+
+  // Initialize selected images on page load
+  updateSelectedImage(coinToSelect, coinToButton);
+  updateSelectedImage(coinFromSelect, coinFromButton);
+});
 </script>
 {% include 'footer.html' %}
 </body>