WidgetTool Dokumentation

Appearance

Widgets ​

Der Widget Bereich besteht aktuell aus einer Vorschau und entsprechenden Selector. Es gibt aktuell 12 Widget-Typen zur Auswahl, welche sich von einader Unterscheiden.

Technische Vorraussetzung ​

Um das Widget ein darstellen zu können müssen folgenden Bediendungen erfüllt sein. Eine entsprechden API-Instanz, welche auf den Mandanten (Id) eingerichtet ist. Die API Calls finden in der Datei types/index.ts statt. Eingebunden in der index.html

html
<script src="/src/types/index.ts" type="module"></script>
<script src="/src/types/index.ts" type="module"></script>

Tabelle nach Spieltag ​

Der erste Widget-Typ ist die Table einer Liga. Als Parameter kann der Spiel mit geliefert werden. In dem View wird folgenden Action des PiniaStates getriggert. Die API liefert entsprechend ein HTML, welches die Tabelle darstellt.

ts
var url = `/api/v1.0/${paperId}/public/widget/table/${leagueId}/${seasonId}/${matchDay}/${paperId}/1`;
var url = `/api/v1.0/${paperId}/public/widget/table/${leagueId}/${seasonId}/${matchDay}/${paperId}/1`;

Für die Heimtabelle und für die Auswärtstabelle

ts
var url = `/api/v1.0/${paperId}/public/widget/table/home/${leagueId}/${seasonId}/${matchDay}/${paperId}/1`;
var url = `/api/v1.0/${paperId}/public/widget/table/away/${leagueId}/${seasonId}/${matchDay}/${paperId}/1`;
var url = `/api/v1.0/${paperId}/public/widget/table/home/${leagueId}/${seasonId}/${matchDay}/${paperId}/1`;
var url = `/api/v1.0/${paperId}/public/widget/table/away/${leagueId}/${seasonId}/${matchDay}/${paperId}/1`;

Spielplan nach Liga ​

Dieser Widget-Typ zeigt den Spielplan einer Liga an. Diese ist Spieltags bezogen daher gibt es den Parameter Match-Day.

ts
var url = `/api/v1.0/${paperId}/public/widget/league/matches/${paperId}/${leagueId}/${seasonId}/${matchDay}`;
var url = `/api/v1.0/${paperId}/public/widget/league/matches/${paperId}/${leagueId}/${seasonId}/${matchDay}`;

Spielplan nach Team ​

Hier werden alle Spiele zum Team in der Saison angezeigt. Dieses Widget ist allerdings Wettbewerbsabhängig.

ts
var url = `/api/v1.0/${paperId}/public/widget/team/matches/season/${paperId}/${leagueId}/${teamId}/${seasonId}/1970-01-01/0`;
var url = `/api/v1.0/${paperId}/public/widget/team/matches/season/${paperId}/${leagueId}/${teamId}/${seasonId}/1970-01-01/0`;

Torschützenliste ​

Die besten Torschützen eines Wettbewerbs.

ts
var url = `/api/v1.0/${paperId}/public/widget/league/topgoaler/${paperId}/${leagueId}/${seasonId}/${matchDay}`;
var url = `/api/v1.0/${paperId}/public/widget/league/topgoaler/${paperId}/${leagueId}/${seasonId}/${matchDay}`;

Liveticker Übersicht ​

Hier tauchen alle Liveticker zum heutigen Tag auf.

ts
var url = `/api/v1.0/${paperId}/public/widget/liveticker/overview`;
var url = `/api/v1.0/${paperId}/public/widget/liveticker/overview`;

Liveticker der Liga ​

Alle Liveticker einer Liga.

ts
var url = `/api/v1.0/${paperId}/public/widget/liveticker/league/${leagueId}`;
var url = `/api/v1.0/${paperId}/public/widget/liveticker/league/${leagueId}`;

Liveticker zum Spiel ​

Ein Liveticker zu einem spezifischem Spiel.

ts
var url = `/api/v1.0/${paperId}/public/widget/liveticker/match/${matchId}`;
var url = `/api/v1.0/${paperId}/public/widget/liveticker/match/${matchId}`;

Turnier Ansicht ​

Das Tunier Widget, welches ein komplettes Turnier abbildet.

ts
var url = `/api/v1.0/${paperId}/public/widget/tournament/overview/${paperId}/${tournamentId}`;
var url = `/api/v1.0/${paperId}/public/widget/tournament/overview/${paperId}/${tournamentId}`;

Spielkalender ​

Dieser Widget-Typ zeigt alle Spiele zum Kunden an. Parameter hierbei kann das Datum sein.

ts
var url = `/api/v1.0/${paperId}/public/widget/matches/calendar/${paperId}`;
var url = `/api/v1.0/${paperId}/public/widget/matches/calendar/${paperId}`;

Diesen Typ gibt es auch für einen einzelnen Wettbewerb.

ts
var url = `/api/v1.0/${paperId}/public/widget/league/matches-calendar/${paperId}/${leagueId}?date=${matchDate}`;
var url = `/api/v1.0/${paperId}/public/widget/league/matches-calendar/${paperId}/${leagueId}?date=${matchDate}`;

Spieldetail ​

Die Detail Anischt eines Spiel´s vorher und nach dem das Spiel gelaufen ist.

ts
var url = `/api/v1.0/${paperId}/public/widget/match/pre/${paperId}/${matchId}?date=${matchDate}&type=${nav}`;
var url = `/api/v1.0/${paperId}/public/widget/match/after/${paperId}/${matchId}?date=${matchDate}&type=${nav}`;
var url = `/api/v1.0/${paperId}/public/widget/match/pre/${paperId}/${matchId}?date=${matchDate}&type=${nav}`;
var url = `/api/v1.0/${paperId}/public/widget/match/after/${paperId}/${matchId}?date=${matchDate}&type=${nav}`;

Anfrage an die Instanz ​

Sobald einer der Widget-Typ ausgewählt wurden wird im nächsten Schritt die API-Anfrage gestellt. Dies geschieht via fetch und sieht folgend aus.

ts
fetch(window._spmwidget.baseurl + url).then((res) => {
    res.json().then((data) => {
        container.innerHTML = data.html;
        window._spmwidget.nodeScriptReplace(container);
    });
});
fetch(window._spmwidget.baseurl + url).then((res) => {
    res.json().then((data) => {
        container.innerHTML = data.html;
        window._spmwidget.nodeScriptReplace(container);
    });
});

Der Container wird in diesem Fall mit dem entsprechenden Ergebnis der API ausgefüllt. Hier bei erscheint dann das Widget in der Preview.