@things-factory/operato-board 6.1.157 → 6.1.159

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 (15) hide show
  1. package/dist-client/board-list/board-tile-list.d.ts +6 -0
  2. package/dist-client/board-list/board-tile-list.js +65 -15
  3. package/dist-client/board-list/board-tile-list.js.map +1 -1
  4. package/dist-client/pages/play-list-page.js +61 -32
  5. package/dist-client/pages/play-list-page.js.map +1 -1
  6. package/dist-client/tsconfig.tsbuildinfo +1 -1
  7. package/helps/faq/appliance-access-token-expiration.md +42 -0
  8. package/helps/faq.md +4 -0
  9. package/package.json +7 -7
  10. package/schema.gql +3 -0
  11. package/translations/en.json +1 -0
  12. package/translations/ja.json +1 -0
  13. package/translations/ko.json +1 -0
  14. package/translations/ms.json +1 -0
  15. package/translations/zh.json +1 -0
package/dist-client/board-list/board-tile-list.d.ts CHANGED
@@ -9,7 +9,13 @@ export default class BoardTileList extends LitElement {
9
9
  favorites: ArrayConstructor;
10
10
  groups: ArrayConstructor;
11
11
  group: StringConstructor;
12
+ reorderable: {
13
+ type: BooleanConstructor;
14
+ attribute: string;
15
+ };
12
16
  };
17
+ draggingItem: any;
18
+ draggedItem: any;
13
19
  render(): import("lit-html").TemplateResult<1>;
14
20
  updated(changes: any): void;
15
21
  onCreateBoard(e: any): void;
package/dist-client/board-list/board-tile-list.js CHANGED
@@ -2,6 +2,7 @@ import '@operato/board/ox-board-creation-card.js';
2
2
  import '@material/mwc-icon';
3
3
  import gql from 'graphql-tag';
4
4
  import { css, html, LitElement } from 'lit';
5
+ import { keyed } from 'lit/directives/keyed.js';
5
6
  import { client } from '@things-factory/shell';
6
7
  export default class BoardTileList extends LitElement {
7
8
  static get styles() {
@@ -90,6 +91,10 @@ export default class BoardTileList extends LitElement {
90
91
  transition: opacity 0.8s;
91
92
  }
92
93
 
94
+ [draggable='true'] {
95
+ cursor: grab;
96
+ }
97
+
93
98
  @media screen and (max-width: 800px), screen and (max-height: 600px) {
94
99
  ox-board-creation-card {
95
100
  display: none;
@@ -107,9 +112,54 @@ export default class BoardTileList extends LitElement {
107
112
  boards: Array,
108
113
  favorites: Array,
109
114
  groups: Array,
110
- group: String
115
+ group: String,
116
+ reorderable: {
117
+ type: Boolean,
118
+ attribute: 'reorderable'
119
+ }
111
120
  };
112
121
  }
122
+ connectedCallback() {
123
+ super.connectedCallback();
124
+ if (this.reorderable) {
125
+ this.renderRoot.addEventListener('dragstart', e => {
126
+ // if (!e.target.getAttribute('draggable')) {
127
+ // e.preventDefault()
128
+ // }
129
+ // this.draggedItem = e.target
130
+ this.draggedItem = e.target.closest('[card]');
131
+ e.dataTransfer.setData('text/plain', e.target.innerHTML);
132
+ });
133
+ this.renderRoot.addEventListener('dragover', e => {
134
+ e.preventDefault();
135
+ const targetItem = e.target.closest('[card]');
136
+ if (targetItem !== this.draggedItem) {
137
+ const targetRect = targetItem.getBoundingClientRect();
138
+ const mousePos = e.clientX - targetRect.left;
139
+ if (mousePos < targetRect.width / 2) {
140
+ // 마우스 위치가 아이템 좌측 반절에 있을 때
141
+ this.renderRoot.insertBefore(this.draggedItem, targetItem);
142
+ }
143
+ else {
144
+ // 마우스 위치가 아이템 우측 반절에 있을 때
145
+ this.renderRoot.insertBefore(this.draggedItem, targetItem.nextSibling);
146
+ }
147
+ }
148
+ });
149
+ this.renderRoot.addEventListener('drop', e => {
150
+ e.preventDefault();
151
+ const boardIds = Array.from(this.renderRoot.querySelectorAll('[card]'))
152
+ .map(board => board.getAttribute('id'))
153
+ .filter(Boolean);
154
+ this.dispatchEvent(new CustomEvent('reordered', {
155
+ detail: {
156
+ groupId: this.group,
157
+ boardIds
158
+ }
159
+ }));
160
+ });
161
+ }
162
+ }
113
163
  render() {
114
164
  var boards = this.boards || [];
115
165
  return html `
@@ -124,28 +174,28 @@ export default class BoardTileList extends LitElement {
124
174
  ></ox-board-creation-card>
125
175
  `
126
176
  : html ``}
127
- ${boards.map(board => html `
128
- <div card>
129
- <a href="board-viewer/${board.id}"> <img src=${board.thumbnail} /> </a>
177
+ ${keyed(Date.now(), boards.map(board => html `
178
+ <div card draggable="true" id=${board.id}>
179
+ <a href="board-viewer/${board.id}"> <img src=${board.thumbnail} /> </a>
130
180
 
131
- <div name>${board.name}</div>
132
- <!-- <div description>${board.description}</div> -->
181
+ <div name>${board.name}</div>
182
+ <!-- <div description>${board.description}</div> -->
133
183
 
134
- <mwc-icon
135
- iconBtn
136
- info
137
- @click=${e => {
184
+ <mwc-icon
185
+ iconBtn
186
+ info
187
+ @click=${e => {
138
188
  this.infoBoard(board.id);
139
189
  e.preventDefault();
140
190
  }}
141
- >info</mwc-icon
142
- >
191
+ >info</mwc-icon
192
+ >
143
193
 
144
- ${(this.favorites || []).includes(board.id)
194
+ ${(this.favorites || []).includes(board.id)
145
195
  ? html ` <mwc-icon iconBtn favored @click=${e => this.removeFavorite(board.id)}>star</mwc-icon> `
146
196
  : html ` <mwc-icon iconBtn @click=${e => this.addFavorite(board.id)}>star_border</mwc-icon> `}
147
- </div>
148
- `)}
197
+ </div>
198
+ `))}
149
199
  `;
150
200
  }
151
201
  updated(changes) {
package/dist-client/board-list/board-tile-list.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"board-tile-list.js","sourceRoot":"","sources":["../../client/board-list/board-tile-list.js"],"names":[],"mappings":"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","sourcesContent":["import '@operato/board/ox-board-creation-card.js'\nimport '@material/mwc-icon'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\n\nimport { client } from '@things-factory/shell'\n\nexport default class BoardTileList extends LitElement {\n static get styles() {\n return [\n css`\n :host {\n overflow: auto;\n padding: var(--popup-content-padding);\n display: grid;\n\n grid-template-columns: var(--card-list-template);\n grid-auto-rows: var(--card-list-rows-height);\n grid-gap: 20px;\n --mdc-button-horizontal-padding: var(--padding-default);\n }\n\n [card] {\n position: relative;\n align-items: center;\n overflow: hidden;\n }\n\n [card][create] {\n overflow: visible;\n background-color: initial;\n }\n\n [card] > a {\n display: flex;\n }\n\n [card]:hover {\n cursor: pointer;\n }\n\n [name] {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n margin-top: var(--margin-narrow);\n width: calc(100% - 45px);\n color: var(--primary-text-color);\n font-weight: bolder;\n font-size: var(--fontsize-small);\n }\n\n img {\n display: block;\n\n margin: auto;\n max-width: 100%;\n max-height: 100%;\n }\n\n mwc-icon[iconBtn] {\n float: right;\n margin-top: -20px;\n margin-left: 2px;\n color: var(--board-list-star-color);\n font-size: 1.4em;\n }\n mwc-icon[info] {\n color: var(--primary-color);\n }\n\n mwc-icon[iconBtn][favored],\n mwc-icon[info]:hover {\n color: var(--board-list-star-active-color);\n }\n\n a {\n display: block;\n border-radius: var(--card-list-border-radius);\n border: var(--border-dark-color);\n box-sizing: border-box;\n background-color: var(--card-list-background-color);\n margin: 0px;\n height: calc(100% - 25px);\n }\n\n :host > *:hover [info] {\n opacity: 1;\n -webkit-transition: opacity 0.8s;\n -moz-transition: opacity 0.8s;\n -o-transition: opacity 0.8s;\n transition: opacity 0.8s;\n }\n\n @media screen and (max-width: 800px), screen and (max-height: 600px) {\n ox-board-creation-card {\n display: none;\n }\n }\n `\n ]\n }\n\n static get properties() {\n return {\n creatable: {\n type: Boolean,\n attribute: 'creatable'\n },\n boards: Array,\n favorites: Array,\n groups: Array,\n group: String\n }\n }\n\n render() {\n var boards = this.boards || []\n\n return html`\n ${this.creatable\n ? html`\n <ox-board-creation-card\n .groups=${this.groups}\n .defaultGroup=${this.group}\n @create-board=${e => this.onCreateBoard(e)}\n card\n create\n ></ox-board-creation-card>\n `\n : html``}\n ${boards.map(\n board =>\n html`\n <div card>\n <a href=\"board-viewer/${board.id}\"> <img src=${board.thumbnail} /> </a>\n\n <div name>${board.name}</div>\n <!-- <div description>${board.description}</div> -->\n\n <mwc-icon\n iconBtn\n info\n @click=${e => {\n this.infoBoard(board.id)\n e.preventDefault()\n }}\n >info</mwc-icon\n >\n\n ${(this.favorites || []).includes(board.id)\n ? html` <mwc-icon iconBtn favored @click=${e => this.removeFavorite(board.id)}>star</mwc-icon> `\n : html` <mwc-icon iconBtn @click=${e => this.addFavorite(board.id)}>star_border</mwc-icon> `}\n </div>\n `\n )}\n `\n }\n\n updated(changes) {\n var creationCard = this.shadowRoot.querySelector('ox-board-creation-card')\n if (creationCard) {\n creationCard.reset()\n }\n }\n\n onCreateBoard(e) {\n this.dispatchEvent(\n new CustomEvent('create-board', {\n detail: e.detail\n })\n )\n }\n\n infoBoard(boardId) {\n this.dispatchEvent(\n new CustomEvent('info-board', {\n detail: boardId\n })\n )\n }\n\n async removeFavorite(boardId) {\n await client.query({\n query: gql`\n mutation {\n deleteFavorite(routing: \"${boardId}\")\n }\n `\n })\n\n this.refreshFavorites()\n }\n\n async addFavorite(boardId) {\n await client.query({\n query: gql`\n mutation {\n createFavorite(favorite: {\n routing: \"${boardId}\"\n }) {\n id\n routing\n }\n }\n `\n })\n\n this.refreshFavorites()\n }\n\n async refreshFavorites() {\n this.dispatchEvent(new CustomEvent('refresh-favorites'))\n }\n}\n\nwindow.customElements.define('board-tile-list', BoardTileList)\n"]}
1
+ {"version":3,"file":"board-tile-list.js","sourceRoot":"","sources":["../../client/board-list/board-tile-list.js"],"names":[],"mappings":"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","sourcesContent":["import '@operato/board/ox-board-creation-card.js'\nimport '@material/mwc-icon'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { keyed } from 'lit/directives/keyed.js'\n\nimport { client } from '@things-factory/shell'\n\nexport default class BoardTileList extends LitElement {\n static get styles() {\n return [\n css`\n :host {\n overflow: auto;\n padding: var(--popup-content-padding);\n display: grid;\n\n grid-template-columns: var(--card-list-template);\n grid-auto-rows: var(--card-list-rows-height);\n grid-gap: 20px;\n --mdc-button-horizontal-padding: var(--padding-default);\n }\n\n [card] {\n position: relative;\n align-items: center;\n overflow: hidden;\n }\n\n [card][create] {\n overflow: visible;\n background-color: initial;\n }\n\n [card] > a {\n display: flex;\n }\n\n [card]:hover {\n cursor: pointer;\n }\n\n [name] {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n margin-top: var(--margin-narrow);\n width: calc(100% - 45px);\n color: var(--primary-text-color);\n font-weight: bolder;\n font-size: var(--fontsize-small);\n }\n\n img {\n display: block;\n\n margin: auto;\n max-width: 100%;\n max-height: 100%;\n }\n\n mwc-icon[iconBtn] {\n float: right;\n margin-top: -20px;\n margin-left: 2px;\n color: var(--board-list-star-color);\n font-size: 1.4em;\n }\n mwc-icon[info] {\n color: var(--primary-color);\n }\n\n mwc-icon[iconBtn][favored],\n mwc-icon[info]:hover {\n color: var(--board-list-star-active-color);\n }\n\n a {\n display: block;\n border-radius: var(--card-list-border-radius);\n border: var(--border-dark-color);\n box-sizing: border-box;\n background-color: var(--card-list-background-color);\n margin: 0px;\n height: calc(100% - 25px);\n }\n\n :host > *:hover [info] {\n opacity: 1;\n -webkit-transition: opacity 0.8s;\n -moz-transition: opacity 0.8s;\n -o-transition: opacity 0.8s;\n transition: opacity 0.8s;\n }\n\n [draggable='true'] {\n cursor: grab;\n }\n\n @media screen and (max-width: 800px), screen and (max-height: 600px) {\n ox-board-creation-card {\n display: none;\n }\n }\n `\n ]\n }\n\n static get properties() {\n return {\n creatable: {\n type: Boolean,\n attribute: 'creatable'\n },\n boards: Array,\n favorites: Array,\n groups: Array,\n group: String,\n reorderable: {\n type: Boolean,\n attribute: 'reorderable'\n }\n }\n }\n\n draggingItem\n\n connectedCallback() {\n super.connectedCallback()\n\n if (this.reorderable) {\n this.renderRoot.addEventListener('dragstart', e => {\n // if (!e.target.getAttribute('draggable')) {\n // e.preventDefault()\n // }\n\n // this.draggedItem = e.target\n this.draggedItem = e.target.closest('[card]')\n e.dataTransfer.setData('text/plain', e.target.innerHTML)\n })\n\n this.renderRoot.addEventListener('dragover', e => {\n e.preventDefault()\n const targetItem = e.target.closest('[card]')\n if (targetItem !== this.draggedItem) {\n const targetRect = targetItem.getBoundingClientRect()\n const mousePos = e.clientX - targetRect.left\n\n if (mousePos < targetRect.width / 2) {\n // 마우스 위치가 아이템 좌측 반절에 있을 때\n this.renderRoot.insertBefore(this.draggedItem, targetItem)\n } else {\n // 마우스 위치가 아이템 우측 반절에 있을 때\n this.renderRoot.insertBefore(this.draggedItem, targetItem.nextSibling)\n }\n }\n })\n\n this.renderRoot.addEventListener('drop', e => {\n e.preventDefault()\n\n const boardIds = Array.from(this.renderRoot.querySelectorAll('[card]'))\n .map(board => board.getAttribute('id'))\n .filter(Boolean)\n\n this.dispatchEvent(\n new CustomEvent('reordered', {\n detail: {\n groupId: this.group,\n boardIds\n }\n })\n )\n })\n }\n }\n\n render() {\n var boards = this.boards || []\n\n return html`\n ${this.creatable\n ? html`\n <ox-board-creation-card\n .groups=${this.groups}\n .defaultGroup=${this.group}\n @create-board=${e => this.onCreateBoard(e)}\n card\n create\n ></ox-board-creation-card>\n `\n : html``}\n ${keyed(\n Date.now(),\n boards.map(\n board =>\n html`\n <div card draggable=\"true\" id=${board.id}>\n <a href=\"board-viewer/${board.id}\"> <img src=${board.thumbnail} /> </a>\n\n <div name>${board.name}</div>\n <!-- <div description>${board.description}</div> -->\n\n <mwc-icon\n iconBtn\n info\n @click=${e => {\n this.infoBoard(board.id)\n e.preventDefault()\n }}\n >info</mwc-icon\n >\n\n ${(this.favorites || []).includes(board.id)\n ? html` <mwc-icon iconBtn favored @click=${e => this.removeFavorite(board.id)}>star</mwc-icon> `\n : html` <mwc-icon iconBtn @click=${e => this.addFavorite(board.id)}>star_border</mwc-icon> `}\n </div>\n `\n )\n )}\n `\n }\n\n updated(changes) {\n var creationCard = this.shadowRoot.querySelector('ox-board-creation-card')\n if (creationCard) {\n creationCard.reset()\n }\n }\n\n onCreateBoard(e) {\n this.dispatchEvent(\n new CustomEvent('create-board', {\n detail: e.detail\n })\n )\n }\n\n infoBoard(boardId) {\n this.dispatchEvent(\n new CustomEvent('info-board', {\n detail: boardId\n })\n )\n }\n\n async removeFavorite(boardId) {\n await client.query({\n query: gql`\n mutation {\n deleteFavorite(routing: \"${boardId}\")\n }\n `\n })\n\n this.refreshFavorites()\n }\n\n async addFavorite(boardId) {\n await client.query({\n query: gql`\n mutation {\n createFavorite(favorite: {\n routing: \"${boardId}\"\n }) {\n id\n routing\n }\n }\n `\n })\n\n this.refreshFavorites()\n }\n\n async refreshFavorites() {\n this.dispatchEvent(new CustomEvent('refresh-favorites'))\n }\n}\n\nwindow.customElements.define('board-tile-list', BoardTileList)\n"]}
package/dist-client/pages/play-list-page.js CHANGED
@@ -13,8 +13,8 @@ import { navigate, PageView, store } from '@operato/shell';
13
13
  import { client } from '@operato/graphql';
14
14
  import { i18next, localize } from '@operato/i18n';
15
15
  import { ScrollbarStyles } from '@operato/styles';
16
- import { swipe } from '@things-factory/utils';
17
16
  import { pulltorefresh } from '@operato/pull-to-refresh';
17
+ import { swipe, isMobileDevice } from '@things-factory/utils';
18
18
  import { createPlayGroup, deletePlayGroup, fetchPlayGroup, fetchPlayGroupList, leavePlayGroup, updateBoard, updatePlayGroup } from '../graphql';
19
19
  class PlayListPage extends localize(i18next)(connect(store)(PageView)) {
20
20
  static get styles() {
@@ -73,9 +73,12 @@ class PlayListPage extends localize(i18next)(connect(store)(PageView)) {
73
73
  <board-tile-list
74
74
  .favorites=${this.favorites}
75
75
  .boards=${this.boards}
76
+ .group=${this.groupId}
76
77
  @info-board=${e => this.onInfoBoard(e.detail)}
77
78
  @delete-board=${e => this.onDeleteBoard(e.detail)}
78
79
  @refresh-favorites=${e => this.refreshFavorites()}
80
+ @reordered=${e => this.onReorder(e.detail)}
81
+ reorderable
79
82
  ></board-tile-list>
80
83
 
81
84
  <a id="play" .href=${'board-player/' + this.groupId}>
@@ -136,40 +139,42 @@ class PlayListPage extends localize(i18next)(connect(store)(PageView)) {
136
139
  return this.refresh();
137
140
  }
138
141
  });
139
- swipe({
140
- container: list,
141
- animates: {
142
- dragging: async (d, opts) => {
143
- var groups = this.groups;
144
- var currentIndex = groups.findIndex(group => group.id == this.groupId);
145
- if ((d > 0 && currentIndex <= 0) || (d < 0 && currentIndex >= groups.length - 1)) {
146
- /* TODO blocked gesture */
147
- return false;
148
- }
149
- list.style.transform = `translate3d(${d}px, 0, 0)`;
150
- },
151
- aborting: async (opts) => {
152
- list.style.transition = 'transform 0.3s';
153
- list.style.transform = `translate3d(0, 0, 0)`;
154
- setTimeout(() => {
155
- list.style.transition = '';
156
- }, 300);
157
- },
158
- swiping: async (d, opts) => {
159
- var groups = this.groups;
160
- var currentIndex = groups.findIndex(group => group.id == this.groupId);
161
- if ((d > 0 && currentIndex <= 0) || (d < 0 && currentIndex >= groups.length - 1)) {
162
- list.style.transition = '';
163
- list.style.transform = `translate3d(0, 0, 0)`;
164
- }
165
- else {
142
+ if (isMobileDevice()) {
143
+ swipe({
144
+ container: list,
145
+ animates: {
146
+ dragging: async (d, opts) => {
147
+ var groups = this.groups;
148
+ var currentIndex = groups.findIndex(group => group.id == this.groupId);
149
+ if ((d > 0 && currentIndex <= 0) || (d < 0 && currentIndex >= groups.length - 1)) {
150
+ /* TODO blocked gesture */
151
+ return false;
152
+ }
153
+ list.style.transform = `translate3d(${d}px, 0, 0)`;
154
+ },
155
+ aborting: async (opts) => {
166
156
  list.style.transition = 'transform 0.3s';
167
- list.style.transform = `translate3d(${d < 0 ? '-100%' : '100%'}, 0, 0)`;
168
- navigate(`${this.page}/${groups[currentIndex + (d < 0 ? 1 : -1)].id}`);
157
+ list.style.transform = `translate3d(0, 0, 0)`;
158
+ setTimeout(() => {
159
+ list.style.transition = '';
160
+ }, 300);
161
+ },
162
+ swiping: async (d, opts) => {
163
+ var groups = this.groups;
164
+ var currentIndex = groups.findIndex(group => group.id == this.groupId);
165
+ if ((d > 0 && currentIndex <= 0) || (d < 0 && currentIndex >= groups.length - 1)) {
166
+ list.style.transition = '';
167
+ list.style.transform = `translate3d(0, 0, 0)`;
168
+ }
169
+ else {
170
+ list.style.transition = 'transform 0.3s';
171
+ list.style.transform = `translate3d(${d < 0 ? '-100%' : '100%'}, 0, 0)`;
172
+ navigate(`${this.page}/${groups[currentIndex + (d < 0 ? 1 : -1)].id}`);
173
+ }
169
174
  }
170
175
  }
171
- }
172
- });
176
+ });
177
+ }
173
178
  }
174
179
  async onInfoBoard(boardId) {
175
180
  openOverlay('viewpart-info', {
@@ -285,6 +290,30 @@ class PlayListPage extends localize(i18next)(connect(store)(PageView)) {
285
290
  }
286
291
  this.refresh();
287
292
  }
293
+ async onReorder({ boardIds, groupId }) {
294
+ try {
295
+ const response = await client.mutate({
296
+ mutation: gql `
297
+ mutation ($id: String!, $boardIds: [String!]!) {
298
+ reorderPlayGroup(id: $id, boardIds: $boardIds) {
299
+ id
300
+ name
301
+ }
302
+ }
303
+ `,
304
+ variables: {
305
+ id: groupId,
306
+ boardIds
307
+ }
308
+ });
309
+ const playGroup = response.data.reorderPlayGroup;
310
+ this._notify('info', i18next.t('text.reorder play-group', { playGroup: playGroup.name }));
311
+ }
312
+ catch (ex) {
313
+ this._notify('error', ex, ex);
314
+ }
315
+ this.refresh();
316
+ }
288
317
  async refreshFavorites() {
289
318
  const response = await client.query({
290
319
  query: gql `
package/dist-client/pages/play-list-page.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"play-list-page.js","sourceRoot":"","sources":["../../client/pages/play-list-page.js"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-fab'\nimport '@material/mwc-icon'\nimport '../board-list/board-tile-list'\nimport '../board-list/play-group-bar'\nimport '../viewparts/board-info'\nimport '../viewparts/play-group-info'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { UPDATE_FAVORITES } from '@things-factory/fav-base'\nimport { openOverlay } from '@operato/layout'\nimport { navigate, PageView, store } from '@operato/shell'\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { swipe } from '@things-factory/utils'\nimport { pulltorefresh } from '@operato/pull-to-refresh'\n\nimport {\n createPlayGroup,\n deletePlayGroup,\n fetchPlayGroup,\n fetchPlayGroupList,\n leavePlayGroup,\n updateBoard,\n updatePlayGroup\n} from '../graphql'\n\nclass PlayListPage extends localize(i18next)(connect(store)(PageView)) {\n static get styles() {\n return [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n position: relative;\n\n overflow: hidden;\n }\n\n board-tile-list {\n flex: 1;\n overflow-y: auto;\n }\n\n #play {\n position: absolute;\n bottom: 15px;\n right: 16px;\n text-decoration: auto;\n }\n `\n ]\n }\n\n static get properties() {\n return {\n groupId: String,\n groups: Array,\n boards: Array,\n favorites: Array\n }\n }\n\n get context() {\n var group = this.groups && this.groups.find(group => group.id === this.groupId)\n\n return {\n title: {\n icon: 'video_library',\n text: group ? group.name : 'Play List'\n },\n board_topmenu: true\n }\n }\n\n render() {\n return html`\n <play-group-bar\n .groups=${this.groups}\n .groupId=${this.groupId}\n targetPage=\"play-list\"\n @info-play-group=${e => this.onInfoPlayGroup(e.detail)}\n ></play-group-bar>\n\n <board-tile-list\n .favorites=${this.favorites}\n .boards=${this.boards}\n @info-board=${e => this.onInfoBoard(e.detail)}\n @delete-board=${e => this.onDeleteBoard(e.detail)}\n @refresh-favorites=${e => this.refreshFavorites()}\n ></board-tile-list>\n\n <a id=\"play\" .href=${'board-player/' + this.groupId}>\n <mwc-fab icon=\"play_arrow\" title=\"play\"> </mwc-fab>\n </a>\n `\n }\n\n async refresh() {\n this.groups = (await fetchPlayGroupList()).playGroups.items\n\n this.groups && (await this.refreshBoards())\n }\n\n async refreshBoards() {\n if (!this.groups) {\n await this.refresh()\n return\n }\n\n if (!this.groupId) {\n let groupId = this.groups && this.groups[0] && this.groups[0].id\n var newURL = new URL(window.location)\n\n newURL.pathname += `/${groupId}`\n\n if (groupId) {\n navigate(newURL, true)\n }\n return\n }\n\n if (this.groupId) {\n var playGroup = (await fetchPlayGroup(this.groupId)).playGroup\n this.boards = playGroup ? playGroup.boards : []\n } else {\n this.boards = []\n }\n\n this.updateContext()\n\n var list = this.shadowRoot.querySelector('board-tile-list')\n\n list.style.transition = ''\n list.style.transform = `translate3d(0, 0, 0)`\n }\n\n async pageInitialized() {\n this.refresh()\n }\n\n async pageUpdated(changes, lifecycle) {\n if (this.active) {\n this.page = lifecycle.page\n this.groupId = lifecycle.resourceId\n\n await this.updateComplete\n\n this.refreshBoards()\n }\n }\n\n stateChanged(state) {\n this.favorites = state.favorite.favorites\n }\n\n firstUpdated() {\n var list = this.shadowRoot.querySelector('board-tile-list')\n\n pulltorefresh({\n container: this.shadowRoot,\n scrollable: list,\n refresh: () => {\n return this.refresh()\n }\n })\n\n swipe({\n container: list,\n animates: {\n dragging: async (d, opts) => {\n var groups = this.groups\n var currentIndex = groups.findIndex(group => group.id == this.groupId)\n\n if ((d > 0 && currentIndex <= 0) || (d < 0 && currentIndex >= groups.length - 1)) {\n /* TODO blocked gesture */\n return false\n }\n\n list.style.transform = `translate3d(${d}px, 0, 0)`\n },\n aborting: async opts => {\n list.style.transition = 'transform 0.3s'\n list.style.transform = `translate3d(0, 0, 0)`\n\n setTimeout(() => {\n list.style.transition = ''\n }, 300)\n },\n swiping: async (d, opts) => {\n var groups = this.groups\n var currentIndex = groups.findIndex(group => group.id == this.groupId)\n\n if ((d > 0 && currentIndex <= 0) || (d < 0 && currentIndex >= groups.length - 1)) {\n list.style.transition = ''\n list.style.transform = `translate3d(0, 0, 0)`\n } else {\n list.style.transition = 'transform 0.3s'\n list.style.transform = `translate3d(${d < 0 ? '-100%' : '100%'}, 0, 0)`\n\n navigate(`${this.page}/${groups[currentIndex + (d < 0 ? 1 : -1)].id}`)\n }\n }\n }\n })\n }\n\n async onInfoBoard(boardId) {\n openOverlay('viewpart-info', {\n template: html`\n <board-info\n .boardId=${boardId}\n .groupId=${this.groupId}\n @update-board=${e => this.onUpdateBoard(e.detail)}\n @delete-board=${e => this.onDeleteBoard(e.detail)}\n @join-playgroup=${e => this.onJoinPlayGroup(e.detail)}\n @leave-playgroup=${e => this.onLeavePlayGroup(e.detail)}\n ></board-info>\n `\n })\n }\n\n async onInfoPlayGroup(groupId) {\n openOverlay('viewpart-info', {\n template: html`\n <play-group-info\n .playGroupId=${groupId}\n @update-play-group=${e => this.onUpdatePlayGroup(e.detail)}\n @delete-play-group=${e => this.onDeletePlayGroup(e.detail)}\n @create-play-group=${e => this.onCreatePlayGroup(e.detail)}\n ></play-group-info>\n `\n })\n }\n\n async onCreatePlayGroup(playGroup) {\n try {\n await createPlayGroup(playGroup)\n this._notify('info', i18next.t('text.play-group created', { playGroup: playGroup.name }))\n } catch (ex) {\n this._notify('error', ex, ex)\n }\n\n this.refresh()\n }\n\n async onUpdatePlayGroup(playGroup) {\n try {\n await updatePlayGroup(playGroup)\n this._notify('info', i18next.t('text.play-group updated', { playGroup: playGroup.name }))\n } catch (ex) {\n this._notify('error', ex, ex)\n }\n\n this.refresh()\n }\n\n async onDeletePlayGroup(playGroup) {\n try {\n await deletePlayGroup(playGroup.id)\n this._notify('info', i18next.t('text.play-group deleted', { playGroup: playGroup.name }))\n } catch (ex) {\n this._notify('error', ex, ex)\n }\n\n this.refresh()\n }\n\n async onUpdateBoard(board) {\n try {\n await updateBoard(board)\n this._notify('info', i18next.t('text.board updated', { board: board.name }))\n } catch (ex) {\n this._notify('error', ex, ex)\n }\n\n this.refreshBoards()\n }\n\n async onDeleteBoard(board) {\n const playGroup = this.groups && this.groups.find(group => group.id === this.groupId)\n await this.onLeavePlayGroup({ board, playGroup })\n }\n\n async onJoinPlayGroup({ board, playGroup }) {\n try {\n await client.mutate({\n mutation: gql`\n mutation JoinPlayGroup($id: String!, $boardIds: [String!]!) {\n joinPlayGroup(id: $id, boardIds: $boardIds) {\n id\n }\n }\n `,\n variables: {\n id: playGroup.id,\n boardIds: [board.id]\n }\n })\n\n this._notify('info', i18next.t('text.joined into play-group', { board: board.name, playGroup: playGroup.name }))\n } catch (ex) {\n this._notify('error', ex, ex)\n }\n\n this.refresh()\n }\n\n async onLeavePlayGroup({ board, playGroup }) {\n try {\n await client.mutate({\n mutation: gql`\n mutation ($id: String!, $boardIds: [String!]!) {\n leavePlayGroup(id: $id, boardIds: $boardIds) {\n id\n }\n }\n `,\n variables: {\n id: playGroup.id,\n boardIds: [board.id]\n }\n })\n\n this._notify('info', i18next.t('text.leaved from play-group', { board: board.name, playGroup: playGroup.name }))\n } catch (ex) {\n this._notify('error', ex, ex)\n }\n\n this.refresh()\n }\n\n async refreshFavorites() {\n const response = await client.query({\n query: gql`\n query {\n myFavorites {\n id\n routing\n }\n }\n `\n })\n\n store.dispatch({\n type: UPDATE_FAVORITES,\n favorites: response.data.myFavorites.map(favorite => favorite.routing)\n })\n }\n\n _notify(level, message, ex) {\n document.dispatchEvent(\n new CustomEvent('notify', {\n detail: {\n level,\n message,\n ex\n }\n })\n )\n }\n}\n\nwindow.customElements.define('play-list-page', PlayListPage)\n"]}
1
+ {"version":3,"file":"play-list-page.js","sourceRoot":"","sources":["../../client/pages/play-list-page.js"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-fab'\nimport '@material/mwc-icon'\nimport '../board-list/board-tile-list'\nimport '../board-list/play-group-bar'\nimport '../viewparts/board-info'\nimport '../viewparts/play-group-info'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { UPDATE_FAVORITES } from '@things-factory/fav-base'\nimport { openOverlay } from '@operato/layout'\nimport { navigate, PageView, store } from '@operato/shell'\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { pulltorefresh } from '@operato/pull-to-refresh'\nimport { swipe, isMobileDevice } from '@things-factory/utils'\n\nimport {\n createPlayGroup,\n deletePlayGroup,\n fetchPlayGroup,\n fetchPlayGroupList,\n leavePlayGroup,\n updateBoard,\n updatePlayGroup\n} from '../graphql'\n\nclass PlayListPage extends localize(i18next)(connect(store)(PageView)) {\n static get styles() {\n return [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n position: relative;\n\n overflow: hidden;\n }\n\n board-tile-list {\n flex: 1;\n overflow-y: auto;\n }\n\n #play {\n position: absolute;\n bottom: 15px;\n right: 16px;\n text-decoration: auto;\n }\n `\n ]\n }\n\n static get properties() {\n return {\n groupId: String,\n groups: Array,\n boards: Array,\n favorites: Array\n }\n }\n\n get context() {\n var group = this.groups && this.groups.find(group => group.id === this.groupId)\n\n return {\n title: {\n icon: 'video_library',\n text: group ? group.name : 'Play List'\n },\n board_topmenu: true\n }\n }\n\n render() {\n return html`\n <play-group-bar\n .groups=${this.groups}\n .groupId=${this.groupId}\n targetPage=\"play-list\"\n @info-play-group=${e => this.onInfoPlayGroup(e.detail)}\n ></play-group-bar>\n\n <board-tile-list\n .favorites=${this.favorites}\n .boards=${this.boards}\n .group=${this.groupId}\n @info-board=${e => this.onInfoBoard(e.detail)}\n @delete-board=${e => this.onDeleteBoard(e.detail)}\n @refresh-favorites=${e => this.refreshFavorites()}\n @reordered=${e => this.onReorder(e.detail)}\n reorderable\n ></board-tile-list>\n\n <a id=\"play\" .href=${'board-player/' + this.groupId}>\n <mwc-fab icon=\"play_arrow\" title=\"play\"> </mwc-fab>\n </a>\n `\n }\n\n async refresh() {\n this.groups = (await fetchPlayGroupList()).playGroups.items\n\n this.groups && (await this.refreshBoards())\n }\n\n async refreshBoards() {\n if (!this.groups) {\n await this.refresh()\n return\n }\n\n if (!this.groupId) {\n let groupId = this.groups && this.groups[0] && this.groups[0].id\n var newURL = new URL(window.location)\n\n newURL.pathname += `/${groupId}`\n\n if (groupId) {\n navigate(newURL, true)\n }\n return\n }\n\n if (this.groupId) {\n var playGroup = (await fetchPlayGroup(this.groupId)).playGroup\n this.boards = playGroup ? playGroup.boards : []\n } else {\n this.boards = []\n }\n\n this.updateContext()\n\n var list = this.shadowRoot.querySelector('board-tile-list')\n\n list.style.transition = ''\n list.style.transform = `translate3d(0, 0, 0)`\n }\n\n async pageInitialized() {\n this.refresh()\n }\n\n async pageUpdated(changes, lifecycle) {\n if (this.active) {\n this.page = lifecycle.page\n this.groupId = lifecycle.resourceId\n\n await this.updateComplete\n\n this.refreshBoards()\n }\n }\n\n stateChanged(state) {\n this.favorites = state.favorite.favorites\n }\n\n firstUpdated() {\n var list = this.shadowRoot.querySelector('board-tile-list')\n\n pulltorefresh({\n container: this.shadowRoot,\n scrollable: list,\n refresh: () => {\n return this.refresh()\n }\n })\n\n if (isMobileDevice()) {\n swipe({\n container: list,\n animates: {\n dragging: async (d, opts) => {\n var groups = this.groups\n var currentIndex = groups.findIndex(group => group.id == this.groupId)\n\n if ((d > 0 && currentIndex <= 0) || (d < 0 && currentIndex >= groups.length - 1)) {\n /* TODO blocked gesture */\n return false\n }\n\n list.style.transform = `translate3d(${d}px, 0, 0)`\n },\n aborting: async opts => {\n list.style.transition = 'transform 0.3s'\n list.style.transform = `translate3d(0, 0, 0)`\n\n setTimeout(() => {\n list.style.transition = ''\n }, 300)\n },\n swiping: async (d, opts) => {\n var groups = this.groups\n var currentIndex = groups.findIndex(group => group.id == this.groupId)\n\n if ((d > 0 && currentIndex <= 0) || (d < 0 && currentIndex >= groups.length - 1)) {\n list.style.transition = ''\n list.style.transform = `translate3d(0, 0, 0)`\n } else {\n list.style.transition = 'transform 0.3s'\n list.style.transform = `translate3d(${d < 0 ? '-100%' : '100%'}, 0, 0)`\n\n navigate(`${this.page}/${groups[currentIndex + (d < 0 ? 1 : -1)].id}`)\n }\n }\n }\n })\n }\n }\n\n async onInfoBoard(boardId) {\n openOverlay('viewpart-info', {\n template: html`\n <board-info\n .boardId=${boardId}\n .groupId=${this.groupId}\n @update-board=${e => this.onUpdateBoard(e.detail)}\n @delete-board=${e => this.onDeleteBoard(e.detail)}\n @join-playgroup=${e => this.onJoinPlayGroup(e.detail)}\n @leave-playgroup=${e => this.onLeavePlayGroup(e.detail)}\n ></board-info>\n `\n })\n }\n\n async onInfoPlayGroup(groupId) {\n openOverlay('viewpart-info', {\n template: html`\n <play-group-info\n .playGroupId=${groupId}\n @update-play-group=${e => this.onUpdatePlayGroup(e.detail)}\n @delete-play-group=${e => this.onDeletePlayGroup(e.detail)}\n @create-play-group=${e => this.onCreatePlayGroup(e.detail)}\n ></play-group-info>\n `\n })\n }\n\n async onCreatePlayGroup(playGroup) {\n try {\n await createPlayGroup(playGroup)\n this._notify('info', i18next.t('text.play-group created', { playGroup: playGroup.name }))\n } catch (ex) {\n this._notify('error', ex, ex)\n }\n\n this.refresh()\n }\n\n async onUpdatePlayGroup(playGroup) {\n try {\n await updatePlayGroup(playGroup)\n this._notify('info', i18next.t('text.play-group updated', { playGroup: playGroup.name }))\n } catch (ex) {\n this._notify('error', ex, ex)\n }\n\n this.refresh()\n }\n\n async onDeletePlayGroup(playGroup) {\n try {\n await deletePlayGroup(playGroup.id)\n this._notify('info', i18next.t('text.play-group deleted', { playGroup: playGroup.name }))\n } catch (ex) {\n this._notify('error', ex, ex)\n }\n\n this.refresh()\n }\n\n async onUpdateBoard(board) {\n try {\n await updateBoard(board)\n this._notify('info', i18next.t('text.board updated', { board: board.name }))\n } catch (ex) {\n this._notify('error', ex, ex)\n }\n\n this.refreshBoards()\n }\n\n async onDeleteBoard(board) {\n const playGroup = this.groups && this.groups.find(group => group.id === this.groupId)\n await this.onLeavePlayGroup({ board, playGroup })\n }\n\n async onJoinPlayGroup({ board, playGroup }) {\n try {\n await client.mutate({\n mutation: gql`\n mutation JoinPlayGroup($id: String!, $boardIds: [String!]!) {\n joinPlayGroup(id: $id, boardIds: $boardIds) {\n id\n }\n }\n `,\n variables: {\n id: playGroup.id,\n boardIds: [board.id]\n }\n })\n\n this._notify('info', i18next.t('text.joined into play-group', { board: board.name, playGroup: playGroup.name }))\n } catch (ex) {\n this._notify('error', ex, ex)\n }\n\n this.refresh()\n }\n\n async onLeavePlayGroup({ board, playGroup }) {\n try {\n await client.mutate({\n mutation: gql`\n mutation ($id: String!, $boardIds: [String!]!) {\n leavePlayGroup(id: $id, boardIds: $boardIds) {\n id\n }\n }\n `,\n variables: {\n id: playGroup.id,\n boardIds: [board.id]\n }\n })\n\n this._notify('info', i18next.t('text.leaved from play-group', { board: board.name, playGroup: playGroup.name }))\n } catch (ex) {\n this._notify('error', ex, ex)\n }\n\n this.refresh()\n }\n\n async onReorder({ boardIds, groupId }) {\n try {\n const response = await client.mutate({\n mutation: gql`\n mutation ($id: String!, $boardIds: [String!]!) {\n reorderPlayGroup(id: $id, boardIds: $boardIds) {\n id\n name\n }\n }\n `,\n variables: {\n id: groupId,\n boardIds\n }\n })\n\n const playGroup = response.data.reorderPlayGroup\n\n this._notify('info', i18next.t('text.reorder play-group', { playGroup: playGroup.name }))\n } catch (ex) {\n this._notify('error', ex, ex)\n }\n\n this.refresh()\n }\n\n async refreshFavorites() {\n const response = await client.query({\n query: gql`\n query {\n myFavorites {\n id\n routing\n }\n }\n `\n })\n\n store.dispatch({\n type: UPDATE_FAVORITES,\n favorites: response.data.myFavorites.map(favorite => favorite.routing)\n })\n }\n\n _notify(level, message, ex) {\n document.dispatchEvent(\n new CustomEvent('notify', {\n detail: {\n level,\n message,\n ex\n }\n })\n )\n }\n}\n\nwindow.customElements.define('play-list-page', PlayListPage)\n"]}