84 lines
3.0 KiB
HTML
84 lines
3.0 KiB
HTML
{% extends "layout.html" %}
|
|
{% block content %}
|
|
<div class="card" style="max-width: 500px; margin: auto;">
|
|
<h2>Edit Activity: {{ activity.name }}</h2>
|
|
<form method="POST" onsubmit="prepareSubcategories()">
|
|
<label>Name</label>
|
|
<input type="text" name="name" value="{{ activity.name }}" required>
|
|
|
|
<label>Color</label>
|
|
<input type="color" name="color" value="{{ activity.color }}" style="width:100%; height:40px; border:none; margin-bottom: 1rem;">
|
|
|
|
<label>Subcategories</label>
|
|
<p style="font-size: 0.8rem; color: #666; margin-top: -10px;">
|
|
Define specific contexts here (e.g. Boss, Team, Client A)
|
|
</p>
|
|
|
|
<div style="display: flex; gap: 5px; margin-bottom: 10px;">
|
|
<input type="text" id="newSubcat" placeholder="New subcategory..." style="margin-bottom: 0;">
|
|
<button type="button" class="btn" style="background: #27ae60;" onclick="addSubcat()">Add</button>
|
|
</div>
|
|
|
|
<ul id="subcatList" style="list-style: none; padding: 0; margin-bottom: 1rem;">
|
|
<!-- Items will be injected here -->
|
|
</ul>
|
|
|
|
<!-- Hidden input to store common separated list for backend -->
|
|
<input type="hidden" name="subcategories" id="subcatsInput">
|
|
|
|
<div style="display: flex; gap: 10px; margin-top: 20px;">
|
|
<button type="submit" class="btn">Save Changes</button>
|
|
<a href="{{ url_for('index') }}" class="btn" style="background: #95a5a6; text-decoration: none;">Cancel</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
// Initial data from server
|
|
let subcategories = {{ activity.subcategories|default([])|tojson }};
|
|
|
|
function renderList() {
|
|
const list = document.getElementById('subcatList');
|
|
list.innerHTML = '';
|
|
subcategories.forEach((item, index) => {
|
|
const li = document.createElement('li');
|
|
li.style.background = '#f1f1f1';
|
|
li.style.margin = '5px 0';
|
|
li.style.padding = '8px';
|
|
li.style.borderRadius = '5px';
|
|
li.style.display = 'flex';
|
|
li.style.justifyContent = 'space-between';
|
|
li.style.alignItems = 'center';
|
|
|
|
li.innerHTML = `
|
|
<span>${item}</span>
|
|
<span onclick="removeSubcat(${index})" style="cursor: pointer; color: #e74c3c; font-weight: bold; padding: 0 5px;">×</span>
|
|
`;
|
|
list.appendChild(li);
|
|
});
|
|
}
|
|
|
|
function addSubcat() {
|
|
const input = document.getElementById('newSubcat');
|
|
const val = input.value.trim();
|
|
if (val) {
|
|
subcategories.push(val);
|
|
input.value = '';
|
|
renderList();
|
|
}
|
|
}
|
|
|
|
function removeSubcat(index) {
|
|
subcategories.splice(index, 1);
|
|
renderList();
|
|
}
|
|
|
|
function prepareSubcategories() {
|
|
document.getElementById('subcatsInput').value = subcategories.join(',');
|
|
}
|
|
|
|
// Render initially
|
|
renderList();
|
|
</script>
|
|
{% endblock %}
|