Merge pull request #32 from AplinkosMinisterija/tools_location_fix

Tools location fix
AplinkosMinisterija · Nov 24, 2023 · 1cf1d94 · 1cf1d94
2 parents 2bfdbb7 + 6c25229
commit 1cf1d94
Show file tree

Hide file tree

Showing 30 changed files with 624 additions and 386 deletions.
diff --git a/manifest.js b/manifest.js
@@ -38,4 +38,12 @@ export const manifestForPlugIn = {
     start_url: '/',
     orientation: 'portrait',
   },
+  workbox: {
+    runtimeCaching: [
+      {
+        urlPattern: /\.(png|jpg|jpeg|svg|gif)$/,
+        handler: 'CacheFirst',
+      },
+    ],
+  },
 };
diff --git a/public/ship_crossed_out.svg b/public/ship_crossed_out.svg
diff --git a/src/components/cards/FishingCard.tsx b/src/components/cards/FishingCard.tsx
@@ -5,10 +5,10 @@ const formatDuration = (startDate?: string, endDate?: string) => {
   if (!startDate || !endDate) {
     return '';
   }
-  const durationInMinutes = differenceInMinutes(new Date(endDate), new Date(startDate));
-  const durationInHours = differenceInHours(new Date(endDate), new Date(startDate), {
-    roundingMethod: 'floor',
+  const durationInMinutes = differenceInMinutes(new Date(endDate), new Date(startDate), {
+    roundingMethod: 'ceil',
   });
+  const durationInHours = Math.floor(durationInMinutes / 60);
   if (!durationInHours) {
     return durationInMinutes + 'min.';
   }
@@ -50,7 +50,7 @@ const getWeightString = (fishOnBoat: any, fishOnShore: any) => {
   return weightOnBoat ? `~${weightOnBoat}kg` : '';
 };
 
-const FishingCard = ({ startDate, endDate, fishOnBoat, fishOnShore, onClick }: any) => {
+const FishingCard = ({ startDate, endDate, fishOnBoat, fishOnShore, skipped, onClick }: any) => {
   const month: string = startDate ? format(new Date(startDate), 'M') : '';
   const dayOfMonth = startDate ? format(new Date(startDate), 'd') : '';
   const day = `${Months[Number(month)]} ${dayOfMonth}d.`;
@@ -76,8 +76,8 @@ const FishingCard = ({ startDate, endDate, fishOnBoat, fishOnShore, onClick }: a
         <Circle $active={active} />
         <Line $active={active} />
         <Time>
-          <StyledImage src="/ship.svg" />
-          {formatDuration(startDate, endDate)}
+          <StyledImage src={skipped ? '/ship_crossed_out.svg' : '/ship.svg'} />
+          {!skipped ? formatDuration(startDate, endDate) : ''}
         </Time>
         <Line $active={active} />
         <Circle $active={active} />

diff --git a/src/components/cards/ToolCard.tsx b/src/components/cards/ToolCard.tsx
@@ -1,15 +1,23 @@
 import styled from 'styled-components';
 import Icon, { IconName } from '../other/Icon';
-import { Tool } from '../../utils';
+import { Tool } from '../../utils/types';
+
 interface ToolCardProps {
   tool: Tool;
   onClick: () => void;
 }
 const ToolCard = ({ tool, onClick }: ToolCardProps) => {
+  const isInWater = !!tool.toolsGroup && !tool.toolsGroup.removeEvent;
+  const location = isInWater ? tool.toolsGroup?.buildEvent.location : undefined;
+
+  const isEstuary = location?.name?.includes('baras');
+
   return (
     <Container onClick={onClick}>
       <IconContainer>
-        <StyledIcon name={IconName.home} />
+        {!isInWater && <StyledIcon name={IconName.home} />}
+        {isEstuary && <BarNumber>{location?.name.replace(/[^\d]/g, '')}</BarNumber>}
+        {isInWater && !isEstuary && <StyledIcon name={IconName.tools} />}
       </IconContainer>
       <div>
         <ToolName>{tool.toolType.label}</ToolName>
@@ -51,6 +59,8 @@ const StyledIcon = styled(Icon)`
   //filter: invert(15%) sepia(56%) saturate(5078%) hue-rotate(226deg) brightness(92%) contrast(97%);
 `;
 
+const BarNumber = styled.div``;
+
 const ToolName = styled.div`
   font-size: 2rem;
   font-weight: 600;

diff --git a/src/components/containers/BuildTools.tsx b/src/components/containers/BuildTools.tsx
@@ -11,6 +11,7 @@ import Button from '../buttons/Button';
 import SwitchButton from '../buttons/SwitchButton';
 import { NotFound } from '../other/NotFound';
 import ToolCardSelectable from '../cards/ToolCardSelecetable';
+import { Footer } from '../other/CommonStyles';
 
 const FishingOptions = [
   { label: 'Atskiras įrankis', value: FishingToolsType.SINGLE },
@@ -130,20 +131,6 @@ const PopupContainer = styled.div`
   padding-top: 68px;
 `;
 
-const Footer = styled.div`
-  display: block;
-  position: sticky;
-  bottom: 0;
-  cursor: pointer;
-  padding: 16px 0;
-  text-decoration: none;
-  width: 100%;
-  background-color: white;
-  @media ${device.desktop} {
-    padding: 16px 0 0 0;
-  }
-`;
-
 const StyledButton = styled(Button)`
   width: 100%;
   border-radius: 28px;

diff --git a/src/components/containers/FishingActions.tsx b/src/components/containers/FishingActions.tsx
@@ -24,12 +24,12 @@ import { RootState } from '../../state/store';
 
 interface FishingActionsProps {
   fishing: Fishing;
+  coordinates: any;
 }
-const FishingActions = ({ fishing }: FishingActionsProps) => {
+const FishingActions = ({ fishing, coordinates }: FishingActionsProps) => {
   const queryClient = useQueryClient();
   const [showFinishFishing, setShowFinishFishing] = useState(false);
   const navigate = useNavigate();
-  const coordinates = useSelector((state: RootState) => state.fishing.coordinates);
 
   const { mutateAsync: finishFishing, isLoading: finishFishingLoading } = useMutation(
     api.finishFishing,

diff --git a/src/components/containers/FishingEventDetails.tsx b/src/components/containers/FishingEventDetails.tsx
@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 import { EventTypes, FishingEventLabels, useFishTypes } from '../../utils';
-import DrawMap from '../other/DrawMap';
 import format from 'date-fns/format';
+import React from 'react';
+import PreviewMap from '../other/PreviewMap';
 
 const FishingEventDetails = ({ event }: any) => {
   const { fishTypes } = useFishTypes();
@@ -18,14 +19,14 @@ const FishingEventDetails = ({ event }: any) => {
   );
 
   //TODO: should be converted to wgs
-  const coords = event.geom?.features[0]?.geometry?.coordinates?.join(', ');
+  const coordinates = event.coordinates ? `${event.coordinates.x}, ${event.coordinates.y}` : '-';
 
   return (
     <Container>
       <Title>{FishingEventLabels[event.type as EventTypes]}</Title>
       {tools && <Subtitle>{tools}</Subtitle>}
       <MapContainer>
-        <DrawMap value={event?.geom} height={'150px'} preview={true} />
+        <PreviewMap value={event?.geom} height={'150px'} preview={true} />
       </MapContainer>
       <FishingInfo>
         <FishingInfoCell>
@@ -35,7 +36,7 @@ const FishingEventDetails = ({ event }: any) => {
         <Divider />
         <FishingInfoCell>
           <InfoLabel>Koordinatės</InfoLabel>
-          <div>{coords || '-'}</div>
+          <div>{coordinates}</div>
         </FishingInfoCell>
       </FishingInfo>
       {isweightEvent && (
@@ -96,6 +97,7 @@ const InfoLabel = styled.div`
   font-size: 1.4rem;
   color: ${({ theme }) => theme.colors.text.secondary};
 `;
+
 const FishingInfoCell = styled.div``;
 
 const Divider = styled.div`
@@ -109,6 +111,7 @@ const FistWeightsList = styled.ul`
   margin: 0;
   list-style: none;
 `;
+
 const FishWeightRow = styled.li`
   display: flex;
   justify-content: space-between;

diff --git a/src/pages/CaughtFishesWithTool.tsx → ...mponents/containers/FishingToolWeight.tsx b/src/pages/CaughtFishesWithTool.tsx → ...mponents/containers/FishingToolWeight.tsx
@@ -1,33 +1,34 @@
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { useNavigate, useParams } from 'react-router-dom';
-import LoaderComponent from '../components/other/LoaderComponent';
-import api from '../utils/api';
+import { RootState } from '../../state/store';
 import {
-  useAppSelector,
-  useFishTypes,
-  useGetCurrentRoute,
-  device,
   getBuiltToolInfo,
   handleAlert,
   slugs,
-  useGeolocationWatcher,
   ToolsGroup,
-} from '../utils';
+  useAppSelector,
+  useFishTypes,
+  useGetCurrentRoute,
+} from '../../utils';
+import React, { useEffect, useState } from 'react';
+import api from '../../utils/api';
+import LoaderComponent from '../other/LoaderComponent';
+import FishRow from '../other/FishRow';
+import { Footer } from '../other/CommonStyles';
 import styled from 'styled-components';
-import Button from '../components/buttons/Button';
-import FishRow from '../components/other/FishRow';
-import { useEffect, useState } from 'react';
-import DefaultLayout from '../components/layouts/DefaultLayout';
-
-export const CaughtFishesWithTool = () => {
-  useGeolocationWatcher();
+import Button from '../buttons/Button';
+
+export const CaughtFishesWithTool = ({
+  location,
+  coordinates,
+}: {
+  location: any;
+  coordinates: any;
+}) => {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
   const currentRoute = useGetCurrentRoute();
   const { fishTypes, isLoading } = useFishTypes();
-  const coordinates = useAppSelector((state) => state.fishing.coordinates);
-  const location = useAppSelector((state) => state.fishing.location);
-
   const { toolId } = useParams();
   const [amounts, setAmounts] = useState<{ [key: number]: number }>({});
 
@@ -75,31 +76,29 @@ export const CaughtFishesWithTool = () => {
 
   return (
     <>
-      <DefaultLayout back={currentRoute?.back}>
-        <Container>
-          <Title>{currentRoute?.title}</Title>
-          <Heading>{label}</Heading>
-          <SealNumbers>{sealNr}</SealNumbers>
-          {fishTypes?.map((fishType: any) => (
-            <FishRow
-              key={`fish_type_${fishType.id}`}
-              fish={{ ...fishType, amount: amounts[fishType.id] || 0 }}
-              onChange={(value) => {
-                updateAmounts({ [fishType.id]: value || undefined });
-              }}
-            />
-          ))}
-        </Container>
-        <Footer>
-          <StyledButton
-            loading={weighToolsIsLoading}
-            disabled={weighToolsIsLoading}
-            onClick={handleSubmit}
-          >
-            Saugoti pakeitimus
-          </StyledButton>
-        </Footer>
-      </DefaultLayout>
+      <Container>
+        <Title>{currentRoute?.title}</Title>
+        <Heading>{label}</Heading>
+        <SealNumbers>{sealNr}</SealNumbers>
+        {fishTypes?.map((fishType: any) => (
+          <FishRow
+            key={`fish_type_${fishType.id}`}
+            fish={{ ...fishType, amount: amounts[fishType.id] || 0 }}
+            onChange={(value: any) => {
+              updateAmounts({ [fishType.id]: value || undefined });
+            }}
+          />
+        ))}
+      </Container>
+      <Footer>
+        <StyledButton
+          loading={weighToolsIsLoading}
+          disabled={weighToolsIsLoading}
+          onClick={handleSubmit}
+        >
+          Saugoti pakeitimus
+        </StyledButton>
+      </Footer>
     </>
   );
 };
@@ -113,20 +112,6 @@ const Container = styled.div`
   align-items: center;
 `;
 
-const Footer = styled.div`
-  display: block;
-  position: sticky;
-  bottom: 0;
-  cursor: pointer;
-  padding: 16px 0;
-  text-decoration: none;
-  width: 100%;
-  background-color: white;
-  @media ${device.desktop} {
-    padding: 16px 0 0 0;
-  }
-`;
-
 const StyledButton = styled(Button)`
   width: 100%;
   border-radius: 28px;