failj/ntspi-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added tv page, small changes and fix bugs

Browse Source
This commit is contained in:
F4ilji
2025-05-21 14:00:04 +05:00
parent 10ec9a90c7
commit 791a56ca4d
12 changed files with 327 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Pages/Client/Posts/Index.vue
+13 -4
View File
@@ -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>
resources/js/Pages/Client/Schedules/Index.vue
+13 -1
View File
@@ -22,7 +22,9 @@ export default {
favoriteGroups: JSON.parse(localStorage.getItem('favoriteGroups')),
showFavorites: false,
loading: false,
};
currentPageLoaded: this.schedules_paginator.current_page,
};
},
components: {
BaseBreadcrumbs, BreadcrumbsItem,
@@ -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">
resources/js/Pages/Client/Tv/Index.vue
+17
View File
@@ -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>
resources/js/Pages/Error.vue
-73
View File
@@ -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>
resources/js/componentss/features/sliders/TvSlider.vue
+58
View File
@@ -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>
resources/js/componentss/features/sliders/components/SliderBody.vue
+8 -5
View File
@@ -155,11 +155,14 @@ export default {
this.sortedSlides = this.slides.slice().sort((a, b) => a.sort - b.sort);
// Передаем данные в Vuex после монтирования компонента
this.updateLastSlider({
url: this.$page.props.ziggy.location,
top: this.$refs.sliderRef.getBoundingClientRect().top,
bottom: this.$refs.sliderRef.getBoundingClientRect().bottom, // Получаем актуальное значение bottom
});
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() {
resources/js/componentss/features/sliders/components/TvSliderBody.vue
+159
View File
@@ -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>