feat: track prices by source
This commit is contained in:
TopherMayor
@@ -619,6 +619,28 @@
|
||||
color: #fff;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.option-source-select {
|
||||
width: 100%;
|
||||
margin-top: 4px;
|
||||
background: rgba(8, 11, 17, 0.9);
|
||||
border: 1px solid rgba(0, 212, 255, 0.18);
|
||||
color: #e6f7ff;
|
||||
border-radius: 8px;
|
||||
padding: 7px 8px;
|
||||
font-size: 0.72rem;
|
||||
outline: none;
|
||||
appearance: none;
|
||||
}
|
||||
.option-source-select:focus {
|
||||
border-color: rgba(0, 212, 255, 0.48);
|
||||
box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.08);
|
||||
}
|
||||
.option-source-sub {
|
||||
margin-top: 4px;
|
||||
font-size: 0.63rem;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.35;
|
||||
}
|
||||
.option-fact-note {
|
||||
font-size: 0.68rem;
|
||||
color: var(--text-muted);
|
||||
@@ -1347,6 +1369,13 @@
|
||||
budgetScenarios: [],
|
||||
priceUpdatedAt: '',
|
||||
priceHistoryRunCount: 0,
|
||||
priceSourceSelections: (() => {
|
||||
try {
|
||||
return JSON.parse(localStorage.getItem('cabo_price_source_selections') || '{}');
|
||||
} catch {
|
||||
return {};
|
||||
}
|
||||
})(),
|
||||
pollsOpen: true,
|
||||
totalVoters: 0,
|
||||
wsConnected: false,
|
||||
@@ -1553,6 +1582,72 @@
|
||||
return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
|
||||
}
|
||||
|
||||
function normalizeSourceKey(value) {
|
||||
return String(value || '')
|
||||
.trim()
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9]+/g, '-')
|
||||
.replace(/^-+|-+$/g, '') || 'unknown-source';
|
||||
}
|
||||
|
||||
function getAvailableSources(opt) {
|
||||
if (Array.isArray(opt.availableSources) && opt.availableSources.length) {
|
||||
return opt.availableSources.map(source => ({
|
||||
...source,
|
||||
sourceKey: normalizeSourceKey(source.sourceKey || source.sourceLabel || source.source),
|
||||
}));
|
||||
}
|
||||
|
||||
const defaultKey = normalizeSourceKey(opt.currentSourceKey || opt.automationInsights?.source || 'unknown-source');
|
||||
const defaultLabel = opt.automationInsights?.source || 'Unknown source';
|
||||
return [{
|
||||
sourceKey: defaultKey,
|
||||
sourceLabel: defaultLabel,
|
||||
sourceUrl: opt.automationInsights?.sourceUrl || null,
|
||||
pointCount: Array.isArray(opt.priceHistory) ? opt.priceHistory.length : 0,
|
||||
latestCheckedAt: opt.latestPricePoint?.checkedAt || null,
|
||||
latestPrice: opt.latestPricePoint?.price ?? null,
|
||||
latestDisplayPrice: opt.latestPricePoint?.displayPrice || null,
|
||||
currency: opt.latestPricePoint?.currency || 'USD',
|
||||
}];
|
||||
}
|
||||
|
||||
function getOptionSelectedSourceKey(opt) {
|
||||
const availableSources = getAvailableSources(opt);
|
||||
const stored = state.priceSourceSelections?.[opt.id];
|
||||
const normalizedStored = stored ? normalizeSourceKey(stored) : '';
|
||||
if (normalizedStored && availableSources.some(source => source.sourceKey === normalizedStored)) {
|
||||
return normalizedStored;
|
||||
}
|
||||
|
||||
const defaultKey = normalizeSourceKey(opt.currentSourceKey || opt.defaultSourceKey || availableSources[0]?.sourceKey);
|
||||
return availableSources.some(source => source.sourceKey === defaultKey)
|
||||
? defaultKey
|
||||
: availableSources[0]?.sourceKey || 'unknown-source';
|
||||
}
|
||||
|
||||
function getOptionSourceSeries(opt, sourceKey = getOptionSelectedSourceKey(opt)) {
|
||||
const normalizedKey = normalizeSourceKey(sourceKey);
|
||||
if (opt.priceHistoryBySource && Array.isArray(opt.priceHistoryBySource[normalizedKey])) {
|
||||
return opt.priceHistoryBySource[normalizedKey];
|
||||
}
|
||||
return Array.isArray(opt.priceHistory) ? opt.priceHistory : [];
|
||||
}
|
||||
|
||||
function getOptionSourceMeta(opt, sourceKey = getOptionSelectedSourceKey(opt)) {
|
||||
const normalizedKey = normalizeSourceKey(sourceKey);
|
||||
return getAvailableSources(opt).find(source => source.sourceKey === normalizedKey) || null;
|
||||
}
|
||||
|
||||
function setOptionSource(optionId, sourceKey) {
|
||||
state.priceSourceSelections = {
|
||||
...state.priceSourceSelections,
|
||||
[optionId]: normalizeSourceKey(sourceKey),
|
||||
};
|
||||
localStorage.setItem('cabo_price_source_selections', JSON.stringify(state.priceSourceSelections));
|
||||
render();
|
||||
}
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value ?? '')
|
||||
.replace(/&/g, '&')
|
||||
@@ -1593,18 +1688,64 @@
|
||||
`;
|
||||
}
|
||||
|
||||
function renderSourceSelect(opt) {
|
||||
const sources = getAvailableSources(opt);
|
||||
if (sources.length <= 1) {
|
||||
const source = sources[0] || null;
|
||||
const sourceLabel = source?.sourceLabel || opt.automationInsights?.source || 'Unknown source';
|
||||
const meta = source ? [
|
||||
source.latestDisplayPrice || (typeof source.latestPrice === 'number' ? formatCurrency(source.latestPrice, source.currency || 'USD') : ''),
|
||||
source.pointCount ? `${source.pointCount} point${source.pointCount === 1 ? '' : 's'}` : '',
|
||||
].filter(Boolean).join(' · ') : '';
|
||||
return `
|
||||
<div class="option-source-sub">${escapeHtml(sourceLabel)}${meta ? ` · ${escapeHtml(meta)}` : ''}</div>
|
||||
`;
|
||||
}
|
||||
|
||||
const selectedSourceKey = getOptionSelectedSourceKey(opt);
|
||||
return `
|
||||
<select class="option-source-select" onchange="setOptionSource('${opt.id}', this.value); event.stopPropagation()">
|
||||
${sources.map(source => {
|
||||
const labelParts = [
|
||||
source.sourceLabel || 'Unknown source',
|
||||
source.latestDisplayPrice || (typeof source.latestPrice === 'number' ? formatCurrency(source.latestPrice, source.currency || 'USD') : ''),
|
||||
source.pointCount ? `${source.pointCount} pt${source.pointCount === 1 ? '' : 's'}` : '',
|
||||
].filter(Boolean);
|
||||
return `<option value="${escapeHtml(source.sourceKey)}"${source.sourceKey === selectedSourceKey ? ' selected' : ''}>${escapeHtml(labelParts.join(' · '))}</option>`;
|
||||
}).join('')}
|
||||
</select>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderOptionFacts(opt) {
|
||||
const insights = opt.automationInsights || {};
|
||||
const currentPrice = typeof opt.currentPrice === 'number' ? formatCurrency(opt.currentPrice, insights.currency || 'USD') : '';
|
||||
const priceLabel = insights.displayPrice || currentPrice || 'Not yet tracked';
|
||||
const sourceLabel = insights.source || 'Automation feed';
|
||||
const statusLabel = insights.availability || insights.decisionNote || 'Matched from live search';
|
||||
const availableSources = getAvailableSources(opt);
|
||||
const selectedSourceKey = getOptionSelectedSourceKey(opt);
|
||||
const selectedSeries = getOptionSourceSeries(opt, selectedSourceKey);
|
||||
const selectedMeta = getOptionSourceMeta(opt, selectedSourceKey);
|
||||
const selectedPoint = selectedSeries.at(-1) || opt.latestPricePoint || null;
|
||||
const insights = selectedPoint ? {
|
||||
source: selectedMeta?.sourceLabel || selectedPoint.source || 'Automation feed',
|
||||
sourceUrl: selectedMeta?.sourceUrl || selectedPoint.sourceUrl || null,
|
||||
availability: selectedPoint.availability || null,
|
||||
decisionNote: selectedPoint.decisionNote || null,
|
||||
displayPrice: selectedPoint.displayPrice || null,
|
||||
currency: selectedPoint.currency || 'USD',
|
||||
} : (opt.automationInsights || {});
|
||||
const currentPrice = typeof selectedPoint?.price === 'number' ? formatCurrency(selectedPoint.price, insights.currency || 'USD') : '';
|
||||
const priceLabel = selectedPoint?.displayPrice || insights.displayPrice || currentPrice || 'Not yet tracked';
|
||||
const sourceLabel = selectedMeta?.sourceLabel || insights.source || 'Automation feed';
|
||||
const statusLabel = selectedPoint?.availability || selectedPoint?.decisionNote || insights.availability || insights.decisionNote || 'Matched from live search';
|
||||
const overviewItems = normalizeTextList(opt.details);
|
||||
const autoHighlights = normalizeTextList(insights.highlights);
|
||||
const features = normalizeTextList(insights.features);
|
||||
const amenities = normalizeTextList(insights.amenities);
|
||||
const inclusions = normalizeTextList(insights.inclusions);
|
||||
const limitations = normalizeTextList(insights.limitations);
|
||||
const autoHighlights = normalizeTextList(selectedPoint?.highlights || opt.automationInsights?.highlights);
|
||||
const features = normalizeTextList(selectedPoint?.features || opt.automationInsights?.features);
|
||||
const amenities = normalizeTextList(selectedPoint?.amenities || opt.automationInsights?.amenities);
|
||||
const inclusions = normalizeTextList(selectedPoint?.inclusions || opt.automationInsights?.inclusions);
|
||||
const limitations = normalizeTextList(selectedPoint?.limitations || opt.automationInsights?.limitations);
|
||||
const sourceMetaLine = selectedMeta
|
||||
? [selectedMeta.latestDisplayPrice || priceLabel, selectedMeta.pointCount ? `${selectedMeta.pointCount} point${selectedMeta.pointCount === 1 ? '' : 's'}` : '']
|
||||
.filter(Boolean)
|
||||
.join(' · ')
|
||||
: '';
|
||||
|
||||
const sections = [];
|
||||
|
||||
@@ -1616,7 +1757,8 @@
|
||||
</div>
|
||||
<div class="option-fact">
|
||||
<span class="option-fact-label">Source</span>
|
||||
<div class="option-fact-value">${escapeHtml(sourceLabel)}</div>
|
||||
${renderSourceSelect(opt)}
|
||||
${availableSources.length > 1 && sourceMetaLine ? `<div class="option-source-sub">${escapeHtml(sourceLabel)}${sourceMetaLine ? ` · ${escapeHtml(sourceMetaLine)}` : ''}</div>` : ''}
|
||||
</div>
|
||||
<div class="option-fact">
|
||||
<span class="option-fact-label">Status</span>
|
||||
@@ -1683,14 +1825,15 @@
|
||||
}
|
||||
|
||||
function renderPriceTrend(opt) {
|
||||
const series = Array.isArray(opt.priceHistory)
|
||||
? opt.priceHistory.filter(point => typeof point.price === 'number' && !Number.isNaN(point.price))
|
||||
: [];
|
||||
const selectedSourceKey = getOptionSelectedSourceKey(opt);
|
||||
const series = getOptionSourceSeries(opt, selectedSourceKey)
|
||||
.filter(point => typeof point.price === 'number' && !Number.isNaN(point.price));
|
||||
const selectedMeta = getOptionSourceMeta(opt, selectedSourceKey);
|
||||
|
||||
if (series.length === 0) {
|
||||
return `
|
||||
<div class="price-trend-empty">
|
||||
Price tracking appears after the next automation run.
|
||||
${selectedMeta?.sourceLabel ? `${escapeHtml(selectedMeta.sourceLabel)} price tracking appears after the next automation run.` : 'Price tracking appears after the next automation run.'}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
@@ -1733,13 +1876,14 @@
|
||||
? 'flat from first check'
|
||||
: `${delta > 0 ? '+' : '−'}${formatCurrency(Math.abs(delta), latest.currency)}`;
|
||||
const checkedLabel = latest.checkedAt ? formatTrackedDate(latest.checkedAt) : '';
|
||||
const sourceLabel = selectedMeta?.sourceLabel || latest.source || 'Tracked source';
|
||||
|
||||
return `
|
||||
<div class="price-trend">
|
||||
<div class="price-trend-header">
|
||||
<div>
|
||||
<div class="price-trend-label">Automation price trail</div>
|
||||
<div class="price-trend-value">${latest.displayPrice || formatCurrency(latest.price, latest.currency) || 'Tracked price'}</div>
|
||||
<div class="price-trend-value">${escapeHtml(sourceLabel)} · ${escapeHtml(latest.displayPrice || formatCurrency(latest.price, latest.currency) || 'Tracked price')}</div>
|
||||
</div>
|
||||
<div class="price-trend-sub">${series.length} point${series.length === 1 ? '' : 's'}${checkedLabel ? ` · ${checkedLabel}` : ''}</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user