Upload files to "project_dashboard version 2"

2026-04-30 17:07:51 +00:00 · 2026-04-30 17:07:51 +00:00 · 93a4104c51
commit 93a4104c51
parent 905b4ce70c
3 changed files with 297 additions and 0 deletions
--- a/2/app.js
+++ b/2/app.js
@ -0,0 +1,132 @@
+const API_URL = "https://script.google.com/macros/s/AKfycbxg9k8zw-ES0m4CvEL2nNB3FAqWNbznxPBUoMAbZFnb2tdI2r0rRFAhwQ8bL4WH5Gcesw/exec";
+const SLIDE_TIME = 12000; // 12 Seconds per slide
+const DATA_REFRESH = 300000; // 5 Minutes
+
+let slideIdx = 0;
+
+/**
+ * Primary Data Fetching
+ */
+async function updateDashboard() {
+    try {
+        const response = await fetch(API_URL);
+        if (!response.ok) throw new Error("Connection Error");
+        
+        const data = await response.json();
+        
+        // Safety Check: If Google Script threw an error
+        if (data.error) {
+            showError("Google Script: " + data.error);
+            return;
+        }
+
+        renderProjects(data.projects);
+        renderStats(data.projects);
+        renderAnnouncements(data.announcements);
+        renderCalendar(data.calendar);
+        
+        hideError();
+    } catch (err) {
+        showError("Dashboard Error: " + err.message);
+    }
+}
+
+/**
+ * Renderers with Defensive Checks (The "Fix")
+ */
+function renderProjects(projectData) {
+    const list = document.getElementById('p1-list');
+    // FIX: Check if data.projects AND data.projects.active exist
+    if (projectData && projectData.active) {
+        list.innerHTML = projectData.active.slice(0, 6).map(p => `
+            <div class="card ${p.isOverdue ? 'overdue' : ''}">
+                <div>
+                    <div style="font-size: 0.9rem; color: #94a3b8;">${p.type}</div>
+                    <div style="font-size: 2.2rem; font-weight: bold; margin: 10px 0;">${p.name}</div>
+                </div>
+                <div class="progress-container">
+                    <div class="progress-label"><span>Status</span><span>${p.progress}%</span></div>
+                    <div class="bar-bg"><div class="bar-fill" style="width:${p.progress}%"></div></div>
+                </div>
+                <div style="display:flex; justify-content:space-between; font-size:1.3rem;">
+                    <span>👤 ${p.owner}</span>
+                    <span style="color:${p.isOverdue ? 'var(--danger)' : '#94a3b8'}">📅 Due: ${p.due}</span>
+                </div>
+            </div>
+        `).join('');
+    } else {
+        list.innerHTML = "<div class='card'><h2>No Active Projects</h2></div>";
+    }
+}
+
+function renderStats(projectData) {
+    const list = document.getElementById('p2-list');
+    if (projectData) {
+        list.innerHTML = `
+            <div class="card">
+                <h2>Completed</h2>
+                <div style="font-size: 6rem; color: var(--success); text-align:center;">${projectData.completedCount || 0}</div>
+            </div>
+            <div class="card">
+                <h2>Still In Progress</h2>
+                <div style="font-size: 6rem; color: var(--accent); text-align:center;">${projectData.active ? projectData.active.length : 0}</div>
+            </div>
+        `;
+    }
+}
+
+function renderAnnouncements(ann) {
+    const list = document.getElementById('p3-list');
+    if (ann && ann.length > 0) {
+        list.innerHTML = ann.map(a => `
+            <div class="card ann-card">
+                <div style="color: var(--accent); font-weight: bold;">${a.date}</div>
+                <h2 style="margin: 15px 0;">${a.title}</h2>
+                <p style="font-size: 1.5rem; color: #cbd5e1;">${a.content}</p>
+            </div>
+        `).join('');
+    } else {
+        list.innerHTML = "<div class='card'><h2>No Current Announcements</h2></div>";
+    }
+}
+
+function renderCalendar(cal) {
+    const list = document.getElementById('p4-list');
+    if (cal && cal.length > 0) {
+        list.innerHTML = cal.map(c => `
+            <div class="card cal-card ${c.isBirthday ? 'bday' : ''}">
+                <div style="font-weight: bold;">${c.isBirthday ? '🎂 BIRTHDAY' : '📅 EVENT'}</div>
+                <h2 style="margin: 15px 0;">${c.title}</h2>
+                <div style="font-size: 1.5rem;">${c.start}</div>
+            </div>
+        `).join('');
+    } else {
+        list.innerHTML = "<div class='card'><h2>No Events Scheduled</h2></div>";
+    }
+}
+
+/**
+ * Slide Rotation Logic
+ */
+function rotateSlides() {
+    slideIdx = (slideIdx + 1) % 4;
+    document.getElementById('slider').style.transform = `translateX(-${slideIdx * 100}vw)`;
+}
+
+/**
+ * Error Handling UI
+ */
+function showError(msg) {
+    const err = document.getElementById('error-display');
+    err.innerText = msg;
+    err.classList.remove('hidden');
+}
+
+function hideError() {
+    document.getElementById('error-display').classList.add('hidden');
+}
+
+// Initialize
+updateDashboard();
+setInterval(updateDashboard, DATA_REFRESH);
+setInterval(rotateSlides, SLIDE_TIME);