FamilyBook/templates/trips/index.php

<?php
/**
 * 旅程列表（v12 建立；v24 第 16 批 第 9 条把术语**固定下来**）。
 *
 * ⚠️ 术语（用户第 9 条原话）：「活动都改名吧，改成旅程，新建旅程，旅程包含行程，
 *    这个名字就固定下来。」
 *    → **旅程** = 这一页列的东西（容器）；**行程** = 旅程里面的一段一段。
 *    （第 15 批曾把容器叫"活动"，本次按用户要求改成"旅程"。）
 *
 * 时间与城市都是从各段**行程**派生出来的（第 15 批第 2 条）——
 * 列表里读的是 Trip::attachDerived() 挂上来的值，不是旅程自己的字段。
 */
$canWrite = \App\Auth::canWrite();
?>
<div class="page-head">
  <h1>旅程</h1>
  <?php /* 导航条上这个模块仍叫「旅程」（用户就是这么称呼它的），
           但这一页列的顶层单位是**活动** —— 一句副标题把两级关系说清楚，
           否则"导航写旅程、页面写活动"会让人以为点错了地方。 */ ?>
  <span class="sub">共 <?= (int)$total ?> 个 · 每个旅程里可以有若干段行程</span>
  <div class="actions">
    <?php if ($canWrite): ?>
      <?php /* 🔴 v41（用户 2026-10-10）：新建旅程改成**弹框**（原来是跳 `trips/new` 页）。
           ⚠️ 保留 `data-href`：JS 没跑时它仍是可直接访问的链接（渐进增强）。
           ⚠️ 用 `<button>` 而不是 `<a>` —— 点它不跳页，只开弹框。 */ ?>
      <button class="btn" type="button" id="tripNewBtn"
              data-href="<?= e(url('trips/new')) ?>"
              aria-haspopup="dialog" aria-expanded="false">新建旅程</button>
    <?php else: ?>
      <span class="link-quiet">只读账号</span>
    <?php endif; ?>
  </div>
</div>

<?php /* ---- 列表主体：包一层 id，供"新建成功后**动态刷新**"换掉（用户第 2 条）---- */ ?>
<div id="tripListHost">
  <?php $tripListBody = true; require __DIR__ . '/_list_body.php'; ?>
</div>

<?php if ($canWrite): ?>
  <?php /* ---- 新建旅程弹框（内嵌同一份 form.php；初始关闭）---- */ ?>
  <?php
  $tpModalOnly = true;
  $tpOpen      = false;
  $tpModal     = true;
  $tIn         = null;      // 新建
  $errorsIn    = [];
  require __DIR__ . '/form.php';
  unset($tpModalOnly, $tpOpen, $tpModal, $tIn, $errorsIn);
  ?>
  <script>
  /* ==================== 新建旅程：弹框 + AJAX + 成功后刷新列表 ====================
     用户第 2 条：「下面的按钮就是确定和取消两个…如果是取消的话，就直接关闭这个弹窗。
     确定完了之后，动态刷新旅程这个列表页面。」

     🔴 与观影详情页编辑弹框同一套做法，理由是**同一批坑**：
        · 事件委托（挂 document）—— 校验失败时服务端会把弹框整块重画，
          旧元素连监听一起丢掉；委托则一次绑定、永久有效。
        · `<button form="tripForm">` 在表单**外面**：实测点它浏览器会提交，
          但挂在 document 上的 submit 监听**收不到事件** ⇒ 主路必须走 click。
        · 成功后只换 `#tripListHost` 的内容（保留滚动位置、不闪白）。 */
  (function () {
    if (!window.fetch || !window.FormData) { return; }   // 老浏览器：保持原生整页提交
    function card() { return document.getElementById('tripNewCard'); }
    function setOpen(on) {
      var c = card();
      if (!c) { return; }
      c.hidden = !on;
      var b = document.getElementById('tripNewBtn');
      if (b) { b.setAttribute('aria-expanded', on ? 'true' : 'false'); }
      if (on) {
        /* 弹框是动态插入的：日期/选人/上传那些组件要在这一刻升级 */
        if (window.fbUpgradeRange) { window.fbUpgradeRange(); }
        if (window.fbBootAntd) { window.fbBootAntd(); }
        var t = document.getElementById('t-title');
        if (t) { t.focus(); }
      }
    }
    function busy(on) {
      var s = document.getElementById('tripNewSubmit');
      if (s) { s.disabled = !!on; s.textContent = on ? '保存中…' : '确定'; }
    }
    /* 打开 / 关闭（委托） */
    document.addEventListener('click', function (e) {
      var t = e.target;
      if (!t || !t.closest) { return; }
      if (t.closest('#tripNewBtn')) { e.preventDefault(); setOpen(true); return; }
      if (t.closest('#tripNewX') || t.closest('#tripNewCancel')) { setOpen(false); return; }
      var c = card();
      if (c && t === c) { setOpen(false); }   // 点遮罩关；点面板内部不关
    });
    document.addEventListener('keydown', function (e) {
      if (e.key !== 'Escape') { return; }
      var c = card();
      if (!c || c.hidden) { return; }
      var d = document.querySelector('.ant-picker-dropdown');
      if (d && !d.classList.contains('ant-picker-dropdown-hidden')) { return; }  // 交给 antd
      setOpen(false);
    });
    /* 确定：提交（click 主路 + submit 兜回车） */
    function save() {
      var form = document.getElementById('tripForm');
      if (!form) { return; }
      busy(true);
      fetch(form.action, {
        method: 'POST', body: new FormData(form),
        headers: { 'X-Requested-With': 'XMLHttpRequest' },
        credentials: 'same-origin',
        redirect: 'follow',
      }).then(function (r) {
        var ct = (r.headers.get('content-type') || '');
        if (ct.indexOf('application/json') >= 0) {
          /* 校验失败：服务端回重画后的弹框 → 整块换掉（红字/回填由模板产出） */
          return r.json().then(function (j) {
            var old = card();
            if (!old || !j || !j.modal) { return; }
            var tmp = document.createElement('div');
            tmp.innerHTML = j.modal;
            var fresh = tmp.querySelector('#tripNewCard');
            if (!fresh) { return; }
            old.parentNode.replaceChild(fresh, old);
            setOpen(true);
          });
        }
        /* 成功：跟到最终页（列表），只换列表容器 */
        return r.text().then(function (html) {
          var doc = new DOMParser().parseFromString(html, 'text/html');
          var freshList = doc.getElementById('tripListHost');
          var curList = document.getElementById('tripListHost');
          if (freshList && curList) { curList.innerHTML = freshList.innerHTML; }
          else { window.location.reload(); return; }
          /* flash 在正文容器里、会随列表一起换掉；但"新弹框"要复位成关闭 */
          var c = card();
          if (c) { c.hidden = true; }
          var b = document.getElementById('tripNewBtn');
          if (b) { b.setAttribute('aria-expanded', 'false'); }
        });
      }).catch(function () {
        busy(false);
        form.submit();     // 退回原生提交（不静默吞）
      }).then(function () { busy(false); });
    }
    document.addEventListener('click', function (ev) {
      var t = ev.target;
      if (!t || !t.closest || !t.closest('#tripNewSubmit')) { return; }
      ev.preventDefault();
      save();
    });
    document.addEventListener('submit', function (ev) {
      var f = ev.target;
      if (!f || f.id !== 'tripForm') { return; }
      ev.preventDefault();
      save();
    });
  })();
  </script>
<?php endif; ?>