Исправление путей к статическим файлам
- Перенос trips-calendar.css в /static/css/ - Перенос upcoming-trips.js и trip-form-loader.js в /static/js/ - Удаление файлов из неправильной папки /public/
This commit is contained in:
Kirik
@@ -0,0 +1,159 @@
|
||||
/**
|
||||
* Стили для календаря поездок (карточки из upcoming-trips.json)
|
||||
* Заменяет внешний Tockify виджет
|
||||
*/
|
||||
|
||||
.trips-calendar {
|
||||
margin: 20px 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.trips-calendar .trip-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 20px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.trips-calendar .trip-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.trips-calendar .trip-image {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.trips-calendar .trip-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.trips-calendar .trip-card:hover .trip-image img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.trips-calendar .trip-overlay {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: white;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.9em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.trips-calendar .trip-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.trips-calendar .trip-content h3 {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 1.4em;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.trips-calendar .trip-details p {
|
||||
margin: 0 0 16px 0;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
.trips-calendar .trip-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.trips-calendar .trip-meta span {
|
||||
background: #f0f4f8;
|
||||
color: #2d3748;
|
||||
padding: 6px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.85em;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
/* Адаптивность */
|
||||
@media (min-width: 768px) {
|
||||
.trips-calendar {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.trips-calendar .trip-card {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.trips-calendar {
|
||||
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
/* Состояние загрузки */
|
||||
.trips-calendar .loading {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
color: #666;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.trips-calendar .error {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
color: #e53e3e;
|
||||
background: #fed7d7;
|
||||
border-radius: 8px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.trips-calendar .no-trips {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
color: #666;
|
||||
background: #f7fafc;
|
||||
border-radius: 8px;
|
||||
border: 1px dashed #cbd5e0;
|
||||
}
|
||||
|
||||
/* Темная тема (если используется) */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.trips-calendar .trip-card {
|
||||
background: #2d3748;
|
||||
border-color: #4a5568;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.trips-calendar .trip-content h3 {
|
||||
color: #f7fafc;
|
||||
}
|
||||
|
||||
.trips-calendar .trip-details p {
|
||||
color: #a0aec0;
|
||||
}
|
||||
|
||||
.trips-calendar .trip-meta span {
|
||||
background: #4a5568;
|
||||
color: #e2e8f0;
|
||||
border-color: #718096;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
/**
|
||||
* Динамическое заполнение dropdown формы поездками из upcoming-trips.json
|
||||
* Синхронизировано с Telegram Bot управлением
|
||||
*/
|
||||
|
||||
class TripFormLoader {
|
||||
constructor(selectId = 'trip_period', jsonPath = '/data/upcoming-trips.json') {
|
||||
this.selectId = selectId;
|
||||
this.jsonPath = jsonPath;
|
||||
}
|
||||
|
||||
async loadTripsData() {
|
||||
try {
|
||||
const response = await fetch(this.jsonPath);
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error('Ошибка загрузки данных поездок для формы:', error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async populateTripsDropdown() {
|
||||
console.log(`🔍 Ищем dropdown с ID: "${this.selectId}"`);
|
||||
const select = document.getElementById(this.selectId);
|
||||
if (!select) {
|
||||
console.error(`❌ Dropdown с ID "${this.selectId}" не найден`);
|
||||
console.log('📋 Доступные элементы с ID:', Array.from(document.querySelectorAll('[id]')).map(el => el.id));
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(`✅ Dropdown найден, загружаем данные из: ${this.jsonPath}`);
|
||||
const data = await this.loadTripsData();
|
||||
if (!data || !data.trips) {
|
||||
console.error('❌ Не удалось загрузить данные поездок');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(`📊 Данные загружены: ${data.trips.length} поездок всего`);
|
||||
|
||||
// Фильтруем только активные поездки и сортируем по порядку
|
||||
const activeTrips = data.trips
|
||||
.filter(trip => trip.active === true)
|
||||
.sort((a, b) => (a.order || 0) - (b.order || 0));
|
||||
|
||||
// Очищаем существующие опции (кроме первой пустой)
|
||||
const firstOption = select.querySelector('option[value=""]');
|
||||
select.innerHTML = '';
|
||||
|
||||
// Возвращаем первую пустую опцию
|
||||
if (firstOption) {
|
||||
select.appendChild(firstOption);
|
||||
} else {
|
||||
const emptyOption = document.createElement('option');
|
||||
emptyOption.value = '';
|
||||
emptyOption.textContent = '';
|
||||
select.appendChild(emptyOption);
|
||||
}
|
||||
|
||||
// Добавляем активные поездки
|
||||
activeTrips.forEach(trip => {
|
||||
const option = document.createElement('option');
|
||||
option.value = trip.title;
|
||||
option.textContent = trip.title;
|
||||
select.appendChild(option);
|
||||
});
|
||||
|
||||
// Добавляем статичную опцию "Свой вариант без БВС"
|
||||
const customOption = document.createElement('option');
|
||||
customOption.value = 'Свой вариант без БВС';
|
||||
customOption.textContent = 'Свой вариант без БВС';
|
||||
select.appendChild(customOption);
|
||||
|
||||
console.log(`✅ Dropdown формы заполнен: ${activeTrips.length} активных поездок`);
|
||||
}
|
||||
|
||||
// Метод для обновления (можно вызывать для перезагрузки)
|
||||
async refresh() {
|
||||
await this.populateTripsDropdown();
|
||||
}
|
||||
}
|
||||
|
||||
// Глобальная переменная для доступа к загрузчику
|
||||
let tripFormLoader;
|
||||
|
||||
// Инициализация при загрузке DOM
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Проверяем, есть ли на странице dropdown для поездок
|
||||
const tripSelect = document.getElementById('trip_period');
|
||||
if (tripSelect) {
|
||||
tripFormLoader = new TripFormLoader();
|
||||
tripFormLoader.populateTripsDropdown();
|
||||
|
||||
console.log('🗓️ Загрузчик поездок для формы инициализирован');
|
||||
}
|
||||
});
|
||||
|
||||
// Функция для обновления dropdown (можно вызывать извне)
|
||||
function refreshTripFormDropdown() {
|
||||
if (tripFormLoader) {
|
||||
tripFormLoader.refresh();
|
||||
}
|
||||
}
|
||||
|
||||
// Экспорт для использования в других скриптах
|
||||
if (typeof module !== 'undefined' && module.exports) {
|
||||
module.exports = TripFormLoader;
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
/**
|
||||
* Динамическая загрузка карточек предстоящих поездок
|
||||
* Загружает данные из JSON файла и генерирует HTML карточки
|
||||
*/
|
||||
|
||||
class UpcomingTripsLoader {
|
||||
constructor(containerId = 'trips-grid', jsonPath = '/data/upcoming-trips.json') {
|
||||
this.containerId = containerId;
|
||||
this.jsonPath = jsonPath;
|
||||
this.tripsData = null;
|
||||
}
|
||||
|
||||
async loadTripsData() {
|
||||
try {
|
||||
const response = await fetch(this.jsonPath);
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
this.tripsData = await response.json();
|
||||
return this.tripsData;
|
||||
} catch (error) {
|
||||
console.error('Ошибка загрузки данных поездок:', error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
generateTripCard(trip) {
|
||||
const metaHtml = trip.meta ? trip.meta.map(meta =>
|
||||
`<span>${meta}</span>`
|
||||
).join('') : '';
|
||||
|
||||
return `
|
||||
<div class="trip-card" data-value="${trip.title}">
|
||||
<div class="trip-image">
|
||||
<img src="${trip.image}" alt="${trip.title}" loading="lazy">
|
||||
<div class="trip-overlay">
|
||||
<span class="trip-period">${trip.period}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trip-content">
|
||||
<h3>${trip.title}</h3>
|
||||
<div class="trip-details">
|
||||
<p>${trip.description}</p>
|
||||
<div class="trip-meta">
|
||||
${metaHtml}
|
||||
</div>
|
||||
</div>
|
||||
<!-- Кнопка выбора поездки убрана - dropdown заполняется автоматически -->
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
async renderTrips() {
|
||||
const container = document.getElementById(this.containerId);
|
||||
if (!container) {
|
||||
console.error(`Контейнер с ID "${this.containerId}" не найден`);
|
||||
return;
|
||||
}
|
||||
|
||||
// Показываем индикатор загрузки
|
||||
container.innerHTML = '<div class="loading">Загрузка поездок...</div>';
|
||||
|
||||
const data = await this.loadTripsData();
|
||||
if (!data || !data.trips) {
|
||||
container.innerHTML = '<div class="error">Ошибка загрузки данных поездок</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
// Фильтруем только активные поездки и сортируем по порядку
|
||||
const activeTrips = data.trips
|
||||
.filter(trip => trip.active === true)
|
||||
.sort((a, b) => (a.order || 0) - (b.order || 0));
|
||||
|
||||
if (activeTrips.length === 0) {
|
||||
container.innerHTML = '<div class="no-trips">Нет активных поездок</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
// Генерируем HTML для всех активных поездок
|
||||
const tripsHtml = activeTrips.map(trip => this.generateTripCard(trip)).join('');
|
||||
container.innerHTML = tripsHtml;
|
||||
|
||||
console.log(`✅ Загружено ${activeTrips.length} активных поездок`);
|
||||
}
|
||||
|
||||
// Метод для обновления данных (можно вызывать для перезагрузки)
|
||||
async refresh() {
|
||||
await this.renderTrips();
|
||||
}
|
||||
|
||||
// Получить данные о конкретной поездке
|
||||
getTripById(id) {
|
||||
if (!this.tripsData || !this.tripsData.trips) return null;
|
||||
return this.tripsData.trips.find(trip => trip.id === id);
|
||||
}
|
||||
|
||||
// Получить все активные поездки
|
||||
getActiveTrips() {
|
||||
if (!this.tripsData || !this.tripsData.trips) return [];
|
||||
return this.tripsData.trips.filter(trip => trip.active === true);
|
||||
}
|
||||
}
|
||||
|
||||
// Глобальная переменная для доступа к загрузчику
|
||||
let upcomingTripsLoader;
|
||||
|
||||
// Инициализация при загрузке DOM
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Проверяем, есть ли на странице контейнер для поездок
|
||||
const tripsContainer = document.getElementById('trips-grid');
|
||||
if (tripsContainer) {
|
||||
upcomingTripsLoader = new UpcomingTripsLoader();
|
||||
upcomingTripsLoader.renderTrips();
|
||||
|
||||
console.log('🗓️ Загрузчик предстоящих поездок инициализирован');
|
||||
}
|
||||
});
|
||||
|
||||
// Функция для обновления поездок (можно вызывать извне)
|
||||
function refreshUpcomingTrips() {
|
||||
if (upcomingTripsLoader) {
|
||||
upcomingTripsLoader.refresh();
|
||||
}
|
||||
}
|
||||
|
||||
// Экспорт для использования в других скриптах
|
||||
if (typeof module !== 'undefined' && module.exports) {
|
||||
module.exports = UpcomingTripsLoader;
|
||||
}
|
||||
Reference in New Issue
Block a user