FamilyBook/templates/calendar/_event_fields.php

<?php
/**
 * 日程表单的字段块（新建与编辑共用一份 —— 复制一遍迟早改漏一处）。
 *
 * 字段按 **RFC 5545（iCalendar）/ RFC 4791（CalDAV）** 的 VEVENT 属性定：
 *   标题    = SUMMARY
 *   地点    = LOCATION
 *   开始/结束 = DTSTART / DTEND（DATETIME，精确到秒）
 *   全天     —— VEVENT 没有"全天"这个属性，约定俗成是把 DTSTART 写成 DATE 值；
 *              我们统一存 DATETIME，全天时时间部分为 00:00:00，导出 ics 时再落成 DATE 值。
 *   提醒    = VALARM 的 TRIGGER（提前多久）；不提醒 = 不写 VALARM
 *   状态    = STATUS（CONFIRMED / TENTATIVE / CANCELLED）
 *   忙闲    = TRANSP（OPAQUE=忙 / TRANSPARENT=空闲）
 *   备注    = DESCRIPTION
 *   附件    = ATTACH
 *
 * 用法（include 前设好）：
 *   $evFields  正在编辑的日程（新建时传空数组）
 *   $evAllDay  全天的默认值（新建默认**不勾**，用户 2026-10-02 第 6 条）
 */
$evF     = is_array($evFields ?? null) ? $evFields : [];
$evAllDayDefault = (bool)($evAllDay ?? false);
$evIsAllDay = array_key_exists('all_day', $evF) ? !empty($evF['all_day']) : $evAllDayDefault;
?>
<div class="field full">
  <label for="ev-title">标题 *</label>
  <input class="input" id="ev-title" name="title" required
         value="<?= e((string)($evF['title'] ?? '')) ?>" placeholder="如：家长会">
</div>

<div class="field">
  <label for="ev-location">地点</label>
  <input class="input" id="ev-location" name="location"
         value="<?= e((string)($evF['location'] ?? '')) ?>" placeholder="如：学校三楼会议室">
</div>

<div class="field">
  <label>提醒</label>
  <?php /* 不提醒 = NULL（导出 ics 时不写 VALARM）；档位就是用户第 6 条列的那些。 */ ?>
  <select class="select" name="reminder_minutes" aria-label="提前多久提醒">
    <?php $cur = $evF['reminder_minutes'] ?? null; ?>
    <option value=""<?= $cur === null || $cur === '' ? ' selected' : '' ?>>不提醒</option>
    <?php foreach (\App\Calendar::REMINDERS as $mins => $word): ?>
      <option value="<?= (int)$mins ?>"<?= (string)$cur === (string)$mins ? ' selected' : '' ?>>
        <?= e($word) ?>
      </option>
    <?php endforeach; ?>
  </select>
</div>

<?php /* v24 第 5、6 条：起止各一个「日期 + 时分秒」合在一起的控件（全局统一），
         不再拆成"日期一格 + 时刻一格"。两个控件长得一样，扫一眼就知道哪个是开始。 */ ?>
<?php /* 用户 2026-10-04 第 7 条：日程的起止也是一个**范围** ——
         升级后由一个 Semi dateTimeRange 一次选完。服务端仍收两组 *_date/_hour/… 字段。 */ ?>
<div class="dt-range">
<div class="field ev-dt" data-dt>
  <label>开始 *</label>
  <?php $dtName = 'starts_at'; $dtId = 'ev-start';
        $dtValue = $evF['starts_at'] ?? null; $dtRequired = true; $dtSeconds = true;
        $dtRange = 'start';
        require __DIR__ . '/../_datetime.php'; ?>
</div>
<?php /* 用户 2026-10-03 第 6 条：「添加结束日期与时间」——
         结束是可选的：没填就表示"就一个时刻/就这一天"，填了才画成一段。
         所以给一个显式开关，而不是让人对着空控件猜"不填行不行"。 */ ?>
<?php $hasEnd = trim((string)($evF['ends_at'] ?? '')) !== ''; ?>
<div class="field ev-dt" data-dt id="ev-end-field"<?= $hasEnd ? '' : ' hidden' ?>>
  <label>结束</label>
  <?php $dtName = 'ends_at'; $dtId = 'ev-end';
        $dtValue = $evF['ends_at'] ?? null; $dtRequired = false; $dtSeconds = true;
        $dtRange = 'end';
        require __DIR__ . '/../_datetime.php'; ?>
</div>
</div><?php /* /dt-range */ ?>
<div class="field" id="ev-end-add">
  <label>结束时间</label>
  <button type="button" class="btn btn-ghost btn-sm" id="ev-end-add-btn">+ 添加结束时间</button>
  <span class="field-hint">不填就表示没有明确的结束（只占开始那一刻/那一天）</span>
</div>

<div class="field">
  <label>
    <input type="checkbox" id="ev-allday" name="all_day" value="1"
           <?= $evIsAllDay ? 'checked' : '' ?>>
    全天
  </label>
  <span class="field-hint">勾上就不管具体几点，只占这一天</span>
</div>

<?php /* 用户 2026-10-03 第 5、6 条：重复日程。
         放在「全天」之后的自然位置：先定"哪一天/几点"，再定"要不要重复"。
         周期用 FREQ 记号，结束条件三档（一直 / N 次 / 到某天），另加"工作日"。 */ ?>
<div class="field">
  <label for="ev-freq">重复</label>
  <select class="select" id="ev-freq" name="freq">
    <?php $rp = \App\Repeat::parse((string)($evF['rrule'] ?? '')); ?>
    <?php foreach (\App\Repeat::FREQS as $k => $w): ?>
      <option value="<?= e($k) ?>"<?= (string)$rp['freq'] === (string)$k ? ' selected' : '' ?>><?= e($w) ?></option>
    <?php endforeach; ?>
  </select>
</div>

<div class="field" id="ev-rep-end-box" hidden>
  <label for="ev-rep-end">结束条件</label>
  <select class="select" id="ev-rep-end" name="rep_end">
    <?php foreach (\App\Repeat::ENDS as $k => $w): ?>
      <option value="<?= e($k) ?>"<?= $rp['count'] > 0 ? '' : '' ?>><?= e($w) ?></option>
    <?php endforeach; ?>
  </select>
</div>

<div class="field" id="ev-rep-count-box" hidden>
  <label for="ev-rep-count">重复次数（含第一次）</label>
  <input class="input" type="number" min="1" max="2000" id="ev-rep-count" name="rep_count"
         value="<?= (int)($rp['count'] ?: 10) ?>">
</div>

<div class="field" id="ev-rep-until-box" hidden>
  <label for="ev-rep-until">重复到</label>
  <input class="input" type="date" id="ev-rep-until" name="rep_until"
         value="<?= e((string)($rp['until'] ?? '')) ?>">
</div>

<div class="field">
  <label for="ev-status">状态</label>
  <select class="select" id="ev-status" name="status">
    <?php $st = (string)($evF['status'] ?? 'confirmed'); ?>
    <option value="confirmed"<?= $st === 'confirmed' ? ' selected' : '' ?>>确定</option>
    <option value="tentative"<?= $st === 'tentative' ? ' selected' : '' ?>>待定</option>
    <option value="cancelled"<?= $st === 'cancelled' ? ' selected' : '' ?>>取消</option>
  </select>
</div>

<div class="field">
  <label for="ev-transp">这段时间算</label>
  <select class="select" id="ev-transp" name="transp">
    <?php $tp = (int)($evF['transp'] ?? 0); ?>
    <option value="0"<?= $tp === 0 ? ' selected' : '' ?>>忙碌</option>
    <option value="1"<?= $tp === 1 ? ' selected' : '' ?>>空闲（别人还能约）</option>
  </select>
</div>

<div class="field full">
  <label for="ev-note">备注</label>
  <textarea class="input" id="ev-note" name="note" rows="3"
            placeholder="要带什么、跟谁一起…"><?= e((string)($evF['note'] ?? '')) ?></textarea>
</div>

<div class="field full">
  <label for="ev-attach">附件（可多选）</label>
  <input class="input" type="file" id="ev-attach" name="attach[]" multiple>
</div>

<script>
(function () {
  /* 「全天」勾上就把两个时刻控件的**时间部分**收起来 —— 日期还得留着。
     只藏 .dt-time（时/分/秒那一段），.dt-date 是日期，藏了就没法选哪天了。 */
  var box = document.getElementById('ev-allday');
  if (!box) return;
  function sync() {
    Array.prototype.forEach.call(document.querySelectorAll('[data-dt] .dt-time'), function (el) {
      el.hidden = box.checked;
    });
  }
  box.addEventListener('change', sync);
  sync();

  /* ---- 用户第 6 条：结束时间 ----
     ① 「+ 添加结束时间」把结束控件放出来；
     ② 结束时间**默认跟着开始时间走**：改了开始，若结束还没填（或原本等于旧开始），
        就把结束同步过去 —— 常见用法是"改个开始，结束忘了改"，结果时长莫名其妙。
        但只要用户**自己动过结束**，就不再自动同步（别抢用户的输入）。 */
  var startBox  = document.querySelector('[data-dt] input.dt-date');
  var endField  = document.getElementById('ev-end-field');
  var endAdd    = document.getElementById('ev-end-add');
  var endAddBtn = document.getElementById('ev-end-add-btn');
  var startField = document.querySelector('.field.ev-dt');
  function endInputs() {
    if (!endField) return [];
    return Array.prototype.slice.call(endField.querySelectorAll('input, select'));
  }
  function showEnd(on) {
    if (endField) { endField.hidden = !on; }
    if (endAdd)   { endAdd.hidden = on; }
    // 结束时间刚被显示出来 → 现在两端都可见了，可以合并成一个范围控件（用户第 7 条）。
    // 收起时不动已有的范围（它本来就只显示在第一端上，不影响使用）。
    if (on && typeof window.fbUpgradeRange === 'function') {
      window.fbUpgradeRange();
    }
  }
  var endTouched = false;
  endInputs().forEach(function (el) {
    el.addEventListener('change', function () { endTouched = true; });
  });
  if (endAddBtn) {
    endAddBtn.addEventListener('click', function () { showEnd(true); endTouched = false; });
  }
  // 移除结束（改回"没有结束"）
  if (endField && !endField.querySelector('.ev-end-del')) {
    var del = document.createElement('button');
    del.type = 'button';
    del.className = 'btn btn-ghost btn-sm ev-end-del';
    del.textContent = '去掉结束时间';
    del.addEventListener('click', function () {
      endInputs().forEach(function (el) {
        if (el.tagName === 'SELECT') { el.value = '00'; }
        else { el.value = ''; }
      });
      showEnd(false);
      endTouched = false;
    });
    endField.appendChild(del);
  }
  // 开始变了 → 结束（若没被手动改过）跟着走同一时刻
  if (startField) {
    startField.addEventListener('change', function () {
      if (endTouched || !endField || endField.hidden) return;
      var sd = startField.querySelector('input.dt-date');
      var sh = startField.querySelector('select.dt-hour');
      var sm = startField.querySelector('select.dt-minute');
      var ss = startField.querySelector('select.dt-second');
      var ed = endField.querySelector('input.dt-date');
      var eh = endField.querySelector('select.dt-hour');
      var em = endField.querySelector('select.dt-minute');
      var es = endField.querySelector('select.dt-second');
      if (sd && ed) { ed.value = sd.value; }
      if (sh && eh) { eh.value = sh.value; }
      if (sm && em) { em.value = sm.value; }
      if (ss && es) { es.value = ss.value; }
    });
  }
  // 初值由服务端决定（有 ends_at 就是展开的），JS 只负责"之后"的显隐
  showEnd(<?= $hasEnd ? 'true' : 'false' ?>);

  /* 重复：选了周期才显示"结束条件"；结束条件选"次数"才显示次数框、选"到某天"才显示日期框。
     三个框默认都 hidden —— 不重复时一个都不该出现（少即是清楚）。 */
  var freq = document.getElementById('ev-freq');
  var endBox = document.getElementById('ev-rep-end-box');
  var endSel = document.getElementById('ev-rep-end');
  var cntBox = document.getElementById('ev-rep-count-box');
  var untilBox = document.getElementById('ev-rep-until-box');
  function syncRep() {
    if (!freq || !endBox) return;
    var repeating = freq.value !== '';
    endBox.hidden = !repeating;
    var how = endSel ? endSel.value : 'never';
    if (cntBox)   { cntBox.hidden   = !repeating || how !== 'count'; }
    if (untilBox) { untilBox.hidden = !repeating || how !== 'until'; }
  }
  if (freq) { freq.addEventListener('change', syncRep); }
  if (endSel) { endSel.addEventListener('change', syncRep); }
  // 回填：编辑一条已有的重复日程时，把结束条件按库里的值选对
  <?php if ($rp['count'] > 0): ?>
  if (endSel) { endSel.value = 'count'; }
  <?php elseif ($rp['until'] !== ''): ?>
  if (endSel) { endSel.value = 'until'; }
  <?php endif; ?>
  syncRep();

  /* 「全天」+「重复」的组合提示：重复日程必须有开始日期，
     否则展开时找不到锚点（后端会当成"不重复"处理）。 */
  var startDate = document.querySelector('[data-dt] input.dt-date');
  if (freq && startDate) {
    freq.addEventListener('change', function () {
      if (freq.value !== '' && startDate.value === '') {
        startDate.setCustomValidity('重复日程要先选开始日期');
      } else {
        startDate.setCustomValidity('');
      }
    });
  }
})();
</script>
<?php unset($evF, $evAllDayDefault, $evIsAllDay, $evFields, $evAllDay); ?>