portfolio/docs/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

// 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

-- 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:

// 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

// 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

{
  "success": true,
  "message": "Status updated"
}

Verwendung:

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:

return [{
  json: {
    status: {
      text: "focus",  // Neuer Status
      color: "red"
    },
    // ... rest
  }
}];

In ActivityFeed.tsx hinzufügen:

{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:

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:

// 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
• N8N_INTEGRATION.md - Vollständige n8n Integration
• 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! 🎉