Spaces:
Running
Running
File size: 3,742 Bytes
e06118d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
// scripts/ui.js
// --- DOM Element Getters ---
const getElement = (id) => document.getElementById(id);
// --- State ---
const streamingData = [
// ... (keep the full streamingData array here)
];
const rssFeedData = {
// ... (keep the full rssFeedData object here)
};
// --- Functions ---
function showNotification(title, message) {
const notification = getElement('notification');
getElement('notification-title').textContent = title;
getElement('notification-message').textContent = message;
notification.classList.remove('hidden');
notification.classList.add('show');
setTimeout(() => {
notification.classList.remove('show');
setTimeout(() => notification.classList.add('hidden'), 300);
}, 3000);
}
function saveShow(title, broadcastTime) {
console.log(`Saved show: ${title}`);
showNotification("Reminder Set!", `We'll notify you when "${title}" is about to broadcast.`);
if (broadcastTime) {
const broadcastDate = new Date(broadcastTime);
const now = new Date();
if (broadcastDate > now) {
const timeUntilBroadcast = broadcastDate - now;
setTimeout(() => {
showNotification("Starting Soon!", `"${title}" will begin broadcasting in 30 minutes!`);
}, timeUntilBroadcast - (30 * 60 * 1000));
}
}
}
function loadRecommendations(filter = 'all') {
const container = getElement('recommendations-container');
container.innerHTML = '';
let filteredData = streamingData;
// ... (keep the filtering logic here)
filteredData.forEach(item => {
const card = document.createElement('div');
card.className = 'stream-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 fade-in p-4';
// ... (keep the card.innerHTML logic here)
container.appendChild(card);
});
}
function loadRSSFeed(filter) {
const container = getElement('rss-feed');
container.innerHTML = '';
const feedItems = rssFeedData[filter] || rssFeedData.all;
feedItems.forEach(item => {
const feedItem = document.createElement('div');
// ... (keep the rss item creation logic here)
container.appendChild(feedItem);
});
}
function setupTab(tabId, sectionId) {
getElement(tabId).addEventListener('click', () => {
// Deactivate all tabs and hide all sections
document.querySelectorAll('.tab').forEach(t => t.classList.replace('active', 'inactive'));
document.querySelectorAll('.production-panel > div[id$="-section"]').forEach(s => s.classList.add('hidden'));
// Activate the selected tab and show the corresponding section
getElement(tabId).classList.replace('inactive', 'active');
getElement(sectionId).classList.remove('hidden');
});
}
// --- Initialization ---
export function initUI() {
loadRecommendations();
loadRSSFeed('all');
// Production panel toggle
getElement('production-button').addEventListener('click', () => {
getElement('production-panel').classList.toggle('open');
});
// RSS feed filter buttons
document.querySelectorAll('.rss-filter-btn').forEach(btn => {
btn.addEventListener('click', function() {
document.querySelectorAll('.rss-filter-btn').forEach(b => b.classList.replace('bg-indigo-100', 'bg-gray-100'));
this.classList.replace('bg-gray-100', 'bg-indigo-100');
loadRSSFeed(this.dataset.filter);
});
});
// Setup production panel tabs
setupTab('record-tab', 'record-section');
setupTab('edit-tab', 'edit-section');
setupTab('share-tab', 'share-section');
setupTab('rank-tab', 'rank-section');
} |