Warning and danger per event (#677)

* feat: warning and danger per event --------- Co-authored-by: Fabian Posenau <fabian@fphome.de>
2026-08-13 03:13:47 +00:00 · 2023-12-30 20:56:57 +01:00
parent 7b9f64a630
commit 3998b8927d
31 changed files with 290 additions and 203 deletions
@@ -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>
+  );
+}