wineater-bot 2.1.4 → 3.0.1

package/src/js/widget-styles.js

@@ -0,0 +1,319 @@
+const widgetStyles = `
+/* Общие стили */
+#wine-widget-container {
+    display: flex;
+    gap: 24px;
+    font-family: 'Poppins', sans-serif;
+    background-color: #f8f9fa;
+    padding: 24px;
+    padding-right: 48px;
+    border-radius: 16px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+    box-sizing: border-box;
+    z-index: 10000;
+    max-width: 1200px;
+    margin: 40px auto;
+}
+
+/* Левая часть */
+#wine-widget-left {
+    flex: 0 0 40%;
+}
+
+/* Правая часть */
+#wine-widget-right {
+    display: block;
+    position: relative;
+    width: 100%;
+}
+
+#wine-placeholder {
+    flex: 0 0 60%;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 24px;
+}
+
+/* Заголовок */
+#wine-widget-header h1 {
+    font-size: 24px;
+    font-weight: bold;
+    margin: 0;
+    color: #333;
+}
+
+#wine-widget-header p {
+    font-size: 16px;
+    color: #666;
+    margin-top: 8px;
+}
+
+/* Поле ввода */
+#wine-widget-search {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    margin: 12px 0;
+}
+
+#wine-search-input {
+    flex: 1;
+    padding: 12px 16px;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    font-size: 16px;
+    background-color: #fff;
+    transition: border 0.2s ease;
+}
+
+#wine-search-input:focus {
+    border-color: #7B2BEB;
+    outline: none;
+}
+
+#wine-search-button {
+    padding: 12px 20px;
+    background: linear-gradient(90deg, #7B2BEB, #0044FF);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 16px;
+    transition: all 0.2s ease;
+}
+
+#wine-search-button:hover {
+    transform: scale(1.05);
+    box-shadow: 0 4px 12px rgba(123, 43, 235, 0.2);
+}
+
+/* Группы фильтров */
+.filter-group {
+    margin-bottom: 16px;
+    display: flex;
+    flex-direction: column;
+}
+
+.filter-label {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 8px;
+}
+
+.filter-buttons {
+    display: flex;
+    gap: 8px;
+}
+
+.filter-buttons button {
+    padding: 10px 16px;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    background: white;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-size: 14px;
+}
+
+.filter-buttons button.selected {
+    background: linear-gradient(90deg, #7B2BEB, #0044FF);
+    color: white;
+    border: none;
+}
+
+.filter-buttons button:hover {
+    transform: scale(1.05);
+    box-shadow: 0 4px 8px rgba(123, 43, 235, 0.15);
+}
+
+/* Карточка рекомендации */
+.wine-recommendation-tile {
+    display: flex;
+    padding: 16px;
+    border-radius: 16px;
+    background-color: white;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    border: 1px solid #ddd;
+    opacity: 0;
+    transition: opacity 0.3s ease, transform 0.3s ease;
+    gap: 16px;
+    cursor: pointer;
+}
+
+#loading-indicator {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 10000;
+    text-align: center;
+}
+
+#loading-indicator.hidden {
+    display: none;
+}
+
+#loading-indicator img {
+    width: 100px;
+    height: 100px;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+
+.wine-recommendation-tile:hover {
+    transform: scale(1.03);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+}
+
+.somm-selection {
+    position: relative;
+    border: 2px solid #FFD700; /* Золотая рамка */
+    background: linear-gradient(white, #FFF8DC); /* Легкий золотистый фон */
+    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4); /* Золотая тень */
+}
+
+/* Подпись Somm Selection */
+.somm-selection-badge {
+    position: absolute;
+    top: -10px;
+    left: 10px;
+    background: linear-gradient(90deg, #FFD700, #FFB800); /* Градиентная золотая заливка */
+    color: #FFF;
+    font-size: 12px;
+    font-weight: bold;
+    padding: 4px 8px;
+    border-radius: 4px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* Тень для выделения */
+}
+
+/* Изображение */
+.wine-recommendation-tile img {
+    width: 120px;
+    height: 120px;
+    object-fit: cover;
+    border-radius: 8px;
+}
+
+/* Детали карточки */
+.tile-details {
+    font-size: 14px;
+    color: #333;
+    flex: 1;
+}
+
+.tile-details strong {
+    display: block;
+    font-size: 18px;
+    margin-bottom: 4px;
+    font-weight: bold;
+    color: #1F1F1F;
+}
+
+.tile-details p {
+    margin: 4px 0;
+    color: #555;
+}
+
+.tile-details a {
+    font-size: 12px;
+    color: #0044FF;
+    text-decoration: underline;
+    display: block;
+    font-weight: bold;
+    margin-top: 16px;
+}
+
+.tile-details a:hover {
+    text-decoration: none;
+    color: #002699;
+}
+
+
+/* Описание карточки */
+.wine-description-widget {
+    margin-top: 12px;
+    padding: 8px 12px;
+    font-size: 14px;
+    color: #fff;
+    border-radius: 8px;
+    background: linear-gradient(90deg, #7B2BEB, #0044FF);
+    text-align: center;
+}
+
+#powered-by-widget {
+    margin-top: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #FAFAFA;
+    padding: 12px 24px;
+    border-top: 1px solid rgba(0, 0, 0, 0.08);
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+#powered-by-widget {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 20px;
+    padding: 12px;
+    border: 1px solid transparent;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+    text-align: center;
+}
+
+#powered-by-widget a {
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: #7B2BEB;
+    font-size: 12px;
+    transition: opacity 0.2s ease;
+}
+
+#powered-by-widget a:hover {
+    opacity: 0.8;
+}
+
+#powered-by-widget img {
+    height: 16px;
+    width: auto;
+}
+
+/* Адаптивность для мобильных устройств */
+@media screen and (max-width: 768px) {
+    #wine-widget-container {
+        flex-direction: column;
+        padding: 16px;
+    }
+
+    #wine-widget-left {
+        width: 100%;
+    }
+
+    #wine-widget-right {
+        grid-template-columns: 1fr;
+    }
+
+    .wine-recommendation-tile img {
+        max-width: 100px;
+    }
+}
+`;
+
+const style = document.createElement('style');
+style.textContent = widgetStyles;
+document.head.appendChild(style);

package/src/js/widget.js

@@ -0,0 +1,218 @@
+// widget.js
+import './widget-styles.js';
+import { Api } from './api.js';
+import translator from './i18n.js';
+
+export class WineWidget {
+    constructor() {
+        this.api = new Api(); // Подключаем API
+        this.selectedFilters = {
+            price: null,
+            color: null,
+            intensity: null,
+        };
+        this.initializeWidget();
+        this.loadInstantRecommendations(); // Загружаем мгновенные рекомендации
+    }
+
+    initializeWidget() {
+        const widgetHTML = `
+            <div id="wine-widget-container">
+                <div id="wine-widget-left">
+                <div id="wine-widget-header">
+                    <h1>${translator.translate('widgetTitle')}</h1>
+                    <p>${translator.translate('widgetSubtitle')}</p>
+                </div>
+                <div id="wine-widget-search">
+                    <input type="text" id="wine-search-input" placeholder="${translator.translate('searchPlaceholder')}">
+                    <button id="wine-search-button">${translator.translate('searchButton')}</button>
+                </div>
+                <div id="wine-widget-filters">
+                    <div class="filter-group">
+                        <span class="filter-label">${translator.translate('priceRange')}:</span>
+                        <div class="filter-buttons" id="price-buttons">
+                            <button data-value="<10"><$10</button>
+                            <button data-value="10-20">$10-$20</button>
+                            <button data-value=">20">>$20</button>
+                        </div>
+                    </div>
+                    <div class="filter-group">
+                        <span class="filter-label">${translator.translate('wineColor')}:</span>
+                        <div class="filter-buttons" id="color-buttons">
+                            <button data-value="red">${translator.translate('red')}</button>
+                            <button data-value="white">${translator.translate('white')}</button>
+                            <button data-value="rose">${translator.translate('rose')}</button>
+                        </div>
+                    </div>
+                    <div class="filter-group">
+                        <span class="filter-label">${translator.translate('intensity')}:</span>
+                        <div class="filter-buttons" id="intensity-buttons">
+                            <button data-value="light">${translator.translate('light')}</button>
+                            <button data-value="medium">${translator.translate('medium')}</button>
+                            <button data-value="full">${translator.translate('full')}</button>
+                        </div>
+                    </div>
+                </div>
+                <div id="powered-by-widget">
+                    <a href="https://wineater.com" target="_blank">
+                        <span>${translator.translate('poweredBy')}</span>
+                        <img src="https://landing-static.s3.eu-central-1.amazonaws.com/images/logo.svg" alt="Wineater Logo">
+                    </a>
+                </div>
+            </div>
+                <div id="wine-widget-right">
+                    <div id="loading-indicator" class="hidden">
+                        <img src="https://czvgkhagwvmknscoerfy.supabase.co/storage/v1/object/public/static-media/mascot.jpeg" alt="Loading" />
+                    </div>
+                    <div id="wine-placeholder"></div>
+            </div>
+            </div>
+        `;
+        document.body.insertAdjacentHTML('beforeend', widgetHTML);
+        this.addEventListeners();
+    }
+
+    addEventListeners() {
+        document.getElementById('wine-search-button').addEventListener('click', () => this.handleSearch());
+        this.setupFilterButtons('price-buttons', 'price');
+        this.setupFilterButtons('color-buttons', 'color');
+        this.setupFilterButtons('intensity-buttons', 'intensity');
+        // Добавляем обработчик нажатия Enter для поля ввода
+    document.getElementById('wine-search-input').addEventListener('keydown', (event) => {
+        if (event.key === 'Enter') {
+            this.handleSearch();
+        }
+    });
+    }
+
+    setupFilterButtons(containerId, filterKey) {
+        const buttons = document.querySelectorAll(`#${containerId} button`);
+        buttons.forEach(button => {
+            button.addEventListener('click', (e) => {
+                buttons.forEach(btn => btn.classList.remove('selected'));
+                e.target.classList.add('selected');
+                this.selectedFilters[filterKey] = e.target.dataset.value;
+            });
+        });
+    }
+
+    async handleSearch() {
+        const query = document.getElementById('wine-search-input').value;
+
+        // Показать эффект исчезновения карточек
+        this.animateCardDisappearance();
+
+        // Показать индикатор загрузки
+
+    
+        // Учитываем текущие выбранные фильтры
+        const filters = this.selectedFilters;
+        
+        // Добавляем вывод информации о запросе
+        console.log('Searching for:', query);
+        console.log('Applied filters:', filters);
+    
+        try {
+            // Вызываем API метод для получения рекомендаций
+            const results = await this.api.getWineRecommendations(query);
+    
+            // Проверяем, есть ли данные
+            if (results && results.length > 0) {
+                console.log('Recommendations:', results);
+                // Отображаем результаты
+                this.displayResults(results, true);
+            } else {
+                console.log('No recommendations found.');
+                this.displayNoResultsMessage();
+            }
+        } catch (error) {
+            console.error('Error fetching wine recommendations:', error.message);
+            this.displayErrorMessage();
+        }
+    }
+
+    displayResults(wines, isAnimated = false) {
+        const resultsContainer = document.getElementById('wine-placeholder');
+        this.hideLoadingIndicator();
+        resultsContainer.innerHTML = '';
+    
+        wines.forEach((wine, index) => {
+            const wineHTML = `
+            <div class="wine-recommendation-tile ${index === wines.length - 1 ? 'somm-selection' : ''}">
+                ${index === wines.length - 1 ? '<div class="somm-selection-badge">Somm Selection</div>' : ''}
+                <img src="${wine.Image}" alt="${wine.Title}" />
+                <div class="tile-details">
+                    <strong>${wine.Title}</strong>
+                    <p>Prix: ${wine.Price || 'N/A'}</p>
+                    <p>Région: ${wine.Region || 'N/A'}</p>
+                    <p>Type: ${wine.Type || 'N/A'}</p>
+                    <a href="${wine.Url}" target="_blank">Plus d'infos</a>
+                </div>
+            </div>
+            `;
+            resultsContainer.insertAdjacentHTML('beforeend', wineHTML);
+    
+            // Найти только что добавленную карточку
+            const currentCard = resultsContainer.children[index];
+    
+            // Анимация появления
+            setTimeout(() => {
+                currentCard.style.opacity = '1';
+                currentCard.style.transform = 'translateY(0)';
+            }, isAnimated ? index * 200 : 0); // Задержка между карточками
+        });
+    }
+
+    animateCardDisappearance() {
+        const cards = document.querySelectorAll('.wine-recommendation-tile');
+        cards.forEach((card, index) => {
+            setTimeout(() => {
+                card.style.opacity = '0';
+                card.style.transform = 'translateY(-20px)';
+            }, index * 100); // Задержка между карточками
+        });
+
+        setTimeout(() => {
+            document.getElementById('wine-placeholder').innerHTML = ''; // Удалить все карточки после анимации
+            this.showLoadingIndicator();
+        }, cards.length * 100 + 300); // Дождаться завершения анимации
+    }
+
+    showLoadingIndicator() {
+        const loadingIndicator = document.getElementById('loading-indicator');
+        loadingIndicator.classList.remove('hidden');
+    }
+
+    hideLoadingIndicator() {
+        const loadingIndicator = document.getElementById('loading-indicator');
+        loadingIndicator.classList.add('hidden');
+    }
+
+    displayNoResultsMessage() {
+        const resultsContainer = document.getElementById('wine-placeholder');
+        resultsContainer.innerHTML = `
+            <div class="no-results">
+                <p>${translator.translate('noResultsMessage') || 'No recommendations found for your query.'}</p>
+            </div>
+        `;
+    }
+
+    displayErrorMessage() {
+        const resultsContainer = document.getElementById('wine-placeholder');
+        resultsContainer.innerHTML = `
+            <div class="error-message">
+                <p>${translator.translate('errorMessage') || 'Something went wrong. Please try again later.'}</p>
+            </div>
+        `;
+    }
+
+    async loadInstantRecommendations() {
+        console.log('привет')
+        try {
+            const recommendations = await this.api.getInstantRecommendations();
+            this.displayResults(recommendations); // Обновляем отображение рекомендаций
+        } catch (error) {
+            console.error('Error loading instant recommendations:', error.message);
+        }
+    }
+}