Feat/table part1 (#197)

* feat(csv): export data as csv file
* feat(table): toggle fullscreen
* ux: coordinate tooltip open delay
* feat(excelDates): update tests
* refactor: folder structure

client/src/common/components/buttons/ActionButtons.jsx

@@ -7,6 +7,8 @@ import { FiMinusCircle } from '@react-icons/all-files/fi/FiMinusCircle';
 import { FiPlus } from '@react-icons/all-files/fi/FiPlus';
 import PropTypes from 'prop-types';
 
+import { tooltipDelayMid } from '../../../ontimeConfig';
+
 export default function ActionButtons(props) {
   const { showAdd, showDelay, showBlock, actionHandler } = props;
 
@@ -17,7 +19,7 @@ export default function ActionButtons(props) {
 
   return (
     <Menu isLazy lazyBehavior='unmount'>
-      <Tooltip label='Add ...' delay={500}>
+      <Tooltip label='Add ...' delay={tooltipDelayMid}>
         <MenuButton
           as={IconButton}
           aria-label='Options'

client/src/common/components/buttons/PauseIconBtn.jsx

@@ -4,10 +4,12 @@ import { Tooltip } from '@chakra-ui/tooltip';
 import { IoPause } from '@react-icons/all-files/io5/IoPause';
 import PropTypes from 'prop-types';
 
+import { tooltipDelayMid } from '../../../ontimeConfig';
+
 export default function PauseIconBtn(props) {
   const { clickhandler, active, disabled, ...rest } = props;
   return (
-    <Tooltip label='Pause timer' openDelay={500} shouldWrapChildren={disabled}>
+    <Tooltip label='Pause timer' openDelay={tooltipDelayMid} shouldWrapChildren={disabled}>
       <IconButton
         icon={<IoPause size='24px' />}
         colorScheme='orange'

client/src/common/components/buttons/RollIconBtn.jsx

@@ -4,10 +4,12 @@ import { Tooltip } from '@chakra-ui/tooltip';
 import { IoTimeOutline } from '@react-icons/all-files/io5/IoTimeOutline';
 import PropTypes from 'prop-types';
 
+import { tooltipDelayMid } from '../../../ontimeConfig';
+
 export default function RollIconBtn(props) {
   const { clickhandler, active, disabled, ...rest } = props;
   return (
-    <Tooltip label='Roll mode' openDelay={500} shouldWrapChildren={disabled}>
+    <Tooltip label='Roll mode' openDelay={tooltipDelayMid} shouldWrapChildren={disabled}>
       <IconButton
         icon={<IoTimeOutline size='24px' />}
         colorScheme='blue'

client/src/common/components/buttons/StartIconBtn.jsx

@@ -4,10 +4,12 @@ import { Tooltip } from '@chakra-ui/tooltip';
 import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
 import PropTypes from 'prop-types';
 
+import { tooltipDelayMid } from '../../../ontimeConfig';
+
 export default function StartIconBtn(props) {
   const { clickhandler, active, disabled, ...rest } = props;
   return (
-    <Tooltip label='Start timer' openDelay={500} shouldWrapChildren={disabled}>
+    <Tooltip label='Start timer' openDelay={tooltipDelayMid} shouldWrapChildren={disabled}>
       <IconButton
         icon={<IoPlay size='24px' />}
         colorScheme='green'

client/src/common/components/buttons/TooltipActionBtn.jsx

@@ -4,9 +4,9 @@ import { Tooltip } from '@chakra-ui/tooltip';
 import PropTypes from 'prop-types';
 
 export default function TooltipActionBtn(props) {
-  const { clickHandler, icon, color, size='xs', tooltip, ...rest } = props;
+  const { clickHandler, icon, color, size='xs', tooltip, openDelay = 0, ...rest } = props;
   return (
-    <Tooltip label={tooltip}>
+    <Tooltip label={tooltip} openDelay={openDelay}>
       <IconButton
         aria-label={tooltip}
         size={size}
@@ -23,5 +23,6 @@ TooltipActionBtn.propTypes = {
   icon: PropTypes.element,
   color: PropTypes.string,
   size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
-  tooltip: PropTypes.string
+  tooltip: PropTypes.string,
+  openDelay: PropTypes.number
 }

client/src/common/components/buttons/TransportIconBtn.jsx

@@ -3,10 +3,12 @@ import { IconButton } from '@chakra-ui/button';
 import { Tooltip } from '@chakra-ui/tooltip';
 import PropTypes from 'prop-types';
 
+import { tooltipDelayMid } from '../../../ontimeConfig';
+
 export default function TransportIconBtn(props) {
   const { clickHandler, icon, tooltip, disabled, ...rest } = props;
   return (
-    <Tooltip label={tooltip} openDelay={500} shouldWrapChildren={disabled}>
+    <Tooltip label={tooltip} openDelay={tooltipDelayMid} shouldWrapChildren={disabled}>
       <IconButton
         icon={icon}
         colorScheme='white'

client/src/common/components/buttons/UnloadIconBtn.jsx

@@ -4,10 +4,12 @@ import { Tooltip } from '@chakra-ui/tooltip';
 import { IoStop } from '@react-icons/all-files/io5/IoStop';
 import PropTypes from 'prop-types';
 
+import { tooltipDelayMid } from '../../../ontimeConfig';
+
 export default function UnloadIconBtn(props) {
   const { clickHandler, disabled, ...rest } = props;
   return (
-    <Tooltip label='Unload event' openDelay={500} shouldWrapChildren={disabled}>
+    <Tooltip label='Unload event' openDelay={tooltipDelayMid} shouldWrapChildren={disabled}>
       <IconButton
         icon={<IoStop size='22px' />}
         colorScheme='red'

client/src/common/components/nav/NavLogo.jsx

@@ -2,11 +2,14 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { IconButton } from '@chakra-ui/button';
 import { Image } from '@chakra-ui/react';
+import { IoContract } from '@react-icons/all-files/io5/IoContract';
 import { IoExpand } from '@react-icons/all-files/io5/IoExpand';
 import navlogo from 'assets/images/logos/LOGO-72.png';
 import { AnimatePresence, motion } from 'framer-motion';
 import PropTypes from 'prop-types';
 
+import useFullscreen from '../../hooks/useFullscreen';
+
 import navigatorConstants from './navigatorConstants';
 
 import style from './NavLogo.module.scss';
@@ -22,6 +25,7 @@ const navButtonStyle = {
 export default function NavLogo(props) {
   const { isHidden } = props;
   const [showNav, setShowNav] = useState(false);
+  const { isFullScreen, toggleFullScreen } = useFullscreen();
 
   const handleClick = useCallback(() => {
     setShowNav((prev) => !prev);
@@ -37,16 +41,6 @@ export default function NavLogo(props) {
     }
   }, []);
 
-  const toggleFullscreen = useCallback(() => {
-    if (!document.fullscreenElement) {
-      document.documentElement.requestFullscreen();
-    } else {
-      if (document.exitFullscreen) {
-        document.exitFullscreen();
-      }
-    }
-  }, []);
-
   useEffect(() => {
     // attach the event listener
     document.addEventListener('keydown', handleKeyPress);
@@ -83,8 +77,8 @@ export default function NavLogo(props) {
             >
               <IconButton
                 aria-label='Toggle Fullscreen'
-                icon={<IoExpand />}
-                onClick={toggleFullscreen}
+                icon={isFullScreen ? <IoContract /> : <IoExpand />}
+                onClick={toggleFullScreen}
                 {...navButtonStyle}
               />
             </motion.div>
@@ -96,10 +90,7 @@ export default function NavLogo(props) {
               className={style.nav}
             >
               {navigatorConstants.map((route) => (
-                <Link
-                  to={route.url}
-                  key={route.url}
-                  {...tabProps}>
+                <Link to={route.url} key={route.url} {...tabProps}>
                   {route.label}
                 </Link>
               ))}