From 37831eeca00f8b256c1cf10f107ea51f4cb99d90 Mon Sep 17 00:00:00 2001 From: Ali Mihandoost Date: Sat, 11 Feb 2023 02:04:21 +0330 Subject: [PATCH] feat(com-pwa): pwa structure with home page --- uniquely/com-pwa/res/config.js | 2 +- uniquely/com-pwa/src/alwatr-pwa.ts | 34 ++++++ uniquely/com-pwa/src/config.ts | 6 + uniquely/com-pwa/src/content/home-page-fa.ts | 71 ++++++++++++ .../com-pwa/src/director/content-provider.ts | 18 +++ uniquely/com-pwa/src/director/index.ts | 4 + uniquely/com-pwa/src/director/l18e-loader.ts | 11 ++ uniquely/com-pwa/src/director/logger.ts | 3 + uniquely/com-pwa/src/l18r/fa.json | 9 ++ uniquely/com-pwa/src/page-home.ts | 106 ++++++++++++++++++ uniquely/com-pwa/src/type.ts | 14 +++ uniquely/com-pwa/web-dev-server.config.js | 2 +- 12 files changed, 278 insertions(+), 2 deletions(-) create mode 100644 uniquely/com-pwa/src/alwatr-pwa.ts create mode 100644 uniquely/com-pwa/src/config.ts create mode 100644 uniquely/com-pwa/src/content/home-page-fa.ts create mode 100644 uniquely/com-pwa/src/director/content-provider.ts create mode 100644 uniquely/com-pwa/src/director/index.ts create mode 100644 uniquely/com-pwa/src/director/l18e-loader.ts create mode 100644 uniquely/com-pwa/src/director/logger.ts create mode 100644 uniquely/com-pwa/src/l18r/fa.json create mode 100644 uniquely/com-pwa/src/page-home.ts create mode 100644 uniquely/com-pwa/src/type.ts diff --git a/uniquely/com-pwa/res/config.js b/uniquely/com-pwa/res/config.js index e130c8c21..27d465bf6 100644 --- a/uniquely/com-pwa/res/config.js +++ b/uniquely/com-pwa/res/config.js @@ -1,4 +1,4 @@ window.appConfig = { api: '/api/v0', - token: '4d8468355882232d116254446165063fe9db87e3fa33d0f2ee9d9da88930f3ed', + token: '3584fd6c82b5b76568a7f770846be94af9b7a879eb2274f2c0121ccc58d112ee', }; diff --git a/uniquely/com-pwa/src/alwatr-pwa.ts b/uniquely/com-pwa/src/alwatr-pwa.ts new file mode 100644 index 000000000..15daee83b --- /dev/null +++ b/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`...`; + }, + _404: (routeContext) => this._routesConfig.templates.home(routeContext), + }, + }; +} diff --git a/uniquely/com-pwa/src/config.ts b/uniquely/com-pwa/src/config.ts new file mode 100644 index 000000000..f5a517ff2 --- /dev/null +++ b/uniquely/com-pwa/src/config.ts @@ -0,0 +1,6 @@ +import {getConfKey} from '@alwatr/pwa-helper/config.js'; + +export const config = { + api: getConfKey('api'), + token: getConfKey('token'), +}; diff --git a/uniquely/com-pwa/src/content/home-page-fa.ts b/uniquely/com-pwa/src/content/home-page-fa.ts new file mode 100644 index 000000000..cddefb58e --- /dev/null +++ b/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: ` + سافیت با هدف بهینه سازی در ساخت وساز و همچنین کاهش هزینه ها تامین و نگه داری ساختمان در بلند مدت اقدام به تولید محصولات گچی نمود.
+ همچنین با توجه به گسترش بازار و نیاز مشتریان تنوع طرح و جنس محصولات خود را افزایش داده است. + از مزایا سقف ها سافیت می‌توان به سرعت بالا در اجرا، عایق صوت، رطوبت و حرارت نام برد. همچنین می‌توان به راحتی در دسترسی به تاسیسات نیز اشاره کرد. + `, + }, + + { + 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: ` +
تلفن ارتباط مستقیم
+
${replaceNumber('0915 559 9674')}
+ `, + href: 'tel:+989155599674', + }, + ], +}; diff --git a/uniquely/com-pwa/src/director/content-provider.ts b/uniquely/com-pwa/src/director/content-provider.ts new file mode 100644 index 000000000..a3f265fa9 --- /dev/null +++ b/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( + 'home_page_content', + (await import('../content/home-page-fa.js')).homePageContent, + ); +}); diff --git a/uniquely/com-pwa/src/director/index.ts b/uniquely/com-pwa/src/director/index.ts new file mode 100644 index 000000000..66a3893d1 --- /dev/null +++ b/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'; diff --git a/uniquely/com-pwa/src/director/l18e-loader.ts b/uniquely/com-pwa/src/director/l18e-loader.ts new file mode 100644 index 000000000..fabace734 --- /dev/null +++ b/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; +}); diff --git a/uniquely/com-pwa/src/director/logger.ts b/uniquely/com-pwa/src/director/logger.ts new file mode 100644 index 000000000..9d3537e94 --- /dev/null +++ b/uniquely/com-pwa/src/director/logger.ts @@ -0,0 +1,3 @@ +import {createLogger} from '@alwatr/logger'; + +export const logger = createLogger('soffit-director'); diff --git a/uniquely/com-pwa/src/l18r/fa.json b/uniquely/com-pwa/src/l18r/fa.json new file mode 100644 index 000000000..5771baf82 --- /dev/null +++ b/uniquely/com-pwa/src/l18r/fa.json @@ -0,0 +1,9 @@ +{ + "ok": true, + "meta": { + "code": "fa-IR", + "rev": 0 + }, + "data": { + } +} diff --git a/uniquely/com-pwa/src/page-home.ts b/uniquely/com-pwa/src/page-home.ts new file mode 100644 index 000000000..17c3c12a8 --- /dev/null +++ b/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('home_page_content', (content) => { + this.content = content; + }), + ); + } + + override render(): unknown { + this._logger.logMethod('render'); + if (this.content == null) return nothing; + return html` + +
${map(this.content.boxList, this._boxTemplate)}
+
+
A good ceiling is vital.
a SOFFIT ceiling can be an inspiration.
+
Soffit Order Management v${_ALWATR_VERSION_}
+
+ `; + } + + protected _boxTemplate(box: BoxType): unknown { + const slot = box.slot == null ? nothing : unsafeHTML(box.slot); + return html`${slot}`; + } +} diff --git a/uniquely/com-pwa/src/type.ts b/uniquely/com-pwa/src/type.ts new file mode 100644 index 000000000..c60200a5b --- /dev/null +++ b/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; +} diff --git a/uniquely/com-pwa/web-dev-server.config.js b/uniquely/com-pwa/web-dev-server.config.js index 9a6df8182..9c4e13e1e 100644 --- a/uniquely/com-pwa/web-dev-server.config.js +++ b/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;