refactor: improve maintainability by reducing LOC/reuse

This commit is contained in:
2026-03-28 16:52:19 +04:00
parent 8831c9c7b4
commit 6dcb5c0a52
29 changed files with 311 additions and 468 deletions
+1 -2
View File
@@ -141,8 +141,7 @@
const mins = Math.floor(remainingSec / 60);
const secs = remainingSec % 60;
const pct = Math.min(100, Math.round((received / total) * 100));
const invPlanNames = { pro: 'Pro', pro2x: 'Pro 2x', pro4x: 'Pro 4x', lifetime: 'Lifetime' };
const invPlanLabel = invPlanNames[inv.plan] || inv.plan;
const invPlanLabel = it.planLabels[inv.plan] || inv.plan;
%>
<% if (isPending) { %>
+3 -10
View File
@@ -476,15 +476,8 @@
});
// ── Interactive latency chart ──────────────────────────────────────
const REGION_COLORS = {
'eu-central': '#3b82f6',
'us-west': '#f59e0b',
'__none__': '#6b7280'
};
const REGION_LABELS = {
'eu-central': 'EU Central',
'us-west': 'US West'
};
const REGION_COLORS = <%~ JSON.stringify(it.regionColors) %>;
const REGION_LABELS = <%~ JSON.stringify(it.regionLabels) %>;
const MAX_RUNS = 100;
const chartPings = <%~ JSON.stringify(chartPings.map(p => ({
@@ -791,7 +784,7 @@
if (regions.length > 0) {
html += '<div class="mt-1.5 pt-1.5 border-t border-gray-700/50">';
for (const r of regions) {
const rLabel = {'eu-central':'EU Central','us-west':'US West'}[r.region] || r.region || 'unknown';
const rLabel = REGION_LABELS[r.region] || r.region || 'unknown';
const status = r.up ? '<span class="text-green-400">Up</span>' : '<span class="text-red-400">Down</span>';
const lat = r.latency_ms != null ? `<span class="text-gray-400 font-mono">${r.latency_ms}ms</span>` : '';
html += `<div class="flex items-center justify-between gap-3"><span>${rLabel}</span><span>${lat} ${status}</span></div>`;
+1 -4
View File
@@ -80,10 +80,7 @@
} catch {}
}, 30000);
const REGION_COLORS = {
'eu-central': '#3b82f6',
'us-west': '#f59e0b',
};
const REGION_COLORS = <%~ JSON.stringify(it.regionColors) %>;
// Per-monitor tracking: regions = {region: [vals]}, timeline = [{region, val}] in arrival order
const sparkData = {}; // mid → { regions: {region: [vals]}, timeline: [{region}] }
+1 -1
View File
@@ -12,7 +12,7 @@
const allIntervals = [['2','2 seconds'],['5','5 seconds'],['10','10 seconds'],['20','20 seconds'],['30','30 seconds'],['60','1 minute'],['300','5 minutes'],['600','10 minutes'],['1800','30 minutes'],['3600','1 hour']];
const intervals = allIntervals.filter(([val]) => Number(val) >= minInterval);
const timeouts = [['5000','5 seconds'],['10000','10 seconds'],['20000','20 seconds'],['30000','30 seconds'],['40000','40 seconds'],['50000','50 seconds'],['60000','60 seconds']];
const regions = [['eu-central','EU Central'],['us-west','US West']];
const regions = it.regions;
const curMethod = monitor.method || 'GET';
const bodyHidden = ['GET','HEAD','OPTIONS'].includes(curMethod);
%>
+3 -5
View File
@@ -5,7 +5,7 @@
const hasEmail = !!it.account.email_hash;
const createdDate = new Date(it.account.created_at).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
const plan = it.account.plan || 'free';
const planLabel = { free: 'Free', pro: 'Pro', pro2x: 'Pro 2x', pro4x: 'Pro 4x', lifetime: 'Lifetime' }[plan] || plan;
const planLabel = it.planLabels[plan] || plan;
const limits = {
free: { monitors: 10, interval: '30s', regions: 1 },
pro: { monitors: 200, interval: '5s', regions: 'All' },
@@ -55,9 +55,8 @@
<a href="/dashboard/checkout" class="text-blue-400 hover:text-blue-300 ml-1">Extend or upgrade to Lifetime</a>
<% const stack = typeof it.account.plan_stack === 'string' ? JSON.parse(it.account.plan_stack) : (it.account.plan_stack || []);
if (stack.length > 0) {
const planNames = { free: 'Free', pro: 'Pro', pro2x: 'Pro 2x', pro4x: 'Pro 4x', lifetime: 'Lifetime' };
const parts = stack.map(function(s) {
const name = planNames[s.plan] || s.plan;
const name = it.planLabels[s.plan] || s.plan;
return s.remaining_days == null ? name : name + ' (' + s.remaining_days + 'd)';
});
%>
@@ -176,8 +175,7 @@
const statusColors = { paid: 'green', confirming: 'blue', pending: 'yellow', underpaid: 'orange' };
const statusColor = statusColors[inv.status] || 'gray';
const date = new Date(inv.created_at).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
const invPlanNames = { pro: 'Pro', pro2x: 'Pro 2x', pro4x: 'Pro 4x', lifetime: 'Lifetime' };
const planLabel = inv.plan === 'lifetime' ? 'Lifetime' : `${invPlanNames[inv.plan] || 'Pro'} × ${inv.months}mo`;
const planLabel = inv.plan === 'lifetime' ? 'Lifetime' : `${it.planLabels[inv.plan] || 'Pro'} × ${inv.months}mo`;
%>
<div class="flex items-center justify-between p-3 rounded-lg bg-surface border border-border-subtle hover:border-border-strong transition-colors">
<div class="flex items-center gap-3">