document.addEventListener('DOMContentLoaded', function() {
// Initialize Chart
const ctx = document.getElementById('airdropChart').getContext('2d');
let airdropChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [],
datasets: [{
label: 'Airdrop Value (USD)',
data: [],
backgroundColor: '#3B82F6',
borderColor: '#3B82F6',
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
// Sample data (in a real app, this would come from a database)
let airdrops = [
{
id: 1,
project: 'Ethereum',
token: 'ETH',
amount: 0.5,
value: 1000,
status: 'claimed',
date: '2023-05-15'
},
{
id: 2,
project: 'Solana',
token: 'SOL',
amount: 10,
value: 500,
status: 'pending',
date: '2023-06-20'
},
{
id: 3,
project: 'Polygon',
token: 'MATIC',
amount: 200,
value: 150,
status: 'pending',
date: '2023-07-10'
}
];
// DOM Elements
const airdropTableBody = document.getElementById('airdropTableBody');
const totalAirdropsElement = document.getElementById('totalAirdrops');
const claimedAirdropsElement = document.getElementById('claimedAirdrops');
const pendingAirdropsElement = document.getElementById('pendingAirdrops');
const openModalBtn = document.getElementById('openModalBtn');
const modal = document.querySelector('custom-add-airdrop-modal');
// Render airdrops table
function renderAirdrops() {
airdropTableBody.innerHTML = '';
// Update stats
totalAirdropsElement.textContent = airdrops.length;
claimedAirdropsElement.textContent = airdrops.filter(a => a.status === 'claimed').length;
pendingAirdropsElement.textContent = airdrops.filter(a => a.status === 'pending').length;
// Update chart data
const chartLabels = airdrops.map(a => a.project);
const chartData = airdrops.map(a => a.value);
airdropChart.data.labels = chartLabels;
airdropChart.data.datasets[0].data = chartData;
airdropChart.update();
// Render table rows
airdrops.forEach(airdrop => {
const row = document.createElement('tr');
// Determine status class
let statusClass = 'status-pending';
if (airdrop.status === 'claimed') statusClass = 'status-claimed';
if (airdrop.status === 'failed') statusClass = 'status-failed';
row.innerHTML = `
|
|
${airdrop.token}
|
${airdrop.amount}
|
$${airdrop.value.toLocaleString()}
|
${airdrop.status.charAt(0).toUpperCase() + airdrop.status.slice(1)}
|
${new Date(airdrop.date).toLocaleDateString()}
|
|
`;
airdropTableBody.appendChild(row);
});
// Add event listeners to buttons
document.querySelectorAll('.edit-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
const id = parseInt(e.target.getAttribute('data-id'));
editAirdrop(id);
});
});
document.querySelectorAll('.delete-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
const id = parseInt(e.target.getAttribute('data-id'));
deleteAirdrop(id);
});
});
}
// Add new airdrop
function addAirdrop(newAirdrop) {
newAirdrop.id = airdrops.length > 0 ? Math.max(...airdrops.map(a => a.id)) + 1 : 1;
airdrops.push(newAirdrop);
renderAirdrops();
}
// Edit airdrop
function editAirdrop(id) {
const airdrop = airdrops.find(a => a.id === id);
if (airdrop) {
modal.openForEdit(airdrop);
}
}
// Update airdrop
function updateAirdrop(updatedAirdrop) {
const index = airdrops.findIndex(a => a.id === updatedAirdrop.id);
if (index !== -1) {
airdrops[index] = updatedAirdrop;
renderAirdrops();
}
}
// Delete airdrop
function deleteAirdrop(id) {
if (confirm('Are you sure you want to delete this airdrop?')) {
airdrops = airdrops.filter(a => a.id !== id);
renderAirdrops();
}
}
// Modal open button
openModalBtn.addEventListener('click', () => {
modal.open();
});
// Handle modal events
modal.addEventListener('addAirdrop', (e) => {
addAirdrop(e.detail);
});
modal.addEventListener('updateAirdrop', (e) => {
updateAirdrop(e.detail);
});
// Initial render
renderAirdrops();
}); 