npm - @operato/dataset - Versions diffs - 1.0.0-alpha.38 → 1.0.0-alpha.40 - Mend

@operato/dataset 1.0.0-alpha.38 → 1.0.0-alpha.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/CHANGELOG.md +21 -0
package/demo/index.html +1 -0
package/demo/ox-data-ooc-view.html +185 -0
package/dist/src/index.d.ts +1 -0
package/dist/src/index.js +1 -0
package/dist/src/index.js.map +1 -1
package/dist/src/ox-data-ooc-view.d.ts +10 -0
package/dist/src/ox-data-ooc-view.js +69 -0
package/dist/src/ox-data-ooc-view.js.map +1 -0
package/dist/src/ox-data-sample-view copy.d.ts +13 -0
package/dist/src/ox-data-sample-view copy.js +214 -0
package/dist/src/ox-data-sample-view copy.js.map +1 -0
package/dist/src/ox-data-sample-view.js +19 -68
package/dist/src/ox-data-sample-view.js.map +1 -1
package/dist/src/types.d.ts +14 -0
package/dist/src/types.js.map +1 -1
package/dist/tsconfig.tsbuildinfo +1 -1
package/package.json +12 -11
package/src/index.ts +1 -0
package/src/ox-data-ooc-view.ts +67 -0
package/src/ox-data-sample-view.ts +19 -68
package/src/types.ts +16 -0

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,27 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [1.0.0-alpha.40](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.39...v1.0.0-alpha.40) (2022-03-26)
+### :bug: Bug Fix
+* ox-data-ooc ([77ce499](https://github.com/hatiolab/operato/commit/77ce49978d60cb964ce736f9289655103740f04c))
+## [1.0.0-alpha.39](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.38...v1.0.0-alpha.39) (2022-03-25)
+### :bug: Bug Fix
+* added ox-data-ooc-view ([6693d0c](https://github.com/hatiolab/operato/commit/6693d0cdea7481c877ded73ab1ca1746f49b5ead))
+* ox-data-sample-view ooc oos style ([7e8bebe](https://github.com/hatiolab/operato/commit/7e8bebe1d08eb60a42823bb1850a8d8738b1bb75))
+* ox-data-sample-view ooc,oos icon checked => done ([3e3e345](https://github.com/hatiolab/operato/commit/3e3e3459104eac47a60fac60ab3c6ceeb933df14))
+* ox-data-sample-view style ([ff0513d](https://github.com/hatiolab/operato/commit/ff0513dbd5f8cc6a72c336c2336f544e463ab78a))
 ## [1.0.0-alpha.38](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.37...v1.0.0-alpha.38) (2022-03-25)

package/demo/index.html CHANGED Viewed

@@ -21,6 +21,7 @@
   <body>
     <a href="./ox-data-entry-form.html">ox-data-entry-form</a>
     <a href="./ox-data-sample-view.html">ox-data-sample-view</a>
+    <a href="./ox-data-ooc-view.html">ox-data-ooc-view</a>
     <a href="./ox-data-item-spec.html">ox-data-item-spec</a>
     <a href="./ox-grist-editor-data-item-spec.html">ox-grist-editor-data-item-spec</a>
   </body>

package/demo/ox-data-ooc-view.html ADDED Viewed

@@ -0,0 +1,185 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />
+    <style>
+      body {
+        --ox-checkbox-size: 12px;
+      }
+      #demo {
+      }
+    </style>
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+    <link href="/themes/app-theme.css" rel="stylesheet" />
+    <link href="/themes/form-theme.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="demo"></div>
+    <script type="module">
+      import { html, render } from 'lit'
+      import '@operato/ccp'
+      import '@operato/qc'
+      const parent = document.querySelector('#demo')
+      const dataSet = {
+        name: 'sample',
+        description: 'sample description',
+        useCase: 'CCP',
+        dataItems: [
+          {
+            name: '창고 온도',
+            description: '창고 온도는 섭씨 0도 이하로 유지되어야 합니다.',
+            sequence: 1,
+            tag: 'temp',
+            type: 'number',
+            quota: 1,
+            active: true,
+            unit: '℃',
+            spec: {
+              CCP: {
+                criticalLimits: {
+                  minimum: 100,
+                  maximum: 200
+                },
+                targetLimits: {
+                  minimum: 120,
+                  maximum: 180
+                }
+              }
+            }
+          },
+          {
+            name: '창고 습도',
+            description: '창고 습도는 30% 이하로 유지되어야 합니다.',
+            sequence: 2,
+            tag: 'humid',
+            type: 'number',
+            quota: 5,
+            active: true,
+            unit: '%',
+            spec: {
+              CCP: {
+                criticalLimits: {
+                  minimum: 10,
+                  maximum: 50
+                },
+                targetLimits: {
+                  minimum: 20,
+                  maximum: 40
+                }
+              }
+            }
+          },
+          {
+            name: '육안 검사',
+            description: '육안 검사는 포장전 30분 내로 실행되어야 합니다.',
+            sequence: 3,
+            tag: 'inspection',
+            type: 'boolean',
+            quota: 3,
+            active: true
+          },
+          {
+            name: '품평',
+            description: '품평은 최우수/우수/보통/미달을 포함하여 간단히 평가.',
+            sequence: 4,
+            tag: 'evaluation',
+            type: 'select',
+            options: {
+              options: [
+                { text: '최우수', value: '최우수' },
+                { text: '우수', value: '우수' },
+                { text: '보통', value: '보통' },
+                { text: '미달', value: '미달' }
+              ]
+            },
+            quota: 3,
+            active: true,
+            spec: {
+              CCP: {
+                criticalLimits: {
+                  acceptables: ['최우수', '우수', '보통']
+                },
+                targetLimits: {
+                  acceptables: ['최우수', '우수']
+                }
+              }
+            }
+          },
+          {
+            name: '코멘트',
+            description: '특이사항을 기록함.',
+            sequence: 4,
+            tag: 'comment',
+            type: 'string',
+            quota: 1,
+            active: true
+          },
+          {
+            name: '첨부파일',
+            description: '참조 첨부 파일.',
+            sequence: 4,
+            tag: 'attachment',
+            type: 'file',
+            quota: 1,
+            active: true
+          }
+        ]
+      }
+      var dataOoc = {
+        name: 'Data Sample Name',
+        description: 'Data Sample이 어쩌구 저쩌구 그래서 중요합니다. 당연히 그래야죠.',
+        useCase: 'CCP',
+        state: 'CORRECTED',
+        data: {
+          temp: [1000],
+          humid: [20, 23, 21, 26, 27],
+          inspection: [true, false, true],
+          evaluation: ['최우수', '보통', '우수']
+        },
+        collectedAt: Date.now(),
+        history: [
+          {
+            user: {
+              id: 0,
+              name: 'shnam'
+            },
+            state: 'CREATED',
+            timestamp: Date.now()
+          },
+          {
+            user: {
+              id: 0,
+              name: 'shnam'
+            },
+            state: 'REVIEWED',
+            comment: '금일 생산한 제품은 전량 폐기합니다',
+            timestamp: Date.now()
+          },
+          {
+            user: {
+              id: 0,
+              name: 'shnam'
+            },
+            state: 'CORRECTED',
+            timestamp: Date.now()
+          }
+        ]
+      }
+      render(
+        html`<ox-data-ooc-view
+          .dataSet=${dataSet}
+          .dataOoc=${dataOoc}
+          @change=${e => console.log(e.detail)}
+        ></ox-data-ooc-view>`,
+        parent
+      )
+    </script>
+  </body>
+</html>

package/dist/src/index.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 export * from './ox-data-entry-form.js';
 export * from './ox-data-sample-view.js';
+export * from './ox-data-ooc-view.js';
 export * from './ox-data-item-spec.js';
 export * from './ox-data-use-case';
 export * from './types.js';

package/dist/src/index.js CHANGED Viewed

@@ -1,5 +1,6 @@
 export * from './ox-data-entry-form.js';
 export * from './ox-data-sample-view.js';
+export * from './ox-data-ooc-view.js';
 export * from './ox-data-item-spec.js';
 export * from './ox-data-use-case';
 export * from './types.js';

package/dist/src/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA","sourcesContent":["export * from './ox-data-entry-form.js'\nexport * from './ox-data-sample-view.js'\nexport * from './ox-data-item-spec.js'\nexport * from './ox-data-use-case'\nexport * from './types.js'\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA","sourcesContent":["export * from './ox-data-entry-form.js'\nexport * from './ox-data-sample-view.js'\nexport * from './ox-data-ooc-view.js'\nexport * from './ox-data-item-spec.js'\nexport * from './ox-data-use-case'\nexport * from './types.js'\n"]}

package/dist/src/ox-data-ooc-view.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import '@operato/input/ox-input-file.js';
+import './ox-data-sample-view';
+import { DataOoc, DataSet } from './types.js';
+import { LitElement } from 'lit';
+export declare class OxDataOocView extends LitElement {
+    static styles: import("lit").CSSResult;
+    dataSet?: DataSet;
+    dataOoc?: DataOoc;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/ox-data-ooc-view.js ADDED Viewed

@@ -0,0 +1,69 @@
+import { __decorate } from "tslib";
+import '@operato/input/ox-input-file.js';
+import './ox-data-sample-view';
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let OxDataOocView = class OxDataOocView extends LitElement {
+    render() {
+        var _a, _b;
+        const history = ((_a = this.dataOoc) === null || _a === void 0 ? void 0 : _a.history) || [];
+        const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' });
+        return html `
+      <ox-data-sample-view .dataSample=${this.dataOoc} .dataSet=${this.dataSet}></ox-data-sample-view>
+      <h3 state>${((_b = this.dataOoc) === null || _b === void 0 ? void 0 : _b.state) || ''}</h3>
+      <h3>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>
+        `)}
+    `;
+    }
+};
+OxDataOocView.styles = css `
+    :host {
+      display: flex;
+      flex-direction: column;
+      background-color: var(--main-section-background-color);
+      padding: var(--padding-wide);
+      position: relative;
+    }
+    h3 {
+      margin: var(--title-margin);
+      padding-top: 12px;
+      font: var(--title-font);
+      color: var(--title-text-color);
+    }
+    h3[state] {
+      position: absolute;
+      right: 20px;
+      top: 25px;
+    }
+    [page-description] {
+      margin: var(--page-description-margin);
+      font: var(--page-description-font);
+      color: var(--page-description-color);
+    }
+  `;
+__decorate([
+    property({ type: Object })
+], OxDataOocView.prototype, "dataSet", void 0);
+__decorate([
+    property({ type: Object })
+], OxDataOocView.prototype, "dataOoc", void 0);
+OxDataOocView = __decorate([
+    customElement('ox-data-ooc-view')
+], OxDataOocView);
+export { OxDataOocView };
+//# sourceMappingURL=ox-data-ooc-view.js.map

package/dist/src/ox-data-ooc-view.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ox-data-ooc-view.js","sourceRoot":"","sources":["../../src/ox-data-ooc-view.ts"],"names":[],"mappings":";AAAA,OAAO,iCAAiC,CAAA;AACxC,OAAO,uBAAuB,CAAA;AAG9B,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG3D,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,UAAU;IAmC3C,MAAM;;QACJ,MAAM,OAAO,GAAG,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,OAAO,KAAI,EAAE,CAAA;QAC3C,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;yCAC0B,IAAI,CAAC,OAAO,aAAa,IAAI,CAAC,OAAO;;kBAE5D,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,KAAK,KAAI,EAAE;;;QAGnC,OAAO,CAAC,GAAG,CACX,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;;cAEvC,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC;;cAErC,KAAK,OAAO,IAAI,CAAC,IAAI;;cAErB,OAAO;;SAEZ,CACF;KACF,CAAA;IACH,CAAC;CACF,CAAA;AAzDQ,oBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BlB,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAkB;AAjClC,aAAa;IADzB,aAAa,CAAC,kBAAkB,CAAC;GACrB,aAAa,CA0DzB;SA1DY,aAAa","sourcesContent":["import '@operato/input/ox-input-file.js'\nimport './ox-data-sample-view'\n\nimport { DataOoc, DataSet } from './types.js'\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('ox-data-ooc-view')\nexport class OxDataOocView 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 position: relative;\n }\n\n h3 {\n margin: var(--title-margin);\n padding-top: 12px;\n font: var(--title-font);\n color: var(--title-text-color);\n }\n\n h3[state] {\n position: absolute;\n\n right: 20px;\n top: 25px;\n }\n\n [page-description] {\n margin: var(--page-description-margin);\n font: var(--page-description-font);\n color: var(--page-description-color);\n }\n `\n\n @property({ type: Object }) dataSet?: DataSet\n @property({ type: Object }) dataOoc?: DataOoc\n\n render() {\n const history = this.dataOoc?.history || []\n const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })\n\n return html`\n <ox-data-sample-view .dataSample=${this.dataOoc} .dataSet=${this.dataSet}></ox-data-sample-view>\n\n <h3 state>${this.dataOoc?.state || ''}</h3>\n\n <h3>history</h3>\n ${history.map(\n ({ user, state, comment, timestamp }) => html`\n <p page-description>\n ${formatter.format(new Date(timestamp))}\n <br />\n ${state} by ${user.name}\n <br />\n ${comment}\n </p>\n `\n )}\n `\n }\n}\n"]}

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

@@ -0,0 +1,13 @@
+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 ADDED Viewed

@@ -0,0 +1,214 @@
+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 ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ox-data-sample-view copy.js","sourceRoot":"","sources":["../../src/ox-data-sample-view copy.ts"],"names":[],"mappings":"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","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"]}