Uhr

Mit dem Uhr-Widget kann die aktuelle Uhrzeit angezeigt werden. Eine Zeitzone kann für jedes Widget separat konfiguriert werden. Bei Verwendung zusammen mit einem Widget für die Ausfall Historie folgt die Uhrzeit der Uhr der Ausfallzeit.

Bearbeiten des Uhr-Widgets

Jedes Uhr-Widget kann mit einer eigenen Zeitzone konfiguriert werden.

Gültige Zeitzonen haben das in der tz-Datenbank definierte Format oder die üblichen Zeitzonenabkürzungen wie CET oder GMT.

Farbe der Ziffern der Uhr

Farbe des inaktiven Segments

Dies kann durch Hinzufügen des folgenden Stils zum Ziel-Dashboard erreicht werden (für Details siehe: https://skoorag.atlassian.net/wiki/spaces/DOC/pages/494196/Dashboards+Guide#Edit-dashboard )

.widget.clock svg path {
  fill: #979ca1;
}
image-20240807-071623.pngimage-20240807-071736.png

Farbe des aktiven Segments

Dies kann durch Hinzufügen des folgenden Stils zum Ziel-Dashboard erfolgen (für Details siehe: Edit dashboard )

.widget.clock svg path[class*="active"] {
  fill: #ff0000;
}
image-20240807-075830.png

image-20240807-075910.png

Entsprechend der aktuell verwendeten Zeitzone

image-20240807-083313.pngimage-20240807-082645.pngimage-20240807-084047.png

Die Lösung vergleicht den aktuellen UTC-Offset mit dem im Uhr-Widget eingestellten UTC-Offset. Wenn diese übereinstimmen, wird die CSS-Klasse auf lokal gesetzt. Eine CSS-Regel im Dashboard-Stil färbt die lokal aktiven Pfade entsprechend ein.

image-20240807-083359.png
  1. Die folgende Einstellung weist der Uhr die CSS-Klasse local zu, wenn ihre Zeitzoneneinstellung "europe/zurich" entspricht

 ${moment().utcOffset() == moment().tz("europe/zurich").utcOffset() ? "local" : ""}
  1. Die Verwendung des folgenden Stils in der Dashboard-Einstellung würde nur das Uhr-Widget mit der CSS-Klasse local anpassen

.widget.clock.local svg path[class*="active"] {
  fill: #0a87f0;
}