@things-factory/system 8.0.0-beta.1 → 8.0.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/system",
-  "version": "8.0.0-beta.1",
+  "version": "8.0.0-beta.2",
   "main": "dist-server/index.js",
   "browser": "dist-client/index.js",
   "things-factory": true,
@@ -32,8 +32,8 @@
     "@operato/i18n": "^8.0.0-beta",
     "@operato/layout": "^8.0.0-beta",
     "@operato/markdown": "^8.0.0-beta",
-    "@things-factory/env": "^8.0.0-beta.1",
-    "@things-factory/more-base": "^8.0.0-beta.1"
+    "@things-factory/env": "^8.0.0-beta.2",
+    "@things-factory/more-base": "^8.0.0-beta.2"
   },
-  "gitHead": "36c494e587640c1490318ef7b95adab02606e0c2"
+  "gitHead": "f03431a09435511b2595515658f9cb8f78ba4ebb"
 }

package/client/bootstrap.ts

@@ -1,23 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@operato/i18n/ox-i18n.js'
-
-import { html } from 'lit'
-
-import { TOOL_POSITION } from '@operato/layout'
-import { navigate, store } from '@operato/shell'
-import { ADD_MORENDA } from '@things-factory/more-base/client'
-
-export default function bootstrap() {
-  /* add user profile morenda */
-  store.dispatch({
-    type: ADD_MORENDA,
-    morenda: {
-      icon: html` <md-icon>info</md-icon> `,
-      name: html` <ox-i18n msgid="label.about-system"></ox-i18n> `,
-      position: TOOL_POSITION.REAR_END,
-      action: () => {
-        navigate('system')
-      }
-    }
-  })
-}

package/client/index.ts

@@ -1 +0,0 @@
-export * from './viewparts/release-note-setting-let'

package/client/pages/system-info.ts

@@ -1,186 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@material/web/button/text-button.js'
-import '@operato/i18n/ox-i18n.js'
-import '../viewparts/opensource-license'
-import '../viewparts/license-info'
-
-import { css, html } from 'lit'
-import { customElement } from 'lit/decorators.js'
-
-import { openHelp } from '@operato/help'
-import { i18next, localize } from '@operato/i18n'
-import { openPopup } from '@operato/layout'
-import { PageView } from '@operato/shell'
-
-const ENV = process.env
-
-@customElement('system-info')
-export class SystemInfo extends localize(i18next)(PageView) {
-  static styles = css`
-    :host {
-      display: block;
-      position: relative;
-      text-align: center;
-
-      background-color: var(--system-info-background-color);
-      padding: var(--system-info-content-padding);
-      color: var(--system-info-color);
-      font: var(--system-info-font);
-    }
-
-    :host * {
-      vertical-align: middle;
-    }
-
-    #refresh-button {
-      border-radius: var(--border-radius);
-      border: 1px solid rgba(0, 0, 0, 0.1);
-
-      text-transform: capitalize;
-    }
-
-    div {
-      padding: 10px;
-    }
-
-    strong {
-      font: var(--system-info-appname-font);
-      color: var(--system-info-appname-color);
-    }
-
-    span {
-      display: block;
-    }
-
-    span.description {
-      padding: 3px 10px;
-      font: var(--system-info-description-font);
-      color: var(--system-info-description-color);
-    }
-
-    span.version {
-      display: inline-block;
-      border-radius: 5px;
-      opacity: 0.8;
-      background-color: var(--system-info-version-background-color);
-      padding: 3px 10px;
-      font: var(--system-info-version-font);
-      color: var(--system-info-version-color);
-    }
-
-    .poweredBy {
-      background-color: #efefef;
-      position: absolute;
-      border-top: 1px solid rgba(0, 0, 0, 0.1);
-      padding: 7px 0;
-      width: 100%;
-      bottom: 0;
-      text-align: center;
-    }
-
-    .poweredBy md-icon {
-      opacity: var(--help-icon-opacity, 0.4);
-      font-size: var(--help-icon-size, 18px);
-      color: var(--help-icon-color);
-    }
-
-    .poweredBy md-icon:hover {
-      cursor: help;
-      opacity: var(--help-icon-hover-opacity, 1);
-      color: var(--help-icon-hover-color);
-    }
-  `
-
-  private _applicationMeta?: { icon?: string; title: string; description: string; copyright: string }
-
-  get context() {
-    return {
-      title: i18next.t('label.about-system')
-    }
-  }
-
-  get applicationMeta() {
-    if (!this._applicationMeta) {
-      var iconLink = document.querySelector('link[rel="application-icon"]') as HTMLLinkElement
-      var titleMeta = document.querySelector('meta[name="application-name"]') as HTMLMetaElement
-      var descriptionMeta = document.querySelector('meta[name="application-description"]') as HTMLMetaElement
-      var copyrightMeta = document.querySelector('meta[name="application-copyright"]') as HTMLMetaElement
-
-      this._applicationMeta = {
-        icon: iconLink?.href,
-        title: titleMeta ? titleMeta.content : 'Things Factory',
-        description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software',
-        copyright: copyrightMeta ? copyrightMeta.content : 'Copyright © hatiolab.com. All Rights Reserved." />'
-      }
-    }
-
-    return this._applicationMeta
-  }
-
-  render() {
-    var { icon, title, description, copyright } = this.applicationMeta
-
-    return html`
-      <img src=${icon!} alt="system logo" />
-
-      <div>
-        <strong>${title}</strong>
-        <span class="description">${description}</span>
-        <span class="version"
-          ><ox-i18n msgid="field.version"></ox-i18n> : ${ENV['APP-VERSION']}-${ENV['NODE-ENV']}</span
-        >
-      </div>
-
-      <div>
-        <md-text-button
-          id="refresh-button"
-          @click=${e => {
-            location.reload()
-          }}
-        >
-          <md-icon>refresh</md-icon>
-          ${String(i18next.t('label.system reload'))}
-        </md-text-button>
-      </div>
-
-      <div>
-        <span>${copyright}</span>
-
-        <span
-          >${title} is built on several
-          <a href="#" @click=${e => this.onClickOpenSourceLicense(e)}>open source software</a></span
-        >
-        <span>We are using the <a href="#" @click=${e => this.onClickLicenseInfo(e)}>license</a> as permitted. </span>
-      </div>
-
-      <div class="poweredBy">
-        <span
-          >Powered by &trade;Things Factory <ox-i18n msgid="field.version"></ox-i18n> ${ENV['SHELL-VERSION']}
-          <md-icon @click=${e => openHelp('about/things-factory')}>help</md-icon>
-        </span>
-      </div>
-    `
-  }
-
-  onClickOpenSourceLicense(e) {
-    e.preventDefault()
-    e.stopPropagation()
-
-    openPopup(html` <opensource-license></opensource-license> `, {
-      backdrop: true,
-      size: 'large',
-      title: 'Open Source Licenses'
-    })
-  }
-
-  onClickLicenseInfo(e) {
-    e.preventDefault()
-    e.stopPropagation()
-
-    openPopup(html` <license-info></license-info> `, {
-      backdrop: true,
-      size: 'large',
-      title: 'License Information'
-    })
-  }
-}

package/client/route.ts

@@ -1,7 +0,0 @@
-export default function route(page) {
-  switch (page) {
-    case 'system':
-      import('./pages/system-info')
-      return page
-  }
-}

package/client/themes/system-theme.css

@@ -1,14 +0,0 @@
-body {
-  /* system info style */
-  --system-info-background-color: var(--md-sys-color-background);
-  --system-info-content-padding: 40px 0 0 0;
-  --system-info-font: normal 14px/24px var(--theme-font);
-  --system-info-color: #666;
-  --system-info-appname-color: var(--md-sys-color-secondary);
-  --system-info-appname-font: bold 20px/20px var(--theme-font);
-  --system-info-description-color: var(--md-sys-color-primary);
-  --system-info-description-font: normal 15px/18px var(--theme-font);
-  --system-info-version-background-color: var(--md-sys-color-secondary);
-  --system-info-version-color: #fff;
-  --system-info-version-font: normal 15px/15px var(--theme-font);
-}

package/client/viewparts/license-info.ts

@@ -1,84 +0,0 @@
-import { LitElement, html, css } from 'lit'
-import { customElement, state } from 'lit/decorators.js'
-import { ScrollbarStyles } from '@operato/styles'
-
-@customElement('license-info')
-export class LicenseInfo extends LitElement {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        color: var(--md-sys-color-on-primary-container);
-        background-color: var(--md-sys-color-primary-container);
-      }
-
-      .license-info {
-        flex: 1;
-
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        font-family: Arial, sans-serif;
-        padding: 20px;
-        border: 1px solid #d1d1d1;
-
-        background-image: radial-gradient(circle, rgba(200, 200, 200, 0.5) 1px, transparent 1px),
-          radial-gradient(circle, rgba(200, 200, 200, 0.5) 1px, transparent 1px);
-        background-size: 16px 16px;
-      }
-
-      h2 {
-        font-size: 1.8em;
-      }
-
-      .license-item {
-        display: grid;
-        grid-template-columns: 1fr auto 1fr;
-        align-items: center;
-        margin-bottom: 10px;
-      }
-
-      .label {
-        text-align: right;
-        padding: 0 10px;
-      }
-      .value {
-        text-align: left;
-        padding: 0 10px;
-        font-weight: bold;
-      }
-    `
-  ]
-
-  @state() licenseInfo: { [key: string]: string } = {}
-
-  render() {
-    return html`
-      <div class="license-info">
-        <h2>라이선스 정보</h2>
-        ${Object.entries(this.licenseInfo).map(
-          ([key, value]) => html`
-            <div class="license-item"><span class="label">${key}</span> : <span class="value">${value}</span></div>
-          `
-        )}
-      </div>
-    `
-  }
-
-  async firstUpdated() {
-    try {
-      const response = await fetch('/license-info', {
-        method: 'GET'
-      })
-
-      if (response.ok) {
-        this.licenseInfo = await response.json()
-      } else {
-        throw new Error(`Failed to fetch license-info. Status: ${response.status}`)
-      }
-    } catch (error) {
-      console.error('Error while fetching license-info:', error)
-    }
-  }
-}

package/client/viewparts/opensource-license.ts

@@ -1,75 +0,0 @@
-import { LitElement, html, css } from 'lit'
-import { customElement, state } from 'lit/decorators.js'
-import { ScrollbarStyles } from '@operato/styles'
-
-@customElement('opensource-license')
-export class OpenSourceLicense extends LitElement {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: row;
-
-        background-color: var(--md-sys-color-surface);
-        padding: 12px 5px 12px 15px;
-
-        font-size: 13px;
-        color: #333;
-      }
-
-      [licenses] {
-        flex: 1;
-        overflow: auto;
-        margin: 0;
-        padding: 0;
-      }
-      li::before {
-        content: '- ';
-      }
-      li {
-        padding: 2px 0 1px 0;
-      }
-      a {
-        color: #22a6a7;
-      }
-    `
-  ]
-
-  @state() licenses?: Object
-
-  async firstUpdated() {
-    try {
-      const response = await fetch('/opensource-licenses', {
-        method: 'GET'
-      })
-
-      if (response.ok) {
-        this.licenses = await response.json()
-      } else {
-        throw new Error(`Failed to fetch licenses. Status: ${response.status}`)
-      }
-    } catch (error) {
-      console.error('Error while fetching licenses:', error)
-    }
-  }
-
-  render() {
-    var licenses = this.licenses || {}
-
-    return html`
-      <ul licenses>
-        ${Object.keys(licenses).map(name => {
-          var license = licenses[name]
-
-          return html`
-            <li>
-              <span>${name}</span>
-              <a href=${license.licenseUrl}>${license.licenses}</a>
-            </li>
-          `
-        })}
-      </ul>
-    `
-  }
-}

package/client/viewparts/release-note-notice.ts

@@ -1,53 +0,0 @@
-import '@operato/markdown'
-
-import { LitElement, css, html } from 'lit'
-import { customElement } from 'lit/decorators.js'
-
-const ENV = process.env
-const version = ENV['APP-VERSION']
-const key = `release-note.${version}`
-
-@customElement('release-note-notice')
-export class ReleaseNoteNotice extends LitElement {
-  static get seen() {
-    return !!localStorage.getItem(key)
-  }
-
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        background-color: var(--md-sys-color-surface);
-        padding: 12px 5px 12px 15px;
-
-        font-size: 13px;
-        color: #333;
-      }
-
-      ox-markdown {
-        overflow-y: auto;
-        flex: 1;
-      }
-    `
-  ]
-
-  render() {
-    return html`
-      <ox-markdown src="/helps/release-note.md"></ox-markdown>
-      <label> <input type="checkbox" @change=${e => this.onchangeClose(e)} /> do not show again</label>
-    `
-  }
-
-  onchangeClose(e) {
-    const checked = e.target.checked
-
-    if (checked) {
-      localStorage.setItem(key, 'true')
-      history.back()
-    } else {
-      localStorage.removeItem(key)
-    }
-  }
-}

package/client/viewparts/release-note-setting-let.ts

@@ -1,52 +0,0 @@
-import '@material/web/button/outlined-button.js'
-import '@operato/i18n/ox-i18n.js'
-import '@things-factory/setting-base/dist-client'
-import './release-note-notice'
-
-import { css, html, LitElement } from 'lit'
-import { customElement } from 'lit/decorators.js'
-
-import { i18next, localize } from '@operato/i18n'
-import { openPopup } from '@operato/layout'
-
-@customElement('release-note-setting-let')
-export class ReleaseNoteSettingLet extends localize(i18next)(LitElement) {
-  static styles = [
-    css`
-      div[onoff] {
-        display: flex;
-        align-items: center;
-        border-bottom: var(--border-dim-color);
-        margin-bottom: var(--spacing-medium);
-        padding-bottom: var(--spacing-medium);
-      }
-
-      [test] {
-        margin-left: auto;
-      }
-    `
-  ]
-
-  render() {
-    return html`
-      <setting-let>
-        <ox-i18n slot="title" msgid="title.release note setting"></ox-i18n>
-
-        <div slot="content" onoff>
-          <md-outlined-button @click=${e => this.openReleaseNote()}>
-            <md-icon>article</md-icon>
-            ${String(i18next.t('button.view_release_note'))}
-          </md-outlined-button>
-        </div>
-      </setting-let>
-    `
-  }
-
-  openReleaseNote() {
-    openPopup(html` <release-note-notice></release-note-notice> `, {
-      backdrop: true,
-      size: 'large',
-      title: i18next.t('title.release-note')
-    })
-  }
-}

package/server/index.ts

@@ -1 +0,0 @@
-import './routes'

package/server/routes.ts

@@ -1,11 +0,0 @@
-import { config } from '@things-factory/env'
-
-process.on('bootstrap-module-global-private-route' as any, (app, globalPrivateRouter) => {
-  globalPrivateRouter.get('/frontend-config/:key', async (context, next) => {
-    const { params } = context
-    const { key } = params
-
-    context.status = 200
-    context.body = config.get(`frontEnd/${key}`, {})
-  })
-})