feat(com-pwa): pwa structure with home page

uniquely/com-pwa/res/config.js

@@ -1,4 +1,4 @@
 window.appConfig = {
   api: '/api/v0',
-  token: '4d8468355882232d116254446165063fe9db87e3fa33d0f2ee9d9da88930f3ed',
+  token: '3584fd6c82b5b76568a7f770846be94af9b7a879eb2274f2c0121ccc58d112ee',
 };

uniquely/com-pwa/src/alwatr-pwa.ts

@@ -0,0 +1,34 @@
+import {html, customElement} from '@alwatr/element';
+import {AlwatrPwaElement} from '@alwatr/pwa-helper/pwa-element.js';
+
+import '@alwatr/ui-kit/style/mobile-only.css';
+import '@alwatr/ui-kit/style/theme/palette-85.css';
+import '@alwatr/ui-kit/style/theme/color.css';
+import '@alwatr/font/vazirmatn.css';
+
+import './director/index.js';
+
+import type {RoutesConfig} from '@alwatr/router';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'alwatr-pwa': AlwatrPwa;
+  }
+}
+
+/**
+ * Alwatr PWA Root Element
+ */
+@customElement('alwatr-pwa')
+class AlwatrPwa extends AlwatrPwaElement {
+  protected override _routesConfig: RoutesConfig = {
+    routeId: this._routesConfig.routeId,
+    templates: {
+      home: () => {
+        import('./page-home.js');
+        return html`<alwatr-page-home>...</alwatr-page-home>`;
+      },
+      _404: (routeContext) => this._routesConfig.templates.home(routeContext),
+    },
+  };
+}

uniquely/com-pwa/src/config.ts

@@ -0,0 +1,6 @@
+import {getConfKey} from '@alwatr/pwa-helper/config.js';
+
+export const config = {
+  api: getConfKey<string>('api'),
+  token: getConfKey<string>('token'),
+};

uniquely/com-pwa/src/content/home-page-fa.ts

@@ -0,0 +1,71 @@
+/* eslint-disable max-len */
+import {replaceNumber} from '@alwatr/i18n';
+
+import type {PageHomeContent} from '../type.js';
+
+export const homePageContent: PageHomeContent = {
+  topAppBar: {
+    type: 'center',
+    headline: 'مدیریت سفارشات سافیت',
+    startIcon: {icon: 'menu-outline', clickSignalId: 'app-menu-click-event'},
+    endIconList: [{icon: 'person-circle-outline', clickSignalId: 'user-avatar-click-event'}],
+  },
+
+  boxList: [
+    {
+      wide: true,
+      elevated: 1,
+      stated: true,
+      icon: 'logo-microsoft',
+      headline: 'مجموعه سافیت',
+      href: 'https://beta.soffit.co',
+      target: '_blank',
+      slot: `
+        سافیت با هدف بهینه سازی در ساخت وساز و همچنین کاهش هزینه ها تامین و نگه داری ساختمان در بلند مدت اقدام به تولید محصولات گچی نمود.<br/>
+        همچنین با توجه به گسترش بازار و نیاز مشتریان تنوع طرح و جنس محصولات خود را افزایش داده است.
+        از مزایا سقف ها سافیت می‌توان به سرعت بالا در اجرا، عایق صوت، رطوبت و حرارت نام برد. همچنین می‌توان به راحتی در دسترسی به تاسیسات نیز اشاره کرد.
+      `,
+    },
+
+    {
+      elevated: 1,
+      stated: true,
+      icon: 'cart-outline',
+      flipRtl: true,
+      headline: 'سفارش جدید',
+      href: '/select-product',
+      description: 'فرآیند ثبت سفارش جدید.',
+    },
+    {
+      elevated: 1,
+      stated: true,
+      icon: 'list-outline',
+      flipRtl: true,
+      headline: 'لیست سفارشات',
+      href: '/order-list',
+      description: 'مشاهده وضعیت و پیگیری سفارشات جاری.',
+    },
+
+    {
+      elevated: 1,
+      stated: true,
+      icon: 'cloud-download-outline',
+      headline: 'دانلود کاتالوگ',
+      description: 'دانلود کاتالوگ معرفی محصولات بازرگانی سافیت',
+      href: 'https://www.dropbox.com/s/dl/6ywy23qql7iq31p/soffit-product-catalogue.pdf',
+      target: 'download',
+    },
+    {
+      elevated: 1,
+      stated: true,
+      icon: 'call-outline',
+      flipRtl: true,
+      headline: 'تماس با ما',
+      slot: `
+        <div>تلفن ارتباط مستقیم</div>
+        <div dir="ltr">${replaceNumber('0915 559 9674')}</div>
+      `,
+      href: 'tel:+989155599674',
+    },
+  ],
+};

uniquely/com-pwa/src/director/content-provider.ts

@@ -0,0 +1,18 @@
+import {localeContextConsumer} from '@alwatr/i18n';
+import {contextProvider} from '@alwatr/signal';
+
+import {logger} from './logger.js';
+
+import type {PageHomeContent} from '../type.js';
+
+localeContextConsumer.subscribe(async () => {
+  const language = localeContextConsumer.getValue()?.language;
+  logger.logMethodArgs('contentProvider', {language});
+
+  if (language == null) return;
+
+  contextProvider.setValue<PageHomeContent>(
+      'home_page_content',
+      (await import('../content/home-page-fa.js')).homePageContent,
+  );
+});

uniquely/com-pwa/src/director/index.ts

@@ -0,0 +1,4 @@
+import '@alwatr/pwa-helper/director.js';
+
+import './l18e-loader.js';
+import './content-provider.js';

uniquely/com-pwa/src/director/l18e-loader.ts

@@ -0,0 +1,11 @@
+import {setL18eLoader} from '@alwatr/i18n';
+
+import {logger} from './logger.js';
+
+import type {L18eContext} from '@alwatr/type';
+
+setL18eLoader((locale) => {
+  const language = locale.language;
+  logger.logMethodArgs('l18eLoader', {language});
+  return import('../l18r/fa.json', {assert: {type: 'json'}}) as unknown as Promise<L18eContext>;
+});

uniquely/com-pwa/src/director/logger.ts

@@ -0,0 +1,3 @@
+import {createLogger} from '@alwatr/logger';
+
+export const logger = createLogger('soffit-director');

uniquely/com-pwa/src/l18r/fa.json

@@ -0,0 +1,9 @@
+{
+  "ok": true,
+  "meta": {
+    "code": "fa-IR",
+    "rev": 0
+  },
+  "data": {
+  }
+}

uniquely/com-pwa/src/page-home.ts

@@ -0,0 +1,106 @@
+import {customElement, AlwatrSmartElement, css, html, unsafeHTML, map, state, nothing} from '@alwatr/element';
+import {contextConsumer} from '@alwatr/signal';
+
+import '@alwatr/ui-kit/card/icon-box.js';
+import '@alwatr/ui-kit/top-app-bar/top-app-bar.js';
+
+import type {BoxType, PageHomeContent} from './type.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'alwatr-page-home': AlwatrPageHome;
+  }
+}
+
+/**
+ * Alwatr Demo Home Page
+ */
+@customElement('alwatr-page-home')
+export class AlwatrPageHome extends AlwatrSmartElement {
+  static override styles = css`
+    :host {
+      display: block;
+      height: 100%;
+      overflow-y: auto;
+    }
+
+    .logo {
+      display: block;
+      width: 100%;
+    }
+
+    main {
+      display: flex;
+      flex-wrap: wrap;
+      padding: calc(2 * var(--sys-spacing-track));
+      gap: var(--sys-spacing-track);
+    }
+
+    alwatr-icon-box {
+      width: 40%;
+      flex-grow: 1;
+    }
+
+    alwatr-icon-box[wide],
+    alwatr-lottery-box,
+    alwatr-supply-chain-box {
+      width: 100%;
+    }
+
+    alwatr-icon-box[small] {
+      width: 26%;
+    }
+
+    alwatr-supply-chain-form,
+    alwatr-lottery-form {
+      padding: 0 var(--sys-spacing-track);
+    }
+
+    footer {
+      direction: ltr;
+      text-align: center;
+      color: var(--sys-color-on-secondary-container);
+      padding: calc(2 * var(--sys-spacing-track)) var(--sys-spacing-track) var(--sys-spacing-track);
+      background-color: var(--sys-color-secondary-container);
+    }
+
+    .version {
+      font-size: var(--sys-typescale-label-small-font-size);
+      line-height: var(--sys-typescale-label-small-line-height);
+      letter-spacing: var(--sys-typescale-label-small-letter-spacing);
+      opacity: 0.4;
+      user-select: none;
+      -webkit-user-select: none;
+    }
+  `;
+
+  @state() content?: PageHomeContent;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    this._signalListenerList.push(
+        contextConsumer.subscribe<PageHomeContent>('home_page_content', (content) => {
+          this.content = content;
+        }),
+    );
+  }
+
+  override render(): unknown {
+    this._logger.logMethod('render');
+    if (this.content == null) return nothing;
+    return html`
+      <alwatr-top-app-bar .content=${this.content.topAppBar}></alwatr-top-app-bar>
+      <main>${map(this.content.boxList, this._boxTemplate)}</main>
+      <footer>
+        <div>A good ceiling is vital.<br />a SOFFIT ceiling can be an inspiration.</div>
+        <div class="version">Soffit Order Management v${_ALWATR_VERSION_}</div>
+      </footer>
+    `;
+  }
+
+  protected _boxTemplate(box: BoxType): unknown {
+    const slot = box.slot == null ? nothing : unsafeHTML(box.slot);
+    return html`<alwatr-icon-box .content=${box} ?wide=${box.wide} ?small=${box.small}>${slot}</alwatr-icon-box>`;
+  }
+}

uniquely/com-pwa/src/type.ts

@@ -0,0 +1,14 @@
+import type {StringifyableRecord} from '@alwatr/type';
+import type {IconBoxContent} from '@alwatr/ui-kit/card/icon-box.js';
+import type {TopAppBarContent} from '@alwatr/ui-kit/top-app-bar/top-app-bar.js';
+
+export interface BoxType extends IconBoxContent {
+  wide?: boolean;
+  slot?: string;
+  small?: boolean;
+}
+
+export interface PageHomeContent extends StringifyableRecord {
+  topAppBar: TopAppBarContent;
+  boxList: Array<BoxType>;
+}

uniquely/com-pwa/web-dev-server.config.js

@@ -1,2 +1,2 @@
-import {config} from '@alwatr/pwa-helper/web-dev-server.config';
+import {config} from '@alwatr/pwa-helper/pwa-dev-server.config.js';
 export default config;