From fc71bc740a77260a83b19adc9765f37cc5c74bdd Mon Sep 17 00:00:00 2001 From: denshooter Date: Fri, 9 Jan 2026 17:34:18 +0100 Subject: [PATCH] docs: Add guide for changing status text in n8n --- docs/N8N_STATUS_TEXT_GUIDE.md | 312 ++++++++++++++++++++++++++++++++++ 1 file changed, 312 insertions(+) create mode 100644 docs/N8N_STATUS_TEXT_GUIDE.md diff --git a/docs/N8N_STATUS_TEXT_GUIDE.md b/docs/N8N_STATUS_TEXT_GUIDE.md new file mode 100644 index 0000000..dc9d578 --- /dev/null +++ b/docs/N8N_STATUS_TEXT_GUIDE.md @@ -0,0 +1,312 @@ +# 📝 n8n Status-Text ändern - Anleitung + +## Übersicht + +Der Status-Text (z.B. "dnd", "online", "offline", "away") wird von deinem n8n Workflow zurückgegeben und auf der Website angezeigt. + +--- + +## 🔍 Wo kommt der Status-Text her? + +Der Status-Text kommt von deinem n8n Webhook: +- **Webhook URL**: `/webhook/denshooter-71242/status` +- **Methode**: GET +- **Antwort-Format**: JSON mit `status: { text: string, color: string }` + +--- + +## 🎯 Option 1: Status-Text direkt im n8n Workflow ändern + +### Schritt 1: Workflow finden + +1. Öffne dein n8n Dashboard +2. Suche nach dem Workflow, der den Status zurückgibt +3. Der Workflow sollte einen **Webhook** oder **HTTP Response** Node haben + +### Schritt 2: Status-Text im Workflow anpassen + +**Beispiel: Function Node oder Set Node** + +```javascript +// In einem Function Node oder Set Node +return [{ + json: { + status: { + text: "dnd", // ← Hier kannst du den Text ändern + color: "red" // ← Und hier die Farbe (green, yellow, red, gray) + }, + music: { /* ... */ }, + gaming: { /* ... */ }, + coding: { /* ... */ } + } +}]; +``` + +**Mögliche Status-Texte:** +- `"online"` → Wird als "Online" angezeigt +- `"offline"` → Wird als "Offline" angezeigt +- `"away"` → Wird als "Abwesend" angezeigt +- `"dnd"` → Wird als "Nicht stören" angezeigt +- `"custom"` → Wird als "Custom" angezeigt (oder beliebiger Text) + +**Mögliche Farben:** +- `"green"` → Grüner Punkt +- `"yellow"` → Gelber Punkt +- `"red"` → Roter Punkt +- `"gray"` → Grauer Punkt + +--- + +## 🎯 Option 2: Status über Datenbank setzen + +Falls dein n8n Workflow die Datenbank liest, kannst du den Status dort setzen: + +### Schritt 1: Datenbank-Update + +```sql +-- Status über status_mood und status_message setzen +UPDATE activity_status +SET + status_mood = '🔴', -- Emoji für den Status + status_message = 'Do Not Disturb - In Deep Work' +WHERE id = 1; +``` + +### Schritt 2: n8n Workflow anpassen + +Dein n8n Workflow muss dann die Datenbank-Daten in das richtige Format umwandeln: + +```javascript +// Function Node: Convert Database to API Format +const dbData = items[0].json; + +// Bestimme Status-Text basierend auf status_mood oder status_message +let statusText = "online"; +let statusColor = "green"; + +if (dbData.status_message?.toLowerCase().includes("dnd") || + dbData.status_message?.toLowerCase().includes("do not disturb")) { + statusText = "dnd"; + statusColor = "red"; +} else if (dbData.status_message?.toLowerCase().includes("away") || + dbData.status_message?.toLowerCase().includes("abwesend")) { + statusText = "away"; + statusColor = "yellow"; +} else if (dbData.status_message?.toLowerCase().includes("offline")) { + statusText = "offline"; + statusColor = "gray"; +} + +return [{ + json: { + status: { + text: statusText, + color: statusColor + }, + // ... rest of data + } +}]; +``` + +--- + +## 🎯 Option 3: Status über Webhook setzen + +Erstelle einen separaten n8n Workflow, um den Status manuell zu ändern: + +### Workflow: "Set Status" + +**Node 1: Webhook (POST)** +- Path: `set-status` +- Method: POST + +**Node 2: Function Node** +```javascript +// Parse incoming data +const { statusText, statusColor } = items[0].json.body; + +// Update database +return [{ + json: { + query: "UPDATE activity_status SET status_message = $1 WHERE id = 1", + params: [statusText] + } +}]; +``` + +**Node 3: PostgreSQL Node** +- Operation: Execute Query +- Query: `={{$json.query}}` +- Parameters: `={{$json.params}}` + +**Node 4: Respond to Webhook** +```json +{ + "success": true, + "message": "Status updated" +} +``` + +**Verwendung:** +```bash +curl -X POST https://your-n8n.com/webhook/set-status \ + -H "Content-Type: application/json" \ + -d '{"statusText": "dnd", "statusColor": "red"}' +``` + +--- + +## 🎨 Status-Text Übersetzungen in der Website + +Die Website übersetzt folgende Status-Texte automatisch: + +| n8n Status-Text | Website-Anzeige | +|----------------|-----------------| +| `"dnd"` | "Nicht stören" | +| `"online"` | "Online" | +| `"offline"` | "Offline" | +| `"away"` | "Abwesend" | +| Andere | Wird 1:1 angezeigt | + +**Wo wird übersetzt?** +- Datei: `app/components/ActivityFeed.tsx` +- Zeile: ~1559-1567 + +Falls du einen neuen Status-Text hinzufügen willst, musst du die Übersetzung dort hinzufügen. + +--- + +## 🔧 Praktische Beispiele + +### Beispiel 1: "Focus Mode" Status + +**In n8n Function Node:** +```javascript +return [{ + json: { + status: { + text: "focus", // Neuer Status + color: "red" + }, + // ... rest + } +}]; +``` + +**In ActivityFeed.tsx hinzufügen:** +```typescript +{data.status.text === "dnd" + ? "Nicht stören" + : data.status.text === "focus" // ← Neue Übersetzung + ? "Fokus-Modus" + : data.status.text === "online" + ? "Online" + // ... rest +} +``` + +### Beispiel 2: Status basierend auf Uhrzeit + +**In n8n Function Node:** +```javascript +const hour = new Date().getHours(); +let statusText = "online"; +let statusColor = "green"; + +if (hour >= 22 || hour < 7) { + statusText = "dnd"; + statusColor = "red"; +} else if (hour >= 9 && hour < 17) { + statusText = "online"; + statusColor = "green"; +} else { + statusText = "away"; + statusColor = "yellow"; +} + +return [{ + json: { + status: { text: statusText, color: statusColor }, + // ... rest + } +}]; +``` + +### Beispiel 3: Status über Discord Bot + +**Discord Command:** +``` +!status dnd +!status online +!status away +``` + +**n8n Workflow:** +```javascript +// Parse Discord command +const command = items[0].json.content.split(' ')[1]; // "dnd", "online", etc. + +return [{ + json: { + status: { + text: command, + color: command === "dnd" ? "red" : command === "away" ? "yellow" : "green" + } + } +}]; +``` + +--- + +## 🐛 Troubleshooting + +### Problem: Status-Text ändert sich nicht + +**Lösung:** +1. Prüfe, ob der n8n Workflow aktiviert ist +2. Prüfe die Webhook-URL in `app/api/n8n/status/route.ts` +3. Prüfe die Browser-Konsole auf Fehler +4. Prüfe n8n Execution Logs + +### Problem: Status wird nicht angezeigt + +**Lösung:** +1. Prüfe, ob das `status` Objekt im JSON vorhanden ist +2. Prüfe, ob `status.text` und `status.color` gesetzt sind +3. Prüfe die Browser-Konsole: `console.log("ActivityFeed data:", json)` + +### Problem: Übersetzung funktioniert nicht + +**Lösung:** +1. Prüfe, ob der Status-Text exakt übereinstimmt (case-sensitive) +2. Füge die Übersetzung in `ActivityFeed.tsx` hinzu +3. Baue die Website neu: `npm run build` + +--- + +## 📚 Weitere Ressourcen + +- [n8n Documentation](https://docs.n8n.io/) +- [N8N_INTEGRATION.md](./N8N_INTEGRATION.md) - Vollständige n8n Integration +- [DYNAMIC_ACTIVITY_MANAGEMENT.md](./DYNAMIC_ACTIVITY_MANAGEMENT.md) - Activity Management + +--- + +## 💡 Quick Reference + +**Status-Text ändern:** +1. Öffne n8n Dashboard +2. Finde den Status-Workflow +3. Ändere `status.text` im Function/Set Node +4. Aktiviere den Workflow +5. Warte 30 Sekunden (Cache-Intervall) + +**Neue Übersetzung hinzufügen:** +1. Öffne `app/components/ActivityFeed.tsx` +2. Füge neue Bedingung hinzu (Zeile ~1559) +3. Baue neu: `npm run build` +4. Deploy + +--- + +Happy automating! 🎉