Update scripts/ui.js

scripts/ui.js

@@ -0,0 +1,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');
+}