// ===== PARC-EX CARTE — UI Components (Playful) =====
const { useState, useEffect } = React;
/* ---- Category SVG Icons ---- */
var CAT_ICONS = {
cart: function(color) {
return (
);
},
utensils: function(color) {
return (
);
},
coffee: function(color) {
return (
);
},
croissant: function(color) {
return (
);
},
medkit: function(color) {
return (
);
},
tree: function(color) {
return (
);
},
bubbles: function(color) {
return (
);
},
star: function(color) {
return (
);
},
bus: function(color) {
return (
);
},
pin: function(color) {
return (
);
}
};
function CatIcon({ icon, color, size }) {
var sz = size || 16;
var renderer = CAT_ICONS[icon] || CAT_ICONS.pin;
return (
{renderer(color)}
);
}
/* ---- Check icon ---- */
function CheckIcon() {
return (
);
}
/* ---- Language Toggle ---- */
function LangToggle({ lang, onChange }) {
return (
onChange('fr')}>FR
onChange('en')}>EN
);
}
/* ---- Filter Pills ---- */
function FilterBar({ cats, filter, onFilter, counts, editMode, onAddCat, lang }) {
var total = 0;
Object.keys(counts).forEach(function (k) { total += counts[k]; });
return (
onFilter('all')}>
{UI_TEXT[lang].all} {total}
{cats.map(function (c) {
var n = counts[c.id] || 0;
if (!n && !editMode) return null;
return (
onFilter(c.id)}>
{c[lang]}{n > 0 ? ' ' + n : ''}
);
})}
{editMode && (
+ {UI_TEXT[lang].addCat}
)}
);
}
/* ---- Open Now Badge ---- */
function OpenBadge({ hours, lang }) {
var status = isOpenNow(hours);
if (status === null) return null;
var t = UI_TEXT[lang];
return (
);
}
/* ---- Sort Toggle ---- */
function SortToggle({ sort, onToggle, lang }) {
var t = UI_TEXT[lang];
return (
{t.sortCat}
{t.sortDist}
);
}
/* ---- Place Card ---- */
function PlaceCard({ place, cat, active, visited, editMode, lang, walkMin, onClick, onVisit, onEdit, onDel }) {
var t = UI_TEXT[lang];
var glink = 'https://www.google.com/maps/dir/?api=1&destination=' + encodeURIComponent(place.addr);
var short = place.addr.replace(', Montréal', '');
var bgColor = cat.color + '14'; // 8% opacity
return (
{place.name}
{walkMin !== null && (
{walkMin < 1 ? '< 1' : walkMin}
{t.minWalk} {t.walkLabel}
)}
{editMode ? (
{t.editPlace}
{t.del}
) : (
{visited &&
)}
{place.hours && (
{place.hours}
)}
{place.note &&
{place.note}
}
);
}
/* ---- Place Form (add / edit) ---- */
function PlaceForm({ open, editing, cats, lang, onSave, onCancel }) {
var t = UI_TEXT[lang];
var ref = React.useRef(null);
var _s = function (v) { return v || ''; };
var _init = function () {
return { cat: 'restaurant', name: '', addr: '', lat: '', lng: '', hours: '', note: '' };
};
var _from = function (p) {
return { cat: p.cat, name: p.name, addr: p.addr, lat: _s(p.lat), lng: _s(p.lng), hours: _s(p.hours), note: _s(p.note) };
};
var [f, setF] = useState(_init);
useEffect(function () {
setF(editing ? _from(editing) : _init());
}, [editing, open]);
useEffect(function () {
if (!open) return;
var handler = function (e) {
setF(function (prev) { return Object.assign({}, prev, { lat: e.detail.lat.toFixed(6), lng: e.detail.lng.toFixed(6) }); });
};
window.addEventListener('map-coord-pick', handler);
return function () { window.removeEventListener('map-coord-pick', handler); };
}, [open]);
var set = function (k, v) { setF(function (prev) { var n = Object.assign({}, prev); n[k] = v; return n; }); };
var submit = function () {
if (!f.name.trim() || !f.addr.trim()) return;
onSave({
id: editing ? editing.id : undefined,
cat: f.cat,
name: f.name.trim(),
addr: f.addr.trim(),
lat: parseFloat(f.lat) || null,
lng: parseFloat(f.lng) || null,
hours: f.hours.trim(),
note: f.note.trim()
});
};
return (
);
}
/* ---- Category Form ---- */
function CategoryForm({ open, lang, onSave, onCancel, usedColors }) {
var t = UI_TEXT[lang];
var COLORS = ['#dc2626','#ea580c','#f59e0b','#16a34a','#0d9488','#06b6d4','#3b82f6','#6366f1','#8b5cf6','#a855f7','#db2777','#f43f5e','#78716c','#475569'];
var avail = COLORS.filter(function (c) { return usedColors.indexOf(c) === -1; });
var [fr, setFr] = useState('');
var [en, setEn] = useState('');
var [color, setColor] = useState(avail[0] || COLORS[0]);
useEffect(function () {
if (open) { setFr(''); setEn(''); setColor(avail[0] || COLORS[0]); }
}, [open]);
var submit = function () {
if (!fr.trim()) return;
onSave({
id: fr.trim().toLowerCase().replace(/\s+/g, '-').normalize('NFD').replace(/[\u0300-\u036f]/g, ''),
fr: fr.trim(),
en: en.trim() || fr.trim(),
color: color,
icon: 'pin'
});
};
return (
);
}
/* ---- Device Detection Hook ---- */
function useDevice() {
function detect() {
var w = window.innerWidth;
if (w < 640) return 'phone';
if (w < 1024) return 'tablet';
return 'desktop';
}
var [device, setDevice] = useState(detect);
useEffect(function () {
var onResize = function () {
var d = detect();
setDevice(function (prev) { return prev !== d ? d : prev; });
};
window.addEventListener('resize', onResize);
return function () { window.removeEventListener('resize', onResize); };
}, []);
return device;
}
var DEVICE_ICONS = {
phone: function () {
return (
);
},
tablet: function () {
return (
);
},
desktop: function () {
return (
);
}
};
function DeviceBadge({ device, lang }) {
var labels = {
phone: { fr: 'Téléphone', en: 'Phone' },
tablet: { fr: 'Tablette', en: 'Tablet' },
desktop: { fr: 'Bureau', en: 'Desktop' }
};
var Icon = DEVICE_ICONS[device];
return (
{labels[device][lang]}
);
}
Object.assign(window, { CatIcon, CAT_ICONS, CheckIcon, LangToggle, FilterBar, PlaceCard, PlaceForm, CategoryForm, useDevice, DeviceBadge, OpenBadge, SortToggle });