feat: add yandex-map

0.9.2
Merge branch 'feature/order-view-cost'
2025-03-09 10:55:24 +03:00 · 2025-03-03 19:17:01 +03:00 · 2025-03-03 19:13:49 +03:00 · 2025-03-03 19:07:43 +03:00 · 2025-03-03 19:05:12 +03:00 · 2025-03-02 16:07:13 +03:00
22 changed files with 260 additions and 45 deletions
--- a/bro.config.js
+++ b/bro.config.js
@@ -16,21 +16,27 @@ module.exports = {
    'dry-wash.order.view': '/order/:orderId',
    'dry-wash.arm.master': 'master',
    'dry-wash.arm.order': 'order',
+    'dry-wash.arm.map': 'map',
    'dry-wash.arm': '/arm/*',
  },
  features: {
    'dry-wash': {
      // add your features here in the format [featureName]: { value: string }
-      "order-view-status-polling": {
-        "on": true,
-        "value": "3000",
-        "key": "order-view-status-polling"
+      'order-view-status-polling': {
+        on: true,
+        value: '3000',
+        key: 'order-view-status-polling',
+      },
+      'car-img-upload': {
+        on: true,
+        value: 'true',
+        key: 'car-img-upload',
+      },
+      'order-cost': {
+        on: true,
+        value: '1000',
+        key: 'order-cost',
      },
-      "car-img-upload": {
-        "on": true,
-        "value": "true",
-        "key": "car-img-upload"
-      }
    },
  },
  config: {
--- a/locales/en.json
+++ b/locales/en.json
@@ -111,5 +111,8 @@
  "dry-wash.errorBoundary.title": "Something went wrong",
  "dry-wash.errorBoundary.description": "We are already working on fixing the issue",
  "dry-wash.errorBoundary.button.reload": "Reload Page",
-  "dry-wash.washTime.timeSlot": "{{start}} - {{end}}"
+  "dry-wash.washTime.timeSlot": "{{start}} - {{end}}",
+  "dry-wash.arm.map.title": "Map of orders",
+  "dry-wash.arm.map.carNumber": "Car Number",
+  "dry-wash.arm.map.status": "Status"
 }
--- a/locales/ru.json
+++ b/locales/ru.json
@@ -117,5 +117,8 @@
  "dry-wash.errorBoundary.title": "Что-то пошло не так",
  "dry-wash.errorBoundary.description": "Мы уже работаем над исправлением проблемы",
  "dry-wash.errorBoundary.button.reload": "Перезагрузить страницу",
-  "dry-wash.washTime.timeSlot": "{{start}} - {{end}}"
+  "dry-wash.washTime.timeSlot": "{{start}} - {{end}}",
+  "dry-wash.arm.map.title": " Карта заказов",
+  "dry-wash.arm.map.carNumber": " Номер автомобиля",
+  "dry-wash.arm.map.status": "Статус"
 }
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "dry-wash",
-  "version": "0.9.1",
+  "version": "0.9.2",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "dry-wash",
-      "version": "0.9.1",
+      "version": "0.9.2",
      "license": "ISC",
      "dependencies": {
        "@babel/core": "^7.26.7",
@@ -3610,7 +3610,6 @@
      "version": "1.2.5",
      "resolved": "https://registry.npmjs.org/@pbe/react-yandex-maps/-/react-yandex-maps-1.2.5.tgz",
      "integrity": "sha512-cBojin5e1fPx9XVCAqHQJsCnHGMeBNsP0TrNfpWCrPFfxb30ye+JgcGr2mn767Gbr1d+RufBLRiUcX2kaiAwjQ==",
-      "license": "MIT",
      "dependencies": {
        "@types/yandex-maps": "2.1.29"
      },
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "dry-wash",
-  "version": "0.9.1",
+  "version": "0.9.2",
  "description": "<a id=\"readme-top\"></a>",
  "main": "./src/index.tsx",
  "scripts": {
--- a/src/data/service/utils.ts
+++ b/src/data/service/utils.ts
@@ -3,6 +3,7 @@ import { FetchBaseQueryError } from '@reduxjs/toolkit/query';
 import { BaseResponse } from '../../models/api';

 export const extractBodyFromResponse = <Body>(response: BaseResponse<Body>) => {
+  console.log('response', response);
  if (response.success) {
    return response.body;
  }
--- a/src/data/urls.ts
+++ b/src/data/urls.ts
@@ -33,6 +33,18 @@ export const URLs = {
    url: getNavigationValue('dry-wash.arm.order'),
    isOn: Boolean(getNavigationValue('dry-wash.arm.order')),
  },
+  armMap: {
+    url: getNavigationValue('dry-wash.arm.map'),
+    isOn: Boolean(getNavigationValue('dry-wash.arm.map')),
+    getUrl({ lat, lon, currentDate }) {
+      return (
+        getFullUrls('/arm') +
+        '/' +
+        getNavigationValue('dry-wash.arm.map') +
+        `?lat=${lat}&lon=${lon}&currentDate=${currentDate}`
+      );
+    },
+  },
  armBase: {
    url: getFullUrls(getNavigationValue('dry-wash.arm')),
    isOn: Boolean(getNavigationValue('dry-wash.arm')),
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -42,6 +42,18 @@ const Header = () => {
              {t('master')}
            </Button>
          )}
+
+          {URLs.armMap.isOn && (
+            <Button
+              as={Link}
+              to={URLs.armMap.url}
+              colorScheme={isActive(URLs.armMap.url) ? 'green' : 'blue'}
+              variant={isActive(URLs.armMap.url) ? 'outline' : 'ghost'}
+              data-testid='master-button'
+            >
+              Карта заказов
+            </Button>
+          )}
        </HStack>
      </Flex>
    </Box>
--- a/src/components/LayoutArm/LayoutArm.tsx
+++ b/src/components/LayoutArm/LayoutArm.tsx
@@ -6,6 +6,7 @@ import Orders from '../Orders';
 import Masters from '../Masters';
 import { URLs } from '../../__data__/urls';
 import Header from '../Header';
+import OrdersMap from '../Map';

 const LayoutArm = () => {
  let defaultRedirect = null;
@@ -28,6 +29,9 @@ const LayoutArm = () => {
          {URLs.armMaster.isOn && (
            <Route path={URLs.armMaster.url} element={<Masters />} />
          )}
+          {URLs.armMap.isOn && (
+            <Route path={URLs.armMap.url} element={<OrdersMap />} />
+          )}
        </Routes>
      </Box>
    </Flex>
--- a/src/components/Map/Map.tsx
+++ b/src/components/Map/Map.tsx
@@ -0,0 +1,82 @@
+import React, { useMemo } from 'react';
+import { Box, Flex, Heading, Spinner } from '@chakra-ui/react';
+import { useTranslation } from 'react-i18next';
+import { YMaps, Map, Placemark } from '@pbe/react-yandex-maps';
+import { useLocation } from 'react-router-dom';
+
+import { useGetOrdersQuery } from '../../__data__/service/api';
+import getCoordinates from '../../utils/getCoordinates';
+
+const OrdersMap = () => {
+  const { t } = useTranslation('~', {
+    keyPrefix: 'dry-wash.arm.map',
+  });
+
+  const location = useLocation();
+  const params = new URLSearchParams(location.search);
+  const latFromUrl = parseFloat(params.get('lat') || 55.78);
+  const lonFromUrl = parseFloat(params.get('lon') || 49.12);
+  const currentDate = useMemo(
+    () =>
+      params.get('currentDate')
+        ? new Date(params.get('currentDate'))
+        : new Date(),
+    [],
+  );
+
+  const {
+    data: ordersData,
+    isLoading,
+    isSuccess,
+  } = useGetOrdersQuery({ date: currentDate });
+
+  // Получаем координаты из location
+  const orders = ordersData
+    ?.map((order) => {
+      const coords = getCoordinates(order.location);
+      return coords ? { ...order, ...coords } : null;
+    })
+    .filter(Boolean);
+
+  return (
+    <Box p='8'>
+      <Heading size='lg' mb='5'>
+        {t('title')}
+      </Heading>
+
+      {isLoading && (
+        <Flex justifyContent='center' alignItems='center'>
+          <Spinner size='lg' />
+        </Flex>
+      )}
+
+      {isSuccess && (
+        <YMaps>
+          <Map
+            defaultState={{ center: [latFromUrl, lonFromUrl], zoom: 12 }}
+            width='100%'
+            height='70vh'
+            modules={['geoObject.addon.balloon']}
+          >
+            {orders.map(({ id, lat, lon, carNumber, status }) => (
+              <Placemark
+                key={id}
+                geometry={[lat, lon]}
+                options={{
+                  preset: 'islands#blueAutoIcon',
+                  iconColor: 'blue',
+                  balloonPanelMaxMapArea: 0,
+                }}
+                properties={{
+                  balloonContent: `<strong>${t('carNumber')}</strong> ${carNumber}<br/><strong>${t('status')}</strong> ${status}`,
+                }}
+              />
+            ))}
+          </Map>
+        </YMaps>
+      )}
+    </Box>
+  );
+};
+
+export default OrdersMap;
--- a/src/components/Map/index.ts
+++ b/src/components/Map/index.ts
@@ -0,0 +1 @@
+export { default } from './Map';
--- a/src/components/OrderItem/OrderItem.tsx
+++ b/src/components/OrderItem/OrderItem.tsx
@@ -1,13 +1,15 @@
 import React, { ChangeEvent, useState } from 'react';
-import { Td, Tr, Link, Select } from '@chakra-ui/react';
+import { Td, Tr, Link, Select, Button } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import dayjs from 'dayjs';
 import { ViewIcon } from '@chakra-ui/icons';
+import { Link as LinkRouter } from 'react-router-dom';

 import { getTimeSlot } from '../../lib';
 import { useUpdateOrdersMutation } from '../../__data__/service/api';
 import { OrderArm, Status, statuses } from '../../models/api';
-import PopoverTemplate from '../PopoverTemplate';
+import getCoordinates from '../../utils/getCoordinates';
+import { URLs } from '../../__data__/urls';

 const statusColors: Record<Status, string> = {
  pending: 'yellow.100',
@@ -27,6 +29,7 @@ const OrderItem = ({
  master,
  allMasters,
  id,
+  currentDate,
 }: OrderArm) => {
  const [updateOrders] = useUpdateOrdersMutation();
  const { t } = useTranslation('~', {
@@ -61,6 +64,8 @@ const OrderItem = ({
    (master) => master.id === masterSelectId,
  );

+  const { lat = 55.78, lon = 49.12 } = getCoordinates(location);
+
  return (
    <Tr>
      <Td>{carNumber}</Td>
@@ -99,7 +104,12 @@ const OrderItem = ({
        <Link href='tel:'>{phone}</Link>
      </Td>
      <Td>
-        <PopoverTemplate trigger={<ViewIcon />} description={location} />
+        <Button
+          as={LinkRouter}
+          to={URLs.armMap.getUrl({ lat, lon, currentDate })}
+        >
+          <ViewIcon />
+        </Button>
      </Td>
    </Tr>
  );
--- a/src/components/Orders/Orders.tsx
+++ b/src/components/Orders/Orders.tsx
@@ -112,6 +112,7 @@ const Orders = () => {
                key={index}
                {...order}
                status={order.status as OrderArm['status']}
+                currentDate={currentDate}
              />
            ))}
        </Tbody>
--- a/src/components/PriceCar/PriceCar.tsx
+++ b/src/components/PriceCar/PriceCar.tsx
@@ -0,0 +1,48 @@
+import { Box, Image, Progress, Text } from '@chakra-ui/react';
+import React from 'react';
+import { getFeatures } from '@brojs/cli';
+
+const PRICE_INCREASE_PERCENT_PER_RATING = 10; // 10% за каждый балл
+
+export const PriceCar = ({ image, rating }) => {
+  const BASE_WASH_PRICE: number = Number(
+    getFeatures('dry-wash')['order-cost']?.value || 1000,
+  );
+
+  const calculateWashPrice = (rating: number) => {
+    const priceIncrease =
+      (BASE_WASH_PRICE * PRICE_INCREASE_PERCENT_PER_RATING * rating) / 100;
+    return BASE_WASH_PRICE + priceIncrease;
+  };
+
+  const washPrice = calculateWashPrice(rating);
+  const progressValue = (rating / 10) * 100;
+  return (
+    <Box
+      alignItems='center'
+      gap={5}
+      width='100%'
+      display='flex'
+      flexDirection='column'
+    >
+      <Image
+        maxWidth='600px'
+        objectFit='contain'
+        borderRadius='md'
+        src={image}
+        alt='Car Image'
+      />
+      {rating ? (
+        <Box width='100%' maxW='600px'>
+          <Text>Рейтинг загрязнения машины:</Text>
+          <Progress value={progressValue} size='sm' colorScheme='red' mt={2} />
+          <Text mt={2}>Стоимость мойки: {washPrice.toFixed(2)} руб.</Text>
+        </Box>
+      ) : (
+        <Text>Не удалость определить уровень загрязнения машины</Text>
+      )}
+    </Box>
+  );
+};
+
+export default PriceCar;
--- a/src/components/PriceCar/index.ts
+++ b/src/components/PriceCar/index.ts
@@ -0,0 +1 @@
+export { default } from './PriceCar';
--- a/src/models/api/order.ts
+++ b/src/models/api/order.ts
@@ -56,4 +56,5 @@ export type OrderArm = {
  notes: '';
  allMasters: Master[];
  id: string;
+  currentDate: Date;
 };
--- a/src/models/landing/order.ts
+++ b/src/models/landing/order.ts
@@ -1,29 +1,30 @@
-import { IsoDate } from "../common";
+import { IsoDate } from '../common';

-import { Car, Customer, Washing } from ".";
+import { Car, Customer, Washing } from '.';

 export type Id = string;

-export type Status = 'pending' |
-  'progress' |
-  'working' |
-  'canceled' |
-  'complete';
+export type Status =
+  | 'pending'
+  | 'progress'
+  | 'working'
+  | 'canceled'
+  | 'complete';

 export type Create = {
  customer: {
-    phone: Customer.PhoneNumber,
+    phone: Customer.PhoneNumber;
  };
  car: {
-    number: Car.RegistrationNumber,
-    body: Car.BodyStyle,
-    color: Car.Color,
-  },
+    number: Car.RegistrationNumber;
+    body: Car.BodyStyle;
+    color: Car.Color;
+  };
  washing: {
-    location: Washing.Location
-    begin: Washing.AvailableBeginDateTime,
-    end: Washing.AvailableEndDateTime,
-  }
+    location: Washing.Location;
+    begin: Washing.AvailableBeginDateTime;
+    end: Washing.AvailableEndDateTime;
+  };
 };

 export type Number = string;
@@ -36,10 +37,12 @@ export type View = {
  location: Washing.Location;
  startWashTime: Washing.AvailableBeginDateTime;
  endWashTime: Washing.AvailableEndDateTime;
-  orderNumber: Number,
-  status: Status,
+  orderNumber: Number;
+  status: Status;
  notes: string;
  created: IsoDate;
  updated: IsoDate;
  id: Id;
-};
+  image?: string;
+  imageRating?: string;
+};
--- a/src/pages/order-view/index.tsx
+++ b/src/pages/order-view/index.tsx
@@ -22,6 +22,7 @@ import { landingApi } from '../../__data__/service/landing.api';
 import { isErrorMessage } from '../../models/api';
 import { FEATURE } from '../../__data__/features';
 import { CarImageForm } from '../../components/order-view/car-img';
+import PriceCar from '../../components/PriceCar';

 const Page: FC = () => {
  const { t } = useTranslation('~', {
@@ -70,7 +71,12 @@ const Page: FC = () => {
            <>
              <>
                {isSuccess && (
-                  <VStack p={4} alignItems='flex-start' gap={4} data-testid='order-details'>
+                  <VStack
+                    p={4}
+                    alignItems='flex-start'
+                    gap={4}
+                    data-testid='order-details'
+                  >
                    <OrderDetails
                      orderNumber={order.orderNumber}
                      status={order.status}
@@ -81,9 +87,17 @@ const Page: FC = () => {
                      location={order.location}
                      startWashTime={order.startWashTime}
                      endWashTime={order.endWashTime}
-                      created={order.created}                      
+                      created={order.created}
                    />
-                    {FEATURE.carImageUpload.isOn && <CarImageForm orderId={orderId} />}                    
+                    {FEATURE.carImageUpload.isOn && (
+                      <CarImageForm orderId={orderId} />
+                    )}
+                    {FEATURE.carImageUpload.isOn && order.image && (
+                      <PriceCar
+                        image={order?.image}
+                        rating={order?.imageRating}
+                      />
+                    )}
                  </VStack>
                )}
              </>
--- a/src/utils/getCoordinates.ts
+++ b/src/utils/getCoordinates.ts
@@ -0,0 +1,13 @@
+const getCoordinates = (location: string) => {
+  if (!location) return null;
+
+  const [lat, lon] = location
+    .split(',')
+    .map((coord) => parseFloat(coord.trim()));
+
+  if (isNaN(lat) || isNaN(lon)) return null;
+
+  return { lat, lon };
+};
+
+export default getCoordinates;
--- a/stubs/json/arm-orders/success.json
+++ b/stubs/json/arm-orders/success.json
@@ -21,7 +21,7 @@
      "orderDate": "2024-11-24T07:40:46.366Z",
      "status": "progress",
      "phone": "79001234567",
-      "location": "55.779905316526424,49.12446113769528 Республика Татарстан (Татарстан), Казань, озеро Нижний Кабан",
+      "location": "55.75060416346278,48.746329576898944 Республика Татарстан (Татарстан), Верхнеуслонский район, Иннополис",
      "master": [],
      "notes": ""
    }
--- a/stubs/json/landing-order-view/id1-success-pending.json
+++ b/stubs/json/landing-order-view/id1-success-pending.json
--- a/stubs/json/landing-order-view/id1-success-working.json
+++ b/stubs/json/landing-order-view/id1-success-working.json
@@ -15,4 +15,4 @@
      "updated": "2025-01-19T14:04:02.987Z",
      "id": "id1"
  }
-}
+}
Author	SHA1	Message	Date
ilnaz	fea4a54c83	feat: add yandex-map	2025-03-09 10:55:24 +03:00
ilnaz	9349a41f84	0.9.2	2025-03-03 19:17:01 +03:00
ilnaz	8103fdcb56	Merge branch 'feature/order-view-cost'	2025-03-03 19:13:49 +03:00
Primakov Alexandr Alexandrovich	a59864a3e2	Merge pull request 'feat: change sidebar to header, fix wizard update, delete unnecessary statuses' (#91 ) from fix/arm-orders into main All checks were successful it-academy/dry-wash-pl/pipeline/head This commit looks good Details Reviewed-on: #91	2025-03-03 19:07:43 +03:00
ilnaz	a252301ea0	feat: add guard All checks were successful it-academy/dry-wash-pl/pipeline/pr-main This commit looks good Details	2025-03-03 19:05:12 +03:00
ilnaz	48cdfb92bd	feat: add a car wash cost determination	2025-03-02 16:07:13 +03:00
RustamRu	351420bc62	0.9.1 All checks were successful it-academy/dry-wash-pl/pipeline/head This commit looks good Details	2025-02-23 12:37:44 +03:00
RustamRu	61b042eee6	fix: image input accept, i18n (#88 ) All checks were successful it-academy/dry-wash-pl/pipeline/head This commit looks good Details	2025-02-23 12:37:04 +03:00
RustamRu	ac006267a2	0.9.0 All checks were successful it-academy/dry-wash-pl/pipeline/head This commit looks good Details	2025-02-23 12:11:20 +03:00
RustamRu	63d9d069c0	feat: add car image feature All checks were successful it-academy/dry-wash-pl/pipeline/head This commit looks good Details	2025-02-23 12:08:50 +03:00
Rustam	c83ebf02bc	Merge pull request 'feature/upload-car-image' (#90 ) from feature/upload-car-image into main All checks were successful it-academy/dry-wash-pl/pipeline/head This commit looks good Details Reviewed-on: #90	2025-02-23 12:02:39 +03:00
RustamRu	1968df7bb3	fix: getOrder test (#88 ) All checks were successful it-academy/dry-wash-pl/pipeline/pr-main This commit looks good Details	2025-02-23 11:58:56 +03:00
RustamRu	811e0e3f24	Merge remote-tracking branch 'origin/main' into feature/upload-car-image Some checks failed it-academy/dry-wash-pl/pipeline/pr-main There was a failure building this commit Details	2025-02-23 11:47:04 +03:00
Primakov Alexandr Alexandrovich	a2ffd6f38f	Merge pull request 'fix tests error' (#89 ) from debug into main All checks were successful it-academy/dry-wash-pl/pipeline/head This commit looks good Details Reviewed-on: #89	2025-02-23 11:32:09 +03:00
RustamRu	20017cad3c	feat: upload car img form (#88 ) Some checks failed it-academy/dry-wash-pl/pipeline/head There was a failure building this commit Details it-academy/dry-wash-pl/pipeline/pr-main There was a failure building this commit Details	2025-02-22 19:46:27 +03:00
RustamRu	de54ac6669	feat: api upload car img (#88 )	2025-02-22 18:56:37 +03:00
RustamRu	eda869622e	fix: error body message -> error (#88 )	2025-02-22 18:56:20 +03:00
Primakov Alexandr Alexandrovich	7b3889aa02	run last one All checks were successful it-academy/dry-wash-pl/pipeline/head This commit looks good Details it-academy/dry-wash-pl/pipeline/pr-main This commit looks good Details	2025-02-20 14:15:25 +03:00
Primakov Alexandr Alexandrovich	cee124fca5	other 2 All checks were successful it-academy/dry-wash-pl/pipeline/head This commit looks good Details	2025-02-20 14:10:46 +03:00
Primakov Alexandr Alexandrovich	b77eccc8e8	test: улучшены описания тестов страницы просмотра заказа All checks were successful it-academy/dry-wash-pl/pipeline/head This commit looks good Details - Добавлены более информативные описания тестовых сценариев - Улучшена читаемость тестов за счет детальных названий на русском языке	2025-02-20 14:04:32 +03:00
Primakov Alexandr Alexandrovich	ebfaa7ea8f	orders page All checks were successful it-academy/dry-wash-pl/pipeline/head This commit looks good Details	2025-02-20 14:00:34 +03:00
Primakov Alexandr Alexandrovich	0027cc09b1	masters test All checks were successful it-academy/dry-wash-pl/pipeline/head This commit looks good Details	2025-02-20 13:55:05 +03:00
Primakov Alexandr Alexandrovich	dd612d662c	debug All checks were successful it-academy/dry-wash-pl/pipeline/head This commit looks good Details	2025-02-20 13:44:38 +03:00
Primakov Alexandr Alexandrovich	69251745fa	try fix Some checks failed it-academy/dry-wash-pl/pipeline/head There was a failure building this commit Details	2025-02-20 13:32:39 +03:00
Primakov Alexandr Alexandrovich	253e3b3856	try skip one test Some checks failed it-academy/dry-wash-pl/pipeline/head There was a failure building this commit Details	2025-02-20 13:26:35 +03:00