272 lines
4.9 KiB
HTML
272 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Time Clock</title>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<h1>Simple Time Clock</h1>
|
|
|
|
<h2>Currently Clocked In</h2>
|
|
|
|
{% if clocked_in_users %}
|
|
<ul>
|
|
{% for user in clocked_in_users %}
|
|
<li>
|
|
{{ user.name }} —
|
|
since
|
|
<span class="tztime" data-ts="{{ user.since }}">
|
|
{{ user.since }}
|
|
</span>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% else %}
|
|
<p>No users are currently clocked in.</p>
|
|
{% endif %}
|
|
|
|
<br/>
|
|
|
|
{% if all_user_reports %}
|
|
|
|
<h2>Last 7 Days Report</h2>
|
|
|
|
<table border="1" cellpadding="5">
|
|
|
|
<tr>
|
|
<th>User</th>
|
|
<th>Total Hours Worked</th>
|
|
<th>Paid Hours</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
|
|
{% for report in all_user_reports %}
|
|
<tr>
|
|
<td>{{ report.name }}</td>
|
|
<td>{{ report.total_hours }}</td>
|
|
<td>{{ report.paid_hours }}</td>
|
|
<td>
|
|
<ul>
|
|
{% for action in report.actions %}
|
|
<li>{{ action }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
|
|
</table>
|
|
|
|
<br>
|
|
|
|
{% endif %}
|
|
|
|
<hr/>
|
|
<br/>
|
|
|
|
<form method="POST" id="timeclock-form">
|
|
|
|
<input
|
|
type="hidden"
|
|
id="client_timezone"
|
|
name="client_timezone"
|
|
value=""/>
|
|
|
|
<input
|
|
type="hidden"
|
|
name="client_timestamp"
|
|
id="client_timestamp"
|
|
>
|
|
|
|
<table border="1" cellpadding="5">
|
|
|
|
<tr>
|
|
<td>User</td>
|
|
|
|
<td>
|
|
<select name="user_id">
|
|
|
|
{% for user in users %}
|
|
<option
|
|
value="{{ user.id }}"
|
|
{% if selected_user_id == user.id %}
|
|
selected
|
|
{% endif %}
|
|
>
|
|
{{ user.name }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>Clock Actions</td>
|
|
|
|
<td>
|
|
|
|
<button
|
|
type="submit"
|
|
name="action"
|
|
value="clock_in"
|
|
onclick="setCurrentTimestamp()"
|
|
>
|
|
Clock In
|
|
</button>
|
|
|
|
<button
|
|
type="submit"
|
|
name="action"
|
|
value="clock_out"
|
|
onclick="setCurrentTimestamp()"
|
|
>
|
|
Clock Out
|
|
</button>
|
|
|
|
<button
|
|
type="submit"
|
|
name="action"
|
|
value="pay"
|
|
onclick="setCurrentTimestamp()"
|
|
>
|
|
Pay
|
|
</button>
|
|
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>Begin Date</td>
|
|
|
|
<td>
|
|
<input
|
|
type="datetime-local"
|
|
name="begin_date"
|
|
id="begin_date"
|
|
value="">
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>End Date</td>
|
|
|
|
<td>
|
|
<input
|
|
type="datetime-local"
|
|
name="end_date"
|
|
id="end_date"
|
|
value=""
|
|
>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>Comments</td>
|
|
|
|
<td>
|
|
<textarea
|
|
name="comments"
|
|
id="comments"
|
|
rows="5" cols="72"
|
|
></textarea>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>Report</td>
|
|
|
|
<td>
|
|
<button
|
|
type="submit"
|
|
name="action"
|
|
value="report"
|
|
>
|
|
Generate Report
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
|
|
</table>
|
|
|
|
</form>
|
|
|
|
<br>
|
|
|
|
{% if user_report is not none %}
|
|
|
|
<h2>Custom Report</h2>
|
|
|
|
<table border="1" cellpadding="5">
|
|
|
|
<tr>
|
|
<th>Total Hours Worked</th>
|
|
<th>Paid Hours</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>{{ user_report.total_hours }}</td>
|
|
<td>{{ user_report.paid_hours }}</td>
|
|
<td>
|
|
<ul>
|
|
{% for action in user_report.actions %}
|
|
<li>{{ action }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
|
|
</table>
|
|
|
|
{% endif %}
|
|
|
|
<script>
|
|
|
|
function getFormattedOffset() {
|
|
const offset = new Date().getTimezoneOffset();
|
|
const absMinutes = Math.abs(offset);
|
|
|
|
// Invert the sign to match standard UTC notation
|
|
const sign = offset <= 0 ? "+" : "-";
|
|
|
|
const hours = String(Math.floor(absMinutes / 60)).padStart(2, "0");
|
|
const minutes = String(absMinutes % 60).padStart(2, "0");
|
|
|
|
return `${sign}${hours}:${minutes}`;
|
|
}
|
|
|
|
function localDatetimeValue(date) {
|
|
const pad = (v) => String(v).padStart(2, "0");
|
|
return (
|
|
date.getFullYear() + "-" +
|
|
pad(date.getMonth() + 1) + "-" +
|
|
pad(date.getDate()) + "T" +
|
|
pad(date.getHours()) + ":" +
|
|
pad(date.getMinutes())
|
|
);
|
|
}
|
|
|
|
function setCurrentTimestamp() {
|
|
document.getElementById("client_timestamp").value = new Date().toISOString();
|
|
}
|
|
|
|
window.addEventListener("load", () => {
|
|
const now = new Date();
|
|
const weekAgo = new Date();
|
|
weekAgo.setDate(now.getDate() - 7);
|
|
document.getElementById("client_timezone").value = getFormattedOffset();
|
|
document.getElementById("begin_date").value = localDatetimeValue(weekAgo);
|
|
document.getElementById("end_date").value = localDatetimeValue(now);
|
|
document.querySelectorAll(".tztime").forEach((el) => {
|
|
const ts = el.dataset.ts;
|
|
const d = new Date(ts);
|
|
el.textContent = d.toLocaleString();
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|