refactor: restructure settings

refactor: migrate react components
2026-08-19 06:04:05 +00:00 · 2025-07-04 12:13:06 +02:00
parent a8ea1080f3
commit 5600235ba1
93 changed files with 711 additions and 906 deletions
@@ -0,0 +1,102 @@
+import { useMemo } from 'react';
+import { IoTrashBin } from 'react-icons/io5';
+
+import { deleteAllReport } from '../../../../common/api/report';
+import { createBlob, downloadBlob } from '../../../../common/api/utils';
+import Button from '../../../../common/components/buttons/Button';
+import useReport from '../../../../common/hooks-query/useReport';
+import useRundown from '../../../../common/hooks-query/useRundown';
+import { cx } from '../../../../common/utils/styleUtils';
+import { formatTime } from '../../../../common/utils/time';
+import * as Panel from '../../panel-utils/PanelUtils';
+
+import { CombinedReport, getCombinedReport, makeReportCSV } from './reportSettings.utils';
+
+import style from './ReportSettings.module.scss';
+
+export default function ReportSettings() {
+  const { data: reportData } = useReport();
+  const { data } = useRundown();
+
+  const clearReport = async () => await deleteAllReport();
+  const downloadCSV = (combinedReport: CombinedReport[]) => {
+    if (!combinedReport) {
+      return;
+    }
+    const csv = makeReportCSV(combinedReport);
+    const blob = createBlob(csv, 'text/csv;charset=utf-8;');
+    downloadBlob(blob, 'ontime-report.csv');
+  };
+
+  const combinedReport = useMemo(() => {
+    return getCombinedReport(reportData, data.entries, data.order);
+  }, [reportData, data.entries, data.order]);
+
+  return (
+    <Panel.Section>
+      <Panel.Card>
+        <Panel.SubHeader>Report</Panel.SubHeader>
+        <Panel.Divider />
+        <Panel.Section>
+          <Panel.Title>
+            Manage report
+            <Panel.InlineElements>
+              <Button onClick={() => downloadCSV(combinedReport)} disabled={combinedReport.length === 0}>
+                <IoTrashBin />
+                Export CSV
+              </Button>
+              <Button variant='subtle-destructive' onClick={clearReport} disabled={combinedReport.length === 0}>
+                <IoTrashBin />
+                Clear All
+              </Button>
+            </Panel.InlineElements>
+          </Panel.Title>
+        </Panel.Section>
+        <Panel.Section>
+          <Panel.Table>
+            <thead>
+              <tr>
+                <th>#</th>
+                <th>Cue</th>
+                <th>Title</th>
+                <th>Scheduled Start</th>
+                <th>Actual Start</th>
+                <th>Scheduled End</th>
+                <th>Actual End</th>
+              </tr>
+            </thead>
+            <tbody>
+              {combinedReport.length === 0 && (
+                <Panel.TableEmpty label='Reports are generated when running through the show.' />
+              )}
+
+              {combinedReport.map((entry) => {
+                const start = (() => {
+                  if (entry.actualStart === null) return null;
+                  if (entry.actualStart <= entry.scheduledStart) return 'under';
+                  return 'over';
+                })();
+                const end = (() => {
+                  if (entry.actualEnd === null) return null;
+                  if (entry.actualEnd <= entry.scheduledEnd) return 'under';
+                  return 'over';
+                })();
+                return (
+                  <tr key={entry.index}>
+                    <th>{entry.index}</th>
+                    <th>{entry.cue}</th>
+                    <th>{entry.title}</th>
+                    <th className={cx([start && style[start]])}>{formatTime(entry.scheduledStart)}</th>
+                    <th className={cx([start && style[start]])}>{formatTime(entry.actualStart)}</th>
+                    <th className={cx([end && style[end]])}>{formatTime(entry.scheduledEnd)}</th>
+                    <th className={cx([end && style[end]])}>{formatTime(entry.actualEnd)}</th>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </Panel.Table>
+        </Panel.Section>
+      </Panel.Card>
+    </Panel.Section>
+  );
+}