upload

2026-06-04 18:52:56 +00:00 · 2025-10-16 13:32:05 +02:00
commit 12cba639b9
663 changed files with 168914 additions and 0 deletions
@@ -0,0 +1,218 @@
+# MyUIbrix - Režim náhledu / Preview Mode
+
+## 🔒 Koncept izolace náhledu
+
+MyUIbrix nyní odděluje **režim úprav (náhled)** od **produkčního zobrazení**.
+
+---
+
+## 🎯 Jak to funguje
+
+### **Před uložením:**
+- ✅ Změny vidíte **pouze VY** (admin v režimu úprav)
+- ❌ Běžní návštěvníci webu změny **NEVIDÍ**
+- 🔒 Preview mode je izolován od produkce
+
+### **Po kliknutí "Publikovat":**
+- ✅ Změny se uloží do databáze
+- ✅ Stránka se automaticky obnoví
+- ✅ Změny jsou **viditelné všem** návštěvníkům
+- ✅ Produkční web používá nové nastavení
+
+---
+
+## 🛠️ Technická implementace
+
+### 1. **Preview Events (previewMode flag)**
+
+Všechny události pro živý náhled nyní obsahují `previewMode: true`:
+
+```typescript
+window.dispatchEvent(new CustomEvent('myuibrix-change', {
+  detail: { 
+    elementName, 
+    variant, 
+    visible, 
+    previewMode: true  // ← Klíčový příznak!
+  }
+}));
+```
+
+**Události jsou odesílány POUZE když:**
+- `isEditing === true` (editor je aktivní)
+- Admin má zapnutý režim úprav
+
+### 2. **Filtrování v hooks**
+
+Hook `usePageElementConfig` ignoruje preview události pokud nejsou v preview mode:
+
+```typescript
+const handleMyUIbrixChange = ((event: CustomEvent) => {
+  const { elementName, variant, visible, previewMode } = event.detail;
+  
+  // Aplikuj změny POUZE v preview mode
+  if (previewMode) {
+    setConfigs(prev => ({ ...prev, [elementName]: variant }));
+    setVisibility(prev => ({ ...prev, [elementName]: visible }));
+  }
+}) as EventListener;
+```
+
+### 3. **Produkční reload po uložení**
+
+Po úspěšném uložení se stránka automaticky obnoví:
+
+```typescript
+await batchUpdatePageElementConfigs(configsToSave);
+
+toast({
+  title: 'Změny úspěšně uloženy!',
+  description: 'Změny jsou nyní viditelné na produkci.',
+  status: 'success',
+});
+
+// Reload aby se načetla nová konfigurace z databáze
+setTimeout(() => {
+  window.location.reload();
+}, 1500);
+```
+
+---
+
+## 📋 Workflow pro administrátora
+
+### Krok 1: Aktivace editoru
+```
+1. Přejděte na homepage
+2. Klikněte na fialové tlačítko ✏️ (pravý dolní roh)
+   NEBO použijte: /?myuibrix=edit
+```
+
+### Krok 2: Úpravy (Preview Mode)
+```
+✓ Vidíte horní lištu s textem "🔒 REŽIM NÁHLEDU"
+✓ Pod tím text: "Změny vidíte pouze vy"
+✓ Klikejte na elementy, měňte varianty
+✓ Změny se zobrazují OKAMŽITĚ, ale jen VÁM
+```
+
+### Krok 3: Publikování
+```
+1. Klikněte "Publikovat" v horní liště
+2. Zobrazí se: "Změny úspěšně uloženy!"
+3. Stránka se automaticky obnoví (1.5s)
+4. ✅ Změny jsou nyní viditelné všem
+```
+
+---
+
+## 🔍 Co vidí různí uživatelé
+
+| Uživatel | Co vidí během editace | Co vidí po uložení |
+|----------|----------------------|-------------------|
+| **Admin (editor zapnutý)** | ✅ Preview změn v reálném čase | ✅ Produkční verze po reloadu |
+| **Admin (editor vypnutý)** | ❌ Pouze produkční verze | ✅ Produkční verze |
+| **Běžný návštěvník** | ❌ Pouze produkční verze | ✅ Produkční verze |
+
+---
+
+## 🎨 Vizuální indikátory
+
+### V režimu úprav uvidíte:
+
+**1. Horní lišta:**
+```
+⚽ ELEMENTOR  |  🔒 REŽIM NÁHLEDU  |  Změny vidíte pouze vy
+```
+
+**2. Oranžový badge:**
+- Bliká (animation pulse)
+- Text: "🔒 REŽIM NÁHLEDU"
+- Připomíná, že jste v preview mode
+
+**3. Modrá ohraničení:**
+- Elementy při najetí myší
+- Vybraný element má modrý overlay
+
+---
+
+## 📁 Změněné soubory
+
+### Frontend:
+1. **`frontend/src/components/editor/MyUIbrixEditor.tsx`**
+   - Přidán `previewMode: true` do všech událostí
+   - Události se odesílají pouze když `isEditing === true`
+   - Přidán vizuální indikátor "REŽIM NÁHLEDU"
+   - Reload stránky po uložení
+
+2. **`frontend/src/hooks/usePageElementConfig.ts`**
+   - Filtrování událostí podle `previewMode` příznaku
+   - Ignoruje preview události v produkci
+
+---
+
+## ⚠️ Důležité poznámky
+
+### ✅ Výhody:
+- Bezpečné testování změn před publikací
+- Žádné nechtěné změny na produkci
+- Jasné oddělení náhledu a produkce
+- Lepší UX pro administrátory
+
+### 🔄 Reload po uložení:
+- **Důvod:** Zajistí, že se načte nová konfigurace z databáze
+- **Trvání:** 1.5 sekundy delay (čas na zobrazení toastu)
+- **Alternativa:** Mohli bychom použít SSE/WebSocket pro live reload bez refresh
+
+### 🎯 Best Practices:
+1. **Vždy testujte změny** před publikováním
+2. **Klikněte na různé elementy** abyste viděli jak vypadají
+3. **Zkontrolujte mobile view** pomocí viewport switcher
+4. **Publikujte až když jste spokojeni** s výsledkem
+
+---
+
+## 🔧 Řešení problémů
+
+### Problem: Změny se nezobrazují po uložení
+**Řešení:** 
+- Zkontrolujte, že se stránka automaticky obnovila
+- Pokud ne, manuálně obnovte (F5)
+- Vyčistěte cache prohlížeče
+
+### Problem: Vidím změny i když nejsem v editoru
+**Řešení:**
+- Ujistěte se, že jste ukončili režim úprav (ESC nebo ✕)
+- Obnovte stránku pro reset
+
+### Problem: Preview se nenahrává
+**Řešení:**
+- Zkontrolujte konzoli prohlížeče (F12)
+- Ujistěte se, že backend běží
+- Zkontrolujte endpoint: `/api/v1/page-elements?page_type=homepage`
+
+---
+
+## 🚀 Budoucí vylepšení
+
+Možná rozšíření:
+1. **Historii změn** - Undo/Redo funkce
+2. **Verzování** - Ukládání verzí konfigurací
+3. **Plánované publikování** - Nastavit čas pro auto-publikaci
+4. **Multi-user preview** - Sdílení preview URL s jinými adminy
+5. **A/B testování** - Testování více variant najednou
+
+---
+
+**Implementováno:** 14. října 2025  
+**Verze:** 2.0.0  
+**Status:** ✅ Production Ready
+
+---
+
+## 📞 Kontakt
+
+Pokud máte otázky nebo návrhy na vylepšení:
+- Otevřete issue na GitHubu
+- Kontaktujte vývojový tým
+- Přečtěte si `MYUIBRIX_IMPROVEMENTS.md` pro více informací