Uhr

Mit dem Uhr-Widget kann die aktuelle Uhrzeit angezeigt werden. Für jedes Widget kann separat eine Zeitzone konfiguriert werden. Bei Verwendung zusammen mit einem Widget zur Ausfallhistorie richtet sich die Uhrzeit der Uhr nach der Ausfallzeit.

Uhr-Widget bearbeiten

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

Gültige Zeitzonen müssen dem in der tz-Datenbank definierten Format entsprechen oder als gängige Zeitzonenabkürzungen wie CET oder GMT angegeben werden.

Farbe der Uhrenziffern

Farbe inaktiver Segmente

Dies kann durch Hinzufügen des folgenden Stils zum Ziel-Dashboard erreicht werden (Einzelheiten finden Sie unter: 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 erreicht werden, indem der folgende Stil zum Ziel-Dashboard hinzugefügt wird (Einzelheiten finden Sie unter: Dashboard bearbeiten)

.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 festgelegten UTC-Offset. Sind diese identisch, wird die CSS-Klasse auf „local“ gesetzt. Eine CSS-Regel im Dashboard-Stil färbt die lokalen aktiven Pfade entsprechend ein.

image-20240807-083359.png
  1. Die folgende Einstellung weist der Uhr die CSS-Klasse „local“ zu, wenn ihre Zeitzoneneinstellung mit „europe/zurich“ übereinstimmt

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

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