Add index template

This commit is contained in:
2025-12-10 10:09:01 +11:00
parent f07f40aa9c
commit 79122b12bc

152
templates/index.html Normal file
View File

@@ -0,0 +1,152 @@
{% extends "base.html" %}
{% block title %}Raccoon Timekeeper - Log Time{% endblock %}
{% block content %}
<div class="content-grid">
<!-- Time Entry Form -->
<section class="card">
<div class="card-header">
<h2>Log Time</h2>
</div>
<div class="card-body">
<form id="timeEntryForm" class="time-entry-form">
<div class="form-row">
<div class="form-group flex-2">
<label for="taskSelect">Task</label>
<select id="taskSelect" required>
<option value="">Select a task...</option>
</select>
</div>
<div class="form-group flex-1">
<label for="dateInput">Date</label>
<input type="date" id="dateInput" required>
</div>
<div class="form-group flex-1">
<label for="timeInput">Time</label>
<input type="text" id="timeInput" placeholder="1:30, 1.5, 90m" required>
<span class="hint">Formats: 1:30, 1.5, 90m, 1h 30m</span>
</div>
</div>
<div class="form-group">
<label for="notesInput">Notes (optional)</label>
<input type="text" id="notesInput" placeholder="Brief description of work done...">
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">
<span>+</span> Add Entry
</button>
</div>
</form>
</div>
</section>
<!-- Weekly Summary -->
<section class="card">
<div class="card-header">
<h2>Weekly Summary</h2>
<div class="week-navigator">
<button class="btn btn-icon" id="prevWeek" title="Previous Week"></button>
<span id="weekLabel">Loading...</span>
<button class="btn btn-icon" id="nextWeek" title="Next Week"></button>
</div>
</div>
<div class="card-body">
<div id="summaryContent">
<div class="loading">Loading summary...</div>
</div>
<div class="summary-actions">
<button class="btn btn-secondary" id="printTimesheetBtn">
🖨️ Print Timesheet
</button>
</div>
</div>
</section>
<!-- Recent Entries -->
<section class="card">
<div class="card-header">
<h2>Recent Entries</h2>
<span class="badge" id="entryCount">0 entries</span>
</div>
<div class="card-body">
<div id="recentEntries">
<div class="loading">Loading entries...</div>
</div>
</div>
</section>
</div>
<!-- New Task Modal -->
<div id="newTaskModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3>Add New Task</h3>
<button class="modal-close" onclick="closeModal('newTaskModal')">&times;</button>
</div>
<div class="modal-body">
<form id="newTaskForm">
<div class="form-group">
<label for="newTaskName">Task Name</label>
<input type="text" id="newTaskName" required placeholder="Enter task name...">
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" onclick="closeModal('newTaskModal')">Cancel</button>
<button class="btn btn-primary" onclick="submitNewTask()">Add Task</button>
</div>
</div>
</div>
<!-- Edit Entry Modal -->
<div id="editEntryModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3>Edit Entry</h3>
<button class="modal-close" onclick="closeModal('editEntryModal')">&times;</button>
</div>
<div class="modal-body">
<form id="editEntryForm">
<input type="hidden" id="editEntryId">
<div class="form-group">
<label for="editTaskSelect">Task</label>
<select id="editTaskSelect" required></select>
</div>
<div class="form-row">
<div class="form-group flex-1">
<label for="editDateInput">Date</label>
<input type="date" id="editDateInput" required>
</div>
<div class="form-group flex-1">
<label for="editTimeInput">Time</label>
<input type="text" id="editTimeInput" required>
</div>
</div>
<div class="form-group">
<label for="editNotesInput">Notes</label>
<input type="text" id="editNotesInput">
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-danger" onclick="deleteCurrentEntry()">Delete</button>
<button class="btn btn-secondary" onclick="closeModal('editEntryModal')">Cancel</button>
<button class="btn btn-primary" onclick="submitEditEntry()">Save Changes</button>
</div>
</div>
</div>
<!-- Print Template -->
<div id="printTemplate" class="print-only">
<div class="print-header">
<h1>🦝 Raccoon Timekeeper - Weekly Timesheet</h1>
<div class="print-period" id="printPeriod"></div>
</div>
<div id="printContent"></div>
</div>
{% endblock %}
{% block extra_js %}
<script src="{{ url_for('static', filename='js/index.js') }}"></script>
{% endblock %}