298 lines
16 KiB
JavaScript
298 lines
16 KiB
JavaScript
import { api } from '../../lib/api.mjs';
|
|
|
|
const PHASES = ['all', 'before', 'during', 'after'];
|
|
|
|
class WoPhotoPanel extends HTMLElement {
|
|
#woId = null;
|
|
#photos = [];
|
|
#phase = 'all';
|
|
#loading = true;
|
|
#lightboxIdx = -1;
|
|
|
|
static get observedAttributes() { return ['wo-id']; }
|
|
|
|
connectedCallback() {
|
|
if (!this.shadowRoot) this.attachShadow({ mode: 'open' });
|
|
if (this.#woId) this.#load();
|
|
}
|
|
|
|
attributeChangedCallback(_, __, val) {
|
|
this.#woId = val ? +val : null;
|
|
if (this.shadowRoot && this.#woId) this.#load();
|
|
}
|
|
|
|
async #load() {
|
|
this.#loading = true;
|
|
this.#render();
|
|
try { this.#photos = await api.get(`/work-orders/${this.#woId}/attachments`) || []; }
|
|
catch { this.#photos = []; }
|
|
this.#loading = false;
|
|
this.#render();
|
|
}
|
|
|
|
async #upload(files, phase, caption) {
|
|
const uploads = Array.from(files).map(async file => {
|
|
const form = new FormData();
|
|
form.append('file', file);
|
|
form.append('phase', phase);
|
|
form.append('caption', caption || '');
|
|
if (navigator.geolocation) {
|
|
await new Promise(res => navigator.geolocation.getCurrentPosition(
|
|
pos => { form.append('lat', pos.coords.latitude); form.append('lng', pos.coords.longitude); res(); },
|
|
() => res(), { timeout: 3000 }
|
|
));
|
|
}
|
|
return api.upload(`/work-orders/${this.#woId}/attachments`, form);
|
|
});
|
|
try {
|
|
await Promise.all(uploads);
|
|
window.dispatchEvent(new CustomEvent('wo:toast', { detail: { message: `${files.length} photo(s) uploaded`, type: 'success' } }));
|
|
await this.#load();
|
|
} catch (err) {
|
|
window.dispatchEvent(new CustomEvent('wo:toast', { detail: { message: err.message, type: 'error' } }));
|
|
}
|
|
}
|
|
|
|
async #deletePhoto(id) {
|
|
try {
|
|
await api.delete(`/work-orders/${this.#woId}/attachments/${id}`);
|
|
await this.#load();
|
|
} catch (err) {
|
|
window.dispatchEvent(new CustomEvent('wo:toast', { detail: { message: err.message, type: 'error' } }));
|
|
}
|
|
}
|
|
|
|
#filteredPhotos() {
|
|
if (this.#phase === 'all') return this.#photos;
|
|
return this.#photos.filter(p => p.phase === this.#phase);
|
|
}
|
|
|
|
#render() {
|
|
const s = this.shadowRoot;
|
|
if (this.#loading) {
|
|
s.innerHTML = `<style>:host{display:block;padding:2rem;text-align:center}</style><ui-spinner></ui-spinner>`;
|
|
return;
|
|
}
|
|
|
|
const filtered = this.#filteredPhotos();
|
|
const phaseCounts = { all: this.#photos.length, before: 0, during: 0, after: 0 };
|
|
this.#photos.forEach(p => { if (phaseCounts[p.phase] !== undefined) phaseCounts[p.phase]++; });
|
|
|
|
s.innerHTML = `
|
|
<style>
|
|
:host { display: block; }
|
|
.phase-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 1rem; overflow-x: auto; }
|
|
.phase-tab { padding: .55rem 1rem; font-size: .875rem; font-weight: 500; color: var(--text-muted); border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; transition: color .15s; display: flex; align-items: center; gap: .35rem; }
|
|
.phase-tab.active { color: var(--teal); border-bottom-color: var(--teal); font-weight: 600; }
|
|
.phase-tab:hover:not(.active) { color: var(--text); }
|
|
.tab-count { background: var(--surface-2); border-radius: 999px; font-size: .7rem; font-weight: 700; padding: .1rem .4rem; }
|
|
.phase-tab.active .tab-count { background: var(--teal); color: #fff; }
|
|
.toolbar { display: flex; justify-content: flex-end; margin-bottom: 1rem; gap: .5rem; }
|
|
.upload-btn { display: inline-flex; align-items: center; gap: .4rem; background: var(--teal); color: #fff; border: none; border-radius: var(--radius); padding: .5rem 1rem; font-size: .875rem; font-weight: 600; cursor: pointer; transition: opacity .15s; }
|
|
.upload-btn:hover { opacity: .88; }
|
|
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
|
|
.photo-tile { position: relative; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); cursor: pointer; border: 1px solid var(--border); }
|
|
.photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
|
|
.photo-tile:hover img { transform: scale(1.04); }
|
|
.photo-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background .2s; display: flex; flex-direction: column; justify-content: flex-end; padding: .5rem; }
|
|
.photo-tile:hover .photo-overlay { background: rgba(0,0,0,.45); }
|
|
.photo-caption { color: #fff; font-size: .75rem; font-weight: 500; opacity: 0; transition: opacity .2s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.photo-tile:hover .photo-caption { opacity: 1; }
|
|
.phase-pill { position: absolute; top: .4rem; left: .4rem; background: rgba(0,0,0,.55); color: #fff; font-size: .65rem; font-weight: 700; text-transform: uppercase; padding: .15rem .4rem; border-radius: 999px; }
|
|
.del-btn { position: absolute; top: .4rem; right: .4rem; background: rgba(0,0,0,.55); color: #fff; border: none; border-radius: var(--radius-sm); cursor: pointer; padding: .25rem; display: flex; opacity: 0; transition: opacity .15s; }
|
|
.photo-tile:hover .del-btn { opacity: 1; }
|
|
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-muted); }
|
|
.empty-state p { font-size: .875rem; margin-top: .5rem; }
|
|
/* Lightbox */
|
|
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 1000; display: flex; align-items: center; justify-content: center; }
|
|
.lightbox-img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: var(--radius); }
|
|
.lightbox-close { position: fixed; top: 1rem; right: 1rem; background: rgba(255,255,255,.15); border: none; color: #fff; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
|
|
.lightbox-prev, .lightbox-next { position: fixed; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.15); border: none; color: #fff; border-radius: 50%; width: 44px; height: 44px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
|
|
.lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,.3); }
|
|
.lightbox-prev { left: 1rem; }
|
|
.lightbox-next { right: 1rem; }
|
|
.lightbox-caption { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); color: #fff; font-size: .875rem; background: rgba(0,0,0,.6); padding: .4rem 1rem; border-radius: 999px; max-width: 80vw; text-align: center; }
|
|
/* Upload dialog */
|
|
dialog { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0; box-shadow: var(--shadow-lg); width: 420px; max-width: 95vw; background: var(--surface); color: var(--text); }
|
|
dialog::backdrop { background: rgba(0,0,0,.45); }
|
|
.dlg-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
|
|
.dlg-title { font-size: 1rem; font-weight: 700; }
|
|
.dlg-close { background: none; border: none; cursor: pointer; color: var(--text-muted); display: flex; }
|
|
.dlg-body { padding: 1.25rem; display: flex; flex-direction: column; gap: .875rem; }
|
|
.field-label { font-size: .813rem; font-weight: 600; color: var(--text); display: block; margin-bottom: .3rem; }
|
|
.drop-zone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 1.5rem; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; color: var(--text-muted); font-size: .875rem; }
|
|
.drop-zone:hover, .drop-zone.drag-over { border-color: var(--teal); background: #E0F2FE; color: var(--teal); }
|
|
.drop-zone input { display: none; }
|
|
.preview-list { display: flex; flex-direction: column; gap: .35rem; max-height: 120px; overflow-y: auto; }
|
|
.preview-item { font-size: .813rem; color: var(--text-muted); display: flex; align-items: center; gap: .4rem; }
|
|
.select-field { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .5rem .75rem; font-size: .875rem; background: var(--surface); color: var(--text); }
|
|
.caption-input { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .5rem .75rem; font-size: .875rem; background: var(--surface); color: var(--text); box-sizing: border-box; }
|
|
.dlg-footer { padding: .75rem 1.25rem; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: .5rem; }
|
|
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: .45rem .9rem; font-size: .813rem; font-weight: 600; cursor: pointer; }
|
|
.btn-primary { background: var(--teal); color: #fff; border: none; border-radius: var(--radius); padding: .45rem .9rem; font-size: .813rem; font-weight: 600; cursor: pointer; }
|
|
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }
|
|
@media (max-width: 768px) { .photo-grid { grid-template-columns: repeat(2, 1fr); } .del-btn { opacity: 1; } }
|
|
</style>
|
|
|
|
<div class="phase-tabs">
|
|
${PHASES.map(ph => `
|
|
<button class="phase-tab${this.#phase === ph ? ' active' : ''}" data-phase="${ph}">
|
|
${ph.charAt(0).toUpperCase() + ph.slice(1)}
|
|
<span class="tab-count">${phaseCounts[ph] ?? 0}</span>
|
|
</button>`).join('')}
|
|
</div>
|
|
|
|
<div class="toolbar">
|
|
<button class="upload-btn" id="upload-btn">
|
|
<i data-lucide="camera" style="width:15px;height:15px"></i> Add Photos
|
|
</button>
|
|
</div>
|
|
|
|
${filtered.length === 0
|
|
? `<div class="empty-state">
|
|
<i data-lucide="image" style="width:36px;height:36px;margin:0 auto;opacity:.4;display:block"></i>
|
|
<p>${this.#phase === 'all' ? 'No photos yet' : `No ${this.#phase} photos yet`}</p>
|
|
</div>`
|
|
: `<div class="photo-grid">
|
|
${filtered.map((p, i) => `
|
|
<div class="photo-tile" data-idx="${i}">
|
|
<img src="${this.#esc(p.url)}" alt="${this.#esc(p.caption)}" loading="lazy">
|
|
<div class="photo-overlay">
|
|
${p.caption ? `<div class="photo-caption">${this.#esc(p.caption)}</div>` : ''}
|
|
</div>
|
|
${p.phase ? `<div class="phase-pill">${p.phase}</div>` : ''}
|
|
<button class="del-btn" data-id="${p.id}" title="Delete photo">
|
|
<i data-lucide="trash-2" style="width:13px;height:13px"></i>
|
|
</button>
|
|
</div>`).join('')}
|
|
</div>`}
|
|
|
|
<dialog id="upload-dialog">
|
|
<div class="dlg-header">
|
|
<span class="dlg-title">Add Photos</span>
|
|
<button class="dlg-close" id="dlg-close"><i data-lucide="x" style="width:16px;height:16px"></i></button>
|
|
</div>
|
|
<div class="dlg-body">
|
|
<div>
|
|
<label class="field-label">Photos</label>
|
|
<div class="drop-zone" id="drop-zone">
|
|
<i data-lucide="upload-cloud" style="width:24px;height:24px;margin:0 auto .5rem;display:block"></i>
|
|
Click to select photos or drag & drop here
|
|
<input type="file" id="file-input" accept="image/*" multiple capture="environment">
|
|
</div>
|
|
<div class="preview-list" id="preview-list"></div>
|
|
</div>
|
|
<div>
|
|
<label class="field-label" for="phase-select">Phase</label>
|
|
<select class="select-field" id="phase-select">
|
|
<option value="">— Select phase —</option>
|
|
<option value="before">Before</option>
|
|
<option value="during">During</option>
|
|
<option value="after">After</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="field-label" for="caption-input">Caption (optional)</label>
|
|
<input class="caption-input" id="caption-input" type="text" placeholder="Describe what's in the photo…" maxlength="500">
|
|
</div>
|
|
</div>
|
|
<div class="dlg-footer">
|
|
<button class="btn-ghost" id="dlg-cancel">Cancel</button>
|
|
<button class="btn-primary" id="dlg-upload" disabled>Upload</button>
|
|
</div>
|
|
</dialog>`;
|
|
|
|
if (window.lucide) lucide.createIcons({ nodes: [s] });
|
|
this.#bindEvents(filtered);
|
|
}
|
|
|
|
#bindEvents(filtered) {
|
|
const s = this.shadowRoot;
|
|
|
|
s.querySelectorAll('.phase-tab').forEach(tab =>
|
|
tab.addEventListener('click', () => { this.#phase = tab.dataset.phase; this.#render(); }));
|
|
|
|
s.querySelectorAll('.photo-tile').forEach(tile =>
|
|
tile.addEventListener('click', e => {
|
|
if (e.target.closest('.del-btn')) return;
|
|
this.#openLightbox(+tile.dataset.idx, filtered);
|
|
}));
|
|
|
|
s.querySelectorAll('.del-btn').forEach(btn =>
|
|
btn.addEventListener('click', e => { e.stopPropagation(); this.#deletePhoto(+btn.dataset.id); }));
|
|
|
|
const dialog = s.querySelector('#upload-dialog');
|
|
const fileInput = s.querySelector('#file-input');
|
|
const dropZone = s.querySelector('#drop-zone');
|
|
const preview = s.querySelector('#preview-list');
|
|
const uploadBtn = s.querySelector('#dlg-upload');
|
|
|
|
s.querySelector('#upload-btn').addEventListener('click', () => {
|
|
s.querySelector('#phase-select').value = this.#phase !== 'all' ? this.#phase : '';
|
|
s.querySelector('#caption-input').value = '';
|
|
preview.innerHTML = '';
|
|
uploadBtn.disabled = true;
|
|
dialog.showModal();
|
|
});
|
|
|
|
s.querySelector('#dlg-close').addEventListener('click', () => dialog.close());
|
|
s.querySelector('#dlg-cancel').addEventListener('click', () => dialog.close());
|
|
|
|
dropZone.addEventListener('click', () => fileInput.click());
|
|
dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('drag-over'); });
|
|
dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag-over'));
|
|
dropZone.addEventListener('drop', e => {
|
|
e.preventDefault();
|
|
dropZone.classList.remove('drag-over');
|
|
this.#setFiles(e.dataTransfer.files, preview, uploadBtn);
|
|
});
|
|
fileInput.addEventListener('change', () => this.#setFiles(fileInput.files, preview, uploadBtn));
|
|
|
|
s.querySelector('#dlg-upload').addEventListener('click', () => {
|
|
const files = fileInput.files;
|
|
const phase = s.querySelector('#phase-select').value;
|
|
const caption = s.querySelector('#caption-input').value;
|
|
dialog.close();
|
|
this.#upload(files, phase, caption);
|
|
});
|
|
}
|
|
|
|
#setFiles(files, preview, btn) {
|
|
preview.innerHTML = Array.from(files).map(f =>
|
|
`<div class="preview-item"><i data-lucide="image" style="width:13px;height:13px"></i> ${this.#esc(f.name)}</div>`
|
|
).join('');
|
|
if (window.lucide) lucide.createIcons({ nodes: [preview] });
|
|
btn.disabled = files.length === 0;
|
|
}
|
|
|
|
#openLightbox(idx, photos) {
|
|
const s = this.shadowRoot;
|
|
const show = (i) => {
|
|
const existing = s.querySelector('.lightbox');
|
|
if (existing) existing.remove();
|
|
if (i < 0 || i >= photos.length) return;
|
|
const p = photos[i];
|
|
const lb = document.createElement('div');
|
|
lb.className = 'lightbox';
|
|
lb.innerHTML = `
|
|
<button class="lightbox-close"><i data-lucide="x" style="width:18px;height:18px"></i></button>
|
|
<img class="lightbox-img" src="${this.#esc(p.url)}" alt="${this.#esc(p.caption)}">
|
|
${photos.length > 1 ? `
|
|
<button class="lightbox-prev"><i data-lucide="chevron-left" style="width:20px;height:20px"></i></button>
|
|
<button class="lightbox-next"><i data-lucide="chevron-right" style="width:20px;height:20px"></i></button>` : ''}
|
|
${p.caption ? `<div class="lightbox-caption">${this.#esc(p.caption)}</div>` : ''}`;
|
|
s.appendChild(lb);
|
|
if (window.lucide) lucide.createIcons({ nodes: [lb] });
|
|
lb.querySelector('.lightbox-close').addEventListener('click', () => lb.remove());
|
|
lb.addEventListener('click', e => { if (e.target === lb) lb.remove(); });
|
|
lb.querySelector('.lightbox-prev')?.addEventListener('click', e => { e.stopPropagation(); show(i - 1); });
|
|
lb.querySelector('.lightbox-next')?.addEventListener('click', e => { e.stopPropagation(); show(i + 1); });
|
|
};
|
|
show(idx);
|
|
}
|
|
|
|
#esc(s) { return (s || '').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'); }
|
|
}
|
|
|
|
customElements.define('wo-photo-panel', WoPhotoPanel);
|