portfolio/docs/archive/N8N_STATUS_TEXT_GUIDE.md

# 📝 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! 🎉