Add different colors for different codes (b11b8abe) · Commits · Fachschaft / Status

index.html

+16 −5

Original line number	Diff line number	Diff line
		@@ -28,9 +28,24 @@
		}

		.badge span:last-child {
		background-color: #4c1;
		font-weight: bold;
		}

		.badge.green span:last-child {
		background-color: #4c1;
		}

		.badge.red span:last-child {
		background-color: #e05d44;
		}

		.badge.yellow span:last-child {
		background-color: #ecca14;
		}

		.badge.gray span:last-child {
		background-color: #393535;
		}
		</style>
		</head>

		@@ -52,10 +67,6 @@
		<section id="public"></section>

		<h2>Dienste hinter Basic-Auth</h2>
		<p>
		Diese erscheinen immer als „Down“, da sie, selbst wenn sie an sind, mit einem HTTP 401-Fehlercode
		antworten („Unauthorized“).
		</p>
		<section id="auth"></section>

		<h2>Abgeschaltete Dienste</h2>

+10 −1

Original line number	Diff line number	Diff line
		@@ -32,6 +32,12 @@ function getServiceUrl(serviceHost) {
		return `https://${serviceHost}`
		}

		const statusInterpretations = {
		200: ["Up", "green"],
		404: ["Down", "red"],
		401: ["Protected", "yellow"]
		}

		/**
		* Create an HTML status badge for the given service object. The service object could look like this:
		*
		@@ -53,16 +59,19 @@ function createStatusBadge(service) {
		* The class "badge" is used by some CSS code to style the link. target="_blank" ensures
		* the link will be opened in a new tab.
		*/
		const [statusName, cssClass] = statusInterpretations[service.status]

		const a = document.createElement("a")
		a.href = getServiceUrl(service.host)
		a.target = "_blank"
		a.classList.add("badge")
		a.classList.add(cssClass)

		const nameEl = document.createElement("span")
		nameEl.textContent = service.name

		const statusEl = document.createElement("span")
		statusEl.textContent = service.status == 200 ? "Up" : "Down"
		statusEl.textContent = statusName

		a.append(nameEl, statusEl)