read.markets/app/templates/upload.html

{% extends "base.html" %}
{% block title %}{{ BRAND_NAME }} · Import Portfolio{% endblock %}

{% block main %}
<section class="panel" style="grid-column: 1 / -1; max-width: 760px; margin: 0 auto;">
  <div class="panel-header">
    <span class="title">Import portfolio (Trading 212 CSV)</span>
    <span class="meta">stays in your browser · never persists server-side</span>
  </div>

  <div class="panel-body" style="padding: 18px clamp(16px, 4vw, 32px) 24px;">
    <p style="color: var(--muted); font-size: 12.5px; margin: 0 0 14px; line-height: 1.6;">
      Export your pie from the T212 web app
      (<span class="neu">Trading 212 → Investing → Your Pie → ⋯ → Export</span>)
      and drop the CSV here. Each Slice is resolved to its Yahoo ticker;
      the parsed pie is kept in <em>this browser's localStorage</em> only.
      The server learns just which tickers exist (anonymously) so it can
      fetch their prices.
    </p>

    <form id="upload-form" autocomplete="off">
      <div id="drop-zone" class="dz">
        <input type="file" id="file-input" name="file" accept=".csv,text/csv" hidden>
        <div class="dz__icon">▱</div>
        <div class="dz__label">Drop a T212 pie CSV here</div>
        <div class="dz__hint">or <a href="#" id="browse-link">browse</a> · max 1 MB</div>
        <div class="dz__filename" id="dz-filename"></div>
      </div>

      <button id="submit-btn" type="submit" disabled style="margin-top:18px;">Parse</button>
    </form>

    <div id="result" class="result" hidden></div>
  </div>
</section>

<script src="{{ url_for('static', path='/js/portfolio.js') }}" defer></script>
<script>
(function () {
  function ready(fn) {
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', fn);
    } else { fn(); }
  }

  ready(function () {
    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 submitBtn = document.getElementById('submit-btn');
    var form = document.getElementById('upload-form');
    var resultEl = document.getElementById('result');

    function setFile(file) {
      if (!file) return;
      var dt = new DataTransfer();
      dt.items.add(file);
      fileInput.files = dt.files;
      filenameEl.textContent = file.name + ' (' + Math.round(file.size / 1024) + ' KB)';
      submitBtn.disabled = false;
    }

    browseLink.addEventListener('click', function (e) { e.preventDefault(); fileInput.click(); });
    fileInput.addEventListener('change', function () {
      if (fileInput.files[0]) setFile(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) {
      if (e.dataTransfer.files && e.dataTransfer.files[0]) setFile(e.dataTransfer.files[0]);
    });
    dropZone.addEventListener('click', function (e) {
      if (e.target.tagName !== 'A') fileInput.click();
    });

    form.addEventListener('submit', async function (e) {
      e.preventDefault();
      if (!fileInput.files[0]) return;
      submitBtn.disabled = true;
      submitBtn.textContent = 'Parsing…';
      // CassandraPortfolio is exposed by /static/js/portfolio.js.
      var ok = await window.CassandraPortfolio.handleUpload(form, fileInput.files[0], resultEl);
      submitBtn.textContent = ok ? 'Parsed' : 'Parse';
      submitBtn.disabled = !ok;
    });
  });
})();
</script>
{% endblock %}