seasharp
/
basicswap_miserver
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #70 from gerlofvanek/dev

Browse Source 
ui: Offers page update
2024-05-20_merge
Gerlof van Ek 9 months ago committed by GitHub
parent 3b73894ce8 00c8af6853
commit d83555c25f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 82 additions and 41 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 123
      basicswap/templates/offers.html

123
basicswap/templates/offers.html
Unescape View File

@ -643,8 +643,7 @@ const chart = new Chart(ctx, {
} }
}); });
</script> </script>
{% endif %} {% endif %}
<section> <section>
<div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden"> <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden">
<div class="pb-6 border-coolGray-100"> <div class="pb-6 border-coolGray-100">
@ -655,32 +654,45 @@ const chart = new Chart(ctx, {
<div class="rounded-b-md"> <div class="rounded-b-md">
<div class="w-full md:w-0/12"> <div class="w-full md:w-0/12">
<div class="flex flex-wrap justify-center -m-1.5"> <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 }} <div class="w-full md:w-auto p-1.5 hover-container">
<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"> <div class="flex">
<option value="any" {% if filters.coin_to==-1 %} selected{% endif %}>Filter Bids</option> <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>
{% for c in coins_from %} </button>
<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> <div class="relative">
{% endfor %} {{ input_arrow_down_svg | safe }}
</select> <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> </div>
<div class="flex items-center"> <div class="flex items-center">
<div class="w-full md:w-auto p-1.5"> <div class="w-full md:w-auto p-1.5">
<p class="text-sm font-heading">{{ arrow_right_svg | safe }} <p class="text-sm font-heading">{{ arrow_right_svg | safe }}</p>
</p>
</div> </div>
</div> </div>
<div class="w-full md:w-auto p-1.5">
<div class="relative">{{ input_arrow_down_svg | safe }} <div class="w-full md:w-auto p-1.5 hover-container">
<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"> <div class="flex">
<option value="any" {% if filters.coin_from==-1 %} selected{% endif %}>Filter Offers</option> <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>
{% for c in coins %} </button>
<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> <div class="relative">
{% endfor %} {{ input_arrow_down_svg | safe }}
</select> <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> </div>
<div class="flex items-center"> <div class="flex items-center">
<div class="w-full md:w-auto p-1.5"> <div class="w-full md:w-auto p-1.5">
<p class="text-sm font-heading bold">Sort By:</p> <p class="text-sm font-heading bold">Sort By:</p>
@ -734,7 +746,7 @@ const chart = new Chart(ctx, {
{% endif %} {% endif %}
<div class="w-full md:w-auto p-1.5"> <div class="w-full md:w-auto p-1.5">
<div class="relative"> <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> <span>Clear Filters</span>
</button> </button>
</div> </div>
@ -750,6 +762,7 @@ const chart = new Chart(ctx, {
</div> </div>
</div> </div>
</div> </div>
<div class="container mt-5 mx-auto"> <div class="container mt-5 mx-auto">
<div class="pt-0 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl"> <div class="pt-0 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
<div class="px-0"> <div class="px-0">
@ -1055,29 +1068,29 @@ const chart = new Chart(ctx, {
</div> </div>
<div class="rounded-b-md"> <div class="rounded-b-md">
<div class="w-full md:w-0/12"> <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"> <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 %} {% if filters.page_no > 1 %}
<div class="w-full md:w-auto p-1.5"> <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"> <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 }} {{ page_back_svg | safe }}
<span>Previous</span> <span>Previous</span>
</button> </button>
</div> </div>
{% endif %} {% endif %}
<div class="flex items-center"> <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"> <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"> <p class="text-sm font-heading dark:text-white">Page: {{ filters.page_no }}</p>
<span>Next</span>
{{ page_forwards_svg | safe }}
</button>
</div> </div>
{% endif %}
</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> </div>
</div> </div>
@ -1258,6 +1271,34 @@ function sortTable(columnIndex) {
rows.forEach(row => table.querySelector('tbody').appendChild(row)); 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> </script>
{% include 'footer.html' %} {% include 'footer.html' %}
</body> </body>

Write Preview
Loading…
Cancel
Save