From 9c8e6f6308a2911e8c03cf25f9a0312967603518 Mon Sep 17 00:00:00 2001
From: artem <artem@webart-tech.ru>
Date: Thu, 17 Sep 2026 13:59:57 +0300
Subject: [PATCH] =?UTF-8?q?=D0=BF=D0=BE=D0=BF=D1=80=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D1=84=D0=BE=D1=82=D0=BE=D0=B3=D1=80=D0=B0=D1=84=D0=B8?=
 =?UTF-8?q?=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/workouts/components/WorkoutItem.vue | 176 ++++++++++++++++--
 1 file changed, 164 insertions(+), 12 deletions(-)

diff --git a/src/pages/workouts/components/WorkoutItem.vue b/src/pages/workouts/components/WorkoutItem.vue
index 4180813..68ce675 100644
--- a/src/pages/workouts/components/WorkoutItem.vue
+++ b/src/pages/workouts/components/WorkoutItem.vue
@@ -70,7 +70,7 @@
             color: 'gray',
           }"
         />
-        <yandex-map-default-marker
+        <yandex-map-marker
           v-for="photo in photosWithCoords"
           :key="'photo-' + photo.id"
           :settings="{
@@ -78,10 +78,12 @@
               photo.longitude as number,
               photo.latitude as number,
             ] as LngLat,
-            color: 'blue',
             onClick: (_: unknown, __: unknown) => openPhoto(photo),
           }"
-        />
+          position="bottom-center"
+        >
+          <img :src="photo.url" class="map-photo-marker" :alt="photo.id" />
+        </yandex-map-marker>
       </yandex-map>
     </div>
     <div id="workout-short-data">
@@ -199,10 +201,8 @@
     id="workout-photos"
     v-if="workoutItem && (photos.length > 0 || isPrivate)"
   >
-    <div class="workout-photos-header">
-      <h4>Фото</h4>
+    <div class="workout-photos-header" v-if="isPrivate">
       <VaButton
-        v-if="isPrivate"
         preset="secondary"
         color="primary"
         size="small"
@@ -349,13 +349,59 @@
       />
     </VaForm>
   </VaModal>
+  <div
+    v-if="showLightbox && photos.length > 0"
+    class="photo-lightbox"
+    @click.self="showLightbox = false"
+  >
+    <button
+      class="lightbox-close"
+      type="button"
+      aria-label="Закрыть"
+      @click="showLightbox = false"
+    >
+      &times;
+    </button>
+    <button
+      class="lightbox-nav lightbox-prev"
+      type="button"
+      aria-label="Предыдущее"
+      @click.stop="prevPhoto"
+    >
+      <VaIcon name="chevron_left" size="large" />
+    </button>
+    <img
+      :src="photos[lightboxIndex].url"
+      class="lightbox-img"
+      :alt="photos[lightboxIndex].id"
+    />
+    <button
+      class="lightbox-nav lightbox-next"
+      type="button"
+      aria-label="Следующее"
+      @click.stop="nextPhoto"
+    >
+      <VaIcon name="chevron_right" size="large" />
+    </button>
+    <span class="lightbox-counter">
+      {{ lightboxIndex + 1 }} / {{ photos.length }}
+    </span>
+  </div>
 </template>
 <script setup lang="ts">
 import VaZoomOut from "../../../components/icons/VaZoomOut.vue";
 
 import "chartjs-adapter-moment";
 import { AxiosResponse, AxiosInstance, AxiosError } from "axios";
-import { ref, inject, shallowRef, computed, onMounted } from "vue";
+import {
+  ref,
+  inject,
+  shallowRef,
+  computed,
+  onMounted,
+  onBeforeUnmount,
+  watch,
+} from "vue";
 import { useToast, useForm } from "vuestic-ui/web-components";
 import zoomPlugin from "chartjs-plugin-zoom";
 import {
@@ -386,6 +432,7 @@ import {
   YandexMapFeature,
   YandexMapDefaultFeaturesLayer,
   YandexMapDefaultMarker,
+  YandexMapMarker,
   YandexMapListener,
 } from "vue-yandex-maps";
 import {
@@ -1126,9 +1173,44 @@ const photos = ref<Array<WorkoutPhoto>>(workoutItem?.photos ?? []);
 const photosWithCoords = computed(() =>
   photos.value.filter((p) => p.latitude !== null && p.longitude !== null),
 );
+const showLightbox = ref(false);
+const lightboxIndex = ref(0);
 const openPhoto = (photo: WorkoutPhoto) => {
-  window.open(photo.url, "_blank");
+  const idx = photos.value.findIndex((p) => p.id === photo.id);
+  if (idx >= 0) {
+    lightboxIndex.value = idx;
+    showLightbox.value = true;
+  }
 };
+const prevPhoto = () => {
+  lightboxIndex.value =
+    (lightboxIndex.value - 1 + photos.value.length) % photos.value.length;
+};
+const nextPhoto = () => {
+  lightboxIndex.value = (lightboxIndex.value + 1) % photos.value.length;
+};
+const onLightboxKeydown = (event: KeyboardEvent) => {
+  if (!showLightbox.value) {
+    return;
+  }
+  if (event.key === "Escape") {
+    showLightbox.value = false;
+  } else if (event.key === "ArrowLeft") {
+    prevPhoto();
+  } else if (event.key === "ArrowRight") {
+    nextPhoto();
+  }
+};
+watch(showLightbox, (open) => {
+  if (open) {
+    window.addEventListener("keydown", onLightboxKeydown);
+  } else {
+    window.removeEventListener("keydown", onLightboxKeydown);
+  }
+});
+onBeforeUnmount(() => {
+  window.removeEventListener("keydown", onLightboxKeydown);
+});
 const triggerFilePicker = () => {
   fileInput.value?.click();
 };
@@ -1280,13 +1362,10 @@ h3 {
 }
 .workout-photos-header {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
   align-items: center;
   margin-bottom: 10px;
 }
-.workout-photos-header h4 {
-  margin: 0;
-}
 .workout-photos-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
@@ -1365,4 +1444,77 @@ h3 {
   height: 10px;
   border-radius: 2px;
 }
+.map-photo-marker {
+  width: 44px;
+  height: 33px;
+  object-fit: cover;
+  border-radius: 4px;
+  border: 2px solid #fff;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+  cursor: pointer;
+  display: block;
+}
+.photo-lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: rgba(0, 0, 0, 0.9);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.lightbox-img {
+  max-width: 90%;
+  max-height: 85vh;
+  object-fit: contain;
+  border-radius: 4px;
+}
+.lightbox-nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 10;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  border: none;
+  background: rgba(255, 255, 255, 0.15);
+  color: #fff;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.lightbox-nav:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+.lightbox-prev {
+  left: 12px;
+}
+.lightbox-next {
+  right: 12px;
+}
+.lightbox-close {
+  position: absolute;
+  top: 12px;
+  right: 16px;
+  z-index: 10;
+  border: none;
+  background: transparent;
+  color: #fff;
+  font-size: 32px;
+  line-height: 1;
+  cursor: pointer;
+}
+.lightbox-close:hover {
+  color: #ff8a80;
+}
+.lightbox-counter {
+  position: absolute;
+  bottom: 14px;
+  right: 18px;
+  color: #fff;
+  font-size: 14px;
+  z-index: 10;
+}
 </style>