landvex: Fixar och tester klara för alla komponenter
- Datafabrik: Dockerfile fix, agentorkestrering fungerar - Vision: Identify-modell, FAISS, OCR alla testade - API: Alla 7 integrationstester passerade - Upplösare: Entitetsupplösning verifierad
This commit is contained in:
Bernt
@@ -0,0 +1,381 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="sv">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<link rel="canonical" href="https://www.quixzoom.com/mission-map.html">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<title>quiXzoom — Live Mission Map</title>
|
||||
<meta name="description" content="Explore the quiXzoom Live Mission Map — discover available photo missions near you and start earning today.">
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
:root {
|
||||
--bg: #0a0a0f;
|
||||
--surface: #111118;
|
||||
--border: rgba(255,255,255,0.08);
|
||||
--accent: #ff3b30;
|
||||
--accent2: #34c759;
|
||||
--text: #f5f5f7;
|
||||
--text2: #8e8e93;
|
||||
--font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
body { background: var(--bg); color: var(--text); font-family: var(--font); height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 12px 20px; background: var(--surface); border-bottom: 1px solid var(--border);
|
||||
flex-shrink: 0; z-index: 1000;
|
||||
}
|
||||
.header-left { display: flex; align-items: center; gap: 12px; }
|
||||
.logo { font-size: 18px; font-weight: 700; letter-spacing: -0.5px; }
|
||||
.logo span { color: var(--accent); }
|
||||
.badge-live { background: var(--accent); color: #fff; font-size: 10px; font-weight: 700;
|
||||
padding: 2px 6px; border-radius: 4px; letter-spacing: 0.5px; animation: pulse 2s infinite; }
|
||||
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.6} }
|
||||
|
||||
/* Stats bar */
|
||||
.stats-bar {
|
||||
display: flex; gap: 0; background: var(--surface); border-bottom: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.stat {
|
||||
flex: 1; padding: 10px 16px; border-right: 1px solid var(--border); text-align: center;
|
||||
}
|
||||
.stat:last-child { border-right: none; }
|
||||
.stat-val { font-size: 22px; font-weight: 700; line-height: 1; }
|
||||
.stat-val.red { color: var(--accent); }
|
||||
.stat-val.green { color: var(--accent2); }
|
||||
.stat-label { font-size: 11px; color: var(--text2); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
|
||||
/* Filter bar */
|
||||
.filter-bar {
|
||||
display: flex; gap: 8px; padding: 8px 16px; background: var(--bg); border-bottom: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.filter-btn {
|
||||
background: var(--surface); color: var(--text2); border: 1px solid var(--border);
|
||||
border-radius: 8px; padding: 5px 14px; font-size: 13px; cursor: pointer; transition: all 0.15s;
|
||||
font-family: var(--font);
|
||||
}
|
||||
.filter-btn:hover { border-color: rgba(255,255,255,0.2); color: var(--text); }
|
||||
.filter-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
|
||||
|
||||
/* Map */
|
||||
#map { flex: 1; }
|
||||
|
||||
/* Popup styling */
|
||||
.leaflet-popup-content-wrapper { background: #F2F2F7; border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.6); }
|
||||
.leaflet-popup-tip { background: #F2F2F7; }
|
||||
.leaflet-popup-content { color: #1c1c1e; margin: 0; padding: 0; }
|
||||
.popup { padding: 14px; min-width: 220px; }
|
||||
.popup-title { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
|
||||
.popup-row { display: flex; justify-content: space-between; font-size: 12px; color: #555; margin-bottom: 4px; }
|
||||
.popup-row span:last-child { color: #f5f5f7; }
|
||||
.popup-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; margin-top: 8px; }
|
||||
.badge-urgent { background: rgba(255,59,48,0.2); color: #ff3b30; }
|
||||
.badge-normal { background: rgba(52,199,89,0.15); color: #34c759; }
|
||||
.badge-pending { background: rgba(255,159,10,0.15); color: #ff9f0a; }
|
||||
|
||||
/* Status dot */
|
||||
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 5px; }
|
||||
.dot-active { background: var(--accent2); animation: glow 1.5s infinite; }
|
||||
.dot-pending { background: #ff9f0a; }
|
||||
@keyframes glow { 0%,100%{box-shadow:0 0 0 0 rgba(52,199,89,0.4)} 50%{box-shadow:0 0 0 4px rgba(52,199,89,0)} }
|
||||
|
||||
/* Connection status */
|
||||
.conn-badge { font-size: 11px; padding: 3px 8px; border-radius: 6px; }
|
||||
.conn-connected { background: rgba(52,199,89,0.2); color: var(--accent2); }
|
||||
.conn-disconnected { background: rgba(255,59,48,0.2); color: var(--accent); }
|
||||
.conn-connecting { background: rgba(255,159,10,0.2); color: #ff9f0a; }
|
||||
@media (max-width: 640px) {
|
||||
.hero h1 { font-size: 2rem !important; }
|
||||
.hero p { font-size: 1rem !important; }
|
||||
.card { padding: 1.5rem !important; }
|
||||
.grid { grid-template-columns: 1fr !important; }
|
||||
.btn { padding: 0.75rem 1.5rem !important; font-size: 1rem !important; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<style id="wcag-contrast-enforcement">
|
||||
/* AAMOS GLOBAL CONTRAST ENFORCEMENT — WCAG AA (4.5:1 minimum) */
|
||||
/* Regel: Ingen text under 70% opacity. Aldrig. */
|
||||
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
|
||||
/* Fix common low-contrast patterns */
|
||||
[style*="rgba(60,60,67,0.4)"] { color: rgba(60,60,67,0.65) !important; }
|
||||
[style*="rgba(60,60,67,0.3)"] { color: rgba(60,60,67,0.65) !important; }
|
||||
[style*="rgba(255,255,255,0.4)"] { color: rgba(255,255,255,0.72) !important; }
|
||||
[style*="rgba(255,255,255,0.3)"] { color: rgba(255,255,255,0.72) !important; }
|
||||
[style*="opacity: 0.4"] { opacity: 0.72 !important; }
|
||||
[style*="opacity: 0.3"] { opacity: 0.72 !important; }
|
||||
@media (max-width: 640px) {
|
||||
.hero h1 { font-size: 2rem !important; }
|
||||
.hero p { font-size: 1rem !important; }
|
||||
.card { padding: 1.5rem !important; }
|
||||
.grid { grid-template-columns: 1fr !important; }
|
||||
.btn { padding: 0.75rem 1.5rem !important; font-size: 1rem !important; }
|
||||
}
|
||||
</style>
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="quiXzoom — Live Mission Map">
|
||||
<meta property="og:description" content="quiXzoom — Earn per Mission. No Platform Fee.">
|
||||
<meta property="og:url" content="https://www.quixzoom.com/mission-map.html">
|
||||
<meta property="og:image" content="https://www.quixzoom.com/images/mission-map.jpg">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:image:alt" content="quiXzoom real-time mission map showing active photo missions">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:image" content="https://www.quixzoom.com/images/mission-map.jpg">
|
||||
<meta name="twitter:title" content="quiXzoom — Live Mission Map">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="header">
|
||||
<div class="header-left">
|
||||
<div class="logo">qui<span>X</span>zoom</div>
|
||||
<span class="badge-live">● LIVE</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:10px;">
|
||||
<span id="conn-status" class="conn-badge conn-connecting">Ansluter…</span>
|
||||
<span style="font-size:12px;color:var(--text2);">Mission Control</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-bar">
|
||||
<div class="stat">
|
||||
<div class="stat-val red" id="stat-active">—</div>
|
||||
<div class="stat-label">Aktiva uppdrag</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-val green" id="stat-zoomers">—</div>
|
||||
<div class="stat-label">Zoomers online</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-val" id="stat-completed">—</div>
|
||||
<div class="stat-label">Klara idag</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-val" id="stat-clients">—</div>
|
||||
<div class="stat-label">Live-anslutna</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-bar">
|
||||
<button class="filter-btn active" onclick="setFilter('all')">Alla</button>
|
||||
<button class="filter-btn" onclick="setFilter('active')">Aktiva</button>
|
||||
<button class="filter-btn" onclick="setFilter('pending')">Väntande</button>
|
||||
<button class="filter-btn" onclick="setFilter('completed')">Klara</button>
|
||||
</div>
|
||||
|
||||
<div id="map"></div>
|
||||
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||
<script>
|
||||
// ── Map init ─────────────────────────────────────────────────────────────
|
||||
const map = L.map('map', {
|
||||
center: [7.9519, 98.2849],
|
||||
zoom: 12,
|
||||
zoomControl: true,
|
||||
});
|
||||
|
||||
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
|
||||
attribution: '© OpenStreetMap © CARTO',
|
||||
subdomains: 'abcd',
|
||||
maxZoom: 19,
|
||||
}).addTo(map);
|
||||
|
||||
// ── State ────────────────────────────────────────────────────────────────
|
||||
let missionMarkers = {};
|
||||
let zoomerMarkers = {};
|
||||
let currentFilter = 'all';
|
||||
let currentMissions = [];
|
||||
let currentZoomers = [];
|
||||
let clientCount = 0;
|
||||
|
||||
// ── Icons ────────────────────────────────────────────────────────────────
|
||||
function missionIcon(priority, status) {
|
||||
const color = status === 'urgent' || priority === 'urgent' ? '#ff3b30' : status === 'completed' ? '#636366' : '#ff9f0a';
|
||||
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="40" viewBox="0 0 32 40">
|
||||
<path d="M16 0C7.16 0 0 7.16 0 16c0 12 16 24 16 24s16-12 16-24C32 7.16 24.84 0 16 0z" fill="${color}" opacity="0.95"/>
|
||||
<text x="16" y="21" text-anchor="middle" font-size="14" fill="white">📷</text>
|
||||
</svg>`;
|
||||
return L.divIcon({ html: svg, iconSize: [32, 40], iconAnchor: [16, 40], popupAnchor: [0, -40], className: '' });
|
||||
}
|
||||
|
||||
function zoomerIcon(name) {
|
||||
const initials = name.split(' ').map(p => p[0]).join('');
|
||||
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28">
|
||||
<circle cx="14" cy="14" r="13" fill="#34c759" stroke="#fff" stroke-width="2"/>
|
||||
<circle cx="14" cy="14" r="16" fill="rgba(52,199,89,0.3)" class="pulse-ring">
|
||||
<animate attributeName="r" from="12" to="20" dur="1.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" from="0.4" to="0" dur="1.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<text x="14" y="19" text-anchor="middle" font-size="10" font-weight="700" fill="white">${initials}</text>
|
||||
</svg>`;
|
||||
return L.divIcon({ html: svg, iconSize: [28, 28], iconAnchor: [14, 14], popupAnchor: [0, -14], className: '' });
|
||||
}
|
||||
|
||||
// ── Filter ───────────────────────────────────────────────────────────────
|
||||
function setFilter(filter) {
|
||||
currentFilter = filter;
|
||||
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
|
||||
event.target.classList.add('active');
|
||||
renderMissions(currentMissions);
|
||||
}
|
||||
|
||||
// ── Render missions ───────────────────────────────────────────────────────
|
||||
function renderMissions(missions) {
|
||||
currentMissions = missions;
|
||||
// Remove old markers
|
||||
Object.values(missionMarkers).forEach(m => m.remove());
|
||||
missionMarkers = {};
|
||||
|
||||
const filtered = currentFilter === 'all' ? missions : missions.filter(m => m.status === currentFilter);
|
||||
|
||||
filtered.forEach(mission => {
|
||||
const icon = missionIcon(mission.priority, mission.status);
|
||||
const marker = L.marker([mission.lat, mission.lng], { icon }).addTo(map);
|
||||
|
||||
const priorityBadge = mission.priority === 'urgent'
|
||||
? '<span class="popup-badge badge-urgent">🔴 Urgent</span>'
|
||||
: mission.status === 'pending'
|
||||
? '<span class="popup-badge badge-pending">⏳ Väntande</span>'
|
||||
: '<span class="popup-badge badge-normal">✅ Aktiv</span>';
|
||||
|
||||
marker.bindPopup(`
|
||||
<div class="popup">
|
||||
<div class="popup-title">📷 ${mission.title}</div>
|
||||
<div class="popup-row"><span>Kund</span><span>${mission.customer}</span></div>
|
||||
<div class="popup-row"><span>Typ</span><span>${mission.type}</span></div>
|
||||
<div class="popup-row"><span>Status</span><span><span class="status-dot dot-${mission.status === 'active' ? 'active' : 'pending'}"></span>${mission.status}</span></div>
|
||||
${mission.zoomerId ? `<div class="popup-row"><span>Zoomer</span><span>${mission.zoomerId}</span></div>` : ''}
|
||||
${priorityBadge}
|
||||
</div>
|
||||
`, { maxWidth: 280 });
|
||||
|
||||
missionMarkers[mission.id] = marker;
|
||||
});
|
||||
}
|
||||
|
||||
// ── Render zoomers ────────────────────────────────────────────────────────
|
||||
function renderZoomers(zoomers) {
|
||||
currentZoomers = zoomers;
|
||||
// Move existing or create new
|
||||
zoomers.forEach(z => {
|
||||
if (zoomerMarkers[z.id]) {
|
||||
zoomerMarkers[z.id].setLatLng([z.lat, z.lng]);
|
||||
} else {
|
||||
const icon = zoomerIcon(z.name);
|
||||
const marker = L.marker([z.lat, z.lng], { icon }).addTo(map);
|
||||
marker.bindPopup(`
|
||||
<div class="popup">
|
||||
<div class="popup-title">🟢 ${z.name}</div>
|
||||
<div class="popup-row"><span>ID</span><span>${z.id}</span></div>
|
||||
<div class="popup-row"><span>Betyg</span><span>⭐ ${z.rating}</span></div>
|
||||
<div class="popup-row"><span>Status</span><span>Online</span></div>
|
||||
</div>
|
||||
`, { maxWidth: 220 });
|
||||
zoomerMarkers[z.id] = marker;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ── Stats ─────────────────────────────────────────────────────────────────
|
||||
function updateStats(stats) {
|
||||
document.getElementById('stat-active').textContent = stats.active_missions ?? '—';
|
||||
document.getElementById('stat-zoomers').textContent = stats.zoomers_online ?? '—';
|
||||
document.getElementById('stat-completed').textContent = stats.completed_today ?? '—';
|
||||
clientCount++;
|
||||
document.getElementById('stat-clients').textContent = clientCount;
|
||||
}
|
||||
|
||||
// ── WebSocket ─────────────────────────────────────────────────────────────
|
||||
let ws;
|
||||
let reconnectTimer;
|
||||
|
||||
function connect() {
|
||||
const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||
const wsUrl = `${proto}//${location.host}/ws/missions`;
|
||||
ws = new WebSocket(wsUrl);
|
||||
|
||||
ws.onopen = () => {
|
||||
document.getElementById('conn-status').textContent = '● Ansluten';
|
||||
document.getElementById('conn-status').className = 'conn-badge conn-connected';
|
||||
clearTimeout(reconnectTimer);
|
||||
};
|
||||
|
||||
ws.onmessage = (evt) => {
|
||||
const msg = JSON.parse(evt.data);
|
||||
if (msg.type === 'mission_update') {
|
||||
renderMissions(msg.data.missions || []);
|
||||
renderZoomers(msg.data.zoomers || []);
|
||||
updateStats(msg.data.stats || {});
|
||||
} else if (msg.type === 'zoomer_move') {
|
||||
const z = msg.data;
|
||||
if (zoomerMarkers[z.zoomerId]) {
|
||||
zoomerMarkers[z.zoomerId].setLatLng([z.lat, z.lng]);
|
||||
}
|
||||
} else if (msg.type === 'mission_complete') {
|
||||
const d = msg.data;
|
||||
if (missionMarkers[d.missionId]) {
|
||||
missionMarkers[d.missionId].remove();
|
||||
delete missionMarkers[d.missionId];
|
||||
}
|
||||
// Toast
|
||||
showToast(`✅ Uppdrag klart: ${d.title}`);
|
||||
}
|
||||
};
|
||||
|
||||
ws.onclose = () => {
|
||||
document.getElementById('conn-status').textContent = '○ Frånkopplad';
|
||||
document.getElementById('conn-status').className = 'conn-badge conn-disconnected';
|
||||
reconnectTimer = setTimeout(() => {
|
||||
document.getElementById('conn-status').textContent = '… Återansluter';
|
||||
document.getElementById('conn-status').className = 'conn-badge conn-connecting';
|
||||
connect();
|
||||
}, 3000);
|
||||
};
|
||||
|
||||
ws.onerror = () => {
|
||||
// Fallback to REST polling if WS unavailable
|
||||
fallbackPolling();
|
||||
};
|
||||
}
|
||||
|
||||
// ── Fallback polling (if WS not available) ────────────────────────────────
|
||||
let pollInterval;
|
||||
function fallbackPolling() {
|
||||
if (pollInterval) return;
|
||||
document.getElementById('conn-status').textContent = '↻ Polling';
|
||||
document.getElementById('conn-status').className = 'conn-badge conn-connecting';
|
||||
pollInterval = setInterval(async () => {
|
||||
try {
|
||||
const r = await fetch('https://api.quixzoom.com/api/qz/missions');
|
||||
const d = await r.json();
|
||||
if (d.ok) {
|
||||
renderMissions(d.missions);
|
||||
renderZoomers(d.zoomers || []);
|
||||
updateStats(d.stats);
|
||||
}
|
||||
} catch(e) {}
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// ── Toast notification ────────────────────────────────────────────────────
|
||||
function showToast(msg) {
|
||||
const t = document.createElement('div');
|
||||
t.style.cssText = 'position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#1c1c1e;color:#f5f5f7;border:1px solid rgba(255,255,255,0.12);border-radius:10px;padding:10px 20px;font-size:14px;z-index:9999;box-shadow:0 4px 20px rgba(0,0,0,0.5);';
|
||||
t.textContent = msg;
|
||||
document.body.appendChild(t);
|
||||
setTimeout(() => t.remove(), 4000);
|
||||
}
|
||||
|
||||
// ── Check URL params for mission focus ────────────────────────────────────
|
||||
const urlParams = new URLSearchParams(location.search);
|
||||
const focusMission = urlParams.get('mission');
|
||||
|
||||
// Start
|
||||
connect();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user