Initialize work order management system with database schema, API handlers, web client, and Docker configuration.
This commit is contained in:
@@ -0,0 +1,115 @@
|
||||
import { api } from '../lib/api.mjs';
|
||||
|
||||
class WoForm extends HTMLElement {
|
||||
#woId = null;
|
||||
#wo = null;
|
||||
|
||||
static get observedAttributes() { return ['wo-id']; }
|
||||
attributeChangedCallback(_, __, val) { this.#woId = val ? +val : null; this.#load(); }
|
||||
|
||||
connectedCallback() {
|
||||
this.attachShadow({ mode: 'open' });
|
||||
this.#render();
|
||||
if (this.#woId) this.#load();
|
||||
}
|
||||
|
||||
async #load() {
|
||||
if (!this.#woId) return;
|
||||
this.#wo = await api.get(`/work-orders/${this.#woId}`);
|
||||
this.#render();
|
||||
}
|
||||
|
||||
#render() {
|
||||
const wo = this.#wo ?? {};
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
:host { display: block; }
|
||||
form { display: grid; gap: 1rem; }
|
||||
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
|
||||
label { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; font-weight: 600; color: #1a2e3b; }
|
||||
input, select, textarea {
|
||||
border: 1px solid #e2ebf0; border-radius: 8px;
|
||||
padding: .5rem .75rem; font-size: .95rem; background: #fff; color: #1a2e3b;
|
||||
}
|
||||
input:focus, select:focus, textarea:focus { outline: none; border-color: #0a7ea4; }
|
||||
textarea { resize: vertical; min-height: 80px; }
|
||||
.actions { display: flex; gap: .75rem; justify-content: flex-end; }
|
||||
button {
|
||||
padding: .5rem 1.25rem; border: none; border-radius: 8px;
|
||||
font-weight: 600; cursor: pointer;
|
||||
}
|
||||
.btn-primary { background: #0a7ea4; color: #fff; }
|
||||
.btn-cancel { background: transparent; border: 1px solid #e2ebf0; color: #1a2e3b; }
|
||||
.error { color: #c0392b; font-size: .85rem; }
|
||||
</style>
|
||||
<form>
|
||||
<label>Title *<input name="title" required value="${wo.title || ''}"></label>
|
||||
<div class="row">
|
||||
<label>Priority
|
||||
<select name="priority">
|
||||
${['low','normal','high','urgent'].map(p =>
|
||||
`<option value="${p}" ${wo.priority===p?'selected':''}>${p}</option>`).join('')}
|
||||
</select>
|
||||
</label>
|
||||
<label>Site Name<input name="site_name" value="${wo.site_name || ''}"></label>
|
||||
</div>
|
||||
<label>Address<input name="address" value="${wo.address || ''}"></label>
|
||||
<div class="row">
|
||||
<label>Scheduled Start<input type="datetime-local" name="scheduled_start"
|
||||
value="${wo.scheduled_start ? wo.scheduled_start.slice(0,16) : ''}"></label>
|
||||
<label>Scheduled End<input type="datetime-local" name="scheduled_end"
|
||||
value="${wo.scheduled_end ? wo.scheduled_end.slice(0,16) : ''}"></label>
|
||||
</div>
|
||||
<label>Description<textarea name="description">${wo.description || ''}</textarea></label>
|
||||
<label>Instructions<textarea name="instructions">${wo.instructions || ''}</textarea></label>
|
||||
<label>Access Notes<textarea name="access_notes">${wo.access_notes || ''}</textarea></label>
|
||||
<div class="error" id="err"></div>
|
||||
<div class="actions">
|
||||
<button type="button" class="btn-cancel" id="cancel">Cancel</button>
|
||||
<button type="submit" class="btn-primary">${this.#woId ? 'Save Changes' : 'Create Work Order'}</button>
|
||||
</div>
|
||||
</form>`;
|
||||
|
||||
this.shadowRoot.querySelector('#cancel').addEventListener('click', () =>
|
||||
this.dispatchEvent(new CustomEvent('wo:cancel', { bubbles: true, composed: true })));
|
||||
|
||||
this.shadowRoot.querySelector('form').addEventListener('submit', async e => {
|
||||
e.preventDefault();
|
||||
|
||||
// Read fields directly — Shadow DOM + FormData has unreliable browser support
|
||||
const val = name => (this.shadowRoot.querySelector(`[name="${name}"]`)?.value ?? '').trim();
|
||||
// datetime-local gives "YYYY-MM-DDTHH:MM"; convert to full ISO so Go can parse it
|
||||
const dt = name => { const v = val(name); return v ? new Date(v).toISOString() : null; };
|
||||
|
||||
const body = {
|
||||
title: val('title'),
|
||||
priority: val('priority') || 'normal',
|
||||
site_name: val('site_name'),
|
||||
address: val('address'),
|
||||
scheduled_start: dt('scheduled_start'),
|
||||
scheduled_end: dt('scheduled_end'),
|
||||
description: val('description'),
|
||||
instructions: val('instructions'),
|
||||
access_notes: val('access_notes'),
|
||||
};
|
||||
|
||||
if (!body.title) {
|
||||
this.shadowRoot.querySelector('#err').textContent = 'Title is required.';
|
||||
return;
|
||||
}
|
||||
|
||||
this.shadowRoot.querySelector('#err').textContent = '';
|
||||
try {
|
||||
const wo = this.#woId
|
||||
? await api.put(`/work-orders/${this.#woId}`, body)
|
||||
: await api.post('/work-orders', body);
|
||||
this.dispatchEvent(new CustomEvent('wo:saved',
|
||||
{ detail: { wo }, bubbles: true, composed: true }));
|
||||
} catch (err) {
|
||||
this.shadowRoot.querySelector('#err').textContent = err.message;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('wo-form', WoForm);
|
||||
@@ -0,0 +1,66 @@
|
||||
import { api } from '../lib/api.mjs';
|
||||
|
||||
class WoList extends HTMLElement {
|
||||
#data = [];
|
||||
|
||||
connectedCallback() {
|
||||
this.attachShadow({ mode: 'open' });
|
||||
this.#load();
|
||||
}
|
||||
|
||||
async #load() {
|
||||
const status = this.getAttribute('filter-status') || '';
|
||||
this.#data = await api.get(`/work-orders?status=${status}`) ?? [];
|
||||
this.#render();
|
||||
}
|
||||
|
||||
refresh() { this.#load(); }
|
||||
|
||||
#render() {
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
:host { display: block; }
|
||||
.empty { color: #64748b; text-align: center; padding: 3rem; }
|
||||
.grid { display: grid; gap: .75rem; }
|
||||
.card {
|
||||
background: #fff; border: 1px solid #e2ebf0;
|
||||
border-radius: 8px; padding: 1rem 1.25rem;
|
||||
cursor: pointer; display: grid;
|
||||
grid-template-columns: 1fr auto; gap: .25rem 1rem;
|
||||
transition: box-shadow .15s;
|
||||
}
|
||||
.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); }
|
||||
.wo-num { font-size: .75rem; color: #64748b; }
|
||||
.title { font-weight: 600; }
|
||||
.meta { font-size: .8rem; color: #64748b; }
|
||||
.badge { display:inline-block; padding:.2rem .6rem; border-radius:999px;
|
||||
font-size:.7rem; font-weight:700; text-transform:uppercase;
|
||||
align-self: start; margin-top:.25rem; }
|
||||
.draft { background:#e2e8f0; color:#475569; }
|
||||
.assigned { background:#dbeafe; color:#1d4ed8; }
|
||||
.scheduled { background:#fef3c7; color:#92400e; }
|
||||
.in_progress { background:#d1fae5; color:#065f46; }
|
||||
.pending_review { background:#ede9fe; color:#5b21b6; }
|
||||
.closed { background:#f3f4f6; color:#6b7280; }
|
||||
</style>
|
||||
${this.#data.length === 0
|
||||
? '<div class="empty">No work orders found.</div>'
|
||||
: `<div class="grid">${this.#data.map(wo => `
|
||||
<div class="card" data-id="${wo.id}">
|
||||
<div>
|
||||
<div class="wo-num">${wo.wo_number}</div>
|
||||
<div class="title">${wo.title}</div>
|
||||
<div class="meta">${wo.site_name || '—'} · ${wo.steps_done}/${wo.step_count} steps</div>
|
||||
</div>
|
||||
<span class="badge ${wo.status}">${wo.status.replace('_',' ')}</span>
|
||||
</div>`).join('')}
|
||||
</div>`}`;
|
||||
|
||||
this.shadowRoot.querySelectorAll('.card').forEach(c =>
|
||||
c.addEventListener('click', () =>
|
||||
this.dispatchEvent(new CustomEvent('wo:select',
|
||||
{ detail: { id: +c.dataset.id }, bubbles: true, composed: true }))));
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('wo-list', WoList);
|
||||
Reference in New Issue
Block a user