/* global React, I, UI, SSSData */ // ═══ ติดตามงานติดตั้ง (Installation Site Tracker) ═══════════════════════════ // หลังบ้าน: จัดการไซต์ · สถานะ 8 ขั้น · รูปก่อน/ระหว่าง/หลัง · ผู้รับผิดชอบ // หน้าบ้าน: กด "เผยแพร่" แล้วข้อมูลชุดที่คัดกรองแล้วจะขึ้นเว็บสาธารณะ /track // // ⚠️ กติกาข้อมูลสาธารณะ (ห้ามพัง) — คัดกรองที่ trkBuildPublic() ที่เดียวเท่านั้น // 1. ส่งออกเฉพาะฟิลด์ใน whitelist — ชื่อภายใน/ที่อยู่/เบอร์/ผู้รับผิดชอบ/วันนัด ไม่มีวันหลุด // 2. สถานะภายใน 8 ค่า ยุบเหลือ 2 ค่า (ติดตั้งแล้ว / ยังไม่ติดตั้ง) — "มีปัญหา" ไม่โผล่ // 3. พิกัดถูกปัดตามระดับที่ตั้งไว้รายไซต์ (แม่นยำ / ~100 ม. / ~1 กม.) // 4. รูปที่เผยแพร่ต้องกด "อนุมัติ" เท่านั้น และถูกวาดใหม่ผ่าน canvas ทุกครั้ง → EXIF/GPS หายเกลี้ยง // 5. เขียนลงตาราง public_store คนละใบกับ sss_store — กุญแจหน้าเว็บสาธารณะอ่านข้อมูลภายในไม่ได้ const { useState: useStateTRK, useEffect: useEffectTRK, useMemo: useMemoTRK } = React; const TRK_SITES = "sss-track-sites"; const TRK_PHOTOS = "sss-track-photos"; function trkGet(key, def) { const v = window.lsSyncGet ? window.lsSyncGet(key) : null; if (v != null) return v; try { return JSON.parse(localStorage.getItem(key) || "null") || def; } catch { return def; } } function trkSet(key, val) { if (window.lsSyncSet) window.lsSyncSet(key, val); else { try { localStorage.setItem(key, JSON.stringify(val)); } catch {} } window.dispatchEvent(new Event("sss-track-changed")); } // ── สถานะภายใน 8 ขั้น (ลูกค้าไม่เห็นค่าพวกนี้) ──────────────────────────── const TRK_STATUS = { not_installed: { label: "ยังไม่ติดตั้ง", emoji: "⚪", color: "#78716c", bg: "#f5f5f4" }, scheduled: { label: "นัดหมายแล้ว", emoji: "📅", color: "#1d4ed8", bg: "#dbeafe" }, en_route: { label: "กำลังเดินทาง", emoji: "🚚", color: "#0e7490", bg: "#cffafe" }, on_site: { label: "ถึงหน้างาน", emoji: "📍", color: "#7c3aed", bg: "#ede9fe" }, installing: { label: "กำลังติดตั้ง", emoji: "🔧", color: "#b45309", bg: "#fef3c7" }, installed: { label: "ติดตั้งแล้ว", emoji: "✅", color: "#15803d", bg: "#dcfce7" }, issue: { label: "เกิดปัญหา", emoji: "⚠️", color: "#b91c1c", bg: "#fee2e2" }, cancelled: { label: "ยกเลิก", emoji: "✖", color: "#57534e", bg: "#e7e5e4" }, }; const TRK_STATUS_ORDER = ["not_installed", "scheduled", "en_route", "on_site", "installing", "installed", "issue", "cancelled"]; // สถานะสาธารณะมีแค่ 2 ค่า — ยุบที่นี่ที่เดียว const trkPublicStatus = (s) => (s === "installed" ? "installed" : "not_installed"); const TRK_PRECISION = { exact: { label: "แม่นยำ (จุดจริง)", digits: 6 }, approx_100m: { label: "โดยประมาณ ~100 ม.", digits: 3 }, approx_1km: { label: "คร่าว ๆ ~1 กม.", digits: 2 }, }; const TRK_PHOTO_TYPES = { before: "ก่อนติดตั้ง", during: "ระหว่างติดตั้ง", after: "หลังติดตั้ง", issue: "ปัญหาหน้างาน", document: "เอกสาร", }; const TRK_PROVINCES = ["กรุงเทพมหานคร","กระบี่","กาญจนบุรี","กาฬสินธุ์","กำแพงเพชร","ขอนแก่น","จันทบุรี","ฉะเชิงเทรา","ชลบุรี","ชัยนาท","ชัยภูมิ","ชุมพร","เชียงราย","เชียงใหม่","ตรัง","ตราด","ตาก","นครนายก","นครปฐม","นครพนม","นครราชสีมา","นครศรีธรรมราช","นครสวรรค์","นนทบุรี","นราธิวาส","น่าน","บึงกาฬ","บุรีรัมย์","ปทุมธานี","ประจวบคีรีขันธ์","ปราจีนบุรี","ปัตตานี","พระนครศรีอยุธยา","พังงา","พัทลุง","พิจิตร","พิษณุโลก","เพชรบุรี","เพชรบูรณ์","แพร่","พะเยา","ภูเก็ต","มหาสารคาม","มุกดาหาร","แม่ฮ่องสอน","ยโสธร","ยะลา","ร้อยเอ็ด","ระนอง","ระยอง","ราชบุรี","ลพบุรี","ลำปาง","ลำพูน","เลย","ศรีสะเกษ","สกลนคร","สงขลา","สตูล","สมุทรปราการ","สมุทรสงคราม","สมุทรสาคร","สระแก้ว","สระบุรี","สิงห์บุรี","สุโขทัย","สุพรรณบุรี","สุราษฎร์ธานี","สุรินทร์","หนองคาย","หนองบัวลำภู","อ่างทอง","อำนาจเจริญ","อุดรธานี","อุตรดิตถ์","อุทัยธานี","อุบลราชธานี"]; const trkToday = () => new Date().toISOString().slice(0, 10); const TRK_MON = ["ม.ค.","ก.พ.","มี.ค.","เม.ย.","พ.ค.","มิ.ย.","ก.ค.","ส.ค.","ก.ย.","ต.ค.","พ.ย.","ธ.ค."]; function trkThai(iso) { if (!iso) return "—"; const [y, m, d] = String(iso).slice(0, 10).split("-").map(Number); if (!y || !m || !d) return "—"; return `${d} ${TRK_MON[m - 1]} ${y + 543}`; } const trkUid = () => "ST-" + Date.now().toString(36) + Math.random().toString(36).slice(2, 6); // ── รูป: ย่อ + วาดใหม่ผ่าน canvas (ขั้นตอนนี้ทำให้ EXIF/พิกัด GPS หายไปในตัว) ── function trkResize(fileOrUrl, max, quality) { return new Promise(resolve => { const run = (src) => { const img = new Image(); if (/^https?:/.test(src)) img.crossOrigin = "anonymous"; // รูปจากคลัง (คนละโดเมน) — กัน canvas taint img.onload = () => { const sc = Math.min(1, max / Math.max(img.width, img.height)); const c = document.createElement("canvas"); c.width = Math.max(1, Math.round(img.width * sc)); c.height = Math.max(1, Math.round(img.height * sc)); const ctx = c.getContext("2d"); ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, c.width, c.height); // กันพื้นโปร่งใสกลายเป็นดำ ctx.drawImage(img, 0, 0, c.width, c.height); resolve(c.toDataURL("image/jpeg", quality)); }; img.onerror = () => resolve(null); img.src = src; }; if (typeof fileOrUrl === "string") run(fileOrUrl); else { const r = new FileReader(); r.onload = () => run(r.result); r.onerror = () => resolve(null); r.readAsDataURL(fileOrUrl); } }); } // ── ช่องจังหวัดแบบค้นหา — เปิดมาเจอเฉพาะจังหวัดที่เคยใช้ (สั้น เลือกง่าย) // พิมพ์เมื่อไรค่อยค้นจากทั้ง 77 จังหวัด เช่น พิมพ์ "ข" → ขอนแก่น ... function TrkProvinceAuto({ value, onChange, used }) { const [open, setOpen] = useStateTRK(false); const q = String(value || "").trim(); const hits = !open ? [] : (q ? TRK_PROVINCES.filter(p => p.includes(q)).slice(0, 10) : (used || []).slice(0, 10)); const usedSet = new Set(used || []); return (
{ onChange(e.target.value); setOpen(true); }} onFocus={() => setOpen(true)} onBlur={() => setTimeout(() => setOpen(false), 160)}/> {open && hits.length > 0 && (
{!q &&
จังหวัดที่เคยใช้ — พิมพ์เพื่อค้นหาจังหวัดอื่น
} {hits.map(p => (
{ e.preventDefault(); onChange(p); setOpen(false); }} style={{display: "flex", justifyContent: "space-between", alignItems: "center", padding: "7px 11px", cursor: "pointer", fontSize: 13}} onMouseEnter={e => { e.currentTarget.style.background = "var(--surface-2)"; }} onMouseLeave={e => { e.currentTarget.style.background = ""; }}> {p} {q && usedSet.has(p) && เคยใช้}
))}
)}
); } // ════════════════════════════════════════════════════════════════════════════ // คัดกรองข้อมูลสาธารณะ — จุดเดียวในระบบที่ตัดสินว่าอะไรออกเว็บได้ // ════════════════════════════════════════════════════════════════════════════ function trkFuzz(v, precision) { const n = Number(v); if (v === "" || v == null || isNaN(n)) return null; const d = (TRK_PRECISION[precision] || TRK_PRECISION.exact).digits; const p = Math.pow(10, d); return Math.round(n * p) / p; } function trkBuildPublic(sites, photos) { const pub = (sites || []).filter(s => s && s.isPublic && s.status !== "cancelled"); const out = pub.map(s => { const ok = (photos[s.id] || []).filter(p => p.approved); return { // ── whitelist: มีแค่ 9 ฟิลด์นี้เท่านั้นที่ออกสู่สาธารณะ ── code: s.code || "", name: s.namePub || "", province: s.province || "", district: s.district || "", status: trkPublicStatus(s.status), installedAt: s.status === "installed" ? (s.installedAt || null) : null, note: s.notePub || "", lat: trkFuzz(s.lat, s.precision), lng: trkFuzz(s.lng, s.precision), photoCount: ok.length, cover: ok.length ? (ok[0].thumb || null) : null, }; }); const installed = out.filter(s => s.status === "installed").length; return { updatedAt: new Date().toISOString(), company: (window.SSSData && window.SSSData.Company && window.SSSData.Company.name) || "TRIPLES CREATIVE", stats: { total: out.length, installed, notInstalled: out.length - installed, provinces: [...new Set(out.map(s => s.province).filter(Boolean))].length, }, sites: out.sort((a, b) => String(b.installedAt || "").localeCompare(String(a.installedAt || "")) || a.code.localeCompare(b.code)), }; } // เขียนข้อมูลสาธารณะขึ้นตาราง public_store (คนละใบกับข้อมูลภายใน) async function trkPublish(sites, photos) { const db = window.SSSDB; if (!db || !db.url) throw new Error("ยังไม่ได้เชื่อมต่อฐานข้อมูล — รอสักครู่แล้วลองใหม่"); const H = { apikey: db.key, Authorization: "Bearer " + db.key, "Content-Type": "application/json" }; const payload = trkBuildPublic(sites, photos); const codes = payload.sites.map(s => s.code); const rows = [{ key: "track", data: payload, updated_at: new Date().toISOString() }]; payload.sites.forEach(s => { const src = sites.find(x => x.code === s.code); const ok = ((photos[src.id] || []).filter(p => p.approved)) .map(p => ({ url: p.pub || p.url, caption: p.caption || "", type: p.type || "after" })); rows.push({ key: "track:photos:" + s.code, data: { photos: ok }, updated_at: new Date().toISOString() }); }); // แบ่งก้อนตามขนาดจริง — รูป base64 ทำให้ก้อนใหญ่เร็วมาก const chunks = []; let cur = [], size = 0; rows.forEach(r => { const s = JSON.stringify(r).length; if (cur.length && size + s > 3 * 1024 * 1024) { chunks.push(cur); cur = []; size = 0; } cur.push(r); size += s; }); if (cur.length) chunks.push(cur); for (const c of chunks) { const res = await fetch(db.url + "/rest/v1/public_store?on_conflict=key", { method: "POST", headers: { ...H, Prefer: "resolution=merge-duplicates,return=minimal" }, body: JSON.stringify(c), }); if (!res.ok) { const t = (await res.text()).slice(0, 200); if (res.status === 404 || /public_store/.test(t)) { throw new Error("ยังไม่มีตารางข้อมูลสาธารณะ — รันที่เครื่องฐานข้อมูลก่อน: bash migrate/setup-public-track.sh"); } throw new Error(`เผยแพร่ไม่สำเร็จ (HTTP ${res.status}) ${t}`); } } // เก็บกวาด: ลบรูปของไซต์ที่เลิกเผยแพร่แล้ว ไม่ให้ค้างอยู่บนเว็บ try { const res = await fetch(db.url + "/rest/v1/public_store?select=key&key=like.track:photos:*", { headers: H }); if (res.ok) { const have = await res.json(); const stale = have.map(r => r.key).filter(k => !codes.includes(k.replace("track:photos:", ""))); for (const k of stale) { await fetch(db.url + "/rest/v1/public_store?key=eq." + encodeURIComponent(k), { method: "DELETE", headers: H }); } } } catch {} return payload; } // ════════════════════════════════════════════════════════════════════════════ // ฟอร์มเพิ่ม/แก้ไขไซต์ // ════════════════════════════════════════════════════════════════════════════ function TrkSiteModal({ site, onClose, onSaved }) { const { Btn, Drawer, CustomerAutocomplete } = window.UI; const D = window.SSSData; const isNew = !site.id; const [f, setF] = useStateTRK(() => ({ id: site.id || trkUid(), code: site.code || "", nameInt: site.nameInt || "", namePub: site.namePub || "", customer: site.customer || "", descInt: site.descInt || "", notePub: site.notePub || "", province: site.province || "", district: site.district || "", subdistrict: site.subdistrict || "", address: site.address || "", lat: site.lat == null ? "" : site.lat, lng: site.lng == null ? "" : site.lng, precision: site.precision || "approx_100m", status: site.status || "not_installed", scheduledAt: site.scheduledAt || "", installedAt: site.installedAt || "", assignee: site.assignee || "", isPublic: site.isPublic !== undefined ? site.isPublic : true, })); const upd = (k, v) => setF(p => ({ ...p, [k]: v })); const emps = D.Employees || []; const [more, setMore] = useStateTRK(false); // รูปแนบในฟอร์มเลย — อัพโหลดแล้วถือว่าอนุมัติเผยแพร่ทันที (ผู้ใช้เลือกเองกับมือ) const [photos, setPhotos] = useStateTRK(() => (trkGet(TRK_PHOTOS, {}) || {})[site.id] || []); const [busy, setBusy] = useStateTRK(""); const addPhotos = async (e) => { const files = [...(e.target.files || [])]; e.target.value = ""; if (!files.length) return; setBusy(`กำลังเตรียมรูป ${files.length} รูป (ย่อ + ลบข้อมูล GPS)…`); const add = []; for (const fl of files) { // เก็บสำเนาเดียว (1280px) + thumbnail — ไม่เก็บต้นฉบับใหญ่ซ้ำ กันฐานข้อมูลบวมจนแอปอืด const pub = await trkResize(fl, 1280, 0.8); if (!pub) continue; const thumb = await trkResize(pub, 320, 0.6); add.push({ id: trkUid(), pub, thumb, type: "after", caption: "", approved: true, at: new Date().toISOString() }); } setBusy(""); if (add.length) setPhotos(p => [...p, ...add]); }; const delPhoto = (id) => setPhotos(p => p.filter(x => x.id !== id)); const save = () => { const name = String(f.nameInt || "").trim(); if (!name) { window.toast && window.toast("กรอกชื่อไซต์ เช่น SRN8555"); return; } // ชื่อแบบ SRN8555 ใช้เป็นรหัสได้เลย · ชื่อไทยระบบตั้งรหัสให้เอง let code = String(f.code || "").trim().toUpperCase(); if (!code) code = /^[A-Za-z0-9][A-Za-z0-9-]{1,31}$/.test(name) ? name.toUpperCase() : ("S" + Date.now().toString(36).toUpperCase()); const all = trkGet(TRK_SITES, []); if (all.some(s => s.code === code && s.id !== f.id)) { window.toast && window.toast(`ชื่อ/รหัส ${code} ซ้ำกับไซต์อื่น`); return; } if (f.status === "installed" && !photos.length) { window.toast && window.toast("สถานะ 'ติดตั้งแล้ว' ต้องแนบรูปอย่างน้อย 1 รูป"); return; } // พิมพ์จังหวัดค้างครึ่งคำ (เช่น "ขอนแ") — ถ้าเทียบได้จังหวัดเดียว ปรับเป็นชื่อเต็มให้ let prov = String(f.province || "").trim(); if (prov && !TRK_PROVINCES.includes(prov)) { const hit = TRK_PROVINCES.filter(p => p.includes(prov)); if (hit.length === 1) prov = hit[0]; } const rec = { ...f, code, province: prov, nameInt: name, namePub: String(f.namePub || name).trim(), lat: f.lat === "" ? null : Number(f.lat), lng: f.lng === "" ? null : Number(f.lng), installedAt: f.status === "installed" ? (f.installedAt || trkToday()) : f.installedAt, createdAt: site.createdAt || new Date().toISOString(), updatedAt: new Date().toISOString(), updatedBy: (window.Session && window.Session.get() && window.Session.get().name) || "", }; const next = isNew ? [rec, ...all] : all.map(s => (s.id === rec.id ? rec : s)); trkSet(TRK_SITES, next); const allPh = trkGet(TRK_PHOTOS, {}) || {}; allPh[rec.id] = photos; trkSet(TRK_PHOTOS, allPh); window.logActivity && window.logActivity(isNew ? "เพิ่มไซต์ติดตั้ง" : "แก้ไขไซต์ติดตั้ง", `${rec.code} · ${rec.nameInt}`, isNew ? "create" : "update"); window.toast && window.toast(`บันทึกไซต์ ${rec.code} แล้ว (${photos.length} รูป)`); onSaved && onSaved(next); onClose(); }; const st = TRK_STATUS[f.status] || TRK_STATUS.not_installed; return ( ยกเลิก บันทึก }> {/* ── ฟอร์มหลัก: 4 อย่างพอ — ชื่อไซต์ · สถานะ · จังหวัด · รูป ── */}
upd("nameInt", e.target.value)} placeholder="เช่น SRN8555"/>
upd("province", v)} used={(() => { const cnt = {}; (trkGet(TRK_SITES, []) || []).forEach(s => { if (s.province) cnt[s.province] = (cnt[s.province] || 0) + 1; }); return Object.keys(cnt).sort((a, b) => cnt[b] - cnt[a]); // เรียงตามที่ใช้บ่อย })()}/>
{photos.map(p => (
))}
{busy &&
⏳ {busy}
}
รูปถูกย่อและลบข้อมูล EXIF/พิกัด GPS อัตโนมัติก่อนขึ้นเว็บ
{/* ── รายละเอียดเพิ่มเติม (ซ่อนไว้ ไม่บังคับกรอก) ── */} {more && (
🔒 ช่องที่มีเครื่องหมายนี้ ไม่ออกสู่หน้าเว็บสาธารณะ ใช้ภายในเท่านั้น
upd("namePub", e.target.value)} placeholder="เว้นว่าง = ใช้ชื่อไซต์"/>
{CustomerAutocomplete ? upd("customer", v)} placeholder="พิมพ์ชื่อลูกค้า"/> : upd("customer", e.target.value)}/>}
upd("district", e.target.value)}/>
upd("address", e.target.value)}/>
upd("lat", e.target.value)} placeholder="13.7563"/>
upd("lng", e.target.value)} placeholder="100.5018"/>
upd("scheduledAt", e.target.value)}/>
upd("installedAt", e.target.value)}/>