JLNTV_IPD/turn.js
4
0
Fork 0
mirror of https://github.com/blasten/turn.js.git synced 2026-05-28 22:38:26 +08:00
Code Issues Projects Releases Wiki Activity

Add team project tracking webapp

Browse Source 
Build a comprehensive project tracking webapp with intuitive interface for managing team projects, tasks, and milestones.

Features:
- Dashboard with visual overview of all projects
- Color-coded status indicators (on-track, at-risk, blocked, completed)
- Project management with full CRUD operations
- Task tracking with assignees and due dates
- Milestone tracking with achievement status
- Local storage for data persistence
- Responsive design for all screen sizes
- Sample data included for demonstration

Technical implementation:
- Vanilla JavaScript (ES6+) with no framework dependencies
- Modern CSS with Grid and Flexbox layouts
- Clean, maintainable code structure
- Browser-based local storage for persistence

The webapp provides team leaders with quick visibility into project health and helps identify risks that need immediate attention.
This commit is contained in:
Claude 2026-01-14 23:03:18 +00:00
parent cf64a2919d
commit a9c7178a9c
No known key found for this signature in database
4 changed files with 1933 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

255
webapp/README.md Normal file
View File

@ -0,0 +1,255 @@
# Team Project Tracker
A modern, intuitive web application for tracking team projects, tasks, milestones, and project health status.
## Features
### Dashboard Overview
- **Quick Stats**: Visual summary of all projects with color-coded status indicators
- 🟢 On Track (green) - Projects progressing well
- 🟡 At Risk (yellow) - Projects with potential issues
- 🔴 Blocked (red) - Projects that need immediate attention
- 🟣 Completed (purple) - Finished projects
- **Project Cards**: Grid view of all projects with progress indicators
- **Real-time Updates**: Dashboard updates automatically as you make changes
### Project Management
- **Create Projects**: Define project name, description, owner, dates, and status
- **Edit Projects**: Update project details at any time
- **Delete Projects**: Remove projects when no longer needed
- **Project Details**: Comprehensive view of each project including:
- Project metadata (owner, dates, status)
- Task list with completion tracking
- Milestone tracking with achievement status
### Task Management
- **Add Tasks**: Create tasks with:
- Name and description
- Status (To Do, In Progress, Completed, Blocked)
- Assignee
- Due date
- **Edit Tasks**: Update task details as work progresses
- **Delete Tasks**: Remove completed or cancelled tasks
- **Visual Indicators**: Color-coded borders show task status at a glance
### Milestone Tracking
- **Define Milestones**: Set key project milestones with:
- Name and description
- Target date
- Status (Pending, Achieved, Missed)
- **Track Progress**: Monitor milestone achievement
- **Visual Status**: Clear indicators for milestone completion
### Data Persistence
- **Local Storage**: All data is automatically saved to your browser
- **No Backend Required**: Works completely offline
- **Sample Data**: Includes example projects to get you started
## Getting Started
### Quick Start
1. Open `index.html` in your web browser
2. The app loads with sample projects to demonstrate features
3. Start creating your own projects by clicking "+ New Project"
### Usage
#### Creating a New Project
1. Click the "+ New Project" button in the header
2. Fill in the project details:
- **Project Name** (required)
- **Description** (optional)
- **Status** (required) - Select current health status
- **Project Owner** (optional)
- **Start Date** (optional)
- **Target End Date** (optional)
3. Click "Save Project"
#### Managing Tasks
1. Click on a project card to view details
2. In the Tasks section, click "+ Add Task"
3. Fill in task details and save
4. Edit or delete tasks using the action buttons
5. Change task status to track progress
#### Setting Milestones
1. From the project detail view, go to the Milestones section
2. Click "+ Add Milestone"
3. Set the milestone name, date, and status
4. Track achievement as you progress
#### Understanding Project Status
**On Track (Green)**
- Project is progressing as planned
- No significant blockers
- Team is meeting deadlines
**At Risk (Yellow)**
- Potential issues identified
- May miss deadlines without intervention
- Requires manager attention
**Blocked (Red)**
- Critical blockers preventing progress
- Immediate action required
- Escalation needed
**Completed (Purple)**
- Project successfully finished
- All tasks completed
- Archived for reference
## Technical Details
### Technology Stack
- **HTML5**: Semantic markup
- **CSS3**: Modern styling with CSS Grid and Flexbox
- **Vanilla JavaScript**: No frameworks, pure ES6+
- **Local Storage API**: Browser-based data persistence
### Browser Support
- Chrome/Edge (latest)
- Firefox (latest)
- Safari (latest)
- Any modern browser with ES6 support
### File Structure
```
webapp/
├── index.html # Main HTML file
├── css/
│ └── styles.css # All styling
├── js/
│ └── app.js # Application logic
└── README.md # This file
```
### Data Model
**Project Structure:**
```javascript
{
id: "unique_id",
name: "Project Name",
description: "Project description",
status: "on-track|at-risk|blocked|completed",
owner: "Project Owner",
startDate: "YYYY-MM-DD",
endDate: "YYYY-MM-DD",
tasks: [...],
milestones: [...]
}
```
**Task Structure:**
```javascript
{
id: "unique_id",
name: "Task Name",
description: "Task description",
status: "todo|in-progress|completed|blocked",
assignee: "Person Name",
dueDate: "YYYY-MM-DD"
}
```
**Milestone Structure:**
```javascript
{
id: "unique_id",
name: "Milestone Name",
description: "Milestone description",
date: "YYYY-MM-DD",
status: "pending|achieved|missed"
}
```
## Features Highlights
### Intuitive Interface
- Clean, modern design
- Color-coded status indicators
- Easy navigation between views
- Responsive layout for all screen sizes
### Quick Overview
- Dashboard provides instant project health visibility
- Stats cards show at-a-glance metrics
- Progress bars on project cards
- Visual differentiation of project status
### Risk Management
- Clear identification of at-risk projects
- Blocked project highlighting
- Task-level status tracking
- Milestone achievement monitoring
## Tips for Best Use
1. **Update Status Regularly**: Keep project status current for accurate overview
2. **Use Descriptions**: Add context to help team members understand work
3. **Set Realistic Dates**: Target dates help track progress
4. **Assign Tasks**: Clear ownership improves accountability
5. **Track Milestones**: Break projects into measurable achievements
6. **Review Dashboard**: Regular checks help identify risks early
## Data Management
### Exporting Data
Your data is stored in browser Local Storage. To backup:
1. Open browser Developer Tools (F12)
2. Go to Application > Local Storage
3. Find key: `projectTrackerData`
4. Copy the JSON value
### Importing Data
To restore or import data:
1. Open browser Developer Tools (F12)
2. Go to Application > Local Storage
3. Set key `projectTrackerData` with your JSON data
4. Refresh the page
### Clearing Data
To start fresh:
1. Open browser Developer Tools (F12)
2. Go to Application > Local Storage
3. Delete key: `projectTrackerData`
4. Refresh the page
## Customization
The app uses CSS variables for easy theming. Edit `css/styles.css`:
```css
:root {
--primary-color: #4f46e5; /* Main accent color */
--on-track: #10b981; /* Success/on-track color */
--at-risk: #f59e0b; /* Warning/at-risk color */
--blocked: #ef4444; /* Error/blocked color */
/* ... more variables */
}
```
## Future Enhancements
Possible additions:
- Export to PDF/Excel
- Team member management
- Email notifications
- Calendar integration
- File attachments
- Comments and activity log
- Backend API integration
- User authentication
- Gantt chart view
- Time tracking
## Support
For issues or questions about the Turn.js library, visit:
- [Turn.js GitHub Repository](https://github.com/blasten/turn.js)
## License
This webapp is part of the Turn.js project. See the main repository for license information.

754
webapp/css/styles.css Normal file
View File

@ -0,0 +1,754 @@
/* ==================== */
/* CSS Variables */
/* ==================== */
:root {
--primary-color: #4f46e5;
--primary-hover: #4338ca;
--secondary-color: #64748b;
--danger-color: #ef4444;
--success-color: #10b981;
--warning-color: #f59e0b;
--blocked-color: #dc2626;
--on-track: #10b981;
--at-risk: #f59e0b;
--blocked: #ef4444;
--completed: #8b5cf6;
--bg-primary: #ffffff;
--bg-secondary: #f8fafc;
--bg-tertiary: #f1f5f9;
--border-color: #e2e8f0;
--text-primary: #1e293b;
--text-secondary: #64748b;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
}
/* ==================== */
/* Reset & Base Styles */
/* ==================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
background: var(--bg-secondary);
color: var(--text-primary);
line-height: 1.6;
}
/* ==================== */
/* Layout */
/* ==================== */
.app-container {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.app-header {
background: var(--bg-primary);
border-bottom: 1px solid var(--border-color);
box-shadow: var(--shadow-sm);
position: sticky;
top: 0;
z-index: 100;
}
.header-content {
max-width: 1400px;
margin: 0 auto;
padding: 1.5rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.header-content h1 {
font-size: 1.75rem;
font-weight: 700;
color: var(--text-primary);
}
.main-content {
flex: 1;
max-width: 1400px;
width: 100%;
margin: 0 auto;
padding: 2rem;
}
/* ==================== */
/* Views */
/* ==================== */
.view {
display: none;
}
.view.active {
display: block;
}
/* ==================== */
/* Buttons */
/* ==================== */
.btn {
padding: 0.625rem 1.25rem;
border: none;
border-radius: var(--radius-md);
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.btn-primary {
background: var(--primary-color);
color: white;
}
.btn-primary:hover {
background: var(--primary-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.btn-secondary {
background: var(--bg-tertiary);
color: var(--text-primary);
}
.btn-secondary:hover {
background: var(--border-color);
}
.btn-danger {
background: var(--danger-color);
color: white;
}
.btn-danger:hover {
background: #dc2626;
}
.btn-small {
padding: 0.375rem 0.75rem;
font-size: 0.75rem;
}
/* ==================== */
/* Dashboard */
/* ==================== */
.dashboard-header {
margin-bottom: 2rem;
}
.dashboard-header h2 {
font-size: 1.875rem;
margin-bottom: 1.5rem;
color: var(--text-primary);
}
.stats-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.stat-card {
background: var(--bg-primary);
padding: 1.5rem;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
border-left: 4px solid;
transition: transform 0.2s;
}
.stat-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.stat-card.on-track {
border-color: var(--on-track);
}
.stat-card.at-risk {
border-color: var(--at-risk);
}
.stat-card.blocked {
border-color: var(--blocked);
}
.stat-card.total {
border-color: var(--primary-color);
}
.stat-value {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 0.25rem;
}
.stat-card.on-track .stat-value {
color: var(--on-track);
}
.stat-card.at-risk .stat-value {
color: var(--at-risk);
}
.stat-card.blocked .stat-value {
color: var(--blocked);
}
.stat-card.total .stat-value {
color: var(--primary-color);
}
.stat-label {
font-size: 0.875rem;
color: var(--text-secondary);
font-weight: 500;
}
/* ==================== */
/* Projects Grid */
/* ==================== */
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 1.5rem;
}
.project-card {
background: var(--bg-primary);
border-radius: var(--radius-lg);
padding: 1.5rem;
box-shadow: var(--shadow-md);
cursor: pointer;
transition: all 0.2s;
border-top: 4px solid;
}
.project-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.project-card.on-track {
border-color: var(--on-track);
}
.project-card.at-risk {
border-color: var(--at-risk);
}
.project-card.blocked {
border-color: var(--blocked);
}
.project-card.completed {
border-color: var(--completed);
opacity: 0.85;
}
.project-card-header {
display: flex;
justify-content: space-between;
align-items: start;
margin-bottom: 1rem;
}
.project-card-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.25rem;
}
.project-status-badge {
padding: 0.25rem 0.75rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
}
.status-on-track {
background: rgba(16, 185, 129, 0.1);
color: var(--on-track);
}
.status-at-risk {
background: rgba(245, 158, 11, 0.1);
color: var(--at-risk);
}
.status-blocked {
background: rgba(239, 68, 68, 0.1);
color: var(--blocked);
}
.status-completed {
background: rgba(139, 92, 246, 0.1);
color: var(--completed);
}
.project-card-description {
color: var(--text-secondary);
font-size: 0.875rem;
margin-bottom: 1rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.project-card-meta {
display: flex;
gap: 1.5rem;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--border-color);
font-size: 0.875rem;
color: var(--text-secondary);
}
.project-card-meta-item {
display: flex;
align-items: center;
gap: 0.5rem;
}
.project-card-footer {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--border-color);
}
.project-progress {
display: flex;
justify-content: space-between;
font-size: 0.75rem;
margin-bottom: 0.5rem;
color: var(--text-secondary);
}
.progress-bar {
height: 6px;
background: var(--bg-tertiary);
border-radius: 999px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: var(--primary-color);
transition: width 0.3s;
}
.project-card.on-track .progress-fill {
background: var(--on-track);
}
.project-card.at-risk .progress-fill {
background: var(--at-risk);
}
.project-card.blocked .progress-fill {
background: var(--blocked);
}
/* ==================== */
/* Project Detail View */
/* ==================== */
.detail-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.detail-actions {
display: flex;
gap: 1rem;
}
.project-detail-header {
background: var(--bg-primary);
padding: 2rem;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
margin-bottom: 2rem;
}
.project-detail-title {
font-size: 2rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.project-detail-meta {
display: flex;
flex-wrap: wrap;
gap: 2rem;
margin-top: 1.5rem;
font-size: 0.875rem;
}
.meta-item {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.meta-label {
color: var(--text-secondary);
font-weight: 500;
}
.meta-value {
color: var(--text-primary);
font-weight: 600;
}
.project-sections {
display: grid;
gap: 2rem;
}
.section {
background: var(--bg-primary);
padding: 2rem;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.section-title {
font-size: 1.25rem;
font-weight: 600;
}
.empty-state {
text-align: center;
padding: 3rem 1rem;
color: var(--text-secondary);
}
/* ==================== */
/* Tasks */
/* ==================== */
.tasks-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.task-item {
padding: 1rem;
background: var(--bg-secondary);
border-radius: var(--radius-md);
border-left: 3px solid;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.2s;
}
.task-item:hover {
background: var(--bg-tertiary);
}
.task-item.todo {
border-color: var(--secondary-color);
}
.task-item.in-progress {
border-color: var(--primary-color);
}
.task-item.completed {
border-color: var(--success-color);
opacity: 0.7;
}
.task-item.blocked {
border-color: var(--danger-color);
}
.task-content {
flex: 1;
}
.task-name {
font-weight: 600;
margin-bottom: 0.25rem;
}
.task-item.completed .task-name {
text-decoration: line-through;
}
.task-meta {
display: flex;
gap: 1rem;
font-size: 0.75rem;
color: var(--text-secondary);
}
.task-actions {
display: flex;
gap: 0.5rem;
}
/* ==================== */
/* Milestones */
/* ==================== */
.milestones-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.milestone-item {
padding: 1rem;
background: var(--bg-secondary);
border-radius: var(--radius-md);
border-left: 3px solid;
transition: all 0.2s;
}
.milestone-item:hover {
background: var(--bg-tertiary);
}
.milestone-item.pending {
border-color: var(--warning-color);
}
.milestone-item.achieved {
border-color: var(--success-color);
}
.milestone-item.missed {
border-color: var(--danger-color);
}
.milestone-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
.milestone-name {
font-weight: 600;
}
.milestone-date {
font-size: 0.875rem;
color: var(--text-secondary);
}
.milestone-actions {
display: flex;
gap: 0.5rem;
}
/* ==================== */
/* Modal */
/* ==================== */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
align-items: center;
justify-content: center;
}
.modal.active {
display: flex;
}
.modal-content {
background: var(--bg-primary);
border-radius: var(--radius-lg);
width: 90%;
max-width: 600px;
max-height: 90vh;
overflow-y: auto;
box-shadow: var(--shadow-lg);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem;
border-bottom: 1px solid var(--border-color);
}
.modal-header h3 {
font-size: 1.5rem;
font-weight: 600;
}
.modal-close {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: var(--text-secondary);
padding: 0;
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
transition: all 0.2s;
}
.modal-close:hover {
background: var(--bg-tertiary);
color: var(--text-primary);
}
form {
padding: 1.5rem;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
font-size: 0.875rem;
color: var(--text-primary);
}
input[type="text"],
input[type="date"],
textarea,
select {
width: 100%;
padding: 0.625rem;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
font-size: 0.875rem;
font-family: inherit;
transition: all 0.2s;
}
input:focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
textarea {
resize: vertical;
}
.modal-actions {
display: flex;
justify-content: flex-end;
gap: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--border-color);
}
/* ==================== */
/* Responsive */
/* ==================== */
@media (max-width: 768px) {
.header-content {
flex-direction: column;
gap: 1rem;
}
.main-content {
padding: 1rem;
}
.projects-grid {
grid-template-columns: 1fr;
}
.stats-cards {
grid-template-columns: repeat(2, 1fr);
}
.form-row {
grid-template-columns: 1fr;
}
.detail-header {
flex-direction: column;
gap: 1rem;
align-items: stretch;
}
.detail-actions {
flex-direction: column;
}
}
/* ==================== */
/* Utilities */
/* ==================== */
.empty-state {
text-align: center;
padding: 3rem 1rem;
color: var(--text-secondary);
}
.empty-state-icon {
font-size: 3rem;
margin-bottom: 1rem;
opacity: 0.5;
}
.empty-state-text {
font-size: 1rem;
margin-bottom: 1.5rem;
}

214
webapp/index.html Normal file
View File

@ -0,0 +1,214 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Team Project Tracker</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="app-container">
<!-- Header -->
<header class="app-header">
<div class="header-content">
<h1>🎯 Team Project Tracker</h1>
<button id="newProjectBtn" class="btn btn-primary">+ New Project</button>
</div>
</header>
<!-- Main Content -->
<main class="main-content">
<!-- Dashboard View -->
<section id="dashboardView" class="view active">
<div class="dashboard-header">
<h2>Dashboard Overview</h2>
<div class="stats-cards">
<div class="stat-card on-track">
<div class="stat-value" id="onTrackCount">0</div>
<div class="stat-label">On Track</div>
</div>
<div class="stat-card at-risk">
<div class="stat-value" id="atRiskCount">0</div>
<div class="stat-label">At Risk</div>
</div>
<div class="stat-card blocked">
<div class="stat-value" id="blockedCount">0</div>
<div class="stat-label">Blocked</div>
</div>
<div class="stat-card total">
<div class="stat-value" id="totalCount">0</div>
<div class="stat-label">Total Projects</div>
</div>
</div>
</div>
<div class="projects-grid" id="projectsGrid">
<!-- Projects will be dynamically inserted here -->
</div>
</section>
<!-- Project Detail View -->
<section id="projectDetailView" class="view">
<div class="detail-header">
<button id="backToDashboard" class="btn btn-secondary">← Back to Dashboard</button>
<div class="detail-actions">
<button id="editProjectBtn" class="btn btn-secondary">Edit Project</button>
<button id="deleteProjectBtn" class="btn btn-danger">Delete</button>
</div>
</div>
<div class="project-detail" id="projectDetail">
<!-- Project details will be dynamically inserted here -->
</div>
</section>
</main>
</div>
<!-- Modal for New/Edit Project -->
<div id="projectModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3 id="modalTitle">New Project</h3>
<button class="modal-close">&times;</button>
</div>
<form id="projectForm">
<div class="form-group">
<label for="projectName">Project Name *</label>
<input type="text" id="projectName" required>
</div>
<div class="form-group">
<label for="projectDescription">Description</label>
<textarea id="projectDescription" rows="3"></textarea>
</div>
<div class="form-row">
<div class="form-group">
<label for="projectStatus">Status *</label>
<select id="projectStatus" required>
<option value="on-track">On Track</option>
<option value="at-risk">At Risk</option>
<option value="blocked">Blocked</option>
<option value="completed">Completed</option>
</select>
</div>
<div class="form-group">
<label for="projectOwner">Project Owner</label>
<input type="text" id="projectOwner">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="projectStartDate">Start Date</label>
<input type="date" id="projectStartDate">
</div>
<div class="form-group">
<label for="projectEndDate">Target End Date</label>
<input type="date" id="projectEndDate">
</div>
</div>
<div class="modal-actions">
<button type="button" class="btn btn-secondary cancel-btn">Cancel</button>
<button type="submit" class="btn btn-primary">Save Project</button>
</div>
</form>
</div>
</div>
<!-- Modal for Tasks -->
<div id="taskModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3 id="taskModalTitle">New Task</h3>
<button class="modal-close">&times;</button>
</div>
<form id="taskForm">
<div class="form-group">
<label for="taskName">Task Name *</label>
<input type="text" id="taskName" required>
</div>
<div class="form-group">
<label for="taskDescription">Description</label>
<textarea id="taskDescription" rows="2"></textarea>
</div>
<div class="form-row">
<div class="form-group">
<label for="taskStatus">Status *</label>
<select id="taskStatus" required>
<option value="todo">To Do</option>
<option value="in-progress">In Progress</option>
<option value="completed">Completed</option>
<option value="blocked">Blocked</option>
</select>
</div>
<div class="form-group">
<label for="taskAssignee">Assignee</label>
<input type="text" id="taskAssignee">
</div>
</div>
<div class="form-group">
<label for="taskDueDate">Due Date</label>
<input type="date" id="taskDueDate">
</div>
<div class="modal-actions">
<button type="button" class="btn btn-secondary cancel-btn">Cancel</button>
<button type="submit" class="btn btn-primary">Save Task</button>
</div>
</form>
</div>
</div>
<!-- Modal for Milestones -->
<div id="milestoneModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3 id="milestoneModalTitle">New Milestone</h3>
<button class="modal-close">&times;</button>
</div>
<form id="milestoneForm">
<div class="form-group">
<label for="milestoneName">Milestone Name *</label>
<input type="text" id="milestoneName" required>
</div>
<div class="form-group">
<label for="milestoneDescription">Description</label>
<textarea id="milestoneDescription" rows="2"></textarea>
</div>
<div class="form-row">
<div class="form-group">
<label for="milestoneDate">Target Date *</label>
<input type="date" id="milestoneDate" required>
</div>
<div class="form-group">
<label for="milestoneStatus">Status *</label>
<select id="milestoneStatus" required>
<option value="pending">Pending</option>
<option value="achieved">Achieved</option>
<option value="missed">Missed</option>
</select>
</div>
</div>
<div class="modal-actions">
<button type="button" class="btn btn-secondary cancel-btn">Cancel</button>
<button type="submit" class="btn btn-primary">Save Milestone</button>
</div>
</form>
</div>
</div>
<script src="js/app.js"></script>
</body>
</html>

710
webapp/js/app.js Normal file
View File

@ -0,0 +1,710 @@
// ==========================================
// Team Project Tracker - Application Logic
// ==========================================
class ProjectTracker {
constructor() {
this.projects = [];
this.currentProjectId = null;
this.editingTaskId = null;
this.editingMilestoneId = null;
this.editMode = false;
this.init();
}
// ==========================================
// Initialization
// ==========================================
init() {
this.loadFromStorage();
this.setupEventListeners();
this.renderDashboard();
}
// ==========================================
// Local Storage
// ==========================================
loadFromStorage() {
const stored = localStorage.getItem('projectTrackerData');
if (stored) {
this.projects = JSON.parse(stored);
} else {
// Add sample data for first time users
this.projects = this.generateSampleData();
this.saveToStorage();
}
}
saveToStorage() {
localStorage.setItem('projectTrackerData', JSON.stringify(this.projects));
}
generateSampleData() {
return [
{
id: this.generateId(),
name: 'Website Redesign',
description: 'Complete overhaul of company website with modern design and improved UX',
status: 'on-track',
owner: 'Sarah Johnson',
startDate: '2026-01-01',
endDate: '2026-03-31',
tasks: [
{
id: this.generateId(),
name: 'Design mockups',
description: 'Create wireframes and high-fidelity mockups',
status: 'completed',
assignee: 'Design Team',
dueDate: '2026-01-15'
},
{
id: this.generateId(),
name: 'Frontend development',
description: 'Implement responsive design',
status: 'in-progress',
assignee: 'Dev Team',
dueDate: '2026-02-28'
}
],
milestones: [
{
id: this.generateId(),
name: 'Design Approval',
description: 'Final design approved by stakeholders',
date: '2026-01-20',
status: 'achieved'
},
{
id: this.generateId(),
name: 'Beta Launch',
description: 'Launch beta version for testing',
date: '2026-03-15',
status: 'pending'
}
]
},
{
id: this.generateId(),
name: 'Mobile App Development',
description: 'Build native iOS and Android applications',
status: 'at-risk',
owner: 'Mike Chen',
startDate: '2025-12-01',
endDate: '2026-04-30',
tasks: [
{
id: this.generateId(),
name: 'API Integration',
description: 'Connect mobile apps to backend API',
status: 'blocked',
assignee: 'Backend Team',
dueDate: '2026-02-01'
}
],
milestones: [
{
id: this.generateId(),
name: 'MVP Complete',
description: 'Minimum viable product ready',
date: '2026-02-15',
status: 'missed'
}
]
},
{
id: this.generateId(),
name: 'Database Migration',
description: 'Migrate legacy database to new cloud infrastructure',
status: 'blocked',
owner: 'David Park',
startDate: '2026-01-10',
endDate: '2026-02-28',
tasks: [],
milestones: []
}
];
}
// ==========================================
// Event Listeners
// ==========================================
setupEventListeners() {
// New Project Button
document.getElementById('newProjectBtn').addEventListener('click', () => {
this.openProjectModal();
});
// Project Form
document.getElementById('projectForm').addEventListener('submit', (e) => {
e.preventDefault();
this.saveProject();
});
// Task Form
document.getElementById('taskForm').addEventListener('submit', (e) => {
e.preventDefault();
this.saveTask();
});
// Milestone Form
document.getElementById('milestoneForm').addEventListener('submit', (e) => {
e.preventDefault();
this.saveMilestone();
});
// Modal Close Buttons
document.querySelectorAll('.modal-close, .cancel-btn').forEach(btn => {
btn.addEventListener('click', () => {
this.closeAllModals();
});
});
// Close modals on outside click
document.querySelectorAll('.modal').forEach(modal => {
modal.addEventListener('click', (e) => {
if (e.target === modal) {
this.closeAllModals();
}
});
});
// Back to Dashboard
document.getElementById('backToDashboard').addEventListener('click', () => {
this.showDashboard();
});
// Edit Project Button
document.getElementById('editProjectBtn').addEventListener('click', () => {
this.openProjectModal(this.currentProjectId);
});
// Delete Project Button
document.getElementById('deleteProjectBtn').addEventListener('click', () => {
if (confirm('Are you sure you want to delete this project? This action cannot be undone.')) {
this.deleteProject(this.currentProjectId);
this.showDashboard();
}
});
}
// ==========================================
// View Management
// ==========================================
showView(viewId) {
document.querySelectorAll('.view').forEach(view => {
view.classList.remove('active');
});
document.getElementById(viewId).classList.add('active');
}
showDashboard() {
this.showView('dashboardView');
this.renderDashboard();
}
showProjectDetail(projectId) {
this.currentProjectId = projectId;
this.showView('projectDetailView');
this.renderProjectDetail(projectId);
}
// ==========================================
// Dashboard Rendering
// ==========================================
renderDashboard() {
this.updateStats();
this.renderProjectsGrid();
}
updateStats() {
const stats = {
onTrack: this.projects.filter(p => p.status === 'on-track').length,
atRisk: this.projects.filter(p => p.status === 'at-risk').length,
blocked: this.projects.filter(p => p.status === 'blocked').length,
total: this.projects.length
};
document.getElementById('onTrackCount').textContent = stats.onTrack;
document.getElementById('atRiskCount').textContent = stats.atRisk;
document.getElementById('blockedCount').textContent = stats.blocked;
document.getElementById('totalCount').textContent = stats.total;
}
renderProjectsGrid() {
const grid = document.getElementById('projectsGrid');
if (this.projects.length === 0) {
grid.innerHTML = `
<div class="empty-state">
<div class="empty-state-icon">📋</div>
<div class="empty-state-text">No projects yet. Create your first project to get started!</div>
<button class="btn btn-primary" onclick="app.openProjectModal()">+ Create Project</button>
</div>
`;
return;
}
grid.innerHTML = this.projects.map(project => {
const taskStats = this.getTaskStats(project);
const progress = taskStats.total > 0
? Math.round((taskStats.completed / taskStats.total) * 100)
: 0;
return `
<div class="project-card ${project.status}" onclick="app.showProjectDetail('${project.id}')">
<div class="project-card-header">
<div>
<div class="project-card-title">${this.escapeHtml(project.name)}</div>
</div>
<span class="project-status-badge status-${project.status}">
${this.formatStatus(project.status)}
</span>
</div>
${project.description ? `
<div class="project-card-description">${this.escapeHtml(project.description)}</div>
` : ''}
<div class="project-card-meta">
${project.owner ? `
<div class="project-card-meta-item">
<span>👤</span>
<span>${this.escapeHtml(project.owner)}</span>
</div>
` : ''}
${project.endDate ? `
<div class="project-card-meta-item">
<span>📅</span>
<span>${this.formatDate(project.endDate)}</span>
</div>
` : ''}
</div>
<div class="project-card-footer">
<div class="project-progress">
<span>Tasks Progress</span>
<span>${taskStats.completed}/${taskStats.total} completed</span>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: ${progress}%"></div>
</div>
</div>
</div>
`;
}).join('');
}
// ==========================================
// Project Detail Rendering
// ==========================================
renderProjectDetail(projectId) {
const project = this.projects.find(p => p.id === projectId);
if (!project) return;
const container = document.getElementById('projectDetail');
const taskStats = this.getTaskStats(project);
container.innerHTML = `
<div class="project-detail-header">
<div style="display: flex; justify-content: space-between; align-items: start;">
<div>
<h2 class="project-detail-title">${this.escapeHtml(project.name)}</h2>
<span class="project-status-badge status-${project.status}">
${this.formatStatus(project.status)}
</span>
</div>
</div>
${project.description ? `
<p style="margin-top: 1rem; color: var(--text-secondary);">${this.escapeHtml(project.description)}</p>
` : ''}
<div class="project-detail-meta">
${project.owner ? `
<div class="meta-item">
<span class="meta-label">Project Owner</span>
<span class="meta-value">${this.escapeHtml(project.owner)}</span>
</div>
` : ''}
${project.startDate ? `
<div class="meta-item">
<span class="meta-label">Start Date</span>
<span class="meta-value">${this.formatDate(project.startDate)}</span>
</div>
` : ''}
${project.endDate ? `
<div class="meta-item">
<span class="meta-label">Target End Date</span>
<span class="meta-value">${this.formatDate(project.endDate)}</span>
</div>
` : ''}
<div class="meta-item">
<span class="meta-label">Tasks Completed</span>
<span class="meta-value">${taskStats.completed} / ${taskStats.total}</span>
</div>
</div>
</div>
<div class="project-sections">
<!-- Tasks Section -->
<div class="section">
<div class="section-header">
<h3 class="section-title">Tasks</h3>
<button class="btn btn-primary btn-small" onclick="app.openTaskModal()">+ Add Task</button>
</div>
${this.renderTasks(project.tasks)}
</div>
<!-- Milestones Section -->
<div class="section">
<div class="section-header">
<h3 class="section-title">Milestones</h3>
<button class="btn btn-primary btn-small" onclick="app.openMilestoneModal()">+ Add Milestone</button>
</div>
${this.renderMilestones(project.milestones)}
</div>
</div>
`;
}
renderTasks(tasks) {
if (!tasks || tasks.length === 0) {
return `
<div class="empty-state">
<div class="empty-state-text">No tasks yet. Add your first task to get started!</div>
</div>
`;
}
return `
<div class="tasks-list">
${tasks.map(task => `
<div class="task-item ${task.status}">
<div class="task-content">
<div class="task-name">${this.escapeHtml(task.name)}</div>
${task.description ? `<div style="font-size: 0.875rem; color: var(--text-secondary); margin-top: 0.25rem;">${this.escapeHtml(task.description)}</div>` : ''}
<div class="task-meta">
${task.assignee ? `<span>👤 ${this.escapeHtml(task.assignee)}</span>` : ''}
${task.dueDate ? `<span>📅 ${this.formatDate(task.dueDate)}</span>` : ''}
<span class="project-status-badge status-${task.status}">${this.formatStatus(task.status)}</span>
</div>
</div>
<div class="task-actions">
<button class="btn btn-secondary btn-small" onclick="app.openTaskModal('${task.id}')">Edit</button>
<button class="btn btn-danger btn-small" onclick="app.deleteTask('${task.id}')">Delete</button>
</div>
</div>
`).join('')}
</div>
`;
}
renderMilestones(milestones) {
if (!milestones || milestones.length === 0) {
return `
<div class="empty-state">
<div class="empty-state-text">No milestones yet. Add your first milestone to track progress!</div>
</div>
`;
}
return `
<div class="milestones-list">
${milestones.map(milestone => `
<div class="milestone-item ${milestone.status}">
<div class="milestone-header">
<div class="milestone-name">${this.escapeHtml(milestone.name)}</div>
<div style="display: flex; gap: 1rem; align-items: center;">
<span class="project-status-badge status-${milestone.status}">${this.formatStatus(milestone.status)}</span>
<div class="milestone-actions">
<button class="btn btn-secondary btn-small" onclick="app.openMilestoneModal('${milestone.id}')">Edit</button>
<button class="btn btn-danger btn-small" onclick="app.deleteMilestone('${milestone.id}')">Delete</button>
</div>
</div>
</div>
${milestone.description ? `<div style="font-size: 0.875rem; color: var(--text-secondary); margin-top: 0.5rem;">${this.escapeHtml(milestone.description)}</div>` : ''}
<div class="milestone-date" style="margin-top: 0.5rem;">📅 ${this.formatDate(milestone.date)}</div>
</div>
`).join('')}
</div>
`;
}
// ==========================================
// Modal Management
// ==========================================
openProjectModal(projectId = null) {
const modal = document.getElementById('projectModal');
const form = document.getElementById('projectForm');
const title = document.getElementById('modalTitle');
form.reset();
this.editMode = !!projectId;
if (projectId) {
const project = this.projects.find(p => p.id === projectId);
if (project) {
title.textContent = 'Edit Project';
document.getElementById('projectName').value = project.name;
document.getElementById('projectDescription').value = project.description || '';
document.getElementById('projectStatus').value = project.status;
document.getElementById('projectOwner').value = project.owner || '';
document.getElementById('projectStartDate').value = project.startDate || '';
document.getElementById('projectEndDate').value = project.endDate || '';
}
} else {
title.textContent = 'New Project';
this.currentProjectId = null;
}
modal.classList.add('active');
}
openTaskModal(taskId = null) {
const modal = document.getElementById('taskModal');
const form = document.getElementById('taskForm');
const title = document.getElementById('taskModalTitle');
form.reset();
this.editingTaskId = taskId;
if (taskId) {
const project = this.projects.find(p => p.id === this.currentProjectId);
const task = project.tasks.find(t => t.id === taskId);
if (task) {
title.textContent = 'Edit Task';
document.getElementById('taskName').value = task.name;
document.getElementById('taskDescription').value = task.description || '';
document.getElementById('taskStatus').value = task.status;
document.getElementById('taskAssignee').value = task.assignee || '';
document.getElementById('taskDueDate').value = task.dueDate || '';
}
} else {
title.textContent = 'New Task';
}
modal.classList.add('active');
}
openMilestoneModal(milestoneId = null) {
const modal = document.getElementById('milestoneModal');
const form = document.getElementById('milestoneForm');
const title = document.getElementById('milestoneModalTitle');
form.reset();
this.editingMilestoneId = milestoneId;
if (milestoneId) {
const project = this.projects.find(p => p.id === this.currentProjectId);
const milestone = project.milestones.find(m => m.id === milestoneId);
if (milestone) {
title.textContent = 'Edit Milestone';
document.getElementById('milestoneName').value = milestone.name;
document.getElementById('milestoneDescription').value = milestone.description || '';
document.getElementById('milestoneDate').value = milestone.date;
document.getElementById('milestoneStatus').value = milestone.status;
}
} else {
title.textContent = 'New Milestone';
}
modal.classList.add('active');
}
closeAllModals() {
document.querySelectorAll('.modal').forEach(modal => {
modal.classList.remove('active');
});
this.editMode = false;
this.editingTaskId = null;
this.editingMilestoneId = null;
}
// ==========================================
// CRUD Operations - Projects
// ==========================================
saveProject() {
const projectData = {
name: document.getElementById('projectName').value,
description: document.getElementById('projectDescription').value,
status: document.getElementById('projectStatus').value,
owner: document.getElementById('projectOwner').value,
startDate: document.getElementById('projectStartDate').value,
endDate: document.getElementById('projectEndDate').value
};
if (this.editMode && this.currentProjectId) {
// Update existing project
const project = this.projects.find(p => p.id === this.currentProjectId);
if (project) {
Object.assign(project, projectData);
}
} else {
// Create new project
const newProject = {
id: this.generateId(),
...projectData,
tasks: [],
milestones: []
};
this.projects.push(newProject);
}
this.saveToStorage();
this.closeAllModals();
if (this.editMode) {
this.renderProjectDetail(this.currentProjectId);
} else {
this.renderDashboard();
}
}
deleteProject(projectId) {
this.projects = this.projects.filter(p => p.id !== projectId);
this.saveToStorage();
this.renderDashboard();
}
// ==========================================
// CRUD Operations - Tasks
// ==========================================
saveTask() {
const taskData = {
name: document.getElementById('taskName').value,
description: document.getElementById('taskDescription').value,
status: document.getElementById('taskStatus').value,
assignee: document.getElementById('taskAssignee').value,
dueDate: document.getElementById('taskDueDate').value
};
const project = this.projects.find(p => p.id === this.currentProjectId);
if (!project) return;
if (this.editingTaskId) {
// Update existing task
const task = project.tasks.find(t => t.id === this.editingTaskId);
if (task) {
Object.assign(task, taskData);
}
} else {
// Create new task
const newTask = {
id: this.generateId(),
...taskData
};
project.tasks.push(newTask);
}
this.saveToStorage();
this.closeAllModals();
this.renderProjectDetail(this.currentProjectId);
}
deleteTask(taskId) {
if (!confirm('Are you sure you want to delete this task?')) return;
const project = this.projects.find(p => p.id === this.currentProjectId);
if (project) {
project.tasks = project.tasks.filter(t => t.id !== taskId);
this.saveToStorage();
this.renderProjectDetail(this.currentProjectId);
}
}
// ==========================================
// CRUD Operations - Milestones
// ==========================================
saveMilestone() {
const milestoneData = {
name: document.getElementById('milestoneName').value,
description: document.getElementById('milestoneDescription').value,
date: document.getElementById('milestoneDate').value,
status: document.getElementById('milestoneStatus').value
};
const project = this.projects.find(p => p.id === this.currentProjectId);
if (!project) return;
if (this.editingMilestoneId) {
// Update existing milestone
const milestone = project.milestones.find(m => m.id === this.editingMilestoneId);
if (milestone) {
Object.assign(milestone, milestoneData);
}
} else {
// Create new milestone
const newMilestone = {
id: this.generateId(),
...milestoneData
};
project.milestones.push(newMilestone);
}
this.saveToStorage();
this.closeAllModals();
this.renderProjectDetail(this.currentProjectId);
}
deleteMilestone(milestoneId) {
if (!confirm('Are you sure you want to delete this milestone?')) return;
const project = this.projects.find(p => p.id === this.currentProjectId);
if (project) {
project.milestones = project.milestones.filter(m => m.id !== milestoneId);
this.saveToStorage();
this.renderProjectDetail(this.currentProjectId);
}
}
// ==========================================
// Utility Functions
// ==========================================
generateId() {
return 'id_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
}
getTaskStats(project) {
const total = project.tasks.length;
const completed = project.tasks.filter(t => t.status === 'completed').length;
return { total, completed };
}
formatStatus(status) {
const statusMap = {
'on-track': 'On Track',
'at-risk': 'At Risk',
'blocked': 'Blocked',
'completed': 'Completed',
'todo': 'To Do',
'in-progress': 'In Progress',
'pending': 'Pending',
'achieved': 'Achieved',
'missed': 'Missed'
};
return statusMap[status] || status;
}
formatDate(dateString) {
if (!dateString) return '';
const date = new Date(dateString);
return date.toLocaleDateString('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric'
});
}
escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
}
// ==========================================
// Initialize Application
// ==========================================
const app = new ProjectTracker();