@operato/dataset 1.0.0-alpha.36 → 1.0.0-alpha.39
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.
- package/CHANGELOG.md +37 -0
- package/demo/index.html +2 -0
- package/demo/ox-data-item-spec.html +43 -39
- package/demo/ox-data-ooc-view.html +184 -0
- package/demo/ox-data-sample-view.html +150 -0
- package/demo/ox-grist-editor-data-item-spec.html +43 -39
- package/dist/src/grist-editor/ox-grist-editor-data-item-spec.js +5 -5
- package/dist/src/grist-editor/ox-grist-editor-data-item-spec.js.map +1 -1
- package/dist/src/index.d.ts +3 -0
- package/dist/src/index.js +3 -0
- package/dist/src/index.js.map +1 -1
- package/dist/src/ox-data-entry-form.js +4 -9
- package/dist/src/ox-data-entry-form.js.map +1 -1
- package/dist/src/ox-data-item-spec.d.ts +1 -7
- package/dist/src/ox-data-item-spec.js +5 -15
- package/dist/src/ox-data-item-spec.js.map +1 -1
- package/dist/src/ox-data-ooc-view.d.ts +10 -0
- package/dist/src/ox-data-ooc-view.js +58 -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.d.ts +13 -0
- package/dist/src/ox-data-sample-view.js +165 -0
- package/dist/src/ox-data-sample-view.js.map +1 -0
- package/dist/src/ox-data-use-case.d.ts +16 -0
- package/dist/src/ox-data-use-case.js +111 -0
- package/dist/src/ox-data-use-case.js.map +1 -0
- package/dist/src/types.d.ts +36 -2
- package/dist/src/types.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +14 -11
- package/src/grist-editor/ox-grist-editor-data-item-spec.ts +5 -5
- package/src/index.ts +3 -0
- package/src/ox-data-entry-form.ts +4 -9
- package/src/ox-data-item-spec.ts +5 -17
- package/src/ox-data-ooc-view.ts +56 -0
- package/src/ox-data-sample-view.ts +171 -0
- package/src/ox-data-use-case.ts +147 -0
- package/src/types.ts +30 -2
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import '@operato/input/ox-input-file.js';
|
|
3
|
-
import {
|
|
3
|
+
import { css, html, LitElement } from 'lit';
|
|
4
4
|
import { customElement, property } from 'lit/decorators.js';
|
|
5
5
|
let OxDataEntryForm = class OxDataEntryForm extends LitElement {
|
|
6
6
|
render() {
|
|
@@ -21,7 +21,7 @@ let OxDataEntryForm = class OxDataEntryForm extends LitElement {
|
|
|
21
21
|
const samples = new Array(quota).fill(0);
|
|
22
22
|
const value = this.value && this.value[tag];
|
|
23
23
|
const elements = samples.map((_, idx) => {
|
|
24
|
-
const v =
|
|
24
|
+
const v = value instanceof Array ? value[idx] : idx === 0 ? value : undefined;
|
|
25
25
|
switch (type) {
|
|
26
26
|
case 'select':
|
|
27
27
|
return html ` <select .name=${tag}>
|
|
@@ -57,15 +57,10 @@ let OxDataEntryForm = class OxDataEntryForm extends LitElement {
|
|
|
57
57
|
buildValue() {
|
|
58
58
|
const dataItems = this.dataSet.dataItems;
|
|
59
59
|
return (dataItems || []).reduce((sum, dataItem) => {
|
|
60
|
-
const { tag,
|
|
60
|
+
const { tag, type } = dataItem;
|
|
61
61
|
const editors = Array.prototype.slice.call(this.renderRoot.querySelectorAll(`[name=${tag}]`));
|
|
62
62
|
if (editors.length > 0) {
|
|
63
|
-
sum[tag] =
|
|
64
|
-
editors.length > 1
|
|
65
|
-
? editors.map(editor => (type === 'boolean' ? editor.checked : editor.value))
|
|
66
|
-
: type === 'boolean'
|
|
67
|
-
? editors[0].checked
|
|
68
|
-
: editors[0].value;
|
|
63
|
+
sum[tag] = editors.map(editor => (type === 'boolean' ? editor.checked : editor.value));
|
|
69
64
|
}
|
|
70
65
|
return sum;
|
|
71
66
|
}, {});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-data-entry-form.js","sourceRoot":"","sources":["../../src/ox-data-entry-form.ts"],"names":[],"mappings":";AAAA,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"ox-data-entry-form.js","sourceRoot":"","sources":["../../src/ox-data-entry-form.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-input-file.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { DataSet } from './types.js'\n\n@customElement('ox-data-entry-form')\nexport class OxDataEntryForm extends LitElement {\n static styles = css`\n :host {\n display: flex;\n flex-direction: row;\n }\n\n form {\n flex: 1;\n\n display: flex;\n flex-direction: column;\n }\n label {\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n gap: 9px;\n align-items: center;\n margin-bottom: var(--margin-default);\n }\n label:nth-child(even) {\n background-color: var(--main-section-background-color);\n padding: var(--padding-default) 0;\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\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 }) value?: { [tag: string]: any }\n\n render() {\n return html`<form @change=${(e: Event) => this.onChange(e)}>${this.buildInputs()}</form>`\n }\n\n private onChange(e: Event) {\n this.value = this.buildValue()\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n\n private buildInputs() {\n const dataItems = this.dataSet!.dataItems.filter(item => item.active)\n\n return (dataItems || []).map(dataItem => {\n const { name, description, tag, type, quota = 1, options = {}, unit } = dataItem\n\n const samples = new Array(quota).fill(0)\n const value = this.value && this.value[tag]\n\n const elements = samples.map((_, idx) => {\n const v = value instanceof Array ? value[idx] : idx === 0 ? value : undefined\n\n switch (type) {\n case 'select':\n return html` <select .name=${tag}>\n <option value=\"\"></option>\n ${(options.options || []).map(\n option => html`<option value=${option.value} ?selected=${option.value === v}>${option.text}</option>`\n )}\n </select>`\n break\n\n case 'boolean':\n return html` <input type=\"checkbox\" name=${tag} .checked=${v} />`\n break\n\n case 'number':\n return html` <input type=\"number\" name=${tag} value=${v} />`\n break\n\n case 'file':\n return html`<ox-input-file\n name=${tag}\n label=\"Attach Files\"\n accept=\"*/*\"\n multiple=\"true\"\n hide-filelist\n ></ox-input-file>`\n\n case 'string':\n default:\n return html` <input type=\"string\" name=${tag} value=${v} />`\n }\n })\n\n return html` <label .title=${description}>\n <div name>${name}${unit ? `(${unit})` : ''}</div>\n <div elements>${elements}</div>\n </label>`\n })\n }\n\n private buildValue() {\n const dataItems = this.dataSet!.dataItems\n\n return (dataItems || []).reduce((sum, dataItem) => {\n const { tag, type } = dataItem\n\n const editors = Array.prototype.slice.call(\n this.renderRoot.querySelectorAll(`[name=${tag}]`) as NodeListOf<HTMLInputElement>\n ) as HTMLInputElement[]\n\n if (editors.length > 0) {\n sum[tag] = editors.map(editor => (type === 'boolean' ? editor.checked : editor.value))\n }\n\n return sum\n }, {} as { [tag: string]: any })\n }\n}\n"]}
|
|
@@ -1,13 +1,7 @@
|
|
|
1
1
|
import '@operato/property-editor/ox-properties-dynamic-view.js';
|
|
2
|
-
import { DataItem, DataItemSpecSet, DataItemSpecSetProvider } from './types.js';
|
|
3
2
|
import { LitElement, PropertyValues } from 'lit';
|
|
3
|
+
import { DataItem, DataItemSpecSet } from './types.js';
|
|
4
4
|
export declare class OxDataItemSpec extends LitElement {
|
|
5
|
-
static registry: {
|
|
6
|
-
[name: string]: DataItemSpecSetProvider;
|
|
7
|
-
};
|
|
8
|
-
static registerProvider(name: string, provider: DataItemSpecSetProvider): void;
|
|
9
|
-
static getProviderNames(): string[];
|
|
10
|
-
static getProvider(name: string): DataItemSpecSetProvider | undefined;
|
|
11
5
|
static styles: import("lit").CSSResult;
|
|
12
6
|
value?: {
|
|
13
7
|
[specSetName: string]: any;
|
|
@@ -1,22 +1,13 @@
|
|
|
1
|
-
var OxDataItemSpec_1;
|
|
2
1
|
import { __decorate } from "tslib";
|
|
3
2
|
import '@operato/property-editor/ox-properties-dynamic-view.js';
|
|
4
|
-
import {
|
|
3
|
+
import { css, html, LitElement } from 'lit';
|
|
5
4
|
import { customElement, property, queryAll, state } from 'lit/decorators.js';
|
|
6
|
-
|
|
5
|
+
import { OxDataUseCase } from './ox-data-use-case.js';
|
|
6
|
+
let OxDataItemSpec = class OxDataItemSpec extends LitElement {
|
|
7
7
|
constructor() {
|
|
8
8
|
super(...arguments);
|
|
9
9
|
this.dataItemSpecSets = [];
|
|
10
10
|
}
|
|
11
|
-
static registerProvider(name, provider) {
|
|
12
|
-
OxDataItemSpec_1.registry[name] = provider;
|
|
13
|
-
}
|
|
14
|
-
static getProviderNames() {
|
|
15
|
-
return Object.keys(OxDataItemSpec_1.registry);
|
|
16
|
-
}
|
|
17
|
-
static getProvider(name) {
|
|
18
|
-
return OxDataItemSpec_1.registry[name];
|
|
19
|
-
}
|
|
20
11
|
render() {
|
|
21
12
|
return html `<form @property-change=${(e) => this.onChange(e)}>
|
|
22
13
|
${this.dataItemSpecSets.map(({ name, description, specs }) => {
|
|
@@ -30,7 +21,7 @@ let OxDataItemSpec = OxDataItemSpec_1 = class OxDataItemSpec extends LitElement
|
|
|
30
21
|
}
|
|
31
22
|
updated(changes) {
|
|
32
23
|
if (changes.has('dataItem')) {
|
|
33
|
-
this.dataItemSpecSets =
|
|
24
|
+
this.dataItemSpecSets = OxDataUseCase.getUseCases().map(useCase => useCase.getSpecification(this.dataItem));
|
|
34
25
|
}
|
|
35
26
|
}
|
|
36
27
|
onChange(e) {
|
|
@@ -47,7 +38,6 @@ let OxDataItemSpec = OxDataItemSpec_1 = class OxDataItemSpec extends LitElement
|
|
|
47
38
|
return value;
|
|
48
39
|
}
|
|
49
40
|
};
|
|
50
|
-
OxDataItemSpec.registry = {};
|
|
51
41
|
OxDataItemSpec.styles = css `
|
|
52
42
|
:host {
|
|
53
43
|
display: flex;
|
|
@@ -80,7 +70,7 @@ __decorate([
|
|
|
80
70
|
__decorate([
|
|
81
71
|
queryAll('ox-properties-dynamic-view')
|
|
82
72
|
], OxDataItemSpec.prototype, "specSetViews", void 0);
|
|
83
|
-
OxDataItemSpec =
|
|
73
|
+
OxDataItemSpec = __decorate([
|
|
84
74
|
customElement('ox-data-item-spec')
|
|
85
75
|
], OxDataItemSpec);
|
|
86
76
|
export { OxDataItemSpec };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-data-item-spec.js","sourceRoot":"","sources":["../../src/ox-data-item-spec.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ox-data-item-spec.js","sourceRoot":"","sources":["../../src/ox-data-item-spec.ts"],"names":[],"mappings":";AAAA,OAAO,wDAAwD,CAAA;AAE/D,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAE5E,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAIrD,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IAA9C;;QAyBW,qBAAgB,GAAsB,EAAE,CAAA;IAuCnD,CAAC;IAnCC,MAAM;QACJ,OAAO,IAAI,CAAA,0BAA0B,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;QAC/D,IAAI,CAAC,gBAAgB,CAAC,GAAG,CACzB,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAAE;;YAAC,OAAA,IAAI,CAAA,kBAAkB,IAAI;6BACvC,WAAW;kDACU,IAAI,WAAW,KAAK,WAAW,MAAA,IAAI,CAAC,KAAK,0CAAG,IAAI,CAAC;wCAC3D,CAAA;SAAA,CACjC;YACK,CAAA;IACV,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YAC3B,IAAI,CAAC,gBAAgB,GAAG,aAAa,CAAC,WAAW,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAS,CAAC,CAAC,CAAA;SAC7G;IACH,CAAC;IAEO,QAAQ,CAAC,CAAQ;QACvB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,CAAA;QAE9B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE;SAC1B,CAAC,CACH,CAAA;IACH,CAAC;IAEO,UAAU;QAChB,IAAI,KAAK,GAAG,EAAS,CAAA;QACrB,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAE,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAA;QAExF,OAAO,KAAK,CAAA;IACd,CAAC;CACF,CAAA;AA/DQ,qBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;GAmBlB,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAuC;AACtC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAoB;AAEtC;IAAR,KAAK,EAAE;wDAAyC;AAET;IAAvC,QAAQ,CAAC,4BAA4B,CAAC;oDAAwD;AA3BpF,cAAc;IAD1B,aAAa,CAAC,mBAAmB,CAAC;GACtB,cAAc,CAgE1B;SAhEY,cAAc","sourcesContent":["import '@operato/property-editor/ox-properties-dynamic-view.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, queryAll, state } from 'lit/decorators.js'\n\nimport { OxDataUseCase } from './ox-data-use-case.js'\nimport { DataItem, DataItemSpecSet } from './types.js'\n\n@customElement('ox-data-item-spec')\nexport class OxDataItemSpec extends LitElement {\n static styles = css`\n :host {\n display: flex;\n flex-direction: row;\n border-bottom: var(--border-dark-color);\n padding: var(--margin-default) 0;\n }\n [specName] {\n font: var(--legend-font);\n color: var(--legend-text-color);\n }\n [description] {\n font: var(--form-sublabel-font);\n opacity: 0.8;\n }\n\n form {\n flex: 1;\n }\n `\n\n @property({ type: Object }) value?: { [specSetName: string]: any }\n @property({ type: Object }) dataItem?: DataItem\n\n @state() dataItemSpecSets: DataItemSpecSet[] = []\n\n @queryAll('ox-properties-dynamic-view') specSetViews!: NodeListOf<HTMLElement & { value: any }>\n\n render() {\n return html`<form @property-change=${(e: Event) => this.onChange(e)}>\n ${this.dataItemSpecSets.map(\n ({ name, description, specs }) => html` <div specName>${name}</div>\n <div description>${description}</div>\n <ox-properties-dynamic-view data-name=${name} .props=${specs} .value=${this.value?.[name]}>\n </ox-properties-dynamic-view>`\n )}\n </form>`\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('dataItem')) {\n this.dataItemSpecSets = OxDataUseCase.getUseCases().map(useCase => useCase.getSpecification(this.dataItem!))\n }\n }\n\n private onChange(e: Event) {\n this.value = this.buildValue()\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: { ...this.value }\n })\n )\n }\n\n private buildValue() {\n var value = {} as any\n this.specSetViews.forEach(view => (value[view.getAttribute('data-name')!] = view.value))\n\n return value\n }\n}\n"]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import '@operato/input/ox-input-file.js';
|
|
2
|
+
import './ox-data-sample-view';
|
|
3
|
+
import { DataOoc, DataSet } from './types.js';
|
|
4
|
+
import { LitElement } from 'lit';
|
|
5
|
+
export declare class OxDataOocView extends LitElement {
|
|
6
|
+
static styles: import("lit").CSSResult;
|
|
7
|
+
dataSet?: DataSet;
|
|
8
|
+
dataOoc?: DataOoc;
|
|
9
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
10
|
+
}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import '@operato/input/ox-input-file.js';
|
|
3
|
+
import './ox-data-sample-view';
|
|
4
|
+
import { LitElement, css, html } from 'lit';
|
|
5
|
+
import { customElement, property } from 'lit/decorators.js';
|
|
6
|
+
let OxDataOocView = class OxDataOocView extends LitElement {
|
|
7
|
+
render() {
|
|
8
|
+
var _a;
|
|
9
|
+
const history = ((_a = this.dataOoc) === null || _a === void 0 ? void 0 : _a.history) || [];
|
|
10
|
+
const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' });
|
|
11
|
+
return html `
|
|
12
|
+
<ox-data-sample-view .dataSample=${this.dataOoc} .dataSet=${this.dataSet}></ox-data-sample-view>
|
|
13
|
+
|
|
14
|
+
<h3>history</h3>
|
|
15
|
+
${history.map(({ user, state, comment, timestamp }) => html `
|
|
16
|
+
<p page-description>
|
|
17
|
+
${formatter.format(new Date(timestamp))}
|
|
18
|
+
<br />
|
|
19
|
+
${state} by ${user.name}
|
|
20
|
+
<br />
|
|
21
|
+
${comment}
|
|
22
|
+
</p>
|
|
23
|
+
`)}
|
|
24
|
+
`;
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
OxDataOocView.styles = css `
|
|
28
|
+
:host {
|
|
29
|
+
display: flex;
|
|
30
|
+
flex-direction: column;
|
|
31
|
+
background-color: var(--main-section-background-color);
|
|
32
|
+
padding: var(--padding-wide);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
h3 {
|
|
36
|
+
margin: var(--title-margin);
|
|
37
|
+
padding-top: 12px;
|
|
38
|
+
font: var(--title-font);
|
|
39
|
+
color: var(--title-text-color);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
[page-description] {
|
|
43
|
+
margin: var(--page-description-margin);
|
|
44
|
+
font: var(--page-description-font);
|
|
45
|
+
color: var(--page-description-color);
|
|
46
|
+
}
|
|
47
|
+
`;
|
|
48
|
+
__decorate([
|
|
49
|
+
property({ type: Object })
|
|
50
|
+
], OxDataOocView.prototype, "dataSet", void 0);
|
|
51
|
+
__decorate([
|
|
52
|
+
property({ type: Object })
|
|
53
|
+
], OxDataOocView.prototype, "dataOoc", void 0);
|
|
54
|
+
OxDataOocView = __decorate([
|
|
55
|
+
customElement('ox-data-ooc-view')
|
|
56
|
+
], OxDataOocView);
|
|
57
|
+
export { OxDataOocView };
|
|
58
|
+
//# sourceMappingURL=ox-data-ooc-view.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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;IA0B3C,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;;;QAGtE,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;AA9CQ,oBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;GAoBlB,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAkB;AAxBlC,aAAa;IADzB,aAAa,CAAC,kBAAkB,CAAC;GACrB,aAAa,CA+CzB;SA/CY,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\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 [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>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"]}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import '@operato/input/ox-input-file.js';
|
|
2
|
+
import { DataSample, DataSet } from './types.js';
|
|
3
|
+
import { LitElement } from 'lit';
|
|
4
|
+
export declare class OxDataSampleView extends LitElement {
|
|
5
|
+
static styles: import("lit").CSSResult;
|
|
6
|
+
dataSet?: DataSet;
|
|
7
|
+
dataSample?: DataSample;
|
|
8
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
9
|
+
private onChange;
|
|
10
|
+
private buildSpec;
|
|
11
|
+
private buildValue;
|
|
12
|
+
private evaluateOOC;
|
|
13
|
+
}
|
|
@@ -0,0 +1,214 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import '@operato/input/ox-input-file.js';
|
|
3
|
+
import { LitElement, css, html } from 'lit';
|
|
4
|
+
import { customElement, property } from 'lit/decorators.js';
|
|
5
|
+
import { OxDataUseCase } from './ox-data-use-case.js';
|
|
6
|
+
let OxDataSampleView = class OxDataSampleView extends LitElement {
|
|
7
|
+
render() {
|
|
8
|
+
var _a, _b, _c, _d, _e;
|
|
9
|
+
const dataItems = ((_a = this.dataSet) === null || _a === void 0 ? void 0 : _a.dataItems.filter(item => item.active)) || [];
|
|
10
|
+
const data = ((_b = this.dataSample) === null || _b === void 0 ? void 0 : _b.data) || {};
|
|
11
|
+
const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' });
|
|
12
|
+
return html ` <h2>${(_c = this.dataSample) === null || _c === void 0 ? void 0 : _c.name}</h2>
|
|
13
|
+
<p page-description>
|
|
14
|
+
${(_d = this.dataSample) === null || _d === void 0 ? void 0 : _d.description}<br /><br />
|
|
15
|
+
collected at: ${formatter.format(new Date((_e = this.dataSample) === null || _e === void 0 ? void 0 : _e.collectedAt))}
|
|
16
|
+
</p>
|
|
17
|
+
|
|
18
|
+
<form @change=${(e) => this.onChange(e)}>
|
|
19
|
+
<table>
|
|
20
|
+
<tr>
|
|
21
|
+
<th>item</th>
|
|
22
|
+
<th>description</th>
|
|
23
|
+
<th>unit</th>
|
|
24
|
+
<th>value</th>
|
|
25
|
+
<th>specification</th>
|
|
26
|
+
<th>OOC</th>
|
|
27
|
+
<th>OOS</th>
|
|
28
|
+
</tr>
|
|
29
|
+
${dataItems.map(dataItem => {
|
|
30
|
+
const { ooc, oos } = this.evaluateOOC(dataItem, data === null || data === void 0 ? void 0 : data[dataItem.tag]) || {};
|
|
31
|
+
return html `
|
|
32
|
+
<tr ?ooc=${ooc} ?oos=${oos}>
|
|
33
|
+
<td name>${dataItem.name}</td>
|
|
34
|
+
<td>${dataItem.description}</td>
|
|
35
|
+
<td>${dataItem.unit}</td>
|
|
36
|
+
<td>${this.buildValue(dataItem)}</td>
|
|
37
|
+
<td><pre>${this.buildSpec(dataItem)}</pre></td>
|
|
38
|
+
<td>${ooc ? html `<mwc-icon>done</mwc-icon>` : ''}</td>
|
|
39
|
+
<td>${oos ? html `<mwc-icon>done</mwc-icon>` : ''}</td>
|
|
40
|
+
</tr>
|
|
41
|
+
`;
|
|
42
|
+
})}
|
|
43
|
+
</table>
|
|
44
|
+
|
|
45
|
+
<label><mwc-icon>build_circle</mwc-icon> correction activity</label>
|
|
46
|
+
<textarea name="correctionActivity"> </textarea>
|
|
47
|
+
</form>`;
|
|
48
|
+
}
|
|
49
|
+
onChange(e) { }
|
|
50
|
+
buildSpec(dataItem) {
|
|
51
|
+
return OxDataUseCase.elaborateDataItemSpec(this.dataSet, dataItem);
|
|
52
|
+
}
|
|
53
|
+
buildValue(dataItem) {
|
|
54
|
+
var _a;
|
|
55
|
+
const { tag, type } = dataItem;
|
|
56
|
+
if (!this.dataSample) {
|
|
57
|
+
return '';
|
|
58
|
+
}
|
|
59
|
+
const value = (_a = this.dataSample) === null || _a === void 0 ? void 0 : _a.data[dataItem.tag];
|
|
60
|
+
if (value === undefined) {
|
|
61
|
+
return '';
|
|
62
|
+
}
|
|
63
|
+
const values = value instanceof Array ? value : [value];
|
|
64
|
+
const elements = values.map((_, idx) => {
|
|
65
|
+
const v = value[idx];
|
|
66
|
+
switch (type) {
|
|
67
|
+
case 'boolean':
|
|
68
|
+
return html ` <input type="checkbox" name=${tag} .checked=${v} disabled />`;
|
|
69
|
+
break;
|
|
70
|
+
case 'select':
|
|
71
|
+
case 'number':
|
|
72
|
+
case 'string':
|
|
73
|
+
default:
|
|
74
|
+
return String(v === undefined ? '' : v);
|
|
75
|
+
}
|
|
76
|
+
});
|
|
77
|
+
return type === 'boolean' ? elements : elements.join(', ');
|
|
78
|
+
}
|
|
79
|
+
evaluateOOC(dataItem, value) {
|
|
80
|
+
return OxDataUseCase.evaluateItem(this.dataSet, dataItem, value);
|
|
81
|
+
}
|
|
82
|
+
};
|
|
83
|
+
OxDataSampleView.styles = css `
|
|
84
|
+
:host {
|
|
85
|
+
display: flex;
|
|
86
|
+
flex-direction: column;
|
|
87
|
+
background-color: var(--main-section-background-color);
|
|
88
|
+
padding: var(--padding-wide);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
form {
|
|
92
|
+
flex: 1;
|
|
93
|
+
|
|
94
|
+
display: flex;
|
|
95
|
+
flex-direction: column;
|
|
96
|
+
}
|
|
97
|
+
label {
|
|
98
|
+
font: var(--label-font);
|
|
99
|
+
color: var(--label-color);
|
|
100
|
+
}
|
|
101
|
+
label * {
|
|
102
|
+
text-align: middle;
|
|
103
|
+
}
|
|
104
|
+
label:nth-child(even) {
|
|
105
|
+
background-color: var(--main-section-background-color);
|
|
106
|
+
padding: var(--padding-default) 0;
|
|
107
|
+
}
|
|
108
|
+
label mwc-icon {
|
|
109
|
+
position: relative;
|
|
110
|
+
top: 4px;
|
|
111
|
+
font-size: 18px;
|
|
112
|
+
color: var(--status-danger-color);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
div[name] {
|
|
116
|
+
grid-column: span 2 / auto;
|
|
117
|
+
font: var(--label-font);
|
|
118
|
+
color: var(--label-color);
|
|
119
|
+
text-align: right;
|
|
120
|
+
}
|
|
121
|
+
div[elements] {
|
|
122
|
+
grid-column: span 10 / auto;
|
|
123
|
+
display: flex;
|
|
124
|
+
flex-direction: row;
|
|
125
|
+
flex-wrap: wrap;
|
|
126
|
+
gap: 10px;
|
|
127
|
+
padding-right: var(--padding-default);
|
|
128
|
+
}
|
|
129
|
+
div[elements] * {
|
|
130
|
+
flex: 1;
|
|
131
|
+
}
|
|
132
|
+
div[elements] input,
|
|
133
|
+
div[elements] select {
|
|
134
|
+
border: var(--input-field-border);
|
|
135
|
+
border-radius: var(--input-field-border-radius);
|
|
136
|
+
padding: var(--input-field-padding);
|
|
137
|
+
font: var(--input-field-font);
|
|
138
|
+
}
|
|
139
|
+
h2 {
|
|
140
|
+
margin: var(--title-margin);
|
|
141
|
+
padding-top: 25px;
|
|
142
|
+
font: var(--title-font);
|
|
143
|
+
color: var(--title-text-color);
|
|
144
|
+
}
|
|
145
|
+
[page-description] {
|
|
146
|
+
margin: var(--page-description-margin);
|
|
147
|
+
font: var(--page-description-font);
|
|
148
|
+
color: var(--page-description-color);
|
|
149
|
+
}
|
|
150
|
+
table {
|
|
151
|
+
border-collapse: collapse;
|
|
152
|
+
margin-bottom: var(--margin-default);
|
|
153
|
+
}
|
|
154
|
+
th {
|
|
155
|
+
padding: var(--th-padding);
|
|
156
|
+
border-top: var(--th-border-top);
|
|
157
|
+
border-bottom: var(--td-border-bottom);
|
|
158
|
+
text-transform: var(--th-text-transform);
|
|
159
|
+
font: var(--th-font);
|
|
160
|
+
color: var(--th-color);
|
|
161
|
+
text-align: left;
|
|
162
|
+
}
|
|
163
|
+
tr {
|
|
164
|
+
background-color: var(--tr-background-color);
|
|
165
|
+
}
|
|
166
|
+
tr:nth-child(odd) {
|
|
167
|
+
background-color: var(--tr-background-odd-color);
|
|
168
|
+
}
|
|
169
|
+
tr:hover {
|
|
170
|
+
background-color: var(--tr-background-hover-color);
|
|
171
|
+
}
|
|
172
|
+
tr[ooc],
|
|
173
|
+
tr[oos] {
|
|
174
|
+
background-color: #fefbdf;
|
|
175
|
+
}
|
|
176
|
+
td {
|
|
177
|
+
border-bottom: var(--td-border-bottom);
|
|
178
|
+
padding: var(--td-padding);
|
|
179
|
+
font: var(--td-font);
|
|
180
|
+
color: var(--td-color);
|
|
181
|
+
}
|
|
182
|
+
td[name] {
|
|
183
|
+
font-weight: bold;
|
|
184
|
+
}
|
|
185
|
+
td mwc-icon {
|
|
186
|
+
color: var(--status-danger-color);
|
|
187
|
+
}
|
|
188
|
+
textarea {
|
|
189
|
+
border: var(--input-field-border);
|
|
190
|
+
border-radius: var(--input-border-radius);
|
|
191
|
+
padding: var(--input-field-padding);
|
|
192
|
+
font: var(--input-field-font);
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
@media only screen and (max-width: 460px) {
|
|
196
|
+
div[name] {
|
|
197
|
+
grid-column: span 3 / auto;
|
|
198
|
+
}
|
|
199
|
+
div[elements] {
|
|
200
|
+
grid-column: span 9 / auto;
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
`;
|
|
204
|
+
__decorate([
|
|
205
|
+
property({ type: Object })
|
|
206
|
+
], OxDataSampleView.prototype, "dataSet", void 0);
|
|
207
|
+
__decorate([
|
|
208
|
+
property({ type: Object })
|
|
209
|
+
], OxDataSampleView.prototype, "dataSample", void 0);
|
|
210
|
+
OxDataSampleView = __decorate([
|
|
211
|
+
customElement('ox-data-sample-view')
|
|
212
|
+
], OxDataSampleView);
|
|
213
|
+
export { OxDataSampleView };
|
|
214
|
+
//# sourceMappingURL=ox-data-sample-view%20copy.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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"]}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import '@operato/input/ox-input-file.js';
|
|
2
|
+
import { DataSample, DataSet } from './types.js';
|
|
3
|
+
import { LitElement } from 'lit';
|
|
4
|
+
export declare class OxDataSampleView extends LitElement {
|
|
5
|
+
static styles: import("lit").CSSResult;
|
|
6
|
+
dataSet?: DataSet;
|
|
7
|
+
dataSample?: DataSample;
|
|
8
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
9
|
+
private onChange;
|
|
10
|
+
private buildSpec;
|
|
11
|
+
private buildValue;
|
|
12
|
+
private evaluateOOC;
|
|
13
|
+
}
|