mirror of
https://github.com/basicswap/basicswap.git
synced 2025-02-27 13:30:30 +00:00
JS/UI: Tooltips + Sorting table + Memory fix and new header. (#253)
* JS/UI: Tooltips + Sorting table + Memory fix and new header. * LINT * Light theme fix * JS: Global / standalone Tooltips. * Unminimized versions of tippy and popper js libs * Formatting / Cleanup
This commit is contained in:
parent
4ae97790aa
commit
713577d868
13 changed files with 6516 additions and 1543 deletions
|
@ -578,10 +578,8 @@ class HttpHandler(BaseHTTPRequestHandler):
|
|||
return page_offers(self, url_split, post_string, sent=True)
|
||||
if page == "bid":
|
||||
return page_bid(self, url_split, post_string)
|
||||
if page == "receivedbids":
|
||||
return page_bids(self, url_split, post_string, received=True)
|
||||
if page == "sentbids":
|
||||
return page_bids(self, url_split, post_string, sent=True)
|
||||
if page == "bids":
|
||||
return page_bids(self, url_split, post_string)
|
||||
if page == "availablebids":
|
||||
return page_bids(self, url_split, post_string, available=True)
|
||||
if page == "watched":
|
||||
|
|
|
@ -1,153 +1,157 @@
|
|||
/* General Styles */
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.monospace {
|
||||
font-family: monospace;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.floatright {
|
||||
position: fixed;
|
||||
top: 1.25rem;
|
||||
right: 1.25rem;
|
||||
z-index: 9999;
|
||||
position: fixed;
|
||||
top: 1.25rem;
|
||||
right: 1.25rem;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
/* Table Styles */
|
||||
.padded_row td {
|
||||
padding-top: 1.5em;
|
||||
padding-top: 1.5em;
|
||||
}
|
||||
|
||||
/* Modal Styles */
|
||||
.modal-highest {
|
||||
z-index: 9999;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
/* Animation */
|
||||
#hide {
|
||||
-moz-animation: cssAnimation 0s ease-in 15s forwards;
|
||||
-webkit-animation: cssAnimation 0s ease-in 15s forwards;
|
||||
-o-animation: cssAnimation 0s ease-in 15s forwards;
|
||||
animation: cssAnimation 0s ease-in 15s forwards;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
-moz-animation: cssAnimation 0s ease-in 15s forwards;
|
||||
-webkit-animation: cssAnimation 0s ease-in 15s forwards;
|
||||
-o-animation: cssAnimation 0s ease-in 15s forwards;
|
||||
animation: cssAnimation 0s ease-in 15s forwards;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
@keyframes cssAnimation {
|
||||
to {
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
to {
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes cssAnimation {
|
||||
to {
|
||||
width: 0;
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
to {
|
||||
width: 0;
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom Select Styles */
|
||||
.custom-select .select {
|
||||
appearance: none;
|
||||
background-image: url('/static/images/other/coin.png');
|
||||
background-position: 10px center;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
appearance: none;
|
||||
background-image: url('/static/images/other/coin.png');
|
||||
background-position: 10px center;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.custom-select select::-webkit-scrollbar {
|
||||
width: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.custom-select .select option {
|
||||
padding-left: 0;
|
||||
text-indent: 0;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 50%;
|
||||
padding-left: 0;
|
||||
text-indent: 0;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 50%;
|
||||
}
|
||||
|
||||
.custom-select .select option.no-space {
|
||||
padding-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.custom-select .select option[data-image] {
|
||||
background-image: url('');
|
||||
background-image: url('');
|
||||
}
|
||||
|
||||
.custom-select .select-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 10px;
|
||||
transform: translateY(-50%);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 10px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.custom-select .select-image {
|
||||
display: none;
|
||||
margin-top: 10px;
|
||||
display: none;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.custom-select .select:focus + .select-dropdown .select-image {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Blur and Overlay Styles */
|
||||
.blurred {
|
||||
filter: blur(3px);
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
filter: blur(3px);
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.error-overlay.non-blurred {
|
||||
filter: none;
|
||||
pointer-events: auto;
|
||||
user-select: auto;
|
||||
filter: none;
|
||||
pointer-events: auto;
|
||||
user-select: auto;
|
||||
}
|
||||
|
||||
/* Form Element Styles */
|
||||
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||
select:disabled,
|
||||
input:disabled,
|
||||
textarea:disabled {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
@media screen and (-webkit-min-device-pixel-ratio: 0) {
|
||||
select:disabled,
|
||||
input:disabled,
|
||||
textarea:disabled {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
border: 1px solid red !important;
|
||||
border: 1px solid red !important;
|
||||
}
|
||||
|
||||
/* Active Container Styles */
|
||||
.active-container {
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.active-container::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border: 1px solid rgb(77, 132, 240);
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border: 1px solid rgb(77, 132, 240);
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Center Spin Animation */
|
||||
.center-spin {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Hover Container Styles */
|
||||
|
@ -155,215 +159,209 @@
|
|||
.hover-container:hover #coin_to,
|
||||
.hover-container:hover #coin_from_button,
|
||||
.hover-container:hover #coin_from {
|
||||
border-color: #3b82f6;
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
#coin_to_button, #coin_from_button {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 20px 20px;
|
||||
#coin_to_button,
|
||||
#coin_from_button {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
|
||||
/* Input-like Container Styles */
|
||||
.input-like-container {
|
||||
max-width: 100%;
|
||||
background-color: #ffffff;
|
||||
width: 360px;
|
||||
padding: 1rem;
|
||||
color: #374151;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
outline: none;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-all;
|
||||
height: auto;
|
||||
min-height: 90px;
|
||||
max-height: 150px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
max-width: 100%;
|
||||
background-color: #ffffff;
|
||||
width: 360px;
|
||||
padding: 1rem;
|
||||
color: #374151;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
outline: none;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-all;
|
||||
height: auto;
|
||||
min-height: 90px;
|
||||
max-height: 150px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.input-like-container.dark {
|
||||
background-color: #374151;
|
||||
color: #ffffff;
|
||||
background-color: #374151;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.input-like-container.copying {
|
||||
width: inherit;
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
/* QR Code Styles */
|
||||
.qrcode {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 10px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.qrcode-border {
|
||||
border: 2px solid;
|
||||
background-color: #ffffff;
|
||||
border-radius: 0px;
|
||||
border: 2px solid;
|
||||
background-color: #ffffff;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.qrcode img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 0px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
#showQR {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
height: 25px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.qrcode-container {
|
||||
margin-top: 25px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
/* Disabled Element Styles */
|
||||
select.select-disabled,
|
||||
.disabled-input-enabled,
|
||||
select.disabled-select-enabled {
|
||||
opacity: 0.40 !important;
|
||||
opacity: 0.40 !important;
|
||||
}
|
||||
|
||||
/* Shutdown Modal Styles */
|
||||
#shutdownModal {
|
||||
z-index: 50;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
#shutdownModal > div:first-child {
|
||||
z-index: 40;
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
#shutdownModal > div:last-child {
|
||||
z-index: 50;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
#shutdownModal > div {
|
||||
transition: opacity 0.3s ease-out;
|
||||
transition: opacity 0.3s ease-out;
|
||||
}
|
||||
|
||||
#shutdownModal.hidden > div {
|
||||
opacity: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#shutdownModal:not(.hidden) > div {
|
||||
opacity: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.shutdown-button {
|
||||
transition: all 0.3s ease;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.shutdown-button.shutdown-disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
color: #a0aec0;
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
color: #a0aec0;
|
||||
}
|
||||
|
||||
.shutdown-button.shutdown-disabled:hover {
|
||||
background-color: #4a5568;
|
||||
background-color: #4a5568;
|
||||
}
|
||||
|
||||
.shutdown-button.shutdown-disabled svg {
|
||||
opacity: 0.5;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
|
||||
/* Loading line animation */
|
||||
/* Loading Line Animation */
|
||||
.loading-line {
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #ccc;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #ccc;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.loading-line::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to right, transparent, #007bff, transparent);
|
||||
animation: loading 1.5s infinite;
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to right, transparent, #007bff, transparent);
|
||||
animation: loading 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
/* Hide the loading line once data is loaded */
|
||||
|
||||
.usd-value:not(.loading) .loading-line,
|
||||
.profit-loss:not(.loading) .loading-line {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.resolution-button {
|
||||
/* Resolution Button Styles */
|
||||
.resolution-button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #4B5563; /* gray-600 */
|
||||
font-size: 0.875rem; /* text-sm */
|
||||
font-weight: 500; /* font-medium */
|
||||
color: #4B5563;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
transition: all 0.2s;
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.resolution-button:hover {
|
||||
color: #1F2937; /* gray-800 */
|
||||
}
|
||||
.resolution-button:hover {
|
||||
color: #1F2937;
|
||||
}
|
||||
|
||||
.resolution-button:focus {
|
||||
outline: 2px solid #3B82F6; /* blue-500 */
|
||||
}
|
||||
.resolution-button:focus {
|
||||
outline: 2px solid #3B82F6;
|
||||
}
|
||||
|
||||
.resolution-button.active {
|
||||
color: #3B82F6; /* blue-500 */
|
||||
outline: 2px solid #3B82F6; /* blue-500 */
|
||||
}
|
||||
.resolution-button.active {
|
||||
color: #3B82F6;
|
||||
outline: 2px solid #3B82F6;
|
||||
}
|
||||
|
||||
.dark .resolution-button {
|
||||
color: #9CA3AF; /* gray-400 */
|
||||
}
|
||||
.dark .resolution-button {
|
||||
color: #9CA3AF;
|
||||
}
|
||||
|
||||
.dark .resolution-button:hover {
|
||||
color: #F3F4F6; /* gray-100 */
|
||||
}
|
||||
.dark .resolution-button:hover {
|
||||
color: #F3F4F6;
|
||||
}
|
||||
|
||||
.dark .resolution-button.active {
|
||||
color: #60A5FA; /* blue-400 */
|
||||
outline-color: #60A5FA; /* blue-400 */
|
||||
.dark .resolution-button.active {
|
||||
color: #60A5FA;
|
||||
outline-color: #60A5FA;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#toggle-volume.active {
|
||||
@apply bg-green-500 hover:bg-green-600 focus:ring-green-300;
|
||||
}
|
||||
#toggle-auto-refresh[data-enabled="true"] {
|
||||
@apply bg-green-500 hover:bg-green-600 focus:ring-green-300;
|
||||
}
|
||||
|
||||
[data-popper-placement] {
|
||||
will-change: transform;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
/* Toggle Button Styles */
|
||||
#toggle-volume.active {
|
||||
@apply bg-green-500 hover:bg-green-600 focus:ring-green-300;
|
||||
}
|
||||
|
||||
#toggle-auto-refresh[data-enabled="true"] {
|
||||
@apply bg-green-500 hover:bg-green-600 focus:ring-green-300;
|
||||
}
|
||||
|
|
1825
basicswap/static/js/libs/popper.js
Normal file
1825
basicswap/static/js/libs/popper.js
Normal file
File diff suppressed because it is too large
Load diff
2516
basicswap/static/js/libs/tippy.js
Normal file
2516
basicswap/static/js/libs/tippy.js
Normal file
File diff suppressed because it is too large
Load diff
|
@ -1,3 +1,4 @@
|
|||
// EVENT MANAGER
|
||||
const EventManager = {
|
||||
listeners: new Map(),
|
||||
|
||||
|
@ -72,12 +73,11 @@ let currentSortDirection = 'desc';
|
|||
let filterTimeout = null;
|
||||
|
||||
// CONFIGURATION CONSTANTS
|
||||
|
||||
// Time Constants
|
||||
// TIME CONSTANTS
|
||||
const CACHE_DURATION = 10 * 60 * 1000;
|
||||
|
||||
// Application Constants
|
||||
const itemsPerPage = 100;
|
||||
// APP CONSTANTS
|
||||
const itemsPerPage = 50;
|
||||
const isSentOffers = window.offersTableConfig.isSentOffers;
|
||||
|
||||
const offersConfig = {
|
||||
|
@ -142,6 +142,7 @@ const totalPagesSpan = document.getElementById('totalPages');
|
|||
const lastRefreshTimeSpan = document.getElementById('lastRefreshTime');
|
||||
const newEntriesCountSpan = document.getElementById('newEntriesCount');
|
||||
|
||||
|
||||
// MANAGER OBJECTS
|
||||
const WebSocketManager = {
|
||||
ws: null,
|
||||
|
@ -248,7 +249,6 @@ const WebSocketManager = {
|
|||
this.connectionState.lastConnectAttempt = Date.now();
|
||||
|
||||
try {
|
||||
const config = getWebSocketConfig();
|
||||
const wsPort = config.port || window.ws_port || '11700';
|
||||
|
||||
if (!wsPort) {
|
||||
|
@ -349,7 +349,6 @@ const WebSocketManager = {
|
|||
|
||||
requestAnimationFrame(() => {
|
||||
updateOffersTable();
|
||||
updateJsonView();
|
||||
updatePaginationInfo();
|
||||
});
|
||||
|
||||
|
@ -641,14 +640,13 @@ const CacheManager = {
|
|||
|
||||
window.CacheManager = CacheManager;
|
||||
|
||||
// Identity cache management
|
||||
// IDENTITY CACHE MANAGEMENT
|
||||
const IdentityManager = {
|
||||
cache: new Map(),
|
||||
pendingRequests: new Map(),
|
||||
retryDelay: 2000,
|
||||
maxRetries: 3,
|
||||
cacheTimeout: 5 * 60 * 1000, // 5 minutes
|
||||
|
||||
cacheTimeout: 5 * 60 * 1000,
|
||||
async getIdentityData(address) {
|
||||
|
||||
const cachedData = this.getCachedIdentity(address);
|
||||
|
@ -849,22 +847,13 @@ function continueInitialization() {
|
|||
listingLabel.textContent = isSentOffers ? 'Total Listings: ' : 'Network Listings: ';
|
||||
}
|
||||
//console.log('Initialization completed');
|
||||
|
||||
}
|
||||
|
||||
function initializeTooltips() {
|
||||
if (typeof Tooltip === 'undefined') {
|
||||
console.warn('Tooltip is not defined. Make sure the required library is loaded.');
|
||||
return;
|
||||
if (window.TooltipManager) {
|
||||
window.TooltipManager.initializeTooltips();
|
||||
}
|
||||
|
||||
const tooltipElements = document.querySelectorAll('[data-tooltip-target]');
|
||||
tooltipElements.forEach((el) => {
|
||||
const tooltipId = el.getAttribute('data-tooltip-target');
|
||||
const tooltipElement = document.getElementById(tooltipId);
|
||||
if (tooltipElement) {
|
||||
new Tooltip(tooltipElement, el);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// DATA PROCESSING FUNCTIONS
|
||||
|
@ -880,114 +869,105 @@ function getValidOffers() {
|
|||
}
|
||||
|
||||
function filterAndSortData() {
|
||||
//console.log('[Debug] Starting filter with data length:', originalJsonData.length);
|
||||
const formData = new FormData(filterForm);
|
||||
const filters = Object.fromEntries(formData);
|
||||
|
||||
const formData = new FormData(filterForm);
|
||||
const filters = Object.fromEntries(formData);
|
||||
//console.log('[Debug] Active filters:', filters);
|
||||
localStorage.setItem('offersTableSettings', JSON.stringify({
|
||||
coin_to: filters.coin_to,
|
||||
coin_from: filters.coin_from,
|
||||
status: filters.status,
|
||||
sent_from: filters.sent_from,
|
||||
sortColumn: currentSortColumn,
|
||||
sortDirection: currentSortDirection
|
||||
}));
|
||||
|
||||
if (filters.coin_to !== 'any') {
|
||||
filters.coin_to = coinIdToName[filters.coin_to] || filters.coin_to;
|
||||
}
|
||||
if (filters.coin_from !== 'any') {
|
||||
filters.coin_from = coinIdToName[filters.coin_from] || filters.coin_from;
|
||||
}
|
||||
if (filters.coin_to !== 'any') {
|
||||
filters.coin_to = coinIdToName[filters.coin_to] || filters.coin_to;
|
||||
}
|
||||
if (filters.coin_from !== 'any') {
|
||||
filters.coin_from = coinIdToName[filters.coin_from] || filters.coin_from;
|
||||
}
|
||||
|
||||
let filteredData = [...originalJsonData];
|
||||
let filteredData = [...originalJsonData];
|
||||
|
||||
const sentFromFilter = filters.sent_from || 'any';
|
||||
const sentFromFilter = filters.sent_from || 'any';
|
||||
filteredData = filteredData.filter(offer => {
|
||||
if (sentFromFilter === 'public') return offer.is_public;
|
||||
if (sentFromFilter === 'private') return !offer.is_public;
|
||||
return true;
|
||||
});
|
||||
|
||||
filteredData = filteredData.filter(offer => {
|
||||
if (sentFromFilter === 'public') {
|
||||
return offer.is_public;
|
||||
} else if (sentFromFilter === 'private') {
|
||||
return !offer.is_public;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
filteredData = filteredData.filter(offer => {
|
||||
if (!isSentOffers && isOfferExpired(offer)) return false;
|
||||
|
||||
filteredData = filteredData.filter(offer => {
|
||||
if (!isSentOffers && isOfferExpired(offer)) {
|
||||
return false;
|
||||
}
|
||||
const coinFrom = (offer.coin_from || '').toLowerCase();
|
||||
const coinTo = (offer.coin_to || '').toLowerCase();
|
||||
|
||||
const coinFrom = (offer.coin_from || '').toLowerCase();
|
||||
const coinTo = (offer.coin_to || '').toLowerCase();
|
||||
if (filters.coin_to !== 'any' && !coinMatches(coinTo, filters.coin_to)) return false;
|
||||
if (filters.coin_from !== 'any' && !coinMatches(coinFrom, filters.coin_from)) return false;
|
||||
|
||||
if (filters.coin_to !== 'any') {
|
||||
if (!coinMatches(coinTo, filters.coin_to)) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
if (isSentOffers && filters.status && filters.status !== 'any') {
|
||||
const isExpired = offer.expire_at <= Math.floor(Date.now() / 1000);
|
||||
const isRevoked = Boolean(offer.is_revoked);
|
||||
|
||||
if (filters.coin_from !== 'any') {
|
||||
if (!coinMatches(coinFrom, filters.coin_from)) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
switch (filters.status) {
|
||||
case 'active': return !isExpired && !isRevoked;
|
||||
case 'expired': return isExpired && !isRevoked;
|
||||
case 'revoked': return isRevoked;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
if (isSentOffers && filters.status && filters.status !== 'any') {
|
||||
const currentTime = Math.floor(Date.now() / 1000);
|
||||
const isExpired = offer.expire_at <= currentTime;
|
||||
const isRevoked = Boolean(offer.is_revoked);
|
||||
if (currentSortColumn !== null) {
|
||||
const priceCache = new Map();
|
||||
const getPrice = coin => {
|
||||
if (priceCache.has(coin)) return priceCache.get(coin);
|
||||
const symbol = coin === 'Firo' || coin === 'Zcoin' ? 'zcoin' :
|
||||
coin === 'Bitcoin Cash' ? 'bitcoin-cash' :
|
||||
coin.includes('Particl') ? 'particl' :
|
||||
coin.toLowerCase();
|
||||
const price = latestPrices[symbol]?.usd || 0;
|
||||
priceCache.set(coin, price);
|
||||
return price;
|
||||
};
|
||||
|
||||
switch (filters.status) {
|
||||
case 'active':
|
||||
return !isExpired && !isRevoked;
|
||||
case 'expired':
|
||||
return isExpired && !isRevoked;
|
||||
case 'revoked':
|
||||
return isRevoked;
|
||||
default:
|
||||
return true;
|
||||
}
|
||||
}
|
||||
const calculateValue = offer => {
|
||||
const fromUSD = parseFloat(offer.amount_from) * getPrice(offer.coin_from);
|
||||
const toUSD = parseFloat(offer.amount_to) * getPrice(offer.coin_to);
|
||||
return (isSentOffers || offer.is_own_offer) ?
|
||||
((toUSD / fromUSD) - 1) * 100 :
|
||||
((fromUSD / toUSD) - 1) * 100;
|
||||
};
|
||||
|
||||
return true;
|
||||
});
|
||||
const sortValues = new Map();
|
||||
if (currentSortColumn === 5 || currentSortColumn === 6) {
|
||||
filteredData.forEach(offer => {
|
||||
sortValues.set(offer.offer_id, calculateValue(offer));
|
||||
});
|
||||
}
|
||||
|
||||
if (currentSortColumn !== null) {
|
||||
filteredData.sort((a, b) => {
|
||||
let comparison = 0;
|
||||
|
||||
switch(currentSortColumn) {
|
||||
case 0: // Time
|
||||
comparison = a.created_at - b.created_at;
|
||||
break;
|
||||
case 5: // Rate
|
||||
comparison = parseFloat(a.rate) - parseFloat(b.rate);
|
||||
break;
|
||||
case 6: // Market +/-
|
||||
const aFromSymbol = getCoinSymbolLowercase(a.coin_from);
|
||||
const aToSymbol = getCoinSymbolLowercase(a.coin_to);
|
||||
const bFromSymbol = getCoinSymbolLowercase(b.coin_from);
|
||||
const bToSymbol = getCoinSymbolLowercase(b.coin_to);
|
||||
|
||||
const aFromPrice = latestPrices[aFromSymbol]?.usd || 0;
|
||||
const aToPrice = latestPrices[aToSymbol]?.usd || 0;
|
||||
const bFromPrice = latestPrices[bFromSymbol]?.usd || 0;
|
||||
const bToPrice = latestPrices[bToSymbol]?.usd || 0;
|
||||
|
||||
const aMarketRate = aToPrice / aFromPrice;
|
||||
const bMarketRate = bToPrice / bFromPrice;
|
||||
|
||||
const aOfferedRate = parseFloat(a.rate);
|
||||
const bOfferedRate = parseFloat(b.rate);
|
||||
|
||||
const aPercentDiff = ((aOfferedRate - aMarketRate) / aMarketRate) * 100;
|
||||
const bPercentDiff = ((bOfferedRate - bMarketRate) / bMarketRate) * 100;
|
||||
|
||||
comparison = aPercentDiff - bPercentDiff;
|
||||
break;
|
||||
case 7: // Trade
|
||||
comparison = a.offer_id.localeCompare(b.offer_id);
|
||||
break;
|
||||
}
|
||||
return currentSortDirection === 'desc' ? -comparison : comparison;
|
||||
});
|
||||
}
|
||||
//console.log(`[Debug] Filtered data length: ${filteredData.length}`);
|
||||
return filteredData;
|
||||
filteredData.sort((a, b) => {
|
||||
let comparison;
|
||||
switch(currentSortColumn) {
|
||||
case 0: // Time
|
||||
comparison = a.created_at - b.created_at;
|
||||
break;
|
||||
case 5: // Rate
|
||||
case 6: // Market +/-
|
||||
comparison = sortValues.get(a.offer_id) - sortValues.get(b.offer_id);
|
||||
break;
|
||||
case 7: // Trade
|
||||
comparison = a.offer_id.localeCompare(b.offer_id);
|
||||
break;
|
||||
default:
|
||||
comparison = 0;
|
||||
}
|
||||
return currentSortDirection === 'desc' ? -comparison : comparison;
|
||||
});
|
||||
}
|
||||
|
||||
return filteredData;
|
||||
}
|
||||
|
||||
async function calculateProfitLoss(fromCoin, toCoin, fromAmount, toAmount, isOwnOffer) {
|
||||
|
@ -1191,7 +1171,6 @@ async function fetchOffers() {
|
|||
originalJsonData = [...jsonData];
|
||||
|
||||
await updateOffersTable();
|
||||
updateJsonView();
|
||||
updatePaginationInfo();
|
||||
|
||||
} catch (error) {
|
||||
|
@ -1280,10 +1259,6 @@ function updateRowTimes() {
|
|||
});
|
||||
}
|
||||
|
||||
function updateJsonView() {
|
||||
jsonContent.textContent = JSON.stringify(jsonData, null, 2);
|
||||
}
|
||||
|
||||
function updateLastRefreshTime() {
|
||||
if (lastRefreshTimeSpan) {
|
||||
lastRefreshTimeSpan.textContent = lastRefreshTime ? new Date(lastRefreshTime).toLocaleTimeString() : 'Never';
|
||||
|
@ -1428,28 +1403,26 @@ function updateClearFiltersButton() {
|
|||
}
|
||||
|
||||
function cleanupRow(row) {
|
||||
EventManager.removeAll(row);
|
||||
|
||||
const tooltips = row.querySelectorAll('[data-tooltip-target]');
|
||||
tooltips.forEach(tooltip => {
|
||||
const tooltipId = tooltip.getAttribute('data-tooltip-target');
|
||||
const tooltipElement = document.getElementById(tooltipId);
|
||||
if (tooltipElement) {
|
||||
tooltipElement.remove();
|
||||
const tooltipTriggers = row.querySelectorAll('[data-tooltip-trigger-id]');
|
||||
tooltipTriggers.forEach(trigger => {
|
||||
if (window.TooltipManager) {
|
||||
window.TooltipManager.destroy(trigger);
|
||||
}
|
||||
});
|
||||
EventManager.removeAll(row);
|
||||
}
|
||||
|
||||
|
||||
function cleanupTable() {
|
||||
EventManager.clearAll();
|
||||
|
||||
if (offersBody) {
|
||||
const existingRows = offersBody.querySelectorAll('tr');
|
||||
existingRows.forEach(row => {
|
||||
cleanupRow(row);
|
||||
});
|
||||
existingRows.forEach(row => cleanupRow(row));
|
||||
offersBody.innerHTML = '';
|
||||
}
|
||||
if (window.TooltipManager) {
|
||||
window.TooltipManager.cleanup();
|
||||
}
|
||||
}
|
||||
|
||||
function handleNoOffersScenario() {
|
||||
|
@ -1490,6 +1463,10 @@ function handleNoOffersScenario() {
|
|||
|
||||
async function updateOffersTable() {
|
||||
try {
|
||||
if (window.TooltipManager) {
|
||||
window.TooltipManager.cleanup();
|
||||
}
|
||||
|
||||
const PRICES_CACHE_KEY = 'prices_coingecko';
|
||||
const cachedPrices = CacheManager.get(PRICES_CACHE_KEY);
|
||||
latestPrices = cachedPrices?.value || getEmptyPriceData();
|
||||
|
@ -1510,16 +1487,13 @@ async function updateOffersTable() {
|
|||
|
||||
const BATCH_SIZE = 5;
|
||||
const identities = [];
|
||||
|
||||
for (let i = 0; i < itemsToDisplay.length; i += BATCH_SIZE) {
|
||||
const batch = itemsToDisplay.slice(i, i + BATCH_SIZE);
|
||||
const batchPromises = batch.map(offer =>
|
||||
offer.addr_from ? IdentityManager.getIdentityData(offer.addr_from) : Promise.resolve(null)
|
||||
);
|
||||
|
||||
const batchResults = await Promise.all(batchPromises);
|
||||
identities.push(...batchResults);
|
||||
|
||||
if (i + BATCH_SIZE < itemsToDisplay.length) {
|
||||
await new Promise(resolve => setTimeout(resolve, 100));
|
||||
}
|
||||
|
@ -1533,13 +1507,12 @@ async function updateOffersTable() {
|
|||
const totalPages = Math.max(1, Math.ceil(validOffers.length / itemsPerPage));
|
||||
currentPage = Math.min(currentPage, totalPages);
|
||||
|
||||
const fragment = document.createDocumentFragment();
|
||||
|
||||
const existingRows = offersBody.querySelectorAll('tr');
|
||||
existingRows.forEach(row => {
|
||||
cleanupRow(row);
|
||||
});
|
||||
|
||||
const fragment = document.createDocumentFragment();
|
||||
itemsToDisplay.forEach((offer, index) => {
|
||||
const identity = identities[index];
|
||||
const row = createTableRow(offer, identity);
|
||||
|
@ -1551,11 +1524,21 @@ async function updateOffersTable() {
|
|||
offersBody.textContent = '';
|
||||
offersBody.appendChild(fragment);
|
||||
|
||||
const tooltipTriggers = offersBody.querySelectorAll('[data-tooltip-target]');
|
||||
tooltipTriggers.forEach(trigger => {
|
||||
const targetId = trigger.getAttribute('data-tooltip-target');
|
||||
const tooltipContent = document.getElementById(targetId);
|
||||
|
||||
if (tooltipContent) {
|
||||
window.TooltipManager.create(trigger, tooltipContent.innerHTML, {
|
||||
placement: trigger.getAttribute('data-tooltip-placement') || 'top'
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
initializeTooltips();
|
||||
updateRowTimes();
|
||||
updatePaginationControls(totalPages);
|
||||
|
||||
if (tableRateModule?.initializeTable) {
|
||||
tableRateModule.initializeTable();
|
||||
}
|
||||
|
@ -1571,7 +1554,6 @@ async function updateOffersTable() {
|
|||
try {
|
||||
const cachedOffers = CacheManager.get('offers_cached');
|
||||
if (cachedOffers?.value) {
|
||||
console.log('Recovering with cached offers data');
|
||||
jsonData = cachedOffers.value;
|
||||
updateOffersTable();
|
||||
}
|
||||
|
@ -1650,65 +1632,65 @@ function getIdentityInfo(address, identity) {
|
|||
}
|
||||
|
||||
function createTableRow(offer, identity = null) {
|
||||
const row = document.createElement('tr');
|
||||
const uniqueId = `${offer.offer_id}_${offer.created_at}`;
|
||||
const row = document.createElement('tr');
|
||||
const uniqueId = `${offer.offer_id}_${offer.created_at}`;
|
||||
|
||||
row.className = 'relative opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600';
|
||||
row.setAttribute('data-offer-id', uniqueId);
|
||||
row.className = 'relative opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600';
|
||||
row.setAttribute('data-offer-id', uniqueId);
|
||||
|
||||
const {
|
||||
coin_from: coinFrom,
|
||||
coin_to: coinTo,
|
||||
created_at: createdAt,
|
||||
expire_at: expireAt,
|
||||
amount_from: amountFrom,
|
||||
amount_to: amountTo,
|
||||
is_own_offer: isOwnOffer,
|
||||
is_revoked: isRevoked,
|
||||
is_public: isPublic
|
||||
} = offer;
|
||||
const {
|
||||
coin_from: coinFrom,
|
||||
coin_to: coinTo,
|
||||
created_at: createdAt,
|
||||
expire_at: expireAt,
|
||||
amount_from: amountFrom,
|
||||
amount_to: amountTo,
|
||||
is_own_offer: isOwnOffer,
|
||||
is_revoked: isRevoked,
|
||||
is_public: isPublic
|
||||
} = offer;
|
||||
|
||||
const coinFromSymbol = coinNameToSymbol[coinFrom] || coinFrom.toLowerCase();
|
||||
const coinToSymbol = coinNameToSymbol[coinTo] || coinTo.toLowerCase();
|
||||
const coinFromDisplay = getDisplayName(coinFrom);
|
||||
const coinToDisplay = getDisplayName(coinTo);
|
||||
const postedTime = formatTime(createdAt, true);
|
||||
const expiresIn = formatTime(expireAt);
|
||||
const coinFromSymbol = coinNameToSymbol[coinFrom] || coinFrom.toLowerCase();
|
||||
const coinToSymbol = coinNameToSymbol[coinTo] || coinTo.toLowerCase();
|
||||
const coinFromDisplay = getDisplayName(coinFrom);
|
||||
const coinToDisplay = getDisplayName(coinTo);
|
||||
const postedTime = formatTime(createdAt, true);
|
||||
const expiresIn = formatTime(expireAt);
|
||||
|
||||
const currentTime = Math.floor(Date.now() / 1000);
|
||||
const isActuallyExpired = currentTime > expireAt;
|
||||
const fromAmount = parseFloat(amountFrom) || 0;
|
||||
const toAmount = parseFloat(amountTo) || 0;
|
||||
const currentTime = Math.floor(Date.now() / 1000);
|
||||
const isActuallyExpired = currentTime > expireAt;
|
||||
const fromAmount = parseFloat(amountFrom) || 0;
|
||||
const toAmount = parseFloat(amountTo) || 0;
|
||||
|
||||
row.innerHTML = `
|
||||
${!isPublic ? createPrivateIndicator() : '<td class="w-0 p-0 m-0"></td>'}
|
||||
${createTimeColumn(offer, postedTime, expiresIn)}
|
||||
${createDetailsColumn(offer, identity)}
|
||||
${createTakerAmountColumn(offer, coinTo, coinFrom)}
|
||||
${createSwapColumn(offer, coinFromDisplay, coinToDisplay, coinFromSymbol, coinToSymbol)}
|
||||
${createOrderbookColumn(offer, coinFrom, coinTo)}
|
||||
${createRateColumn(offer, coinFrom, coinTo)}
|
||||
${createPercentageColumn(offer)}
|
||||
${createActionColumn(offer, isActuallyExpired)}
|
||||
${createTooltips(
|
||||
offer,
|
||||
isOwnOffer,
|
||||
coinFrom,
|
||||
coinTo,
|
||||
fromAmount,
|
||||
toAmount,
|
||||
postedTime,
|
||||
expiresIn,
|
||||
isActuallyExpired,
|
||||
Boolean(isRevoked),
|
||||
identity
|
||||
)}
|
||||
`;
|
||||
row.innerHTML = `
|
||||
${!isPublic ? createPrivateIndicator() : '<td class="w-0 p-0 m-0"></td>'}
|
||||
${createTimeColumn(offer, postedTime, expiresIn)}
|
||||
${createDetailsColumn(offer, identity)}
|
||||
${createTakerAmountColumn(offer, coinTo, coinFrom)}
|
||||
${createSwapColumn(offer, coinFromDisplay, coinToDisplay, coinFromSymbol, coinToSymbol)}
|
||||
${createOrderbookColumn(offer, coinFrom, coinTo)}
|
||||
${createRateColumn(offer, coinFrom, coinTo)}
|
||||
${createPercentageColumn(offer)}
|
||||
${createActionColumn(offer, isActuallyExpired)}
|
||||
${createTooltips(
|
||||
offer,
|
||||
isOwnOffer,
|
||||
coinFrom,
|
||||
coinTo,
|
||||
fromAmount,
|
||||
toAmount,
|
||||
postedTime,
|
||||
expiresIn,
|
||||
isActuallyExpired,
|
||||
Boolean(isRevoked),
|
||||
identity
|
||||
)}
|
||||
`;
|
||||
|
||||
updateTooltipTargets(row, uniqueId);
|
||||
updateProfitLoss(row, coinFrom, coinTo, fromAmount, toAmount, isOwnOffer);
|
||||
updateTooltipTargets(row, uniqueId);
|
||||
updateProfitLoss(row, coinFrom, coinTo, fromAmount, toAmount, isOwnOffer);
|
||||
|
||||
return row;
|
||||
return row;
|
||||
}
|
||||
|
||||
function createPrivateIndicator() {
|
||||
|
@ -2090,7 +2072,7 @@ function createRecipientTooltip(uniqueId, identityInfo, identity, successRate, t
|
|||
` : ''}
|
||||
|
||||
${identity ? `
|
||||
<div class="border-t border-gray-400 pt-2 mt-2">
|
||||
<div class= pt-2 mt-2">
|
||||
<div class="text-white text-xs tracking-wide font-semibold mb-2">Swap History:</div>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div class="text-center p-2 bg-gray-500 rounded-md">
|
||||
|
@ -2299,7 +2281,6 @@ function applyFilters() {
|
|||
filterTimeout = setTimeout(() => {
|
||||
jsonData = filterAndSortData();
|
||||
updateOffersTable();
|
||||
updateJsonView();
|
||||
updatePaginationInfo();
|
||||
updateClearFiltersButton();
|
||||
filterTimeout = null;
|
||||
|
@ -2317,7 +2298,6 @@ function clearFilters() {
|
|||
const selectElements = filterForm.querySelectorAll('select');
|
||||
selectElements.forEach(select => {
|
||||
select.value = 'any';
|
||||
// Trigger change event
|
||||
const event = new Event('change', { bubbles: true });
|
||||
select.dispatchEvent(event);
|
||||
});
|
||||
|
@ -2331,7 +2311,6 @@ function clearFilters() {
|
|||
currentPage = 1;
|
||||
|
||||
updateOffersTable();
|
||||
updateJsonView();
|
||||
updateCoinFilterImages();
|
||||
updateClearFiltersButton();
|
||||
}
|
||||
|
@ -2421,7 +2400,7 @@ function isOfferExpired(offer) {
|
|||
const currentTime = Math.floor(Date.now() / 1000);
|
||||
const isExpired = offer.expire_at <= currentTime;
|
||||
if (isExpired) {
|
||||
console.log(`Offer ${offer.offer_id} is expired. Expire time: ${offer.expire_at}, Current time: ${currentTime}`);
|
||||
// console.log(`Offer ${offer.offer_id} is expired. Expire time: ${offer.expire_at}, Current time: ${currentTime}`);
|
||||
}
|
||||
return isExpired;
|
||||
}
|
||||
|
@ -2582,7 +2561,6 @@ if (refreshButton) {
|
|||
} else {
|
||||
throw new Error('Unable to fetch price data');
|
||||
}
|
||||
updateJsonView();
|
||||
updatePaginationInfo();
|
||||
lastRefreshTime = now;
|
||||
updateLastRefreshTime();
|
||||
|
@ -2653,29 +2631,50 @@ function handleTableSort(columnIndex, header) {
|
|||
currentSortDirection = 'desc';
|
||||
}
|
||||
|
||||
document.querySelectorAll('.sort-icon').forEach(icon => {
|
||||
icon.classList.remove('text-blue-500');
|
||||
icon.textContent = '↓';
|
||||
});
|
||||
|
||||
const sortIcon = document.getElementById(`sort-icon-${columnIndex}`);
|
||||
if (sortIcon) {
|
||||
sortIcon.textContent = currentSortDirection === 'asc' ? '↑' : '↓';
|
||||
sortIcon.classList.add('text-blue-500');
|
||||
}
|
||||
localStorage.setItem('offersTableSettings', JSON.stringify({
|
||||
coin_to: document.getElementById('coin_to').value,
|
||||
coin_from: document.getElementById('coin_from').value,
|
||||
status: document.getElementById('status')?.value || 'any',
|
||||
sent_from: document.getElementById('sent_from').value,
|
||||
sortColumn: currentSortColumn,
|
||||
sortDirection: currentSortDirection
|
||||
}));
|
||||
|
||||
document.querySelectorAll('th[data-sortable="true"]').forEach(th => {
|
||||
if (th === header) {
|
||||
th.classList.add('text-blue-500');
|
||||
const columnSpan = th.querySelector('span:not(.sort-icon)');
|
||||
const icon = th.querySelector('.sort-icon');
|
||||
const thisColumnIndex = parseInt(th.getAttribute('data-column-index'));
|
||||
|
||||
if (thisColumnIndex === columnIndex) {
|
||||
if (columnSpan) {
|
||||
columnSpan.classList.remove('text-gray-600', 'dark:text-gray-300');
|
||||
columnSpan.classList.add('text-blue-500', 'dark:text-blue-500');
|
||||
}
|
||||
if (icon) {
|
||||
icon.classList.remove('text-gray-600', 'dark:text-gray-400');
|
||||
icon.classList.add('text-blue-500', 'dark:text-blue-500');
|
||||
icon.textContent = currentSortDirection === 'asc' ? '↑' : '↓';
|
||||
}
|
||||
} else {
|
||||
th.classList.remove('text-blue-500');
|
||||
if (columnSpan) {
|
||||
columnSpan.classList.remove('text-blue-500', 'dark:text-blue-500');
|
||||
columnSpan.classList.add('text-gray-600', 'dark:text-gray-300');
|
||||
}
|
||||
if (icon) {
|
||||
icon.classList.remove('text-blue-500', 'dark:text-blue-500');
|
||||
icon.classList.add('text-gray-600', 'dark:text-gray-400');
|
||||
icon.textContent = '↓';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
localStorage.setItem('tableSortColumn', currentSortColumn);
|
||||
localStorage.setItem('tableSortDirection', currentSortDirection);
|
||||
|
||||
applyFilters();
|
||||
if (window.sortTimeout) {
|
||||
clearTimeout(window.sortTimeout);
|
||||
}
|
||||
|
||||
window.sortTimeout = setTimeout(() => {
|
||||
applyFilters();
|
||||
}, 100);
|
||||
}
|
||||
|
||||
// TIMER MANAGEMENT
|
||||
|
@ -2713,72 +2712,93 @@ const timerManager = {
|
|||
|
||||
// INITIALIZATION AND EVENT BINDING
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
console.log('DOM content loaded, initializing...');
|
||||
console.log('View type:', isSentOffers ? 'sent offers' : 'received offers');
|
||||
const saved = localStorage.getItem('offersTableSettings');
|
||||
if (saved) {
|
||||
const settings = JSON.parse(saved);
|
||||
|
||||
updateClearFiltersButton();
|
||||
initializeTableEvents();
|
||||
['coin_to', 'coin_from', 'status', 'sent_from'].forEach(id => {
|
||||
const element = document.getElementById(id);
|
||||
if (element && settings[id]) element.value = settings[id];
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
console.log('Starting WebSocket initialization...');
|
||||
WebSocketManager.initialize();
|
||||
}, 1000);
|
||||
|
||||
if (initializeTableRateModule()) {
|
||||
continueInitialization();
|
||||
} else {
|
||||
let retryCount = 0;
|
||||
const maxRetries = 5;
|
||||
const retryInterval = setInterval(() => {
|
||||
retryCount++;
|
||||
if (initializeTableRateModule()) {
|
||||
clearInterval(retryInterval);
|
||||
continueInitialization();
|
||||
} else if (retryCount >= maxRetries) {
|
||||
clearInterval(retryInterval);
|
||||
continueInitialization();
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
if (settings.sortColumn !== undefined) {
|
||||
currentSortColumn = settings.sortColumn;
|
||||
currentSortDirection = settings.sortDirection;
|
||||
|
||||
timerManager.addInterval(() => {
|
||||
if (WebSocketManager.isConnected()) {
|
||||
console.log('WebSocket Status: Connected');
|
||||
}
|
||||
}, 30000);
|
||||
|
||||
timerManager.addInterval(() => {
|
||||
CacheManager.cleanup();
|
||||
}, 300000);
|
||||
document.querySelectorAll('.sort-icon').forEach(icon => {
|
||||
icon.classList.remove('text-blue-500');
|
||||
icon.textContent = '↓';
|
||||
});
|
||||
|
||||
updateCoinFilterImages();
|
||||
fetchOffers().then(() => {
|
||||
applyFilters();
|
||||
}).catch(error => {
|
||||
console.error('Error fetching initial offers:', error);
|
||||
});
|
||||
const sortIcon = document.getElementById(`sort-icon-${currentSortColumn}`);
|
||||
if (sortIcon) {
|
||||
sortIcon.textContent = currentSortDirection === 'asc' ? '↑' : '↓';
|
||||
sortIcon.classList.add('text-blue-500');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const listingLabel = document.querySelector('span[data-listing-label]');
|
||||
if (listingLabel) {
|
||||
listingLabel.textContent = isSentOffers ? 'Total Listings: ' : 'Network Listings: ';
|
||||
}
|
||||
updateClearFiltersButton();
|
||||
initializeTableEvents();
|
||||
initializeTooltips();
|
||||
updateCoinFilterImages();
|
||||
|
||||
timerManager.addInterval(updateRowTimes, 900000);
|
||||
setTimeout(() => {
|
||||
WebSocketManager.initialize();
|
||||
}, 1000);
|
||||
|
||||
EventManager.add(document, 'visibilitychange', () => {
|
||||
if (!document.hidden) {
|
||||
console.log('Page became visible, checking WebSocket connection');
|
||||
if (!WebSocketManager.isConnected()) {
|
||||
WebSocketManager.connect();
|
||||
}
|
||||
}
|
||||
});
|
||||
if (initializeTableRateModule()) {
|
||||
continueInitialization();
|
||||
} else {
|
||||
let retryCount = 0;
|
||||
const maxRetries = 5;
|
||||
const retryInterval = setInterval(() => {
|
||||
retryCount++;
|
||||
if (initializeTableRateModule()) {
|
||||
clearInterval(retryInterval);
|
||||
continueInitialization();
|
||||
} else if (retryCount >= maxRetries) {
|
||||
clearInterval(retryInterval);
|
||||
continueInitialization();
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
EventManager.add(window, 'beforeunload', () => {
|
||||
cleanup();
|
||||
});
|
||||
timerManager.addInterval(() => {
|
||||
if (WebSocketManager.isConnected()) {
|
||||
console.log('🟢 WebSocket connection one established');
|
||||
}
|
||||
}, 30000);
|
||||
|
||||
console.log('Initialization completed');
|
||||
timerManager.addInterval(() => {
|
||||
CacheManager.cleanup();
|
||||
}, 300000);
|
||||
|
||||
timerManager.addInterval(updateRowTimes, 900000);
|
||||
|
||||
EventManager.add(document, 'visibilitychange', () => {
|
||||
if (!document.hidden) {
|
||||
if (!WebSocketManager.isConnected()) {
|
||||
WebSocketManager.connect();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
EventManager.add(window, 'beforeunload', () => {
|
||||
cleanup();
|
||||
});
|
||||
|
||||
updateCoinFilterImages();
|
||||
fetchOffers().then(() => {
|
||||
applyFilters();
|
||||
if (!isSentOffers) {
|
||||
return;
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('Error fetching initial offers:', error);
|
||||
});
|
||||
});
|
||||
|
||||
async function cleanup() {
|
||||
|
@ -2796,35 +2816,23 @@ async function cleanup() {
|
|||
console.error(`[Cleanup Error ${timeFromStart}ms] ${step}:`, error);
|
||||
this.errors.push({ step, error, time: timeFromStart });
|
||||
},
|
||||
summarize: function() {
|
||||
const totalTime = Date.now() - this.startTime;
|
||||
console.group('Cleanup Summary');
|
||||
console.log(`Total cleanup time: ${totalTime}ms`);
|
||||
console.log('Steps completed:', this.steps.length);
|
||||
console.log('Errors encountered:', this.errors.length);
|
||||
|
||||
if (this.steps.length > 0) {
|
||||
console.group('Steps Timeline');
|
||||
this.steps.forEach(({step, time}) => {
|
||||
console.log(`${time}ms - ${step}`);
|
||||
});
|
||||
console.groupEnd();
|
||||
}
|
||||
|
||||
if (this.errors.length > 0) {
|
||||
console.group('Errors');
|
||||
this.errors.forEach(({step, error, time}) => {
|
||||
console.log(`${time}ms - ${step}:`, error);
|
||||
});
|
||||
console.groupEnd();
|
||||
}
|
||||
console.groupEnd();
|
||||
summarizeLogs: function() {
|
||||
console.log('Cleanup Summary:');
|
||||
console.log(`Total cleanup time: ${Date.now() - this.startTime}ms`);
|
||||
console.log(`Steps completed: ${this.steps.length}`);
|
||||
console.log(`Errors encountered: ${this.errors.length}`);
|
||||
}
|
||||
};
|
||||
|
||||
try {
|
||||
debug.addStep('Starting cleanup process');
|
||||
|
||||
debug.addStep('Starting tooltip cleanup');
|
||||
if (window.TooltipManager) {
|
||||
window.TooltipManager.cleanup();
|
||||
}
|
||||
debug.addStep('Tooltip cleanup completed');
|
||||
|
||||
debug.addStep('Clearing timers');
|
||||
const timerCount = timerManager.intervals.length + timerManager.timeouts.length;
|
||||
timerManager.clearAll();
|
||||
|
@ -2863,16 +2871,9 @@ async function cleanup() {
|
|||
debug.addStep('Global state reset', globals);
|
||||
|
||||
debug.addStep('Clearing global references');
|
||||
if (window.WebSocketManager) {
|
||||
window.WebSocketManager = null;
|
||||
}
|
||||
if (window.tableRateModule) {
|
||||
window.tableRateModule = null;
|
||||
}
|
||||
debug.addStep('Global references cleared');
|
||||
|
||||
debug.addStep('Clearing DOM references');
|
||||
const elementRefs = [
|
||||
[
|
||||
'WebSocketManager',
|
||||
'tableRateModule',
|
||||
'offersBody',
|
||||
'filterForm',
|
||||
'prevPageButton',
|
||||
|
@ -2881,25 +2882,24 @@ async function cleanup() {
|
|||
'totalPagesSpan',
|
||||
'lastRefreshTimeSpan',
|
||||
'newEntriesCountSpan'
|
||||
];
|
||||
let clearedRefs = 0;
|
||||
elementRefs.forEach(ref => {
|
||||
].forEach(ref => {
|
||||
if (window[ref]) {
|
||||
window[ref] = null;
|
||||
clearedRefs++;
|
||||
}
|
||||
});
|
||||
debug.addStep('DOM references cleared', `Cleared ${clearedRefs} references`);
|
||||
debug.addStep('Global references cleared');
|
||||
|
||||
debug.addStep('Clearing tooltips');
|
||||
const tooltips = document.querySelectorAll('[role="tooltip"]');
|
||||
const tooltipCount = tooltips.length;
|
||||
tooltips.forEach(tooltip => tooltip.remove());
|
||||
debug.addStep('Tooltips cleared', `Removed ${tooltipCount} tooltips`);
|
||||
debug.addStep('Cleaning up tooltip containers');
|
||||
const tooltipContainers = document.querySelectorAll('.tooltip-container');
|
||||
tooltipContainers.forEach(container => {
|
||||
if (container && container.parentNode) {
|
||||
container.parentNode.removeChild(container);
|
||||
}
|
||||
});
|
||||
debug.addStep('Tooltip containers cleaned up');
|
||||
|
||||
debug.addStep('Clearing document/window events');
|
||||
const events = ['visibilitychange', 'beforeunload', 'scroll'];
|
||||
events.forEach(event => {
|
||||
['visibilitychange', 'beforeunload', 'scroll'].forEach(event => {
|
||||
document.removeEventListener(event, null);
|
||||
window.removeEventListener(event, null);
|
||||
});
|
||||
|
@ -2919,6 +2919,9 @@ async function cleanup() {
|
|||
|
||||
debug.addStep('Starting failsafe cleanup');
|
||||
try {
|
||||
if (window.TooltipManager) {
|
||||
window.TooltipManager.cleanup();
|
||||
}
|
||||
WebSocketManager.cleanup();
|
||||
EventManager.clearAll();
|
||||
timerManager.clearAll();
|
||||
|
@ -2931,21 +2934,10 @@ async function cleanup() {
|
|||
debug.addError('Critical failsafe cleanup', criticalError);
|
||||
}
|
||||
} finally {
|
||||
debug.addStep('Running final cleanups');
|
||||
if (document.body.classList.contains('optimize-scroll')) {
|
||||
document.body.classList.remove('optimize-scroll');
|
||||
}
|
||||
if (document.body.classList.contains('is-scrolling')) {
|
||||
document.body.classList.remove('is-scrolling');
|
||||
}
|
||||
const inlineStyles = document.querySelectorAll('style[data-dynamic]');
|
||||
inlineStyles.forEach(style => style.remove());
|
||||
debug.addStep('Final cleanups completed');
|
||||
|
||||
debug.summarize();
|
||||
debug.summarizeLogs();
|
||||
}
|
||||
}
|
||||
|
||||
window.cleanup = cleanup;
|
||||
|
||||
console.log('Offers Table Module fully initialized');
|
||||
//console.log('Offers Table Module fully initialized');
|
||||
|
|
|
@ -161,7 +161,7 @@ const api = {
|
|||
const cachedData = cache.get(cacheKey);
|
||||
|
||||
if (cachedData) {
|
||||
console.log('Using cached CoinGecko data');
|
||||
//console.log('Using cached CoinGecko data');
|
||||
return cachedData.value;
|
||||
}
|
||||
|
||||
|
@ -194,7 +194,7 @@ const api = {
|
|||
|
||||
if (typeof response !== 'object' || response === null) {
|
||||
if (fallbackData) {
|
||||
console.log('Using fallback data due to invalid response');
|
||||
//console.log('Using fallback data due to invalid response');
|
||||
return fallbackData;
|
||||
}
|
||||
throw new AppError('Invalid data structure received from CoinGecko');
|
||||
|
@ -202,7 +202,7 @@ const api = {
|
|||
|
||||
if (response.error || response.Error) {
|
||||
if (fallbackData) {
|
||||
console.log('Using fallback data due to API error');
|
||||
//console.log('Using fallback data due to API error');
|
||||
return fallbackData;
|
||||
}
|
||||
throw new AppError(response.error || response.Error);
|
||||
|
@ -229,7 +229,7 @@ const api = {
|
|||
|
||||
const cachedData = cache.get(cacheKey);
|
||||
if (cachedData) {
|
||||
console.log('Using expired cache data due to error');
|
||||
//console.log('Using expired cache data due to error');
|
||||
return cachedData.value;
|
||||
}
|
||||
|
||||
|
@ -382,7 +382,7 @@ const rateLimiter = {
|
|||
error.name === 'NetworkError') {
|
||||
const cachedData = cache.get(`coinData_${apiName}`);
|
||||
if (cachedData) {
|
||||
console.log('Using cached data due to request failure');
|
||||
//console.log('Using cached data due to request failure');
|
||||
return cachedData.value;
|
||||
}
|
||||
}
|
||||
|
@ -421,7 +421,7 @@ const cache = {
|
|||
localStorage.removeItem(key);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error parsing cache item:', error.message);
|
||||
//console.error('Error parsing cache item:', error.message);
|
||||
localStorage.removeItem(key);
|
||||
}
|
||||
return null;
|
||||
|
@ -912,7 +912,7 @@ const chartModule = {
|
|||
let data;
|
||||
if (cachedData && Object.keys(cachedData.value).length > 0) {
|
||||
data = cachedData.value;
|
||||
console.log(`Using cached data for ${coinSymbol}`);
|
||||
//console.log(`Using cached data for ${coinSymbol}`);
|
||||
} else {
|
||||
try {
|
||||
const allData = await api.fetchHistoricalDataXHR([coinSymbol]);
|
||||
|
@ -923,7 +923,7 @@ const chartModule = {
|
|||
cache.set(cacheKey, data, config.cacheTTL);
|
||||
} catch (error) {
|
||||
if (error.message.includes('429') && currentChartData.length > 0) {
|
||||
console.warn(`Rate limit hit for ${coinSymbol}, maintaining current chart`);
|
||||
//console.warn(`Rate limit hit for ${coinSymbol}, maintaining current chart`);
|
||||
return;
|
||||
}
|
||||
const expiredCache = localStorage.getItem(cacheKey);
|
||||
|
@ -931,7 +931,7 @@ const chartModule = {
|
|||
try {
|
||||
const parsedCache = JSON.parse(expiredCache);
|
||||
data = parsedCache.value;
|
||||
console.log(`Using expired cache data for ${coinSymbol}`);
|
||||
//console.log(`Using expired cache data for ${coinSymbol}`);
|
||||
} catch (cacheError) {
|
||||
throw error;
|
||||
}
|
||||
|
@ -1042,15 +1042,15 @@ const app = {
|
|||
minimumRefreshInterval: 60 * 1000, // 1 min
|
||||
|
||||
init: () => {
|
||||
console.log('Initializing app...');
|
||||
//console.log('Init');
|
||||
window.addEventListener('load', app.onLoad);
|
||||
app.loadLastRefreshedTime();
|
||||
app.updateAutoRefreshButton();
|
||||
console.log('App initialized');
|
||||
//console.log('App initialized');
|
||||
},
|
||||
|
||||
onLoad: async () => {
|
||||
console.log('App onLoad event triggered');
|
||||
//console.log('App onLoad event triggered');
|
||||
ui.showLoader();
|
||||
try {
|
||||
volumeToggle.init();
|
||||
|
@ -1061,7 +1061,7 @@ const app = {
|
|||
chartModule.showChartLoader();
|
||||
}
|
||||
|
||||
console.log('Loading all coin data...');
|
||||
//console.log('Loading all coin data...');
|
||||
await app.loadAllCoinData();
|
||||
|
||||
if (chartModule.chart) {
|
||||
|
@ -1087,7 +1087,7 @@ const app = {
|
|||
if (chartModule.chart) {
|
||||
chartModule.hideChartLoader();
|
||||
}
|
||||
console.log('App onLoad completed');
|
||||
//console.log('App onLoad completed');
|
||||
}
|
||||
},
|
||||
loadAllCoinData: async () => {
|
||||
|
@ -1192,7 +1192,7 @@ setupEventListeners: () => {
|
|||
},
|
||||
|
||||
initAutoRefresh: () => {
|
||||
console.log('Initializing auto-refresh...');
|
||||
//console.log('Initializing auto-refresh...');
|
||||
const toggleAutoRefreshButton = document.getElementById('toggle-auto-refresh');
|
||||
if (toggleAutoRefreshButton) {
|
||||
toggleAutoRefreshButton.addEventListener('click', app.toggleAutoRefresh);
|
||||
|
@ -1208,7 +1208,7 @@ setupEventListeners: () => {
|
|||
},
|
||||
|
||||
scheduleNextRefresh: () => {
|
||||
console.log('Scheduling next refresh...');
|
||||
//console.log('Scheduling next refresh...');
|
||||
if (app.autoRefreshInterval) {
|
||||
clearTimeout(app.autoRefreshInterval);
|
||||
}
|
||||
|
@ -1274,7 +1274,7 @@ setupEventListeners: () => {
|
|||
return;
|
||||
}
|
||||
|
||||
console.log('Starting refresh of all data...');
|
||||
//console.log('Starting refresh of all data...');
|
||||
app.isRefreshing = true;
|
||||
ui.showLoader();
|
||||
chartModule.showChartLoader();
|
||||
|
@ -1381,7 +1381,7 @@ setupEventListeners: () => {
|
|||
},
|
||||
|
||||
updateNextRefreshTime: () => {
|
||||
console.log('Updating next refresh time display');
|
||||
//console.log('Updating next refresh time display');
|
||||
const nextRefreshSpan = document.getElementById('next-refresh-time');
|
||||
const labelElement = document.getElementById('next-refresh-label');
|
||||
const valueElement = document.getElementById('next-refresh-value');
|
||||
|
@ -1417,7 +1417,7 @@ setupEventListeners: () => {
|
|||
},
|
||||
|
||||
updateAutoRefreshButton: () => {
|
||||
console.log('Updating auto-refresh button state');
|
||||
//console.log('Updating auto-refresh button state');
|
||||
const button = document.getElementById('toggle-auto-refresh');
|
||||
if (button) {
|
||||
if (app.isAutoRefreshEnabled) {
|
||||
|
@ -1462,7 +1462,7 @@ setupEventListeners: () => {
|
|||
},
|
||||
|
||||
loadLastRefreshedTime: () => {
|
||||
console.log('Loading last refreshed time from storage');
|
||||
//console.log('Loading last refreshed time from storage');
|
||||
const storedTime = localStorage.getItem('lastRefreshedTime');
|
||||
if (storedTime) {
|
||||
app.lastRefreshedTime = new Date(parseInt(storedTime));
|
||||
|
@ -1471,7 +1471,7 @@ setupEventListeners: () => {
|
|||
},
|
||||
|
||||
updateBTCPrice: async () => {
|
||||
console.log('Updating BTC price...');
|
||||
//console.log('Updating BTC price...');
|
||||
try {
|
||||
const priceData = await api.fetchCoinGeckoDataXHR();
|
||||
|
||||
|
|
|
@ -1,309 +1,306 @@
|
|||
(function(window) {
|
||||
'use strict';
|
||||
class TooltipManager {
|
||||
constructor() {
|
||||
this.activeTooltips = new Map();
|
||||
this.sizeCheckIntervals = new Map();
|
||||
this.setupStyles();
|
||||
this.setupCleanupEvents();
|
||||
}
|
||||
|
||||
const tooltipContainer = document.createElement('div');
|
||||
tooltipContainer.className = 'tooltip-container';
|
||||
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
[role="tooltip"] {
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
pointer-events: auto;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
static initialize() {
|
||||
if (!window.TooltipManager) {
|
||||
window.TooltipManager = new TooltipManager();
|
||||
}
|
||||
return window.TooltipManager;
|
||||
}
|
||||
|
||||
create(element, content, options = {}) {
|
||||
if (!element) return null;
|
||||
|
||||
.tooltip-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
}
|
||||
`;
|
||||
this.destroy(element);
|
||||
|
||||
function ensureContainerExists() {
|
||||
if (!document.body.contains(tooltipContainer)) {
|
||||
document.body.appendChild(tooltipContainer);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function rafThrottle(callback) {
|
||||
let requestId = null;
|
||||
let lastArgs = null;
|
||||
|
||||
const later = (context) => {
|
||||
requestId = null;
|
||||
callback.apply(context, lastArgs);
|
||||
};
|
||||
|
||||
return function(...args) {
|
||||
lastArgs = args;
|
||||
if (requestId === null) {
|
||||
requestId = requestAnimationFrame(() => later(this));
|
||||
const checkSize = () => {
|
||||
const rect = element.getBoundingClientRect();
|
||||
if (rect.width && rect.height) {
|
||||
clearInterval(this.sizeCheckIntervals.get(element));
|
||||
this.sizeCheckIntervals.delete(element);
|
||||
this.createTooltip(element, content, options, rect);
|
||||
}
|
||||
};
|
||||
|
||||
this.sizeCheckIntervals.set(element, setInterval(checkSize, 50));
|
||||
checkSize();
|
||||
return null;
|
||||
}
|
||||
|
||||
function positionElement(targetEl, triggerEl, placement = 'top', offsetDistance = 8) {
|
||||
const triggerRect = triggerEl.getBoundingClientRect();
|
||||
const targetRect = targetEl.getBoundingClientRect();
|
||||
let top, left;
|
||||
createTooltip(element, content, options, rect) {
|
||||
const targetId = element.getAttribute('data-tooltip-target');
|
||||
let bgClass = 'bg-gray-400';
|
||||
let arrowColor = 'rgb(156 163 175)';
|
||||
|
||||
switch (placement) {
|
||||
case 'top':
|
||||
top = triggerRect.top - targetRect.height - offsetDistance;
|
||||
left = triggerRect.left + (triggerRect.width - targetRect.width) / 2;
|
||||
break;
|
||||
case 'bottom':
|
||||
top = triggerRect.bottom + offsetDistance;
|
||||
left = triggerRect.left + (triggerRect.width - targetRect.width) / 2;
|
||||
break;
|
||||
case 'left':
|
||||
top = triggerRect.top + (triggerRect.height - targetRect.height) / 2;
|
||||
left = triggerRect.left - targetRect.width - offsetDistance;
|
||||
break;
|
||||
case 'right':
|
||||
top = triggerRect.top + (triggerRect.height - targetRect.height) / 2;
|
||||
left = triggerRect.right + offsetDistance;
|
||||
break;
|
||||
}
|
||||
|
||||
const viewport = {
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight
|
||||
};
|
||||
|
||||
if (left < 0) left = 0;
|
||||
if (top < 0) top = 0;
|
||||
if (left + targetRect.width > viewport.width)
|
||||
left = viewport.width - targetRect.width;
|
||||
if (top + targetRect.height > viewport.height)
|
||||
top = viewport.height - targetRect.height;
|
||||
|
||||
targetEl.style.transform = `translate(${Math.round(left)}px, ${Math.round(top)}px)`;
|
||||
}
|
||||
|
||||
const tooltips = new WeakMap();
|
||||
|
||||
class Tooltip {
|
||||
constructor(targetEl, triggerEl, options = {}) {
|
||||
ensureContainerExists();
|
||||
|
||||
this._targetEl = targetEl;
|
||||
this._triggerEl = triggerEl;
|
||||
this._options = {
|
||||
placement: options.placement || 'top',
|
||||
triggerType: options.triggerType || 'hover',
|
||||
offset: options.offset || 8,
|
||||
onShow: options.onShow || function() {},
|
||||
onHide: options.onHide || function() {}
|
||||
};
|
||||
this._visible = false;
|
||||
this._initialized = false;
|
||||
this._hideTimeout = null;
|
||||
this._showTimeout = null;
|
||||
|
||||
if (this._targetEl.parentNode !== tooltipContainer) {
|
||||
tooltipContainer.appendChild(this._targetEl);
|
||||
}
|
||||
|
||||
this._targetEl.style.visibility = 'hidden';
|
||||
this._targetEl.style.opacity = '0';
|
||||
|
||||
this._showHandler = this.show.bind(this);
|
||||
this._hideHandler = this._handleHide.bind(this);
|
||||
this._updatePosition = rafThrottle(() => {
|
||||
if (this._visible) {
|
||||
positionElement(
|
||||
this._targetEl,
|
||||
this._triggerEl,
|
||||
this._options.placement,
|
||||
this._options.offset
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
if (!this._initialized) {
|
||||
this._setupEventListeners();
|
||||
this._initialized = true;
|
||||
positionElement(
|
||||
this._targetEl,
|
||||
this._triggerEl,
|
||||
this._options.placement,
|
||||
this._options.offset
|
||||
if (targetId?.includes('tooltip-offer-')) {
|
||||
const offerId = targetId.split('tooltip-offer-')[1];
|
||||
const [actualOfferId] = offerId.split('_');
|
||||
|
||||
if (window.jsonData) {
|
||||
const offer = window.jsonData.find(o =>
|
||||
o.unique_id === offerId ||
|
||||
o.offer_id === actualOfferId
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
_setupEventListeners() {
|
||||
this._triggerEl.addEventListener('mouseenter', this._showHandler);
|
||||
this._triggerEl.addEventListener('mouseleave', this._hideHandler);
|
||||
this._triggerEl.addEventListener('focus', this._showHandler);
|
||||
this._triggerEl.addEventListener('blur', this._hideHandler);
|
||||
|
||||
this._targetEl.addEventListener('mouseenter', () => {
|
||||
clearTimeout(this._hideTimeout);
|
||||
clearTimeout(this._showTimeout);
|
||||
this._visible = true;
|
||||
this._targetEl.style.visibility = 'visible';
|
||||
this._targetEl.style.opacity = '1';
|
||||
});
|
||||
|
||||
this._targetEl.addEventListener('mouseleave', this._hideHandler);
|
||||
|
||||
if (this._options.triggerType === 'click') {
|
||||
this._triggerEl.addEventListener('click', this._showHandler);
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', this._updatePosition, { passive: true });
|
||||
document.addEventListener('scroll', this._updatePosition, { passive: true, capture: true });
|
||||
window.addEventListener('resize', this._updatePosition, { passive: true });
|
||||
|
||||
let rafId;
|
||||
const smoothUpdate = () => {
|
||||
if (this._visible) {
|
||||
this._updatePosition();
|
||||
rafId = requestAnimationFrame(smoothUpdate);
|
||||
if (offer) {
|
||||
if (offer.is_revoked) {
|
||||
bgClass = 'bg-red-500';
|
||||
arrowColor = 'rgb(239 68 68)';
|
||||
} else if (offer.is_own_offer) {
|
||||
bgClass = 'bg-gray-300';
|
||||
arrowColor = 'rgb(209 213 219)';
|
||||
} else {
|
||||
bgClass = 'bg-green-700';
|
||||
arrowColor = 'rgb(21 128 61)';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this._startSmoothUpdate = () => {
|
||||
if (!rafId) rafId = requestAnimationFrame(smoothUpdate);
|
||||
};
|
||||
|
||||
this._stopSmoothUpdate = () => {
|
||||
if (rafId) {
|
||||
cancelAnimationFrame(rafId);
|
||||
rafId = null;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
_handleHide() {
|
||||
clearTimeout(this._hideTimeout);
|
||||
clearTimeout(this._showTimeout);
|
||||
|
||||
this._hideTimeout = setTimeout(() => {
|
||||
if (this._visible) {
|
||||
this.hide();
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
show() {
|
||||
clearTimeout(this._hideTimeout);
|
||||
clearTimeout(this._showTimeout);
|
||||
|
||||
this._showTimeout = setTimeout(() => {
|
||||
if (!this._visible) {
|
||||
positionElement(
|
||||
this._targetEl,
|
||||
this._triggerEl,
|
||||
this._options.placement,
|
||||
this._options.offset
|
||||
);
|
||||
|
||||
this._targetEl.style.visibility = 'visible';
|
||||
this._targetEl.style.opacity = '1';
|
||||
this._visible = true;
|
||||
this._startSmoothUpdate();
|
||||
this._options.onShow();
|
||||
}
|
||||
}, 20);
|
||||
}
|
||||
|
||||
hide() {
|
||||
this._targetEl.style.opacity = '0';
|
||||
this._targetEl.style.visibility = 'hidden';
|
||||
this._visible = false;
|
||||
this._stopSmoothUpdate();
|
||||
this._options.onHide();
|
||||
}
|
||||
|
||||
destroy() {
|
||||
clearTimeout(this._hideTimeout);
|
||||
clearTimeout(this._showTimeout);
|
||||
this._stopSmoothUpdate();
|
||||
|
||||
this._triggerEl.removeEventListener('mouseenter', this._showHandler);
|
||||
this._triggerEl.removeEventListener('mouseleave', this._hideHandler);
|
||||
this._triggerEl.removeEventListener('focus', this._showHandler);
|
||||
this._triggerEl.removeEventListener('blur', this._hideHandler);
|
||||
this._targetEl.removeEventListener('mouseenter', this._showHandler);
|
||||
this._targetEl.removeEventListener('mouseleave', this._hideHandler);
|
||||
|
||||
if (this._options.triggerType === 'click') {
|
||||
this._triggerEl.removeEventListener('click', this._showHandler);
|
||||
}
|
||||
|
||||
window.removeEventListener('scroll', this._updatePosition);
|
||||
document.removeEventListener('scroll', this._updatePosition, true);
|
||||
window.removeEventListener('resize', this._updatePosition);
|
||||
|
||||
this._targetEl.style.visibility = '';
|
||||
this._targetEl.style.opacity = '';
|
||||
this._targetEl.style.transform = '';
|
||||
|
||||
if (this._targetEl.parentNode === tooltipContainer) {
|
||||
document.body.appendChild(this._targetEl);
|
||||
}
|
||||
|
||||
this._initialized = false;
|
||||
}
|
||||
|
||||
toggle() {
|
||||
if (this._visible) {
|
||||
this.hide();
|
||||
} else {
|
||||
this.show();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.head.appendChild(style);
|
||||
const instance = tippy(element, {
|
||||
content,
|
||||
allowHTML: true,
|
||||
placement: options.placement || 'top',
|
||||
appendTo: document.body,
|
||||
animation: false,
|
||||
duration: 0,
|
||||
delay: 0,
|
||||
interactive: true,
|
||||
arrow: false,
|
||||
theme: '',
|
||||
moveTransition: 'none',
|
||||
offset: [0, 10],
|
||||
popperOptions: {
|
||||
strategy: 'fixed',
|
||||
modifiers: [
|
||||
{
|
||||
name: 'preventOverflow',
|
||||
options: {
|
||||
boundary: 'viewport',
|
||||
padding: 10
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'flip',
|
||||
options: {
|
||||
padding: 10,
|
||||
fallbackPlacements: ['top', 'bottom', 'right', 'left']
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
onCreate(instance) {
|
||||
instance._originalPlacement = instance.props.placement;
|
||||
},
|
||||
onShow(instance) {
|
||||
if (!document.body.contains(element)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
function initTooltips() {
|
||||
ensureContainerExists();
|
||||
|
||||
document.querySelectorAll('[data-tooltip-target]').forEach(triggerEl => {
|
||||
if (tooltips.has(triggerEl)) return;
|
||||
const rect = element.getBoundingClientRect();
|
||||
if (!rect.width || !rect.height) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const targetId = triggerEl.getAttribute('data-tooltip-target');
|
||||
const targetEl = document.getElementById(targetId);
|
||||
|
||||
if (targetEl) {
|
||||
const placement = triggerEl.getAttribute('data-tooltip-placement');
|
||||
const triggerType = triggerEl.getAttribute('data-tooltip-trigger');
|
||||
|
||||
const tooltip = new Tooltip(targetEl, triggerEl, {
|
||||
placement: placement || 'top',
|
||||
triggerType: triggerType || 'hover',
|
||||
offset: 8
|
||||
instance.setProps({
|
||||
placement: instance._originalPlacement
|
||||
});
|
||||
|
||||
tooltips.set(triggerEl, tooltip);
|
||||
if (instance.popper.firstElementChild) {
|
||||
instance.popper.firstElementChild.classList.add(bgClass);
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
onMount(instance) {
|
||||
if (instance.popper.firstElementChild) {
|
||||
instance.popper.firstElementChild.classList.add(bgClass);
|
||||
}
|
||||
const arrow = instance.popper.querySelector('.tippy-arrow');
|
||||
if (arrow) {
|
||||
arrow.style.setProperty('color', arrowColor, 'important');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const id = element.getAttribute('data-tooltip-trigger-id') ||
|
||||
`tooltip-${Math.random().toString(36).substring(7)}`;
|
||||
element.setAttribute('data-tooltip-trigger-id', id);
|
||||
this.activeTooltips.set(id, instance);
|
||||
|
||||
return instance;
|
||||
}
|
||||
|
||||
destroy(element) {
|
||||
if (!element) return;
|
||||
|
||||
if (this.sizeCheckIntervals.has(element)) {
|
||||
clearInterval(this.sizeCheckIntervals.get(element));
|
||||
this.sizeCheckIntervals.delete(element);
|
||||
}
|
||||
|
||||
const id = element.getAttribute('data-tooltip-trigger-id');
|
||||
if (!id) return;
|
||||
|
||||
const instance = this.activeTooltips.get(id);
|
||||
if (instance?.[0]) {
|
||||
try {
|
||||
instance[0].destroy();
|
||||
} catch (e) {
|
||||
console.warn('Error destroying tooltip:', e);
|
||||
}
|
||||
}
|
||||
this.activeTooltips.delete(id);
|
||||
element.removeAttribute('data-tooltip-trigger-id');
|
||||
}
|
||||
|
||||
cleanup() {
|
||||
this.sizeCheckIntervals.forEach((interval) => clearInterval(interval));
|
||||
this.sizeCheckIntervals.clear();
|
||||
|
||||
this.activeTooltips.forEach((instance, id) => {
|
||||
if (instance?.[0]) {
|
||||
try {
|
||||
instance[0].destroy();
|
||||
} catch (e) {
|
||||
console.warn('Error cleaning up tooltip:', e);
|
||||
}
|
||||
}
|
||||
});
|
||||
this.activeTooltips.clear();
|
||||
|
||||
document.querySelectorAll('[data-tippy-root]').forEach(element => {
|
||||
if (element.parentNode) {
|
||||
element.parentNode.removeChild(element);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initTooltips);
|
||||
} else {
|
||||
initTooltips();
|
||||
setupStyles() {
|
||||
if (document.getElementById('tooltip-styles')) return;
|
||||
|
||||
document.head.insertAdjacentHTML('beforeend', `
|
||||
<style id="tooltip-styles">
|
||||
[data-tippy-root] {
|
||||
position: fixed !important;
|
||||
z-index: 9999 !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
.tippy-box {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
border-radius: 0.5rem;
|
||||
color: white;
|
||||
position: relative !important;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
|
||||
.tippy-content {
|
||||
padding: 0.5rem 0.75rem !important;
|
||||
}
|
||||
|
||||
.tippy-box .bg-gray-400 {
|
||||
background-color: rgb(156 163 175);
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
.tippy-box:has(.bg-gray-400) .tippy-arrow {
|
||||
color: rgb(156 163 175);
|
||||
}
|
||||
|
||||
.tippy-box .bg-red-500 {
|
||||
background-color: rgb(239 68 68);
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
.tippy-box:has(.bg-red-500) .tippy-arrow {
|
||||
color: rgb(239 68 68);
|
||||
}
|
||||
|
||||
.tippy-box .bg-gray-300 {
|
||||
background-color: rgb(209 213 219);
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
.tippy-box:has(.bg-gray-300) .tippy-arrow {
|
||||
color: rgb(209 213 219);
|
||||
}
|
||||
|
||||
.tippy-box .bg-green-700 {
|
||||
background-color: rgb(21 128 61);
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
.tippy-box:has(.bg-green-700) .tippy-arrow {
|
||||
color: rgb(21 128 61);
|
||||
}
|
||||
|
||||
.tippy-box[data-placement^='top'] > .tippy-arrow::before {
|
||||
border-top-color: currentColor;
|
||||
}
|
||||
|
||||
.tippy-box[data-placement^='bottom'] > .tippy-arrow::before {
|
||||
border-bottom-color: currentColor;
|
||||
}
|
||||
|
||||
.tippy-box[data-placement^='left'] > .tippy-arrow::before {
|
||||
border-left-color: currentColor;
|
||||
}
|
||||
|
||||
.tippy-box[data-placement^='right'] > .tippy-arrow::before {
|
||||
border-right-color: currentColor;
|
||||
}
|
||||
|
||||
.tippy-box[data-placement^='top'] > .tippy-arrow {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.tippy-box[data-placement^='bottom'] > .tippy-arrow {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.tippy-box[data-placement^='left'] > .tippy-arrow {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.tippy-box[data-placement^='right'] > .tippy-arrow {
|
||||
left: 0;
|
||||
}
|
||||
</style>
|
||||
`);
|
||||
}
|
||||
|
||||
window.Tooltip = Tooltip;
|
||||
window.initTooltips = initTooltips;
|
||||
setupCleanupEvents() {
|
||||
window.addEventListener('beforeunload', () => this.cleanup());
|
||||
window.addEventListener('unload', () => this.cleanup());
|
||||
document.addEventListener('visibilitychange', () => {
|
||||
if (document.hidden) {
|
||||
this.cleanup();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
})(window);
|
||||
initializeTooltips(selector = '[data-tooltip-target]') {
|
||||
document.querySelectorAll(selector).forEach(element => {
|
||||
const targetId = element.getAttribute('data-tooltip-target');
|
||||
const tooltipContent = document.getElementById(targetId);
|
||||
|
||||
if (tooltipContent) {
|
||||
this.create(element, tooltipContent.innerHTML, {
|
||||
placement: element.getAttribute('data-tooltip-placement') || 'top'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof module !== 'undefined' && module.exports) {
|
||||
module.exports = TooltipManager;
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
TooltipManager.initialize();
|
||||
});
|
||||
|
|
|
@ -14,7 +14,6 @@
|
|||
<li>
|
||||
<a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/active">Swaps In Progress</a>
|
||||
</li>
|
||||
<li>{{ breadcrumb_line_svg | safe }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,43 +1,60 @@
|
|||
{% include 'header.html' %}
|
||||
{% from 'style.html' import breadcrumb_line_svg, page_back_svg, page_forwards_svg, filter_clear_svg, filter_apply_svg, circular_arrows_svg, input_arrow_down_svg %}
|
||||
|
||||
<div class="container mx-auto">
|
||||
<section class="p-5 mt-5">
|
||||
<div class="flex flex-wrap items-center -m-2">
|
||||
<div class="w-full md:w-1/2 p-2">
|
||||
<ul class="flex flex-wrap items-center gap-x-3 mb-2">
|
||||
<li>
|
||||
<a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/"><p>Home</p></a>
|
||||
</li>
|
||||
<li> {{ breadcrumb_line_svg | safe }} </li>
|
||||
<li> <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="#">{{ page_type_available }} {{ page_type_received }} {{ page_type_sent }}</a> </li>
|
||||
<li> {{ breadcrumb_line_svg | safe }} </li>
|
||||
<li><a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/"><p>Home</p></a></li>
|
||||
<li>{{ breadcrumb_line_svg | safe }}</li>
|
||||
<li><a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="#">Sent Bids / Received Bids</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-4">
|
||||
<div class="container px-4 mx-auto">
|
||||
<div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
|
||||
<img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
|
||||
<img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
|
||||
<img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
|
||||
<img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
|
||||
<div class="relative z-20 flex flex-wrap items-center -m-3">
|
||||
<div class="w-full md:w-1/2 p-3">
|
||||
<h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">{{ page_type_available }} {{ page_type_received }} {{ page_type_sent }}</h2>
|
||||
<p class="font-normal text-coolGray-200 dark:text-white">{{ page_type_available_description }} {{ page_type_received_description }} {{ page_type_sent_description }}</p>
|
||||
<h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Sent Bids / Received Bids</h2>
|
||||
<p class="font-normal text-coolGray-200 dark:text-white">View, and manage bids</p>
|
||||
</div>
|
||||
<div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto">
|
||||
{% if refresh %}
|
||||
<a id="refresh" href="/bid/{{ bid_id }}" class="rounded-full mr-5 flex flex-wrap justify-center px-5 py-3 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border dark:bg-gray-500 dark:hover:bg-gray-700 border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
|
||||
{{ circular_arrows_svg | safe }}
|
||||
<span>Refresh {{ refresh }} seconds</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% include 'inc_messages.html' %}
|
||||
|
||||
<section>
|
||||
<div class="pl-6 pr-6 pt-0 mt-5 h-full overflow-hidden">
|
||||
<div class="flex flex-wrap items-center justify-between -m-2">
|
||||
<div class="w-full pt-2">
|
||||
<div class="mb-4 border-b pb-5 border-gray-200 dark:border-gray-500">
|
||||
<ul class="flex flex-wrap text-sm font-medium text-center text-gray-500 dark:text-gray-400" id="myTab" data-tabs-toggle="#bidstab" role="tablist">
|
||||
<li class="mr-2">
|
||||
<button class="inline-block px-4 py-3 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white focus:outline-none focus:ring-0" id="sent-tab" data-tabs-target="#sent" type="button" role="tab" aria-controls="sent" aria-selected="true">
|
||||
Sent Bids ({{ sent_bids_count }})
|
||||
</button>
|
||||
</li>
|
||||
<li class="mr-2">
|
||||
<button class="inline-block px-4 py-3 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white focus:outline-none focus:ring-0" id="received-tab" data-tabs-target="#received" type="button" role="tab" aria-controls="received" aria-selected="false">
|
||||
Received Bids ({{ received_bids_count }})
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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="flex flex-wrap items-center justify-between -m-2">
|
||||
|
@ -91,7 +108,8 @@
|
|||
<select name="with_expired" 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="true" {% if filters.with_expired==true %} selected{% endif %}>Include</option>
|
||||
<option value="false" {% if filters.with_expired==false %} selected{% endif %}>Exclude</option>
|
||||
</select> </div>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-auto p-1.5">
|
||||
<div class="relative">
|
||||
|
@ -101,120 +119,294 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-auto p-1.5">
|
||||
<div class="relative"> <button type="submit" name='applyfilters' value="Apply Filters" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-white bg-blue-600 hover:bg-green-600 hover:border-green-600 rounded-lg transition duration-200 border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
|
||||
{{ filter_apply_svg | safe }}
|
||||
<span>Apply Filters</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<button type="submit" name='applyfilters' value="Apply Filters" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-white bg-blue-600 hover:bg-green-600 hover:border-green-600 rounded-lg transition duration-200 border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
|
||||
{{ filter_apply_svg | safe }}
|
||||
<span>Apply Filters</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container mt-5 mx-auto">
|
||||
<div class="pt-6 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
|
||||
<div class="px-6">
|
||||
<div class="w-full mt-6 pb-6 overflow-x-auto">
|
||||
<table class="w-full min-w-max">
|
||||
<thead class="uppercase">
|
||||
<tr class="text-left">
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600"> <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Date/Time at</span>
|
||||
|
||||
<div id="bidstab">
|
||||
<div class="rounded-lg" id="sent" role="tabpanel" aria-labelledby="sent-tab">
|
||||
<div id="sent-content">
|
||||
<div class="container mt-5 mx-auto">
|
||||
<div class="pt-6 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
|
||||
<div class="px-6">
|
||||
<div class="w-full mt-6 pb-6 overflow-x-auto">
|
||||
<table class="w-full min-w-max">
|
||||
<thead class="uppercase">
|
||||
<tr class="text-left">
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Date/Time at</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Bid ID</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Offer ID</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Bid From</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Bid Status</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">ITX Status</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">PTX Status</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Details</span>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for b in sent_bids %}
|
||||
<tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
|
||||
<th scope="row" class="flex items-center py-7 px-46 text-gray-900 whitespace-nowrap">
|
||||
<svg class="w-5 h-5 rounded-full ml-5" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
|
||||
<g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="11"></circle>
|
||||
<polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="pl-3">
|
||||
<div class="font-semibold text-xs dark:text-white">{{ b[0] }}</div>
|
||||
</div>
|
||||
</th>
|
||||
<td class="py-3 px-6 text-xs monospace"><a href=/bid/{{ b[1] }}>{{ b[1]|truncate(20, True) }}</a></td>
|
||||
<td class="py-3 px-6 text-xs monospace"><a href=/offer/{{ b[2] }}>{{ b[2]|truncate(20, True) }}</a></td>
|
||||
<td class="py-3 px-6 text-xs monospace"><a href=/identity/{{ b[6] }}>{{ b[6] }}</a></td>
|
||||
<td class="py-3 px-6 text-xs">{{ b[3] }}</td>
|
||||
<td class="py-3 px-6 text-xs">{{ b[4] }}</td>
|
||||
<td class="py-3 px-6 text-xs">{{ b[5] }}</td>
|
||||
<td class="py-3 px-6 text-xs">
|
||||
<a class="inline-block w-20 py-1 px-2 font-medium text-center text-sm rounded-md bg-blue-500 text-white border border-blue-500 hover:bg-blue-600 transition duration-200" href="/bid/{{ b[1] }}">Details</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</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">
|
||||
<input type="hidden" name="filter_key" value="{{ filter_key }}">
|
||||
<input type="hidden" name="page_no" value="{{ filters.page_no - 1 }}">
|
||||
<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-blue-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 sent_bids_count >= filters.limit %}
|
||||
<div class="w-full md:w-auto p-1.5">
|
||||
<input type="hidden" name="filter_key" value="{{ filter_key }}">
|
||||
<input type="hidden" name="page_no" value="{{ filters.page_no + 1 }}">
|
||||
<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-blue-600 rounded-lg transition duration-200 focus:ring-0 focus:outline-none">
|
||||
<span>Next</span>
|
||||
{{ page_forwards_svg | safe }}
|
||||
</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</th>
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600"> <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Bid ID</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600"> <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Offer ID</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600"> <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Bid From</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600"> <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Bid Status</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600"> <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">ITX Status</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600"> <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">PTX Status</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600"> <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Details</span>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for b in bids %}
|
||||
<tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
|
||||
<th scope="row" class="flex items-center py-7 px-46 text-gray-900 whitespace-nowrap"> <svg class="w-5 h-5 rounded-full ml-5" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
|
||||
<g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="11"></circle>
|
||||
<polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="pl-3">
|
||||
<div class="font-semibold text-xs dark:text-white">{{ b[0] }}</div>
|
||||
</div>
|
||||
</th>
|
||||
<td class="py-3 px-6 text-xs monospace"> <a href=/bid/{{ b[1] }}>{{ b[1]|truncate(20, True) }}</a> </td>
|
||||
<td class="py-3 px-6 text-xs monospace"> <a href=/offer/{{ b[2] }}>{{ b[2]|truncate(20, True) }}</a> </td>
|
||||
<td class="py-3 px-6 text-xs monospace"> <a href=/identity/{{ b[6] }}>{{ b[6] }}</a> </td>
|
||||
<td class="py-3 px-6 text-xs">{{ b[3] }}</td>
|
||||
<td class="py-3 px-6 text-xs">{{ b[4] }}</td>
|
||||
<td class="py-3 px-6 text-xs">{{ b[5] }}</td>
|
||||
{% if page_type_received or page_type_sent %}
|
||||
<td class="py-3 px-6 text-xs"> <a class="inline-block w-20 py-1 px-2 font-medium text-center text-sm rounded-md bg-blue-500 text-white border border-blue-500 hover:bg-blue-600 transition duration-200 bg-blue-500 text-white hover:bg-blue-600 transition duration-200" href="/bid/{{ b[1] }}">Details</a>
|
||||
</td> {% elif page_type_available %}
|
||||
<td class="py-3 px-6 text-xs"> <a class="inline-block w-20 py-1 px-2 font-medium text-center text-sm rounded-md bg-blue-500 text-white border border-blue-500 hover:bg-blue-600 transition duration-200 bg-blue-500 text-white hover:bg-blue-600 transition duration-200" href="/bid/{{ b[1] }}">Accept</a>
|
||||
</td>
|
||||
{% endif %}
|
||||
</tr>
|
||||
</tbody>
|
||||
{% endfor %}
|
||||
</table> <input type="hidden" name="formid" value="{{ form_id }}"> <input type="hidden" name="pageno" value="{{ filters.page_no }}">
|
||||
</div>
|
||||
</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-blue-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>
|
||||
</div>
|
||||
{% if bids_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-blue-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 class="hidden rounded-lg" id="received" role="tabpanel" aria-labelledby="received-tab">
|
||||
<div id="received-content">
|
||||
<div class="container mt-5 mx-auto">
|
||||
<div class="pt-6 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
|
||||
<div class="px-6">
|
||||
<div class="w-full mt-6 pb-6 overflow-x-auto">
|
||||
<table class="w-full min-w-max">
|
||||
<thead class="uppercase">
|
||||
<tr class="text-left">
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Date/Time at</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Bid ID</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Offer ID</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Bid From</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Bid Status</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">ITX Status</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">PTX Status</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Details</span>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for b in received_bids %}
|
||||
<tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
|
||||
<th scope="row" class="flex items-center py-7 px-46 text-gray-900 whitespace-nowrap">
|
||||
<svg class="w-5 h-5 rounded-full ml-5" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
|
||||
<g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="11"></circle>
|
||||
<polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="pl-3">
|
||||
<div class="font-semibold text-xs dark:text-white">{{ b[0] }}</div>
|
||||
</div>
|
||||
</th>
|
||||
<td class="py-3 px-6 text-xs monospace"><a href=/bid/{{ b[1] }}>{{ b[1]|truncate(20, True) }}</a></td>
|
||||
<td class="py-3 px-6 text-xs monospace"><a href=/offer/{{ b[2] }}>{{ b[2]|truncate(20, True) }}</a></td>
|
||||
<td class="py-3 px-6 text-xs monospace"><a href=/identity/{{ b[6] }}>{{ b[6] }}</a></td>
|
||||
<td class="py-3 px-6 text-xs">{{ b[3] }}</td>
|
||||
<td class="py-3 px-6 text-xs">{{ b[4] }}</td>
|
||||
<td class="py-3 px-6 text-xs">{{ b[5] }}</td>
|
||||
<td class="py-3 px-6 text-xs">
|
||||
<a class="inline-block w-20 py-1 px-2 font-medium text-center text-sm rounded-md bg-blue-500 text-white border border-blue-500 hover:bg-blue-600 transition duration-200" href="/bid/{{ b[1] }}">Details</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</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">
|
||||
<input type="hidden" name="filter_key" value="{{ filter_key }}">
|
||||
<input type="hidden" name="page_no" value="{{ filters.page_no - 1 }}">
|
||||
<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-blue-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 received_bids_count >= filters.limit %}
|
||||
<div class="w-full md:w-auto p-1.5">
|
||||
<input type="hidden" name="filter_key" value="{{ filter_key }}">
|
||||
<input type="hidden" name="page_no" value="{{ filters.page_no + 1 }}">
|
||||
<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-blue-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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="formid" value="{{ form_id }}">
|
||||
<input type="hidden" name="pageno" value="{{ filters.page_no }}">
|
||||
<input type="hidden" name="filter_key" value="page_bids">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const tabs = document.querySelectorAll('#myTab button');
|
||||
const contents = document.querySelectorAll('[role="tabpanel"]');
|
||||
|
||||
function switchTab(targetId) {
|
||||
contents.forEach(content => {
|
||||
content.classList.add('hidden');
|
||||
});
|
||||
const targetContent = document.querySelector(targetId);
|
||||
if (targetContent) {
|
||||
targetContent.classList.remove('hidden');
|
||||
}
|
||||
tabs.forEach(tab => {
|
||||
const selected = tab.dataset.tabsTarget === targetId;
|
||||
tab.setAttribute('aria-selected', selected);
|
||||
if (selected) {
|
||||
tab.classList.add('bg-gray-100', 'dark:bg-gray-600', 'text-gray-900', 'dark:text-white');
|
||||
} else {
|
||||
tab.classList.remove('bg-gray-100', 'dark:bg-gray-600', 'text-gray-900', 'dark:text-white');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
tabs.forEach(tab => {
|
||||
tab.addEventListener('click', () => {
|
||||
switchTab(tab.dataset.tabsTarget);
|
||||
});
|
||||
});
|
||||
|
||||
switchTab('#sent');
|
||||
});
|
||||
</script>
|
||||
|
||||
{% include 'footer.html' %}
|
||||
</body>
|
||||
</html>
|
200
basicswap/templates/bids_available.html
Normal file
200
basicswap/templates/bids_available.html
Normal file
|
@ -0,0 +1,200 @@
|
|||
{% include 'header.html' %}
|
||||
{% from 'style.html' import breadcrumb_line_svg, page_back_svg, page_forwards_svg, filter_clear_svg, filter_apply_svg, input_arrow_down_svg %}
|
||||
|
||||
<div class="container mx-auto">
|
||||
<section class="p-5 mt-5">
|
||||
<div class="flex flex-wrap items-center -m-2">
|
||||
<div class="w-full md:w-1/2 p-2">
|
||||
<ul class="flex flex-wrap items-center gap-x-3 mb-2">
|
||||
<li><a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/"><p>Home</p></a></li>
|
||||
<li>{{ breadcrumb_line_svg | safe }}</li>
|
||||
<li><a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="#">Bids Requests</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-4">
|
||||
<div class="container px-4 mx-auto">
|
||||
<div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
|
||||
<img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
|
||||
<img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
|
||||
<img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
|
||||
<div class="relative z-20 flex flex-wrap items-center -m-3">
|
||||
<div class="w-full md:w-1/2 p-3">
|
||||
<h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Bids Requests</h2>
|
||||
<p class="font-normal text-coolGray-200 dark:text-white">Review and accept bids from other users</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% include 'inc_messages.html' %}
|
||||
|
||||
<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="flex flex-wrap items-center justify-between -m-2">
|
||||
<div class="w-full mx-auto pt-2">
|
||||
<form method="post">
|
||||
<div class="flex items-center justify-center pb-4 dark:text-white">
|
||||
<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="sort_by" 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="created_at" {% if filters.sort_by=='created_at' %} selected{% endif %}>Time At</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-auto p-1.5">
|
||||
<div class="relative">
|
||||
{{ input_arrow_down_svg | safe }}
|
||||
<select name="sort_dir" 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="asc" {% if filters.sort_dir=='asc' %} selected{% endif %}>Ascending</option>
|
||||
<option value="desc" {% if filters.sort_dir=='desc' %} selected{% endif %}>Descending</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<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 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>
|
||||
</div>
|
||||
<div class="w-full md:w-auto p-1.5">
|
||||
<div class="relative">
|
||||
<button type="submit" name='applyfilters' value="Apply Filters" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-white bg-blue-600 hover:bg-green-600 hover:border-green-600 rounded-lg transition duration-200 border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
|
||||
{{ filter_apply_svg | safe }}
|
||||
<span>Apply Filters</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container mt-5 mx-auto">
|
||||
<div class="pt-6 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
|
||||
<div class="px-6">
|
||||
<div class="w-full mt-6 pb-6 overflow-x-auto">
|
||||
<table class="w-full min-w-max">
|
||||
<thead class="uppercase">
|
||||
<tr class="text-left">
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Date/Time at</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Bid ID</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Offer ID</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">From</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Status</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
|
||||
<span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Actions</span>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for b in bids %}
|
||||
<tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
|
||||
<th scope="row" class="flex items-center py-7 px-46 text-gray-900 whitespace-nowrap">
|
||||
<svg class="w-5 h-5 rounded-full ml-5" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
|
||||
<g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="11"></circle>
|
||||
<polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="pl-3">
|
||||
<div class="font-semibold text-xs dark:text-white">{{ b[0] }}</div>
|
||||
</div>
|
||||
</th>
|
||||
<td class="py-3 px-6 text-xs monospace"><a href=/bid/{{ b[1] }}>{{ b[1]|truncate(20, True) }}</a></td>
|
||||
<td class="py-3 px-6 text-xs monospace"><a href=/offer/{{ b[2] }}>{{ b[2]|truncate(20, True) }}</a></td>
|
||||
<td class="py-3 px-6 text-xs monospace"><a href=/identity/{{ b[6] }}>{{ b[6] }}</a></td>
|
||||
<td class="py-3 px-6 text-xs">{{ b[3] }}</td>
|
||||
<td class="py-3 px-6">
|
||||
<div class="flex space-x-2">
|
||||
<a class="inline-block w-20 py-1 px-2 font-medium text-center text-sm rounded-md bg-blue-500 text-white border border-blue-500 hover:bg-blue-600 transition duration-200" href="/bid/{{ b[1] }}">View</a>
|
||||
{% if b[3] == "Received" %}
|
||||
<form method="post" action="/bid/{{ b[1] }}" class="inline">
|
||||
<input type="hidden" name="formid" value="{{ form_id }}">
|
||||
<button type="submit" name="accept_bid" class="inline-block w-20 py-1 px-2 font-medium text-center text-sm rounded-md bg-green-500 text-white border border-green-500 hover:bg-green-600 transition duration-200">Accept</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<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">
|
||||
<input type="hidden" name="filter_key" value="{{ filter_key }}">
|
||||
<input type="hidden" name="page_no" value="{{ filters.page_no - 1 }}">
|
||||
<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-blue-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 bids_count >= filters.limit %}
|
||||
<div class="w-full md:w-auto p-1.5">
|
||||
<input type="hidden" name="filter_key" value="{{ filter_key }}">
|
||||
<input type="hidden" name="page_no" value="{{ filters.page_no + 1 }}">
|
||||
<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-blue-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>
|
||||
|
||||
<input type="hidden" name="formid" value="{{ form_id }}">
|
||||
<input type="hidden" name="pageno" value="{{ filters.page_no }}">
|
||||
<input type="hidden" name="filter_key" value="page_available_bids">
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include 'footer.html' %}
|
File diff suppressed because it is too large
Load diff
|
@ -331,9 +331,6 @@ function getWebSocketConfig() {
|
|||
</section>
|
||||
|
||||
<section>
|
||||
<div id="jsonView" class="hidden mb-4">
|
||||
<pre id="jsonContent" class="bg-gray-100 p-4 rounded overflow-auto" style="max-height: 300px;"></pre>
|
||||
</div>
|
||||
<div class="mt-5 lg:container mx-auto lg:px-0 px-6">
|
||||
<div class="pt-0 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
|
||||
<div class="px-0">
|
||||
|
@ -399,11 +396,9 @@ function getWebSocketConfig() {
|
|||
<span class="text-sm text-gray-600 dark:text-gray-300 font-semibold">Market +/-</span>
|
||||
<span class="sort-icon ml-1 text-gray-600 dark:text-gray-400" id="sort-icon-6">↓</span>
|
||||
</div>
|
||||
</th>
|
||||
<th class="p-0" data-sortable="true" data-column-index="7">
|
||||
<th class="p-0">
|
||||
<div class="py-3 px-4 bg-coolGray-200 dark:bg-gray-600 rounded-tr-xl">
|
||||
<span class="text-sm text-gray-600 dark:text-gray-300 font-semibold">Trade</span>
|
||||
<span class="sort-icon ml-1 text-gray-600 dark:text-gray-400" id="sort-icon-7">↓</span>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
|
@ -447,6 +442,5 @@ function getWebSocketConfig() {
|
|||
</section>
|
||||
|
||||
<input type="hidden" name="formid" value="{{ form_id }}">
|
||||
|
||||
<script src="/static/js/offerstable.js"></script>
|
||||
{% include 'footer.html' %}
|
||||
|
|
|
@ -149,13 +149,12 @@ def page_bid(self, url_split, post_string):
|
|||
)
|
||||
|
||||
|
||||
def page_bids(
|
||||
self, url_split, post_string, sent=False, available=False, received=False
|
||||
):
|
||||
def page_bids(self, url_split, post_string, sent=False, available=False, received=False):
|
||||
server = self.server
|
||||
swap_client = server.swap_client
|
||||
swap_client.checkSystemStatus()
|
||||
summary = swap_client.getSummary()
|
||||
filter_key = "page_available_bids" if available else "page_bids"
|
||||
|
||||
filters = {
|
||||
"page_no": 1,
|
||||
|
@ -169,26 +168,15 @@ def page_bids(
|
|||
filters["bid_state_ind"] = BidStates.BID_RECEIVED
|
||||
filters["with_expired"] = False
|
||||
|
||||
filter_prefix = (
|
||||
"page_bids_sent"
|
||||
if sent
|
||||
else "page_bids_available" if available else "page_bids_received"
|
||||
)
|
||||
messages = []
|
||||
form_data = self.checkForm(post_string, "bids", messages)
|
||||
if form_data:
|
||||
if have_data_entry(form_data, "clearfilters"):
|
||||
swap_client.clearFilters(filter_prefix)
|
||||
swap_client.clearFilters(filter_key)
|
||||
else:
|
||||
if have_data_entry(form_data, "sort_by"):
|
||||
sort_by = get_data_entry(form_data, "sort_by")
|
||||
ensure(
|
||||
sort_by
|
||||
in [
|
||||
"created_at",
|
||||
],
|
||||
"Invalid sort by",
|
||||
)
|
||||
ensure(sort_by in ["created_at"], "Invalid sort by")
|
||||
filters["sort_by"] = sort_by
|
||||
if have_data_entry(form_data, "sort_dir"):
|
||||
sort_dir = get_data_entry(form_data, "sort_dir")
|
||||
|
@ -199,7 +187,7 @@ def page_bids(
|
|||
if state_ind != -1:
|
||||
try:
|
||||
_ = BidStates(state_ind)
|
||||
except Exception as e: # noqa: F841
|
||||
except Exception:
|
||||
raise ValueError("Invalid state")
|
||||
filters["bid_state_ind"] = state_ind
|
||||
if have_data_entry(form_data, "with_expired"):
|
||||
|
@ -208,38 +196,52 @@ def page_bids(
|
|||
|
||||
set_pagination_filters(form_data, filters)
|
||||
if have_data_entry(form_data, "applyfilters"):
|
||||
swap_client.setFilters(filter_prefix, filters)
|
||||
swap_client.setFilters(filter_key, filters)
|
||||
else:
|
||||
saved_filters = swap_client.getFilters(filter_prefix)
|
||||
saved_filters = swap_client.getFilters(filter_key)
|
||||
if saved_filters:
|
||||
filters.update(saved_filters)
|
||||
|
||||
bids = swap_client.listBids(sent=sent, filters=filters)
|
||||
|
||||
page_data = {
|
||||
"bid_states": listBidStates(),
|
||||
}
|
||||
|
||||
if available:
|
||||
bids = swap_client.listBids(sent=False, filters=filters)
|
||||
template = server.env.get_template("bids_available.html")
|
||||
return self.render_template(
|
||||
template,
|
||||
{
|
||||
"page_type_available": "Bids Available",
|
||||
"page_type_available_description": "Bids available for you to accept.",
|
||||
"messages": messages,
|
||||
"filters": filters,
|
||||
"data": page_data,
|
||||
"summary": summary,
|
||||
"filter_key": filter_key,
|
||||
"bids": [
|
||||
(format_timestamp(b[0]), b[2].hex(), b[3].hex(),
|
||||
strBidState(b[5]), strTxState(b[7]),
|
||||
strTxState(b[8]), b[11])
|
||||
for b in bids
|
||||
],
|
||||
"bids_count": len(bids),
|
||||
}
|
||||
)
|
||||
|
||||
sent_bids = swap_client.listBids(sent=True, filters=filters)
|
||||
received_bids = swap_client.listBids(sent=False, filters=filters)
|
||||
|
||||
template = server.env.get_template("bids.html")
|
||||
return self.render_template(
|
||||
template,
|
||||
{
|
||||
"page_type_sent": "Bids Sent" if sent else "",
|
||||
"page_type_available": "Bids Available" if available else "",
|
||||
"page_type_received": "Received Bids" if received else "",
|
||||
"page_type_sent_description": (
|
||||
"All the bids you have placed on offers." if sent else ""
|
||||
),
|
||||
"page_type_available_description": (
|
||||
"Bids available for you to accept." if available else ""
|
||||
),
|
||||
"page_type_received_description": (
|
||||
"All the bids placed on your offers." if received else ""
|
||||
),
|
||||
"messages": messages,
|
||||
"filters": filters,
|
||||
"data": page_data,
|
||||
"summary": summary,
|
||||
"bids": [
|
||||
"filter_key": filter_key,
|
||||
"sent_bids": [
|
||||
(
|
||||
format_timestamp(b[0]),
|
||||
b[2].hex(),
|
||||
|
@ -249,8 +251,22 @@ def page_bids(
|
|||
strTxState(b[8]),
|
||||
b[11],
|
||||
)
|
||||
for b in bids
|
||||
for b in sent_bids
|
||||
],
|
||||
"bids_count": len(bids),
|
||||
"received_bids": [
|
||||
(
|
||||
format_timestamp(b[0]),
|
||||
b[2].hex(),
|
||||
b[3].hex(),
|
||||
strBidState(b[5]),
|
||||
strTxState(b[7]),
|
||||
strTxState(b[8]),
|
||||
b[11],
|
||||
)
|
||||
for b in received_bids
|
||||
],
|
||||
"sent_bids_count": len(sent_bids),
|
||||
"received_bids_count": len(received_bids),
|
||||
"bids_count": len(sent_bids) + len(received_bids),
|
||||
},
|
||||
)
|
||||
|
|
Loading…
Reference in a new issue