Warning and danger per event (#677)

* feat: warning and danger per event --------- Co-authored-by: Fabian Posenau <fabian@fphome.de>
2026-08-16 04:43:35 +00:00 · 2023-12-30 20:56:57 +01:00
parent 7b9f64a630
commit 3998b8927d
31 changed files with 290 additions and 203 deletions
@@ -4,34 +4,7 @@ $input-font-size: 15px;
 $input-delayed-border-color: #E69056;

 .timeInput {
-  width: fit-content !important;
-
-  .inputLeft {
-    max-width: fit-content;
-  }
-
-  .inputLeft,
-  .inputButton {
-    aspect-ratio: 1;
-  }
-
-  .inputField {
    font-size: $input-font-size;
    letter-spacing: 1px;
-    width: 7.5em;
-    padding: 0 0 0 2.6em;
-  }
-
-  .warn {
-    &::after {
-      content: "*";
-      color: $warning-orange;
-    }
-  }
-
-  &.delayed {
-    .inputField {
-      border: 1px solid $input-delayed-border-color;
-    }
-  }
-}
+    width: 6.5em;
+}
@@ -1,15 +1,12 @@
-import { FocusEvent, KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Button, Input, InputGroup, InputLeftElement, Tooltip } from '@chakra-ui/react';
+import { FocusEvent, KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';
+import { Input } from '@chakra-ui/react';
 import { millisToString } from 'ontime-utils';

-import { tooltipDelayFast } from '../../../../ontimeConfig';
 import { useEmitLog } from '../../../stores/logger';
 import { forgivingStringToMillis } from '../../../utils/dateConfig';
-import { cx } from '../../../utils/styleUtils';
 import { TimeEntryField } from '../../../utils/timesManager';

 import style from './TimeInput.module.scss';
-
 interface TimeInputProps {
  id?: TimeEntryField;
  name: TimeEntryField;
@@ -20,20 +17,7 @@ interface TimeInputProps {
  validationHandler: (entry: TimeEntryField, val: number) => boolean;
  previousEnd?: number;
  warning?: string;
-}
-
-function ButtonInitial(name: TimeEntryField) {
-  if (name === 'timeStart') return 'S';
-  if (name === 'timeEnd') return 'E';
-  if (name === 'durationOverride') return 'D';
-  return '';
-}
-
-function ButtonTooltip(name: TimeEntryField, warning?: string) {
-  if (name === 'timeStart') return `Start${warning ? `: ${warning}` : ''}`;
-  if (name === 'timeEnd') return `End${warning ? `: ${warning}` : ''}`;
-  if (name === 'durationOverride') return `Duration${warning ? `: ${warning}` : ''}`;
-  return '';
+  className?: string;
 }

 export default function TimeInput(props: TimeInputProps) {
@@ -46,7 +30,7 @@ export default function TimeInput(props: TimeInputProps) {
    placeholder,
    validationHandler,
    previousEnd = 0,
-    warning,
+    className = '',
  } = props;
  const { emitError } = useEmitLog();
  const inputRef = useRef<HTMLInputElement | null>(null);
@@ -169,51 +153,25 @@ export default function TimeInput(props: TimeInputProps) {
    resetValue();
  }, [resetValue, time]);

-  const isDelayed = delay !== 0;
-  const inputClasses = cx([style.timeInput, isDelayed ? style.delayed : null]);
-  const buttonClasses = cx([style.inputButton, isDelayed ? style.delayed : null, warning ? style.warn : null]);
-
-  const TooltipLabel = useMemo(() => {
-    return ButtonTooltip(name, warning);
-  }, [name, warning]);
-
-  const ButtonText = useMemo(() => {
-    return ButtonInitial(name);
-  }, [name]);
+  const timeInputClass = className ? className : style.timeInput;

  return (
-    <InputGroup size='sm' className={inputClasses}>
-      <InputLeftElement className={style.inputLeft}>
-        <Tooltip label={TooltipLabel} openDelay={tooltipDelayFast} variant='ontime-ondark'>
-          <Button
-            size='sm'
-            variant='ontime-subtle-white'
-            className={buttonClasses}
-            tabIndex={-1}
-            border={isDelayed ? '1px solid #E69056' : '1px solid transparent'}
-            borderRight='1px solid transparent'
-            borderRadius='2px 0 0 2px'
-          >
-            {ButtonText}
-          </Button>
-        </Tooltip>
-      </InputLeftElement>
-      <Input
-        ref={inputRef}
-        id={id}
-        data-testid={`time-input-${name}`}
-        className={style.inputField}
-        type='text'
-        placeholder={placeholder}
-        variant='ontime-filled'
-        onFocus={handleFocus}
-        onChange={(event) => setValue(event.target.value)}
-        onBlur={onBlurHandler}
-        onKeyDown={onKeyDownHandler}
-        value={value}
-        maxLength={8}
-        autoComplete='off'
-      />
-    </InputGroup>
+    <Input
+      size='sm'
+      ref={inputRef}
+      id={id}
+      data-testid={`time-input-${name}`}
+      className={timeInputClass}
+      type='text'
+      placeholder={placeholder}
+      variant='ontime-filled'
+      onFocus={handleFocus}
+      onChange={(event) => setValue(event.target.value)}
+      onBlur={onBlurHandler}
+      onKeyDown={onKeyDownHandler}
+      value={value}
+      maxLength={8}
+      autoComplete='off'
+    />
  );
 }
@@ -0,0 +1,37 @@
+@use "../../../../theme/v2Styles" as *;
+
+$input-font-size: 15px;
+$input-delayed-border-color: #E69056;
+
+.timeInput {
+  width: fit-content !important;
+
+  .inputLeft {
+    max-width: fit-content;
+  }
+
+  .inputLeft,
+  .inputButton {
+    aspect-ratio: 1;
+  }
+
+  .inputField {
+    font-size: $input-font-size;
+    letter-spacing: 1px;
+    width: 7.5em;
+    padding: 0 0 0 2.6em;
+  }
+
+  .warn {
+    &::after {
+      content: "*";
+      color: $warning-orange;
+    }
+  }
+
+  &.delayed {
+    .inputField {
+      border: 1px solid $input-delayed-border-color;
+    }
+  }
+}
@@ -0,0 +1,97 @@
+import { useMemo } from 'react';
+import { Button, InputGroup, InputLeftElement, Tooltip } from '@chakra-ui/react';
+
+import { tooltipDelayFast } from '../../../../ontimeConfig';
+import { cx } from '../../../utils/styleUtils';
+import { TimeEntryField } from '../../../utils/timesManager';
+
+import TimeInput from './TimeInput';
+
+import style from './TimeInputWithButton.module.scss';
+
+interface TimeInputProps {
+  id?: TimeEntryField;
+  name: TimeEntryField;
+  submitHandler: (field: TimeEntryField, value: number) => void;
+  time?: number;
+  delay?: number;
+  placeholder: string;
+  validationHandler: (entry: TimeEntryField, val: number) => boolean;
+  previousEnd?: number;
+  warning?: string;
+}
+
+function ButtonInitial(name: TimeEntryField) {
+  if (name === 'timeStart') return 'S';
+  if (name === 'timeEnd') return 'E';
+  if (name === 'durationOverride') return 'D';
+  if (name === 'timeWarning') return 'Wa';
+  if (name === 'timeDanger') return 'Da';
+  return '';
+}
+
+function ButtonTooltip(name: TimeEntryField, warning?: string) {
+  if (name === 'timeStart') return `Start${warning ? `: ${warning}` : ''}`;
+  if (name === 'timeEnd') return `End${warning ? `: ${warning}` : ''}`;
+  if (name === 'durationOverride') return `Duration${warning ? `: ${warning}` : ''}`;
+  if (name === 'timeWarning') return `Warning${warning ? `: ${warning}` : ''}`;
+  if (name === 'timeDanger') return `Danger${warning ? `: ${warning}` : ''}`;
+  return '';
+}
+
+export default function TimeInputWithButton(props: TimeInputProps) {
+  const {
+    id,
+    name,
+    submitHandler,
+    time = 0,
+    delay = 0,
+    placeholder,
+    validationHandler,
+    previousEnd = 0,
+    warning,
+  } = props;
+
+  const isDelayed = delay !== 0;
+  const inputClasses = cx([style.timeInput, isDelayed ? style.delayed : null]);
+  const buttonClasses = cx([style.inputButton, isDelayed ? style.delayed : null, warning ? style.warn : null]);
+
+  const TooltipLabel = useMemo(() => {
+    return ButtonTooltip(name, warning);
+  }, [name, warning]);
+
+  const ButtonText = useMemo(() => {
+    return ButtonInitial(name);
+  }, [name]);
+
+  return (
+    <InputGroup size='sm' className={inputClasses}>
+      <InputLeftElement className={style.inputLeft}>
+        <Tooltip label={TooltipLabel} openDelay={tooltipDelayFast} variant='ontime-ondark'>
+          <Button
+            size='sm'
+            variant='ontime-subtle-white'
+            className={buttonClasses}
+            tabIndex={-1}
+            border={isDelayed ? '1px solid #E69056' : '1px solid transparent'}
+            borderRight='1px solid transparent'
+            borderRadius='2px 0 0 2px'
+          >
+            {ButtonText}
+          </Button>
+        </Tooltip>
+      </InputLeftElement>
+      <TimeInput
+        id={id}
+        name={name}
+        submitHandler={submitHandler}
+        time={time}
+        delay={delay}
+        placeholder={placeholder}
+        validationHandler={validationHandler}
+        previousEnd={previousEnd}
+        className={style.inputField}
+      />
+    </InputGroup>
+  );
+}
@@ -6,9 +6,9 @@ interface MultiPartProgressBar {
  now: number | null;
  complete: number;
  normalColor: string;
-  warning: number;
+  warning?: number | null;
  warningColor: string;
-  danger: number;
+  danger?: number | null;
  dangerColor: string;
  hidden?: boolean;
  className?: string;
@@ -19,8 +19,8 @@ export default function MultiPartProgressBar(props: MultiPartProgressBar) {

  const percentComplete = 100 - clamp(100 - (Math.max(now ?? 0, 0) * 100) / complete, 0, 100);

-  const dangerWidth = clamp((danger / complete) * 100, 0, 100);
-  const warningWidth = clamp((warning / complete) * 100, 0, 100);
+  const dangerWidth = danger ? clamp((danger / complete) * 100, 0, 100) : 0;
+  const warningWidth = warning ? clamp((warning / complete) * 100, 0, 100) : 0;

  return (
    <div className={`multiprogress-bar ${hidden ? 'multiprogress-bar--hidden' : ''} ${className}`}>
@@ -15,4 +15,7 @@ export type TimeManagerType = {

  finished: boolean;
  playback: Playback;
+
+  timeWarning: number | null;
+  timeDanger: number | null;
 };
@@ -4,8 +4,6 @@ export const viewsSettingsPlaceholder: ViewSettings = {
  overrideStyles: false,
  normalColor: '#ffffffcc',
  warningColor: '#FFAB33',
-  warningThreshold: 120000,
  dangerColor: '#ED3333',
-  dangerThreshold: 60000,
  endMessage: '',
 };
@@ -17,6 +17,8 @@ export const runtimeStorePlaceholder: RuntimeStore = {
    duration: null,
    timerType: null,
    endAction: null,
+    timeWarning: null,
+    timeDanger: null,
  },
  playback: Playback.Stop,
  timerMessage: {
@@ -31,6 +31,8 @@ describe('cloneEvent()', () => {
      user7: 'user7',
      user8: 'user8',
      user9: 'user9',
+      timeWarning: 120000,
+      timeDanger: 60000,
    } as OntimeEvent;

    const cloned = cloneEvent(original);
@@ -51,5 +53,7 @@ describe('cloneEvent()', () => {
    expect(cloned.colour).toBe(original.colour);
    expect(cloned.type).toBe(SupportedEvent.Event);
    expect(cloned.revision).toBe(0);
+    expect(cloned.timeWarning).toBe(original.timeWarning);
+    expect(cloned.timeDanger).toBe(original.timeDanger);
  });
 });
@@ -28,5 +28,7 @@ export const cloneEvent = (event: OntimeEvent, after?: string): ClonedEvent => {
    colour: event.colour,
    after: after,
    revision: 0,
+    timeWarning: event.timeWarning,
+    timeDanger: event.timeDanger,
  };
 };
@@ -1,4 +1,4 @@
-export type TimeEntryField = 'timeStart' | 'timeEnd' | 'durationOverride';
+export type TimeEntryField = 'timeStart' | 'timeEnd' | 'durationOverride' | 'timeWarning' | 'timeDanger';

 /**
 * @description Checks which field the value relates to