Report (#1469)

* create report service * write report from runtimeState * use in UI * clear report * update types * clear all from settings menu * rearence rightclik menu * refactor styling * also report roll events * ontime/under time is same colour * refactor reporter * add target to ontime-refetch * remove menu * fectch only on message from server * memo useGetEventReport * refactor * use staleTime * dont add to menu yet * implement review * clear all from menu * fix merge * start end show * combine test for the go button text and action * add report to menu * extract csv utility * report management * unneeded async * small refacort of triggerReportEntry --------- Co-authored-by: Carlos Valente <carlosvalente@pm.me>
2026-08-18 13:44:12 +00:00 · 2025-02-23 17:02:09 +01:00
parent 21877e4bff
commit b6507c27a6
35 changed files with 542 additions and 72 deletions
@@ -183,7 +183,7 @@ $inner-padding: 1rem;
  color: $muted-gray;

  td {
-    padding-block: 1rem;
+    padding-block: 5rem;
  }

  button {
@@ -67,9 +67,17 @@ export function TableEmpty({ label, handleClick }: { label?: string; handleClick
    <tr className={style.empty}>
      <td colSpan={99}>
        <div>{label ?? 'No data yet'}</div>
-        <Button onClick={handleClick} isDisabled={!handleClick} variant='ontime-filled' rightIcon={<IoAdd />} size='sm'>
-          New
-        </Button>
+        {handleClick && (
+          <Button
+            onClick={handleClick}
+            isDisabled={!handleClick}
+            variant='ontime-filled'
+            rightIcon={<IoAdd />}
+            size='sm'
+          >
+            New
+          </Button>
+        )}
      </td>
    </tr>
  );
@@ -3,11 +3,13 @@ import type { PanelBaseProps } from '../../panel-list/PanelList';
 import * as Panel from '../../panel-utils/PanelUtils';

 import CustomFields from './custom-fields/CustomFields';
+import ReportSettings from './ReportSettings';
 import UrlPresetsForm from './UrlPresetsForm';

 export default function FeatureSettingsPanel({ location }: PanelBaseProps) {
  const customFieldsRef = useScrollIntoView<HTMLDivElement>('custom', location);
  const urlPresetsRef = useScrollIntoView<HTMLDivElement>('urlpresets', location);
+  const reportRef = useScrollIntoView<HTMLDivElement>('report', location);

  return (
    <>
@@ -19,6 +21,10 @@ export default function FeatureSettingsPanel({ location }: PanelBaseProps) {
      <div ref={urlPresetsRef}>
        <UrlPresetsForm />
      </div>
+
+      <div ref={reportRef}>
+        <ReportSettings />
+      </div>
    </>
  );
 }
@@ -0,0 +1,7 @@
+th.over {
+  color: $ontime-delay-text;
+}
+
+th.under {
+  color: $playback-ahead;
+}
@@ -0,0 +1,113 @@
+import { useMemo } from 'react';
+import { Button } from '@chakra-ui/react';
+import { IoTrashBin } from '@react-icons/all-files/io5/IoTrashBin';
+
+import { deleteAllReport } from '../../../../common/api/report';
+import { createBlob, downloadBlob } from '../../../../common/api/utils';
+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.rundown, data.order);
+  }, [reportData, data.rundown, data.order]);
+
+  return (
+    <Panel.Section>
+      <Panel.Card>
+        <Panel.SubHeader>Report</Panel.SubHeader>
+        <Panel.Divider />
+        <Panel.Section>
+          <Panel.Title>
+            Manage report
+            <Panel.InlineElements>
+              <Button
+                variant='ontime-subtle'
+                leftIcon={<IoTrashBin />}
+                size='sm'
+                onClick={() => downloadCSV(combinedReport)}
+                isDisabled={combinedReport.length === 0}
+              >
+                Export CSV
+              </Button>
+              <Button
+                variant='ontime-subtle'
+                leftIcon={<IoTrashBin />}
+                size='sm'
+                color='#FA5656'
+                onClick={clearReport}
+                isDisabled={combinedReport.length === 0}
+              >
+                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>
+  );
+}
@@ -0,0 +1,64 @@
+import { isOntimeEvent, MaybeNumber, NormalisedRundown, OntimeReport } from 'ontime-types';
+
+import { makeCSVFromArrayOfArrays } from '../../../../common/utils/csv';
+import { formatTime } from '../../../../common/utils/time';
+
+export type CombinedReport = {
+  index: number;
+  title: string;
+  cue: string;
+  scheduledStart: number;
+  actualStart: MaybeNumber;
+  scheduledEnd: number;
+  actualEnd: MaybeNumber;
+};
+
+/**
+ * Creates a combined report with the rundown data
+ */
+export function getCombinedReport(report: OntimeReport, rundown: NormalisedRundown, order: string[]): CombinedReport[] {
+  if (Object.keys(report).length === 0) return [];
+  if (order.length === 0) return [];
+
+  const combinedReport: CombinedReport[] = [];
+
+  for (const [key, value] of Object.entries(report)) {
+    if (!rundown[key] || !isOntimeEvent(rundown[key])) continue;
+
+    combinedReport.push({
+      index: order.findIndex((id) => id === key),
+      title: rundown[key].title,
+      cue: rundown[key].cue,
+      scheduledStart: rundown[key].timeStart,
+      actualEnd: value.endedAt,
+      scheduledEnd: rundown[key].timeEnd,
+      actualStart: value.startedAt,
+    });
+  }
+
+  return combinedReport;
+}
+
+const csvHeader = ['Index', 'Title', 'Cue', 'Scheduled Start', 'Actual Start', 'Scheduled End', 'Actual End'];
+
+/**
+ * Transforms a CombinedReport into a CSV string
+ */
+export function makeReportCSV(combinedReport: CombinedReport[]) {
+  const csv: string[][] = [];
+  csv.push(csvHeader);
+
+  for (const entry of combinedReport) {
+    csv.push([
+      String(entry.index),
+      entry.title,
+      entry.cue,
+      formatTime(entry.scheduledStart),
+      formatTime(entry.actualStart),
+      formatTime(entry.scheduledEnd),
+      formatTime(entry.actualEnd),
+    ]);
+  }
+
+  return makeCSVFromArrayOfArrays(csv);
+}
@@ -35,6 +35,7 @@ const staticOptions = [
    secondary: [
      { id: 'feature_settings__custom', label: 'Custom fields' },
      { id: 'feature_settings__urlpresets', label: 'URL Presets' },
+      { id: 'feature_settings__report', label: 'Report' },
    ],
  },
  {