80 lines
2.2 KiB
Cheetah
80 lines
2.2 KiB
Cheetah
{{define "customers"}}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
{{template "head" .}}
|
|
<body>
|
|
{{template "topbar" .}}
|
|
{{template "breadcrumbs" .}}
|
|
|
|
<main class="container">
|
|
<section class="card">
|
|
<h2>Create Customer</h2>
|
|
<form class="form" id="create-customer-form">
|
|
<div class="field">
|
|
<label for="customer-name">Name</label>
|
|
<input id="customer-name" class="input" type="text" required />
|
|
</div>
|
|
<button class="button" type="submit">Create</button>
|
|
<div class="meta" id="create-customer-message"></div>
|
|
</form>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2>All Customers</h2>
|
|
{{if .Customers}}
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Created</th>
|
|
<th>Updated</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{range .Customers}}
|
|
<tr>
|
|
<td>{{.Name}}</td>
|
|
<td title="{{formatTimeFull .CreatedAt}}">{{formatTime .CreatedAt}}</td>
|
|
<td title="{{formatTimeFull .UpdatedAt}}">{{formatTime .UpdatedAt}}</td>
|
|
</tr>
|
|
{{end}}
|
|
</tbody>
|
|
</table>
|
|
{{else}}
|
|
<div class="meta">No customers yet.</div>
|
|
{{end}}
|
|
</section>
|
|
</main>
|
|
<script>
|
|
const customerForm = document.getElementById('create-customer-form');
|
|
const customerMessage = document.getElementById('create-customer-message');
|
|
|
|
customerForm.addEventListener('submit', async (event) => {
|
|
event.preventDefault();
|
|
customerMessage.textContent = '';
|
|
|
|
const name = document.getElementById('customer-name').value.trim();
|
|
if (!name) {
|
|
customerMessage.textContent = 'Customer name is required.';
|
|
return;
|
|
}
|
|
|
|
const response = await fetch('/customers', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({name})
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const payload = await response.json().catch(() => ({error: 'Create failed'}));
|
|
customerMessage.textContent = payload.error || 'Create failed';
|
|
return;
|
|
}
|
|
|
|
window.location.reload();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
{{end}}
|