added tv page, small changes and fix bugs

2025-05-21 14:00:04 +05:00
parent 10ec9a90c7
commit 791a56ca4d
12 changed files with 327 additions and 102 deletions
@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Containers\Widget\UI\WEB\Controllers;
+
+use App\Ship\Controllers\Controller;
+use App\Ship\Requests\Request;
+
+class TvController extends Controller
+{
+    public function index()
+    {
+        return inertia()->render('Client/Tv/Index');
+    }
+}
@@ -0,0 +1,14 @@
+<?php
+
+use App\Containers\Widget\UI\API\Controllers\ClientWidgetAdditionalEducationalProgramController;
+use App\Containers\Widget\UI\API\Controllers\ClientWidgetContactController;
+use App\Containers\Widget\UI\API\Controllers\ClientWidgetEducationalProgramController;
+use App\Containers\Widget\UI\API\Controllers\ClientWidgetFormController;
+use App\Containers\Widget\UI\API\Controllers\ClientWidgetPageController;
+use App\Containers\Widget\UI\API\Controllers\ClientWidgetPageReferenceListController;
+use App\Containers\Widget\UI\API\Controllers\ClientWidgetPostController;
+use App\Containers\Widget\UI\API\Controllers\ClientWidgetSliderController;
+use App\Containers\Widget\UI\WEB\Controllers\TvController;
+use Illuminate\Support\Facades\Route;
+
+Route::get('/tv/', [TvController::class, 'index'])->name('client.tv.post.index');
@@ -21,29 +21,22 @@ class HandleInertiaRequests extends Middleware

    public function share(Request $request): array
    {
-        // Навигация (кешированная)
-        $navigation = Cache::remember('navigation', now()->addHours(1), function () {
-            return NavigationResource::collection(
-                MainSection::with('subSections.pages.section')
-                    ->orderBy('sort', 'asc')
-                    ->get()
-            );
-        });
-
-        // Хлебные крошки (автоматически по текущему URL)
-        $breadcrumbs = app(BreadcrumbService::class)->generateBreadcrumbs();
-
        return [
            ...parent::share($request),
            'auth' => [
                'user' => $request->user() ? $request->user()->only('id', 'name', 'email', 'created_at') : null,
            ],
-            'ziggy' => fn () => [
-                ...(new Ziggy)->toArray(),
-                'location' => $request->url(),
-            ],
-            'navigation' => $navigation,
-            'breadcrumbs' => $breadcrumbs, // Добавляем хлебные крошки
+//            'ziggy' => fn () => [
+//                ...(new Ziggy)->toArray(),
+//                'location' => $request->url(),
+//            ],
+            'ziggy' => function() {
+                return array_merge((new Ziggy())->toArray(), [
+                    'location' => url()->current(),
+                ]);
+            },
+            'navigation' => $this->getNavigation(),
+            'breadcrumbs' => $this->getBreadcrumbs(),
            'urlPrev' => function () {
                if (url()->previous() !== url()->current()) {
                    return url()->previous();
@@ -52,4 +45,20 @@ class HandleInertiaRequests extends Middleware
            },
        ];
    }
+
+    private function getNavigation()
+    {
+        return Cache::remember('navigation', now()->addHours(1), function () {
+            return NavigationResource::collection(
+                MainSection::with('subSections.pages.section')
+                    ->orderBy('sort', 'asc')
+                    ->get()
+            );
+        });
+    }
+
+    private function getBreadcrumbs()
+    {
+        return app(BreadcrumbService::class)->generateBreadcrumbs();
+    }
 }
@@ -20,6 +20,9 @@ class UserCacheService extends AbstractCacheService implements CacheInterface
    public function clearAllCacheByModel(): void
    {
        $this->clearCacheByPrefix(CacheKeys::USER_PREFIX->value.'*');
+        $this->clearCacheByPrefix(CacheKeys::FACULTY_PREFIX->value.'*');
+        $this->clearCacheByPrefix(CacheKeys::DEPARTMENT_PREFIX->value.'*');
+        $this->clearCacheByPrefix(CacheKeys::DIVISION_PREFIX->value.'*');
    }

    public function getCachedData(string $key)
@@ -69,6 +69,11 @@ export default {
 			type: Object,
 		}
  },
+  data() {
+    return {
+      currentPageLoaded: this.posts_pagination.current_page,
+    }
+  },
  computed: {
    hasActiveFilters() {
      return this.filters.category_filter.value || this.filters.tag_filter.value || this.filters.search_filter.value;
@@ -109,10 +114,14 @@ export default {
            <BasicListBadge :filters="filters" />
          </div>
        </div>
-
-
-
-
+        <span class="flex justify-center" v-if="currentPageLoaded > 1">
+          <Link :href="route('client.post.index')" class="flex items-center py-2">
+						<button class="bg-transperant text-sm text-gray-600 cursor-pointer hover:text-gray-900 duration-300 block px-2 leading-[1.6] rounded-md">К началу</button>
+						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[17px] text-gray-600">
+							<path stroke-linecap="round" stroke-linejoin="round" d="M15 11.25l-3-3m0 0l-3 3m3-3v7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+						</svg>
+					</Link>
+        </span>
        <div class="space-y-5 md:space-y-4">
          <div class="space-y-5 md:space-y-4">
            <div>
@@ -22,6 +22,8 @@ export default {
 			favoriteGroups: JSON.parse(localStorage.getItem('favoriteGroups')),
 			showFavorites: false,
 			loading: false,
+      currentPageLoaded: this.schedules_paginator.current_page,
+
    };
 	},
 	components: {
@@ -218,6 +220,16 @@ export default {
 					</div>


+          <span class="flex justify-center mb-4" v-if="currentPageLoaded > 1">
+          <Link :href="route('client.schedule.index')" class="flex items-center py-2">
+						<button class="bg-transperant text-sm text-gray-600 cursor-pointer hover:text-gray-900 duration-300 block px-2 leading-[1.6] rounded-md">К началу</button>
+						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[17px] text-gray-600">
+							<path stroke-linecap="round" stroke-linejoin="round" d="M15 11.25l-3-3m0 0l-3 3m3-3v7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+						</svg>
+					</Link>
+        </span>
+
+
          <div class="mx-auto max-w-2xl hs-accordion-group grid gap-3">
 						<div class="space-y-4">

@@ -0,0 +1,17 @@
+<script>
+import TvSlider from "@/componentss/features/sliders/TvSlider.vue";
+
+export default {
+  name: "Index",
+  components: {
+    TvSlider,
+  },
+  props: {
+  },
+
+};
+</script>
+
+<template>
+  <TvSlider class="bvi-hide" slider-id="velit-quasi-volupta" />
+</template>
@@ -34,19 +34,10 @@
 		<BasicFooter />
 	</div>

-
-
-
-
-
-
-
-
 </template>

 <script>

-
 import {defineComponent} from "vue";
 import MainPageNavBar from "@/Navbars/MainPageNavbar.vue";
 import BasicFooter from "@/footers/BasicFooter.vue";
@@ -74,74 +65,10 @@ export default defineComponent({
 			}[this.status]
 		},
 	},
-
 })

-
 </script>

 <style scoped>

-
-
-
-
-
-@keyframes fade {
-	from {
-		opacity: 0;
-	}
-	to {
-		opacity: 1;
-	}
-}
-
-.fade-enter-active,
-.fade-leave-active {
-	transition: all 0.3s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-	opacity: 0;
-}
-
-@keyframes grow-progress {
-	from { transform: scaleX(0); }
-	to { transform: scaleX(1); }
-}
-
-#progress {
-	height: 2px;
-	background: #26ACB8;
-	z-index: 10000;
-
-	transform-origin: 0 50%;
-	animation: grow-progress auto linear;
-	animation-timeline: scroll();
-}
-
-
-.active {
-	color: blue !important;
-}
-
-.example-initial-animation {
-	animation: initial-animation 2s ease;
-}
-
-@keyframes initial-animation {
-	0% {
-		transform: rotate(0deg);
-	}
-
-	50% {
-		transform: rotate(360deg);
-	}
-
-	100% {
-		transform: rotate(0deg);
-	}
-}
-
 </style>
@@ -0,0 +1,58 @@
+<template>
+  <div v-if="loading" class="relative z-0 min-h-[calc(100vh)] items-center">
+    <div class="group block rounded-xl overflow-hidden animate-pulse min-h-[calc(100vh)] bg-gray-200"></div>
+  </div>
+
+  <transition v-else name="fade">
+    <TvSliderBody :slides="slider.slides" />
+  </transition>
+</template>
+
+<script>
+import axios from "axios";
+import TvSliderBody from "@/componentss/features/sliders/components/TvSliderBody.vue";
+
+export default {
+  name: 'TvSlider',
+  components: {TvSliderBody},
+  props: {
+    sliderId: {
+      type: String,
+      required: true,
+    }
+  },
+  data() {
+    return {
+      loading: true,
+      slider: null,
+    }
+  },
+  methods: {
+    getSlider(id) {
+      axios.get(route('client.widget.slider.show', id))
+          .then(response => {
+            this.slider = response.data;
+            this.loading = false;
+          })
+          .catch(error => {
+            console.error('Ошибка:', error);
+          });
+    },
+  },
+  mounted() {
+    const id = this.sliderId
+    this.getSlider(id)
+  },
+}
+</script>
+
+<style>
+/* Анимация появления */
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from, .fade-leave-to {
+  opacity: 0;
+}
+</style>
@@ -155,11 +155,14 @@ export default {
    this.sortedSlides = this.slides.slice().sort((a, b) => a.sort - b.sort);

    // Передаем данные в Vuex после монтирования компонента
+    if (typeof window !== 'undefined') {
      this.updateLastSlider({
        url: this.$page.props.ziggy.location,
        top: this.$refs.sliderRef.getBoundingClientRect().top,
        bottom: this.$refs.sliderRef.getBoundingClientRect().bottom, // Получаем актуальное значение bottom
      });
+    }
+
    this.startTimer();
  },
  beforeUnmount() {
@@ -0,0 +1,159 @@
+<template>
+  <div class="relative z-0 min-h-screen flex flex-col">
+    <div class="w-full">
+      <div class="flex w-full h-1 bg-gray-200 overflow-hidden" role="progressbar"
+           aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+        <div
+            class="flex flex-col justify-center overflow-hidden bg-primary-light text-xs text-white text-center whitespace-nowrap transition-all duration-500 ease-in-out"
+            :style="{ 'width': `${progressBarStep}%` }"></div>
+      </div>
+    </div>
+
+    <!-- Основной контент, который занимает все доступное пространство -->
+    <div class="flex-1 relative">
+      <!-- Слайды с изображениями -->
+      <a
+          :href="(!slide.settings.link_text) ? slide.link : '#'"
+          v-for="(slide, index) in sortedSlides"
+          :key="index"
+          :style="{ filter: `brightness(${slide.image.shading})` }"
+          class="absolute -z-10 h-full w-full before:absolute before:z-10 before:h-full before:w-full"
+      >
+        <img
+            alt="Thumbnail"
+            loading="eager"
+            decoding="async"
+            data-nimg="fill"
+            class="object-cover transition-opacity duration-1000 absolute inset-0 h-full w-full"
+            sizes="100vw"
+            :src="'/storage/' + slide.image.url"
+            :loading="index === 0 ? 'eager' : 'lazy'"
+            :class="{ 'opacity-1': currentIndex === index, 'opacity-0': currentIndex !== index }"
+        />
+      </a>
+
+      <!-- Текст слайдов с анимацией -->
+      <transition name="fade" mode="out-in">
+        <div :key="currentIndex">
+          <div
+              v-show="currentIndex === index"
+              v-for="(item, index) in sortedSlides"
+              :key="index"
+              class="mx-auto max-w-screen-lg px-5 pt-[150px] pb-0 bvi-no-styles"
+          >
+            <h1
+                v-if="item.title"
+                :class="`text-${item.settings.text_position}`"
+                class="text-brand-primary mb-3 mt-2 text-3xl font-semibold tracking-tight text-white lg:text-5xl lg:leading-tight"
+            >
+              {{ item.title }}
+            </h1>
+            <div v-if="item.content" class="mt-8 space-x-3 text-gray-500 mb-8">
+              <div class="gap-3 md:flex-row md:items-center">
+                <div class="gap-3">
+                  <p :class="`text-${item.settings.text_position}`" class="text-gray-100 text-2xl font-light line-clamp-3">
+                    {{ item.content }}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </transition>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import {mapActions} from "vuex";
+import axios from "axios";
+import {helpers} from "@/mixins/Helpers.js";
+
+export default {
+  mixins: [helpers],
+  name: 'TvSliderBody',
+  props: {
+    slides: {
+      type: Object,
+    }
+  },
+  data() {
+    return {
+      currentIndex: 0,
+      intervalId: null,
+      reloadIntervalId: null,
+      slideDuration: 9000,
+      reloadDuration: 600000, // 10 минут в миллисекундах
+      sortedSlides: null,
+
+    }
+  },
+  computed: {
+    totalSlides() {
+      return this.slides && this.slides ? this.slides.length : 0;
+    },
+    progressBarStep() {
+      const slides = this.totalSlides;
+      const step = 100 / slides;
+      return (this.currentIndex + 1) * step;
+    }
+  },
+  methods: {
+    ...mapActions(['updateLastSlider']),
+    next() {
+      if (this.totalSlides > 0) {
+        this.currentIndex = (this.currentIndex + 1) % this.totalSlides;
+        this.resetTimer();
+      }
+    },
+    prev() {
+      if (this.totalSlides > 0) {
+        this.currentIndex = (this.currentIndex - 1 + this.totalSlides) % this.totalSlides;
+        this.resetTimer();
+      }
+    },
+    startTimer() {
+      this.stopTimer();
+      this.intervalId = setInterval(this.next, this.slideDuration);
+    },
+    stopTimer() {
+      clearInterval(this.intervalId);
+    },
+    resetTimer() {
+      this.stopTimer();
+      this.startTimer();
+    },
+    startReloadTimer() {
+      this.stopReloadTimer();
+      this.reloadIntervalId = setInterval(() => {
+        window.location.reload();
+      }, this.reloadDuration);
+    },
+    stopReloadTimer() {
+      clearInterval(this.reloadIntervalId);
+    },
+  },
+  mounted() {
+    this.sortedSlides = this.slides.slice().sort((a, b) => a.sort - b.sort);
+
+    this.startTimer();
+    this.startReloadTimer();
+  },
+  beforeUnmount() {
+    this.stopTimer();
+    this.stopReloadTimer();
+  },
+}
+</script>
+
+<style>
+/* Стили для изображений слайдов */
+.opacity-1 {
+  opacity: 1;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+</style>
@@ -1,2 +1,2 @@
-<img src="{{ asset('logos/ntspi.svg') }}" alt="Logo" class="h-12">
+<a href="/"><img src="{{ asset('logos/ntspi.svg') }}" alt="Logo" class="h-12"></a>