refactor: remove extract.js and checkin.js
All extraction and check-in interactivity is now handled by Datastar signals and inline FileReader JS. No separate JavaScript files remain.
This commit is contained in:
Jon Seager
parent
e4a304b406
commit
2a94b87d49
2 changed files with 0 additions and 314 deletions
|
|
@ -1,257 +0,0 @@
|
||||||
// Check-in page — minimal JS for browser APIs and async operations.
|
|
||||||
// All state management and UI logic lives in Datastar signals (checkin.html).
|
|
||||||
// JS dispatches custom events to bridge async results back to Datastar.
|
|
||||||
|
|
||||||
const _root = () => document.getElementById('checkin-root');
|
|
||||||
|
|
||||||
const emit = (name, detail = {}) =>
|
|
||||||
_root().dispatchEvent(new CustomEvent(name, { detail, bubbles: true }));
|
|
||||||
|
|
||||||
// --- State mirror ---
|
|
||||||
// Tracks signal values via event listeners so submitCheckIn() can read them
|
|
||||||
// without accessing Datastar internals.
|
|
||||||
|
|
||||||
let _cafeId = '';
|
|
||||||
let _cafeName = '';
|
|
||||||
let _cafeCity = '';
|
|
||||||
let _cafeCountry = '';
|
|
||||||
let _cafeLat = 0;
|
|
||||||
let _cafeLng = 0;
|
|
||||||
let _cafeWebsite = '';
|
|
||||||
let _roastId = '';
|
|
||||||
let _rating = 0;
|
|
||||||
let _submitting = false;
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
const root = _root();
|
|
||||||
if (!root) return;
|
|
||||||
|
|
||||||
root.addEventListener('cafe-selected', (e) => {
|
|
||||||
_cafeId = String(e.detail.id);
|
|
||||||
_cafeName = e.detail.name;
|
|
||||||
_cafeCity = e.detail.city || '';
|
|
||||||
_cafeCountry = e.detail.country || '';
|
|
||||||
_cafeLat = e.detail.lat || 0;
|
|
||||||
_cafeLng = e.detail.lng || 0;
|
|
||||||
_cafeWebsite = e.detail.website || '';
|
|
||||||
});
|
|
||||||
|
|
||||||
root.addEventListener('scan-complete', (e) => {
|
|
||||||
_roastId = e.detail.roastId;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Track roast selection from the dropdown
|
|
||||||
root.addEventListener('change', (e) => {
|
|
||||||
if (e.target.tagName === 'SELECT' && e.target.value) {
|
|
||||||
_roastId = e.target.value;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Track rating clicks via aria-label convention
|
|
||||||
root.addEventListener('click', (e) => {
|
|
||||||
const star = e.target.closest('[aria-label^="Rate"]');
|
|
||||||
if (!star) return;
|
|
||||||
const match = star.getAttribute('aria-label')?.match(/Rate (\d)/);
|
|
||||||
if (match) _rating = parseInt(match[1], 10);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// --- Geolocation (browser API) ---
|
|
||||||
|
|
||||||
const locateUser = () => {
|
|
||||||
if (!navigator.geolocation) {
|
|
||||||
emit('location-error', { message: 'Geolocation is not supported by your browser.' });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
emit('location-start');
|
|
||||||
|
|
||||||
navigator.geolocation.getCurrentPosition(
|
|
||||||
(pos) => emit('location-found', { lat: pos.coords.latitude, lng: pos.coords.longitude }),
|
|
||||||
(err) => emit('location-error', {
|
|
||||||
message: err.code === 1
|
|
||||||
? 'Location access denied. You can search by name instead.'
|
|
||||||
: 'Could not determine your location. You can search by name instead.',
|
|
||||||
}),
|
|
||||||
{ enableHighAccuracy: true, timeout: 15000 },
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
// --- Nearby cafe search (Foursquare API) ---
|
|
||||||
|
|
||||||
let _nearbyCafes = [];
|
|
||||||
|
|
||||||
const searchNearbyCafes = async (query, lat, lng) => {
|
|
||||||
if (!lat || !query || query.length < 2) return;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const resp = await fetch(
|
|
||||||
`/api/v1/nearby-cafes?lat=${lat}&lng=${lng}&q=${encodeURIComponent(query)}`,
|
|
||||||
{ credentials: 'same-origin' },
|
|
||||||
);
|
|
||||||
if (!resp.ok) throw new Error(`${resp.status}`);
|
|
||||||
|
|
||||||
const cafes = await resp.json();
|
|
||||||
_nearbyCafes = cafes;
|
|
||||||
renderNearbyCafes(cafes);
|
|
||||||
} catch {
|
|
||||||
emit('checkin-error', { message: 'Nearby search failed. Please try again.' });
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderNearbyCafes = (cafes) => {
|
|
||||||
const el = document.getElementById('nearby-results');
|
|
||||||
|
|
||||||
if (!cafes.length) {
|
|
||||||
el.innerHTML = '<p class="px-3 py-2 text-sm text-stone-500">No nearby cafes found.</p>';
|
|
||||||
} else {
|
|
||||||
let html = '<h3 class="px-3 py-2 text-xs font-semibold text-stone-500 uppercase tracking-wide">Nearby</h3>';
|
|
||||||
cafes.forEach((cafe, i) => {
|
|
||||||
const dist = cafe.distance_meters < 1000
|
|
||||||
? `${cafe.distance_meters} m`
|
|
||||||
: `${(cafe.distance_meters / 1000).toFixed(1)} km`;
|
|
||||||
const loc = [cafe.city, cafe.country].filter(Boolean).join(', ');
|
|
||||||
html += `<button type="button" class="w-full px-3 py-2 text-left text-sm hover:bg-amber-100 transition" onclick="selectNearby(${i})">`;
|
|
||||||
html += `<span class="font-medium text-amber-900">${esc(cafe.name)}</span>`;
|
|
||||||
html += `<span class="ml-2 text-xs text-stone-500">${esc(loc)} · ${dist}</span>`;
|
|
||||||
html += `</button>`;
|
|
||||||
});
|
|
||||||
el.innerHTML = html;
|
|
||||||
}
|
|
||||||
el.classList.remove('hidden');
|
|
||||||
};
|
|
||||||
|
|
||||||
const selectNearby = (i) => {
|
|
||||||
const c = _nearbyCafes[i];
|
|
||||||
if (!c) return;
|
|
||||||
emit('cafe-selected', {
|
|
||||||
id: '',
|
|
||||||
name: c.name,
|
|
||||||
city: c.city || '',
|
|
||||||
country: c.country || '',
|
|
||||||
lat: c.latitude || 0,
|
|
||||||
lng: c.longitude || 0,
|
|
||||||
website: c.website || '',
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// --- Client-side cafe filtering ---
|
|
||||||
|
|
||||||
const filterExistingCafes = (query) => {
|
|
||||||
const container = document.getElementById('existing-cafes');
|
|
||||||
if (!container) return;
|
|
||||||
const lower = query.toLowerCase();
|
|
||||||
let visible = 0;
|
|
||||||
container.querySelectorAll('[data-cafe-name]').forEach((btn) => {
|
|
||||||
const show = !query || btn.dataset.cafeName.toLowerCase().includes(lower);
|
|
||||||
btn.style.display = show ? '' : 'none';
|
|
||||||
if (show) visible++;
|
|
||||||
});
|
|
||||||
const noMatch = container.querySelector('[data-no-match]');
|
|
||||||
if (noMatch) noMatch.style.display = query && !visible ? '' : 'none';
|
|
||||||
};
|
|
||||||
|
|
||||||
// --- Scan callback (extract.js integration) ---
|
|
||||||
|
|
||||||
const onScanExtracted = async (data) => {
|
|
||||||
emit('scan-start');
|
|
||||||
|
|
||||||
const body = {
|
|
||||||
roaster_name: data.roaster?.name || '',
|
|
||||||
roaster_country: data.roaster?.country || '',
|
|
||||||
roaster_city: data.roaster?.city || '',
|
|
||||||
roaster_homepage: data.roaster?.homepage || '',
|
|
||||||
roast_name: data.roast?.name || '',
|
|
||||||
origin: data.roast?.origin || '',
|
|
||||||
region: data.roast?.region || '',
|
|
||||||
producer: data.roast?.producer || '',
|
|
||||||
process: data.roast?.process || '',
|
|
||||||
tasting_notes: (data.roast?.tasting_notes || []).join(', '),
|
|
||||||
};
|
|
||||||
|
|
||||||
try {
|
|
||||||
const resp = await fetch('/api/v1/scan', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
credentials: 'same-origin',
|
|
||||||
body: JSON.stringify(body),
|
|
||||||
});
|
|
||||||
if (!resp.ok) {
|
|
||||||
const err = await resp.json().catch(() => ({}));
|
|
||||||
throw new Error(err.message || `Server returned ${resp.status}`);
|
|
||||||
}
|
|
||||||
const result = await resp.json();
|
|
||||||
emit('scan-complete', { roastId: String(result.roast_id), name: body.roast_name });
|
|
||||||
} catch (e) {
|
|
||||||
emit('scan-error', { message: `Scan failed: ${e.message}` });
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// --- Submit check-in ---
|
|
||||||
|
|
||||||
const submitCheckIn = async () => {
|
|
||||||
if (_submitting) return;
|
|
||||||
if (!_cafeName) { emit('checkin-error', { message: 'Please select a cafe.' }); return; }
|
|
||||||
if (!_roastId) { emit('checkin-error', { message: 'Please select or scan a coffee.' }); return; }
|
|
||||||
|
|
||||||
_submitting = true;
|
|
||||||
emit('submit-start');
|
|
||||||
|
|
||||||
try {
|
|
||||||
let cafeId = _cafeId;
|
|
||||||
|
|
||||||
// Create cafe from Foursquare if no existing ID
|
|
||||||
if (!cafeId) {
|
|
||||||
const cafeResp = await fetch('/api/v1/cafes', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
credentials: 'same-origin',
|
|
||||||
body: JSON.stringify({
|
|
||||||
name: _cafeName,
|
|
||||||
city: _cafeCity || null,
|
|
||||||
country: _cafeCountry || null,
|
|
||||||
latitude: _cafeLat || null,
|
|
||||||
longitude: _cafeLng || null,
|
|
||||||
website: _cafeWebsite || null,
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
if (!cafeResp.ok) {
|
|
||||||
const err = await cafeResp.json().catch(() => ({}));
|
|
||||||
throw new Error(err.message || `Failed to create cafe (${cafeResp.status})`);
|
|
||||||
}
|
|
||||||
const newCafe = await cafeResp.json();
|
|
||||||
cafeId = String(newCafe.id);
|
|
||||||
}
|
|
||||||
|
|
||||||
const cupBody = {
|
|
||||||
roast_id: parseInt(_roastId, 10),
|
|
||||||
cafe_id: parseInt(cafeId, 10),
|
|
||||||
};
|
|
||||||
if (_rating) cupBody.rating = _rating;
|
|
||||||
|
|
||||||
const cupResp = await fetch('/api/v1/cups', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
credentials: 'same-origin',
|
|
||||||
body: JSON.stringify(cupBody),
|
|
||||||
});
|
|
||||||
if (!cupResp.ok) {
|
|
||||||
const err = await cupResp.json().catch(() => ({}));
|
|
||||||
throw new Error(err.message || `Failed to create cup (${cupResp.status})`);
|
|
||||||
}
|
|
||||||
|
|
||||||
window.location.href = '/';
|
|
||||||
} catch (e) {
|
|
||||||
_submitting = false;
|
|
||||||
emit('checkin-error', { message: `Check-in failed: ${e.message}` });
|
|
||||||
emit('submit-error');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// --- Utility ---
|
|
||||||
|
|
||||||
const esc = (t) => {
|
|
||||||
const el = document.createElement('span');
|
|
||||||
el.textContent = t;
|
|
||||||
return el.innerHTML;
|
|
||||||
};
|
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
let _extracting = false;
|
|
||||||
|
|
||||||
const triggerPhotoExtract = (formId, endpoint, onSuccess) => {
|
|
||||||
const input = document.createElement('input');
|
|
||||||
input.type = 'file';
|
|
||||||
input.accept = 'image/*';
|
|
||||||
input.capture = 'environment';
|
|
||||||
input.onchange = () => {
|
|
||||||
if (input.files.length === 0) return;
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.onload = () => {
|
|
||||||
doExtract(formId, endpoint, { image: reader.result }, onSuccess);
|
|
||||||
};
|
|
||||||
reader.readAsDataURL(input.files[0]);
|
|
||||||
};
|
|
||||||
input.click();
|
|
||||||
};
|
|
||||||
|
|
||||||
const extractFromText = (formId, endpoint, onSuccess) => {
|
|
||||||
const input = document.getElementById(`${formId}-extract-text`);
|
|
||||||
const prompt = input.value.trim();
|
|
||||||
if (prompt.length < 3) return;
|
|
||||||
doExtract(formId, endpoint, { prompt }, onSuccess);
|
|
||||||
};
|
|
||||||
|
|
||||||
const doExtract = async (formId, endpoint, body, onSuccess) => {
|
|
||||||
if (_extracting) return;
|
|
||||||
_extracting = true;
|
|
||||||
const errorEl = document.getElementById(`${formId}-extract-error`);
|
|
||||||
const controlsEl = document.getElementById(`${formId}-extract-controls`);
|
|
||||||
const waitingEl = document.getElementById(`${formId}-extract-waiting`);
|
|
||||||
errorEl.classList.add('hidden');
|
|
||||||
controlsEl.classList.add('hidden');
|
|
||||||
waitingEl.classList.remove('hidden');
|
|
||||||
|
|
||||||
try {
|
|
||||||
const resp = await fetch(endpoint, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
credentials: 'same-origin',
|
|
||||||
body: JSON.stringify(body),
|
|
||||||
});
|
|
||||||
if (!resp.ok) {
|
|
||||||
const errData = await resp.json().catch(() => ({}));
|
|
||||||
throw new Error(errData.message || `Server returned ${resp.status}`);
|
|
||||||
}
|
|
||||||
const data = await resp.json();
|
|
||||||
onSuccess(data);
|
|
||||||
} catch (e) {
|
|
||||||
errorEl.textContent = `Extraction failed: ${e.message}`;
|
|
||||||
errorEl.classList.remove('hidden');
|
|
||||||
} finally {
|
|
||||||
waitingEl.classList.add('hidden');
|
|
||||||
controlsEl.classList.remove('hidden');
|
|
||||||
_extracting = false;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
Loading…
Reference in a new issue