show already completed tasks
This commit is contained in:
@@ -1,271 +1,293 @@
|
||||
{% extends "layout.html" %}
|
||||
{% block content %}
|
||||
<!-- Active Timer Section -->
|
||||
<div class="card active-section" id="activeSection" style="{% if not current_entry %}display:none;{% endif %}">
|
||||
<h3 id="activeName" style="text-align: center; color: {{ current_entry.activity_color if current_entry else '#333' }}">
|
||||
Currently Tracking: {{ current_entry.activity_name if current_entry else '' }}
|
||||
</h3>
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-start;">
|
||||
|
||||
<!-- Left Column: Activity Grid (Main Content) -->
|
||||
<div style="flex: 1; min-width: 300px;">
|
||||
<h2 style="margin-bottom: 1.5rem;">Start Tracking</h2>
|
||||
|
||||
<div id="activeSubcatContainer" style="text-align: center; {% if not current_entry or not current_entry.subcategory %}display:none;{% endif %} margin: 0 auto 10px; display: table;">
|
||||
<div id="activeSubcatDisplay" style="background: #eee; padding: 2px 10px; border-radius: 10px;">
|
||||
{{ current_entry.subcategory if current_entry else '' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="activeNote" style="text-align: center; color: #666; font-style: italic; {% if not current_entry or not current_entry.note %}display:none;{% endif %}">
|
||||
"{{ current_entry.note if current_entry else '' }}"
|
||||
</p>
|
||||
|
||||
<div class="timer-display" id="timer">00:00:00</div>
|
||||
|
||||
<!-- Tasks for current activity -->
|
||||
{% if tasks %}
|
||||
<div style="margin: 1rem 0; padding: 1rem; background: rgba(255,255,255,0.7); border-radius: 5px;">
|
||||
<h4>Active Tasks:</h4>
|
||||
{% for task in tasks %}
|
||||
<div style="margin-bottom: 5px; display: flex; align-items: center;">
|
||||
<input type="checkbox" id="task_{{ task._id }}"
|
||||
{% if task.status == 'completed' %}checked{% endif %}
|
||||
onchange="toggleTask('{{ task._id }}', this)">
|
||||
<label for="task_{{ task._id }}" style="margin-left: 10px; flex-grow: 1; {% if task.status == 'completed' %}text-decoration: line-through;{% endif %}">
|
||||
<a href="{{ url_for('task_detail', task_id=task._id) }}">{{ task.name }}</a>
|
||||
</label>
|
||||
<div class="activity-grid">
|
||||
{% for act in activities %}
|
||||
<div style="position: relative;">
|
||||
<div class="activity-card"
|
||||
style="background-color: {{ act.color }}"
|
||||
data-name="{{ act.name }}"
|
||||
data-id="{{ act._id }}"
|
||||
data-color="{{ act.color }}"
|
||||
data-subcategories='{{ act.subcategories|default([])|tojson }}'
|
||||
onclick="startActivityImmediate(this)">
|
||||
<span>{{ act.name }}</span>
|
||||
</div>
|
||||
<!-- Small Edit Link -->
|
||||
<a href="{{ url_for('edit_activity', activity_id=act._id) }}"
|
||||
style="position: absolute; top: 5px; right: 5px; color: rgba(255,255,255,0.8); text-decoration: none; font-size: 0.8rem; padding: 5px;"
|
||||
title="Edit Activity">
|
||||
Edit
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<form action="{{ url_for('stop_timer') }}" method="POST" style="text-align: center;">
|
||||
<button type="submit" class="btn btn-danger" style="font-size: 1.2rem; width: 100%;">Stop Activity</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Script for Timer -->
|
||||
<script>
|
||||
let startTime = {% if current_entry %}{{ current_entry.start_time.timestamp() * 1000 }}{% else %}null{% endif %};
|
||||
let timerInterval;
|
||||
|
||||
function updateTimer() {
|
||||
if (!startTime) return;
|
||||
const now = new Date().getTime();
|
||||
const diff = now - startTime;
|
||||
|
||||
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
|
||||
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
|
||||
|
||||
const timerEl = document.getElementById("timer");
|
||||
if (timerEl) {
|
||||
timerEl.innerHTML =
|
||||
(hours < 10 ? "0" + hours : hours) + ":" +
|
||||
(minutes < 10 ? "0" + minutes : minutes) + ":" +
|
||||
(seconds < 10 ? "0" + seconds : seconds);
|
||||
}
|
||||
}
|
||||
|
||||
if (startTime) {
|
||||
timerInterval = setInterval(updateTimer, 1000);
|
||||
updateTimer();
|
||||
}
|
||||
</script>
|
||||
<!-- End Script -->
|
||||
|
||||
|
||||
<!-- Start Activity Section -->
|
||||
<div class="activity-grid" style="margin-top: 2rem;">
|
||||
{% for act in activities %}
|
||||
<div style="position: relative;">
|
||||
<div class="activity-card"
|
||||
style="background-color: {{ act.color }}"
|
||||
data-name="{{ act.name }}"
|
||||
data-id="{{ act._id }}"
|
||||
data-color="{{ act.color }}"
|
||||
data-subcategories='{{ act.subcategories|default([])|tojson }}'
|
||||
onclick="startActivityImmediate(this)">
|
||||
<span>{{ act.name }}</span>
|
||||
</div>
|
||||
<!-- Small Edit Link -->
|
||||
<a href="{{ url_for('edit_activity', activity_id=act._id) }}"
|
||||
style="position: absolute; top: 5px; right: 5px; color: rgba(255,255,255,0.8); text-decoration: none; font-size: 0.8rem; padding: 5px;"
|
||||
title="Edit Activity">
|
||||
Edit
|
||||
</a>
|
||||
<!-- Add New Button -->
|
||||
<div class="activity-card" style="background-color: #95a5a6; color: white;" onclick="document.getElementById('newActivityForm').style.display='block'">
|
||||
<span>+ New Activity</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<!-- Add New Button -->
|
||||
<div class="activity-card" style="background-color: #95a5a6; color: white;" onclick="document.getElementById('newActivityForm').style.display='block'">
|
||||
<span>+ New Activity</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hidden Form for Starting Activity with Note -->
|
||||
|
||||
<!-- Custom Start Modal -->
|
||||
<div id="startModal" style="display:none; position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.5); z-index: 1000; justify-content: center; align-items: center;">
|
||||
<div class="card" style="width: 90%; max-width: 400px;">
|
||||
<h3 id="modalTitle">Activity Started</h3>
|
||||
|
||||
<form id="startForm" action="{{ url_for('update_active_entry') }}" method="POST">
|
||||
|
||||
<!-- Create Activity Form -->
|
||||
<div id="newActivityForm" class="card" style="display:none; margin-top: 2rem;">
|
||||
<h3>Create New Activity Category</h3>
|
||||
<form action="{{ url_for('add_activity') }}" method="POST" onsubmit="prepareTasksList()">
|
||||
<label>Name</label>
|
||||
<input type="text" name="name" required placeholder="e.g. Household">
|
||||
|
||||
<div id="subcategoryContainer" style="display: none; margin-bottom: 1rem;">
|
||||
<label>Subcategory / Context</label>
|
||||
<select name="subcategory" id="modalSubcatSelect" style="width: 100%; padding: 0.5rem;">
|
||||
<option value="">-- None --</option>
|
||||
</select>
|
||||
<label>Color</label>
|
||||
<input type="color" name="color" value="#3498db" style="width:100%; height:40px; border:none;">
|
||||
|
||||
<label>Default Tasks (Template)</label>
|
||||
<p style="font-size: 0.8rem; color: var(--text-secondary); margin-top: -10px;">
|
||||
These tasks will be created automatically every time you start this activity.
|
||||
</p>
|
||||
|
||||
<div style="display: flex; gap: 5px; margin-bottom: 10px;">
|
||||
<input type="text" id="newTaskInput" placeholder="Add task name..." style="margin-bottom: 0;">
|
||||
<button type="button" class="btn" style="background: #27ae60;" onclick="addNewTask()">Add</button>
|
||||
</div>
|
||||
|
||||
<label>Note (Optional)</label>
|
||||
<input type="text" name="note" placeholder="What are you working on?" autocomplete="off">
|
||||
<ul id="newTasksListDisplay" style="list-style: none; padding: 0; margin-bottom: 1rem;"></ul>
|
||||
<input type="hidden" name="tasks_list_data" id="tasksListData">
|
||||
|
||||
<div style="margin-top: 1rem; display: flex; justify-content: space-between;">
|
||||
<!-- Cancel just closes modal, timer keeps running -->
|
||||
<button type="button" class="btn" style="background: #95a5a6;" onclick="document.getElementById('startModal').style.display='none'">Skip</button>
|
||||
<button type="submit" class="btn" style="background: #27ae60;">Update Details</button>
|
||||
<div style="margin-top: 1rem;">
|
||||
<button type="submit" class="btn">Create</button>
|
||||
<button type="button" class="btn" style="background: var(--text-secondary)" onclick="document.getElementById('newActivityForm').style.display='none'">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function startActivityImmediate(element) {
|
||||
const id = element.getAttribute('data-id');
|
||||
const name = element.getAttribute('data-name');
|
||||
const color = element.getAttribute('data-color');
|
||||
const subcats = JSON.parse(element.getAttribute('data-subcategories') || '[]');
|
||||
|
||||
// 1. Start Background Timer
|
||||
fetch('/start_timer_bg/' + id, { method: 'POST' })
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if(data.status === 'success') {
|
||||
// 2. Start Local Timer UI
|
||||
startTime = new Date(data.start_time).getTime();
|
||||
clearInterval(timerInterval);
|
||||
timerInterval = setInterval(updateTimer, 1000);
|
||||
updateTimer();
|
||||
|
||||
// Update UI State
|
||||
document.getElementById('activeSection').style.display = 'block';
|
||||
document.getElementById('activeName').innerText = "Currently Tracking: " + name;
|
||||
document.getElementById('activeName').style.color = color;
|
||||
|
||||
// Reset Note/Subcat display
|
||||
document.getElementById('activeNote').style.display = 'none';
|
||||
document.getElementById('activeSubcatContainer').style.display = 'none';
|
||||
|
||||
// 3. Open Modal for Details
|
||||
openDetailsModal(name, subcats);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function openDetailsModal(name, subcats) {
|
||||
document.getElementById('modalTitle').innerText = name + " Started";
|
||||
|
||||
// Setup Subcategories
|
||||
const subcatContainer = document.getElementById('subcategoryContainer');
|
||||
const select = document.getElementById('modalSubcatSelect');
|
||||
select.innerHTML = '<option value="">-- None --</option>';
|
||||
|
||||
if (subcats && subcats.length > 0) {
|
||||
subcatContainer.style.display = 'block';
|
||||
subcats.forEach(sc => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = sc;
|
||||
opt.innerText = sc;
|
||||
select.appendChild(opt);
|
||||
});
|
||||
} else {
|
||||
subcatContainer.style.display = 'none';
|
||||
}
|
||||
|
||||
// Show Modal
|
||||
document.getElementById('startModal').style.display = 'flex';
|
||||
document.querySelector('#startForm input[name="note"]').focus();
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Create Activity Form -->
|
||||
<div id="newActivityForm" class="card" style="display:none; margin-top: 2rem;">
|
||||
<h3>Create New Activity Category</h3>
|
||||
<form action="{{ url_for('add_activity') }}" method="POST" onsubmit="prepareTasksList()">
|
||||
<label>Name</label>
|
||||
<input type="text" name="name" required placeholder="e.g. Household">
|
||||
|
||||
<label>Color</label>
|
||||
<input type="color" name="color" value="#3498db" style="width:100%; height:40px; border:none;">
|
||||
|
||||
<label>Default Tasks (Template)</label>
|
||||
<p style="font-size: 0.8rem; color: var(--text-secondary); margin-top: -10px;">
|
||||
These tasks will be created automatically every time you start this activity.
|
||||
</p>
|
||||
|
||||
<div style="display: flex; gap: 5px; margin-bottom: 10px;">
|
||||
<input type="text" id="newTaskInput" placeholder="Add task name..." style="margin-bottom: 0;">
|
||||
<button type="button" class="btn" style="background: #27ae60;" onclick="addNewTask()">Add</button>
|
||||
<!-- Right Column: Sidebar (Active Timer) -->
|
||||
<!-- Only visible if tracking, or hidden via JS initially if not tracking but we use 'display:none' on the card itself -->
|
||||
<div style="flex: 0 0 380px; position: sticky; top: 100px; max-width: 100%;">
|
||||
|
||||
<div class="card active-section" id="activeSection" style="{% if not current_entry %}display:none;{% endif %} padding: 1.5rem;">
|
||||
<div style="text-align: center; margin-bottom: 1rem;">
|
||||
<small style="text-transform: uppercase; font-weight: bold; color: var(--primary-color);">Currently Tracking</small>
|
||||
<h3 id="activeName" style="margin: 0.5rem 0; color: {{ current_entry.activity_color if current_entry else '#333' }}">
|
||||
{{ current_entry.activity_name if current_entry else '' }}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<!-- Context Info -->
|
||||
<div id="activeSubcatContainer" style="text-align: center; {% if not current_entry or not current_entry.subcategory %}display:none;{% endif %} margin-bottom: 10px;">
|
||||
<span id="activeSubcatDisplay" style="background: var(--bg-input); padding: 4px 12px; border-radius: 12px; font-size: 0.85rem; color: var(--text-secondary);">
|
||||
{{ current_entry.subcategory if current_entry else '' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p id="activeNote" style="text-align: center; color: var(--text-secondary); font-style: italic; font-size: 0.9rem; margin-bottom: 1.5rem; {% if not current_entry or not current_entry.note %}display:none;{% endif %}">
|
||||
"{{ current_entry.note if current_entry else '' }}"
|
||||
</p>
|
||||
|
||||
<ul id="newTasksListDisplay" style="list-style: none; padding: 0; margin-bottom: 1rem;">
|
||||
<!-- Items will be injected here -->
|
||||
</ul>
|
||||
<div class="timer-display" id="timer" style="margin: 1rem 0 2rem 0;">00:00:00</div>
|
||||
|
||||
<input type="hidden" name="tasks_list_data" id="tasksListData">
|
||||
|
||||
<div style="margin-top: 1rem;">
|
||||
<button type="submit" class="btn">Create</button>
|
||||
<button type="button" class="btn" style="background: var(--text-secondary)" onclick="document.getElementById('newActivityForm').style.display='none'">Cancel</button>
|
||||
<!-- Tasks List (Redesigned) -->
|
||||
{% if tasks %}
|
||||
<div style="margin-bottom: 2rem;">
|
||||
<h4 style="font-size: 0.8rem; text-transform: uppercase; color: var(--text-secondary); letter-spacing: 0.05em; border-bottom: 1px solid var(--border-dim); padding-bottom: 5px;">Active Tasks</h4>
|
||||
<div class="checklist-container">
|
||||
{% for task in tasks %}
|
||||
<div class="checklist-item {% if task.status == 'completed' %}completed{% endif %}">
|
||||
<input type="checkbox" id="task_{{ task._id }}"
|
||||
{% if task.status == 'completed' %}checked{% endif %}
|
||||
onchange="toggleTask('{{ task._id }}', this)">
|
||||
<label for="task_{{ task._id }}">
|
||||
<a href="{{ url_for('task_detail', task_id=task._id) }}" style="text-decoration: none; color: inherit;">
|
||||
{{ task.name }}
|
||||
</a>
|
||||
</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<form action="{{ url_for('stop_timer') }}" method="POST">
|
||||
<button type="submit" class="btn btn-danger" style="width: 100%; justify-content: center; padding: 12px;">Stop Activity</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scripts (Timer, Tasks, Modal) -->
|
||||
<script>
|
||||
// Timer Logic
|
||||
let startTime = {% if current_entry %}{{ current_entry.start_time.timestamp() * 1000 }}{% else %}null{% endif %};
|
||||
let timerInterval;
|
||||
|
||||
function updateTimer() {
|
||||
if (!startTime) return;
|
||||
const now = new Date().getTime();
|
||||
const diff = now - startTime;
|
||||
|
||||
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
|
||||
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
|
||||
|
||||
const timerEl = document.getElementById("timer");
|
||||
if (timerEl) {
|
||||
timerEl.innerHTML =
|
||||
(hours < 10 ? "0" + hours : hours) + ":" +
|
||||
(minutes < 10 ? "0" + minutes : minutes) + ":" +
|
||||
(seconds < 10 ? "0" + seconds : seconds);
|
||||
}
|
||||
}
|
||||
|
||||
if (startTime) {
|
||||
timerInterval = setInterval(updateTimer, 1000);
|
||||
updateTimer();
|
||||
}
|
||||
|
||||
// AJAX for Tasks
|
||||
function toggleTask(taskId, checkbox) {
|
||||
const formData = new FormData();
|
||||
formData.append('task_id', taskId);
|
||||
formData.append('is_checked', checkbox.checked);
|
||||
|
||||
fetch('/complete_task', { method: 'POST', body: formData })
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
const item = checkbox.closest('.checklist-item');
|
||||
if(checkbox.checked) {
|
||||
item.classList.add('completed');
|
||||
} else {
|
||||
item.classList.remove('completed');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Modal & Start Logic
|
||||
function closeStartModal() {
|
||||
document.getElementById('startModal').classList.remove('show');
|
||||
}
|
||||
|
||||
// Close on backdrop click
|
||||
document.getElementById('startModal').addEventListener('click', function(e) {
|
||||
if (e.target === this) closeStartModal();
|
||||
});
|
||||
|
||||
function startActivityImmediate(element) {
|
||||
const id = element.getAttribute('data-id');
|
||||
const name = element.getAttribute('data-name');
|
||||
const color = element.getAttribute('data-color');
|
||||
const subcats = JSON.parse(element.getAttribute('data-subcategories') || '[]');
|
||||
|
||||
// 1. Start Background Timer
|
||||
fetch('/start_timer_bg/' + id, { method: 'POST' })
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if(data.status === 'success') {
|
||||
// 2. Start Local Timer UI
|
||||
startTime = new Date(data.start_time).getTime();
|
||||
clearInterval(timerInterval);
|
||||
timerInterval = setInterval(updateTimer, 1000);
|
||||
updateTimer();
|
||||
|
||||
// Update UI State
|
||||
document.getElementById('activeSection').style.display = 'block';
|
||||
document.getElementById('activeName').innerText = name;
|
||||
document.getElementById('activeName').style.color = color;
|
||||
|
||||
// Reset Note/Subcat display
|
||||
document.getElementById('activeNote').style.display = 'none';
|
||||
document.getElementById('activeSubcatContainer').style.display = 'none';
|
||||
|
||||
// 3. Open Modal for Details
|
||||
openDetailsModal(name, subcats);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function openDetailsModal(name, subcats) {
|
||||
document.getElementById('modalTitle').innerText = name + " Started";
|
||||
|
||||
// Setup Subcategories
|
||||
const subcatContainer = document.getElementById('subcategoryContainer');
|
||||
const select = document.getElementById('modalSubcatSelect');
|
||||
select.innerHTML = '<option value="">-- None --</option>';
|
||||
|
||||
if (subcats && subcats.length > 0) {
|
||||
subcatContainer.style.display = 'block';
|
||||
subcats.forEach(sc => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = sc;
|
||||
opt.innerText = sc;
|
||||
select.appendChild(opt);
|
||||
});
|
||||
} else {
|
||||
subcatContainer.style.display = 'none';
|
||||
}
|
||||
|
||||
// Show Modal
|
||||
document.getElementById('startModal').classList.add('show');
|
||||
document.querySelector('#startForm input[name="note"]').focus();
|
||||
}
|
||||
|
||||
// New Task List Logic for Activity Creation form (Reusing existing script)
|
||||
let newActivityTasks = [];
|
||||
function addNewTask() {
|
||||
const input = document.getElementById('newTaskInput');
|
||||
const val = input.value.trim();
|
||||
if (val) {
|
||||
newActivityTasks.push(val);
|
||||
input.value = '';
|
||||
renderNewActivityTasks();
|
||||
}
|
||||
}
|
||||
function removeNewTask(index) {
|
||||
newActivityTasks.splice(index, 1);
|
||||
renderNewActivityTasks();
|
||||
}
|
||||
function renderNewActivityTasks() {
|
||||
const list = document.getElementById('newTasksListDisplay');
|
||||
list.innerHTML = '';
|
||||
newActivityTasks.forEach((item, index) => {
|
||||
const li = document.createElement('li');
|
||||
li.style.background = '#f7f7f5';
|
||||
li.style.border = '1px solid var(--border-dim)';
|
||||
li.style.margin = '5px 0';
|
||||
li.style.padding = '8px';
|
||||
li.style.borderRadius = '4px';
|
||||
li.style.display = 'flex';
|
||||
li.style.justifyContent = 'space-between';
|
||||
li.style.alignItems = 'center';
|
||||
li.style.fontSize = '0.9rem';
|
||||
li.innerHTML = `<span>${item}</span><span onclick="removeNewTask(${index})" style="cursor: pointer; color: var(--danger-color); font-weight: bold; padding: 0 5px;">×</span>`;
|
||||
list.appendChild(li);
|
||||
});
|
||||
}
|
||||
function prepareTasksList() {
|
||||
document.getElementById('tasksListData').value = newActivityTasks.join(',');
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Custom Start Modal (Hidden by default) -->
|
||||
<div id="startModal" class="modal-backdrop">
|
||||
<div class="modal-card">
|
||||
<h3 id="modalTitle" style="margin-bottom: 1.5rem;">Activity Started</h3>
|
||||
<form id="startForm" action="{{ url_for('update_active_entry') }}" method="POST">
|
||||
<div id="subcategoryContainer" style="display: none; margin-bottom: 1rem;">
|
||||
<label>Subcategory / Context</label>
|
||||
<select name="subcategory" id="modalSubcatSelect" style="width: 100%; padding: 0.5rem;">
|
||||
<option value="">-- None --</option>
|
||||
</select>
|
||||
</div>
|
||||
<label>Note (Optional)</label>
|
||||
<input type="text" name="note" placeholder="What are you working on?" autocomplete="off">
|
||||
<div style="margin-top: 2rem; display: flex; justify-content: space-between;">
|
||||
<button type="button" class="btn" style="background: transparent; color: var(--text-secondary); border: 1px solid var(--border-dim);" onclick="closeStartModal()">Skip</button>
|
||||
<button type="submit" class="btn" style="background: #27ae60;">Update Details</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Existing timer scripts...
|
||||
// ...existing code...
|
||||
|
||||
// New Task List Logic for Activity Creation
|
||||
let newActivityTasks = [];
|
||||
|
||||
function addNewTask() {
|
||||
const input = document.getElementById('newTaskInput');
|
||||
const val = input.value.trim();
|
||||
if (val) {
|
||||
newActivityTasks.push(val);
|
||||
input.value = '';
|
||||
renderNewActivityTasks();
|
||||
}
|
||||
}
|
||||
|
||||
function removeNewTask(index) {
|
||||
newActivityTasks.splice(index, 1);
|
||||
renderNewActivityTasks();
|
||||
}
|
||||
|
||||
function renderNewActivityTasks() {
|
||||
const list = document.getElementById('newTasksListDisplay');
|
||||
list.innerHTML = '';
|
||||
newActivityTasks.forEach((item, index) => {
|
||||
const li = document.createElement('li');
|
||||
li.style.background = '#f7f7f5';
|
||||
li.style.border = '1px solid var(--border-dim)';
|
||||
li.style.margin = '5px 0';
|
||||
li.style.padding = '8px';
|
||||
li.style.borderRadius = '4px';
|
||||
li.style.display = 'flex';
|
||||
li.style.justifyContent = 'space-between';
|
||||
li.style.alignItems = 'center';
|
||||
li.style.fontSize = '0.9rem';
|
||||
|
||||
li.innerHTML = `
|
||||
<span>${item}</span>
|
||||
<span onclick="removeNewTask(${index})" style="cursor: pointer; color: var(--danger-color); font-weight: bold; padding: 0 5px;">×</span>
|
||||
`;
|
||||
list.appendChild(li);
|
||||
});
|
||||
}
|
||||
|
||||
function prepareTasksList() {
|
||||
document.getElementById('tasksListData').value = newActivityTasks.join(',');
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user