loop/webui: add prettier
diff --git a/loop/webui/src/web-components/sketch-network-status.ts b/loop/webui/src/web-components/sketch-network-status.ts
index 4b01e5e..835abb5 100644
--- a/loop/webui/src/web-components/sketch-network-status.ts
+++ b/loop/webui/src/web-components/sketch-network-status.ts
@@ -1,10 +1,10 @@
-import {css, html, LitElement} from 'lit';
-import {customElement, property} from 'lit/decorators.js';
-import {DataManager, ConnectionStatus} from '../data';
-import {State, TimelineMessage} from '../types';
-import './sketch-container-status';
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { DataManager, ConnectionStatus } from "../data";
+import { State, TimelineMessage } from "../types";
+import "./sketch-container-status";
-@customElement('sketch-network-status')
+@customElement("sketch-network-status")
export class SketchNetworkStatus extends LitElement {
// Header bar: view mode buttons
@@ -14,54 +14,54 @@
message: string;
@property()
error: string;
-
+
// See https://lit.dev/docs/components/styles/ for how lit-element handles CSS.
// Note that these styles only apply to the scope of this web component's
// shadow DOM node, so they won't leak out or collide with CSS declared in
// other components or the containing web page (...unless you want it to do that).
static styles = css`
-.status-container {
- display: flex;
- align-items: center;
-}
+ .status-container {
+ display: flex;
+ align-items: center;
+ }
-.polling-indicator {
- display: inline-block;
- width: 8px;
- height: 8px;
- border-radius: 50%;
- margin-right: 4px;
- background-color: #ccc;
-}
+ .polling-indicator {
+ display: inline-block;
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ margin-right: 4px;
+ background-color: #ccc;
+ }
-.polling-indicator.active {
- background-color: #4caf50;
- animation: pulse 1.5s infinite;
-}
+ .polling-indicator.active {
+ background-color: #4caf50;
+ animation: pulse 1.5s infinite;
+ }
-.polling-indicator.error {
- background-color: #f44336;
- animation: pulse 1.5s infinite;
-}
+ .polling-indicator.error {
+ background-color: #f44336;
+ animation: pulse 1.5s infinite;
+ }
-@keyframes pulse {
- 0% {
- opacity: 1;
- }
- 50% {
- opacity: 0.5;
- }
- 100% {
- opacity: 1;
- }
-}
+ @keyframes pulse {
+ 0% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0.5;
+ }
+ 100% {
+ opacity: 1;
+ }
+ }
-.status-text {
- font-size: 11px;
- color: #666;
-}
-`;
+ .status-text {
+ font-size: 11px;
+ color: #666;
+ }
+ `;
constructor() {
super();
@@ -74,22 +74,27 @@
// See https://lit.dev/docs/components/lifecycle/
disconnectedCallback() {
- super.disconnectedCallback();
+ super.disconnectedCallback();
}
indicator() {
if (this.connection === "disabled") {
- return '';
+ return "";
}
- return this.connection === "connected" ? "active": "error";
+ return this.connection === "connected" ? "active" : "error";
}
render() {
return html`
- <div class="status-container">
- <span id="pollingIndicator" class="polling-indicator ${this.indicator()}"></span>
- <span id="statusText" class="status-text">${this.error || this.message}</span>
- </div>
+ <div class="status-container">
+ <span
+ id="pollingIndicator"
+ class="polling-indicator ${this.indicator()}"
+ ></span>
+ <span id="statusText" class="status-text"
+ >${this.error || this.message}</span
+ >
+ </div>
`;
}
}
@@ -98,4 +103,4 @@
interface HTMLElementTagNameMap {
"sketch-network-status": SketchNetworkStatus;
}
-}
\ No newline at end of file
+}