From 83fb8cc19f4f739a247830885bf9234e2aa7233f Mon Sep 17 00:00:00 2001
From: Jonathan Gruber <gruberjonathan@gmail.com>
Date: Fri, 12 Apr 2024 10:38:09 +0200
Subject: [PATCH] Toggle calendar bars on click and show 5 instead of 4 steps

---
 package.json                      |  2 +-
 src/components/Match/Calendar.tsx | 39 +++++++++++--------------------
 2 files changed, 15 insertions(+), 26 deletions(-)

diff --git a/package.json b/package.json
index 2c3521f..d459d28 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "daddel",
   "author": "Jonathan Gruber <gruberjonathan@gmail.com>",
-  "version": "0.17.5",
+  "version": "0.17.6",
   "private": true,
   "scripts": {
     "build": "tsc && vite build && vite build -c vite-public.config.mts",
diff --git a/src/components/Match/Calendar.tsx b/src/components/Match/Calendar.tsx
index bde8918..27b9657 100644
--- a/src/components/Match/Calendar.tsx
+++ b/src/components/Match/Calendar.tsx
@@ -25,13 +25,14 @@ const styles = (theme: Theme) =>
       pt: 3.5, // space for legend
       fontSize: theme.typography.pxToRem(14),
     },
-    label: {
+    timeLabel: {
       position: 'absolute',
       top: 0,
       height: '100%',
       borderLeft: 'solid 1px rgba(255, 255, 255, 0.2)',
       paddingLeft: '0.45em',
       lineHeight: 1,
+      color: theme.palette.grey[300],
     },
     bar: {
       position: 'relative',
@@ -59,10 +60,10 @@ interface LabelProps {
   left: number;
 }
 
-const Label: FunctionComponent<LabelProps> = ({ left, children }) => (
+const TimeLabel: FunctionComponent<LabelProps> = ({ left, children }) => (
   <Box
     sx={{
-      ...styles(useTheme()).label,
+      ...styles(useTheme()).timeLabel,
       ...{ left: `${left}%` },
     }}
   >
@@ -82,27 +83,11 @@ const CalendarBar = ({
   time: ReactElement;
 }) => {
   const sx = styles(useTheme());
-  const delay = 400; // ms
-  const [delayHandler, setDelayHandler] = useState<number>();
   const [isToggled, setIsToggled] = useState(false);
 
   return (
     <Box
-      onTouchStart={() => setIsToggled(prev => !prev)}
-      onMouseEnter={() => {
-        if (delayHandler === undefined) {
-          setDelayHandler(
-            window.setTimeout(() => {
-              setIsToggled(true);
-            }, delay),
-          );
-        }
-      }}
-      onMouseLeave={() => {
-        clearTimeout(delayHandler);
-        setDelayHandler(undefined);
-        setIsToggled(false);
-      }}
+      onClick={() => setIsToggled(prev => !prev)}
       sx={{
         ...sx.bar,
         ...sx.textOverflow,
@@ -110,10 +95,12 @@ const CalendarBar = ({
           left: `${left}%`,
           width: `${width}%`,
         },
+        cursor: 'pointer',
+        userSelect: 'none',
       }}
     >
       <TransitionGroup>
-        <Fade key={isToggled ? 'time' : 'name'} timeout={200} appear={false}>
+        <Fade key={isToggled ? 'time' : 'name'} timeout={150} appear={false}>
           {isToggled ? time : name}
         </Fade>
       </TransitionGroup>
@@ -138,7 +125,7 @@ const Calendar: FunctionComponent<Props> = ({ players }) => {
   const timeBounds = calendarTimeBounds(players);
   const totalMinutes = differenceInMinutes(timeBounds.max, timeBounds.min);
 
-  const numLabels = 4;
+  const numLabels = 5;
   const labelStepSize =
     Math.round(totalMinutes / numLabels / FIFTEEN_MINUTES) * FIFTEEN_MINUTES;
 
@@ -155,9 +142,9 @@ const Calendar: FunctionComponent<Props> = ({ players }) => {
         return (
           // More than about 88% left will run outside of container
           left <= 88 && (
-            <Label left={left} key={left}>
+            <TimeLabel left={left} key={left}>
               {label}
-            </Label>
+            </TimeLabel>
           )
         );
       })}
@@ -184,7 +171,9 @@ const Calendar: FunctionComponent<Props> = ({ players }) => {
           >
             <Box component="span">{formatTime(player.from)}</Box>
             <Box component="span" sx={{ ...sx.textOverflow }}>
-              {isOpenEndDate(player.until) ? '∞' : formatTime(player.until)}
+              {isOpenEndDate(player.until)
+                ? 'Open End'
+                : formatTime(player.until)}
             </Box>
           </Box>
         );