Jens Luedicke
4fcf4bbf80
- Replace time-tracking-container with page-container for consistency - Update all timetrack pages to use standard page-container class - Remove duplicate timetrack-container class references - This ensures consistent header positioning across all pages
783 lines
26 KiB
HTML
783 lines
26 KiB
HTML
{% extends "layout.html" %}
|
|
|
|
{% block content %}
|
|
<div class="page-container">
|
|
<div class="page-header task-header">
|
|
<div class="project-info">
|
|
<h2>Tasks for Project: {{ project.code }} - {{ project.name }}</h2>
|
|
<p class="project-description">{{ project.description or 'No description available' }}</p>
|
|
{% if project.category %}
|
|
<span class="category-badge" style="background-color: {{ project.category.color }}20; color: {{ project.category.color }};">
|
|
{{ project.category.icon or '📁' }} {{ project.category.name }}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="page-actions task-actions">
|
|
<button id="create-task-btn" class="btn btn-success">Create New Task</button>
|
|
<a href="{{ url_for('projects.admin_projects') }}" class="btn btn-secondary">Back to Projects</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Task Statistics -->
|
|
<div class="task-stats">
|
|
<div class="stat-card">
|
|
<h3>{{ tasks|length }}</h3>
|
|
<p>Total Tasks</p>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h3>{{ tasks|selectattr('status.value', 'equalto', 'Completed')|list|length }}</h3>
|
|
<p>Completed</p>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h3>{{ tasks|selectattr('status.value', 'equalto', 'In Progress')|list|length }}</h3>
|
|
<p>In Progress</p>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h3>{{ tasks|selectattr('status.value', 'equalto', 'Not Started')|list|length }}</h3>
|
|
<p>Not Started</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Task List -->
|
|
{% if tasks %}
|
|
<div class="tasks-section">
|
|
<h3>Project Tasks</h3>
|
|
<div class="tasks-container">
|
|
{% for task in tasks %}
|
|
<div class="task-card" data-task-id="{{ task.id }}">
|
|
<div class="task-header">
|
|
<div class="task-title-area">
|
|
<h4 class="task-name">{{ task.name }}</h4>
|
|
<div class="task-meta">
|
|
<span class="status-badge status-{{ task.status.value.lower().replace(' ', '-') }}">
|
|
{{ task.status.value }}
|
|
</span>
|
|
<span class="priority-badge priority-{{ task.priority.value.lower() }}">
|
|
{{ task.priority.value }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="task-actions">
|
|
<button class="btn btn-xs btn-primary edit-task-btn" data-id="{{ task.id }}">Edit</button>
|
|
<button class="btn btn-xs btn-info add-subtask-btn" data-id="{{ task.id }}">Add Subtask</button>
|
|
<button class="btn btn-xs btn-danger delete-task-btn" data-id="{{ task.id }}">Delete</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="task-body">
|
|
<p class="task-description">{{ task.description or 'No description' }}</p>
|
|
|
|
<div class="task-details">
|
|
<div class="task-detail">
|
|
<strong>Assigned to:</strong>
|
|
{% if task.assigned_to %}
|
|
{{ task.assigned_to.username }}
|
|
{% else %}
|
|
<em>Unassigned</em>
|
|
{% endif %}
|
|
</div>
|
|
<div class="task-detail">
|
|
<strong>Due Date:</strong>
|
|
{% if task.due_date %}
|
|
{{ task.due_date.strftime('%Y-%m-%d') }}
|
|
{% else %}
|
|
<em>No due date</em>
|
|
{% endif %}
|
|
</div>
|
|
<div class="task-detail">
|
|
<strong>Estimated Hours:</strong>
|
|
{% if task.estimated_hours %}
|
|
{{ task.estimated_hours }}h
|
|
{% else %}
|
|
<em>Not estimated</em>
|
|
{% endif %}
|
|
</div>
|
|
<div class="task-detail">
|
|
<strong>Time Logged:</strong>
|
|
{{ (task.total_time_logged / 3600)|round(1) }}h
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Progress Bar -->
|
|
<div class="progress-section">
|
|
<div class="progress-info">
|
|
<span>Progress: {{ task.progress_percentage }}%</span>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: {{ task.progress_percentage }}%;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Subtasks -->
|
|
{% if task.subtasks %}
|
|
<div class="subtasks-section">
|
|
<h5>Subtasks ({{ task.subtasks|length }})</h5>
|
|
<div class="subtasks-list">
|
|
{% for subtask in task.subtasks %}
|
|
<div class="subtask-item" data-subtask-id="{{ subtask.id }}">
|
|
<div class="subtask-content">
|
|
<span class="subtask-name">{{ subtask.name }}</span>
|
|
<span class="status-badge status-{{ subtask.status.value.lower().replace(' ', '-') }}">
|
|
{{ subtask.status.value }}
|
|
</span>
|
|
{% if subtask.assigned_to %}
|
|
<span class="subtask-assignee">{{ subtask.assigned_to.username }}</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="subtask-actions">
|
|
<button class="btn btn-xs btn-primary edit-subtask-btn" data-id="{{ subtask.id }}">Edit</button>
|
|
<button class="btn btn-xs btn-danger delete-subtask-btn" data-id="{{ subtask.id }}">Delete</button>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="no-tasks">
|
|
<div class="no-tasks-content">
|
|
<h3>No Tasks Created Yet</h3>
|
|
<p>Start organizing your project by creating tasks.</p>
|
|
<button id="create-first-task-btn" class="btn btn-primary">Create Your First Task</button>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Task Creation/Edit Modal -->
|
|
<div id="task-modal" class="modal" style="display: none;">
|
|
<div class="modal-content">
|
|
<span class="close">×</span>
|
|
<h3 id="task-modal-title">Create Task</h3>
|
|
<form id="task-form">
|
|
<input type="hidden" id="task-id" name="task_id">
|
|
<input type="hidden" id="project-id" name="project_id" value="{{ project.id }}">
|
|
|
|
<div class="form-group">
|
|
<label for="task-name">Task Name *</label>
|
|
<input type="text" id="task-name" name="name" required maxlength="200">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="task-description">Description</label>
|
|
<textarea id="task-description" name="description" rows="3"></textarea>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="task-status">Status</label>
|
|
<select id="task-status" name="status">
|
|
<option value="Not Started">Not Started</option>
|
|
<option value="In Progress">In Progress</option>
|
|
<option value="On Hold">On Hold</option>
|
|
<option value="Completed">Completed</option>
|
|
<option value="Cancelled">Cancelled</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="task-priority">Priority</label>
|
|
<select id="task-priority" name="priority">
|
|
<option value="Low">Low</option>
|
|
<option value="Medium" selected>Medium</option>
|
|
<option value="High">High</option>
|
|
<option value="Urgent">Urgent</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="task-assigned-to">Assigned To</label>
|
|
<select id="task-assigned-to" name="assigned_to_id">
|
|
<option value="">Unassigned</option>
|
|
{% for user in team_members %}
|
|
<option value="{{ user.id }}">{{ user.username }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="task-estimated-hours">Estimated Hours</label>
|
|
<input type="number" id="task-estimated-hours" name="estimated_hours" step="0.5" min="0">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="task-start-date">Start Date</label>
|
|
<input type="date" id="task-start-date" name="start_date">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="task-due-date">Due Date</label>
|
|
<input type="date" id="task-due-date" name="due_date">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-actions">
|
|
<button type="submit" class="btn btn-primary">Save Task</button>
|
|
<button type="button" class="btn btn-secondary" id="cancel-task">Cancel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Subtask Creation/Edit Modal -->
|
|
<div id="subtask-modal" class="modal" style="display: none;">
|
|
<div class="modal-content">
|
|
<span class="close">×</span>
|
|
<h3 id="subtask-modal-title">Create Subtask</h3>
|
|
<form id="subtask-form">
|
|
<input type="hidden" id="subtask-id" name="subtask_id">
|
|
<input type="hidden" id="parent-task-id" name="task_id">
|
|
|
|
<div class="form-group">
|
|
<label for="subtask-name">Subtask Name *</label>
|
|
<input type="text" id="subtask-name" name="name" required maxlength="200">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="subtask-description">Description</label>
|
|
<textarea id="subtask-description" name="description" rows="2"></textarea>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="subtask-status">Status</label>
|
|
<select id="subtask-status" name="status">
|
|
<option value="Not Started">Not Started</option>
|
|
<option value="In Progress">In Progress</option>
|
|
<option value="On Hold">On Hold</option>
|
|
<option value="Completed">Completed</option>
|
|
<option value="Cancelled">Cancelled</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="subtask-priority">Priority</label>
|
|
<select id="subtask-priority" name="priority">
|
|
<option value="Low">Low</option>
|
|
<option value="Medium" selected>Medium</option>
|
|
<option value="High">High</option>
|
|
<option value="Urgent">Urgent</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="subtask-assigned-to">Assigned To</label>
|
|
<select id="subtask-assigned-to" name="assigned_to_id">
|
|
<option value="">Unassigned</option>
|
|
{% for user in team_members %}
|
|
<option value="{{ user.id }}">{{ user.username }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="subtask-estimated-hours">Estimated Hours</label>
|
|
<input type="number" id="subtask-estimated-hours" name="estimated_hours" step="0.5" min="0">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="subtask-start-date">Start Date</label>
|
|
<input type="date" id="subtask-start-date" name="start_date">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="subtask-due-date">Due Date</label>
|
|
<input type="date" id="subtask-due-date" name="due_date">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-actions">
|
|
<button type="submit" class="btn btn-primary">Save Subtask</button>
|
|
<button type="button" class="btn btn-secondary" id="cancel-subtask">Cancel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.task-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: 2rem;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 2px solid #dee2e6;
|
|
}
|
|
|
|
.project-info h2 {
|
|
margin: 0 0 0.5rem 0;
|
|
}
|
|
|
|
.project-description {
|
|
color: #666;
|
|
margin: 0 0 0.5rem 0;
|
|
}
|
|
|
|
.task-actions {
|
|
display: flex;
|
|
gap: 1rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.task-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.stat-card {
|
|
background: white;
|
|
padding: 1.5rem;
|
|
border-radius: 8px;
|
|
border: 1px solid #dee2e6;
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-card h3 {
|
|
margin: 0 0 0.5rem 0;
|
|
font-size: 2rem;
|
|
color: #4CAF50;
|
|
}
|
|
|
|
.stat-card p {
|
|
margin: 0;
|
|
color: #666;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.tasks-container {
|
|
display: grid;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.task-card {
|
|
background: white;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
transition: box-shadow 0.2s ease;
|
|
}
|
|
|
|
.task-card:hover {
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.task-header {
|
|
padding: 1rem;
|
|
background: #f8f9fa;
|
|
border-bottom: 1px solid #dee2e6;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.task-title-area {
|
|
flex: 1;
|
|
}
|
|
|
|
.task-name {
|
|
margin: 0 0 0.5rem 0;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.task-meta {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.task-body {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.task-description {
|
|
margin: 0 0 1rem 0;
|
|
color: #666;
|
|
}
|
|
|
|
.task-details {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.task-detail {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.progress-section {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.progress-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 0.5rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.progress-bar {
|
|
width: 100%;
|
|
height: 8px;
|
|
background: #e9ecef;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: #4CAF50;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.status-badge {
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 4px;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.status-not-started { background: #f8d7da; color: #721c24; }
|
|
.status-in-progress { background: #d1ecf1; color: #0c5460; }
|
|
.status-on-hold { background: #fff3cd; color: #856404; }
|
|
.status-completed { background: #d4edda; color: #155724; }
|
|
.status-cancelled { background: #f8d7da; color: #721c24; }
|
|
|
|
.priority-badge {
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 4px;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.priority-low { background: #e2e3e5; color: #383d41; }
|
|
.priority-medium { background: #b8daff; color: #004085; }
|
|
.priority-high { background: #ffeaa7; color: #856404; }
|
|
.priority-urgent { background: #f5c6cb; color: #721c24; }
|
|
|
|
.subtasks-section {
|
|
margin-top: 1rem;
|
|
padding-top: 1rem;
|
|
border-top: 1px solid #dee2e6;
|
|
}
|
|
|
|
.subtasks-section h5 {
|
|
margin: 0 0 0.75rem 0;
|
|
color: #666;
|
|
}
|
|
|
|
.subtasks-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.subtask-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.5rem;
|
|
background: #f8f9fa;
|
|
border-radius: 4px;
|
|
border: 1px solid #e9ecef;
|
|
}
|
|
|
|
.subtask-content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
flex: 1;
|
|
}
|
|
|
|
.subtask-name {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.subtask-assignee {
|
|
font-size: 0.8rem;
|
|
color: #666;
|
|
}
|
|
|
|
.subtask-actions {
|
|
display: flex;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.no-tasks {
|
|
text-align: center;
|
|
padding: 4rem 2rem;
|
|
}
|
|
|
|
.no-tasks-content {
|
|
max-width: 400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.no-tasks h3 {
|
|
color: #666;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.no-tasks p {
|
|
color: #999;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.form-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.form-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.task-header {
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.task-details {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const taskModal = document.getElementById('task-modal');
|
|
const subtaskModal = document.getElementById('subtask-modal');
|
|
const taskForm = document.getElementById('task-form');
|
|
const subtaskForm = document.getElementById('subtask-form');
|
|
|
|
// Task Modal Functions
|
|
function openTaskModal(taskData = null) {
|
|
const isEdit = taskData !== null;
|
|
document.getElementById('task-modal-title').textContent = isEdit ? 'Edit Task' : 'Create Task';
|
|
|
|
if (isEdit) {
|
|
document.getElementById('task-id').value = taskData.id;
|
|
document.getElementById('task-name').value = taskData.name;
|
|
document.getElementById('task-description').value = taskData.description || '';
|
|
document.getElementById('task-status').value = taskData.status;
|
|
document.getElementById('task-priority').value = taskData.priority;
|
|
document.getElementById('task-assigned-to').value = taskData.assigned_to_id || '';
|
|
document.getElementById('task-estimated-hours').value = taskData.estimated_hours || '';
|
|
document.getElementById('task-start-date').value = taskData.start_date || '';
|
|
document.getElementById('task-due-date').value = taskData.due_date || '';
|
|
} else {
|
|
taskForm.reset();
|
|
document.getElementById('task-id').value = '';
|
|
document.getElementById('task-priority').value = 'Medium';
|
|
}
|
|
|
|
taskModal.style.display = 'block';
|
|
}
|
|
|
|
function openSubtaskModal(taskId, subtaskData = null) {
|
|
const isEdit = subtaskData !== null;
|
|
document.getElementById('subtask-modal-title').textContent = isEdit ? 'Edit Subtask' : 'Create Subtask';
|
|
document.getElementById('parent-task-id').value = taskId;
|
|
|
|
if (isEdit) {
|
|
document.getElementById('subtask-id').value = subtaskData.id;
|
|
document.getElementById('subtask-name').value = subtaskData.name;
|
|
document.getElementById('subtask-description').value = subtaskData.description || '';
|
|
document.getElementById('subtask-status').value = subtaskData.status;
|
|
document.getElementById('subtask-priority').value = subtaskData.priority;
|
|
document.getElementById('subtask-assigned-to').value = subtaskData.assigned_to_id || '';
|
|
document.getElementById('subtask-estimated-hours').value = subtaskData.estimated_hours || '';
|
|
document.getElementById('subtask-start-date').value = subtaskData.start_date || '';
|
|
document.getElementById('subtask-due-date').value = subtaskData.due_date || '';
|
|
} else {
|
|
subtaskForm.reset();
|
|
document.getElementById('subtask-id').value = '';
|
|
document.getElementById('subtask-priority').value = 'Medium';
|
|
}
|
|
|
|
subtaskModal.style.display = 'block';
|
|
}
|
|
|
|
// Event Listeners
|
|
document.getElementById('create-task-btn').addEventListener('click', () => openTaskModal());
|
|
document.getElementById('create-first-task-btn')?.addEventListener('click', () => openTaskModal());
|
|
|
|
// Task Actions
|
|
document.querySelectorAll('.edit-task-btn').forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
const taskId = this.getAttribute('data-id');
|
|
// Fetch task data and open modal (implement API call)
|
|
fetch(`/api/tasks/${taskId}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
openTaskModal(data.task);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll('.add-subtask-btn').forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
const taskId = this.getAttribute('data-id');
|
|
openSubtaskModal(taskId);
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll('.delete-task-btn').forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
const taskId = this.getAttribute('data-id');
|
|
if (confirm('Are you sure you want to delete this task? All subtasks will also be deleted.')) {
|
|
fetch(`/api/tasks/${taskId}`, {
|
|
method: 'DELETE'
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
location.reload();
|
|
} else {
|
|
alert('Error: ' + data.message);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
// Subtask Actions
|
|
document.querySelectorAll('.edit-subtask-btn').forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
const subtaskId = this.getAttribute('data-id');
|
|
const taskId = this.closest('.task-card').getAttribute('data-task-id');
|
|
// Fetch subtask data and open modal
|
|
fetch(`/api/subtasks/${subtaskId}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
openSubtaskModal(taskId, data.subtask);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll('.delete-subtask-btn').forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
const subtaskId = this.getAttribute('data-id');
|
|
if (confirm('Are you sure you want to delete this subtask?')) {
|
|
fetch(`/api/subtasks/${subtaskId}`, {
|
|
method: 'DELETE'
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
location.reload();
|
|
} else {
|
|
alert('Error: ' + data.message);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
// Form Submissions
|
|
taskForm.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
const formData = new FormData(this);
|
|
const taskId = formData.get('task_id');
|
|
const isEdit = taskId !== '';
|
|
|
|
const url = isEdit ? `/api/tasks/${taskId}` : '/api/tasks';
|
|
const method = isEdit ? 'PUT' : 'POST';
|
|
|
|
fetch(url, {
|
|
method: method,
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(Object.fromEntries(formData))
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
taskModal.style.display = 'none';
|
|
location.reload();
|
|
} else {
|
|
alert('Error: ' + data.message);
|
|
}
|
|
});
|
|
});
|
|
|
|
subtaskForm.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
const formData = new FormData(this);
|
|
const subtaskId = formData.get('subtask_id');
|
|
const isEdit = subtaskId !== '';
|
|
|
|
const url = isEdit ? `/api/subtasks/${subtaskId}` : '/api/subtasks';
|
|
const method = isEdit ? 'PUT' : 'POST';
|
|
|
|
fetch(url, {
|
|
method: method,
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(Object.fromEntries(formData))
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
subtaskModal.style.display = 'none';
|
|
location.reload();
|
|
} else {
|
|
alert('Error: ' + data.message);
|
|
}
|
|
});
|
|
});
|
|
|
|
// Modal Close Events
|
|
document.querySelectorAll('.close').forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
this.closest('.modal').style.display = 'none';
|
|
});
|
|
});
|
|
|
|
document.getElementById('cancel-task').addEventListener('click', () => {
|
|
taskModal.style.display = 'none';
|
|
});
|
|
|
|
document.getElementById('cancel-subtask').addEventListener('click', () => {
|
|
subtaskModal.style.display = 'none';
|
|
});
|
|
|
|
// Close modals when clicking outside
|
|
window.addEventListener('click', function(event) {
|
|
if (event.target === taskModal) {
|
|
taskModal.style.display = 'none';
|
|
}
|
|
if (event.target === subtaskModal) {
|
|
subtaskModal.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
{% endblock %} |