calvin.erfmann/OpenTimeTracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

show already completed tasks

Browse Source
This commit is contained in:
Calvin-Nevaro Erfmann
2026-02-10 20:02:16 +01:00
parent 9ef70e0436
commit 9a0adbf05c
7 changed files with 604 additions and 375 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
templates/goals.html
View File

@@ -1,7 +1,11 @@
{% extends "layout.html" %}
{% block content %}
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
<h2 style="margin: 0;">My Goals</h2>
<button class="btn" onclick="openGoalModal()">+ New Goal</button>
</div>
<div class="card" style="margin-bottom: 2rem;">
<h2>My Goals</h2>
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem;">
{% for goal in goals %}
<div style="border: 1px solid var(--border-dim); border-radius: 8px; padding: 1.5rem; position: relative;">
@@ -41,43 +45,76 @@
</div>
</div>
<div class="card" style="max-width: 500px;">
<h3>Set New Goal</h3>
<form method="POST">
<label>Goal Name</label>
<input type="text" name="name" placeholder="e.g. Learn Python" required>
<label>Activity (Required)</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 }}'>{{ act.name }}</option>
{% endfor %}
</select>
<div id="subcatWrapper" style="display:none;">
<label>Subcategory (Optional)</label>
<select name="subcategory" id="subcategorySelect">
<!-- Javascript will populate this -->
<!-- Goal Modal -->
<div id="goalModal" class="modal-backdrop">
<div class="modal-card">
<h3 style="margin-bottom: 1.5rem;">Set New Goal</h3>
<form method="POST">
<label>Goal Name</label>
<input type="text" name="name" placeholder="e.g. Learn Python" required>
<label>Activity (Required)</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 }}'>{{ act.name }}</option>
{% endfor %}
</select>
</div>
<label>Frequency</label>
<select name="frequency">
<option value="daily">Daily</option>
<option value="weekly">Weekly</option>
<option value="monthly">Monthly</option>
<option value="yearly">Yearly</option>
</select>
<label>Target Hours</label>
<input type="number" name="target_hours" step="0.5" placeholder="e.g. 1.0" required>
<button type="submit" class="btn" style="margin-top: 1rem;">Create Goal</button>
</form>
<div id="subcatWrapper" style="display:none;">
<label>Subcategory (Optional)</label>
<select name="subcategory" id="subcategorySelect">
<!-- Javascript will populate this -->
</select>
</div>
<label>Frequency</label>
<select name="frequency">
<option value="daily">Daily</option>
<option value="weekly">Weekly</option>
<option value="monthly">Monthly</option>
<option value="yearly">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.5" value="1.0" required>
<button type="button" onclick="stepValue(this, 0.5)">+</button>
</div>
<div style="margin-top: 2rem; display: flex; justify-content: flex-end; gap: 10px;">
<button type="button" class="btn" style="background: transparent; color: var(--text-secondary); border: 1px solid var(--border-dim);" onclick="closeGoalModal()">Cancel</button>
<button type="submit" class="btn">Create Goal</button>
</div>
</form>
</div>
</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);
}
function openGoalModal() {
const modal = document.getElementById('goalModal');
modal.classList.add('show'); // Triggers flex display and opacity transition
}
function closeGoalModal() {
const modal = document.getElementById('goalModal');
modal.classList.remove('show');
}
// Close on backdrop click
document.getElementById('goalModal').addEventListener('click', function(e) {
if (e.target === this) closeGoalModal();
});
function updateSubcategories() {
const actSelect = document.getElementById('activitySelect');
const subWrapper = document.getElementById('subcatWrapper');