Initial Checkin
This commit is contained in:
573
frontend/app.js
Normal file
573
frontend/app.js
Normal file
@@ -0,0 +1,573 @@
|
||||
const qs = (s) => document.querySelector(s);
|
||||
const ptbody = qs('#positions-table tbody');
|
||||
const pthead = qs('#positions-table thead');
|
||||
const aggregateCheckbox = qs('#aggregate-same-day');
|
||||
const refreshButton = qs('#refresh-lots');
|
||||
let latestPositions = [];
|
||||
let sortState = [];
|
||||
let filterState = {};
|
||||
let aggregateSameDay = true;
|
||||
let columnOrder = [];
|
||||
let dragColumnKey = null;
|
||||
let isRefreshing = false;
|
||||
|
||||
const STORAGE_KEY = 'ib-dashboard-open-lots-table-state';
|
||||
const numericColumns = new Set([
|
||||
'qty',
|
||||
'avg_price',
|
||||
'cost_basis',
|
||||
'market_price',
|
||||
'market_value',
|
||||
'gain_dollars',
|
||||
'gain_percent',
|
||||
'cagr_percent',
|
||||
'days_since_buy',
|
||||
]);
|
||||
const dateColumns = new Set(['buy_time']);
|
||||
|
||||
const columnDefs = [
|
||||
{ key: 'security_type', label: 'Type', filter: 'select', options: [{ value: '', label: 'All' }, { value: 'STK', label: 'STK' }, { value: 'OPT', label: 'OPT' }] },
|
||||
{ key: 'display_symbol', label: 'Security', filter: 'text', placeholder: 'AM*' },
|
||||
{ key: 'currency', label: 'Currency', filter: 'select-dynamic', options: [{ value: '', label: 'All' }] },
|
||||
{ key: 'underlying_symbol', label: 'Underlying', filter: 'text', placeholder: 'A*' },
|
||||
{ key: 'qty', label: 'Qty', filter: 'text', placeholder: '>100', numeric: true },
|
||||
{ key: 'avg_price', label: 'Avg Price', filter: 'text', placeholder: '<20', numeric: true },
|
||||
{ key: 'cost_basis', label: 'Cost Basis', filter: 'text', placeholder: '>1000', numeric: true },
|
||||
{ key: 'market_price', label: 'Market Price', filter: 'text', placeholder: '<10', numeric: true },
|
||||
{ key: 'market_value', label: 'Market Value', filter: 'text', placeholder: '>5000', numeric: true },
|
||||
{ key: 'gain_dollars', label: 'Gain $', filter: 'text', placeholder: '>0', numeric: true },
|
||||
{ key: 'gain_percent', label: 'Gain %', filter: 'text', placeholder: '>10', numeric: true },
|
||||
{ key: 'cagr_percent', label: 'CAGR %', filter: 'text', placeholder: '>5', numeric: true },
|
||||
{ key: 'days_since_buy', label: 'Days Since Buy', filter: 'text', placeholder: '>365', numeric: true },
|
||||
{ key: 'ltcg', label: 'LTCG', filter: 'select', options: [{ value: '', label: 'All' }, { value: 'X', label: 'Long-term' }, { value: '!X', label: 'Short-term' }] },
|
||||
{ key: 'buy_time', label: 'Buy Time', filter: 'text', placeholder: '>2025-01-01', date: true },
|
||||
];
|
||||
|
||||
const columnAccessors = {
|
||||
security_type: (p) => p.security_type ?? '',
|
||||
display_symbol: (p) => p.display_symbol ?? p.symbol ?? '',
|
||||
currency: (p) => p.currency ?? '',
|
||||
underlying_symbol: (p) => p.underlying_symbol ?? '',
|
||||
qty: (p) => p.qty,
|
||||
avg_price: (p) => p.avg_price,
|
||||
cost_basis: (p) => p.cost_basis,
|
||||
market_price: (p) => p.market_price,
|
||||
market_value: (p) => p.market_value,
|
||||
gain_dollars: (p) => p.gain_dollars,
|
||||
gain_percent: (p) => p.gain_percent,
|
||||
cagr_percent: (p) => p.cagr_percent,
|
||||
days_since_buy: (p) => p.days_since_buy,
|
||||
ltcg: (p) => p.ltcg ?? '',
|
||||
buy_time: (p) => p.buy_time ?? '',
|
||||
};
|
||||
|
||||
const defaultColumnOrder = columnDefs.map((column) => column.key);
|
||||
|
||||
function getActiveColumns() {
|
||||
const ordered = columnOrder.length ? columnOrder : defaultColumnOrder;
|
||||
return ordered
|
||||
.map((key) => columnDefs.find((column) => column.key === key))
|
||||
.filter(Boolean);
|
||||
}
|
||||
|
||||
function asNumber(value) {
|
||||
if (value == null || value === '') return null;
|
||||
const parsed = Number(value);
|
||||
return Number.isFinite(parsed) ? parsed : null;
|
||||
}
|
||||
|
||||
function formatNumber(value, digits = 2) {
|
||||
const num = asNumber(value);
|
||||
if (num == null) return '';
|
||||
return num.toLocaleString(undefined, {
|
||||
minimumFractionDigits: digits,
|
||||
maximumFractionDigits: digits,
|
||||
});
|
||||
}
|
||||
|
||||
function formatPercent(value) {
|
||||
const num = asNumber(value);
|
||||
if (num == null) return '';
|
||||
return `${formatNumber(num, 2)}%`;
|
||||
}
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value ?? '')
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
}
|
||||
|
||||
function saveTableState() {
|
||||
try {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify({
|
||||
sortState,
|
||||
filterState,
|
||||
aggregateSameDay,
|
||||
columnOrder,
|
||||
}));
|
||||
} catch (error) {
|
||||
console.warn('Failed to save table state', error);
|
||||
}
|
||||
}
|
||||
|
||||
function loadTableState() {
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY);
|
||||
if (!raw) return;
|
||||
const parsed = JSON.parse(raw);
|
||||
if (Array.isArray(parsed.sortState)) {
|
||||
sortState = parsed.sortState.filter((rule) => rule && typeof rule.column === 'string' && typeof rule.direction === 'string');
|
||||
}
|
||||
if (parsed.filterState && typeof parsed.filterState === 'object') {
|
||||
filterState = Object.fromEntries(
|
||||
Object.entries(parsed.filterState).filter(([, value]) => typeof value === 'string' && value.trim() !== '')
|
||||
);
|
||||
}
|
||||
if (typeof parsed.aggregateSameDay === 'boolean') {
|
||||
aggregateSameDay = parsed.aggregateSameDay;
|
||||
}
|
||||
if (Array.isArray(parsed.columnOrder)) {
|
||||
const valid = parsed.columnOrder.filter((key) => defaultColumnOrder.includes(key));
|
||||
if (valid.length) {
|
||||
const missing = defaultColumnOrder.filter((key) => !valid.includes(key));
|
||||
columnOrder = [...valid, ...missing];
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('Failed to load table state', error);
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchJson(path) {
|
||||
const res = await fetch(path);
|
||||
if (!res.ok) throw new Error('Network response not ok');
|
||||
return res.json();
|
||||
}
|
||||
|
||||
function compareValues(a, b) {
|
||||
const aMissing = a == null || a === '';
|
||||
const bMissing = b == null || b === '';
|
||||
if (aMissing && bMissing) return 0;
|
||||
if (aMissing) return 1;
|
||||
if (bMissing) return -1;
|
||||
if (typeof a === 'number' && typeof b === 'number') return a - b;
|
||||
return String(a).localeCompare(String(b), undefined, { numeric: true, sensitivity: 'base' });
|
||||
}
|
||||
|
||||
function escapeRegex(text) {
|
||||
return text.replace(/[.+^${}()|[\]\\]/g, '\\$&');
|
||||
}
|
||||
|
||||
function wildcardToRegex(pattern) {
|
||||
const escaped = escapeRegex(pattern).replace(/\*/g, '.*').replace(/\?/g, '.');
|
||||
return new RegExp(`^${escaped}$`, 'i');
|
||||
}
|
||||
|
||||
function parseComparator(expression) {
|
||||
const match = String(expression).trim().match(/^(<=|>=|<|>|=)\s*(.+)$/);
|
||||
if (!match) return null;
|
||||
return { operator: match[1], value: match[2].trim() };
|
||||
}
|
||||
|
||||
function compareByOperator(left, operator, right) {
|
||||
if (left == null || right == null) return false;
|
||||
switch (operator) {
|
||||
case '<': return left < right;
|
||||
case '<=': return left <= right;
|
||||
case '>': return left > right;
|
||||
case '>=': return left >= right;
|
||||
case '=': return left === right;
|
||||
default: return false;
|
||||
}
|
||||
}
|
||||
|
||||
function matchesFilter(column, rawValue, expression) {
|
||||
const filter = String(expression ?? '').trim();
|
||||
if (!filter) return true;
|
||||
const value = rawValue ?? '';
|
||||
|
||||
if (column === 'ltcg' && filter === '!X') {
|
||||
return String(value).trim().toUpperCase() !== 'X';
|
||||
}
|
||||
|
||||
if (numericColumns.has(column)) {
|
||||
const numericValue = asNumber(value);
|
||||
const comparator = parseComparator(filter);
|
||||
if (comparator) return compareByOperator(numericValue, comparator.operator, asNumber(comparator.value));
|
||||
return numericValue === asNumber(filter);
|
||||
}
|
||||
|
||||
if (dateColumns.has(column)) {
|
||||
const normalizedValue = String(value);
|
||||
const comparator = parseComparator(filter);
|
||||
if (comparator) return compareByOperator(normalizedValue, comparator.operator, comparator.value);
|
||||
return wildcardToRegex(filter).test(normalizedValue);
|
||||
}
|
||||
|
||||
return wildcardToRegex(filter).test(String(value));
|
||||
}
|
||||
|
||||
function filterPositions(list) {
|
||||
return list.filter((row) => Object.entries(filterState).every(([column, expression]) => {
|
||||
const accessor = columnAccessors[column];
|
||||
if (!accessor) return true;
|
||||
return matchesFilter(column, accessor(row), expression);
|
||||
}));
|
||||
}
|
||||
|
||||
function toDateOnly(value) {
|
||||
return String(value ?? '').slice(0, 10);
|
||||
}
|
||||
|
||||
function aggregateLots(list) {
|
||||
if (!aggregateSameDay) return [...list];
|
||||
const groups = new Map();
|
||||
for (const lot of list) {
|
||||
const buyDate = toDateOnly(lot.buy_time);
|
||||
const key = `${lot.instrument_key ?? ''}|${buyDate}`;
|
||||
const existing = groups.get(key);
|
||||
if (!existing) {
|
||||
groups.set(key, {
|
||||
...lot,
|
||||
buy_time: buyDate || lot.buy_time,
|
||||
});
|
||||
continue;
|
||||
}
|
||||
|
||||
existing.qty = (existing.qty ?? 0) + (lot.qty ?? 0);
|
||||
existing.cost_basis = (existing.cost_basis ?? 0) + (lot.cost_basis ?? 0);
|
||||
existing.market_value = (existing.market_value ?? 0) + (lot.market_value ?? 0);
|
||||
existing.gain_dollars = (existing.gain_dollars ?? 0) + (lot.gain_dollars ?? 0);
|
||||
existing.days_since_buy = Math.min(
|
||||
asNumber(existing.days_since_buy) ?? Number.MAX_SAFE_INTEGER,
|
||||
asNumber(lot.days_since_buy) ?? Number.MAX_SAFE_INTEGER,
|
||||
);
|
||||
existing.ltcg = existing.ltcg === 'X' && lot.ltcg === 'X' ? 'X' : '';
|
||||
|
||||
const qty = asNumber(existing.qty);
|
||||
const costBasis = asNumber(existing.cost_basis);
|
||||
const marketValue = asNumber(existing.market_value);
|
||||
existing.avg_price = qty ? Math.abs(costBasis / qty) : null;
|
||||
existing.market_price = qty ? Math.abs(marketValue / qty) : null;
|
||||
existing.gain_percent = costBasis ? (existing.gain_dollars / Math.abs(costBasis)) * 100 : null;
|
||||
|
||||
const cagrBase = Math.abs(costBasis ?? 0);
|
||||
if (cagrBase > 0 && existing.gain_dollars != null && existing.days_since_buy != null) {
|
||||
const years = Math.max(existing.days_since_buy / 365.25, 1e-9);
|
||||
if (years < 1) {
|
||||
existing.cagr_percent = existing.gain_percent;
|
||||
} else if ((costBasis ?? 0) < 0) {
|
||||
const endLiability = Math.abs(existing.market_value ?? 0);
|
||||
existing.cagr_percent = endLiability > 0
|
||||
? (((cagrBase / endLiability) ** (1 / years)) - 1) * 100
|
||||
: null;
|
||||
} else {
|
||||
const endingValue = cagrBase + existing.gain_dollars;
|
||||
existing.cagr_percent = endingValue > 0
|
||||
? (((endingValue / cagrBase) ** (1 / years)) - 1) * 100
|
||||
: null;
|
||||
}
|
||||
} else {
|
||||
existing.cagr_percent = null;
|
||||
}
|
||||
}
|
||||
return Array.from(groups.values());
|
||||
}
|
||||
|
||||
function sortPositions(list) {
|
||||
if (!sortState.length) return [...list];
|
||||
return [...list].sort((left, right) => {
|
||||
for (const rule of sortState) {
|
||||
const accessor = columnAccessors[rule.column];
|
||||
if (!accessor) continue;
|
||||
const leftValue = accessor(left);
|
||||
const rightValue = accessor(right);
|
||||
const result = numericColumns.has(rule.column)
|
||||
? compareValues(asNumber(leftValue), asNumber(rightValue))
|
||||
: compareValues(leftValue, rightValue);
|
||||
if (result !== 0) return rule.direction === 'asc' ? result : -result;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
|
||||
function getCurrencyOptions() {
|
||||
const currencies = [...new Set(latestPositions.map((position) => position.currency).filter(Boolean))].sort((a, b) => a.localeCompare(b));
|
||||
return [{ value: '', label: 'All' }, ...currencies.map((currency) => ({ value: currency, label: currency }))];
|
||||
}
|
||||
|
||||
function captureFocusState() {
|
||||
const active = document.activeElement;
|
||||
if (!active || !active.classList || !active.classList.contains('filter-input')) {
|
||||
return null;
|
||||
}
|
||||
return {
|
||||
column: active.dataset.column,
|
||||
selectionStart: typeof active.selectionStart === 'number' ? active.selectionStart : null,
|
||||
selectionEnd: typeof active.selectionEnd === 'number' ? active.selectionEnd : null,
|
||||
};
|
||||
}
|
||||
|
||||
function restoreFocusState(state) {
|
||||
if (!state?.column) return;
|
||||
const input = document.querySelector(`.filter-input[data-column="${state.column}"]`);
|
||||
if (!input) return;
|
||||
input.focus();
|
||||
if (typeof state.selectionStart === 'number' && typeof state.selectionEnd === 'number' && typeof input.setSelectionRange === 'function') {
|
||||
input.setSelectionRange(state.selectionStart, state.selectionEnd);
|
||||
}
|
||||
}
|
||||
|
||||
function createFilterControl(column) {
|
||||
const value = filterState[column.key] ?? '';
|
||||
if (column.filter === 'select' || column.filter === 'select-dynamic') {
|
||||
const select = document.createElement('select');
|
||||
select.className = 'filter-input filter-select';
|
||||
select.dataset.column = column.key;
|
||||
const options = column.filter === 'select-dynamic' ? getCurrencyOptions() : column.options;
|
||||
for (const option of options) {
|
||||
const element = document.createElement('option');
|
||||
element.value = option.value;
|
||||
element.textContent = option.label;
|
||||
select.appendChild(element);
|
||||
}
|
||||
select.value = value;
|
||||
if (value) {
|
||||
select.classList.add('filter-active');
|
||||
}
|
||||
select.addEventListener('change', onFilterInput);
|
||||
return select;
|
||||
}
|
||||
|
||||
const input = document.createElement('input');
|
||||
input.className = 'filter-input filter-text';
|
||||
input.dataset.column = column.key;
|
||||
input.placeholder = column.placeholder ?? '';
|
||||
input.value = value;
|
||||
if (value) {
|
||||
input.classList.add('filter-active');
|
||||
}
|
||||
input.addEventListener('input', onFilterInput);
|
||||
return input;
|
||||
}
|
||||
|
||||
function renderHeader() {
|
||||
pthead.innerHTML = '';
|
||||
const sortRow = document.createElement('tr');
|
||||
sortRow.className = 'sort-row';
|
||||
const filterRow = document.createElement('tr');
|
||||
filterRow.className = 'filter-row';
|
||||
|
||||
for (const column of getActiveColumns()) {
|
||||
const sortTh = document.createElement('th');
|
||||
sortTh.dataset.column = column.key;
|
||||
sortTh.draggable = true;
|
||||
if (column.numeric) sortTh.classList.add('num');
|
||||
|
||||
const label = document.createElement('span');
|
||||
label.textContent = column.label;
|
||||
sortTh.appendChild(label);
|
||||
|
||||
const ruleIndex = sortState.findIndex((rule) => rule.column === column.key);
|
||||
if (ruleIndex !== -1) {
|
||||
const rule = sortState[ruleIndex];
|
||||
const meta = document.createElement('span');
|
||||
meta.className = 'sort-meta';
|
||||
meta.textContent = `${rule.direction === 'asc' ? '▲' : '▼'} ${ruleIndex + 1}`;
|
||||
sortTh.appendChild(meta);
|
||||
}
|
||||
|
||||
sortTh.addEventListener('click', (event) => {
|
||||
if (event.target.closest('.drag-handle')) return;
|
||||
cycleSort(column.key, event.shiftKey);
|
||||
});
|
||||
sortTh.addEventListener('dragstart', onHeaderDragStart);
|
||||
sortTh.addEventListener('dragover', onHeaderDragOver);
|
||||
sortTh.addEventListener('drop', onHeaderDrop);
|
||||
sortTh.addEventListener('dragend', onHeaderDragEnd);
|
||||
sortRow.appendChild(sortTh);
|
||||
|
||||
const filterTh = document.createElement('th');
|
||||
if (column.numeric) filterTh.classList.add('num');
|
||||
filterTh.appendChild(createFilterControl(column));
|
||||
filterRow.appendChild(filterTh);
|
||||
}
|
||||
|
||||
pthead.appendChild(sortRow);
|
||||
pthead.appendChild(filterRow);
|
||||
}
|
||||
|
||||
function renderCell(columnKey, row) {
|
||||
switch (columnKey) {
|
||||
case 'security_type':
|
||||
return escapeHtml(row.security_type ?? '');
|
||||
case 'display_symbol':
|
||||
return escapeHtml(row.display_symbol ?? row.symbol ?? '');
|
||||
case 'currency':
|
||||
return escapeHtml(row.currency ?? '');
|
||||
case 'underlying_symbol':
|
||||
return escapeHtml(row.underlying_symbol ?? '');
|
||||
case 'qty':
|
||||
return formatNumber(row.qty, 2);
|
||||
case 'avg_price':
|
||||
return formatNumber(row.avg_price ?? row.averageCost ?? row.average_cost, 2);
|
||||
case 'cost_basis':
|
||||
return formatNumber(row.cost_basis, 2);
|
||||
case 'market_price':
|
||||
return formatNumber(row.market_price, 2);
|
||||
case 'market_value':
|
||||
return formatNumber(row.market_value, 2);
|
||||
case 'gain_dollars':
|
||||
return formatNumber(row.gain_dollars, 2);
|
||||
case 'gain_percent':
|
||||
return formatPercent(row.gain_percent);
|
||||
case 'cagr_percent':
|
||||
return formatPercent(row.cagr_percent);
|
||||
case 'days_since_buy':
|
||||
return formatNumber(row.days_since_buy, 0);
|
||||
case 'ltcg':
|
||||
return row.ltcg === 'X'
|
||||
? '<span class="ltcg-icon good" title="Long-term capital gains eligible">✓</span>'
|
||||
: '<span class="ltcg-icon bad" title="Less than one year old">✗</span>';
|
||||
case 'buy_time':
|
||||
return escapeHtml(row.buy_time ?? '');
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
function renderPositions(list) {
|
||||
const focusState = captureFocusState();
|
||||
renderHeader();
|
||||
ptbody.innerHTML = '';
|
||||
const activeColumns = getActiveColumns();
|
||||
for (const rowData of sortPositions(filterPositions(aggregateLots(list)))) {
|
||||
const row = document.createElement('tr');
|
||||
for (const column of activeColumns) {
|
||||
const cell = document.createElement('td');
|
||||
if (column.numeric) cell.className = 'num';
|
||||
if (column.key === 'ltcg') cell.className = 'icon-cell';
|
||||
cell.innerHTML = renderCell(column.key, rowData);
|
||||
row.appendChild(cell);
|
||||
}
|
||||
ptbody.appendChild(row);
|
||||
}
|
||||
restoreFocusState(focusState);
|
||||
}
|
||||
|
||||
function cycleSort(column, multi) {
|
||||
const existingIndex = sortState.findIndex((rule) => rule.column === column);
|
||||
if (!multi) {
|
||||
if (existingIndex === -1) {
|
||||
sortState = [{ column, direction: 'asc' }];
|
||||
} else {
|
||||
const current = sortState[existingIndex];
|
||||
if (current.direction === 'asc') {
|
||||
sortState = [{ column, direction: 'desc' }];
|
||||
} else {
|
||||
sortState = [];
|
||||
}
|
||||
}
|
||||
renderPositions(latestPositions);
|
||||
saveTableState();
|
||||
return;
|
||||
}
|
||||
|
||||
if (existingIndex === -1) {
|
||||
sortState.push({ column, direction: 'asc' });
|
||||
} else {
|
||||
const current = sortState[existingIndex];
|
||||
if (current.direction === 'asc') {
|
||||
sortState[existingIndex] = { column, direction: 'desc' };
|
||||
} else {
|
||||
sortState.splice(existingIndex, 1);
|
||||
}
|
||||
}
|
||||
renderPositions(latestPositions);
|
||||
saveTableState();
|
||||
}
|
||||
|
||||
function onFilterInput(event) {
|
||||
const input = event.currentTarget;
|
||||
const value = input.value.trim();
|
||||
if (value) {
|
||||
filterState[input.dataset.column] = value;
|
||||
} else {
|
||||
delete filterState[input.dataset.column];
|
||||
}
|
||||
saveTableState();
|
||||
renderPositions(latestPositions);
|
||||
}
|
||||
|
||||
function onHeaderDragStart(event) {
|
||||
dragColumnKey = event.currentTarget.dataset.column;
|
||||
event.dataTransfer.effectAllowed = 'move';
|
||||
event.dataTransfer.setData('text/plain', dragColumnKey);
|
||||
event.currentTarget.classList.add('dragging');
|
||||
}
|
||||
|
||||
function onHeaderDragOver(event) {
|
||||
event.preventDefault();
|
||||
event.dataTransfer.dropEffect = 'move';
|
||||
}
|
||||
|
||||
function onHeaderDrop(event) {
|
||||
event.preventDefault();
|
||||
const targetKey = event.currentTarget.dataset.column;
|
||||
const sourceKey = dragColumnKey || event.dataTransfer.getData('text/plain');
|
||||
if (!sourceKey || sourceKey === targetKey) return;
|
||||
|
||||
const currentOrder = getActiveColumns().map((column) => column.key);
|
||||
const sourceIndex = currentOrder.indexOf(sourceKey);
|
||||
const targetIndex = currentOrder.indexOf(targetKey);
|
||||
if (sourceIndex === -1 || targetIndex === -1) return;
|
||||
|
||||
currentOrder.splice(targetIndex, 0, currentOrder.splice(sourceIndex, 1)[0]);
|
||||
columnOrder = currentOrder;
|
||||
saveTableState();
|
||||
renderPositions(latestPositions);
|
||||
}
|
||||
|
||||
function onHeaderDragEnd(event) {
|
||||
dragColumnKey = null;
|
||||
event.currentTarget.classList.remove('dragging');
|
||||
}
|
||||
|
||||
async function pollPositions() {
|
||||
if (isRefreshing) return;
|
||||
isRefreshing = true;
|
||||
if (refreshButton) refreshButton.disabled = true;
|
||||
try {
|
||||
const positions = await fetchJson('/api/lots');
|
||||
latestPositions = Array.isArray(positions) ? positions : [];
|
||||
renderPositions(latestPositions);
|
||||
} catch (e) {
|
||||
console.warn('Positions polling error', e);
|
||||
} finally {
|
||||
isRefreshing = false;
|
||||
if (refreshButton) refreshButton.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
loadTableState();
|
||||
if (!columnOrder.length) {
|
||||
columnOrder = [...defaultColumnOrder];
|
||||
}
|
||||
if (aggregateCheckbox) {
|
||||
aggregateCheckbox.checked = aggregateSameDay;
|
||||
aggregateCheckbox.addEventListener('change', () => {
|
||||
aggregateSameDay = aggregateCheckbox.checked;
|
||||
saveTableState();
|
||||
renderPositions(latestPositions);
|
||||
});
|
||||
}
|
||||
if (refreshButton) {
|
||||
refreshButton.addEventListener('click', () => {
|
||||
pollPositions();
|
||||
});
|
||||
}
|
||||
|
||||
pollPositions();
|
||||
208
frontend/index.html
Normal file
208
frontend/index.html
Normal file
@@ -0,0 +1,208 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<title>IB Dashboard</title>
|
||||
<style>
|
||||
:root { --sort-row-height: 43px; --filter-row-height: 38px; }
|
||||
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial; margin: 20px; }
|
||||
input, button { padding: 6px 8px; margin-right: 6px }
|
||||
.table-wrap {
|
||||
position: relative;
|
||||
max-height: calc(100vh - 140px);
|
||||
overflow: auto;
|
||||
border: 1px solid #ddd;
|
||||
margin-top: 12px;
|
||||
background: #fff;
|
||||
}
|
||||
table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
width: max-content;
|
||||
margin-top: 0;
|
||||
background: #fff;
|
||||
table-layout: auto;
|
||||
}
|
||||
th, td {
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
border-right: 1px solid #ddd;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
th:first-child, td:first-child { border-left: 1px solid #ddd }
|
||||
.section-head { display: flex; align-items: center; gap: 10px }
|
||||
.help-wrap { position: relative; display: inline-flex; align-items: center }
|
||||
.aggregate-toggle { display: inline-flex; align-items: center; gap: 8px; font-weight: 600 }
|
||||
.aggregate-toggle input { margin: 0 }
|
||||
.refresh-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #bfc7d1;
|
||||
border-radius: 8px;
|
||||
background: #f7f9fb;
|
||||
color: #19324d;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
margin-right: 0;
|
||||
}
|
||||
.refresh-button:hover { background: #eef3f8 }
|
||||
.refresh-button:disabled {
|
||||
cursor: wait;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.refresh-icon {
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
}
|
||||
.help-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 999px;
|
||||
background: #1f9d3a;
|
||||
color: #fff;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
cursor: help;
|
||||
}
|
||||
.help-pane {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: calc(100% + 12px);
|
||||
right: auto;
|
||||
transform: translateY(-50%);
|
||||
width: 340px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid #cfd8cf;
|
||||
background: #fbfffb;
|
||||
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
|
||||
z-index: 5;
|
||||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.help-wrap:hover .help-pane { display: block }
|
||||
.help-pane p { margin: 0 0 8px 0 }
|
||||
.help-pane p:last-child { margin-bottom: 0 }
|
||||
th {
|
||||
background: #f4f4f4;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 4;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
th.dragging { opacity: 0.55 }
|
||||
thead tr.sort-row th {
|
||||
top: 0;
|
||||
height: var(--sort-row-height);
|
||||
min-height: var(--sort-row-height);
|
||||
box-sizing: border-box;
|
||||
box-shadow: inset 0 -1px 0 #d9d9d9;
|
||||
}
|
||||
th:hover { background: #e9e9e9 }
|
||||
th .sort-meta { color: #666; font-size: 12px; margin-left: 6px }
|
||||
thead { position: relative; z-index: 2 }
|
||||
thead tr.filter-row th {
|
||||
top: var(--sort-row-height);
|
||||
background: #fafafa;
|
||||
cursor: default;
|
||||
z-index: 3;
|
||||
padding: 6px;
|
||||
height: var(--filter-row-height);
|
||||
min-height: var(--filter-row-height);
|
||||
box-sizing: border-box;
|
||||
box-shadow: inset 0 -1px 0 #d9d9d9;
|
||||
}
|
||||
thead tr.filter-row th:hover { background: #fafafa }
|
||||
.filter-input {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
padding: 5px 6px;
|
||||
box-sizing: border-box;
|
||||
font-size: 12px;
|
||||
border: 1px solid #cfd3d7;
|
||||
background: #fff;
|
||||
}
|
||||
.filter-input.filter-text { width: 9ch }
|
||||
.filter-input.filter-select { width: auto; min-width: 5.5ch; max-width: 100% }
|
||||
.filter-input.filter-active {
|
||||
background: #f9e1e8;
|
||||
border-color: #e5b8c7;
|
||||
}
|
||||
tbody tr:nth-child(odd) { background: #ffffff }
|
||||
tbody tr:nth-child(even) { background: #f3f3f3 }
|
||||
td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap }
|
||||
td.icon-cell { text-align: center }
|
||||
.ltcg-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
.ltcg-icon.good {
|
||||
background: #e5f7e9;
|
||||
color: #188038;
|
||||
border: 1px solid #b7e0c1;
|
||||
}
|
||||
.ltcg-icon.bad {
|
||||
background: #fdeaea;
|
||||
color: #c5221f;
|
||||
border: 1px solid #efb7b7;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Interactive Brokers Dashboard</h1>
|
||||
|
||||
<section>
|
||||
<div class="section-head">
|
||||
<h2>Open Lots</h2>
|
||||
<div class="help-wrap">
|
||||
<span class="help-badge">?</span>
|
||||
<div class="help-pane">
|
||||
<p><strong>Sorting:</strong> click a column header to sort ascending, click again for descending, click a third time to remove it. Hold <code>Shift</code> while clicking to add second and third sort levels.</p>
|
||||
<p><strong>Text filters:</strong> use wildcards with <code>*</code> and <code>?</code>. Example: <code>AM*</code> or <code>*2027*</code>.</p>
|
||||
<p><strong>Numeric filters:</strong> use values like <code>>100</code>, <code><=0</code>, <code>50</code>.</p>
|
||||
<p><strong>Date filters:</strong> use either wildcards like <code>2025-07*</code> or comparisons like <code>>2025-01-01</code>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<label class="aggregate-toggle">
|
||||
<input id="aggregate-same-day" type="checkbox" checked />
|
||||
<span>Aggregate same-day lots</span>
|
||||
</label>
|
||||
<button id="refresh-lots" class="refresh-button" type="button" title="Refresh lots">
|
||||
<span class="refresh-icon">↻</span>
|
||||
<span>Refresh</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table id="positions-table">
|
||||
<thead>
|
||||
<tr class="sort-row">
|
||||
</tr>
|
||||
<tr class="filter-row">
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script src="/static/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user