@operato/dataset 1.0.0-beta.1 → 1.0.0-beta.12

package/src/grist-editor/ox-popup-data-item-spec.ts

@@ -1,11 +1,12 @@
 import '../ox-data-item-spec.js'
 
-import { LitElement, css, html } from 'lit'
+import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
-import { DataItem } from '../types.js'
-import { ScrollbarStyles } from '@operato/styles'
 import { i18next } from '@operato/i18n'
+import { ScrollbarStyles } from '@operato/styles'
+
+import { DataItem } from '../types.js'
 
 @customElement('ox-popup-data-item-spec')
 export class OxPopupDataItemSpec extends LitElement {
@@ -25,6 +26,7 @@ export class OxPopupDataItemSpec extends LitElement {
       ox-data-item-spec {
         flex: 1;
         overflow-y: auto;
+        padding: var(--padding-wide);
       }
 
       span {

package/src/ox-data-entry-form.ts

@@ -11,6 +11,23 @@ export class OxDataEntryForm extends LitElement {
     :host {
       display: flex;
       flex-direction: row;
+      --item-description-font: normal 0.8rem/1rem var(--theme-font);
+      --item-description-color: var(--page-description-color);
+    }
+
+    h2 {
+      margin: var(--title-margin);
+      font: var(--title-font);
+      color: var(--title-text-color);
+      text-transform: capitalize;
+      text-align: center;
+    }
+    h3 {
+      margin: var(--page-description-margin);
+      font: var(--page-description-font);
+      color: var(--page-description-color);
+      text-transform: capitalize;
+      text-align: center;
     }
 
     form {
@@ -21,24 +38,42 @@ export class OxDataEntryForm extends LitElement {
     }
     label {
       display: grid;
-      grid-template-columns: repeat(12, 1fr);
-      gap: 9px;
+
+      grid-template-rows: auto 1fr;
+      grid-template-columns: 1fr 5fr;
+      grid-template-areas: 'name description' 'empty inputs';
+
+      grid-gap: 9px;
       align-items: center;
       margin-bottom: var(--margin-default);
     }
-    label:nth-child(even) {
+    label:nth-child(odd) {
       background-color: var(--main-section-background-color);
       padding: var(--padding-default) 0;
     }
 
     div[name] {
-      grid-column: span 2 / auto;
+      grid-area: name;
       font: var(--label-font);
       color: var(--label-color);
       text-align: right;
     }
+    div[description] {
+      grid-area: description;
+      opacity: 0.7;
+      font: var(--item-description-font);
+      color: var(--item-description-color);
+      text-align: left;
+    }
+    div[description] * {
+      vertical-align: middle;
+    }
+    div[description] mwc-icon {
+      margin-top: -3px;
+      font-size: 0.9rem;
+    }
     div[elements] {
-      grid-column: span 10 / auto;
+      grid-area: inputs;
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
@@ -57,11 +92,20 @@ export class OxDataEntryForm extends LitElement {
     }
 
     @media only screen and (max-width: 460px) {
-      div[name] {
-        grid-column: span 3 / auto;
+      label {
+        display: grid;
+
+        grid-template-rows: auto auto 1fr;
+        grid-template-columns: 1fr;
+        grid-template-areas: 'name' 'description' 'inputs';
+
+        grid-gap: 9px;
+        align-items: center;
+        margin-bottom: var(--margin-default);
       }
-      div[elements] {
-        grid-column: span 9 / auto;
+
+      div[name] {
+        text-align: left;
       }
     }
   `
@@ -70,7 +114,11 @@ export class OxDataEntryForm extends LitElement {
   @property({ type: Object }) value?: { [tag: string]: any }
 
   render() {
-    return html`<form @change=${(e: Event) => this.onChange(e)}>${this.buildInputs()}</form>`
+    return html` <form @change=${(e: Event) => this.onChange(e)}>
+      <h2>${this.dataSet?.name || ''}</h2>
+      <h3>${this.dataSet?.description || ''}</h3>
+      ${this.buildInputs()}
+    </form>`
   }
 
   private onChange(e: Event) {
@@ -132,6 +180,7 @@ export class OxDataEntryForm extends LitElement {
 
       return html` <label .title=${description}>
         <div name>${name}${unit ? `(${unit})` : ''}</div>
+        <div description><mwc-icon>info_outline</mwc-icon> ${description}</div>
         <div elements>${elements}</div>
       </label>`
     })

package/src/ox-data-ooc-view.ts

@@ -1,10 +1,14 @@
 import '@operato/input/ox-input-file.js'
 import './ox-data-sample-view'
+import '@material/mwc-icon'
 
-import { DataOoc, DataSet } from './types.js'
-import { LitElement, css, html } from 'lit'
+import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
+import { i18next } from '@operato/i18n'
+
+import { DataOoc, DataSet } from './types.js'
+
 @customElement('ox-data-ooc-view')
 export class OxDataOocView extends LitElement {
   static styles = css`
@@ -26,15 +30,74 @@ export class OxDataOocView extends LitElement {
 
     h3[state] {
       position: absolute;
+      margin: 0;
+      padding: 0;
+      right: 10px;
+      width: 90px;
+      text-align: center;
+    }
 
-      right: 20px;
-      top: 25px;
+    mwc-icon {
+      font-size: 16px;
+    }
+    [state] mwc-icon {
+      font-size: 80px;
+      opacity: 0.4;
+      color: var(--primary-background-color);
     }
 
-    [page-description] {
+    [state] div {
+      position: absolute;
+      top: 22px;
+      left: 0;
+      right: 0;
+      font-size: 10px;
+      color: var(--theme-white-color);
+    }
+    [state] [field-state] {
+      display: block;
+      border-radius: 4px;
+      background-color: var(--primary-color);
+      box-shadow: var(--box-shadow);
+      margin-top: var(--margin-narrow);
+      padding: 1px 3px;
+      font-size: 0.8rem;
+    }
+    [danger] [field-state] {
+      background-color: var(--status-danger-color);
+    }
+    [complate] [field-state] {
+      background-color: var(--status-info-color);
+    }
+    [page-history] [field-state] {
+      border-radius: 2px;
+      background-color: var(--primary-color);
+      margin-left: var(--margin-default);
+      padding: 1px 2px;
+      font-size: 0.7rem;
+      color: var(--theme-white-color);
+    }
+    [page-history] {
+      background-color: var(--theme-white-color);
+      box-shadow: var(--box-shadow);
+      border-radius: var(--border-radius);
       margin: var(--page-description-margin);
+      padding: var(--padding-default);
       font: var(--page-description-font);
-      color: var(--page-description-color);
+      color: var(--secondary-color);
+    }
+    [page-history] mwc-icon {
+      position: relative;
+      top: 3px;
+      margin: 0 2px 0 10px;
+    }
+    [field-info] {
+      opacity: 0.7;
+    }
+    [page-history] strong {
+      display: block;
+      font-weight: bold;
+      font-size: 0.9rem;
     }
   `
 
@@ -48,17 +111,22 @@ export class OxDataOocView extends LitElement {
     return html`
       <ox-data-sample-view .dataSample=${this.dataOoc} .dataSet=${this.dataSet}></ox-data-sample-view>
 
-      <h3 state>${this.dataOoc?.state || ''}</h3>
+      <h3 state>
+        <!--상태에 따라 추가로 danger, complate를 어트리뷰트로 추가시 배경컬러 변경되도록 해두었습니다-->
+        <mwc-icon>shield</mwc-icon>
+        <div>${i18next.t('field.name')} <span field-state>${this.dataOoc?.state || ''}</span></div>
+      </h3>
 
-      <h3>history</h3>
+      <h3>${i18next.t('title.history')}</h3>
       ${history.map(
         ({ user, state, comment, timestamp }) => html`
-          <p page-description>
-            ${formatter.format(new Date(timestamp))}
-            <br />
-            ${state} by ${user.name}
-            <br />
-            ${comment}
+          <p page-history>
+            <!--상태에 따라 추가로 danger, complate를 어트리뷰트로 추가시 배경컬러 변경되도록 해두었습니다-->
+            <span field-info
+              >${formatter.format(new Date(timestamp))} <mwc-icon>account_circle</mwc-icon>${user.name}</span
+            >
+            <span field-state>${state}</span>
+            <strong>${comment}</strong>
           </p>
         `
       )}

package/src/ox-data-sample-view.ts

@@ -3,6 +3,8 @@ import '@operato/input/ox-input-file.js'
 import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
+import { i18next } from '@operato/i18n'
+
 import { OxDataUseCase } from './ox-data-use-case.js'
 import { DataItem, DataSample, DataSet } from './types.js'
 
@@ -12,7 +14,6 @@ export class OxDataSampleView extends LitElement {
     :host {
       display: flex;
       flex-direction: column;
-      background-color: var(--main-section-background-color);
     }
 
     form {
@@ -24,13 +25,23 @@ export class OxDataSampleView extends LitElement {
 
     h2 {
       margin: var(--title-margin);
-      padding-top: 25px;
       font: var(--title-font);
       color: var(--title-text-color);
+      text-transform: capitalize;
     }
     [page-description] {
       margin: var(--page-description-margin);
+      opacity: 0.7;
       font: var(--page-description-font);
+      color: var(--secondary-color);
+      text-transform: capitalize;
+    }
+    [page-description] * {
+      vertical-align: middle;
+    }
+    [page-description] mwc-icon {
+      margin-top: -2px;
+      font-size: 0.9rem;
       color: var(--page-description-color);
     }
 
@@ -94,23 +105,24 @@ export class OxDataSampleView extends LitElement {
 
     const { name, description, collectedAt, workDate, workShift } = this.dataSample || {}
 
-    return html` <h2>${name}</h2>
+    return html` <h2>${i18next.t('field.name')}</h2>
       <p page-description>
-        ${description}<br /><br />
-        work date: ${workDate} ${workShift}<br />
-        collected at: ${formatter.format(new Date(collectedAt!))}
+        <mwc-icon>info_outline</mwc-icon> ${i18next.t('field.description')}<br />
+        <mwc-icon>alarm</mwc-icon> ${i18next.t('field.work-date')}: ${workDate} ${workShift} |
+        <mwc-icon>pending_actions</mwc-icon> ${i18next.t('field.collected-at')}:
+        ${formatter.format(new Date(collectedAt!))}
       </p>
 
       <form @change=${(e: Event) => this.onChange(e)}>
         <table>
           <tr>
-            <th item>item</th>
-            <th>description</th>
-            <th>unit</th>
-            <th value>value</th>
-            <th>specification</th>
-            <th>OOC</th>
-            <th>OOS</th>
+            <th item>${i18next.t('field.item')}</th>
+            <th>${i18next.t('field.description')}</th>
+            <th>${i18next.t('field.unit')}</th>
+            <th value>${i18next.t('field.value')}</th>
+            <th>${i18next.t('field.spec')}</th>
+            <th>${i18next.t('field.ooc')}</th>
+            <th>${i18next.t('field.oos')}</th>
           </tr>
           ${dataItems.map(dataItem => {
             const { ooc, oos } = this.evaluateOOC(dataItem, data?.[dataItem.tag]) || {}

package/translations/en.json

@@ -1 +1,57 @@
-{}
+{
+  "button.corrected": "corrected",
+  "button.reviewed": "reviewed",
+  "field.appliance": "appliance",
+  "field.collected_at": "collected at",
+  "field.corrective-action": "corrective action",
+  "field.corrector": "corrector",
+  "field.corrected-at": "corrected at",
+  "field.data": "data",
+  "field.data-sample": "data sample",
+  "field.data-set": "data set",
+  "field.device-id": "device id",
+  "field.entry-role": "entry role",
+  "field.entry-type": "entry type",
+  "field.entry-view": "entry view",
+  "field.hidden": "hidden",
+  "field.latest-collected-at": "latest collected at",
+  "field.monitor-type": "monitor type",
+  "field.monitor-view": "monitor view",
+  "field.netmask": "network mask",
+  "field.next-schedule": "next schedule",
+  "field.oos": "out of critical limit",
+  "field.ooc": "out of control limit",
+  "field.options": "options",
+  "field.partition-keys": "partition keys",
+  "field.prev-schedule": "previous schedule",
+  "field.quota": "sampling #",
+  "field.raw-data": "raw data",
+  "field.ref-by": "ref. by",
+  "field.report-type": "report type",
+  "field.report-view": "report view",
+  "field.serial-no": "serial #",
+  "field.spec": "spec",
+  "field.state": "state",
+  "field.supervisory-role": "supervisory role",
+  "field.tag": "tag name",
+  "field.unit": "unit",
+  "field.use-case": "use case",
+  "field.work-date": "work date",
+  "field.work-shift": "work shift",
+  "text.automatically collected": "automatically collected",
+  "text.data sample created successfully": "a data sample created successfully",
+  "text.data ooc updated successfully": "a data ooc updated successfully",
+  "text.manually collected": "manually collected",
+  "title.data-entry-form": "data entry form",
+  "title.data-entry list": "data entry list",
+  "title.data-item list": "data item list",
+  "title.data-monitor-view": "data monitor view",
+  "title.data-report-view": "data report view",
+  "title.data-ooc list": "data OOC list",
+  "title.data-ooc view": "data OOC view",
+  "title.data-sample list": "data sample list",
+  "title.data-sample view": "data sample view",
+  "title.data-sensor list": "data sensor list",
+  "title.data-set list": "data set list",
+  "title.edit code": "edit code"
+}

package/translations/ko.json

@@ -1 +1,56 @@
-{}
+{
+  "button.corrected": "조치완료",
+  "button.reviewed": "검토완료",
+  "field.appliance": "어플라이언스",
+  "field.collected_at": "수집일시",
+  "field.corrective-action": "조치 활동",
+  "field.corrector": "조치자",
+  "field.corrected-at": "조치 시간",
+  "field.data": "데이타",
+  "field.data-sample": "데이타 샘플",
+  "field.data-set": "데이타셋",
+  "field.device-id": "디바이스 아이디",
+  "field.entry-role": "입력담당 역할",
+  "field.entry-type": "입력용 화면종류",
+  "field.entry-view": "입력용 화면",
+  "field.hidden": "숨기기",
+  "field.latest-collected-at": "최근 수집 시간",
+  "field.monitor-type": "모니터용 화면종류",
+  "field.monitor-view": "모니터용 화면",
+  "field.netmask": "네트워크마스크",
+  "field.next-schedule": "다음 수집계획",
+  "field.oos": "허용한계 이탈여부",
+  "field.ooc": "관리한계 이탈여부",
+  "field.options": "선택옵션",
+  "field.partition-keys": "파티션 키",
+  "field.prev-schedule": "이전 수집계획",
+  "field.quota": "샘플수",
+  "field.raw-data": "데이타 원본",
+  "field.ref-by": "참조아이템",
+  "field.report-type": "리포트용 화면종류",
+  "field.report-view": "리포트용 화면",
+  "field.serial-no": "시리얼번호",
+  "field.spec": "명세",
+  "field.state": "상태",
+  "field.supervisory-role": "관리자 역할",
+  "field.tag": "태그이름",
+  "field.unit": "단위",
+  "field.use-case": "사용 사례",
+  "field.work-date": "작업기준일",
+  "field.work-shift": "교대근무조",
+  "text.automatically collected": "자동 수집",
+  "text.data sample created successfully": "데이타 샘플이 성공적으로 생성되었습니다",
+  "text.data ooc updated successfully": "이탈데이타 내용이 수정되었습니다",
+  "text.manually collected": "수동 수집",
+  "title.data-entry-form": "데이타 입력",
+  "title.data-item list": "데이타 아이템 조회",
+  "title.data-monitor-view": "데이타 모니터",
+  "title.data-report-view": "데이타 리포트",
+  "title.data-ooc list": "데이타 이탈점 조회",
+  "title.data-ooc view": "데이타 이탈점 상세",
+  "title.data-sample list": "데이타 샘플 조회",
+  "title.data-sample view": "데이타 샘플 상세",
+  "title.data-sensor list": "데이타 센서 조회",
+  "title.data-set list": "데이타 셋 조회",
+  "title.edit code": "코드 편집"
+}

package/translations/ms.json

@@ -1 +1,56 @@
-{}
+{
+  "button.corrected": "corrected",
+  "button.reviewed": "reviewed",
+  "field.appliance": "appliance",
+  "field.collected_at": "collected at",
+  "field.corrective-action": "corrective action",
+  "field.corrector": "corrector",
+  "field.corrected-at": "corrected at",
+  "field.data": "data",
+  "field.data-sample": "data sample",
+  "field.data-set": "data set",
+  "field.device-id": "device id",
+  "field.entry-role": "entry role",
+  "field.entry-type": "entry type",
+  "field.entry-view": "entry view",
+  "field.latest-collected-at": "latest collected at",
+  "field.monitor-type": "monitor type",
+  "field.monitor-view": "monitor view",
+  "field.netmask": "network mask",
+  "field.next-schedule": "next schedule",
+  "field.oos": "out of critical limit",
+  "field.ooc": "out of control limit",
+  "field.options": "options",
+  "field.hidden": "hidden",
+  "field.partition-keys": "partition keys",
+  "field.prev-schedule": "previous schedule",
+  "field.quota": "sampling #",
+  "field.raw-data": "raw data",
+  "field.ref-by": "ref. by",
+  "field.report-type": "report type",
+  "field.report-view": "report view",
+  "field.serial-no": "serial #",
+  "field.spec": "spec",
+  "field.state": "keadaan",
+  "field.supervisory-role": "supervisory role",
+  "field.tag": "tag name",
+  "field.unit": "unit",
+  "field.use-case": "use case",
+  "field.work-date": "work date",
+  "field.work-shift": "work shift",
+  "text.automatically collected": "automatically collected",
+  "text.data sample created successfully": "a data sample created successfully",
+  "text.data ooc updated successfully": "a data ooc updated successfully",
+  "text.manually collected": "manually collected",
+  "title.data-entry-form": "data entry form",
+  "title.data-item list": "data item list",
+  "title.data-monitor-view": "data monitor view",
+  "title.data-report-view": "data report view",
+  "title.data-ooc list": "data OOC list",
+  "title.data-ooc view": "data OOC view",
+  "title.data-sample list": "data sample list",
+  "title.data-sample view": "data sample view",
+  "title.data-sensor list": "data sensor list",
+  "title.data-set list": "data set list",
+  "title.edit code": "edit code"
+}

package/translations/zh.json

@@ -1 +1,56 @@
-{}
+{
+  "button.corrected": "corrected",
+  "button.reviewed": "reviewed",
+  "field.appliance": "appliance",
+  "field.collected_at": "collected at",
+  "field.corrective-action": "corrective action",
+  "field.corrector": "corrector",
+  "field.corrected-at": "corrected at",
+  "field.data": "data",
+  "field.data-sample": "data sample",
+  "field.data-set": "data set",
+  "field.device-id": "device id",
+  "field.entry-role": "entry role",
+  "field.entry-type": "entry type",
+  "field.entry-view": "entry view",
+  "field.hidden": "hidden",
+  "field.latest-collected-at": "latest collected at",
+  "field.monitor-type": "monitor type",
+  "field.monitor-view": "monitor view",
+  "field.netmask": "network mask",
+  "field.next-schedule": "next schedule",
+  "field.oos": "out of critical limit",
+  "field.ooc": "out of control limit",
+  "field.options": "options",
+  "field.partition-keys": "partition keys",
+  "field.prev-schedule": "previous schedule",
+  "field.quota": "sampling #",
+  "field.raw-data": "raw data",
+  "field.ref-by": "ref. by",
+  "field.report-type": "report type",
+  "field.report-view": "report view",
+  "field.serial-no": "serial #",
+  "field.spec": "spec",
+  "field.state": "状态",
+  "field.supervisory-role": "supervisory role",
+  "field.tag": "tag name",
+  "field.unit": "unit",
+  "field.use-case": "use case",
+  "field.work-date": "work date",
+  "field.work-shift": "work shift",
+  "text.automatically collected": "automatically collected",
+  "text.data sample created successfully": "a data sample created successfully",
+  "text.data ooc updated successfully": "a data ooc updated successfully",
+  "text.manually collected": "manually collected",
+  "title.data-entry-form": "data entry form",
+  "title.data-item list": "data item list",
+  "title.data-monitor-view": "data monitor view",
+  "title.data-report-view": "data report view",
+  "title.data-ooc list": "data OOC list",
+  "title.data-ooc view": "data OOC view",
+  "title.data-sample list": "data sample list",
+  "title.data-sample view": "data sample view",
+  "title.data-sensor list": "data sensor list",
+  "title.data-set list": "data set list",
+  "title.edit code": "edit code"
+}