97 lines
3.8 KiB
HTML
97 lines
3.8 KiB
HTML
{% extends "layout.html" %}
|
|
{% block content %}
|
|
<div class="card" style="max-width: 500px; margin: auto;">
|
|
<h2>Edit Goal</h2>
|
|
<form method="POST">
|
|
<label>Goal Name</label>
|
|
<input type="text" name="name" value="{{ goal.name }}" required>
|
|
|
|
<label>Activity</label>
|
|
<select name="activity_id" id="activitySelect" required onchange="updateSubcategories()">
|
|
<option value="">-- Select Activity --</option>
|
|
{% for act in activities %}
|
|
<option value="{{ act._id }}"
|
|
data-subcats='{{ act.subcategories|default([])|tojson }}'
|
|
{% if act._id|string == goal.activity_id|string %}selected{% endif %}>
|
|
{{ act.name }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
|
|
<div id="subcatWrapper" style="display:none;">
|
|
<label>Subcategory (Optional)</label>
|
|
<select name="subcategory" id="subcategorySelect">
|
|
<option value="">-- All --</option>
|
|
</select>
|
|
</div>
|
|
|
|
<label>Frequency</label>
|
|
<select name="frequency">
|
|
<option value="daily" {% if goal.frequency == 'daily' %}selected{% endif %}>Daily</option>
|
|
<option value="weekly" {% if goal.frequency == 'weekly' %}selected{% endif %}>Weekly</option>
|
|
<option value="monthly" {% if goal.frequency == 'monthly' %}selected{% endif %}>Monthly</option>
|
|
<option value="yearly" {% if goal.frequency == 'yearly' %}selected{% endif %}>Yearly</option>
|
|
</select>
|
|
|
|
<label>Target Hours</label>
|
|
<div class="stepper-input">
|
|
<button type="button" onclick="stepValue(this, -0.5)">-</button>
|
|
<input type="number" name="target_hours" step="0.1" value="{{ goal.target_hours }}" required>
|
|
<button type="button" onclick="stepValue(this, 0.5)">+</button>
|
|
</div>
|
|
|
|
<div style="margin-top: 1rem; display: flex; gap: 10px;">
|
|
<button type="submit" class="btn">Save Changes</button>
|
|
<a href="{{ url_for('goals') }}" class="btn" style="background: var(--text-secondary); text-decoration: none;">Cancel</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
function stepValue(btn, step) {
|
|
const input = btn.parentElement.querySelector('input');
|
|
let val = parseFloat(input.value) || 0;
|
|
val += step;
|
|
if (val < 0) val = 0;
|
|
input.value = val.toFixed(1);
|
|
}
|
|
|
|
// Logic to populate subcategories and set current value
|
|
const currentSubcat = "{{ goal.subcategory }}";
|
|
|
|
function updateSubcategories() {
|
|
const actSelect = document.getElementById('activitySelect');
|
|
const subWrapper = document.getElementById('subcatWrapper');
|
|
const subSelect = document.getElementById('subcategorySelect');
|
|
|
|
const selectedOption = actSelect.options[actSelect.selectedIndex];
|
|
if (!selectedOption.value) {
|
|
subWrapper.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
const subcats = JSON.parse(selectedOption.getAttribute('data-subcats') || '[]');
|
|
|
|
subSelect.innerHTML = '<option value="">-- All --</option>';
|
|
|
|
if (subcats && subcats.length > 0) {
|
|
subWrapper.style.display = 'block';
|
|
subcats.forEach(s => {
|
|
const opt = document.createElement('option');
|
|
opt.value = s;
|
|
opt.innerText = s;
|
|
if (s === currentSubcat && actSelect.value === "{{ goal.activity_id }}") {
|
|
opt.selected = true;
|
|
}
|
|
subSelect.appendChild(opt);
|
|
});
|
|
} else {
|
|
subWrapper.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
// Initialize on load
|
|
updateSubcategories();
|
|
</script>
|
|
{% endblock %}
|