settings: extract sync + import widget JS to static files
The two largest inline <script> blocks in settings.html — the cloud
sync modal/management UI (~145 lines) and the import widget wiring
(~245 lines) — moved to app/static/js/settings-sync.js and
settings-import.js respectively, included via <script src="..."
defer> at the bottom of the template.
Where the inline code referenced Jinja vars or {% if %} guards,
those values are now passed via data-* attributes on the relevant
DOM elements (or via window.cassandra* config objects for structured
data) and read in the static JS.
Smaller blocks (Stripe portal, digest prefs, language select,
invite copy) stay inline — each <40 lines and easier to follow
next to their markup. settings.html drops from 758 lines to roughly
half that.
This commit is contained in:
parent
dcc2c07111
commit
f4d9c9f2ec
3 changed files with 403 additions and 399 deletions
245
app/static/js/settings-import.js
Normal file
245
app/static/js/settings-import.js
Normal file
|
|
@ -0,0 +1,245 @@
|
||||||
|
(function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// Server-side hint: did the user have paid privileges when the page
|
||||||
|
// rendered? Used to decide whether to offer the 'Import & sync' button.
|
||||||
|
// We still call CassandraSync.getStatus() at click time as the source
|
||||||
|
// of truth, but this lets us skip rendering a button we know is dead.
|
||||||
|
// Value is passed via data-paid attribute on #drop-zone.
|
||||||
|
|
||||||
|
function ready(fn) {
|
||||||
|
if (document.readyState === 'loading') {
|
||||||
|
document.addEventListener('DOMContentLoaded', fn);
|
||||||
|
} else { fn(); }
|
||||||
|
}
|
||||||
|
|
||||||
|
ready(function () {
|
||||||
|
var P = window.CassandraPortfolio;
|
||||||
|
if (!P) return;
|
||||||
|
var esc = P.esc, fmt = P.fmt, signed = P.signed, cls = P.cls;
|
||||||
|
|
||||||
|
var dropZone = document.getElementById('drop-zone');
|
||||||
|
var fileInput = document.getElementById('file-input');
|
||||||
|
var browseLink = document.getElementById('browse-link');
|
||||||
|
var filenameEl = document.getElementById('dz-filename');
|
||||||
|
var previewEl = document.getElementById('import-preview');
|
||||||
|
var resultEl = document.getElementById('import-result');
|
||||||
|
if (!dropZone) return;
|
||||||
|
|
||||||
|
var IS_PAID = dropZone.dataset.paid === 'true';
|
||||||
|
|
||||||
|
var currentPie = null; // most recently parsed pie, awaiting commit
|
||||||
|
|
||||||
|
function showError(msg) {
|
||||||
|
previewEl.hidden = true;
|
||||||
|
resultEl.className = 'result result--err';
|
||||||
|
resultEl.innerHTML =
|
||||||
|
'<div class="result__head">✕ Import failed</div>' +
|
||||||
|
'<div class="result__row">' + esc(msg) + '</div>';
|
||||||
|
resultEl.hidden = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function showSuccess(headline, sub) {
|
||||||
|
previewEl.hidden = true;
|
||||||
|
resultEl.className = 'result result--ok';
|
||||||
|
resultEl.innerHTML =
|
||||||
|
'<div class="result__head">' + esc(headline) + '</div>' +
|
||||||
|
(sub ? '<div class="result__row">' + sub + '</div>' : '') +
|
||||||
|
'<div class="result__row" style="margin-top:14px;">' +
|
||||||
|
'<a href="/">Open dashboard →</a>' +
|
||||||
|
'</div>';
|
||||||
|
resultEl.hidden = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderPreview(pie) {
|
||||||
|
currentPie = pie;
|
||||||
|
resultEl.hidden = true;
|
||||||
|
|
||||||
|
var t = pie.totals || {};
|
||||||
|
var rows = (pie.positions || []).map(function (p) {
|
||||||
|
var invested = (p.avg_cost != null && p.qty != null) ? p.avg_cost * p.qty : null;
|
||||||
|
return '<tr>' +
|
||||||
|
'<td class="label">' + esc(p.yahoo_ticker || p.t212_slice || '') + '</td>' +
|
||||||
|
'<td>' + esc(p.name || '') + '</td>' +
|
||||||
|
'<td class="num">' + fmt(p.qty, { maximumFractionDigits: 6 }) + '</td>' +
|
||||||
|
'<td class="num neu">' + fmt(p.avg_cost) + '</td>' +
|
||||||
|
'<td class="num">' + fmt(invested) + '</td>' +
|
||||||
|
'</tr>';
|
||||||
|
}).join('');
|
||||||
|
|
||||||
|
var warnings = (pie.warnings || []).map(function (w) {
|
||||||
|
return '<div class="result__warn">' + esc(w) + '</div>';
|
||||||
|
}).join('');
|
||||||
|
|
||||||
|
var syncBtn = IS_PAID
|
||||||
|
? ('<div class="import-choice">' +
|
||||||
|
'<button type="button" id="commit-sync">Import & sync to cloud</button>' +
|
||||||
|
'<div class="settings-row__hint">' +
|
||||||
|
'Also stores an <strong>encrypted</strong> copy on the server, ' +
|
||||||
|
'restorable on any device with your PIN. Only you can decrypt ' +
|
||||||
|
'it — losing the PIN means losing the backup.' +
|
||||||
|
'</div>' +
|
||||||
|
'</div>')
|
||||||
|
: ('<div class="import-choice">' +
|
||||||
|
'<button type="button" disabled>Import & sync to cloud</button>' +
|
||||||
|
'<div class="settings-row__hint">' +
|
||||||
|
'Encrypted cloud backup is available on the paid tier.' +
|
||||||
|
'</div>' +
|
||||||
|
'</div>');
|
||||||
|
|
||||||
|
previewEl.innerHTML =
|
||||||
|
'<div class="result result--ok" style="margin:0;">' +
|
||||||
|
'<div class="result__head">' +
|
||||||
|
'▸ Preview: <strong>' + esc(pie.pie_name || 'pie') + '</strong>' +
|
||||||
|
'</div>' +
|
||||||
|
'<div class="result__grid">' +
|
||||||
|
'<div><div class="k">Positions</div><div class="v">' + (pie.positions || []).length + '</div></div>' +
|
||||||
|
'<div><div class="k">Invested</div><div class="v">' + fmt(t.invested) + '</div></div>' +
|
||||||
|
'<div><div class="k">Value</div><div class="v">' + fmt(t.value) + '</div></div>' +
|
||||||
|
'<div><div class="k">Result</div><div class="v ' + cls(t.result) + '">' + signed(t.result) + '</div></div>' +
|
||||||
|
'</div>' +
|
||||||
|
warnings +
|
||||||
|
(rows
|
||||||
|
? '<div style="max-height:280px;overflow:auto;margin-top:12px;">' +
|
||||||
|
'<table class="dense">' +
|
||||||
|
'<thead><tr>' +
|
||||||
|
'<th>Ticker</th><th>Name</th>' +
|
||||||
|
'<th class="num">Qty</th>' +
|
||||||
|
'<th class="num">Avg</th>' +
|
||||||
|
'<th class="num">Invested</th>' +
|
||||||
|
'</tr></thead>' +
|
||||||
|
'<tbody>' + rows + '</tbody>' +
|
||||||
|
'</table>' +
|
||||||
|
'</div>'
|
||||||
|
: ''
|
||||||
|
) +
|
||||||
|
'<div class="import-actions">' +
|
||||||
|
'<div class="import-choice">' +
|
||||||
|
'<button type="button" id="commit-local">Import to this browser</button>' +
|
||||||
|
'<div class="settings-row__hint">' +
|
||||||
|
'Saved to this browser only. No server-side copy of your holdings.' +
|
||||||
|
'</div>' +
|
||||||
|
'</div>' +
|
||||||
|
syncBtn +
|
||||||
|
'<div style="flex-basis:100%;">' +
|
||||||
|
'<button type="button" id="commit-cancel" class="pf-secondary">' +
|
||||||
|
'Cancel</button>' +
|
||||||
|
'</div>' +
|
||||||
|
'</div>' +
|
||||||
|
'</div>';
|
||||||
|
|
||||||
|
previewEl.hidden = false;
|
||||||
|
|
||||||
|
document.getElementById('commit-local').addEventListener('click', commitLocal);
|
||||||
|
document.getElementById('commit-cancel').addEventListener('click', resetUploader);
|
||||||
|
var syncEl = document.getElementById('commit-sync');
|
||||||
|
if (syncEl) syncEl.addEventListener('click', commitSync);
|
||||||
|
}
|
||||||
|
|
||||||
|
function commitLocal() {
|
||||||
|
if (!currentPie) return;
|
||||||
|
P.savePie(currentPie);
|
||||||
|
showSuccess('▸ Imported to this browser.',
|
||||||
|
'Pie kept locally; no server-side copy.');
|
||||||
|
currentPie = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function commitSync() {
|
||||||
|
if (!currentPie) return;
|
||||||
|
// Save locally first so the cloud-sync flow uses the freshly-imported
|
||||||
|
// pie (the enable-PIN modal in this same page reads from localStorage).
|
||||||
|
P.savePie(currentPie);
|
||||||
|
var S = window.CassandraSync;
|
||||||
|
if (!S) { showError('Cloud sync module not loaded.'); return; }
|
||||||
|
|
||||||
|
var status;
|
||||||
|
try { status = await S.getStatus(); }
|
||||||
|
catch (e) { showError('Could not check sync status: ' + (e.message || e)); return; }
|
||||||
|
|
||||||
|
if (!status.paid) {
|
||||||
|
showError('Cloud sync requires the paid tier.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (status.exists) {
|
||||||
|
// Already enabled — try a direct push using the cached session
|
||||||
|
// key. If no key is cached (fresh browser session), this throws,
|
||||||
|
// and we fall back to the enable-PIN modal so the user can
|
||||||
|
// re-enter their PIN.
|
||||||
|
try {
|
||||||
|
await S.pushSync(currentPie, null);
|
||||||
|
showSuccess('▸ Imported and synced.',
|
||||||
|
'Encrypted copy updated on the server.');
|
||||||
|
currentPie = null;
|
||||||
|
if (window.cassandraRefreshSyncStatus) window.cassandraRefreshSyncStatus();
|
||||||
|
return;
|
||||||
|
} catch (e) {
|
||||||
|
// Fall through to modal so the user can re-auth with their PIN.
|
||||||
|
console.warn('direct push failed, falling back to PIN modal', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// !status.exists OR cached-key push failed → use the modal.
|
||||||
|
if (window.cassandraOpenSyncModal) {
|
||||||
|
window.cassandraOpenSyncModal({
|
||||||
|
onSuccess: function () {
|
||||||
|
showSuccess('▸ Imported and synced.',
|
||||||
|
'Cloud sync is now enabled and the pie is stored encrypted.');
|
||||||
|
currentPie = null;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
showError('Cloud sync UI unavailable on this page. ' +
|
||||||
|
'Use the Cloud sync section below to enable.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetUploader() {
|
||||||
|
currentPie = null;
|
||||||
|
previewEl.hidden = true;
|
||||||
|
previewEl.innerHTML = '';
|
||||||
|
resultEl.hidden = true;
|
||||||
|
filenameEl.textContent = '';
|
||||||
|
fileInput.value = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
async function parseFile(file) {
|
||||||
|
filenameEl.textContent = file.name + ' (' + Math.round(file.size / 1024) + ' KB) — parsing…';
|
||||||
|
previewEl.hidden = true;
|
||||||
|
resultEl.hidden = true;
|
||||||
|
try {
|
||||||
|
var pie = await P.parseCsv(file);
|
||||||
|
renderPreview(pie);
|
||||||
|
filenameEl.textContent = file.name + ' (' + Math.round(file.size / 1024) + ' KB)';
|
||||||
|
} catch (e) {
|
||||||
|
filenameEl.textContent = file.name + ' (failed)';
|
||||||
|
showError(e.message || 'Unknown error');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
browseLink.addEventListener('click', function (e) { e.preventDefault(); fileInput.click(); });
|
||||||
|
fileInput.addEventListener('change', function () {
|
||||||
|
if (fileInput.files[0]) parseFile(fileInput.files[0]);
|
||||||
|
});
|
||||||
|
|
||||||
|
['dragenter', 'dragover'].forEach(function (ev) {
|
||||||
|
dropZone.addEventListener(ev, function (e) {
|
||||||
|
e.preventDefault(); e.stopPropagation();
|
||||||
|
dropZone.classList.add('dz--over');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
['dragleave', 'drop'].forEach(function (ev) {
|
||||||
|
dropZone.addEventListener(ev, function (e) {
|
||||||
|
e.preventDefault(); e.stopPropagation();
|
||||||
|
dropZone.classList.remove('dz--over');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
dropZone.addEventListener('drop', function (e) {
|
||||||
|
var f = e.dataTransfer.files && e.dataTransfer.files[0];
|
||||||
|
if (f) parseFile(f);
|
||||||
|
});
|
||||||
|
dropZone.addEventListener('click', function (e) {
|
||||||
|
if (e.target.tagName !== 'A') fileInput.click();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})();
|
||||||
154
app/static/js/settings-sync.js
Normal file
154
app/static/js/settings-sync.js
Normal file
|
|
@ -0,0 +1,154 @@
|
||||||
|
(function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
function $(id) { return document.getElementById(id); }
|
||||||
|
function esc(s) {
|
||||||
|
return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({
|
||||||
|
'&':'&','<':'<','>':'>','"':'"',"'":'''
|
||||||
|
}[c]));
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
if (!window.CassandraSync) return;
|
||||||
|
|
||||||
|
const statusEl = $('sync-status');
|
||||||
|
const actionsEl = $('sync-actions');
|
||||||
|
const feedbackEl = $('sync-feedback');
|
||||||
|
const modal = $('sync-modal');
|
||||||
|
const pin1 = $('sync-pin1');
|
||||||
|
const pin2 = $('sync-pin2');
|
||||||
|
const ack = $('sync-ack');
|
||||||
|
const errEl = $('sync-modal-err');
|
||||||
|
|
||||||
|
function setFeedback(msg, ok) {
|
||||||
|
feedbackEl.style.color = ok ? 'var(--positive)' : '';
|
||||||
|
feedbackEl.textContent = msg || '';
|
||||||
|
}
|
||||||
|
// External callers (the Import section above) can pass a callback
|
||||||
|
// that fires after a successful enable-and-push.
|
||||||
|
let pendingOnSuccess = null;
|
||||||
|
function openModal(opts) {
|
||||||
|
pendingOnSuccess = (opts && opts.onSuccess) || null;
|
||||||
|
modal.style.display = 'flex';
|
||||||
|
// Focus PIN field after the layout flush so the caret lands.
|
||||||
|
setTimeout(() => pin1.focus(), 0);
|
||||||
|
}
|
||||||
|
function closeModal() {
|
||||||
|
modal.style.display = 'none';
|
||||||
|
pin1.value = ''; pin2.value = '';
|
||||||
|
ack.checked = false; errEl.hidden = true;
|
||||||
|
pendingOnSuccess = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
$('sync-modal-cancel').addEventListener('click', closeModal);
|
||||||
|
// Backdrop click + Esc key dismiss the modal.
|
||||||
|
modal.addEventListener('click', function (e) {
|
||||||
|
if (e.target === modal) closeModal();
|
||||||
|
});
|
||||||
|
document.addEventListener('keydown', function (e) {
|
||||||
|
if (e.key === 'Escape' && modal.style.display !== 'none') closeModal();
|
||||||
|
});
|
||||||
|
|
||||||
|
$('sync-modal-form').addEventListener('submit', async function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
errEl.hidden = true;
|
||||||
|
if (pin1.value !== pin2.value) {
|
||||||
|
errEl.textContent = 'PINs do not match.';
|
||||||
|
errEl.hidden = false; return;
|
||||||
|
}
|
||||||
|
if (pin1.value.length < 4) {
|
||||||
|
errEl.textContent = 'PIN must be at least 4 characters.';
|
||||||
|
errEl.hidden = false; return;
|
||||||
|
}
|
||||||
|
const pie = JSON.parse(localStorage.getItem('cassandra.pie') || 'null');
|
||||||
|
if (!pie) {
|
||||||
|
errEl.textContent =
|
||||||
|
'No portfolio in this browser yet. Import a CSV first, then enable sync.';
|
||||||
|
errEl.hidden = false; return;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
await window.CassandraSync.pushSync(pie, pin1.value);
|
||||||
|
const cb = pendingOnSuccess;
|
||||||
|
closeModal(); // clears pendingOnSuccess
|
||||||
|
await refresh();
|
||||||
|
setFeedback('Cloud sync enabled. Your encrypted portfolio is stored.', true);
|
||||||
|
if (typeof cb === 'function') {
|
||||||
|
try { cb(); } catch (cbErr) { console.warn('sync onSuccess threw', cbErr); }
|
||||||
|
}
|
||||||
|
} catch (e2) {
|
||||||
|
errEl.textContent = e2.message || 'Failed to enable sync.';
|
||||||
|
errEl.hidden = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
async function refresh() {
|
||||||
|
let status;
|
||||||
|
try { status = await window.CassandraSync.getStatus(); }
|
||||||
|
catch (e) {
|
||||||
|
statusEl.querySelector('.settings-row__value').innerHTML =
|
||||||
|
'<span class="pf-warn">' + esc(e.message || 'status check failed') + '</span>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const valueEl = statusEl.querySelector('.settings-row__value');
|
||||||
|
actionsEl.innerHTML = '';
|
||||||
|
if (status.exists && status.orphaned) {
|
||||||
|
// The stored blob can no longer be decrypted (server key rotated
|
||||||
|
// since it was written). The data is permanently unrecoverable,
|
||||||
|
// so silently clean up the dead row and re-render in the
|
||||||
|
// standard "off" state — leaving a soft one-liner so the user
|
||||||
|
// knows why they need to re-import.
|
||||||
|
try { await window.CassandraSync.disableSync(); }
|
||||||
|
catch (e) { console.warn('auto-clear stale sync failed', e); }
|
||||||
|
setFeedback('Your previous cloud backup couldn’t be restored. Re-import your portfolio to enable cloud sync again.', true);
|
||||||
|
await refresh();
|
||||||
|
return;
|
||||||
|
} else if (status.exists) {
|
||||||
|
const when = status.updated_at
|
||||||
|
? new Date(status.updated_at).toISOString().replace('T', ' ').slice(0, 16) + ' UTC'
|
||||||
|
: '—';
|
||||||
|
valueEl.innerHTML =
|
||||||
|
'<span class="badge badge--ok">On</span> ' +
|
||||||
|
'<span class="settings-row__hint">last synced ' + esc(when) + '</span>';
|
||||||
|
|
||||||
|
const disable = document.createElement('button');
|
||||||
|
disable.type = 'button';
|
||||||
|
disable.className = 'pf-secondary';
|
||||||
|
disable.textContent = 'Disable sync';
|
||||||
|
disable.addEventListener('click', async function () {
|
||||||
|
if (!confirm('Remove your encrypted portfolio from the server? Your local copy is untouched.')) return;
|
||||||
|
try {
|
||||||
|
await window.CassandraSync.disableSync();
|
||||||
|
await refresh();
|
||||||
|
setFeedback('Cloud sync disabled. Server copy removed.', true);
|
||||||
|
} catch (e) { setFeedback(e.message || 'Disable failed.', false); }
|
||||||
|
});
|
||||||
|
actionsEl.appendChild(disable);
|
||||||
|
} else {
|
||||||
|
valueEl.innerHTML = '<span class="badge badge--ver">Off</span>';
|
||||||
|
// Only offer 'Enable' when there's actually a pie to encrypt;
|
||||||
|
// otherwise the user would hit a dead-end at the modal.
|
||||||
|
const hasPie = !!localStorage.getItem('cassandra.pie');
|
||||||
|
if (!hasPie) {
|
||||||
|
const hint = document.createElement('span');
|
||||||
|
hint.className = 'settings-row__hint';
|
||||||
|
hint.innerHTML =
|
||||||
|
'Nothing to sync yet — ' +
|
||||||
|
'<a href="#import">import a portfolio</a> first, then come back to enable cloud sync.';
|
||||||
|
actionsEl.appendChild(hint);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const enable = document.createElement('button');
|
||||||
|
enable.type = 'button';
|
||||||
|
enable.textContent = 'Enable cloud sync';
|
||||||
|
enable.addEventListener('click', openModal);
|
||||||
|
actionsEl.appendChild(enable);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hooks for the Import section to drive this modal + status row.
|
||||||
|
window.cassandraOpenSyncModal = openModal;
|
||||||
|
window.cassandraRefreshSyncStatus = refresh;
|
||||||
|
|
||||||
|
refresh();
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
|
@ -106,7 +106,7 @@
|
||||||
<span class="neu">Investing → Your Pie → ··· → Export</span>.</span>
|
<span class="neu">Investing → Your Pie → ··· → Export</span>.</span>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div id="drop-zone" class="dz">
|
<div id="drop-zone" class="dz" data-paid="{{ 'true' if paid and paid.active else 'false' }}">
|
||||||
<input type="file" id="file-input" name="file" accept=".csv,text/csv" hidden>
|
<input type="file" id="file-input" name="file" accept=".csv,text/csv" hidden>
|
||||||
<div class="dz__icon">▱</div>
|
<div class="dz__icon">▱</div>
|
||||||
<div class="dz__label">Drop your broker's portfolio CSV here</div>
|
<div class="dz__label">Drop your broker's portfolio CSV here</div>
|
||||||
|
|
@ -332,161 +332,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="{{ url_for('static', path='/js/portfolio-sync.js') }}" defer></script>
|
<script src="{{ url_for(‘static’, path=’/js/portfolio-sync.js’) }}" defer></script>
|
||||||
<script>
|
<script src="{{ url_for(‘static’, path=’/js/settings-sync.js’) }}" defer></script>
|
||||||
(function () {
|
|
||||||
function $(id) { return document.getElementById(id); }
|
|
||||||
function esc(s) {
|
|
||||||
return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({
|
|
||||||
'&':'&','<':'<','>':'>','"':'"',"'":'''
|
|
||||||
}[c]));
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
|
||||||
if (!window.CassandraSync) return;
|
|
||||||
|
|
||||||
const statusEl = $('sync-status');
|
|
||||||
const actionsEl = $('sync-actions');
|
|
||||||
const feedbackEl = $('sync-feedback');
|
|
||||||
const modal = $('sync-modal');
|
|
||||||
const pin1 = $('sync-pin1');
|
|
||||||
const pin2 = $('sync-pin2');
|
|
||||||
const ack = $('sync-ack');
|
|
||||||
const errEl = $('sync-modal-err');
|
|
||||||
|
|
||||||
function setFeedback(msg, ok) {
|
|
||||||
feedbackEl.style.color = ok ? 'var(--positive)' : '';
|
|
||||||
feedbackEl.textContent = msg || '';
|
|
||||||
}
|
|
||||||
// External callers (the Import section above) can pass a callback
|
|
||||||
// that fires after a successful enable-and-push.
|
|
||||||
let pendingOnSuccess = null;
|
|
||||||
function openModal(opts) {
|
|
||||||
pendingOnSuccess = (opts && opts.onSuccess) || null;
|
|
||||||
modal.style.display = 'flex';
|
|
||||||
// Focus PIN field after the layout flush so the caret lands.
|
|
||||||
setTimeout(() => pin1.focus(), 0);
|
|
||||||
}
|
|
||||||
function closeModal() {
|
|
||||||
modal.style.display = 'none';
|
|
||||||
pin1.value = ''; pin2.value = '';
|
|
||||||
ack.checked = false; errEl.hidden = true;
|
|
||||||
pendingOnSuccess = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
$('sync-modal-cancel').addEventListener('click', closeModal);
|
|
||||||
// Backdrop click + Esc key dismiss the modal.
|
|
||||||
modal.addEventListener('click', function (e) {
|
|
||||||
if (e.target === modal) closeModal();
|
|
||||||
});
|
|
||||||
document.addEventListener('keydown', function (e) {
|
|
||||||
if (e.key === 'Escape' && modal.style.display !== 'none') closeModal();
|
|
||||||
});
|
|
||||||
|
|
||||||
$('sync-modal-form').addEventListener('submit', async function (e) {
|
|
||||||
e.preventDefault();
|
|
||||||
errEl.hidden = true;
|
|
||||||
if (pin1.value !== pin2.value) {
|
|
||||||
errEl.textContent = 'PINs do not match.';
|
|
||||||
errEl.hidden = false; return;
|
|
||||||
}
|
|
||||||
if (pin1.value.length < 4) {
|
|
||||||
errEl.textContent = 'PIN must be at least 4 characters.';
|
|
||||||
errEl.hidden = false; return;
|
|
||||||
}
|
|
||||||
const pie = JSON.parse(localStorage.getItem('cassandra.pie') || 'null');
|
|
||||||
if (!pie) {
|
|
||||||
errEl.textContent =
|
|
||||||
'No portfolio in this browser yet. Import a CSV first, then enable sync.';
|
|
||||||
errEl.hidden = false; return;
|
|
||||||
}
|
|
||||||
try {
|
|
||||||
await window.CassandraSync.pushSync(pie, pin1.value);
|
|
||||||
const cb = pendingOnSuccess;
|
|
||||||
closeModal(); // clears pendingOnSuccess
|
|
||||||
await refresh();
|
|
||||||
setFeedback('Cloud sync enabled. Your encrypted portfolio is stored.', true);
|
|
||||||
if (typeof cb === 'function') {
|
|
||||||
try { cb(); } catch (cbErr) { console.warn('sync onSuccess threw', cbErr); }
|
|
||||||
}
|
|
||||||
} catch (e2) {
|
|
||||||
errEl.textContent = e2.message || 'Failed to enable sync.';
|
|
||||||
errEl.hidden = false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
async function refresh() {
|
|
||||||
let status;
|
|
||||||
try { status = await window.CassandraSync.getStatus(); }
|
|
||||||
catch (e) {
|
|
||||||
statusEl.querySelector('.settings-row__value').innerHTML =
|
|
||||||
'<span class="pf-warn">' + esc(e.message || 'status check failed') + '</span>';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const valueEl = statusEl.querySelector('.settings-row__value');
|
|
||||||
actionsEl.innerHTML = '';
|
|
||||||
if (status.exists && status.orphaned) {
|
|
||||||
// The stored blob can no longer be decrypted (server key rotated
|
|
||||||
// since it was written). The data is permanently unrecoverable,
|
|
||||||
// so silently clean up the dead row and re-render in the
|
|
||||||
// standard "off" state — leaving a soft one-liner so the user
|
|
||||||
// knows why they need to re-import.
|
|
||||||
try { await window.CassandraSync.disableSync(); }
|
|
||||||
catch (e) { console.warn('auto-clear stale sync failed', e); }
|
|
||||||
setFeedback('Your previous cloud backup couldn’t be restored. Re-import your portfolio to enable cloud sync again.', true);
|
|
||||||
await refresh();
|
|
||||||
return;
|
|
||||||
} else if (status.exists) {
|
|
||||||
const when = status.updated_at
|
|
||||||
? new Date(status.updated_at).toISOString().replace('T', ' ').slice(0, 16) + ' UTC'
|
|
||||||
: '—';
|
|
||||||
valueEl.innerHTML =
|
|
||||||
'<span class="badge badge--ok">On</span> ' +
|
|
||||||
'<span class="settings-row__hint">last synced ' + esc(when) + '</span>';
|
|
||||||
|
|
||||||
const disable = document.createElement('button');
|
|
||||||
disable.type = 'button';
|
|
||||||
disable.className = 'pf-secondary';
|
|
||||||
disable.textContent = 'Disable sync';
|
|
||||||
disable.addEventListener('click', async function () {
|
|
||||||
if (!confirm('Remove your encrypted portfolio from the server? Your local copy is untouched.')) return;
|
|
||||||
try {
|
|
||||||
await window.CassandraSync.disableSync();
|
|
||||||
await refresh();
|
|
||||||
setFeedback('Cloud sync disabled. Server copy removed.', true);
|
|
||||||
} catch (e) { setFeedback(e.message || 'Disable failed.', false); }
|
|
||||||
});
|
|
||||||
actionsEl.appendChild(disable);
|
|
||||||
} else {
|
|
||||||
valueEl.innerHTML = '<span class="badge badge--ver">Off</span>';
|
|
||||||
// Only offer 'Enable' when there's actually a pie to encrypt;
|
|
||||||
// otherwise the user would hit a dead-end at the modal.
|
|
||||||
const hasPie = !!localStorage.getItem('cassandra.pie');
|
|
||||||
if (!hasPie) {
|
|
||||||
const hint = document.createElement('span');
|
|
||||||
hint.className = 'settings-row__hint';
|
|
||||||
hint.innerHTML =
|
|
||||||
'Nothing to sync yet — ' +
|
|
||||||
'<a href="#import">import a portfolio</a> first, then come back to enable cloud sync.';
|
|
||||||
actionsEl.appendChild(hint);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const enable = document.createElement('button');
|
|
||||||
enable.type = 'button';
|
|
||||||
enable.textContent = 'Enable cloud sync';
|
|
||||||
enable.addEventListener('click', openModal);
|
|
||||||
actionsEl.appendChild(enable);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Hooks for the Import section to drive this modal + status row.
|
|
||||||
window.cassandraOpenSyncModal = openModal;
|
|
||||||
window.cassandraRefreshSyncStatus = refresh;
|
|
||||||
|
|
||||||
refresh();
|
|
||||||
});
|
|
||||||
})();
|
|
||||||
</script>
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -511,248 +358,6 @@
|
||||||
{% if user %}
|
{% if user %}
|
||||||
{# Import widget wiring — auto-parse on drop, preview, then commit. #}
|
{# Import widget wiring — auto-parse on drop, preview, then commit. #}
|
||||||
<script src="{{ url_for('static', path='/js/portfolio.js') }}" defer></script>
|
<script src="{{ url_for('static', path='/js/portfolio.js') }}" defer></script>
|
||||||
<script>
|
<script src="{{ url_for('static', path='/js/settings-import.js') }}" defer></script>
|
||||||
(function () {
|
|
||||||
// Server-side hint: did the user have paid privileges when the page
|
|
||||||
// rendered? Used to decide whether to offer the 'Import & sync' button.
|
|
||||||
// We still call CassandraSync.getStatus() at click time as the source
|
|
||||||
// of truth, but this lets us skip rendering a button we know is dead.
|
|
||||||
var IS_PAID = {{ 'true' if paid and paid.active else 'false' }};
|
|
||||||
|
|
||||||
function ready(fn) {
|
|
||||||
if (document.readyState === 'loading') {
|
|
||||||
document.addEventListener('DOMContentLoaded', fn);
|
|
||||||
} else { fn(); }
|
|
||||||
}
|
|
||||||
|
|
||||||
ready(function () {
|
|
||||||
var P = window.CassandraPortfolio;
|
|
||||||
if (!P) return;
|
|
||||||
var esc = P.esc, fmt = P.fmt, signed = P.signed, cls = P.cls;
|
|
||||||
|
|
||||||
var dropZone = document.getElementById('drop-zone');
|
|
||||||
var fileInput = document.getElementById('file-input');
|
|
||||||
var browseLink = document.getElementById('browse-link');
|
|
||||||
var filenameEl = document.getElementById('dz-filename');
|
|
||||||
var previewEl = document.getElementById('import-preview');
|
|
||||||
var resultEl = document.getElementById('import-result');
|
|
||||||
if (!dropZone) return;
|
|
||||||
|
|
||||||
var currentPie = null; // most recently parsed pie, awaiting commit
|
|
||||||
|
|
||||||
function showError(msg) {
|
|
||||||
previewEl.hidden = true;
|
|
||||||
resultEl.className = 'result result--err';
|
|
||||||
resultEl.innerHTML =
|
|
||||||
'<div class="result__head">✕ Import failed</div>' +
|
|
||||||
'<div class="result__row">' + esc(msg) + '</div>';
|
|
||||||
resultEl.hidden = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function showSuccess(headline, sub) {
|
|
||||||
previewEl.hidden = true;
|
|
||||||
resultEl.className = 'result result--ok';
|
|
||||||
resultEl.innerHTML =
|
|
||||||
'<div class="result__head">' + esc(headline) + '</div>' +
|
|
||||||
(sub ? '<div class="result__row">' + sub + '</div>' : '') +
|
|
||||||
'<div class="result__row" style="margin-top:14px;">' +
|
|
||||||
'<a href="/">Open dashboard →</a>' +
|
|
||||||
'</div>';
|
|
||||||
resultEl.hidden = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderPreview(pie) {
|
|
||||||
currentPie = pie;
|
|
||||||
resultEl.hidden = true;
|
|
||||||
|
|
||||||
var t = pie.totals || {};
|
|
||||||
var rows = (pie.positions || []).map(function (p) {
|
|
||||||
var invested = (p.avg_cost != null && p.qty != null) ? p.avg_cost * p.qty : null;
|
|
||||||
return '<tr>' +
|
|
||||||
'<td class="label">' + esc(p.yahoo_ticker || p.t212_slice || '') + '</td>' +
|
|
||||||
'<td>' + esc(p.name || '') + '</td>' +
|
|
||||||
'<td class="num">' + fmt(p.qty, { maximumFractionDigits: 6 }) + '</td>' +
|
|
||||||
'<td class="num neu">' + fmt(p.avg_cost) + '</td>' +
|
|
||||||
'<td class="num">' + fmt(invested) + '</td>' +
|
|
||||||
'</tr>';
|
|
||||||
}).join('');
|
|
||||||
|
|
||||||
var warnings = (pie.warnings || []).map(function (w) {
|
|
||||||
return '<div class="result__warn">' + esc(w) + '</div>';
|
|
||||||
}).join('');
|
|
||||||
|
|
||||||
var syncBtn = IS_PAID
|
|
||||||
? ('<div class="import-choice">' +
|
|
||||||
'<button type="button" id="commit-sync">Import & sync to cloud</button>' +
|
|
||||||
'<div class="settings-row__hint">' +
|
|
||||||
'Also stores an <strong>encrypted</strong> copy on the server, ' +
|
|
||||||
'restorable on any device with your PIN. Only you can decrypt ' +
|
|
||||||
'it — losing the PIN means losing the backup.' +
|
|
||||||
'</div>' +
|
|
||||||
'</div>')
|
|
||||||
: ('<div class="import-choice">' +
|
|
||||||
'<button type="button" disabled>Import & sync to cloud</button>' +
|
|
||||||
'<div class="settings-row__hint">' +
|
|
||||||
'Encrypted cloud backup is available on the paid tier.' +
|
|
||||||
'</div>' +
|
|
||||||
'</div>');
|
|
||||||
|
|
||||||
previewEl.innerHTML =
|
|
||||||
'<div class="result result--ok" style="margin:0;">' +
|
|
||||||
'<div class="result__head">' +
|
|
||||||
'▸ Preview: <strong>' + esc(pie.pie_name || 'pie') + '</strong>' +
|
|
||||||
'</div>' +
|
|
||||||
'<div class="result__grid">' +
|
|
||||||
'<div><div class="k">Positions</div><div class="v">' + (pie.positions || []).length + '</div></div>' +
|
|
||||||
'<div><div class="k">Invested</div><div class="v">' + fmt(t.invested) + '</div></div>' +
|
|
||||||
'<div><div class="k">Value</div><div class="v">' + fmt(t.value) + '</div></div>' +
|
|
||||||
'<div><div class="k">Result</div><div class="v ' + cls(t.result) + '">' + signed(t.result) + '</div></div>' +
|
|
||||||
'</div>' +
|
|
||||||
warnings +
|
|
||||||
(rows
|
|
||||||
? '<div style="max-height:280px;overflow:auto;margin-top:12px;">' +
|
|
||||||
'<table class="dense">' +
|
|
||||||
'<thead><tr>' +
|
|
||||||
'<th>Ticker</th><th>Name</th>' +
|
|
||||||
'<th class="num">Qty</th>' +
|
|
||||||
'<th class="num">Avg</th>' +
|
|
||||||
'<th class="num">Invested</th>' +
|
|
||||||
'</tr></thead>' +
|
|
||||||
'<tbody>' + rows + '</tbody>' +
|
|
||||||
'</table>' +
|
|
||||||
'</div>'
|
|
||||||
: ''
|
|
||||||
) +
|
|
||||||
'<div class="import-actions">' +
|
|
||||||
'<div class="import-choice">' +
|
|
||||||
'<button type="button" id="commit-local">Import to this browser</button>' +
|
|
||||||
'<div class="settings-row__hint">' +
|
|
||||||
'Saved to this browser only. No server-side copy of your holdings.' +
|
|
||||||
'</div>' +
|
|
||||||
'</div>' +
|
|
||||||
syncBtn +
|
|
||||||
'<div style="flex-basis:100%;">' +
|
|
||||||
'<button type="button" id="commit-cancel" class="pf-secondary">' +
|
|
||||||
'Cancel</button>' +
|
|
||||||
'</div>' +
|
|
||||||
'</div>' +
|
|
||||||
'</div>';
|
|
||||||
|
|
||||||
previewEl.hidden = false;
|
|
||||||
|
|
||||||
document.getElementById('commit-local').addEventListener('click', commitLocal);
|
|
||||||
document.getElementById('commit-cancel').addEventListener('click', resetUploader);
|
|
||||||
var syncEl = document.getElementById('commit-sync');
|
|
||||||
if (syncEl) syncEl.addEventListener('click', commitSync);
|
|
||||||
}
|
|
||||||
|
|
||||||
function commitLocal() {
|
|
||||||
if (!currentPie) return;
|
|
||||||
P.savePie(currentPie);
|
|
||||||
showSuccess('▸ Imported to this browser.',
|
|
||||||
'Pie kept locally; no server-side copy.');
|
|
||||||
currentPie = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function commitSync() {
|
|
||||||
if (!currentPie) return;
|
|
||||||
// Save locally first so the cloud-sync flow uses the freshly-imported
|
|
||||||
// pie (the enable-PIN modal in this same page reads from localStorage).
|
|
||||||
P.savePie(currentPie);
|
|
||||||
var S = window.CassandraSync;
|
|
||||||
if (!S) { showError('Cloud sync module not loaded.'); return; }
|
|
||||||
|
|
||||||
var status;
|
|
||||||
try { status = await S.getStatus(); }
|
|
||||||
catch (e) { showError('Could not check sync status: ' + (e.message || e)); return; }
|
|
||||||
|
|
||||||
if (!status.paid) {
|
|
||||||
showError('Cloud sync requires the paid tier.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (status.exists) {
|
|
||||||
// Already enabled — try a direct push using the cached session
|
|
||||||
// key. If no key is cached (fresh browser session), this throws,
|
|
||||||
// and we fall back to the enable-PIN modal so the user can
|
|
||||||
// re-enter their PIN.
|
|
||||||
try {
|
|
||||||
await S.pushSync(currentPie, null);
|
|
||||||
showSuccess('▸ Imported and synced.',
|
|
||||||
'Encrypted copy updated on the server.');
|
|
||||||
currentPie = null;
|
|
||||||
if (window.cassandraRefreshSyncStatus) window.cassandraRefreshSyncStatus();
|
|
||||||
return;
|
|
||||||
} catch (e) {
|
|
||||||
// Fall through to modal so the user can re-auth with their PIN.
|
|
||||||
console.warn('direct push failed, falling back to PIN modal', e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// !status.exists OR cached-key push failed → use the modal.
|
|
||||||
if (window.cassandraOpenSyncModal) {
|
|
||||||
window.cassandraOpenSyncModal({
|
|
||||||
onSuccess: function () {
|
|
||||||
showSuccess('▸ Imported and synced.',
|
|
||||||
'Cloud sync is now enabled and the pie is stored encrypted.');
|
|
||||||
currentPie = null;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
showError('Cloud sync UI unavailable on this page. ' +
|
|
||||||
'Use the Cloud sync section below to enable.');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function resetUploader() {
|
|
||||||
currentPie = null;
|
|
||||||
previewEl.hidden = true;
|
|
||||||
previewEl.innerHTML = '';
|
|
||||||
resultEl.hidden = true;
|
|
||||||
filenameEl.textContent = '';
|
|
||||||
fileInput.value = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
async function parseFile(file) {
|
|
||||||
filenameEl.textContent = file.name + ' (' + Math.round(file.size / 1024) + ' KB) — parsing…';
|
|
||||||
previewEl.hidden = true;
|
|
||||||
resultEl.hidden = true;
|
|
||||||
try {
|
|
||||||
var pie = await P.parseCsv(file);
|
|
||||||
renderPreview(pie);
|
|
||||||
filenameEl.textContent = file.name + ' (' + Math.round(file.size / 1024) + ' KB)';
|
|
||||||
} catch (e) {
|
|
||||||
filenameEl.textContent = file.name + ' (failed)';
|
|
||||||
showError(e.message || 'Unknown error');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
browseLink.addEventListener('click', function (e) { e.preventDefault(); fileInput.click(); });
|
|
||||||
fileInput.addEventListener('change', function () {
|
|
||||||
if (fileInput.files[0]) parseFile(fileInput.files[0]);
|
|
||||||
});
|
|
||||||
|
|
||||||
['dragenter', 'dragover'].forEach(function (ev) {
|
|
||||||
dropZone.addEventListener(ev, function (e) {
|
|
||||||
e.preventDefault(); e.stopPropagation();
|
|
||||||
dropZone.classList.add('dz--over');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
['dragleave', 'drop'].forEach(function (ev) {
|
|
||||||
dropZone.addEventListener(ev, function (e) {
|
|
||||||
e.preventDefault(); e.stopPropagation();
|
|
||||||
dropZone.classList.remove('dz--over');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
dropZone.addEventListener('drop', function (e) {
|
|
||||||
var f = e.dataTransfer.files && e.dataTransfer.files[0];
|
|
||||||
if (f) parseFile(f);
|
|
||||||
});
|
|
||||||
dropZone.addEventListener('click', function (e) {
|
|
||||||
if (e.target.tagName !== 'A') fileInput.click();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
})();
|
|
||||||
</script>
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue