feat(soffit-pwa): page 404

Alwatr · Feb 25, 2023 · ec6eb42 · ec6eb42
1 parent 7bd3568
commit ec6eb42
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 4 deletions.
diff --git a/uniquely/soffit-pwa/src/alwatr-pwa.ts b/uniquely/soffit-pwa/src/alwatr-pwa.ts
@@ -5,7 +5,6 @@ import '@alwatr/ui-kit/style/mobile-only.css';
 import '@alwatr/ui-kit/style/theme/color.css';
 import '@alwatr/ui-kit/style/theme/palette-270.css';
 
-
 import './app-footer.js';
 import './director/index.js';
 
@@ -29,11 +28,14 @@ class AlwatrPwa extends AlwatrPwaElement {
         import('./page-home.js');
         return html`<alwatr-page-home>...</alwatr-page-home>`;
       },
+      _404: () => {
+        import('./page-404.js');
+        return html`<alwatr-page-404>...</alwatr-page-404>`;
+      },
       product: () => {
         import('./page-product.js');
         return html`<alwatr-page-product>...</alwatr-page-product>`;
       },
-      _404: (routeContext) => this._routesConfig.templates.home(routeContext),
     },
   };
 

diff --git a/uniquely/soffit-pwa/src/app-footer.ts b/uniquely/soffit-pwa/src/app-footer.ts
@@ -37,7 +37,7 @@ export class AlwatrPageHome extends AlwatrBaseElement {
     this._logger.logMethod('render');
     return html`
       <div>A good ceiling is vital.<br />a SOFFIT ceiling can be an inspiration.</div>
-      <div class="version">Soffit v${_ALWATR_VERSION_}</div>
+      <div class="version">Soffit PWA v${_ALWATR_VERSION_}</div>
     `;
   }
 }
diff --git a/uniquely/soffit-pwa/src/lottery-form.ts b/uniquely/soffit-pwa/src/lottery-form.ts
@@ -9,7 +9,6 @@ import type {FormData} from './type.js';
 import type {RadioGroupOptions} from '@alwatr/ui-kit/radio-group/radio-group.js';
 import type {AlwatrTextField} from '@alwatr/ui-kit/text-field/text-field.js';
 
-
 declare global {
   interface HTMLElementTagNameMap {
     'alwatr-lottery-form': AlwatrLotteryForm;

diff --git a/uniquely/soffit-pwa/src/page-404.ts b/uniquely/soffit-pwa/src/page-404.ts
@@ -0,0 +1,55 @@
+import {customElement, css, html, LocalizeMixin, SignalMixin, AlwatrBaseElement} from '@alwatr/element';
+import {message} from '@alwatr/i18n';
+import '@alwatr/ui-kit/card/icon-box.js';
+import '@alwatr/ui-kit/top-app-bar/top-app-bar.js';
+
+import {topAppBarContextProvider} from './context.js';
+
+import type {IconBoxContent} from '@alwatr/ui-kit/card/icon-box.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'alwatr-page-404': AlwatrPage404;
+  }
+}
+
+/**
+ * Alwatr 404 Page.
+ */
+@customElement('alwatr-page-404')
+export class AlwatrPage404 extends LocalizeMixin(SignalMixin(AlwatrBaseElement)) {
+  static override styles = css`
+    :host {
+      display: block;
+      padding: calc(2 * var(--sys-spacing-track));
+      box-sizing: border-box;
+      min-height: 100%;
+    }
+  `;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    topAppBarContextProvider.setValue({
+      type: 'small',
+      headline: message('not_found'),
+      startIcon: {icon: 'arrow-back-outline', flipRtl: true, clickSignalId: 'back-click-event'},
+      tinted: 2,
+    });
+  }
+
+  override render(): unknown {
+    this._logger.logMethod('render');
+
+    const box: IconBoxContent = {
+      stated: true,
+      elevated: 1,
+      icon: 'construct-outline',
+      flipRtl: true,
+      headline: message('under_develope'),
+      description: message('under_develope_description'),
+      preLine: true,
+    };
+
+    return html`<alwatr-icon-box .content=${box}></alwatr-icon-box>`;
+  }
+}