@things-factory/board-ui 6.1.140 → 6.1.142
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.
|
@@ -3,7 +3,7 @@ import '@operato/board/ox-board-player.js'
|
|
|
3
3
|
|
|
4
4
|
import gql from 'graphql-tag'
|
|
5
5
|
import { css, html } from 'lit'
|
|
6
|
-
import { customElement,
|
|
6
|
+
import { customElement, state, query } from 'lit/decorators.js'
|
|
7
7
|
import { connect } from 'pwa-helpers/connect-mixin.js'
|
|
8
8
|
|
|
9
9
|
import { createBoardProvider } from '../board-provider'
|
|
@@ -13,8 +13,6 @@ import { client, subscribe } from '@operato/graphql'
|
|
|
13
13
|
import { ReferenceMap } from '@hatiolab/things-scene'
|
|
14
14
|
import { BoardPlayer } from '@operato/board/ox-board-player.js'
|
|
15
15
|
|
|
16
|
-
const NOOP = () => {}
|
|
17
|
-
|
|
18
16
|
@customElement('board-player-page')
|
|
19
17
|
export class BoardPlayerPage extends connect(store)(PageView) {
|
|
20
18
|
static styles = [
|
|
@@ -55,14 +53,15 @@ export class BoardPlayerPage extends connect(store)(PageView) {
|
|
|
55
53
|
`
|
|
56
54
|
]
|
|
57
55
|
|
|
58
|
-
@
|
|
59
|
-
@
|
|
60
|
-
@
|
|
61
|
-
@
|
|
62
|
-
@
|
|
56
|
+
@state() data: any
|
|
57
|
+
@state() playGroup: any
|
|
58
|
+
@state() playGroupId?: string | null
|
|
59
|
+
@state() boards: any
|
|
60
|
+
@state() baseUrl?: string
|
|
61
|
+
@state() showSpinner?: boolean
|
|
63
62
|
|
|
64
|
-
provider?: ReferenceMap<unknown> & { dispose?: () => void }
|
|
65
|
-
subscriptionForAutoRefresh
|
|
63
|
+
private provider?: ReferenceMap<unknown> & { dispose?: () => void }
|
|
64
|
+
private subscriptionForAutoRefresh
|
|
66
65
|
|
|
67
66
|
@query('ox-board-player') boardPlayer?: BoardPlayer
|
|
68
67
|
|
|
@@ -80,15 +79,15 @@ export class BoardPlayerPage extends connect(store)(PageView) {
|
|
|
80
79
|
}
|
|
81
80
|
|
|
82
81
|
async refresh() {
|
|
83
|
-
if (!this.
|
|
82
|
+
if (!this.playGroupId) {
|
|
84
83
|
return
|
|
85
84
|
}
|
|
86
85
|
|
|
87
86
|
try {
|
|
88
|
-
this.
|
|
87
|
+
this.showSpinner = true
|
|
89
88
|
this.updateContext()
|
|
90
89
|
|
|
91
|
-
this.
|
|
90
|
+
this.playGroup = (
|
|
92
91
|
await client.query({
|
|
93
92
|
query: gql`
|
|
94
93
|
query FetchPlayGroup($id: String!) {
|
|
@@ -117,16 +116,16 @@ export class BoardPlayerPage extends connect(store)(PageView) {
|
|
|
117
116
|
}
|
|
118
117
|
`,
|
|
119
118
|
variables: {
|
|
120
|
-
id: this.
|
|
119
|
+
id: this.playGroupId
|
|
121
120
|
}
|
|
122
121
|
})
|
|
123
122
|
).data.playGroup
|
|
124
123
|
|
|
125
|
-
if (!this.
|
|
124
|
+
if (!this.playGroup) {
|
|
126
125
|
throw 'playgroup not found'
|
|
127
126
|
}
|
|
128
127
|
|
|
129
|
-
this.
|
|
128
|
+
this.boards = this.playGroup.boards
|
|
130
129
|
} catch (ex) {
|
|
131
130
|
document.dispatchEvent(
|
|
132
131
|
new CustomEvent('notify', {
|
|
@@ -138,7 +137,7 @@ export class BoardPlayerPage extends connect(store)(PageView) {
|
|
|
138
137
|
})
|
|
139
138
|
)
|
|
140
139
|
} finally {
|
|
141
|
-
this.
|
|
140
|
+
this.showSpinner = false
|
|
142
141
|
this.updateContext()
|
|
143
142
|
|
|
144
143
|
const { autoRefresh = false } = (await clientSettingStore.get('board-view'))?.value || {}
|
|
@@ -147,14 +146,14 @@ export class BoardPlayerPage extends connect(store)(PageView) {
|
|
|
147
146
|
}
|
|
148
147
|
|
|
149
148
|
updated(changes) {
|
|
150
|
-
if (changes.has('
|
|
149
|
+
if (changes.has('playGroupId')) {
|
|
151
150
|
this.boardPlayer!.stop()
|
|
152
151
|
this.refresh()
|
|
153
152
|
}
|
|
154
153
|
}
|
|
155
154
|
|
|
156
155
|
stateChanged(state) {
|
|
157
|
-
this.
|
|
156
|
+
this.baseUrl = state.app.baseUrl
|
|
158
157
|
}
|
|
159
158
|
|
|
160
159
|
get oopsNote() {
|
|
@@ -167,40 +166,37 @@ export class BoardPlayerPage extends connect(store)(PageView) {
|
|
|
167
166
|
|
|
168
167
|
get context() {
|
|
169
168
|
return {
|
|
170
|
-
title: this.
|
|
171
|
-
? this._playGroup.name
|
|
172
|
-
: this._showSpinner
|
|
173
|
-
? 'Fetching playgroup...'
|
|
174
|
-
: 'Playgroup Not Found'
|
|
169
|
+
title: this.playGroup ? this.playGroup.name : this.showSpinner ? 'Fetching playgroup...' : 'Playgroup Not Found'
|
|
175
170
|
}
|
|
176
171
|
}
|
|
177
172
|
|
|
178
173
|
render() {
|
|
179
|
-
var oops = !this.
|
|
174
|
+
var oops = !this.showSpinner && !this.playGroup && this.oopsNote
|
|
180
175
|
|
|
181
176
|
return oops
|
|
182
177
|
? html` <oops-note icon=${oops.icon} title=${oops.title} description=${oops.description}></oops-note> `
|
|
183
178
|
: html`
|
|
184
|
-
<ox-board-player .boards=${this.
|
|
185
|
-
<oops-spinner ?show=${this.
|
|
179
|
+
<ox-board-player .boards=${this.boards} .data=${this.data} .provider=${this.provider}></ox-board-player>
|
|
180
|
+
<oops-spinner ?show=${this.showSpinner}></oops-spinner>
|
|
186
181
|
`
|
|
187
182
|
}
|
|
188
183
|
|
|
189
184
|
pageUpdated(changes, lifecycle) {
|
|
190
185
|
if (this.active) {
|
|
191
|
-
this.
|
|
186
|
+
this.playGroupId = lifecycle.resourceId
|
|
187
|
+
this.data = lifecycle.params
|
|
192
188
|
|
|
193
189
|
this.refresh()
|
|
194
190
|
} else {
|
|
195
191
|
this.stopSubscribing()
|
|
196
192
|
|
|
197
|
-
this.
|
|
193
|
+
this.playGroupId = null
|
|
198
194
|
this.boardPlayer!.stop()
|
|
199
195
|
}
|
|
200
196
|
}
|
|
201
197
|
|
|
202
198
|
async startSubscribingForAutoRefresh() {
|
|
203
|
-
if (!this.
|
|
199
|
+
if (!this.playGroupId) {
|
|
204
200
|
return
|
|
205
201
|
}
|
|
206
202
|
|
|
@@ -216,7 +212,7 @@ export class BoardPlayerPage extends connect(store)(PageView) {
|
|
|
216
212
|
}
|
|
217
213
|
`,
|
|
218
214
|
variables: {
|
|
219
|
-
id: this.
|
|
215
|
+
id: this.playGroupId
|
|
220
216
|
}
|
|
221
217
|
},
|
|
222
218
|
{
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import './things-scene-components.import';
|
|
2
2
|
import '@operato/board/ox-board-player.js';
|
|
3
3
|
import { PageView } from '@operato/shell';
|
|
4
|
-
import { ReferenceMap } from '@hatiolab/things-scene';
|
|
5
4
|
import { BoardPlayer } from '@operato/board/ox-board-player.js';
|
|
6
5
|
declare const BoardPlayerPage_base: (new (...args: any[]) => {
|
|
7
6
|
_storeUnsubscribe: import("redux").Unsubscribe;
|
|
@@ -12,15 +11,14 @@ declare const BoardPlayerPage_base: (new (...args: any[]) => {
|
|
|
12
11
|
}) & typeof PageView;
|
|
13
12
|
export declare class BoardPlayerPage extends BoardPlayerPage_base {
|
|
14
13
|
static styles: import("lit").CSSResult[];
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
subscriptionForAutoRefresh: any;
|
|
14
|
+
data: any;
|
|
15
|
+
playGroup: any;
|
|
16
|
+
playGroupId?: string | null;
|
|
17
|
+
boards: any;
|
|
18
|
+
baseUrl?: string;
|
|
19
|
+
showSpinner?: boolean;
|
|
20
|
+
private provider?;
|
|
21
|
+
private subscriptionForAutoRefresh;
|
|
24
22
|
boardPlayer?: BoardPlayer;
|
|
25
23
|
connectedCallback(): void;
|
|
26
24
|
disconnectedCallback(): void;
|
|
@@ -3,14 +3,13 @@ import './things-scene-components.import';
|
|
|
3
3
|
import '@operato/board/ox-board-player.js';
|
|
4
4
|
import gql from 'graphql-tag';
|
|
5
5
|
import { css, html } from 'lit';
|
|
6
|
-
import { customElement,
|
|
6
|
+
import { customElement, state, query } from 'lit/decorators.js';
|
|
7
7
|
import { connect } from 'pwa-helpers/connect-mixin.js';
|
|
8
8
|
import { createBoardProvider } from '../board-provider';
|
|
9
9
|
import { store, PageView } from '@operato/shell';
|
|
10
10
|
import { clientSettingStore } from '@operato/shell/object-store.js';
|
|
11
11
|
import { client, subscribe } from '@operato/graphql';
|
|
12
12
|
import { BoardPlayer } from '@operato/board/ox-board-player.js';
|
|
13
|
-
const NOOP = () => { };
|
|
14
13
|
let BoardPlayerPage = class BoardPlayerPage extends connect(store)(PageView) {
|
|
15
14
|
connectedCallback() {
|
|
16
15
|
super.connectedCallback();
|
|
@@ -23,13 +22,13 @@ let BoardPlayerPage = class BoardPlayerPage extends connect(store)(PageView) {
|
|
|
23
22
|
}
|
|
24
23
|
async refresh() {
|
|
25
24
|
var _a;
|
|
26
|
-
if (!this.
|
|
25
|
+
if (!this.playGroupId) {
|
|
27
26
|
return;
|
|
28
27
|
}
|
|
29
28
|
try {
|
|
30
|
-
this.
|
|
29
|
+
this.showSpinner = true;
|
|
31
30
|
this.updateContext();
|
|
32
|
-
this.
|
|
31
|
+
this.playGroup = (await client.query({
|
|
33
32
|
query: gql `
|
|
34
33
|
query FetchPlayGroup($id: String!) {
|
|
35
34
|
playGroup(id: $id) {
|
|
@@ -57,13 +56,13 @@ let BoardPlayerPage = class BoardPlayerPage extends connect(store)(PageView) {
|
|
|
57
56
|
}
|
|
58
57
|
`,
|
|
59
58
|
variables: {
|
|
60
|
-
id: this.
|
|
59
|
+
id: this.playGroupId
|
|
61
60
|
}
|
|
62
61
|
})).data.playGroup;
|
|
63
|
-
if (!this.
|
|
62
|
+
if (!this.playGroup) {
|
|
64
63
|
throw 'playgroup not found';
|
|
65
64
|
}
|
|
66
|
-
this.
|
|
65
|
+
this.boards = this.playGroup.boards;
|
|
67
66
|
}
|
|
68
67
|
catch (ex) {
|
|
69
68
|
document.dispatchEvent(new CustomEvent('notify', {
|
|
@@ -75,20 +74,20 @@ let BoardPlayerPage = class BoardPlayerPage extends connect(store)(PageView) {
|
|
|
75
74
|
}));
|
|
76
75
|
}
|
|
77
76
|
finally {
|
|
78
|
-
this.
|
|
77
|
+
this.showSpinner = false;
|
|
79
78
|
this.updateContext();
|
|
80
79
|
const { autoRefresh = false } = ((_a = (await clientSettingStore.get('board-view'))) === null || _a === void 0 ? void 0 : _a.value) || {};
|
|
81
80
|
autoRefresh && this.startSubscribingForAutoRefresh();
|
|
82
81
|
}
|
|
83
82
|
}
|
|
84
83
|
updated(changes) {
|
|
85
|
-
if (changes.has('
|
|
84
|
+
if (changes.has('playGroupId')) {
|
|
86
85
|
this.boardPlayer.stop();
|
|
87
86
|
this.refresh();
|
|
88
87
|
}
|
|
89
88
|
}
|
|
90
89
|
stateChanged(state) {
|
|
91
|
-
this.
|
|
90
|
+
this.baseUrl = state.app.baseUrl;
|
|
92
91
|
}
|
|
93
92
|
get oopsNote() {
|
|
94
93
|
return {
|
|
@@ -99,35 +98,32 @@ let BoardPlayerPage = class BoardPlayerPage extends connect(store)(PageView) {
|
|
|
99
98
|
}
|
|
100
99
|
get context() {
|
|
101
100
|
return {
|
|
102
|
-
title: this.
|
|
103
|
-
? this._playGroup.name
|
|
104
|
-
: this._showSpinner
|
|
105
|
-
? 'Fetching playgroup...'
|
|
106
|
-
: 'Playgroup Not Found'
|
|
101
|
+
title: this.playGroup ? this.playGroup.name : this.showSpinner ? 'Fetching playgroup...' : 'Playgroup Not Found'
|
|
107
102
|
};
|
|
108
103
|
}
|
|
109
104
|
render() {
|
|
110
|
-
var oops = !this.
|
|
105
|
+
var oops = !this.showSpinner && !this.playGroup && this.oopsNote;
|
|
111
106
|
return oops
|
|
112
107
|
? html ` <oops-note icon=${oops.icon} title=${oops.title} description=${oops.description}></oops-note> `
|
|
113
108
|
: html `
|
|
114
|
-
<ox-board-player .boards=${this.
|
|
115
|
-
<oops-spinner ?show=${this.
|
|
109
|
+
<ox-board-player .boards=${this.boards} .data=${this.data} .provider=${this.provider}></ox-board-player>
|
|
110
|
+
<oops-spinner ?show=${this.showSpinner}></oops-spinner>
|
|
116
111
|
`;
|
|
117
112
|
}
|
|
118
113
|
pageUpdated(changes, lifecycle) {
|
|
119
114
|
if (this.active) {
|
|
120
|
-
this.
|
|
115
|
+
this.playGroupId = lifecycle.resourceId;
|
|
116
|
+
this.data = lifecycle.params;
|
|
121
117
|
this.refresh();
|
|
122
118
|
}
|
|
123
119
|
else {
|
|
124
120
|
this.stopSubscribing();
|
|
125
|
-
this.
|
|
121
|
+
this.playGroupId = null;
|
|
126
122
|
this.boardPlayer.stop();
|
|
127
123
|
}
|
|
128
124
|
}
|
|
129
125
|
async startSubscribingForAutoRefresh() {
|
|
130
|
-
if (!this.
|
|
126
|
+
if (!this.playGroupId) {
|
|
131
127
|
return;
|
|
132
128
|
}
|
|
133
129
|
await this.stopSubscribing();
|
|
@@ -140,7 +136,7 @@ let BoardPlayerPage = class BoardPlayerPage extends connect(store)(PageView) {
|
|
|
140
136
|
}
|
|
141
137
|
`,
|
|
142
138
|
variables: {
|
|
143
|
-
id: this.
|
|
139
|
+
id: this.playGroupId
|
|
144
140
|
}
|
|
145
141
|
}, {
|
|
146
142
|
next: async ({ data }) => {
|
|
@@ -195,25 +191,29 @@ BoardPlayerPage.styles = [
|
|
|
195
191
|
`
|
|
196
192
|
];
|
|
197
193
|
__decorate([
|
|
198
|
-
|
|
194
|
+
state(),
|
|
199
195
|
__metadata("design:type", Object)
|
|
200
|
-
], BoardPlayerPage.prototype, "
|
|
196
|
+
], BoardPlayerPage.prototype, "data", void 0);
|
|
201
197
|
__decorate([
|
|
202
|
-
|
|
198
|
+
state(),
|
|
203
199
|
__metadata("design:type", Object)
|
|
204
|
-
], BoardPlayerPage.prototype, "
|
|
200
|
+
], BoardPlayerPage.prototype, "playGroup", void 0);
|
|
205
201
|
__decorate([
|
|
206
|
-
|
|
202
|
+
state(),
|
|
207
203
|
__metadata("design:type", Object)
|
|
208
|
-
], BoardPlayerPage.prototype, "
|
|
204
|
+
], BoardPlayerPage.prototype, "playGroupId", void 0);
|
|
209
205
|
__decorate([
|
|
210
|
-
|
|
206
|
+
state(),
|
|
207
|
+
__metadata("design:type", Object)
|
|
208
|
+
], BoardPlayerPage.prototype, "boards", void 0);
|
|
209
|
+
__decorate([
|
|
210
|
+
state(),
|
|
211
211
|
__metadata("design:type", String)
|
|
212
|
-
], BoardPlayerPage.prototype, "
|
|
212
|
+
], BoardPlayerPage.prototype, "baseUrl", void 0);
|
|
213
213
|
__decorate([
|
|
214
|
-
|
|
214
|
+
state(),
|
|
215
215
|
__metadata("design:type", Boolean)
|
|
216
|
-
], BoardPlayerPage.prototype, "
|
|
216
|
+
], BoardPlayerPage.prototype, "showSpinner", void 0);
|
|
217
217
|
__decorate([
|
|
218
218
|
query('ox-board-player'),
|
|
219
219
|
__metadata("design:type", BoardPlayer)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"board-player-page.js","sourceRoot":"","sources":["../../client/pages/board-player-page.ts"],"names":[],"mappings":";AAAA,OAAO,kCAAkC,CAAA;AACzC,OAAO,mCAAmC,CAAA;AAE1C,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,
|
|
1
|
+
{"version":3,"file":"board-player-page.js","sourceRoot":"","sources":["../../client/pages/board-player-page.ts"],"names":[],"mappings":";AAAA,OAAO,kCAAkC,CAAA;AACzC,OAAO,mCAAmC,CAAA;AAE1C,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAC/D,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AAEtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AACvD,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AACnE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAEpD,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA;AAGxD,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC;IAmD3D,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,CAAC,QAAQ,GAAG,mBAAmB,EAAE,CAAA;IACvC,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAE5B,IAAI,CAAC,QAAS,CAAC,OAAQ,EAAE,CAAA;QACzB,OAAO,IAAI,CAAC,QAAQ,CAAA;IACtB,CAAC;IAED,KAAK,CAAC,OAAO;;QACX,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,OAAM;SACP;QAED,IAAI;YACF,IAAI,CAAC,WAAW,GAAG,IAAI,CAAA;YACvB,IAAI,CAAC,aAAa,EAAE,CAAA;YAEpB,IAAI,CAAC,SAAS,GAAG,CACf,MAAM,MAAM,CAAC,KAAK,CAAC;gBACjB,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;WAyBT;gBACD,SAAS,EAAE;oBACT,EAAE,EAAE,IAAI,CAAC,WAAW;iBACrB;aACF,CAAC,CACH,CAAC,IAAI,CAAC,SAAS,CAAA;YAEhB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;gBACnB,MAAM,qBAAqB,CAAA;aAC5B;YAED,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAA;SACpC;QAAC,OAAO,EAAE,EAAE;YACX,QAAQ,CAAC,aAAa,CACpB,IAAI,WAAW,CAAC,QAAQ,EAAE;gBACxB,MAAM,EAAE;oBACN,KAAK,EAAE,OAAO;oBACd,OAAO,EAAE,EAAE;oBACX,EAAE;iBACH;aACF,CAAC,CACH,CAAA;SACF;gBAAS;YACR,IAAI,CAAC,WAAW,GAAG,KAAK,CAAA;YACxB,IAAI,CAAC,aAAa,EAAE,CAAA;YAEpB,MAAM,EAAE,WAAW,GAAG,KAAK,EAAE,GAAG,CAAA,MAAA,CAAC,MAAM,kBAAkB,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC,0CAAE,KAAK,KAAI,EAAE,CAAA;YACzF,WAAW,IAAI,IAAI,CAAC,8BAA8B,EAAE,CAAA;SACrD;IACH,CAAC;IAED,OAAO,CAAC,OAAO;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE;YAC9B,IAAI,CAAC,WAAY,CAAC,IAAI,EAAE,CAAA;YACxB,IAAI,CAAC,OAAO,EAAE,CAAA;SACf;IACH,CAAC;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAAA;IAClC,CAAC;IAED,IAAI,QAAQ;QACV,OAAO;YACL,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,iBAAiB;YACxB,WAAW,EAAE,gCAAgC;SAC9C,CAAA;IACH,CAAC;IAED,IAAI,OAAO;QACT,OAAO;YACL,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,qBAAqB;SACjH,CAAA;IACH,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,GAAG,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,QAAQ,CAAA;QAEhE,OAAO,IAAI;YACT,CAAC,CAAC,IAAI,CAAA,oBAAoB,IAAI,CAAC,IAAI,UAAU,IAAI,CAAC,KAAK,gBAAgB,IAAI,CAAC,WAAW,gBAAgB;YACvG,CAAC,CAAC,IAAI,CAAA;qCACyB,IAAI,CAAC,MAAM,UAAU,IAAI,CAAC,IAAI,cAAc,IAAI,CAAC,QAAQ;gCAC9D,IAAI,CAAC,WAAW;SACvC,CAAA;IACP,CAAC;IAED,WAAW,CAAC,OAAO,EAAE,SAAS;QAC5B,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC,UAAU,CAAA;YACvC,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC,MAAM,CAAA;YAE5B,IAAI,CAAC,OAAO,EAAE,CAAA;SACf;aAAM;YACL,IAAI,CAAC,eAAe,EAAE,CAAA;YAEtB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAA;YACvB,IAAI,CAAC,WAAY,CAAC,IAAI,EAAE,CAAA;SACzB;IACH,CAAC;IAED,KAAK,CAAC,8BAA8B;QAClC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,OAAM;SACP;QAED,MAAM,IAAI,CAAC,eAAe,EAAE,CAAA;QAE5B,IAAI,CAAC,0BAA0B,GAAG,MAAM,SAAS,CAC/C;YACE,KAAK,EAAE,GAAG,CAAA;;;;;;SAMT;YACD,SAAS,EAAE;gBACT,EAAE,EAAE,IAAI,CAAC,WAAW;aACrB;SACF,EACD;YACE,IAAI,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;gBACvB,MAAM,IAAI,CAAC,eAAe,EAAE,CAAA;gBAE5B,IAAI,IAAI,EAAE;oBACR,IAAI,CAAC,OAAO,EAAE,CAAA;iBACf;YACH,CAAC;SACF,CACF,CAAA;IACH,CAAC;IAED,KAAK,CAAC,eAAe;;QACnB,MAAM,CAAA,MAAA,IAAI,CAAC,0BAA0B,0CAAE,WAAW,EAAE,CAAA,CAAA;QACpD,OAAO,IAAI,CAAC,0BAA0B,CAAA;IACxC,CAAC;;AAvNM,sBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkCF;CACF,CAAA;AAED;IAAC,KAAK,EAAE;;6CAAU;AAClB;IAAC,KAAK,EAAE;;kDAAe;AACvB;IAAC,KAAK,EAAE;;oDAA4B;AACpC;IAAC,KAAK,EAAE;;+CAAY;AACpB;IAAC,KAAK,EAAE;;gDAAiB;AACzB;IAAC,KAAK,EAAE;;oDAAsB;AAK9B;IAAC,KAAK,CAAC,iBAAiB,CAAC;8BAAe,WAAW;oDAAA;AAjDxC,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAyN3B;SAzNY,eAAe","sourcesContent":["import './things-scene-components.import'\nimport '@operato/board/ox-board-player.js'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, state, query } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { createBoardProvider } from '../board-provider'\nimport { store, PageView } from '@operato/shell'\nimport { clientSettingStore } from '@operato/shell/object-store.js'\nimport { client, subscribe } from '@operato/graphql'\nimport { ReferenceMap } from '@hatiolab/things-scene'\nimport { BoardPlayer } from '@operato/board/ox-board-player.js'\n\n@customElement('board-player-page')\nexport class BoardPlayerPage extends connect(store)(PageView) {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n\n overflow: hidden;\n position: relative;\n }\n\n ox-board-player {\n flex: 1;\n }\n\n oops-spinner {\n display: none;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n\n oops-spinner[show] {\n display: block;\n }\n\n oops-note {\n display: block;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n `\n ]\n\n @state() data: any\n @state() playGroup: any\n @state() playGroupId?: string | null\n @state() boards: any\n @state() baseUrl?: string\n @state() showSpinner?: boolean\n\n private provider?: ReferenceMap<unknown> & { dispose?: () => void }\n private subscriptionForAutoRefresh\n\n @query('ox-board-player') boardPlayer?: BoardPlayer\n\n connectedCallback() {\n super.connectedCallback()\n\n this.provider = createBoardProvider()\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n\n this.provider!.dispose!()\n delete this.provider\n }\n\n async refresh() {\n if (!this.playGroupId) {\n return\n }\n\n try {\n this.showSpinner = true\n this.updateContext()\n\n this.playGroup = (\n await client.query({\n query: gql`\n query FetchPlayGroup($id: String!) {\n playGroup(id: $id) {\n id\n name\n description\n boards {\n id\n name\n description\n model\n thumbnail\n createdAt\n creator {\n id\n name\n }\n updatedAt\n updater {\n id\n name\n }\n }\n }\n }\n `,\n variables: {\n id: this.playGroupId\n }\n })\n ).data.playGroup\n\n if (!this.playGroup) {\n throw 'playgroup not found'\n }\n\n this.boards = this.playGroup.boards\n } catch (ex) {\n document.dispatchEvent(\n new CustomEvent('notify', {\n detail: {\n level: 'error',\n message: ex,\n ex\n }\n })\n )\n } finally {\n this.showSpinner = false\n this.updateContext()\n\n const { autoRefresh = false } = (await clientSettingStore.get('board-view'))?.value || {}\n autoRefresh && this.startSubscribingForAutoRefresh()\n }\n }\n\n updated(changes) {\n if (changes.has('playGroupId')) {\n this.boardPlayer!.stop()\n this.refresh()\n }\n }\n\n stateChanged(state) {\n this.baseUrl = state.app.baseUrl\n }\n\n get oopsNote() {\n return {\n icon: 'style',\n title: 'EMPTY PLAYGROUP',\n description: 'There are no board to be shown'\n }\n }\n\n get context() {\n return {\n title: this.playGroup ? this.playGroup.name : this.showSpinner ? 'Fetching playgroup...' : 'Playgroup Not Found'\n }\n }\n\n render() {\n var oops = !this.showSpinner && !this.playGroup && this.oopsNote\n\n return oops\n ? html` <oops-note icon=${oops.icon} title=${oops.title} description=${oops.description}></oops-note> `\n : html`\n <ox-board-player .boards=${this.boards} .data=${this.data} .provider=${this.provider}></ox-board-player>\n <oops-spinner ?show=${this.showSpinner}></oops-spinner>\n `\n }\n\n pageUpdated(changes, lifecycle) {\n if (this.active) {\n this.playGroupId = lifecycle.resourceId\n this.data = lifecycle.params\n\n this.refresh()\n } else {\n this.stopSubscribing()\n\n this.playGroupId = null\n this.boardPlayer!.stop()\n }\n }\n\n async startSubscribingForAutoRefresh() {\n if (!this.playGroupId) {\n return\n }\n\n await this.stopSubscribing()\n\n this.subscriptionForAutoRefresh = await subscribe(\n {\n query: gql`\n subscription ($id: String!) {\n playGroup(id: $id) {\n id\n }\n }\n `,\n variables: {\n id: this.playGroupId\n }\n },\n {\n next: async ({ data }) => {\n await this.stopSubscribing()\n\n if (data) {\n this.refresh()\n }\n }\n }\n )\n }\n\n async stopSubscribing() {\n await this.subscriptionForAutoRefresh?.unsubscribe()\n delete this.subscriptionForAutoRefresh\n }\n}\n"]}
|