@operato/dataset 1.0.0-beta.10 → 1.0.0-beta.13

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

@@ -11,10 +11,22 @@ 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,
+    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;
     }
 
@@ -48,10 +60,18 @@ export class OxDataEntryForm extends LitElement {
     }
     div[description] {
       grid-area: description;
-      font: var(--page-description-font);
-      color: var(--page-description-color);
+      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-area: inputs;
       display: flex;
@@ -160,7 +180,7 @@ export class OxDataEntryForm extends LitElement {
 
       return html` <label .title=${description}>
         <div name>${name}${unit ? `(${unit})` : ''}</div>
-        <div description>${description}</div>
+        <div description><mwc-icon>info_outline</mwc-icon> ${description}</div>
         <div elements>${elements}</div>
       </label>`
     })

package/src/ox-data-item-spec.ts

@@ -12,20 +12,75 @@ export class OxDataItemSpec extends LitElement {
     :host {
       display: flex;
       flex-direction: row;
-      border-bottom: var(--border-dark-color);
-      padding: var(--margin-default) 0;
-    }
-    [specName] {
-      font: var(--legend-font);
-      color: var(--legend-text-color);
-    }
-    [description] {
-      font: var(--form-sublabel-font);
-      opacity: 0.8;
+      --item-description-font: normal 0.8rem/1rem var(--theme-font);
+      --item-description-color: var(--page-description-color);
     }
 
     form {
       flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+    label {
+      display: grid;
+
+      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(odd) {
+      background-color: var(--main-section-background-color);
+      padding: var(--padding-default) 0;
+    }
+    div[name] {
+      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;
+    }
+    ox-properties-dynamic-view {
+      grid-area: inputs;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 10px;
+      padding-right: var(--padding-default);
+    }
+
+    @media only screen and (max-width: 460px) {
+      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[name] {
+        text-align: left;
+      }
     }
   `
 
@@ -39,10 +94,12 @@ export class OxDataItemSpec extends LitElement {
   render() {
     return html`<form @property-change=${(e: Event) => this.onChange(e)}>
       ${this.dataItemSpecSets.map(
-        ({ name, description, specs }) => html` <div specName>${name}</div>
-          <div description>${description}</div>
+        ({ name, description, specs }) => html` <label
+          ><div name>${name}</div>
+          <div description><mwc-icon>info_outline</mwc-icon> ${description}</div>
           <ox-properties-dynamic-view data-name=${name} .props=${specs} .value=${this.value?.[name]}>
-          </ox-properties-dynamic-view>`
+          </ox-properties-dynamic-view
+        ></label>`
       )}
     </form>`
   }

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

@@ -16,7 +16,6 @@ export class OxDataOocView extends LitElement {
       display: flex;
       flex-direction: column;
       background-color: var(--main-section-background-color);
-      padding: var(--padding-wide);
 
       position: relative;
     }
@@ -30,19 +29,74 @@ export class OxDataOocView extends LitElement {
 
     h3[state] {
       position: absolute;
-
-      right: 20px;
-      top: 25px;
+      margin: 0;
+      padding: 0;
+      right: 10px;
+      width: 90px;
+      text-align: center;
     }
 
     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;
     }
   `
 
@@ -56,17 +110,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>${i18next.t('title.history')}</h3>
       ${history.map(
         ({ user, state, comment, timestamp }) => html`
-          <p page-description>
-            ${formatter.format(new Date(timestamp))}
-            <br />
-            ${state} <mwc-icon>account_circle</mwc-icon> ${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

@@ -14,7 +14,6 @@ export class OxDataSampleView extends LitElement {
     :host {
       display: flex;
       flex-direction: column;
-      background-color: var(--main-section-background-color);
     }
 
     form {
@@ -26,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);
     }
 
@@ -98,9 +107,10 @@ export class OxDataSampleView extends LitElement {
 
     return html` <h2>${i18next.t('field.name')}</h2>
       <p page-description>
-        ${i18next.t('field.description')}<br /><br />
-        ${i18next.t('field.work-date')}: ${workDate} ${workShift}<br />
-        ${i18next.t('field.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)}>

package/dist/src/ox-data-sample-view copy.d.ts

@@ -1,13 +0,0 @@
-import '@operato/input/ox-input-file.js';
-import { DataSample, DataSet } from './types.js';
-import { LitElement } from 'lit';
-export declare class OxDataSampleView extends LitElement {
-    static styles: import("lit").CSSResult;
-    dataSet?: DataSet;
-    dataSample?: DataSample;
-    render(): import("lit-html").TemplateResult<1>;
-    private onChange;
-    private buildSpec;
-    private buildValue;
-    private evaluateOOC;
-}

package/dist/src/ox-data-sample-view copy.js

@@ -1,214 +0,0 @@
-import { __decorate } from "tslib";
-import '@operato/input/ox-input-file.js';
-import { LitElement, css, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { OxDataUseCase } from './ox-data-use-case.js';
-let OxDataSampleView = class OxDataSampleView extends LitElement {
-    render() {
-        var _a, _b, _c, _d, _e;
-        const dataItems = ((_a = this.dataSet) === null || _a === void 0 ? void 0 : _a.dataItems.filter(item => item.active)) || [];
-        const data = ((_b = this.dataSample) === null || _b === void 0 ? void 0 : _b.data) || {};
-        const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' });
-        return html ` <h2>${(_c = this.dataSample) === null || _c === void 0 ? void 0 : _c.name}</h2>
-      <p page-description>
-        ${(_d = this.dataSample) === null || _d === void 0 ? void 0 : _d.description}<br /><br />
-        collected at: ${formatter.format(new Date((_e = this.dataSample) === null || _e === void 0 ? void 0 : _e.collectedAt))}
-      </p>
-
-      <form @change=${(e) => this.onChange(e)}>
-        <table>
-          <tr>
-            <th>item</th>
-            <th>description</th>
-            <th>unit</th>
-            <th>value</th>
-            <th>specification</th>
-            <th>OOC</th>
-            <th>OOS</th>
-          </tr>
-          ${dataItems.map(dataItem => {
-            const { ooc, oos } = this.evaluateOOC(dataItem, data === null || data === void 0 ? void 0 : data[dataItem.tag]) || {};
-            return html `
-              <tr ?ooc=${ooc} ?oos=${oos}>
-                <td name>${dataItem.name}</td>
-                <td>${dataItem.description}</td>
-                <td>${dataItem.unit}</td>
-                <td>${this.buildValue(dataItem)}</td>
-                <td><pre>${this.buildSpec(dataItem)}</pre></td>
-                <td>${ooc ? html `<mwc-icon>done</mwc-icon>` : ''}</td>
-                <td>${oos ? html `<mwc-icon>done</mwc-icon>` : ''}</td>
-              </tr>
-            `;
-        })}
-        </table>
-
-        <label><mwc-icon>build_circle</mwc-icon> correction activity</label>
-        <textarea name="correctionActivity"> </textarea>
-      </form>`;
-    }
-    onChange(e) { }
-    buildSpec(dataItem) {
-        return OxDataUseCase.elaborateDataItemSpec(this.dataSet, dataItem);
-    }
-    buildValue(dataItem) {
-        var _a;
-        const { tag, type } = dataItem;
-        if (!this.dataSample) {
-            return '';
-        }
-        const value = (_a = this.dataSample) === null || _a === void 0 ? void 0 : _a.data[dataItem.tag];
-        if (value === undefined) {
-            return '';
-        }
-        const values = value instanceof Array ? value : [value];
-        const elements = values.map((_, idx) => {
-            const v = value[idx];
-            switch (type) {
-                case 'boolean':
-                    return html ` <input type="checkbox" name=${tag} .checked=${v} disabled />`;
-                    break;
-                case 'select':
-                case 'number':
-                case 'string':
-                default:
-                    return String(v === undefined ? '' : v);
-            }
-        });
-        return type === 'boolean' ? elements : elements.join(', ');
-    }
-    evaluateOOC(dataItem, value) {
-        return OxDataUseCase.evaluateItem(this.dataSet, dataItem, value);
-    }
-};
-OxDataSampleView.styles = css `
-    :host {
-      display: flex;
-      flex-direction: column;
-      background-color: var(--main-section-background-color);
-      padding: var(--padding-wide);
-    }
-
-    form {
-      flex: 1;
-
-      display: flex;
-      flex-direction: column;
-    }
-    label {
-      font: var(--label-font);
-      color: var(--label-color);
-    }
-    label * {
-      text-align: middle;
-    }
-    label:nth-child(even) {
-      background-color: var(--main-section-background-color);
-      padding: var(--padding-default) 0;
-    }
-    label mwc-icon {
-      position: relative;
-      top: 4px;
-      font-size: 18px;
-      color: var(--status-danger-color);
-    }
-
-    div[name] {
-      grid-column: span 2 / auto;
-      font: var(--label-font);
-      color: var(--label-color);
-      text-align: right;
-    }
-    div[elements] {
-      grid-column: span 10 / auto;
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      gap: 10px;
-      padding-right: var(--padding-default);
-    }
-    div[elements] * {
-      flex: 1;
-    }
-    div[elements] input,
-    div[elements] select {
-      border: var(--input-field-border);
-      border-radius: var(--input-field-border-radius);
-      padding: var(--input-field-padding);
-      font: var(--input-field-font);
-    }
-    h2 {
-      margin: var(--title-margin);
-      padding-top: 25px;
-      font: var(--title-font);
-      color: var(--title-text-color);
-    }
-    [page-description] {
-      margin: var(--page-description-margin);
-      font: var(--page-description-font);
-      color: var(--page-description-color);
-    }
-    table {
-      border-collapse: collapse;
-      margin-bottom: var(--margin-default);
-    }
-    th {
-      padding: var(--th-padding);
-      border-top: var(--th-border-top);
-      border-bottom: var(--td-border-bottom);
-      text-transform: var(--th-text-transform);
-      font: var(--th-font);
-      color: var(--th-color);
-      text-align: left;
-    }
-    tr {
-      background-color: var(--tr-background-color);
-    }
-    tr:nth-child(odd) {
-      background-color: var(--tr-background-odd-color);
-    }
-    tr:hover {
-      background-color: var(--tr-background-hover-color);
-    }
-    tr[ooc],
-    tr[oos] {
-      background-color: #fefbdf;
-    }
-    td {
-      border-bottom: var(--td-border-bottom);
-      padding: var(--td-padding);
-      font: var(--td-font);
-      color: var(--td-color);
-    }
-    td[name] {
-      font-weight: bold;
-    }
-    td mwc-icon {
-      color: var(--status-danger-color);
-    }
-    textarea {
-      border: var(--input-field-border);
-      border-radius: var(--input-border-radius);
-      padding: var(--input-field-padding);
-      font: var(--input-field-font);
-    }
-
-    @media only screen and (max-width: 460px) {
-      div[name] {
-        grid-column: span 3 / auto;
-      }
-      div[elements] {
-        grid-column: span 9 / auto;
-      }
-    }
-  `;
-__decorate([
-    property({ type: Object })
-], OxDataSampleView.prototype, "dataSet", void 0);
-__decorate([
-    property({ type: Object })
-], OxDataSampleView.prototype, "dataSample", void 0);
-OxDataSampleView = __decorate([
-    customElement('ox-data-sample-view')
-], OxDataSampleView);
-export { OxDataSampleView };
-//# sourceMappingURL=ox-data-sample-view%20copy.js.map

package/dist/src/ox-data-sample-view copy.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-data-sample-view copy.js","sourceRoot":"","sources":["../../src/ox-data-sample-view copy.ts"],"names":[],"mappings":";AAAA,OAAO,iCAAiC,CAAA;AAGxC,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAGrD,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,UAAU;IA8H9C,MAAM;;QACJ,MAAM,SAAS,GAAG,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,KAAI,EAAE,CAAA;QAC3E,MAAM,IAAI,GAAG,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,IAAI,KAAI,EAAE,CAAA;QACxC,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CAAA;QAExG,OAAO,IAAI,CAAA,QAAQ,MAAA,IAAI,CAAC,UAAU,0CAAE,IAAI;;UAElC,MAAA,IAAI,CAAC,UAAU,0CAAE,WAAW;wBACd,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,MAAA,IAAI,CAAC,UAAU,0CAAE,WAAY,CAAC,CAAC;;;sBAG3D,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;;;;;;;;;;;YAWxC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YACzB,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAA;YAC3E,OAAO,IAAI,CAAA;yBACE,GAAG,SAAS,GAAG;2BACb,QAAQ,CAAC,IAAI;sBAClB,QAAQ,CAAC,WAAW;sBACpB,QAAQ,CAAC,IAAI;sBACb,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;2BACpB,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC;sBAC7B,GAAG,CAAC,CAAC,CAAC,IAAI,CAAA,2BAA2B,CAAC,CAAC,CAAC,EAAE;sBAC1C,GAAG,CAAC,CAAC,CAAC,IAAI,CAAA,2BAA2B,CAAC,CAAC,CAAC,EAAE;;aAEnD,CAAA;QACH,CAAC,CAAC;;;;;cAKE,CAAA;IACZ,CAAC;IAEO,QAAQ,CAAC,CAAQ,IAAG,CAAC;IAErB,SAAS,CAAC,QAAkB;QAClC,OAAO,aAAa,CAAC,qBAAqB,CAAC,IAAI,CAAC,OAAQ,EAAE,QAAQ,CAAC,CAAA;IACrE,CAAC;IAEO,UAAU,CAAC,QAAkB;;QACnC,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,QAAQ,CAAA;QAE9B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACpB,OAAO,EAAE,CAAA;SACV;QAED,MAAM,KAAK,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAA;QACjD,IAAI,KAAK,KAAK,SAAS,EAAE;YACvB,OAAO,EAAE,CAAA;SACV;QACD,MAAM,MAAM,GAAG,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;QAEvD,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAM,EAAE,GAAG,EAAE,EAAE;YAC1C,MAAM,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAA;YAEpB,QAAQ,IAAI,EAAE;gBACZ,KAAK,SAAS;oBACZ,OAAO,IAAI,CAAA,gCAAgC,GAAG,aAAa,CAAC,cAAc,CAAA;oBAC1E,MAAK;gBAEP,KAAK,QAAQ,CAAC;gBACd,KAAK,QAAQ,CAAC;gBACd,KAAK,QAAQ,CAAC;gBACd;oBACE,OAAO,MAAM,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;aAC1C;QACH,CAAC,CAAC,CAAA;QAEF,OAAO,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC5D,CAAC;IAEO,WAAW,CAAC,QAAkB,EAAE,KAAU;QAChD,OAAO,aAAa,CAAC,YAAY,CAAC,IAAI,CAAC,OAAQ,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAA;IACnE,CAAC;CACF,CAAA;AAjNQ,uBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwHlB,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAwB;AA5HxC,gBAAgB;IAD5B,aAAa,CAAC,qBAAqB,CAAC;GACxB,gBAAgB,CAkN5B;SAlNY,gBAAgB","sourcesContent":["import '@operato/input/ox-input-file.js'\n\nimport { DataItem, DataSample, DataSet } from './types.js'\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxDataUseCase } from './ox-data-use-case.js'\n\n@customElement('ox-data-sample-view')\nexport class OxDataSampleView extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      background-color: var(--main-section-background-color);\n      padding: var(--padding-wide);\n    }\n\n    form {\n      flex: 1;\n\n      display: flex;\n      flex-direction: column;\n    }\n    label {\n      font: var(--label-font);\n      color: var(--label-color);\n    }\n    label * {\n      text-align: middle;\n    }\n    label:nth-child(even) {\n      background-color: var(--main-section-background-color);\n      padding: var(--padding-default) 0;\n    }\n    label mwc-icon {\n      position: relative;\n      top: 4px;\n      font-size: 18px;\n      color: var(--status-danger-color);\n    }\n\n    div[name] {\n      grid-column: span 2 / auto;\n      font: var(--label-font);\n      color: var(--label-color);\n      text-align: right;\n    }\n    div[elements] {\n      grid-column: span 10 / auto;\n      display: flex;\n      flex-direction: row;\n      flex-wrap: wrap;\n      gap: 10px;\n      padding-right: var(--padding-default);\n    }\n    div[elements] * {\n      flex: 1;\n    }\n    div[elements] input,\n    div[elements] select {\n      border: var(--input-field-border);\n      border-radius: var(--input-field-border-radius);\n      padding: var(--input-field-padding);\n      font: var(--input-field-font);\n    }\n    h2 {\n      margin: var(--title-margin);\n      padding-top: 25px;\n      font: var(--title-font);\n      color: var(--title-text-color);\n    }\n    [page-description] {\n      margin: var(--page-description-margin);\n      font: var(--page-description-font);\n      color: var(--page-description-color);\n    }\n    table {\n      border-collapse: collapse;\n      margin-bottom: var(--margin-default);\n    }\n    th {\n      padding: var(--th-padding);\n      border-top: var(--th-border-top);\n      border-bottom: var(--td-border-bottom);\n      text-transform: var(--th-text-transform);\n      font: var(--th-font);\n      color: var(--th-color);\n      text-align: left;\n    }\n    tr {\n      background-color: var(--tr-background-color);\n    }\n    tr:nth-child(odd) {\n      background-color: var(--tr-background-odd-color);\n    }\n    tr:hover {\n      background-color: var(--tr-background-hover-color);\n    }\n    tr[ooc],\n    tr[oos] {\n      background-color: #fefbdf;\n    }\n    td {\n      border-bottom: var(--td-border-bottom);\n      padding: var(--td-padding);\n      font: var(--td-font);\n      color: var(--td-color);\n    }\n    td[name] {\n      font-weight: bold;\n    }\n    td mwc-icon {\n      color: var(--status-danger-color);\n    }\n    textarea {\n      border: var(--input-field-border);\n      border-radius: var(--input-border-radius);\n      padding: var(--input-field-padding);\n      font: var(--input-field-font);\n    }\n\n    @media only screen and (max-width: 460px) {\n      div[name] {\n        grid-column: span 3 / auto;\n      }\n      div[elements] {\n        grid-column: span 9 / auto;\n      }\n    }\n  `\n\n  @property({ type: Object }) dataSet?: DataSet\n  @property({ type: Object }) dataSample?: DataSample\n\n  render() {\n    const dataItems = this.dataSet?.dataItems.filter(item => item.active) || []\n    const data = this.dataSample?.data || {}\n    const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })\n\n    return html` <h2>${this.dataSample?.name}</h2>\n      <p page-description>\n        ${this.dataSample?.description}<br /><br />\n        collected at: ${formatter.format(new Date(this.dataSample?.collectedAt!))}\n      </p>\n\n      <form @change=${(e: Event) => this.onChange(e)}>\n        <table>\n          <tr>\n            <th>item</th>\n            <th>description</th>\n            <th>unit</th>\n            <th>value</th>\n            <th>specification</th>\n            <th>OOC</th>\n            <th>OOS</th>\n          </tr>\n          ${dataItems.map(dataItem => {\n            const { ooc, oos } = this.evaluateOOC(dataItem, data?.[dataItem.tag]) || {}\n            return html`\n              <tr ?ooc=${ooc} ?oos=${oos}>\n                <td name>${dataItem.name}</td>\n                <td>${dataItem.description}</td>\n                <td>${dataItem.unit}</td>\n                <td>${this.buildValue(dataItem)}</td>\n                <td><pre>${this.buildSpec(dataItem)}</pre></td>\n                <td>${ooc ? html`<mwc-icon>done</mwc-icon>` : ''}</td>\n                <td>${oos ? html`<mwc-icon>done</mwc-icon>` : ''}</td>\n              </tr>\n            `\n          })}\n        </table>\n\n        <label><mwc-icon>build_circle</mwc-icon> correction activity</label>\n        <textarea name=\"correctionActivity\"> </textarea>\n      </form>`\n  }\n\n  private onChange(e: Event) {}\n\n  private buildSpec(dataItem: DataItem) {\n    return OxDataUseCase.elaborateDataItemSpec(this.dataSet!, dataItem)\n  }\n\n  private buildValue(dataItem: DataItem) {\n    const { tag, type } = dataItem\n\n    if (!this.dataSample) {\n      return ''\n    }\n\n    const value = this.dataSample?.data[dataItem.tag]\n    if (value === undefined) {\n      return ''\n    }\n    const values = value instanceof Array ? value : [value]\n\n    const elements = values.map((_: any, idx) => {\n      const v = value[idx]\n\n      switch (type) {\n        case 'boolean':\n          return html` <input type=\"checkbox\" name=${tag} .checked=${v} disabled />`\n          break\n\n        case 'select':\n        case 'number':\n        case 'string':\n        default:\n          return String(v === undefined ? '' : v)\n      }\n    })\n\n    return type === 'boolean' ? elements : elements.join(', ')\n  }\n\n  private evaluateOOC(dataItem: DataItem, value: any) {\n    return OxDataUseCase.evaluateItem(this.dataSet!, dataItem, value)\n  }\n}\n"]}