docs: Add guide for changing status text in n8n
Some checks failed
Dev Deployment (Zero Downtime) / deploy-dev (push) Has been cancelled
Some checks failed
Dev Deployment (Zero Downtime) / deploy-dev (push) Has been cancelled
This commit is contained in:
312
docs/N8N_STATUS_TEXT_GUIDE.md
Normal file
312
docs/N8N_STATUS_TEXT_GUIDE.md
Normal file
@@ -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! 🎉
|
||||
Reference in New Issue
Block a user