95 lines
3.3 KiB
JavaScript
95 lines
3.3 KiB
JavaScript
import {showToast} from "@/toast.js";
|
|
import {closeModal, showModal} from "@/modal.js";
|
|
import {favorite, like, redirect} from "@/interaction.js";
|
|
import {showReportModal} from "@/report-deal.js";
|
|
|
|
async function showDealModal(dealId, dealTitle) {
|
|
if (dealId === null || dealId === "") {
|
|
showToast('Something went wrong!');
|
|
return;
|
|
}
|
|
|
|
// Open the deal modal and show a loading state
|
|
showModal('deal-modal')
|
|
|
|
try {
|
|
const response = await axios.get('/api/deals/' + dealId);
|
|
setDealDetails(response.data);
|
|
|
|
const dealModal = document.getElementById('deal-modal');
|
|
|
|
const likeBtn = dealModal.querySelector('.likeBtn');
|
|
likeBtn.addEventListener('click', () => {
|
|
like(likeBtn, dealId);
|
|
})
|
|
|
|
const favoriteBtn = dealModal.querySelector('.favoriteBtn');
|
|
favoriteBtn.addEventListener('click', () => {
|
|
favorite(favoriteBtn, dealId);
|
|
})
|
|
|
|
|
|
const reportBtn = dealModal.querySelector('.reportBtn');
|
|
reportBtn.addEventListener('click', async () => {
|
|
showReportModal(dealId, dealTitle)
|
|
})
|
|
|
|
} catch (e) {
|
|
console.error(e)
|
|
closeModal('deal-modal')
|
|
showToast('Something went wrong!');
|
|
}
|
|
}
|
|
|
|
function setDealDetails(dealDetails) {
|
|
if (dealDetails === null) {
|
|
throw new Error('DealDetails must be not null');
|
|
}
|
|
|
|
// // Can throw error, handle it else
|
|
// dealDetails = JSON.parse(dealDetails);
|
|
console.log(dealDetails);
|
|
const deal = dealDetails.data
|
|
const {id, title, description, link, image, category, broker, total_redirection, total_likes} = deal;
|
|
const dealModal = document.getElementById('deal-modal');
|
|
|
|
dealModal.querySelector('.deal-image').src = image;
|
|
dealModal.querySelector('.deal-title').innerText = title;
|
|
dealModal.querySelector('.deal-description').innerText = description;
|
|
dealModal.querySelector('.deal-category').innerText = category.name;
|
|
dealModal.querySelector('.broker-name').innerText = broker.name;
|
|
dealModal.querySelector('.broker-email').innerText = broker.email;
|
|
dealModal.querySelector('.broker-phone').innerText = broker.role.phone;
|
|
dealModal.querySelector('.likeCount').querySelector('p').innerText = total_likes ?? '0';
|
|
dealModal.querySelector('.clickCount').querySelector('p').innerText = total_redirection ?? '0';
|
|
|
|
const dealLink = dealModal.querySelector('.deal-link');
|
|
if (link !== null && link !== "") {
|
|
dealLink.classList.remove('hidden');
|
|
dealLink.classList.add('flex');
|
|
dealLink.addEventListener('click', () => {
|
|
redirect(link);
|
|
})
|
|
} else {
|
|
dealLink.classList.remove('flex');
|
|
dealLink.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
const dealCards = document.querySelectorAll('.deal-card');
|
|
if (dealCards) {
|
|
dealCards.forEach(dealCard => {
|
|
let dealId = dealCard.dataset.dealId;
|
|
let dealTitle = dealCard.querySelector('.action-toolbar').dataset.dealTitle;
|
|
|
|
dealCard.addEventListener('click', async (e) => {
|
|
if (e.target.closest('button')) {
|
|
return;
|
|
}
|
|
await showDealModal(dealId, dealTitle);
|
|
});
|
|
})
|
|
}
|
|
});
|