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

ui: Offers page update

Browse Source
2024-05-20_merge
gerlofvanek 9 months ago
parent e49ffbfdf7
commit 00c8af6853
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. 65
      basicswap/templates/offers.html

65
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,9 +654,14 @@ 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">
<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> <option value="any" {% if filters.coin_to==-1 %} selected{% endif %}>Filter Bids</option>
{% for c in coins_from %} {% 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> <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>
@ -665,15 +669,21 @@ const chart = new Chart(ctx, {
</select> </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">
<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> <option value="any" {% if filters.coin_from==-1 %} selected{% endif %}>Filter Offers</option>
{% for c in coins %} {% 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> <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>
@ -681,6 +691,8 @@ const chart = new Chart(ctx, {
</select> </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">
@ -1069,7 +1082,7 @@ const chart = new Chart(ctx, {
<p class="text-sm font-heading dark:text-white">Page: {{ filters.page_no }}</p> <p class="text-sm font-heading dark:text-white">Page: {{ filters.page_no }}</p>
</div> </div>
</div> </div>
{% if offers_count > 10 %} {% if offers_count > 20 %}
<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"> <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> <span>Next</span>
@ -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