432 lines
16 KiB
JavaScript
432 lines
16 KiB
JavaScript
/* EDM V2 page interactions extracted from edm_dashboard_v2.html. */
|
|
let campaignPriceChartInstance = null;
|
|
let activeCampaignHistoryRange = 'month';
|
|
let currentCampaignICode = null;
|
|
let currentCampaignProductName = '';
|
|
let campaignChartLoader = null;
|
|
|
|
function getCSRFToken() {
|
|
return document.querySelector('meta[name="csrf-token"]').getAttribute('content');
|
|
}
|
|
|
|
function copyCampaignProductId(text, element) {
|
|
if (!text) return;
|
|
const originalHtml = element.innerHTML;
|
|
const showFeedback = () => {
|
|
element.innerHTML = '已複製 <i class="fas fa-check" aria-hidden="true"></i>';
|
|
setTimeout(() => {
|
|
element.innerHTML = originalHtml;
|
|
}, 1200);
|
|
};
|
|
|
|
if (navigator.clipboard && window.isSecureContext) {
|
|
navigator.clipboard.writeText(text).then(showFeedback);
|
|
return;
|
|
}
|
|
|
|
const textarea = document.createElement('textarea');
|
|
textarea.value = text;
|
|
textarea.style.position = 'fixed';
|
|
textarea.style.opacity = '0';
|
|
document.body.appendChild(textarea);
|
|
textarea.focus();
|
|
textarea.select();
|
|
try {
|
|
document.execCommand('copy');
|
|
showFeedback();
|
|
} finally {
|
|
document.body.removeChild(textarea);
|
|
}
|
|
}
|
|
|
|
function formatCampaignPriceTick(value) {
|
|
return '$' + Number(value || 0).toLocaleString();
|
|
}
|
|
|
|
function setCampaignHistoryChartState(message, showCanvas = false) {
|
|
const state = document.getElementById('campaignHistoryChartState');
|
|
const canvas = document.getElementById('campaignPriceChart');
|
|
if (!state || !canvas) return;
|
|
state.textContent = message;
|
|
state.classList.toggle('is-hidden', showCanvas);
|
|
canvas.classList.toggle('is-hidden', !showCanvas);
|
|
}
|
|
|
|
function destroyCampaignPriceChart() {
|
|
if (campaignPriceChartInstance) {
|
|
campaignPriceChartInstance.destroy();
|
|
campaignPriceChartInstance = null;
|
|
}
|
|
}
|
|
|
|
function ensureCampaignChart() {
|
|
if (window.EwoooCChartTheme && window.EwoooCChartTheme.loadChartJs) {
|
|
return window.EwoooCChartTheme.loadChartJs();
|
|
}
|
|
if (typeof Chart !== 'undefined') {
|
|
return Promise.resolve(window.Chart);
|
|
}
|
|
if (campaignChartLoader) {
|
|
return campaignChartLoader;
|
|
}
|
|
campaignChartLoader = new Promise((resolve, reject) => {
|
|
const existing = document.querySelector('script[data-chartjs-loader="campaign"]');
|
|
if (existing) {
|
|
existing.addEventListener('load', () => resolve(window.Chart), { once: true });
|
|
existing.addEventListener('error', () => reject(new Error('Chart.js 載入失敗')), { once: true });
|
|
return;
|
|
}
|
|
const script = document.createElement('script');
|
|
script.src = 'https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js';
|
|
script.async = true;
|
|
script.dataset.chartjsLoader = 'campaign';
|
|
script.onload = () => resolve(window.Chart);
|
|
script.onerror = () => reject(new Error('Chart.js 載入失敗'));
|
|
document.head.appendChild(script);
|
|
});
|
|
return campaignChartLoader;
|
|
}
|
|
|
|
function updateCampaignHistoryRangeButtons() {
|
|
document.querySelectorAll('[data-campaign-history-range]').forEach(button => {
|
|
button.classList.toggle('is-active', button.dataset.campaignHistoryRange === activeCampaignHistoryRange);
|
|
});
|
|
}
|
|
|
|
function showCampaignHistory(iCode, productName, range = activeCampaignHistoryRange) {
|
|
const modalEl = document.getElementById('campaignHistoryModal');
|
|
const title = document.getElementById('campaignHistoryModalLabel');
|
|
const subtitle = document.getElementById('campaignHistoryModalSubtitle');
|
|
const canvas = document.getElementById('campaignPriceChart');
|
|
|
|
if (!modalEl || !title || !subtitle || !canvas) return;
|
|
|
|
currentCampaignICode = iCode;
|
|
currentCampaignProductName = productName || '歷史價格走勢';
|
|
activeCampaignHistoryRange = range;
|
|
updateCampaignHistoryRangeButtons();
|
|
|
|
title.textContent = currentCampaignProductName;
|
|
subtitle.textContent = `商品 ID ${iCode} · 讀取真實價格紀錄`;
|
|
destroyCampaignPriceChart();
|
|
setCampaignHistoryChartState('載入價格歷史中...');
|
|
|
|
const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
|
|
modal.show();
|
|
|
|
ensureCampaignChart()
|
|
.then(() => fetch(`/api/history/i-code/${encodeURIComponent(iCode)}?range=${activeCampaignHistoryRange}`))
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP ${response.status}`);
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(payload => {
|
|
const points = payload.data || [];
|
|
if (payload.range_label) {
|
|
subtitle.textContent = `商品 ID ${iCode} · ${payload.range_label}真實價格紀錄`;
|
|
}
|
|
|
|
if (!Array.isArray(points) || points.length === 0) {
|
|
setCampaignHistoryChartState('目前沒有可顯示的歷史價格紀錄。');
|
|
return;
|
|
}
|
|
|
|
setCampaignHistoryChartState('', true);
|
|
const ctx = canvas.getContext('2d');
|
|
const gradient = ctx.createLinearGradient(0, 0, 0, 380);
|
|
gradient.addColorStop(0, 'rgba(190, 106, 45, 0.26)');
|
|
gradient.addColorStop(1, 'rgba(190, 106, 45, 0.04)');
|
|
|
|
campaignPriceChartInstance = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: points.map(point => point.t),
|
|
datasets: [{
|
|
label: '價格',
|
|
data: points.map(point => point.p),
|
|
borderColor: '#be6a2d',
|
|
backgroundColor: gradient,
|
|
borderWidth: 3,
|
|
fill: true,
|
|
tension: 0.35,
|
|
pointRadius: 3,
|
|
pointHoverRadius: 7,
|
|
pointBackgroundColor: '#be6a2d',
|
|
pointBorderColor: '#fff',
|
|
pointBorderWidth: 2
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
interaction: {
|
|
mode: 'index',
|
|
intersect: false
|
|
},
|
|
plugins: {
|
|
legend: { display: false },
|
|
tooltip: {
|
|
backgroundColor: 'rgba(55, 45, 35, 0.94)',
|
|
titleColor: '#faf7f0',
|
|
bodyColor: '#faf7f0',
|
|
borderColor: '#be6a2d',
|
|
borderWidth: 1,
|
|
displayColors: false,
|
|
padding: 12,
|
|
callbacks: {
|
|
label: context => '價格 ' + formatCampaignPriceTick(context.parsed.y)
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: false,
|
|
grid: {
|
|
color: 'rgba(71, 61, 49, 0.08)'
|
|
},
|
|
ticks: {
|
|
color: '#7f715f',
|
|
callback: formatCampaignPriceTick
|
|
}
|
|
},
|
|
x: {
|
|
grid: { display: false },
|
|
ticks: {
|
|
color: '#9b8a77',
|
|
maxRotation: 0,
|
|
autoSkip: true,
|
|
maxTicksLimit: 8
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
})
|
|
.catch(error => {
|
|
console.error('活動商品價格歷史載入失敗:', error);
|
|
setCampaignHistoryChartState('價格歷史載入失敗，請稍後再試。');
|
|
});
|
|
}
|
|
|
|
function applyCampaignFilter(card, filter) {
|
|
const rows = Array.from(card.querySelectorAll('[data-campaign-row]'));
|
|
const empty = card.querySelector('.campaign-filter-empty');
|
|
const counter = card.querySelector('[data-campaign-visible-count]');
|
|
let visibleCount = 0;
|
|
|
|
rows.forEach(row => {
|
|
const matches = filter === 'all' || row.dataset.campaignFilter === filter;
|
|
row.classList.toggle('is-hidden', !matches);
|
|
if (matches) visibleCount += 1;
|
|
});
|
|
|
|
if (empty) {
|
|
empty.classList.toggle('is-hidden', visibleCount !== 0);
|
|
}
|
|
|
|
if (counter) {
|
|
counter.textContent = `${visibleCount.toLocaleString()} 筆`;
|
|
}
|
|
}
|
|
|
|
document.querySelectorAll('.campaign-table-card').forEach(card => {
|
|
card.querySelectorAll('[data-campaign-filter]').forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
card.querySelectorAll('[data-campaign-filter]').forEach(item => {
|
|
item.classList.toggle('is-active', item === button);
|
|
});
|
|
applyCampaignFilter(card, button.dataset.campaignFilter);
|
|
});
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll('[data-campaign-copy]').forEach(button => {
|
|
button.addEventListener('click', event => {
|
|
event.stopPropagation();
|
|
copyCampaignProductId(button.dataset.campaignCopy, button);
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll('[data-campaign-history-trigger]').forEach(button => {
|
|
button.addEventListener('click', event => {
|
|
event.stopPropagation();
|
|
showCampaignHistory(button.dataset.iCode, button.dataset.productName);
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(element => {
|
|
bootstrap.Tooltip.getOrCreateInstance(element);
|
|
});
|
|
|
|
document.querySelectorAll('[data-campaign-history-range]').forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
if (!currentCampaignICode) return;
|
|
showCampaignHistory(currentCampaignICode, currentCampaignProductName, button.dataset.campaignHistoryRange);
|
|
});
|
|
});
|
|
|
|
const campaignTaskMap = {
|
|
edm: {
|
|
confirmText: '確定要手動執行 EDM 商品監控嗎？',
|
|
url: '/api/run_edm_task'
|
|
},
|
|
festival: {
|
|
confirmText: '確定要手動執行節慶活動監控嗎？',
|
|
url: '/api/run_festival_task'
|
|
},
|
|
notification: {
|
|
confirmText: '確定要發送 EDM 活動通知嗎？',
|
|
url: '/api/trigger_edm_notification'
|
|
}
|
|
};
|
|
|
|
function runCampaignTask(taskName) {
|
|
const task = campaignTaskMap[taskName];
|
|
if (!task || !confirm(task.confirmText)) return;
|
|
fetch(task.url, {
|
|
method: 'POST',
|
|
headers: { 'X-CSRFToken': getCSRFToken() }
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => alert(data.message))
|
|
.catch(error => alert('錯誤: ' + error));
|
|
}
|
|
|
|
document.querySelectorAll('[data-campaign-task]').forEach(button => {
|
|
button.addEventListener('click', () => runCampaignTask(button.dataset.campaignTask));
|
|
});
|
|
|
|
function trackMomoLinkClick(event) {
|
|
const link = event.target.closest('.momo-tracked-link');
|
|
if (!link) {
|
|
return;
|
|
}
|
|
|
|
const href = link.getAttribute('href') || '';
|
|
const originalHref = link.dataset.momoOriginalUrl || href;
|
|
if (!href || href === '#') {
|
|
return;
|
|
}
|
|
|
|
const payload = {
|
|
url: originalHref,
|
|
page: location.pathname,
|
|
source: link.dataset.trackSource || 'unknown',
|
|
platform: link.dataset.trackPlatform || 'momo',
|
|
product_id: link.dataset.trackProductId || '',
|
|
i_code: link.dataset.trackIcode || '',
|
|
product_name: link.dataset.trackProductName || '',
|
|
label: (link.textContent || '').trim(),
|
|
effective_url: href
|
|
};
|
|
|
|
const isBlocked = isBlockedMomoUrl(href);
|
|
|
|
if (isBlocked) {
|
|
console.warn('[EDM Dashboard V2] 嘗試打開 MOMO 404 網址', payload);
|
|
event.preventDefault();
|
|
|
|
const fallbackUrl = link.dataset.momoFallbackUrl || getSafeMomoFallbackUrl(link);
|
|
if (fallbackUrl && fallbackUrl !== '#' && fallbackUrl !== href) {
|
|
link.dataset.momoFallbackUrl = fallbackUrl;
|
|
link.setAttribute('href', fallbackUrl);
|
|
payload.effective_url = fallbackUrl;
|
|
openMomoUrl(link, fallbackUrl);
|
|
fetch('/api/track_momo_link', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': getCSRFToken()
|
|
},
|
|
body: JSON.stringify(payload)
|
|
}).catch(() => {});
|
|
return;
|
|
}
|
|
}
|
|
|
|
fetch('/api/track_momo_link', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': getCSRFToken()
|
|
},
|
|
body: JSON.stringify(payload)
|
|
}).catch(() => {});
|
|
}
|
|
|
|
function getSafeMomoFallbackUrl(link) {
|
|
const iCode = (link.dataset.trackIcode || link.dataset.trackProductId || '').trim();
|
|
if (!isLikelyMomoProductCode(iCode)) {
|
|
return '#';
|
|
}
|
|
return `https://www.momoshop.com.tw/goods/GoodsDetail.jsp?i_code=${encodeURIComponent(iCode)}`;
|
|
}
|
|
|
|
function isBlockedMomoUrl(url) {
|
|
const lowered = (url || '').toLowerCase();
|
|
if (lowered.includes('EC404.html') || lowered.includes('ec404')) {
|
|
return true;
|
|
}
|
|
try {
|
|
const parsed = new URL(url, location.origin);
|
|
const path = (parsed.pathname || '').toLowerCase();
|
|
if (!path.includes('goodsdetail')) {
|
|
return false;
|
|
}
|
|
const code = (parsed.searchParams.get('i_code') || '').trim();
|
|
if (code) {
|
|
return !isLikelyMomoProductCode(code);
|
|
}
|
|
return !/\/goodsdetail\/[^/?#]+/i.test(path);
|
|
} catch (error) {
|
|
if (!/goodsdetail\.jsp/i.test(lowered)) {
|
|
return false;
|
|
}
|
|
const hasCode = /[?&]i_code=([^&#]+)/i.test(lowered);
|
|
if (!hasCode) {
|
|
return true;
|
|
}
|
|
const match = /[?&]i_code=([^&#]+)/i.exec(lowered);
|
|
const code = match ? (match[1] || '').trim() : '';
|
|
return !isLikelyMomoProductCode(code);
|
|
}
|
|
}
|
|
|
|
function isLikelyMomoProductCode(value) {
|
|
const cleaned = (value || '').trim();
|
|
if (!cleaned) {
|
|
return false;
|
|
}
|
|
const lowered = cleaned.toLowerCase();
|
|
if (lowered === 'nan' || lowered === 'none' || lowered === 'null' || lowered === 'undefined') {
|
|
return false;
|
|
}
|
|
if (lowered.startsWith('momo_') || lowered.startsWith('manual_') || lowered.startsWith('pchome_')) {
|
|
return false;
|
|
}
|
|
return /^[A-Za-z0-9_-]{4,}$/.test(cleaned);
|
|
}
|
|
|
|
function openMomoUrl(link, url) {
|
|
if (!url || url === '#') {
|
|
return;
|
|
}
|
|
|
|
const target = (link.getAttribute('target') || '_self').toLowerCase();
|
|
if (target === '_blank') {
|
|
window.open(url, '_blank', 'noopener,noreferrer');
|
|
return;
|
|
}
|
|
|
|
if (target === '_self' || target === '') {
|
|
window.location.href = url;
|
|
return;
|
|
}
|
|
|
|
window.open(url, target);
|
|
}
|
|
|
|
document.addEventListener('click', trackMomoLinkClick);
|