laoyang
7138314dc7
用户原话四条，逐条落地：
1. 「旅程模块，按钮是记一次活动，而不是记一趟旅程。旅程是活动里面的概念。」
→ 顶层一律改称**活动**：按钮「记一次活动」、页标题「活动」、`N 次` / `N 段旅程`；
活动详情三组改叫「计划的旅程 / 走过的旅程 / 没成行的」；
节点表单「这段旅程叫什么」「阶段」；flash 文案 17 处同步。
（导航条仍叫「旅程」——用户就是这么称呼这个模块，列表页加副标题说清两级关系。）
2. 「活动不需要开始和结束时间，是根据活动中的旅程，最早的旅程开始时间，和最晚的
旅程结束时间，计算出来的。目的地也不需要…去的城市，也是根据旅程，得到的。」
→ 活动**不再存**这三样，全部**读时算出来**：
· Trip::derived() 最早开始 / 最晚结束 / 城市去重
· Trip::cities() 按最早出现时间排（先后顺序本身是信息，不是字母序）
· Trip::attachDerived() 列表页批量补（避免 N+1）
· Trip::activitySpan() 没有旅程时说「还没有旅程」，不用「日期待补」
create/update 不再写 events 的起止与地点（老值保留不动，页面不读）。
列表排序/搜索、首页「最近去了」改走子查询。
3. 「题图那里，没有办法上传图片，点击哪里都没反应。」——**真 bug**
「点图 = 开文件框」那句 JS 只写在 people/form.php 的内页脚本里（头像专用）；
第 14 批加的旅程题图与图书封面照抄了同一套 DOM 却没有对应的 JS，
于是图块有 cursor:pointer 与 hover 高亮（看着能点），点下去毫无反应。
→ 做成声明式通用绑定：图上写 data-pick-input="#fileInputId"，
app.js 统一接管（一个页面多个也各绑各的），并删掉旧的那份专用实现。
三处（头像 / 题图 / 图书封面）全挂上。
4. 「添加活动的页面，顺序是这样的：添加标题，上传并裁剪题图，然后一段简介，就可以了。」
→ 主区就这三项，顺序照原话；时间/城市不做输入项（只留一句说明它们从哪来，
不说清用户会满页找"怎么没地方填时间"）。
备注 / 公开 / 同行的人收进「更多设置」折叠区——功能一个没丢。
顺带修掉两处会炸的实现问题：
· ORDER BY 引用聚合别名（first_at）在 MariaDB/MySQL 报 1247，且只在运行时炸、
php -l 看不出 → 改成 ORDER BY MIN(starts_at)，否则整个旅程模块 Fatal。
· e2e 里"详情页显示了派生时间"原本写成整页查找，下面每段旅程自己也渲染日期，
于是把派生值塞成 null 也照样绿（借光假绿）→ 判据收进页头那一段。
验证：e2e 845/0（+15 条本批断言）· 升级 134/0 · 桌面几何 428/0 · 移动几何 688/0 ·
交互 92/0 · 题图真机点击 4/0 · 读书窄屏 15/0 · 家谱 34/0 + 10/0 + 反向 3/3 ·
观影按钮 60/0 + 反向 3/3 · 本批反向验证 4/4（题图绑定抽掉→红、派生值不挂→红、
城市退回读 location→红、时间字段加回表单→红）· 部署静态断言新增两组（含"活动不许
再写起止时间/目的地"与"ORDER BY 不许引用聚合别名"的反退化防线）。
部署后服务器自检 19/19，五个关键文件 md5 与线上逐一核对一致。
524 lines
28 KiB
PHP
524 lines
28 KiB
PHP
<?php
|
||
/**
|
||
* 日程 · 月 / 周 / 天 三视图（v12，v24 第 4、5 条重排）。
|
||
*
|
||
* ⚠️ v24 用户 2026-10-03 第 4 条：**左侧那一栏「我的日历本」撤掉了**，日历占满整宽。
|
||
* 原话：「日程模块，左侧的日历本显示与否，去掉，让日历充满整个宽度。
|
||
* 在右侧，也加一个设置按钮，设置中，可以设置哪些日历本显示，
|
||
* 调整日历的颜色，导入日历等功能，都放在这个设置下。」
|
||
* 所以那些功能全搬进了页头最右边那个 ☰ 里（见 _settings_menu.php）。
|
||
* 显隐改由**服务端**处理（Calendar::hiddenCalendars）：藏掉的本子不参与取数，
|
||
* "+N 条"之类按可见条目算 —— 前端 display:none 会让这些数字对不上。
|
||
*
|
||
* ⚠️ 用户第 5 条：在日历里点一下就建日程（开始时间 = 点的那一格）。
|
||
* 月视图的格子按天、周/日视图按半小时——
|
||
* 后者用鼠标在列里的纵向位置反算时刻（见页面底部那两段 JS）。
|
||
*
|
||
* @param string $ym 'Y-m'
|
||
* @param array $weeks 月网格（build_month_grid 产出）
|
||
* @param array $cals 我可见的日历本（含 perm）；$visCals 是其中显示着的 id
|
||
* @param string $newAt 点进来时预填的开始时间（'Y-m-d H:i' 或 'Y-m-d'）
|
||
*/
|
||
$canWrite = \App\Auth::canWrite();
|
||
$view = (string)($view ?? 'month');
|
||
$anchor = (string)($anchor ?? date('Y-m-d'));
|
||
$ts = strtotime($ym . '-01') ?: time();
|
||
$prevYm = date('Y-m', strtotime('-1 month', $ts));
|
||
$nextYm = date('Y-m', strtotime('+1 month', $ts));
|
||
$thisYm = date('Y-m');
|
||
$writable = array_values(array_filter($cals, static fn($c) => \App\Calendar::canWrite($c, (int)\App\Auth::personId())));
|
||
$visCals = array_map('intval', (array)($visCals ?? []));
|
||
$hiddenCals = array_map('intval', (array)($hiddenCals ?? []));
|
||
$newAt = (string)($newAt ?? '');
|
||
// 能不能"点一下建日程"：只读账号点了没反应，所以连十字光标都不给（见 CSS 的 rt-writable）
|
||
$canNew = $canWrite && (bool)$writable;
|
||
|
||
// 三种看法各自的「上一段 / 下一段」：月按整月走，周按 7 天走，天按 1 天走
|
||
$step = $view === 'week' ? 7 : ($view === 'day' ? 1 : 0);
|
||
$prevD = date('Y-m-d', strtotime('-' . $step . ' days', strtotime($anchor)));
|
||
$nextD = date('Y-m-d', strtotime('+' . $step . ' days', strtotime($anchor)));
|
||
$todayD = date('Y-m-d');
|
||
$headText = $view === 'month' ? date('Y 年 n 月', $ts)
|
||
: ($view === 'week' ? date('Y 年 n 月 j 日', strtotime($anchor)) . ' 起这一周'
|
||
: date('Y 年 n 月 j 日', strtotime($anchor)));
|
||
?>
|
||
<div class="page-head">
|
||
<h1>日程</h1>
|
||
<span class="sub"><?= e($headText) ?></span>
|
||
<div class="actions">
|
||
<?php /* v24 第 4 条：月 / 周 / 天三选一 */ ?>
|
||
<span class="seg" role="group" aria-label="看法">
|
||
<a class="seg-btn<?= $view === 'month' ? ' is-on' : '' ?>"
|
||
href="<?= e(url('calendar', ['view' => 'month', 'ym' => $ym])) ?>">月</a>
|
||
<a class="seg-btn<?= $view === 'week' ? ' is-on' : '' ?>"
|
||
href="<?= e(url('calendar', ['view' => 'week', 'd' => $anchor])) ?>">周</a>
|
||
<a class="seg-btn<?= $view === 'day' ? ' is-on' : '' ?>"
|
||
href="<?= e(url('calendar', ['view' => 'day', 'd' => $anchor])) ?>">天</a>
|
||
</span>
|
||
<?php if ($view === 'month'): ?>
|
||
<a class="btn btn-ghost" href="<?= e(url('calendar', ['view' => 'month', 'ym' => $prevYm])) ?>">上一月</a>
|
||
<a class="btn btn-ghost" href="<?= e(url('calendar', ['view' => 'month', 'ym' => $thisYm])) ?>">今天</a>
|
||
<a class="btn btn-ghost" href="<?= e(url('calendar', ['view' => 'month', 'ym' => $nextYm])) ?>">下一月</a>
|
||
<?php else: ?>
|
||
<a class="btn btn-ghost" href="<?= e(url('calendar', ['view' => $view, 'd' => $prevD])) ?>">
|
||
<?= $view === 'week' ? '上一周' : '前一天' ?>
|
||
</a>
|
||
<a class="btn btn-ghost" href="<?= e(url('calendar', ['view' => $view, 'd' => $todayD])) ?>">今天</a>
|
||
<a class="btn btn-ghost" href="<?= e(url('calendar', ['view' => $view, 'd' => $nextD])) ?>">
|
||
<?= $view === 'week' ? '下一周' : '后一天' ?>
|
||
</a>
|
||
<?php endif; ?>
|
||
<?php if ($canWrite && $writable): ?>
|
||
<button class="btn" type="button" id="calAddBtn">新建日程</button>
|
||
<?php endif; ?>
|
||
<?php /* 用户 2026-10-04 第 6 条原话：「日程页面，在设置按钮的前面，加一个日历按钮，
|
||
选择日历后，跳转到那一天。」
|
||
→ 一个带日历图标的按钮，点开是日期选择；选中即跳到那天的**日视图**。
|
||
⚠️ 用原生 <input type="date"> 而不是再引一个弹层：它的原生日历足够用，
|
||
而且**选中就有值**（change 事件）→ 直接跳转，不用再点一次"确定"。
|
||
桌面/手机/无 JS 三种情况下的行为都是可预期的。 */ ?>
|
||
<?php /* 用户 2026-10-05 第 12 批 #3 原话（三句）：
|
||
· 「跳转到某一天时，不要进入日视图，保留当前本来的视图，只不过是跳转到这一天，
|
||
如果是周视图，那么就是跳转到这一天所在的周，如果是月视图，则跳转到这一天所在的月」
|
||
· 「选择这个日期，不用弹窗，直接把日历选择，弹出在这个按钮下面就可以了」
|
||
→ ① 不再固定 view=day：带上**当前视图**（月/周/日各自跳到对应跨度）；
|
||
② 日期选择从"居中弹窗"改成**贴着按钮下方展开的下拉日历**。
|
||
|
||
🔴 2026-10-05 第 14 批 #1（用户报严重 bug）：「点上一月，页面直接跳转，
|
||
我还没选择日期呢」。根因是这一版下拉里挂的是 Semi 的 DatePicker ——
|
||
它的日历面板**渲染在 body 的 portal 里**（不在下拉容器内），
|
||
而它在面板上翻月时会把"面板当前显示的日期"当成新值回调 onChange，
|
||
于是"翻月"被当成了"选中"。第三方控件把"翻页"与"选中"混在一个回调里，
|
||
这个语义我们改不了。
|
||
→ 改成**自绘内联日历**（几十行、零依赖）：翻月/翻年只重绘面板、绝不提交，
|
||
只有点**某一天**才跳转，语义 100% 由我们自己定。 */ ?>
|
||
<form class="cal-jump" method="get" action="index.php">
|
||
<input type="hidden" name="r" value="calendar">
|
||
<?php /* 保留当前视图：月→该月 / 周→那一周 / 日→那一天。
|
||
⚠️ 原来写死 view=day，用户点"跳到 10 月 20 日"就被踢进日视图，
|
||
而他本来在月视图里 —— 这正是不满的点。 */ ?>
|
||
<input type="hidden" name="view" value="<?= e($view) ?>">
|
||
<input type="hidden" name="d" id="calJumpD" value="<?= e($anchor) ?>">
|
||
<?php /* 月视图用的是 ym（年月），跳转时也要带上，否则服务端会退回默认月 */ ?>
|
||
<?php if ($view === 'month'): ?>
|
||
<input type="hidden" name="ym" id="calJumpYM" value="<?= e(substr($anchor, 0, 7)) ?>">
|
||
<?php endif; ?>
|
||
<button type="button" class="btn btn-icon cal-jump-btn" id="calJumpBtn"
|
||
title="跳到某一天" aria-label="跳到某一天" aria-haspopup="dialog" aria-expanded="false">
|
||
<svg viewBox="0 0 16 16" width="18" height="18" aria-hidden="true" fill="none"
|
||
stroke="currentColor" stroke-width="1.7" stroke-linecap="round">
|
||
<rect x="2" y="3.2" width="12" height="10.8" rx="1.6"/>
|
||
<path d="M2 6.6h12M5.2 1.8v2.6M10.8 1.8v2.6"/>
|
||
</svg>
|
||
</button>
|
||
<?php /* 下拉日历的宿主：紧贴按钮下方展开（不是弹窗）。内容由下面那段 JS 画；
|
||
JS 不可用时它是空的、退到下面的 noscript（原生日期框 + 跳转按钮）。 */ ?>
|
||
<div class="cal-jump-drop" id="calJumpDrop" hidden></div>
|
||
<noscript>
|
||
<input class="input" type="date" name="d" value="<?= e($anchor) ?>" aria-label="选择日期">
|
||
<button class="btn btn-sm" type="submit">跳转</button>
|
||
</noscript>
|
||
</form>
|
||
<?php /* 用户第 4、5 条：日历本 / 颜色 / 导入 / 默认视图 全收进这个 ☰ ——
|
||
它顶替了原来左边那一栏，所以排在**最右**（靠 .page-head .actions 的顺序）。 */ ?>
|
||
<?php $setCurrent = 'view'; require __DIR__ . '/_settings_menu.php'; ?>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cal-wrap cal-wrap-full">
|
||
<?php /* ---- 右：月网格 / 时间网格 ----
|
||
用户第 4 条：左边那一栏「我的日历本」已经撤掉（功能搬进右上角 ☰），
|
||
所以这里直接就是主区域，`.cal-wrap-full` 把网格调成"只有一列"。 */ ?>
|
||
<div class="cal-main">
|
||
<?php /* 用户第 5 条：这张表单既服务「新建日程」按钮，也服务「点日历空白处」——
|
||
后者由 JS 现填开始时间，所以表单本身不再写死 09:00。 */ ?>
|
||
<?php if ($canWrite && $writable): ?>
|
||
<div class="card card-pad cal-add" id="calAddCard" hidden>
|
||
<h2 class="cinema-h2">新建日程</h2>
|
||
<form method="post" action="<?= e(url('calendar/event_add')) ?>" enctype="multipart/form-data">
|
||
<?= csrf_field() ?>
|
||
<input type="hidden" name="ym" value="<?= e($ym) ?>">
|
||
<div class="form-grid">
|
||
<div class="field">
|
||
<label for="ce-cal">放在哪本</label>
|
||
<select class="select" id="ce-cal" name="calendar_id">
|
||
<?php foreach ($writable as $c): ?>
|
||
<option value="<?= (int)$c['id'] ?>"><?= e((string)$c['name']) ?></option>
|
||
<?php endforeach; ?>
|
||
</select>
|
||
</div>
|
||
<?php /* v24 第 6 条：字段按 iCalendar / CalDAV 的 VEVENT 定（见 _event_fields.php）。
|
||
新建时「全天」默认**不勾**（用户原话）。开始时间默认：
|
||
带了 new_at 就用它（点日历的那一格），否则今天 09:00。 */ ?>
|
||
<?php
|
||
// 点的位置优先；没点就"月视图当月 → 该月 1 号 / 本月 → 今天"的 09:00
|
||
$defDay = $newAt !== '' ? substr($newAt, 0, 10)
|
||
: (($ym === $thisYm ? date('Y-m-d') : $ym . '-01'));
|
||
$defHM = $newAt !== '' && strlen($newAt) > 10
|
||
? substr($newAt, 11, 5) : '09:00';
|
||
$defEndH = sprintf('%02d', (min(23, (int)substr($defHM, 0, 2) + 1)));
|
||
$evFields = ['starts_at' => $defDay . ' ' . $defHM . ':00',
|
||
'ends_at' => $defDay . ' ' . $defEndH . ':' . substr($defHM, 3, 2) . ':00'];
|
||
$evAllDay = false;
|
||
require __DIR__ . '/_event_fields.php';
|
||
?>
|
||
</div>
|
||
<div class="btn-row">
|
||
<button class="btn btn-sm" type="submit">加上</button>
|
||
<button class="btn btn-ghost btn-sm" type="button" id="calAddCancel">取消</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<?php if ($view === 'week' || $view === 'day'): ?>
|
||
<?php /* ===== 周 / 天：按小时铺的时间网格（全天日程单独挂顶上） ===== */ ?>
|
||
<div class="card cal-tg-card">
|
||
<div class="tg-head">
|
||
<div class="tg-gutter"></div>
|
||
<?php foreach (($cols ?? []) as $c): ?>
|
||
<div class="tg-dayname<?= $c['is_today'] ? ' is-today' : '' ?>">
|
||
<?php /* $c['w'] 是 date('w')（0=周日），所以这张索引表保持"日"开头——
|
||
它只是把数字换成汉字，与列的排列顺序无关。 */ ?>
|
||
<span class="tg-wd"><?= e(['日','一','二','三','四','五','六'][$c['w']]) ?></span>
|
||
<span class="tg-dd"><?= (int)$c['day'] ?></span>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
|
||
<?php $tgAll = $tgrid['all_day'] ?? []; ?>
|
||
<?php if (array_filter($tgAll)): ?>
|
||
<div class="tg-allday">
|
||
<div class="tg-gutter"><span class="tg-tag">全天</span></div>
|
||
<?php foreach (($cols ?? []) as $i => $c): ?>
|
||
<div class="tg-adcell">
|
||
<?php foreach (($tgAll[$i] ?? []) as $ev): ?>
|
||
<a class="cal-ev is-allday" data-cal="<?= (int)$ev['cal'] ?>"
|
||
style="background: <?= e((string)$ev['color']) ?>;"
|
||
href="<?= e((string)$ev['href']) ?>"
|
||
title="<?= e((string)$ev['title']) ?>"><?= e((string)$ev['title']) ?></a>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<div class="tg-body">
|
||
<div class="tg-gutter tg-hours">
|
||
<?php for ($h = 0; $h < 24; $h++): ?>
|
||
<span class="tg-hr"><?= sprintf('%02d', $h) ?></span>
|
||
<?php endfor; ?>
|
||
</div>
|
||
<?php foreach (($cols ?? []) as $i => $c): ?>
|
||
<div class="tg-col<?= $c['is_today'] ? ' is-today' : '' ?><?= $canNew ? ' rt-writable' : '' ?>"
|
||
data-new-at="<?= e((string)$c['date']) ?>">
|
||
<?php for ($h = 0; $h < 24; $h++): ?>
|
||
<span class="tg-line"></span>
|
||
<?php endfor; ?>
|
||
<?php foreach (($tgrid['timed'][$i] ?? []) as $ev): ?>
|
||
<a class="tg-block" data-cal="<?= (int)$ev['cal'] ?>"
|
||
style="background: <?= e((string)$ev['color']) ?>; top: <?= (float)$ev['top'] ?>%; height: <?= (float)$ev['height'] ?>%;"
|
||
href="<?= e((string)$ev['href']) ?>"
|
||
title="<?= e((string)$ev['title']) ?>">
|
||
<b><?= e((string)$ev['time']) ?></b> <?= e((string)$ev['title']) ?>
|
||
</a>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
</div>
|
||
<?php else: ?>
|
||
<div class="card cal-grid-card">
|
||
<div class="cal-head">
|
||
<?php /* ⚠️ 用户第 11 批 #6：「月视图，从周一开始。而不是周日。」
|
||
表头顺序必须与 month_grid_range() 的起算规则一致（那里已改成周一）。 */ ?>
|
||
<?php foreach (['一', '二', '三', '四', '五', '六', '日'] as $wd): ?>
|
||
<div class="cal-wd"><?= e($wd) ?></div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
<div class="cal-grid">
|
||
<?php foreach ($weeks as $wk): ?>
|
||
<?php foreach ($wk as $cell): ?>
|
||
<?php /* 用户第 5 条：点格子里的空白 = 在这天建日程。
|
||
用 data-new-at 把日期带过去，由底部 JS 交给新建表单
|
||
（点了小条本身是"打开那条日程"，由 <a> 自己处理，JS 会排除掉）。 */ ?>
|
||
<div class="cal-cell<?= $cell['in_month'] ? '' : ' is-out' ?><?= $cell['is_today'] ? ' is-today' : '' ?><?= $canNew ? ' rt-writable' : '' ?>"
|
||
data-new-at="<?= e((string)$cell['date']) ?>">
|
||
<div class="cal-dnum"><?= (int)$cell['day'] ?></div>
|
||
<div class="cal-evs">
|
||
<?php $n = 0; foreach ($cell['events'] as $ev): $n++; ?>
|
||
<?php if ($n <= 3): ?>
|
||
<a class="cal-ev<?= empty($ev['all_day']) ? '' : ' is-allday' ?>"
|
||
data-cal="<?= (int)$ev['cal'] ?>"
|
||
style="background: <?= e((string)$ev['color']) ?>;"
|
||
href="<?= e((string)$ev['href']) ?>"
|
||
title="<?= e((string)$ev['title']) ?>">
|
||
<?php if (($ev['time'] ?? '') !== ''): ?><b><?= e((string)$ev['time']) ?></b> <?php endif; ?>
|
||
<?= e((string)$ev['title']) ?>
|
||
</a>
|
||
<?php endif; ?>
|
||
<?php endforeach; ?>
|
||
<?php if (count($cell['events']) > 3): ?>
|
||
<span class="cal-more">+<?= count($cell['events']) - 3 ?> 条</span>
|
||
<?php endif; ?>
|
||
</div>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
</div>
|
||
<?php endif; ?>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
(function () {
|
||
/* ---- 新建日程：按钮开合 + 「点日历空白处」预填开始时间 ----
|
||
⚠️ 上一版的「日历本显隐」JS 已经**整段删掉**：显隐改成服务端处理
|
||
（Calendar::hiddenCalendars，见路由里的说明），前端不再需要它。
|
||
留着会让人以为"改一下勾选就能切换"，但那些勾选框已经不在这儿了。 */
|
||
var btn = document.getElementById('calAddBtn');
|
||
var card = document.getElementById('calAddCard');
|
||
var cancel = document.getElementById('calAddCancel');
|
||
if (btn && card) {
|
||
btn.addEventListener('click', function () {
|
||
card.hidden = !card.hidden;
|
||
if (!card.hidden) { card.scrollIntoView({ block: 'nearest' }); }
|
||
});
|
||
}
|
||
if (cancel && card) { cancel.addEventListener('click', function () { card.hidden = true; }); }
|
||
|
||
/* ---- 用户第 5 条：在日历里点一下 → 弹新建，开始时间 = 点的位置 ----
|
||
月视图：一格 = 一天 → 开始时间用那天 09:00（"当日默认"比 00:00 更像个日程）。
|
||
周/日视图：按鼠标在**那一列里的纵向位置**反算时刻，最接近的半小时 ——
|
||
点在"下午三点那一段"就该得到 15:00，这是"点哪儿建哪儿"的全部意义。 */
|
||
var startField = document.querySelector('.field.ev-dt[data-dt]');
|
||
var startDate = startField ? startField.querySelector('input.dt-date') : null;
|
||
var startHour = startField ? startField.querySelector('select.dt-hour') : null;
|
||
var startMin = startField ? startField.querySelector('select.dt-minute') : null;
|
||
var startSec = startField ? startField.querySelector('select.dt-second') : null;
|
||
|
||
function setStart(dateStr, hh, mm) {
|
||
// ⚠️ 优先走全局接口：它会把原生字段与 Semi 控件**一起**更新。
|
||
// 直接写 startDate.value 的话，Semi 是非受控组件、显示不会跟着变 ——
|
||
// 用户会看到"我点了 15:00，控件里还写着 09:00"（提交的却是 15:00）。
|
||
if (typeof window.fbSetDT === 'function'
|
||
&& window.fbSetDT('starts_at', dateStr + ' ' + (hh || '09') + ':' + (mm || '00') + ':00')) {
|
||
return;
|
||
}
|
||
// 兜底：Semi 还没加载完（或加载失败）→ 原生控件照旧能用
|
||
if (!startDate) return;
|
||
startDate.value = dateStr;
|
||
if (hh !== null && startHour) { startHour.value = hh; }
|
||
if (mm !== null && startMin) { startMin.value = mm; }
|
||
if (startSec) { startSec.value = '00'; }
|
||
}
|
||
|
||
function openNew(dateStr, hh, mm) {
|
||
if (!card) return;
|
||
card.hidden = false;
|
||
setStart(dateStr, hh, mm);
|
||
card.scrollIntoView({ block: 'nearest' });
|
||
// 标题是第一个输入框，直接把光标放过去 —— 点完就能打字
|
||
var t = document.getElementById('ev-title');
|
||
if (t) { t.focus(); }
|
||
}
|
||
|
||
/* 月视图格子 */
|
||
Array.prototype.forEach.call(document.querySelectorAll('.cal-cell[data-new-at]'), function (cell) {
|
||
cell.addEventListener('click', function (ev) {
|
||
// 点在小条上 = 想打开那条日程（<a> 的默认行为），不要抢
|
||
if (ev.target.closest && ev.target.closest('.cal-ev')) { return; }
|
||
if (!<?= $canWrite && $writable ? 'true' : 'false' ?>) { return; }
|
||
openNew(cell.getAttribute('data-new-at'), '09', '00');
|
||
});
|
||
});
|
||
|
||
/* 周/日视图的列：纵向位置 → 时刻。
|
||
列高 1056px = 24 小时（见 .tg-col 的 CSS），所以 1 分钟 = 1056/1440 px。 */
|
||
Array.prototype.forEach.call(document.querySelectorAll('.tg-col[data-new-at]'), function (col) {
|
||
col.addEventListener('click', function (ev) {
|
||
if (ev.target.closest && ev.target.closest('.tg-block')) { return; }
|
||
if (!<?= $canWrite && $writable ? 'true' : 'false' ?>) { return; }
|
||
var box = col.getBoundingClientRect();
|
||
var ratio = (ev.clientY - box.top) / Math.max(1, box.height);
|
||
var mins = Math.max(0, Math.min(24 * 60 - 30, Math.round(ratio * 1440 / 30) * 30));
|
||
var hh = String(Math.floor(mins / 60)).padStart(2, '0');
|
||
var mm = String(mins % 60).padStart(2, '0');
|
||
openNew(col.getAttribute('data-new-at'), hh, mm);
|
||
});
|
||
});
|
||
|
||
/* 从 ?new_at= 进来（比如别处链过来）→ 直接开弹窗并预填 */
|
||
var preset = <?= json_encode($newAt, JSON_UNESCAPED_UNICODE) ?>;
|
||
if (preset) {
|
||
var parts = String(preset).split(/[ T]/);
|
||
if (parts[0]) {
|
||
var hm = (parts[1] || '').split(':');
|
||
openNew(parts[0], hm[0] || '09', hm[1] || '00');
|
||
}
|
||
}
|
||
/* 「全天」勾上藏掉时刻那一段的逻辑在 _event_fields.php 里（两个页面共用一份） */
|
||
})();
|
||
|
||
/* ---- v24 第 14 批 #1：「跳到某一天」—— 图标按钮 + **按钮下方自绘的下拉日历** ----
|
||
原话（两条，都要满足）：
|
||
· 「选择这个日期，不用弹窗，直接把日历选择，弹出在这个按钮下面就可以了」
|
||
· 「我点击上一个月，页面直接跳转，我还没选择日期呢」（严重 bug）
|
||
|
||
🔴 为什么**不用** Semi 的 DatePicker（上一版就是它）：
|
||
Semi 的日历面板渲染在 **body 的 portal** 里（不在我们的下拉容器内），
|
||
而且它把"翻月/翻年"与"选中某天"混在同一个 onChange 回调里 ——
|
||
于是点"上一月"也被当成"选中了这一天"，页面立刻提交跳转。
|
||
第三方控件的这个语义我们改不了；而这个交互又是"翻月不跳、点天才跳"，
|
||
必须 100% 由我们自己定。所以这里自绘：
|
||
· « ‹ 年/月 › » → **只重绘面板**，绝不提交；
|
||
· 点某一天 → 立刻提交跳转（保留当前视图）；
|
||
· 底部「跳到这天」→ 明确的确认入口（键盘/读屏用户也能用）。
|
||
⚠️ jump() 提交时带上当前 view（月的 ym / 周、日的 d），
|
||
由服务端决定该视图下这个日期落在哪一屏 —— 见 index.php 的 calendar 路由。 */
|
||
(function () {
|
||
var form = document.querySelector('.cal-jump');
|
||
var btn = document.getElementById('calJumpBtn');
|
||
var hid = document.getElementById('calJumpD');
|
||
var drop = document.getElementById('calJumpDrop');
|
||
if (!form || !btn || !hid) { return; }
|
||
|
||
var WD = ['一', '二', '三', '四', '五', '六', '日']; // 与月视图一致：周一起
|
||
var curY = 0, curM = 0; // 面板当前显示的年月
|
||
var sel = ''; // 已选日期（'Y-m-d'）
|
||
|
||
function ymd(y, m, d) {
|
||
return y + '-' + String(m).padStart(2, '0') + '-' + String(d).padStart(2, '0');
|
||
}
|
||
function jump(v) {
|
||
if (!v) { return; }
|
||
hid.value = v;
|
||
// 月视图还要带上 ym（服务端按月取数），否则会跳回默认月
|
||
var ym = document.getElementById('calJumpYM');
|
||
if (ym) { ym.value = String(v).slice(0, 7); }
|
||
form.submit();
|
||
}
|
||
function closeDrop() {
|
||
if (!drop) { return; }
|
||
drop.hidden = true;
|
||
btn.setAttribute('aria-expanded', 'false');
|
||
drop.innerHTML = '';
|
||
}
|
||
|
||
/** 画一个月：**只动面板内容**，不做任何跳转 */
|
||
function paint() {
|
||
var head = document.createElement('div');
|
||
head.className = 'cjd-head';
|
||
head.innerHTML =
|
||
'<button type="button" class="cjd-nav" data-step="-12" title="上一年" aria-label="上一年">«</button>' +
|
||
'<button type="button" class="cjd-nav" data-step="-1" title="上一月" aria-label="上一月">‹</button>' +
|
||
'<span class="cjd-title"></span>' +
|
||
'<button type="button" class="cjd-nav" data-step="1" title="下一月" aria-label="下一月">›</button>' +
|
||
'<button type="button" class="cjd-nav" data-step="12" title="下一年" aria-label="下一年">»</button>';
|
||
head.querySelector('.cjd-title').textContent = curY + ' 年 ' + curM + ' 月';
|
||
|
||
var grid = document.createElement('div');
|
||
grid.className = 'cjd-grid';
|
||
for (var w = 0; w < 7; w++) {
|
||
var wd = document.createElement('div');
|
||
wd.className = 'cjd-wd';
|
||
wd.textContent = WD[w];
|
||
grid.appendChild(wd);
|
||
}
|
||
// 起算：本月 1 号是周几（周一=0 … 周日=6），前面补上月尾巴
|
||
var first = new Date(curY, curM - 1, 1);
|
||
var lead = (first.getDay() + 6) % 7;
|
||
var days = new Date(curY, curM, 0).getDate();
|
||
var today = new Date();
|
||
var todayStr = ymd(today.getFullYear(), today.getMonth() + 1, today.getDate());
|
||
var start = new Date(curY, curM - 1, 1 - lead);
|
||
for (var i = 0; i < 42; i++) {
|
||
var dt = new Date(start.getFullYear(), start.getMonth(), start.getDate() + i);
|
||
var s = ymd(dt.getFullYear(), dt.getMonth() + 1, dt.getDate());
|
||
var cell = document.createElement('button');
|
||
cell.type = 'button';
|
||
cell.className = 'cjd-day';
|
||
if (dt.getMonth() + 1 !== curM) { cell.className += ' is-out'; }
|
||
if (s === todayStr) { cell.className += ' is-today'; }
|
||
if (s === sel) { cell.className += ' is-on'; }
|
||
cell.textContent = String(dt.getDate());
|
||
cell.setAttribute('data-date', s);
|
||
grid.appendChild(cell);
|
||
}
|
||
|
||
var foot = document.createElement('div');
|
||
foot.className = 'cjd-foot';
|
||
foot.innerHTML =
|
||
'<span class="cjd-sel small muted"></span>' +
|
||
'<button type="button" class="btn btn-sm cjd-today">今天</button>' +
|
||
'<button type="button" class="btn btn-sm cjd-go">跳到这天</button>';
|
||
foot.querySelector('.cjd-sel').textContent = sel ? ('已选 ' + sel) : '点一天就跳过去';
|
||
|
||
drop.innerHTML = '';
|
||
drop.appendChild(head);
|
||
drop.appendChild(grid);
|
||
drop.appendChild(foot);
|
||
|
||
// 翻月 / 翻年：**只重画**
|
||
// ⚠️ 必须 stopPropagation：paint() 会把面板里的节点换掉，等这次 click 冒泡到
|
||
// document 上的「点外面就关」时，e.target 已经不在 DOM 里了 ——
|
||
// `drop.contains(e.target)` 为假 → 面板当场被关掉（实测：点一下"上一月"，
|
||
// 面板立刻消失，看起来像"按钮没反应"）。
|
||
Array.prototype.forEach.call(drop.querySelectorAll('.cjd-nav'), function (b) {
|
||
b.addEventListener('click', function (e) {
|
||
e.stopPropagation();
|
||
var step = parseInt(b.getAttribute('data-step'), 10);
|
||
var t = new Date(curY, curM - 1 + step, 1);
|
||
curY = t.getFullYear();
|
||
curM = t.getMonth() + 1;
|
||
paint();
|
||
});
|
||
});
|
||
// 点某一天 → 跳转（这是**唯一**会自动提交的地方）
|
||
Array.prototype.forEach.call(drop.querySelectorAll('.cjd-day'), function (b) {
|
||
b.addEventListener('click', function (e) {
|
||
e.stopPropagation();
|
||
sel = b.getAttribute('data-date');
|
||
jump(sel);
|
||
});
|
||
});
|
||
// 「跳到这天」：给不需要/不方便"点了就跳"的场景一个明确入口
|
||
drop.querySelector('.cjd-go').addEventListener('click', function (e) {
|
||
e.stopPropagation(); jump(sel);
|
||
});
|
||
drop.querySelector('.cjd-today').addEventListener('click', function (e) {
|
||
e.stopPropagation();
|
||
var t = new Date();
|
||
sel = ymd(t.getFullYear(), t.getMonth() + 1, t.getDate());
|
||
jump(sel);
|
||
});
|
||
}
|
||
|
||
btn.addEventListener('click', function (e) {
|
||
e.stopPropagation();
|
||
if (!drop) { return; }
|
||
if (!drop.hidden) { closeDrop(); return; }
|
||
var seed = String(hid.value || '').slice(0, 10);
|
||
var d0 = /^\d{4}-\d{2}-\d{2}$/.test(seed) ? new Date(seed + 'T00:00:00') : new Date();
|
||
if (isNaN(d0.getTime())) { d0 = new Date(); }
|
||
curY = d0.getFullYear();
|
||
curM = d0.getMonth() + 1;
|
||
sel = ymd(curY, curM, d0.getDate());
|
||
drop.hidden = false;
|
||
btn.setAttribute('aria-expanded', 'true');
|
||
paint();
|
||
});
|
||
|
||
// 点外面 / Esc 收起（下拉的常规行为）
|
||
document.addEventListener('click', function (e) {
|
||
if (!drop || drop.hidden) { return; }
|
||
if (drop.contains(e.target) || btn.contains(e.target)) { return; }
|
||
closeDrop();
|
||
});
|
||
document.addEventListener('keydown', function (e) {
|
||
if (e.key === 'Escape') { closeDrop(); }
|
||
});
|
||
})();
|
||
</script>
|