04/30 Web Checker web app ver. 1.0

This commit is contained in:
2026-04-30 17:15:56 -04:00
parent feb8e5051c
commit cd63d5a020
39 changed files with 8031 additions and 1 deletions
+173
View File
@@ -0,0 +1,173 @@
{% extends "base.html" %}
{% block title %}Shifts — Website Checker{% endblock %}
{% block content %}
<div class="page-header">
<h1 class="page-title">Shift Management</h1>
<button class="btn btn-primary" onclick="openModal('modal-create-shift')"> New Shift</button>
</div>
<div class="card">
<table class="table table-hover">
<thead>
<tr><th>Name</th><th>Days</th><th>Time</th><th>Users</th><th>Sites</th><th>Active</th><th>Actions</th></tr>
</thead>
<tbody>
{% for s in shifts %}
<tr>
<td><strong>{{ s.name }}</strong><br><span class="text-muted text-sm">{{ s.note or '' }}</span></td>
<td>{{ s.days_of_week }}</td>
<td class="text-muted">{{ s.start_time }} {{ s.end_time }}</td>
<td>{{ s.user_count }}</td>
<td>{{ s.website_count }}</td>
<td><span class="badge badge-{{ 'success' if s.is_active else 'neutral' }}">{{ 'Active' if s.is_active else 'Inactive' }}</span></td>
<td class="actions">
<button class="btn btn-ghost btn-sm" onclick="loadEditShift({{ s.id }})">✎ Edit</button>
<form method="post" action="{{ url_for('admin_shifts.delete', shift_id=s.id) }}"
style="display:inline" onsubmit="return confirm('Deactivate shift {{ s.name }}?')">
<button class="btn btn-danger btn-sm" type="submit"></button>
</form>
</td>
</tr>
{% else %}
<tr><td colspan="7" class="text-center text-muted">No shifts configured.</td></tr>
{% endfor %}
</tbody>
</table>
</div>
<!-- Create Shift Modal -->
<div class="modal-overlay" id="modal-create-shift">
<div class="modal-dialog modal-lg">
<div class="modal-header">
<h3>New Shift</h3>
<button class="modal-close" onclick="closeModal('modal-create-shift')"></button>
</div>
<form method="post" action="{{ url_for('admin_shifts.create') }}">
<div class="modal-body">
<div class="form-group">
<label class="form-label">Shift Name *</label>
<input class="form-control" name="name" required>
</div>
<div class="form-group">
<label class="form-label">Days of Week</label>
<div class="day-checkboxes">
{% for label, val in day_map %}
<label class="day-check">
<input type="checkbox" name="days_of_week[]" value="{{ val }}"> {{ label }}
</label>
{% endfor %}
</div>
</div>
<div class="form-row">
<div class="form-group flex-1">
<label class="form-label">Start Time</label>
<input class="form-control" type="time" name="start_time" value="08:00">
</div>
<div class="form-group flex-1">
<label class="form-label">End Time</label>
<input class="form-control" type="time" name="end_time" value="17:00">
</div>
</div>
<div class="form-group">
<label class="form-label">Assign Users</label>
<div class="checkbox-list">
{% for u in all_users %}
<label><input type="checkbox" name="user_ids[]" value="{{ u.id }}"> {{ u.username }}</label>
{% endfor %}
</div>
</div>
<div class="form-group">
<label class="form-label">Assign Websites</label>
<div class="checkbox-list">
{% for w in all_sites %}
<label><input type="checkbox" name="website_ids[]" value="{{ w.id }}"> {{ w.name }}</label>
{% endfor %}
</div>
</div>
<div class="form-group">
<label class="form-label">Note</label>
<textarea class="form-control" name="note" rows="2"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-ghost" onclick="closeModal('modal-create-shift')">Cancel</button>
<button type="submit" class="btn btn-primary">Create Shift</button>
</div>
</form>
</div>
</div>
<!-- Edit Shift Modal -->
<div class="modal-overlay" id="modal-edit-shift">
<div class="modal-dialog modal-lg">
<div class="modal-header">
<h3>Edit Shift</h3>
<button class="modal-close" onclick="closeModal('modal-edit-shift')"></button>
</div>
<form method="post" id="edit-shift-form">
<div class="modal-body" id="edit-shift-body"><div class="text-center text-muted">Loading…</div></div>
<div class="modal-footer">
<button type="button" class="btn btn-ghost" onclick="closeModal('modal-edit-shift')">Cancel</button>
<button type="submit" class="btn btn-primary">Save Changes</button>
</div>
</form>
</div>
</div>
<script>
const ALL_USERS = {{ all_users | tojson }};
const ALL_SITES = {{ all_sites | tojson }};
const DAY_MAP = {{ day_map | tojson }};
function loadEditShift(id) {
fetch('/admin/shifts/' + id + '/detail')
.then(r => r.json())
.then(s => {
document.getElementById('edit-shift-form').action = '/admin/shifts/' + id + '/edit';
document.getElementById('edit-shift-body').innerHTML = buildShiftForm(s);
openModal('modal-edit-shift');
});
}
function buildShiftForm(s) {
const days = DAY_MAP.map(([lbl, val]) => `
<label class="day-check">
<input type="checkbox" name="days_of_week[]" value="${val}"
${s.days_of_week.includes(val)?'checked':''}>${lbl}
</label>`).join('');
const users = ALL_USERS.map(u => `
<label><input type="checkbox" name="user_ids[]" value="${u.id}"
${s.user_ids.includes(u.id)?'checked':''}> ${u.username}</label>`).join('');
const sites = ALL_SITES.map(w => `
<label><input type="checkbox" name="website_ids[]" value="${w.id}"
${s.website_ids.includes(w.id)?'checked':''}> ${w.name}</label>`).join('');
return `
<div class="form-group"><label class="form-label">Shift Name *</label>
<input class="form-control" name="name" value="${esc(s.name)}" required></div>
<div class="form-group"><label class="form-label">Days of Week</label>
<div class="day-checkboxes">${days}</div></div>
<div class="form-row">
<div class="form-group flex-1"><label class="form-label">Start Time</label>
<input class="form-control" type="time" name="start_time" value="${esc(s.start_time)}"></div>
<div class="form-group flex-1"><label class="form-label">End Time</label>
<input class="form-control" type="time" name="end_time" value="${esc(s.end_time)}"></div>
</div>
<div class="form-group"><label class="form-label">Active</label>
<select class="form-control" name="is_active">
<option value="1" ${s.is_active?'selected':''}>Yes</option>
<option value="0" ${!s.is_active?'selected':''}>No</option>
</select></div>
<div class="form-group"><label class="form-label">Assign Users</label>
<div class="checkbox-list">${users}</div></div>
<div class="form-group"><label class="form-label">Assign Websites</label>
<div class="checkbox-list">${sites}</div></div>
<div class="form-group"><label class="form-label">Note</label>
<textarea class="form-control" name="note" rows="2">${esc(s.note)}</textarea></div>`;
}
function esc(s) { return (s||'').replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;'); }
</script>
{% endblock %}