운전시 버그 수정

src/Web/wwwroot/js/app.js

@@ -748,12 +748,134 @@ async function histQuery() {
 
 function histReset() {
   HIST_TAG_IDS.forEach(id => { document.getElementById(id).value = ''; });
-  document.getElementById('hf-from').value  = '';
-  document.getElementById('hf-to').value    = '';
+  dtClearField('from');
+  dtClearField('to');
   document.getElementById('hf-limit').value = '500';
   document.getElementById('hist-result-info').classList.add('hidden');
   document.getElementById('hist-table').classList.add('hidden');
 }
 
+/* ── Custom DateTime Picker ──────────────────────────────────── */
+const _dtp = { target: null, year: 0, month: 0,
+               selYear: null, selMonth: null, selDay: null,
+               selHour: 0, selMin: 0 };
+
+const _DTP_DAYS = ['일','월','화','수','목','금','토'];
+
+function dtOpen(target) {
+  _dtp.target = target;
+  const hidden = document.getElementById(`hf-${target}`).value;
+  const d = hidden ? new Date(hidden) : new Date();
+  _dtp.year  = d.getFullYear();
+  _dtp.month = d.getMonth();
+  if (hidden && !isNaN(d)) {
+    _dtp.selYear = d.getFullYear(); _dtp.selMonth = d.getMonth();
+    _dtp.selDay  = d.getDate();
+    _dtp.selHour = d.getHours();    _dtp.selMin   = d.getMinutes();
+  } else {
+    _dtp.selYear = null; _dtp.selMonth = null; _dtp.selDay = null;
+    _dtp.selHour = 0;    _dtp.selMin   = 0;
+  }
+  document.getElementById('dt-hour').value = String(_dtp.selHour).padStart(2,'0');
+  document.getElementById('dt-min').value  = String(_dtp.selMin).padStart(2,'0');
+  dtRenderCal();
+
+  // 팝업 위치 계산
+  const popup   = document.getElementById('dt-popup');
+  const display = document.getElementById(`dtp-${target}-display`);
+  const rect    = display.getBoundingClientRect();
+  popup.classList.remove('hidden');
+  document.getElementById('dt-overlay').classList.remove('hidden');
+
+  // 화면 아래 공간 부족하면 위쪽으로
+  const spaceBelow = window.innerHeight - rect.bottom;
+  if (spaceBelow < popup.offsetHeight + 8) {
+    popup.style.top  = (rect.top - popup.offsetHeight - 4) + 'px';
+  } else {
+    popup.style.top  = (rect.bottom + 4) + 'px';
+  }
+  popup.style.left = Math.min(rect.left, window.innerWidth - 296) + 'px';
+}
+
+function dtRenderCal() {
+  document.getElementById('dt-month-label').textContent =
+    `${_dtp.year}년 ${_dtp.month + 1}월`;
+  const first      = new Date(_dtp.year, _dtp.month, 1).getDay();
+  const daysInMon  = new Date(_dtp.year, _dtp.month + 1, 0).getDate();
+  const daysInPrev = new Date(_dtp.year, _dtp.month,     0).getDate();
+  const today      = new Date();
+  let html = _DTP_DAYS.map(d => `<div class="dt-dow">${d}</div>`).join('');
+
+  for (let i = first - 1; i >= 0; i--)
+    html += `<div class="dt-day other-month">${daysInPrev - i}</div>`;
+
+  for (let d = 1; d <= daysInMon; d++) {
+    let cls = 'dt-day';
+    if (_dtp.year === today.getFullYear() && _dtp.month === today.getMonth() && d === today.getDate())
+      cls += ' today';
+    if (_dtp.selYear === _dtp.year && _dtp.selMonth === _dtp.month && _dtp.selDay === d)
+      cls += ' selected';
+    html += `<div class="${cls}" onclick="dtSelectDay(${d})">${d}</div>`;
+  }
+  const trailing = (first + daysInMon) % 7;
+  for (let d = 1; d <= (trailing ? 7 - trailing : 0); d++)
+    html += `<div class="dt-day other-month">${d}</div>`;
+
+  document.getElementById('dt-cal-grid').innerHTML = html;
+}
+
+function dtSelectDay(day) {
+  _dtp.selYear = _dtp.year; _dtp.selMonth = _dtp.month; _dtp.selDay = day;
+  dtRenderCal();
+}
+function dtPrevMonth() {
+  if (--_dtp.month < 0) { _dtp.month = 11; _dtp.year--; }
+  dtRenderCal();
+}
+function dtNextMonth() {
+  if (++_dtp.month > 11) { _dtp.month = 0; _dtp.year++; }
+  dtRenderCal();
+}
+function dtAdjTime(part, delta) {
+  if (part === 'h') {
+    _dtp.selHour = ((_dtp.selHour + delta) + 24) % 24;
+    document.getElementById('dt-hour').value = String(_dtp.selHour).padStart(2,'0');
+  } else {
+    _dtp.selMin = ((_dtp.selMin + delta) + 60) % 60;
+    document.getElementById('dt-min').value  = String(_dtp.selMin).padStart(2,'0');
+  }
+}
+function dtClampTime(part, el) {
+  const max = part === 'h' ? 23 : 59;
+  let v = parseInt(el.value);
+  if (isNaN(v) || v < 0) v = 0;
+  if (v > max) v = max;
+  el.value = String(v).padStart(2,'0');
+  if (part === 'h') _dtp.selHour = v; else _dtp.selMin = v;
+}
+function dtConfirm() {
+  if (_dtp.selDay === null) { alert('날짜를 선택하세요.'); return; }
+  _dtp.selHour = parseInt(document.getElementById('dt-hour').value) || 0;
+  _dtp.selMin  = parseInt(document.getElementById('dt-min').value)  || 0;
+  const p = n => String(n).padStart(2,'0');
+  const val = `${_dtp.selYear}-${p(_dtp.selMonth+1)}-${p(_dtp.selDay)}T${p(_dtp.selHour)}:${p(_dtp.selMin)}`;
+  document.getElementById(`hf-${_dtp.target}`).value = val;
+  document.getElementById(`dtp-${_dtp.target}-display`).textContent =
+    `${_dtp.selYear}-${p(_dtp.selMonth+1)}-${p(_dtp.selDay)} ${p(_dtp.selHour)}:${p(_dtp.selMin)}`;
+  dtClose();
+}
+function dtClear()  { dtClearField(_dtp.target); dtClose(); }
+function dtClearField(target) {
+  if (!target) return;
+  document.getElementById(`hf-${target}`).value = '';
+  document.getElementById(`dtp-${target}-display`).textContent = '— 선택 안 함 —';
+}
+function dtCancel() { dtClose(); }
+function dtClose()  {
+  document.getElementById('dt-popup').classList.add('hidden');
+  document.getElementById('dt-overlay').classList.add('hidden');
+  _dtp.target = null;
+}
+
 /* ── 초기 실행 ───────────────────────────────────────────────── */
 certStatus();