Gemeinsame Komponenten
Referenz zu gemeinsamen UI-Komponenten, die auf mehreren Seiten in Tradeways verwendet werden — Kontowechsler, Ereignisglocke, P&L-Moduswechsler und mehr.
Gemeinsame Komponenten
Tradeways verwendet eine Reihe gemeinsamer UI-Komponenten, die auf mehreren Seiten erscheinen. Diese Komponenten sorgen für einheitliches Verhalten bei Kontoauswahl, Navigation, Benachrichtigungen und gängigen Formularelementen.
Navigation
App-Seitenleiste
Die einklappbare Seitenleiste ist das primäre Navigationselement. Sie enthält zwei Linkgruppen:
| Gruppe | Einträge |
|---|---|
| Navigation | Dashboard, Trades, Journal, Mentoring |
| Zeitverlauf | Täglich, Wöchentlich, Monatlich, Jährlich, Gesamt |
Die Fußzeile enthält Links zur Dokumentation (öffnet die Docs-Seite in einem neuen Tab), Einstellungen und ein Benutzermenü mit Abmelde-Option. Beim Betrachten eines betreuten Kontos zeigt der Avatar-Bereich den Namen des Schülers und ein „Nur-Lesen"-Label an.
Der Journal-Link wird ausgeblendet, wenn der Benutzer keinen Journal-Zugriff hat (z. B. bei einem betreuten Konto ohne Journal-Berechtigungen).
Header
Der öffentliche Header erscheint auf der Startseite und nicht authentifizierten Routen. Er zeigt das Tradeways-Logo und entweder Anmelde-/Registrierungs-Buttons oder die E-Mail des angemeldeten Benutzers mit einem Abmelde-Link.
Kontowechsler
Der Kontowechsler ist ein Dropdown in der oberen Leiste, mit dem Benutzer zwischen Handelskonten wechseln können. Er zeigt den Namen und die Währung des aktiven Kontos an.
| Verhalten | Beschreibung |
|---|---|
| Favoriten | Zeigt nur favorisierte Konten an. Sind keine Konten favorisiert, werden stattdessen alle eigenen Konten angezeigt. |
| Betreute Konten | Favorisierte betreute Konten erscheinen in einem separaten Abschnitt unterhalb der eigenen Konten. |
| Konten verwalten | Öffnet ein Modal zum Erstellen, Bearbeiten oder Löschen von Handelskonten. |
| URL-bewusstes Wechseln | Bei /dashboard/<ref> wird auf /dashboard weitergeleitet, um den Verweis auf ein nicht existierendes Dashboard zu vermeiden. |
Beim Kontowechsel wird das aktive Konto aktualisiert und zur selben Seite mit dem neuen Konto navigiert.
Ereignisglocke
Die Ereignisglocke ist ein Benachrichtigungszentrum, das über die obere Leiste erreichbar ist. Sie zeigt ein Glockensymbol mit einem Badge für ungelesene Nachrichten und öffnet eine scrollbare Ereignisliste.
Ereignistypen
| Ereignis | Beschreibung |
|---|---|
| Trade importiert | Trades wurden über eine Broker-Integration importiert |
| Trade erstellt | Ein Trade wurde manuell erstellt |
| Trade geschlossen | Ein Trade wurde geschlossen |
| Trade gelöscht | Ein Trade wurde gelöscht |
| Bild hochgeladen | Ein Bild wurde einem Trade angehängt |
| Konto erstellt / gelöscht | Ein Handelskonto wurde erstellt oder entfernt |
| Dashboard erstellt / gelöscht | Ein benutzerdefiniertes Dashboard wurde erstellt oder entfernt |
| Mentor-Ereignisse | Einladung, Annahme, Ablehnung, Berechtigungsänderungen, Feedback und Antworten |
Interaktionen
- Alle als gelesen markieren -- löscht das Ungelesen-Badge für alle Ereignisse.
- Einzeln als gelesen markieren -- ein Häkchen-Button erscheint beim Hover für ungelesene Ereignisse.
- Klicken zum Navigieren -- klickbare Ereignisse navigieren zur entsprechenden Seite (z. B. Trade-Detail, Mentoring).
- Zeitstempel werden als relative Zeit angezeigt: „Gerade eben", „vor 5 Min.", „vor 2 Std.", „vor 3 Tagen".
Änderungen erscheinen sofort in der Benutzeroberfläche.
P&L-Moduswechsler
Der P&L-Moduswechsler ermöglicht die Änderung der Darstellungsart von Gewinn- und Verlustwerten in der gesamten App. Er erscheint in der oberen Leiste als Symbol des aktuellen Modus.
| Modus | Symbol | Beschreibung |
|---|---|---|
| Währung | $ | P&L in der Abrechnungswährung des Kontos |
| Ticks (1 Lot) | # | Ticks normalisiert auf ein Standardlot |
| Ticks (Sized) | Diagramm | Ticks skaliert auf die tatsächliche Positionsgröße |
| Prozent | % | P&L als Prozentsatz des Kontoeigenkapitals |
Der Prozentmodus erfordert mindestens eine Kontotransaktion. Die erste Transaktion ist der Startsaldo des Kontos und kann 0 sein. Sind keine vorhanden, zeigt die Prozentoption einen Hinweis und verlinkt zur Kontoeinstellungsseite.
Die Tick-Bezeichnung passt sich der dominanten Anlageklasse des aktiven Kontos an (Ticks für Futures, Pips für Forex, Punkte für CFD, Cents für Aktien). Siehe P&L-Anzeigemodi für Details zu Umrechnung und Geltungsbereich.
Formularelemente
Währungsauswahl
Ein Dropdown zur Auswahl eines ISO-4217-Währungscodes. Unterstützt zwei Darstellungsvarianten:
| Variante | Anzeige |
|---|---|
| kompakt | Nur Währungscode (z. B. „USD") |
| detailliert | Code + Symbol + Name (z. B. „USD $ — US Dollar") |
Währungsmetadaten (Symbol, Name, Dezimalstellen) werden von Tradeways bereitgestellt.
Datumsauswahl
Ein Popover-Kalender zur Auswahl eines einzelnen Datums. Funktionen:
- Konfigurierbarer Datumsbereich mit frühestem und spätestem auswählbarem Monat.
- Löschbare Auswahl über einen X-Button.
- Benutzerdefinierte Datumsformatierung.
- Dropdown-Navigation für Monat und Jahr.
Instrumentformular
Ein gemeinsames Formular zur Konfiguration von Instrumentmetadaten, verwendet sowohl auf der Instrumenteinstellungsseite als auch im Import-Flow. Die Felder passen sich basierend auf der gewählten Anlageklasse an:
| Anlageklasse | P&L-Einheit | Angezeigte Felder |
|---|---|---|
| Futures | Ticks | Tick-Größe, Punktwert, P&L-Währung, Börse |
| Forex | Ticks | Tick-Größe, Punktwert, P&L-Währung (automatisch abgeleitet) |
| CFD | Ticks | Tick-Größe, Punktwert, P&L-Währung |
| Aktien, Crypto | Währung | Kontraktmultiplikator, Lotgröße, P&L-Währung |
Bei Forex- und Crypto-Paaren wird die P&L-Währung automatisch aus dem Symbol abgeleitet (z. B. EURUSD ergibt USD). Eine Kreuzwährungswarnung erscheint, wenn die P&L-Währung des Instruments von der Abrechnungswährung des Kontos abweicht.
Segment-Umschalter
Ein generisches Umschaltelement zum Wechseln zwischen einer Reihe beschrifteter Optionen. Dargestellt als kompakte Buttonreihe mit hervorgehobener ausgewählter Option. Wird in der gesamten App für Moduswechsel, Ansichtsumschaltung und Filterauswahl verwendet.
Anzeige-Komponenten
Anlageklassen-Badge
Ein kleines umrandetes Badge, das den lokalisierten Namen einer Anlageklasse anzeigt (Futures, Forex, Aktien, Crypto, CFD). Verwendet in Trade-Listen, Instrumentkonfiguration und Detailansichten.
Speicherstatus-Anzeige
Ein Statuspunkt mit Beschriftung, der den aktuellen Speicherzustand einer Notiz oder eines Formulars anzeigt. Wird hauptsächlich im Journal-Editor verwendet.
| Status | Punktfarbe | Beschriftung |
|---|---|---|
| leer | Grau | Keine Notiz |
| gespeichert | Grün | Gespeichert |
| wird erstellt | Blau (pulsierend) | Wird erstellt... |
| ungespeichert | Bernstein | Ungespeicherte Änderungen |
| wird gespeichert | Blau (pulsierend) | Wird gespeichert... |
Seitenleisten-Abschnittsheader
Eine kleine Großbuchstaben-Beschriftung zur Trennung von Abschnitten in Detail-Seitenleisten (z. B. Trade-Detail, Journal). Unterstützt einen optionalen Aktions-Slot (z. B. einen Hinzufügen-Button). Eine einklappbare Variante fügt einen Chevron-Umschalter zum Auf- und Zuklappen des Abschnittsinhalts hinzu.
Siehe auch
- P&L-Anzeigemodi -- Details zu P&L-Modus-Umrechnung, Geltungsbereich und Tick-Bezeichnungen
- Handelsanzeige -- Standard-P&L-Anzeigemodus konfigurieren
- Konten -- Handelskonten, Favoriten und Startsalden verwalten