From 1e37c3317cd69a447ac96389cfbc4f2b38e8e22b Mon Sep 17 00:00:00 2001 From: Natsumi Date: Sat, 3 Dec 2022 02:19:10 +1300 Subject: [PATCH] Group Dialog 1 --- html/src/app.js | 136 ++++++++++++++++++++++++++++++++++++++------- html/src/index.pug | 59 ++++++++++++-------- 2 files changed, 151 insertions(+), 44 deletions(-) diff --git a/html/src/app.js b/html/src/app.js index 5480c343..f264806d 100644 --- a/html/src/app.js +++ b/html/src/app.js @@ -13292,8 +13292,19 @@ speechSynthesis.getVoices(); return true; } } else if (input.startsWith('https://vrc.group/')) { - // var shortCode = input.substring(18); - // resolve short code? A + var shortCode = input.substring(18); + API.groupStrictsearch({query: shortCode}).then((args) => { + for (var group of args.json) { + if ( + `${group.shortCode}.${group.discriminator}` === + shortCode + ) { + this.showGroupDialog(group.id); + } + } + return args; + }); + return true; } else if ( input.substring(0, 4) === 'usr_' || /^[A-Za-z0-9]{10}$/g.test(input) @@ -14107,7 +14118,10 @@ speechSynthesis.getVoices(); ); }); } - API.getRepresentedGroup({userId}); + API.getRepresentedGroup({userId}).then((args1) => { + D.representedGroup = args1.json; + return args1; + }); } return args; }); @@ -19704,6 +19718,13 @@ speechSynthesis.getVoices(); if (group.ownerId === userId) { this.userGroups.ownGroups.unshift(group); } + if (userId === API.currentUser.id) { + // skip mutual groups for current user + if (group.ownerId !== userId) { + this.userGroups.remainingGroups.unshift(group); + } + continue; + } if (group.mutualGroup) { this.userGroups.mutualGroups.unshift(group); } @@ -20260,7 +20281,7 @@ speechSynthesis.getVoices(); API.cachedAvatars.delete(id); } }); - + API.cachedGroups = new Map(); API.cachedAvatarNames = new Map(); }; @@ -22336,24 +22357,14 @@ speechSynthesis.getVoices(); API.$on('GROUP', function (args) { args.ref = this.applyGroup(args.json); - }); - - API.$on('GROUP', function (args) { console.log('group', args); - var group = args.ref; - this.cachedGroups.set(group.id, group); + this.cachedGroups.set(args.ref.id, args.ref); }); API.$on('GROUP', function (args) { if ($app.groupDialog.visible && $app.groupDialog.id === args.ref.id) { // update group dialog - } - if ( - $app.userDialog.visible && - ($app.userDialog.representedGroup.id === args.ref.id || - $app.userDialog.id === args.params.userId) - ) { - $app.userDialog.representedGroup = args.ref; + $app.groupDialog.inGroup = args.ref.membershipStatus === 'member'; } }); @@ -22378,7 +22389,7 @@ speechSynthesis.getVoices(); API.$on('GROUP:REPRESENTED', function (args) { console.log('represented', args.json); var json = args.json; - if (!json.id) { + if (!json.groupId) { // no group return; } @@ -22387,7 +22398,7 @@ speechSynthesis.getVoices(); this.$emit('GROUP', { json, params: { - groupId: json.id, + groupId: json.groupId, userId: args.params.userId } }); @@ -22470,9 +22481,7 @@ speechSynthesis.getVoices(); } }); if ($app.groupDialog.visible && $app.groupDialog.id === groupId) { - if (json.membershipStatus === 'member') { - $app.groupDialog.inGroup = true; - } + $app.groupDialog.inGroup = json.membershipStatus === 'member'; } }); @@ -22528,6 +22537,76 @@ speechSynthesis.getVoices(); } }); + /* + groupId: string, + params: { + isRepresenting: bool + } + */ + API.setGroupRepresentation = function (groupId, params) { + return this.call(`groups/${groupId}/representation`, { + method: 'PUT', + params + }).then((json) => { + var args = { + json, + groupId, + params + }; + this.$emit('GROUP:SETREPRESENTATION', args); + return args; + }); + }; + + API.$on('GROUP:SETREPRESENTATION', function (args) { + console.log('SETREPRESENTATION', args); + if ($app.groupDialog.visible && $app.groupDialog.id === args.groupId) { + $app.groupDialog.ref.isRepresenting = args.params.isRepresenting; + } + if ( + $app.userDialog.visible && + $app.userDialog.id === this.currentUser.id + ) { + this.getRepresentedGroup({userId: this.currentUser.id}).then( + (args1) => { + $app.userDialog.representedGroup = args1.json; + return args1; + } + ); + } + }); + + /* + params: { + query: string + } + */ + API.groupStrictsearch = function (params) { + return this.call(`groups/strictsearch`, { + method: 'GET', + params + }).then((json) => { + var args = { + json, + params + }; + this.$emit('GROUP:STRICTSEARCH', args); + return args; + }); + }; + + API.$on('GROUP:STRICTSEARCH', function (args) { + console.log('STRICTSEARCH', args); + for (var json of args.json) { + this.$emit('GROUP', { + json, + params: { + groupId: json.id + } + }); + } + }); + /* params: { groupId: string @@ -22640,6 +22719,7 @@ speechSynthesis.getVoices(); treeData: [], id: '', inGroup: false, + ownerDisplayName: '', ref: {} }; @@ -22653,6 +22733,7 @@ speechSynthesis.getVoices(); D.loading = true; D.id = groupId; D.inGroup = false; + D.ownerDisplayName = ''; D.treeData = []; API.getCachedGroup({ groupId @@ -22685,6 +22766,13 @@ speechSynthesis.getVoices(); return args1; }); } + D.ownerDisplayName = args.ref.ownerId; + API.getCachedUser({ + userId: args.ref.ownerId + }).then((args1) => { + D.ownerDisplayName = args1.ref.displayName; + return args1; + }); } }); }; @@ -22698,6 +22786,12 @@ speechSynthesis.getVoices(); case 'Refresh': this.showGroupDialog(D.id); break; + case 'Set Represented Group': + API.setGroupRepresentation(D.id, {isRepresenting: true}); + break; + case 'Clear Represented Group': + API.setGroupRepresentation(D.id, {isRepresenting: false}); + break; } }; diff --git a/html/src/index.pug b/html/src/index.pug index c6b42a2c..3712a2ae 100644 --- a/html/src/index.pug +++ b/html/src/index.pug @@ -1599,10 +1599,11 @@ html img.x-link(slot="reference" v-lazy="userDialog.ref.userIcon" style="flex:none;width:120px;height:120px;border-radius:4px;object-fit:cover") img.x-link(v-lazy="userDialog.ref.userIcon" style="height:500px" @click="openExternalLink(userDialog.ref.userIcon)") div(style="flex:none") - el-tooltip(v-if="userDialog.isFavorite" placement="top" content="Remove from favorites" :disabled="hideTooltips") - el-button(@click="userDialogCommand('Delete Favorite')" type="warning" icon="el-icon-star-on" circle) - el-tooltip(v-else placement="top" content="Add to favorites" :disabled="hideTooltips") - el-button(type="default" @click="userDialogCommand('Add Favorite')" icon="el-icon-star-off" circle) + template(v-if="API.currentUser.id !== userDialog.ref.id") + el-tooltip(v-if="userDialog.isFavorite" placement="top" content="Remove from favorites" :disabled="hideTooltips") + el-button(@click="userDialogCommand('Delete Favorite')" type="warning" icon="el-icon-star-on" circle) + el-tooltip(v-else placement="top" content="Add to favorites" :disabled="hideTooltips") + el-button(type="default" @click="userDialogCommand('Add Favorite')" icon="el-icon-star-off" circle) el-dropdown(trigger="click" @command="userDialogCommand" size="small") el-button(:type="(userDialog.incomingRequest || userDialog.outgoingRequest) ? 'success' : (userDialog.isBlock || userDialog.isMute || userDialog.isHideAvatar) ? 'danger' : 'default'" icon="el-icon-more" circle style="margin-left:5px") el-dropdown-menu(#default="dropdown") @@ -1697,12 +1698,12 @@ html .x-friend-item(style="width:100%;cursor:default") .detail span.name Represented Group - .extra(v-if="userDialog.representedGroup.id") + .extra(v-if="userDialog.representedGroup.isRepresenting") div(style="display:inline-block;flex:none;margin-right:5px") el-popover(placement="right" width="500px" trigger="click") img.x-link(slot="reference" v-lazy="userDialog.representedGroup.iconUrl" style="flex:none;width:60px;height:60px;border-radius:4px;object-fit:cover") img.x-link(v-lazy="userDialog.representedGroup.iconUrl" style="height:500px" @click="openExternalLink(userDialog.representedGroup.iconUrl)") - span(style="vertical-align:top;cursor:pointer" @click="showGroupDialog(userDialog.representedGroup.id)") + span(style="vertical-align:top;cursor:pointer" @click="showGroupDialog(userDialog.representedGroup.groupId)") span(v-if="userDialog.representedGroup.ownerId === userDialog.id" style="margin-right:5px") 👑 span(v-text="userDialog.representedGroup.name" style="margin-right:5px") span ({{ userDialog.representedGroup.memberCount }}) @@ -2158,26 +2159,48 @@ html span {{ item.value }} ({{ item.key }}) span.flags(:class="languageClass(item.key)" style="display:inline-block;margin-right:5px") div(style="margin-top:5px") - span.x-link(v-text="groupDialog.ref.ownerId" @click="showUserDialog(groupDialog.ref.ownerId)" style="color:#909399;font-family:monospace") - //- display-name(:userid="groupDialog.ref.ownerId" style="color:#909399;font-family:monospace") + span.x-link(v-text="groupDialog.ownerDisplayName" @click="showUserDialog(groupDialog.ref.ownerId)" style="color:#909399;font-family:monospace") div(style="margin-top:5px") span(v-show="groupDialog.ref.name !== groupDialog.ref.description" v-text="groupDialog.ref.description" style="font-size:12px") div(style="flex:none;margin-left:10px") el-tooltip(v-if="groupDialog.inGroup" placement="top" content="Leave Group" :disabled="hideTooltips") - el-button(type="default" icon="el-icon-star-on" circle @click="leaveGroup(groupDialog.id)" style="margin-left:5px") + el-button(type="warning" icon="el-icon-star-on" circle @click="leaveGroup(groupDialog.id)" style="margin-left:5px") el-tooltip(v-else-if="groupDialog.ref.membershipStatus === 'requested'" placement="top" content="Cancel join request" :disabled="hideTooltips") el-button(type="default" icon="el-icon-close" circle @click="cancelGroupRequest(groupDialog.id)" style="margin-left:5px") - el-tooltip(v-else-if="groupDialog.ref.joinState === 'request'" placement="top" content="Request to join" :disabled="hideTooltips") - el-button(type="default" icon="el-icon-message" circle @click="joinGroup(groupDialog.id)" style="margin-left:5px") - el-tooltip(v-else placement="top" content="Join Group" :disabled="hideTooltips") - el-button(type="default" icon="el-icon-star-off" circle @click="joinGroup(groupDialog.id)" style="margin-left:5px") + template(v-else) + el-tooltip(v-if="groupDialog.ref.joinState === 'request'" placement="top" content="Request to join" :disabled="hideTooltips") + el-button(type="default" icon="el-icon-message" circle @click="joinGroup(groupDialog.id)" style="margin-left:5px") + el-tooltip(v-if="groupDialog.ref.joinState === 'invite'" placement="top" content="Invite required" :disabled="hideTooltips") + span + el-button(type="default" icon="el-icon-message" disabled circle style="margin-left:5px") + el-tooltip(v-if="groupDialog.ref.joinState === 'open'" placement="top" content="Join Group" :disabled="hideTooltips") + el-button(type="default" icon="el-icon-star-off" circle @click="joinGroup(groupDialog.id)" style="margin-left:5px") + el-dropdown(trigger="click" @command="groupDialogCommand" size="small" style="margin-left:5px") el-button(type="default" icon="el-icon-more" circle) el-dropdown-menu(#default="dropdown") el-dropdown-item(icon="el-icon-refresh" command="Refresh") Refresh + template(v-if="groupDialog.inGroup") + el-dropdown-item(v-if="groupDialog.ref.isRepresenting" icon="el-icon-close" command="Clear Represented Group") Clear Represented Group + el-dropdown-item(v-else icon="el-icon-check" command="Set Represented Group") Set Represented Group el-tabs el-tab-pane(label="Info") + el-popover(placement="right" width="500px" trigger="click") + img.x-link(slot="reference" v-lazy="groupDialog.ref.bannerUrl" style="flex:none;width:100%;aspect-ratio:6/1;object-fit:cover;border-radius:4px") + img.x-link(v-lazy="groupDialog.ref.bannerUrl" style="width:854px;height:480px" @click="openExternalLink(groupDialog.ref.bannerUrl)") .x-friend-list(style="max-height:none") + .x-friend-item(style="width:350px;cursor:default") + .detail + span.name Group URL + span.extra {{ groupDialog.ref.$url }} + el-tooltip(placement="top" content="Copy URL to clipboard" :disabled="hideTooltips") + el-button(type="default" @click="copyGroupUrl(groupDialog.ref.$url)" size="mini" icon="el-icon-s-order" circle style="margin-left:5px") + .x-friend-item(style="width:350px;cursor:default") + .detail + span.name Group ID + span.extra {{ groupDialog.id }} + el-tooltip(placement="top" content="Copy ID to clipboard" :disabled="hideTooltips") + el-button(type="default" @click="copyGroupId(groupDialog.id)" size="mini" icon="el-icon-s-order" style="margin-left:5px") .x-friend-item(style="width:100%;cursor:default") .detail span.name Links @@ -2191,16 +2214,6 @@ html .detail span.name Rules pre.extra(style="font-family:inherit;font-size:12px;white-space:pre-wrap;margin:0 0.5em 0 0") {{ groupDialog.ref.rules || '-' }} - .x-friend-item(style="width:350px;cursor:default") - .detail - span.name Group ID - span.extra {{ groupDialog.id }} - el-tooltip(placement="top" content="Copy to clipboard" :disabled="hideTooltips") - el-dropdown(trigger="click" @click.native.stop size="mini" style="margin-left:5px") - el-button(type="default" icon="el-icon-s-order" size="mini" circle) - el-dropdown-menu(#default="dropdown") - el-dropdown-item(@click.native="copyGroupId(groupDialog.id)") Copy ID - el-dropdown-item(@click.native="copyGroupUrl(groupDialog.ref.$url)") Copy URL template(v-if="groupDialog.ref.membershipStatus === 'member'") div(style="width:100%;display:flex") .x-friend-item(style="cursor:default")