katja's git: oeffisearch

departuresView: better offline support

diff --git a/src/departuresView.js b/src/departuresView.js
@@ -44,21 +44,27 @@ class DeparturesView extends BaseView {
 
 		if (previous.has('stopId')) {
 			this.viewState  = null;
-			await this.updateViewState();
+			if (!this.isOffline) await this.updateViewState();
 		}
+
+		if (previous.has('isOffline') && this.viewState === null) await this.updateViewState();
 	}
 
 	renderContent () {
-		return this.viewState !== null ? html`
+		return [
+			html`
 			<div class="header-container">
 				<header>
 					<a class="icon-back ${history.length !== 1 ? '': 'invisible'}" title="${t('back')}" @click=${() => history.back()}></a>
 					<div class="container">
-						<h3>Departures from ${this.viewState.name}</h3>
+						<h3>Departures from ${this.viewState !== null ? this.viewState.name : '...'}</h3>
 					</div>
-					<a class="icon-reload ${this.isUpdating ? 'spinning' : ''}" title="${t("reload")}" @click=${this.updateViewState}></a>
+					<a class="icon-reload ${!this.isUpdating ? '' : 'spinning'} ${!this.isOffline ? '' : 'invisible'}" title="${t("reload")}" @click=${this.updateViewState}></a>
 				</header>
 			</div>
+			`,
+
+			this.viewState !== null ? html`
 			<div class="container">
 				<div class="card">
 				<table>

@@ -90,21 +96,15 @@ class DeparturesView extends BaseView {
 				</div>
 			</div>
 			<footer-component></footer-component>
-		` : html`
-			<div class="header-container">
-				<header>
-					<a class="icon-back ${history.length !== 1 ? '': 'invisible'}" title="${t('back')}" @click=${() => history.back()}></a>
-					<div class="container">
-						<h3>Departures from ...</h3>
-					</div>
-					<a class="icon-reload ${this.isUpdating ? 'spinning' : ''}" title="${t("reload")}" @click=${this.updateViewState}></a>
-				</header>
-			</div>
-			<div class="spinner"></div>
-		`;
+			` : !this.isOffline ?
+			html`<div class="spinner"></div>`
+			: html`<div class="offline"></div>`
+		];
 	}
 
 	updateViewState = async () => {
+		if (this.isOffline !== false) return;
+
 		this.isUpdating = true;
 		try {
 			const when   = this.when;

diff --git a/src/styles/base.css b/src/styles/base.css
@@ -27,6 +27,14 @@ a {
 	max-width: 1000px;
 }
 
+.offline {
+	margin: calc(50vh - 120px) auto;
+	width: 120px;
+	height: 120px;
+	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19.8 22.6 17.15 20H6.5q-2.3 0-3.9-1.6T1 14.5q0-1.92 1.19-3.42 1.19-1.51 3.06-1.93.08-.2.15-.39.1-.19.15-.41L1.4 4.2l1.4-1.4 18.4 18.4M6.5 18h8.65L7.1 9.95q-.05.28-.07.55-.03.23-.03.5h-.5q-1.45 0-2.47 1.03Q3 13.05 3 14.5T4.03 17q1.02 1 2.47 1m15.1.75-1.45-1.4q.43-.35.64-.81T21 15.5q0-1.05-.73-1.77-.72-.73-1.77-.73H17v-2q0-2.07-1.46-3.54Q14.08 6 12 6q-.67 0-1.3.16-.63.17-1.2.52L8.05 5.23q.88-.6 1.86-.92Q10.9 4 12 4q2.93 0 4.96 2.04Q19 8.07 19 11q1.73.2 2.86 1.5 1.14 1.28 1.14 3 0 1-.37 1.81-.38.84-1.03 1.44m-6.77-6.72" fill="gray"/></svg>');
+
+}
+
 .spinner {
 	margin: calc(50vh - 120px) auto;
 	border: 5px solid rgba(255, 255, 255, .4);