9c1d45506a
Replace <select> in side panel with 4 toggle buttons (To Do / Doing / Pending / Done). Clicking a button immediately sends the PATCH status API call. Active button is highlighted with status-specific colors and shadow. saveTask now only handles title/description changes.
90 lines
3.7 KiB
HTML
90 lines
3.7 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Tasks - GoalsBreakDown{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/tasks.css') }}">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="tasks-page">
|
|
<div class="tasks-header">
|
|
<h1>Tasks</h1>
|
|
<div class="goal-selector-container">
|
|
<label for="goal-selector">Select Goal:</label>
|
|
<select id="goal-selector"></select>
|
|
</div>
|
|
<button id="create-task-btn" class="btn-success">+ Create Task</button>
|
|
</div>
|
|
|
|
<div class="tasks-main">
|
|
<div class="tasks-container">
|
|
<div id="scroll-view" class="scroll-view">
|
|
<div id="tasks-list" class="tasks-list"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="side-panel" class="side-panel">
|
|
<div class="side-panel-header">
|
|
<h2>Edit Task</h2>
|
|
<button class="side-panel-close" id="side-panel-close">×</button>
|
|
</div>
|
|
<div class="side-panel-content">
|
|
<div class="form-group">
|
|
<label for="edit-task-title">Title</label>
|
|
<input type="text" id="edit-task-title" autocomplete="off">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-task-desc">Description</label>
|
|
<textarea id="edit-task-desc" rows="12" autocomplete="off"></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Status</label>
|
|
<div class="status-toggle" id="status-toggle">
|
|
<button class="status-btn todo" data-status="todo" onclick="setTaskStatus('todo')">To Do</button>
|
|
<button class="status-btn doing" data-status="doing" onclick="setTaskStatus('doing')">Doing</button>
|
|
<button class="status-btn pending" data-status="pending" onclick="setTaskStatus('pending')">Pending</button>
|
|
<button class="status-btn done" data-status="done" onclick="setTaskStatus('done')">Done</button>
|
|
</div>
|
|
</div>
|
|
<div id="side-panel-error" class="error-message"></div>
|
|
<div class="side-panel-actions">
|
|
<button class="btn-success" id="save-task-btn">Save</button>
|
|
<button class="btn-danger" id="delete-task-btn">Delete</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="task-modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 id="task-modal-title">Create Task</h2>
|
|
<button class="modal-close" id="task-modal-close">×</button>
|
|
</div>
|
|
<form id="task-form" autocomplete="off" novalidate>
|
|
<input type="hidden" id="task-id">
|
|
<div class="form-group">
|
|
<label for="task-title">Task Title</label>
|
|
<input type="text" id="task-title" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="task-desc">Description</label>
|
|
<textarea id="task-desc" rows="3"></textarea>
|
|
</div>
|
|
<div id="task-error" class="error-message"></div>
|
|
<div class="modal-actions">
|
|
<button type="submit" class="btn-primary">Save</button>
|
|
<button type="button" class="btn-secondary" id="task-modal-cancel">Cancel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
|
|
<script src="{{ url_for('static', filename='js/tasks.js') }}"></script>
|
|
{% endblock %}
|