diff --git a/html/src/app.js b/html/src/app.js index 3f952911..c116f1af 100644 --- a/html/src/app.js +++ b/html/src/app.js @@ -13682,6 +13682,7 @@ speechSynthesis.getVoices(); isWorldsLoading: false, isFavoriteWorldsLoading: false, isAvatarsLoading: false, + isGroupsLoading: false, worldSorting: 'update', avatarSorting: 'update', @@ -13987,19 +13988,25 @@ speechSynthesis.getVoices(); if (this.$refs.userDialogTabs.currentName === '0') { this.userDialogLastActiveTab = 'Info'; } else if (this.$refs.userDialogTabs.currentName === '1') { + this.userDialogLastActiveTab = 'Groups'; + if (this.userDialogLastGroup !== userId) { + this.userDialogLastGroup = userId; + this.getUserGroups(userId); + } + } else if (this.$refs.userDialogTabs.currentName === '2') { this.userDialogLastActiveTab = 'Worlds'; this.setUserDialogWorlds(userId); if (this.userDialogLastWorld !== userId) { this.userDialogLastWorld = userId; this.refreshUserDialogWorlds(); } - } else if (this.$refs.userDialogTabs.currentName === '2') { + } else if (this.$refs.userDialogTabs.currentName === '3') { this.userDialogLastActiveTab = 'Favorite Worlds'; if (this.userDialogLastFavoriteWorld !== userId) { this.userDialogLastFavoriteWorld = userId; this.getUserFavoriteWorlds(userId); } - } else if (this.$refs.userDialogTabs.currentName === '3') { + } else if (this.$refs.userDialogTabs.currentName === '4') { this.userDialogLastActiveTab = 'Avatars'; this.setUserDialogAvatars(userId); this.userDialogLastAvatar = userId; @@ -14010,7 +14017,7 @@ speechSynthesis.getVoices(); this.refreshUserDialogAvatars(); } this.setUserDialogAvatarsRemote(userId); - } else if (this.$refs.userDialogTabs.currentName === '4') { + } else if (this.$refs.userDialogTabs.currentName === '5') { this.userDialogLastActiveTab = 'JSON'; this.refreshUserDialogTreeData(); } @@ -18915,13 +18922,19 @@ speechSynthesis.getVoices(); $app.data.userDialogLastAvatar = ''; $app.data.userDialogLastWorld = ''; $app.data.userDialogLastFavoriteWorld = ''; + $app.data.userDialogLastGroup = ''; $app.methods.userDialogTabClick = function (obj) { var userId = this.userDialog.id; if (this.userDialogLastActiveTab === obj.label) { return; } - if (obj.label === 'Avatars') { + if (obj.label === 'Groups') { + if (this.userDialogLastGroup !== userId) { + this.userDialogLastGroup = userId; + this.getUserGroups(userId); + } + } else if (obj.label === 'Avatars') { this.setUserDialogAvatars(userId); if (this.userDialogLastAvatar !== userId) { this.userDialogLastAvatar = userId; @@ -19608,6 +19621,45 @@ speechSynthesis.getVoices(); } }; + // userDialog Groups + + $app.data.userGroups = { + groups: [], + ownGroups: [], + mutualGroups: [], + remainingGroups: [] + }; + + $app.methods.getUserGroups = async function (userId) { + this.userDialog.isGroupsLoading = true; + this.userGroups = { + groups: [], + ownGroups: [], + mutualGroups: [], + remainingGroups: [] + }; + var params = { + n: 100, + offset: 0, + userId + }; + var args = await API.getGroups(params); + this.userGroups.groups = args.json; + for (var i = 0; i < args.json.length; ++i) { + var group = args.json[i]; + if (group.ownerId === userId) { + this.userGroups.ownGroups.unshift(group); + } + if (group.mutualGroup) { + this.userGroups.mutualGroups.unshift(group); + } + if (!group.mutualGroup && group.ownerId !== userId) { + this.userGroups.remainingGroups.unshift(group); + } + } + this.userDialog.isGroupsLoading = false; + }; + // gallery $app.data.galleryDialog = {}; @@ -22202,6 +22254,74 @@ speechSynthesis.getVoices(); ); }; + // App: Groups + + API.cachedGroups = new Map(); + + /* + params: { + groupId: string + } + */ + API.getGroup = function (params) { + // includeRoles=true + return this.call(`groups/${params.groupId}`, { + method: 'GET' + }).then((json) => { + var args = { + json, + params + }; + this.$emit('GROUP', args); + return args; + }); + }; + + API.$on('GROUP', function (args) { + var group = args.json; + console.log(args); + this.cachedGroups.set(group.id, group); + }); + + /* + params: { + userId: string + } + */ + API.getGroups = function (params) { + return this.call(`users/${params.userId}/groups`, { + method: 'GET' + }).then((json) => { + var args = { + json, + params + }; + this.$emit('GROUP:LIST', args); + return args; + }); + }; + + API.$on('GROUP:LIST', function (args) { + console.log(args.json); + for (var i = 0; i < args.json.length; ++i) { + var group = args.json[i]; + this.cachedGroups.set(group.id, group); + } + }); + + $app.data.groupDialog = { + visible: false, + loading: false, + id: '', + group: null + }; + + $app.methods.showGroupDialog = function (groupId) { + // this.$nextTick(() => adjustDialogZ(this.$refs.groupDialog.$el)); + this.groupDialog.visible = true; + this.groupDialog.id = groupId; + }; + $app = new Vue($app); window.$app = $app; })(); diff --git a/html/src/index.pug b/html/src/index.pug index f22e844d..453dd4b0 100644 --- a/html/src/index.pug +++ b/html/src/index.pug @@ -1774,6 +1774,40 @@ html span.extra span(v-text="userDialog.$homeLocationName") el-button(@click.stop="resetHome()" size="mini" icon="el-icon-delete" circle style="margin-left:5px") + el-tab-pane(label="Groups") + el-button(type="default" :loading="userDialog.isGroupsLoading" @click="getUserGroups(userDialog.id)" size="mini" icon="el-icon-refresh" circle) + span(style="margin-left:5px") Total {{ userGroups.groups.length }} + div(v-loading="userDialog.isGroupsLoading" style="margin-top:10px") + template(v-if="userGroups.ownGroups.length > 0") + span(style="font-weight:bold;font-size:16px") Own Groups + span(style="color:#909399;font-size:12px;margin-left:5px") {{ userGroups.ownGroups.length }} + .x-friend-list(style="margin-top:10px;margin-bottom:15px;min-height:60px") + .x-friend-item(v-for="group in userGroups.ownGroups" :key="group.id" @click="showGroupDialog(group.id)" class="x-friend-item-border") + .avatar + img(v-lazy="group.iconUrl") + .detail + span.name(v-text="group.name") + span.extra ({{ group.memberCount }}) + template(v-if="userGroups.mutualGroups.length > 0") + span(style="font-weight:bold;font-size:16px") Mutual Groups + span(style="color:#909399;font-size:12px;margin-left:5px") {{ userGroups.mutualGroups.length }} + .x-friend-list(v-if="userGroups.mutualGroups.length > 0" style="margin-top:10px;margin-bottom:15px;min-height:60px") + .x-friend-item(v-for="group in userGroups.mutualGroups" :key="group.id" @click="showGroupDialog(group.id)" class="x-friend-item-border") + .avatar + img(v-lazy="group.iconUrl") + .detail + span.name(v-text="group.name") + span.extra ({{ group.memberCount }}) + template(v-if="userGroups.remainingGroups.length > 0") + span(style="font-weight:bold;font-size:16px") Groups + span(style="color:#909399;font-size:12px;margin-left:5px") {{ userGroups.remainingGroups.length }} + .x-friend-list(v-if="userGroups.remainingGroups.length > 0" style="margin-top:10px;margin-bottom:15px;min-height:60px") + .x-friend-item(v-for="group in userGroups.remainingGroups" :key="group.id" @click="showGroupDialog(group.id)" class="x-friend-item-border") + .avatar + img(v-lazy="group.iconUrl") + .detail + span.name(v-text="group.name") + span.extra ({{ group.memberCount }}) el-tab-pane(label="Worlds") el-button(type="default" :loading="userDialog.isWorldsLoading" @click="refreshUserDialogWorlds()" size="mini" icon="el-icon-refresh" circle) span(style="margin-left:5px") Total {{ userDialog.worlds.length }}