status-page/templates/index.hbs

121 lines
4.8 KiB
Handlebars
Raw Normal View History

2023-10-28 16:28:50 +00:00
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=yes, initial-scale=1.0">
<link href="/public/style.css" rel="stylesheet">
<title>{{metadata.title}}</title>
</head>
<body>
<main>
{{#if notices}}
<div>
<h2>Notices</h2>
<div class="notices">
{{#each notices}}
<div class="notice">
<h3 class="notice-title">{{title}}</h3>
{{#if expectedStatus}}
<div class="expected-status">
Expected status: {{inlineStatus expectedStatus}}
</div>
{{/if}}
{{#if affectedServices.length}}
<div class="affected-services">
Affected services:
{{#each affectedServices}}
{{inlineService this}} &dashv;
{{/each}}
</div>
{{/if}}
{{#if expectedDuration}}
<div class="expected-duration">
Expected duration
<ul>
<li><span class="from">From: <b>{{epochUTC expectedDuration.from}}</b></span></li>
<li><span class="to">To: <b>{{epochUTC expectedDuration.to}}</b></span></li>
</ul>
</div>
{{/if}}
<p class="notice-description">{{{description}}}</p>
</div>
{{/each}}
</div>
</div>
{{/if}}
<div>
<h2>Services</h2>
<div class="services">
{{#each services}}
<div class="service">
<h3 class="service-title">{{displayName}}</h3>
<div class="service-metadata">
{{#if link}}
<a href={{link}}>{{link}}</a> &dash;
{{/if}}
{{inlineStatus status}}
</div>
<p class="service-description">{{{description}}}</p>
{{#if updates.length}}
<hr>
<div class="service-updates">
{{#each updates}}
<details>
<summary>Updates</summary>
<div class="service-update">
<div class="update-metadata">
<b>{{epochUTC time}}</b>
{{#if author}}
&dash; <span class="update-author">{{author}}</span>
{{/if}}
</div>
<p class="update-description">{{{description}}}</p>
</div>
</details>
{{/each}}
</div>
{{/if}}
</div>
{{/each}}
</div>
</div>
<div>
<h2>Contact</h2>
<div class="contact">
{{#each contact}}
<div class="individual-contact">
<div class="contact-metadata">
{{#if gravatarEmail}}
{{gravatar gravatarEmail}}
{{/if}}
<h3 class="contact-name">{{name}}</h3>
</div>
<p class="contact-addt-info">{{{additionalInfo}}}</p>
<div class="contact-links">
{{#each links}}
<a class="contact-link" href={{href}}>{{name}}</a>
{{/each}}
</div>
</div>
{{/each}}
</div>
</div>
<div>
<h2>Statuses</h2>
<div class="statuses">
{{#each statuses}}
<div id="status-{{@key}}" class="status">
<h3 style="color: {{color}}">{{displayName}}</h3>
<p>{{description}}</p>
</div>
{{/each}}
</div>
</div>
</main>
<script>
Array.from(document.getElementsByTagName("time")).forEach((el) =>
el.innerText = (new Date(el.getAttribute("datetime"))).toLocaleString(navigator.language || "en-GB", { timeStyle: "short", dateStyle: "short" }))
</script>
</body>
</html>