Merge branch 'feature-lastml' into 'dev'

last ml run + yandex panorama

See merge request spatial/postamates_frontend!10

src/Map/LastMLRun.jsx

@@ -0,0 +1,11 @@
+import { useLastMLRun } from "../api.js";
+
+export function LastMLRun() {
+  const {data: time} = useLastMLRun();
+
+  return (
+    <div className="absolute bottom-[20px] left-[254px] text-xs text-grey z-10 bg-white-background rounded-xl p-2 space-y-3">
+      Последний запуск: {time}
+    </div>
+  );
+}

src/Map/MapComponent.jsx

@@ -21,6 +21,7 @@ import { useLayersVisibility } from "../stores/useLayersVisibility";
 import { LAYER_IDS } from "./Layers/constants";
 import { Header } from "./Header";
 import { icons } from "../icons/icons-config";
+import { LastMLRun } from "./LastMLRun";
 
 export const MapComponent = () => {
   const mapRef = useRef(null);
@@ -168,6 +169,7 @@ export const MapComponent = () => {
               <Layers />
 
               <Legend />
+              <LastMLRun />
               <SignOut />
               <LayersControl />
             </Map>

src/Map/Popup/Popup.jsx

@@ -8,6 +8,7 @@ import { OnApprovalPointPopup } from "./mode-popup/OnApprovalPointPopup";
 import { WorkingPointPopup } from "./mode-popup/WorkingPointPopup";
 import { FeatureProperties } from "./mode-popup/FeatureProperties";
 import { usePopup } from "../../stores/usePopup.js";
+import { PanoramaIcon } from "../../icons/PanoramaIcon";
 
 const SingleFeaturePopup = ({ feature }) => {
   const { mode } = useMode();
@@ -18,21 +19,21 @@ const SingleFeaturePopup = ({ feature }) => {
   const isWorkingPoint = feature.properties.status === STATUSES.working;
 
   if (isRivals) {
-    return <FeatureProperties feature={feature} />;
+    return <FeatureProperties feature={feature}/>;
   }
 
   if (mode === MODES.ON_APPROVAL && !isPendingPoint) {
-    return <OnApprovalPointPopup feature={feature} />;
+    return <OnApprovalPointPopup feature={feature}/>;
   }
 
   if (mode === MODES.WORKING && isWorkingPoint) {
-    return <WorkingPointPopup feature={feature} />;
+    return <WorkingPointPopup feature={feature}/>;
   }
 
   if (mode === MODES.PENDING && isPendingPoint)
-    return <PendingPointPopup feature={feature} />;
+    return <PendingPointPopup feature={feature}/>;
 
-  return <FeatureProperties feature={feature} />;
+  return <FeatureProperties feature={feature}/>;
 };
 
 const MultipleFeaturesPopup = ({ features }) => {
@@ -74,17 +75,29 @@ const MultipleFeaturesPopup = ({ features }) => {
   );
 };
 
+const YandexPanoramaLink = ({ lat, lng }) => {
+  const link = `https://yandex.ru/maps/?panorama[point]=${lng},${lat}`
+  return (
+    <div className="pl-1 flex">
+      <a href={link}>
+        <PanoramaIcon />
+      </a>
+    </div>
+  );
+}
+
 export const MapPopup = ({ features, lat, lng, onClose }) => {
   const getContent = () => {
     if (features.length === 1) {
-      return <SingleFeaturePopup feature={features[0]} />;
+      return <SingleFeaturePopup feature={features[0]}/>;
     }
 
-    return <MultipleFeaturesPopup features={features} />;
+    return <MultipleFeaturesPopup features={features}/>;
   };
 
   return (
     <PopupWrapper lat={lat} lng={lng} onClose={onClose}>
+      <YandexPanoramaLink lat={lat} lng={lng}/>
       {getContent()}
     </PopupWrapper>
   );

src/api.js

@@ -123,3 +123,20 @@ export const useUpdatePostamatId = () => {
     },
   });
 };
+
+export const getLastMLRun = async () => {
+  const { data } = await api.get(
+    `/api/placement_points/last_time_ml_run/`
+  );
+
+  return data?.last_time ? new Date(data?.last_time).toLocaleString('ru-RU') : '';
+};
+
+export const useLastMLRun = () => {
+  return useQuery(
+    ['last_time'],
+    async () => {
+      return await getLastMLRun();
+    },
+  );
+}

src/icons/PanoramaIcon.jsx

@@ -0,0 +1,12 @@
+export const PanoramaIcon = ({ width = 24, height = 24 }) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" className="rounded-md bg-[#cc2222] p-1" width={width} height={height} viewBox="0 0 24 24">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm4.21 14.16c3.53-.61 6.79-1.174 6.79-4.146V7a3 3 0 0 0-2.999-3H15.5l.008.143-.01-.001a3.487 3.487 0 0 1-.914 2.22l.549.182A2 2 0 0 1 16.5 8.441v5.492l.423.073c2.13.37 4.077.708 4.077 2.008 0 1.327-1.993 1.655-4.328 2.04l-.853.143a1 1 0 1 0 .341 1.971l.05-.009zM1 16V7a3 3 0 0 1 3-3h4.5l-.008.143.01-.001c.012.286.058.564.134.828-.66.318-1.136.99-1.136 1.805v7.157l-.488.084C4.907 14.376 3 14.702 3 16c0 1.355 2.146 1.701 4.533 2.087l.775.126.13-1.524a.217.217 0 0 1 .027-.084.196.196 0 0 1 .275-.077l4.66 3.019a.214.214 0 0 1-.022.375L8.28 21.983a.194.194 0 0 1-.099.016.208.208 0 0 1-.18-.23l.134-1.554C4.439 19.635 1 19 1 16zm9.316-9.561A1 1 0 0 0 9 7.387v2.406a.5.5 0 0 0 .146.353l.708.708a.5.5 0 0 1 .146.353v3.984a.5.5 0 0 0 .276.447l.924.462.665-2.992c.024-.11.186-.101.197.012l.36 3.59 1.144.573a.3.3 0 0 0 .434-.268v-4.206a.5.5 0 0 1 .276-.447l.448-.224a.5.5 0 0 0 .276-.447v-2.61a1.5 1.5 0 0 0-1.026-1.423l-3.658-1.22z"
+        fill="#ffffff"
+      />
+    </svg>
+  );
+};