Upload files to "project_dashboard version 2"
This commit is contained in:
parent
905b4ce70c
commit
93a4104c51
3 changed files with 297 additions and 0 deletions
132
project_dashboard version 2/app.js
Normal file
132
project_dashboard version 2/app.js
Normal file
|
|
@ -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);
|
||||
43
project_dashboard version 2/index.html
Normal file
43
project_dashboard version 2/index.html
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Office Dashboard</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="slider">
|
||||
<!-- Slide 1: In Progress -->
|
||||
<div class="slide">
|
||||
<h1>In-Progress Projects</h1>
|
||||
<div class="grid" id="p1-list"></div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 2: Stats -->
|
||||
<div class="slide">
|
||||
<h1>Performance Summary</h1>
|
||||
<div class="grid" id="p2-list"></div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 3: Announcements -->
|
||||
<div class="slide">
|
||||
<h1>Office Announcements</h1>
|
||||
<div class="grid" id="p3-list"></div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 4: Calendar -->
|
||||
<div class="slide">
|
||||
<h1>Upcoming This Month</h1>
|
||||
<div class="grid" id="p4-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Error Overlay -->
|
||||
<div id="error-display" class="hidden"></div>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
122
project_dashboard version 2/style.css
Normal file
122
project_dashboard version 2/style.css
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
/* Update your style.css with these scaling rules */
|
||||
|
||||
html {
|
||||
/* Use the font-size of the root to scale everything else */
|
||||
/* 1.5vw means the base font size is 1.5% of the TV width */
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
:root {
|
||||
--bg: #0f172a;
|
||||
--card: #1e293b;
|
||||
--accent: #38bdf8;
|
||||
--text: #f8fafc;
|
||||
--danger: #ef4444;
|
||||
--success: #10b981;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden; /* Prevent scrolling on TV */
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Slide Animation Engine */
|
||||
#slider {
|
||||
display: flex;
|
||||
width: 400vw; /* 4 slides */
|
||||
height: 100vh;
|
||||
transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
}
|
||||
|
||||
.slide {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
padding: 4vh 4vw; /* Consistent padding regardless of resolution */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.5rem;
|
||||
margin-top: 0;
|
||||
color: var(--accent);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
border-bottom: 3px solid var(--card);
|
||||
padding-bottom: 15px;
|
||||
/* Instead of 60px, we use 4vh (4% of screen height) */
|
||||
font-size: 5vh;
|
||||
margin: 2vh 0;
|
||||
}
|
||||
|
||||
/* Grid Layouts */
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(30vw, 1fr));
|
||||
gap: 20px;;
|
||||
margin-top: 40px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Card Styling */
|
||||
.card {
|
||||
background: var(--card);
|
||||
/* Use rem (root em) so cards scale with the html font-size */
|
||||
padding: 2rem;
|
||||
border-radius: 1.5rem;
|
||||
/* Ensure cards don't get too tall for the screen */
|
||||
max-height: 40vh; ;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
|
||||
.overdue { border-left: 12px solid var(--danger); }
|
||||
.ann-card { border-left: 12px solid #f59e0b; }
|
||||
.cal-card { border-left: 12px solid var(--success); }
|
||||
.bday { background: #831843; border-left: 12px solid #ec4899; }
|
||||
|
||||
/* Progress Bar Components */
|
||||
.progress-container { margin: 25px 0; }
|
||||
.progress-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
color: var(--accent);
|
||||
}
|
||||
.bar-bg {
|
||||
background: #334155;
|
||||
height: 1.5vh; /* Thicker bars on larger screens */
|
||||
border-radius: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
.bar-fill {
|
||||
background: linear-gradient(90deg, #38bdf8, #818cf8);
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
transition: width 1.5s ease-out;
|
||||
}
|
||||
|
||||
/* Error UI */
|
||||
#error-display {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
background: var(--danger);
|
||||
padding: 15px 30px;
|
||||
border-radius: 10px;
|
||||
font-weight: bold;
|
||||
z-index: 9999;
|
||||
}
|
||||
.hidden { display: none; }
|
||||
Loading…
Add table
Add a link
Reference in a new issue