diff --git a/static/js/wishlist.js b/static/js/wishlist.js index b836ce6..0e770b6 100644 --- a/static/js/wishlist.js +++ b/static/js/wishlist.js @@ -31,6 +31,11 @@ function listen (element, upOrDown) { const tr = event.currentTarget.parentElement.parentElement const otherTr = upOrDown === 'up' ? tr.previousSibling : tr.nextSibling + const res = fetch(`/api/wishlist/${document.querySelector('[type="data/user_id"]').textContent}/${tr.id}/move/${upOrDown}`, { + method: 'post', + credentials: 'include' + }) + await Promise.all([ animateCSS(tr, 'zoomOut'), animateCSS(otherTr, 'zoomOut') @@ -39,20 +44,31 @@ function listen (element, upOrDown) { tr.style.visibility = 'hidden' otherTr.style.visibility = 'hidden' - const data = await fetch(`/api/wishlist/${document.querySelector('[type="data/user_id"]').textContent}/${tr.id}/move/${upOrDown}`, { - method: 'post', - credentials: 'include' - }) - .then(res => res.json()) - + const data = await (await res).json() if (data.error) throw new Error(data.error) - upOrDown === 'up' ? moveUp(tr) : moveDown(tr) + const rankEl1 = tr.querySelector('.rank') + const rankNum1 = Number(rankEl1.textContent) + const rankEl2 = otherTr.querySelector('.rank') + const rankNum2 = Number(rankEl2.textContent) + if (upOrDown === 'up') { + moveUp(tr) + if (rankNum1 === 2) tr.querySelectorAll('.topForm button').disabled = true + else tr.querySelector('.topForm button').disabled = false + rankEl1.textContent = rankNum1 - 1 + rankEl2.textContent = rankNum2 + 1 + } else if (upOrDown === 'down') { + moveDown(tr) + rankEl1.textContent = rankNum1 + 1 + rankEl2.textContent = rankNum2 - 1 + } for (const tr of document.querySelector('tbody').children) { tr.querySelector('.upForm > div > div > button').disabled = !tr.previousElementSibling tr.querySelector('.downForm > div > div > button').disabled = !tr.nextElementSibling + tr.querySelector('.topForm button').disabled = false } + document.querySelector('.topForm button').disabled = true tr.style.visibility = 'visible' otherTr.style.visibility = 'visible' diff --git a/views/wishlist.pug b/views/wishlist.pug index cbadfb6..5fff90e 100644 --- a/views/wishlist.pug +++ b/views/wishlist.pug @@ -17,6 +17,7 @@ block content .box table.table.has-mobile-cards thead + th # th(style='width: 15%;') Image th(style='width: 25%;') Name th(style='width: 50%;') Note @@ -34,6 +35,7 @@ block content each item, index in wishlist if req.user._id === item.addedBy || req.params.user !== req.user._id tr(id=item.id) + td.rank= index + 1 td figure(style='width: 100%; margin: 0;') img(src=item.image, style='width: 100%; max-height: 20em; object-fit: contain;')