Merge branch 'master' into opening-hours-enhancements

zbycz · Sep 7, 2024 · ae5b84b · ae5b84b
2 parents 6bd8eb9 + c150fff
commit ae5b84b
Show file tree

Hide file tree

Showing 26 changed files with 506 additions and 251 deletions.
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
@@ -87,7 +87,10 @@ const IndexWithProviders = () => {
   // TODO add correct error boundaries
 
   const isClimbingDialogShown = router.query.all?.[2] === 'climbing';
-  const photo = router.query.all?.[3];
+  const photo =
+    router.query.all?.[3] === 'photo' ? router.query.all?.[4] : undefined;
+  const routeNumber =
+    router.query.all?.[3] === 'route' ? router.query.all?.[4] : undefined;
 
   return (
     <>
@@ -97,7 +100,10 @@ const IndexWithProviders = () => {
       {featureShown && isMobileMode && <FeaturePanelInDrawer />}
       {isClimbingDialogShown && (
         <ClimbingContextProvider feature={feature}>
-          <ClimbingCragDialog photo={photo} />
+          <ClimbingCragDialog
+            photo={photo}
+            routeNumber={routeNumber ? parseFloat(routeNumber) : undefined}
+          />
         </ClimbingContextProvider>
       )}
       <HomepagePanel />

diff --git a/src/components/FeaturePanel/Climbing/ClimbingCragDialog.tsx b/src/components/FeaturePanel/Climbing/ClimbingCragDialog.tsx
@@ -1,22 +1,29 @@
-import React, { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import styled from '@emotion/styled';
 import AddIcon from '@mui/icons-material/Add';
-import Router from 'next/router';
+import Router, { useRouter } from 'next/router';
 import { Dialog, DialogContent, DialogActions, Button } from '@mui/material';
 import { ClimbingView } from './ClimbingView';
 import { useClimbingContext } from './contexts/ClimbingContext';
 import { ClimbingCragDialogHeader } from './ClimbingCragDialogHeader';
 import { getOsmappLink } from '../../../services/helpers';
 import { useFeatureContext } from '../../utils/FeatureContext';
 import { useGetHandleSave } from './useGetHandleSave';
+import { getWikimediaCommonsPhotoKeys, removeFilePrefix } from './utils/photo';
 
 const Flex = styled.div`
   display: flex;
   justify-content: space-between;
   width: 100%;
 `;
 
-export const ClimbingCragDialog = ({ photo }: { photo?: string }) => {
+export const ClimbingCragDialog = ({
+  photo,
+  routeNumber,
+}: {
+  photo?: string;
+  routeNumber?: number;
+}) => {
   const contentRef = useRef(null);
 
   const {
@@ -26,11 +33,45 @@ export const ClimbingCragDialog = ({ photo }: { photo?: string }) => {
     isEditMode,
     getMachine,
     showDebugMenu,
+    setRouteSelectedIndex,
+    routes,
+    setPhotoPath,
+    photoPath,
+    photoPaths,
   } = useClimbingContext();
   const { feature } = useFeatureContext();
   const handleSave = useGetHandleSave(setIsEditMode);
-  // const { routes } = useClimbingContext();
   const machine = getMachine();
+  const router = useRouter();
+  const featureLink = getOsmappLink(feature);
+
+  useEffect(() => {
+    const tags = routes[routeNumber]?.feature?.tags || {};
+    const photos = getWikimediaCommonsPhotoKeys(tags);
+
+    if (routeNumber !== undefined && photos?.[0]) {
+      setRouteSelectedIndex(routeNumber);
+      const firstPhoto = tags[photos[0]];
+      const newPhotoPath = removeFilePrefix(firstPhoto);
+      router.replace(`${featureLink}/climbing/photo/${newPhotoPath}`);
+      setPhotoPath(newPhotoPath);
+    } else if (photo) {
+      setPhotoPath(photo);
+    } else if (!photoPath && photoPaths?.length > 0) {
+      setPhotoPath(photoPaths[0]);
+      if (routeNumber !== undefined) setRouteSelectedIndex(routeNumber);
+    }
+  }, [
+    featureLink,
+    photo,
+    photoPath,
+    photoPaths,
+    routeNumber,
+    router,
+    routes,
+    setPhotoPath,
+    setRouteSelectedIndex,
+  ]);
 
   const onScroll = (e) => {
     setScrollOffset({

diff --git a/src/components/FeaturePanel/Climbing/ClimbingCragDialogHeader.tsx b/src/components/FeaturePanel/Climbing/ClimbingCragDialogHeader.tsx
@@ -54,7 +54,7 @@ export const ClimbingCragDialogHeader = ({ onClose }) => {
 
   const onPhotoChange = (photo: string) => {
     Router.push(
-      `${getOsmappLink(feature)}/climbing/${photo}${window.location.hash}`,
+      `${getOsmappLink(feature)}/climbing/photo/${photo}${window.location.hash}`,
     );
 
     setAreRoutesLoading(true);

diff --git a/src/components/FeaturePanel/Climbing/ClimbingView.tsx b/src/components/FeaturePanel/Climbing/ClimbingView.tsx
@@ -192,7 +192,7 @@ export const ClimbingView = ({ photo }: { photo?: string }) => {
     photoPath,
     loadPhotoRelatedData,
     areRoutesLoading,
-    preparePhotosAndSet,
+    preparePhotos,
     photoZoom,
     loadedPhotos,
   } = useClimbingContext();
@@ -252,7 +252,7 @@ export const ClimbingView = ({ photo }: { photo?: string }) => {
   const cragPhotos = getWikimediaCommonsKeys(feature.tags)
     .map((key) => feature.tags[key])
     .map(removeFilePrefix);
-  preparePhotosAndSet(cragPhotos, photo);
+  preparePhotos(cragPhotos);
 
   useEffect(() => {
     const handleResize = () => {

diff --git a/src/components/FeaturePanel/Climbing/Editor/GalleryControls.tsx b/src/components/FeaturePanel/Climbing/Editor/GalleryControls.tsx
@@ -61,7 +61,7 @@ export const GalleryControls = () => {
     photoIndex === photoPaths.length - 1 ? null : photoIndex + 1;
   const onPhotoChange = (photo: string) => {
     Router.push(
-      `${getOsmappLink(feature)}/climbing/${photo}${window.location.hash}`,
+      `${getOsmappLink(feature)}/climbing/photo/${photo}${window.location.hash}`,
     );
 
     setAreRoutesLoading(true);

diff --git a/src/components/FeaturePanel/Climbing/Guide.tsx b/src/components/FeaturePanel/Climbing/Guide.tsx
@@ -6,6 +6,9 @@ import { t } from '../../../services/intl';
 import { useClimbingContext } from './contexts/ClimbingContext';
 import { RouteNumber } from './RouteNumber';
 import { useFeatureContext } from '../../utils/FeatureContext';
+import { isTicked } from '../../../services/ticks';
+import { getWikimediaCommonsPhotoKeys } from './utils/photo';
+import { getShortId } from '../../../services/helpers';
 
 const DrawRouteButton = styled(Button)`
   align-items: baseline;
@@ -17,6 +20,7 @@ export const Guide = () => {
     useClimbingContext();
   const machine = getMachine();
   const path = getCurrentPath();
+  const { feature } = useFeatureContext();
 
   const handleClose = () => {
     setIsGuideClosed(true);
@@ -29,10 +33,11 @@ export const Guide = () => {
     !isInSchema && machine.currentStateName !== 'extendRoute';
 
   const {
-    feature: {
-      osmMeta: { id },
-    },
+    feature: { osmMeta },
   } = useFeatureContext();
+  const photosCount = getWikimediaCommonsPhotoKeys(feature.tags).length;
+  const hasTick = isTicked(getShortId(osmMeta));
+
   return (
     <Snackbar
       open={
@@ -50,11 +55,11 @@ export const Guide = () => {
           size="small"
           onClick={onDrawRouteClick}
         >
-          Zakreslit cestu &nbsp;
+          {t('climbingpanel.draw_route')} &nbsp;
           <RouteNumber
-            isSelected
-            photoInfoForRoute="hasPathOnThisPhoto"
-            osmId={id}
+            hasCircle={photosCount > 0}
+            hasTick={hasTick}
+            hasTooltip={false}
           >
             {routeSelectedIndex + 1}
           </RouteNumber>

diff --git a/src/components/FeaturePanel/Climbing/PanelLabel.tsx b/src/components/FeaturePanel/Climbing/PanelLabel.tsx
@@ -9,9 +9,6 @@ type PanelLabelProps = {
 };
 
 export const Container = styled.div<{ $border: boolean }>`
-  ${({ $border, theme }) =>
-    $border ? `border-bottom: solid 1px ${theme.palette.divider};` : ''}
-
   padding: 20px 10px 4px;
 `;
 

diff --git a/src/components/FeaturePanel/Climbing/RouteDistribution.tsx b/src/components/FeaturePanel/Climbing/RouteDistribution.tsx
@@ -98,52 +98,38 @@ export const RouteDistribution = () => {
   }));
 
   return (
-    <>
-      <PanelLabel
-        addition={
-          <GradeSystemSelect
-            setGradeSystem={(system) => {
-              setUserSetting('climbing.gradeSystem', system);
-            }}
-            selectedGradeSystem={userSettings['climbing.gradeSystem']}
-          />
-        }
-      >
-        Routes distribution
-      </PanelLabel>
-      <Container>
-        <ContentContainer>
-          <Items>
-            {heightsRatios.map((heightRatioItem) => {
-              const color = getDifficultyColor(
-                {
-                  gradeSystem: 'uiaa',
-                  grade: heightRatioItem.grade,
-                },
-                theme,
-              );
-              const numberOfRoutesKey = Object.keys(routeOccurrences).find(
-                (key) => key === heightRatioItem.grade,
-              );
-              const numberOfRoutes = routeOccurrences[numberOfRoutesKey];
-              const isColumnActive = numberOfRoutes > 0;
-              return (
-                <Column key={heightRatioItem.grade}>
-                  {numberOfRoutes > 0 && (
-                    <NumberOfRoutes>{numberOfRoutes}x</NumberOfRoutes>
-                  )}
-                  <Chart $color={color} $ratio={heightRatioItem.ratio} />
-
-                  <DifficultyLevel $color={color} $isActive={isColumnActive}>
-                    {heightRatioItem.grade}
-                  </DifficultyLevel>
-                </Column>
-              );
-            })}
-          </Items>
-        </ContentContainer>
-      </Container>
-    </>
+    <Container>
+      <ContentContainer>
+        <Items>
+          {heightsRatios.map((heightRatioItem) => {
+            const color = getDifficultyColor(
+              {
+                gradeSystem: 'uiaa',
+                grade: heightRatioItem.grade,
+              },
+              theme,
+            );
+            const numberOfRoutesKey = Object.keys(routeOccurrences).find(
+              (key) => key === heightRatioItem.grade,
+            );
+            const numberOfRoutes = routeOccurrences[numberOfRoutesKey];
+            const isColumnActive = numberOfRoutes > 0;
+            return (
+              <Column key={heightRatioItem.grade}>
+                {numberOfRoutes > 0 && (
+                  <NumberOfRoutes>{numberOfRoutes}x</NumberOfRoutes>
+                )}
+                <Chart $color={color} $ratio={heightRatioItem.ratio} />
+
+                <DifficultyLevel $color={color} $isActive={isColumnActive}>
+                  {heightRatioItem.grade}
+                </DifficultyLevel>
+              </Column>
+            );
+          })}
+        </Items>
+      </ContentContainer>
+    </Container>
   );
 };
 

diff --git a/src/components/FeaturePanel/Climbing/RouteList/ExpandedRow.tsx b/src/components/FeaturePanel/Climbing/RouteList/ExpandedRow.tsx
@@ -20,7 +20,7 @@ import { RouteInDifferentPhotos } from './RouteInDifferentPhotos';
 import { Label } from './Label';
 import { getOsmappLink } from '../../../../services/helpers';
 import { MyRouteTicks } from '../Ticks/MyRouteTicks';
-
+import Link from 'next/link';
 const Left = styled.div`
   flex: 1;
 `;
@@ -170,18 +170,20 @@ export const ExpandedRow = ({
               </ListItem>
               <ListItem>
                 {tempRoute.feature ? (
-                  <Button
-                    color="secondary"
-                    size="small"
-                    variant="text"
-                    endIcon={<ArrowForwardIcon />}
+                  <Link
                     href={`${getOsmappLink(tempRoute.feature)}${
                       window.location.hash
                     }`}
-                    component="a"
                   >
-                    Show route detail
-                  </Button>
+                    <Button
+                      color="primary"
+                      size="small"
+                      variant="outlined"
+                      endIcon={<ArrowForwardIcon />}
+                    >
+                      Detail
+                    </Button>
+                  </Link>
                 ) : null}
               </ListItem>
             </List>

diff --git a/src/components/FeaturePanel/Climbing/RouteList/RouteListRow.tsx b/src/components/FeaturePanel/Climbing/RouteList/RouteListRow.tsx
@@ -14,6 +14,8 @@ import { ConvertedRouteDifficultyBadge } from '../ConvertedRouteDifficultyBadge'
 import { getShortId } from '../../../../services/helpers';
 import { getDifficulties } from '../utils/grades/routeGrade';
 import { TickedRouteCheck } from '../Ticks/TickedRouteCheck';
+import { isTicked } from '../../../../services/ticks';
+import { getWikimediaCommonsPhotoKeys } from '../utils/photo';
 
 const DEBOUNCE_TIME = 1000;
 const Container = styled.div`
@@ -37,6 +39,7 @@ const DifficultyCell = styled(Cell)`
 const RouteNumberCell = styled(Cell)`
   color: #999;
   margin-left: 8px;
+  margin-right: 8px;
 `;
 const ExpandIcon = styled(ExpandMoreIcon)<{ $isExpanded: boolean }>`
   transform: rotate(${({ $isExpanded }) => ($isExpanded ? 180 : 0)}deg);
@@ -76,12 +79,10 @@ export const RenderListRow = ({
 
   const {
     getMachine,
-    isRouteSelected,
     isEditMode,
     routeSelectedIndex,
     routeIndexExpanded,
     setRouteIndexExpanded,
-    getPhotoInfoForRoute,
   } = useClimbingContext();
 
   useEffect(() => {
@@ -92,8 +93,6 @@ export const RenderListRow = ({
   const osmId = route.feature?.osmMeta
     ? getShortId(route.feature.osmMeta)
     : null;
-  const isSelected = isRouteSelected(index);
-  const photoInfoForRoute = getPhotoInfoForRoute(index);
 
   const machine = getMachine();
 
@@ -128,16 +127,16 @@ export const RenderListRow = ({
     osmId,
   };
   const routeDifficulties = getDifficulties(tempRoute.feature?.tags);
+  const hasTick = isTicked(osmId);
+  const photosCount = getWikimediaCommonsPhotoKeys(
+    tempRoute.feature?.tags || {},
+  ).length;
 
   return (
     <Container ref={ref}>
       <Row style={{ cursor: 'pointer' }}>
-        <RouteNumberCell $width={30}>
-          <RouteNumber
-            isSelected={isSelected}
-            photoInfoForRoute={photoInfoForRoute}
-            osmId={osmId}
-          >
+        <RouteNumberCell>
+          <RouteNumber hasCircle={photosCount > 0} hasTick={hasTick}>
             {index + 1}
           </RouteNumber>
         </RouteNumberCell>