subtrack/internal/web/static/screen.js

/* 大屏：时钟 + 全屏 + 主题 + 日历悬停明细 */
(function () {
  'use strict';

  function pad(n) { return n < 10 ? '0' + n : '' + n; }

  function tick() {
    var d = new Date();
    var clock = document.querySelector('[data-clock]');
    if (clock) clock.textContent = pad(d.getHours()) + ':' + pad(d.getMinutes()) + ':' + pad(d.getSeconds());
    var dateEl = document.querySelector('[data-date]');
    if (dateEl) {
      dateEl.textContent = d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()) +
        ' 周' + '日一二三四五六'.charAt(d.getDay());
    }
  }
  tick();
  setInterval(tick, 1000);

  document.addEventListener('keydown', function (e) {
    if (e.key === 'f' || e.key === 'F') {
      if (document.fullscreenElement) {
        document.exitFullscreen();
      } else if (document.documentElement.requestFullscreen) {
        document.documentElement.requestFullscreen();
      }
    }
  });

  /* ---------- 主题切换 ---------- */
  var THEME_KEY = 'daili_theme';
  function effectiveTheme() {
    var attr = document.documentElement.getAttribute('data-theme');
    if (attr === 'light' || attr === 'dark') return attr;
    return window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
  }
  document.querySelectorAll('[data-theme-toggle]').forEach(function (btn) {
    btn.addEventListener('click', function () {
      var next = effectiveTheme() === 'dark' ? 'light' : 'dark';
      document.documentElement.setAttribute('data-theme', next);
      document.cookie = THEME_KEY + '=' + next + '; path=/; max-age=31536000; SameSite=Lax';
    });
  });

  /* ---------- 日历格子悬停明细 ---------- */
  var root = document.querySelector('.scr');
  var pop = document.getElementById('day-pop');
  if (!root || !pop) return;

  var api = root.getAttribute('data-api') || '/api/screen/day';
  var pkg = root.getAttribute('data-pkg') || '0';
  var cache = {};
  var hideTimer = null;

  function esc(s) {
    return String(s == null ? '' : s).replace(/[&<>"']/g, function (c) {
      return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
    });
  }

  function place(cell) {
    var r = cell.getBoundingClientRect();
    var w = 340, h = Math.min(360, pop.offsetHeight || 240);
    var left = r.right + 8;
    if (left + w > window.innerWidth - 8) left = Math.max(8, r.left - w - 8);
    var top = r.top + r.height / 2 - h / 2;
    top = Math.max(8, Math.min(top, window.innerHeight - h - 8));
    pop.style.left = left + 'px';
    pop.style.top = top + 'px';
  }

  function render(data, cell) {
    if (!data) {
      pop.innerHTML = '<div class="pop-empty">读取失败</div>';
      return;
    }
    var d = new Date(data.date + 'T00:00:00');
    var label = data.date + ' 周' + '日一二三四五六'.charAt(d.getDay());
    var html = '<h4>' + esc(label) + '<small>' + data.total + ' 单 · 已完成 ' + data.done +
      (data.urgent ? ' · <span style="color:var(--danger)">加急 ' + data.urgent + '</span>' : '') + '</small></h4>';
    if (!data.items || !data.items.length) {
      html += '<div class="pop-empty">这天没有排单</div>';
    } else {
      html += '<ul>';
      data.items.forEach(function (it) {
        html += '<li class="' + (it.urgent ? 'urgent ' : '') + (it.done ? 'done' : '') + '">' +
          '<span class="pop-tail">' + esc(it.tail) + '</span>' +
          '<span class="pop-name">' + esc(it.name) + ' · ' + esc(it.pkg) + '</span>' +
          '<span class="pop-rem">' + (it.urgent ? '加急 · ' : '') + esc(it.remain) + '</span>' +
          '</li>';
      });
      html += '</ul>';
      if (data.more > 0) html += '<div class="pop-more">另有 ' + data.more + ' 单未显示</div>';
    }
    pop.innerHTML = html;
    pop.hidden = false;
    place(cell);
  }

  function show(cell) {
    clearTimeout(hideTimer);
    var date = cell.getAttribute('data-date');
    var key = date + '|' + pkg;
    pop.hidden = false;
    pop.innerHTML = '<div class="pop-empty">载入中…</div>';
    place(cell);
    if (cache[key]) {
      render(cache[key], cell);
      return;
    }
    fetch(api + '?date=' + encodeURIComponent(date) + '&pkg=' + encodeURIComponent(pkg), {
      headers: { 'Accept': 'application/json' }
    }).then(function (r) {
      if (!r.ok) throw new Error('bad');
      return r.json();
    }).then(function (data) {
      cache[key] = data;
      render(data, cell);
    }).catch(function () {
      pop.innerHTML = '<div class="pop-empty">读取失败</div>';
    });
  }

  function hideSoon() {
    hideTimer = setTimeout(function () { pop.hidden = true; }, 160);
  }

  document.querySelectorAll('.heat-cell[data-date]').forEach(function (cell) {
    cell.addEventListener('mouseenter', function () { show(cell); });
    cell.addEventListener('mouseleave', hideSoon);
  });
})();