Web-Plugin

Aufbau

Das Sams-Web-Plugin ist ein Hilfsmittel zum einfachen Einbinden von Spielbetriebsdaten auf Verbands- und Vereins-Webseiten.

Das SAMS-Web-Plugin wird technisch nicht mehr unterstützt. Wie an dieser Stelle bereits angekündigt, wird die Verfügbarkeit dadurch nunmehr insofern eingeschränkt, als dass keine neuen API Keys für den Zugriff mehr bereitgestellt werden - bitte sehen Sie dementsprechend von diesbezüglichen Anfragen bei den zuständigen Landesverbänden ab.

Zur Integration des Plugins auf einer beliebigen Webseite ist lediglich ein kurzes HTML-Segment erforderlich, welches automatisch generiert wird, wie man es zum Beispiel auch von Youtube oder Facebook gewohnt ist. Weitere technische Kenntnisse sind nicht erforderlich.

Das Plugin besteht aus zwei Hauptkomponenten, welche sich wiederum in Unterkomponenten (Ansichten) untergliedern:

• Spielrundenkomponente für Ligen und Wettbewerbe
  • Tabelle
  • Spielplan
• Mannschaftskomponente
  • Spieler
  • Tabelle
  • Spielplan

Verwendung des Plugins

Zur Erstellung des Plugins ist ein SAMS-API-Key erforderlich. Diesen Key erhalten Sie bei Ihrem Landesverband.

Mit diesem Key können Sie im Plugin-Manager unter https://web-plugin.sams-server.de/ den HTML-Code zur Einbindung auf Ihrer Internetseite generieren lassen.

Nach Hinterlegung des Keys und dem Zustimmen der AGB wird eine Auswahl verfügbarer SAMS-Datenbanken, Saison, Spielrunden sowie Mannschaften angeboten, die der Reihe nach ausgewählt werden müssen. Die Auswahl einer Mannschaft ist optional und führt zu einer Anzeige von mannschaftsspezifischen Daten im Plugin. Wird keine Mannschaft ausgewählt, wird standardmäßig die Spielrundenkomponente geladen.

Sobald alle nötigen Angaben hinterlegt sind, erzeugt der Manager eine Vorschauansicht für das Plugin auf der rechten Seite. Weitere Änderungen der Daten sowie der Detaileinstellungen werden automatisch übernommen.

Das Plugin kann in verschiedenen Größen dargestellt werden und passt seine Darstellung responsiv und automatisch entsprechend an.

Der benötigte HTML-Code lässt sich dann mit einem Klick auf "Code" über dem Vorschaufenster erzeugen. Dieser Code muss nun lediglich auf ihrer Webseite an der Stelle hinterlegt werden, an der das Plugin angezeigt werden soll.

Styling

Es wurde Wert darauf gelegt, dass das Plugin einerseits eine ansprechende Standardformatierung bietet, andererseits aber auch möglichst harmonisch in bestehende Webseiten integrierbar ist.

Für fortgeschrittene Anwender ist es dennoch möglich, sämtliche Formatierungen via CSS anzupassen. Hierzu müssen lediglich entsprechende CSS-Klassen auf der Webseite hinterlegt werden, entweder inline in einem `<style>`-Block oder in einer eigenen CSS-Datei. Die CSS-Klassen können über den Browser (Google Chrome: Rechtsklick auf eine Element -> Untersuchen) in Erfahrung gebracht werden. Exemplarisch folgt ein Code-Beispiel, was einen Teil der vorhanden CSS-Klassen abdeckt. Achtung: Im Code sind zur Illustration diverse Farben hinterlegt. Diese müssen zur eigenen Verwendung entfernt beziehungsweise angepasst werden.

   div.sams-web-plugin-app {
       font-family: Arial, Helvetica, sans-serif;
       background-color: red;
       font-size: 30px;
   }
   /* Alle Buttons */
   div.sams-web-plugin-app .swp-btn {
       font-size: 30px;
   }
   /*  Hauptnavigation */
   ul.swp-view-nav {
       background-color: yellow;
   }
   div.sams-web-plugin ul.swp-view-nav li a {
       color: blue;
   }
   div.sams-web-plugin ul.swp-view-nav li a.is-active {
       border: 1px solid blue;
   }
   div.sams-web-plugin ul.swp-view-nav li a:hover {
       background-color: black;
   }
   /* Unternavigation */
   div.sams-web-plugin div.swp-selection-nav {
       background-color: black;
   }
   /* Unternavigation select-box */
   div.sams-web-plugin div.swp-selection-nav select {
       background-color: black;
       font-size: 30px;
       height: 55px;
   }
   /* Unternavigation buttons */
   div.sams-web-plugin div.swp-match-series-nav button.swp-sub-nav-btn {
       background-color: blue;
   }
   div.sams-web-plugin div.swp-match-series-nav button.swp-sub-nav-btn.active {
       background-color: pink;
   }
   /* Überschrift ausgewählte Spielrunde */
   div.sams-web-plugin h3 {
       text-decoration: overline;
   }
   /* Links */
   div.sams-web-plugin a.swp-link {
       color: green;
   }
   /* Tabellen Ansichten */
   div.sams-web-plugin button.swp-group-btn {
       color: blue;
   }
   div.sams-web-plugin button.swp-group-btn.active {
       background-color: yellow;
   }
   /* HTML-Tabellen */
   /* Tabellenköpfe / th */
   div.sams-web-plugin table.swp-data-table thead tr th {
       background-color: black;
   }
   /* Tabellenzeilen */
   div.sams-web-plugin table.swp-data-table tbody tr {
       background-color: orange;
   }
   /* jede zweite Tabellenzeile  */
   div.sams-web-plugin table.swp-data-table tbody tr:nth-child(odd) {
       background-color: grey;
   }
   /* Hover-Effekt über Tabellenzeilen */
   div.sams-web-plugin table.swp-data-table tbody tr:hover {
       background-color: white;
   }
   /* Trennzeilen für Gruppierungen nach Datum oder Turnier Level */
   div.sams-web-plugin table.swp-data-table tbody tr.group-row td {
       background-color: black;
       font-style: italic;
   }