From 2ae6fac3a00bf54c4e1eb925f250817a3358b7fa Mon Sep 17 00:00:00 2001 From: Natsumi Date: Mon, 8 Feb 2021 07:57:42 +1300 Subject: [PATCH] Invite and Invite Request --- html/src/app.js | 216 +++++++++++++++++++++++++++++++++++++++------ html/src/index.pug | 154 +++++++++++++++++++++----------- 2 files changed, 292 insertions(+), 78 deletions(-) diff --git a/html/src/app.js b/html/src/app.js index 65a4c4da..ebf09a76 100644 --- a/html/src/app.js +++ b/html/src/app.js @@ -6927,13 +6927,26 @@ speechSynthesis.getVoices(); this.logout(); } else if (command === 'Request Invite') { API.sendRequestInvite({ - details: { - platform: 'standalonewindows' - } + platform: 'standalonewindows' }, D.id).then((args) => { this.$message('Request invite sent'); return args; }); + } else if (command === 'Invite Message') { + var L = API.parseLocation(this.lastLocation); + API.getCachedWorld({ + worldId: L.worldId + }).then((args) => { + this.showSendInviteDialog({ + instanceId: this.lastLocation, + worldId: this.lastLocation, + worldName: args.ref.name + }, D.id); + }); + } else if (command === 'Request Invite Message') { + this.showSendInviteRequestDialog({ + platform: 'standalonewindows' + }, D.id); } else if (command === 'Invite') { var L = API.parseLocation(this.lastLocation); API.getCachedWorld({ @@ -8234,7 +8247,7 @@ speechSynthesis.getVoices(); $app.data.editInviteMessageDialog = { visible: false, - inviteMessage: '', + inviteMessage: {}, messageType: '', newMessage: '' }; @@ -8260,10 +8273,7 @@ speechSynthesis.getVoices(); API.editInviteMessage(params, messageType, slot).catch((err) => { throw err; }).then((args) => { - this.$message({ - message: 'Invite message updated', - type: 'success' - }); + this.$message('Invite message updated'); return args; }).finally(() => { API.refreshInviteMessageTableData(messageType); @@ -8279,7 +8289,7 @@ speechSynthesis.getVoices(); $app.data.editAndSendInviteResponseDialog = { visible: false, - inviteMessage: '', + inviteMessage: {}, messageType: '', newMessage: '' }; @@ -8306,10 +8316,6 @@ speechSynthesis.getVoices(); await API.editInviteMessage(params, messageType, slot).catch((err) => { throw err; }).then((args) => { - this.$message({ - message: 'Invite message updated', - type: 'success' - }); return args; }); await API.refreshInviteMessageTableData(messageType).catch((err) => { @@ -8320,7 +8326,9 @@ speechSynthesis.getVoices(); message: 'VRChat API didn\'t update message, try again', type: 'error' }); - throw 'VRChat API didn\'t update message, try again'; + throw new Error('VRChat API didn\'t update message, try again'); + } else { + this.$message('Invite message updated'); } }); } @@ -8331,17 +8339,12 @@ speechSynthesis.getVoices(); rsvp: true }; API.sendInviteResponse(params, I.invite.id).catch((err) => { - D.visible = false; throw err; }).then((args) => { API.hideNotification({ notificationId: I.invite.id }); - this.$message({ - message: 'Invite response message sent', - type: 'success' - }); - D.visible = false; + this.$message('Invite response message sent'); this.sendInviteResponseDialogVisible = false; this.sendInviteRequestResponseDialogVisible = false; return args; @@ -8354,8 +8357,8 @@ speechSynthesis.getVoices(); $app.data.sendInviteResponseDialog = { message: '', - invite: '', - messageSlot: '' + messageSlot: 0, + invite: {} }; $app.data.sendInviteResponseDialogVisible = false; @@ -8407,10 +8410,7 @@ speechSynthesis.getVoices(); API.hideNotification({ notificationId: D.invite.id }); - this.$message({ - message: 'Invite response message sent', - type: 'success' - }); + this.$message('Invite response message sent'); return args; }); this.sendInviteResponseDialogVisible = false; @@ -8455,6 +8455,170 @@ speechSynthesis.getVoices(); this.sendInviteRequestResponseDialogVisible = true; }; + // App: Invite Message Dialog + + $app.data.editAndSendInviteDialog = { + visible: false, + messageType: '', + newMessage: '', + inviteMessage: {} + }; + + $app.methods.showEditAndSendInviteDialog = function (messageType, inviteMessage) { + this.$nextTick(() => adjustDialogZ(this.$refs.editAndSendInviteDialog.$el)); + this.editAndSendInviteDialog = { + newMessage: inviteMessage.message, + visible: true, + messageType, + inviteMessage + }; + }; + + $app.methods.saveEditAndSendInvite = async function () { + var D = this.editAndSendInviteDialog; + D.visible = false; + var messageType = D.messageType; + var slot = D.inviteMessage.slot; + if (D.inviteMessage.message !== D.newMessage) { + var params = { + message: D.newMessage + }; + await API.editInviteMessage(params, messageType, slot).catch((err) => { + throw err; + }).then((args) => { + return args; + }); + await API.refreshInviteMessageTableData(messageType).catch((err) => { + throw err; + }).then((args) => { + if (args.json[slot].message !== D.newMessage) { + this.$message({ + message: 'VRChat API didn\'t update message, try again', + type: 'error' + }); + throw new Error('VRChat API didn\'t update message, try again'); + } else { + this.$message('Invite message updated'); + } + }); + } + var I = this.sendInviteDialog; + if (I.messageType === 'invite') { + I.params.messageSlot = slot; + API.sendInvite(I.params, I.userId).catch((err) => { + throw err; + }).then((args) => { + this.$message('Invite message sent'); + return args; + }); + } else if (I.messageType === 'requestInvite') { + I.params.requestSlot = slot; + API.sendRequestInvite(I.params, I.userId).catch((err) => { + throw err; + }).then((args) => { + this.$message('Request invite message sent'); + return args; + }); + } + }; + + $app.methods.cancelEditAndSendInvite = function () { + this.editAndSendInviteDialog.visible = false; + }; + + $app.data.sendInviteDialog = { + message: '', + messageSlot: 0, + userId: '', + messageType: '', + params: {} + }; + + $app.data.sendInviteDialogVisible = false; + + $app.data.sendInviteConfirmDialog = { + visible: false + }; + + API.$on('LOGIN', function () { + $app.sendInviteDialogVisible = false; + $app.sendInviteConfirmDialog.visible = false; + }); + + $app.methods.showSendInviteDialog = function (params, userId) { + this.sendInviteDialog = { + params, + userId, + messageType: 'invite' + }; + API.refreshInviteMessageTableData('message'); + this.$nextTick(() => adjustDialogZ(this.$refs.sendInviteDialog.$el)); + this.sendInviteDialogVisible = true; + }; + + $app.methods.showSendInviteConfirmDialog = function (val) { + if (this.editAndSendInviteDialog.visible === true || val === null) { + return; + } + this.$nextTick(() => adjustDialogZ(this.$refs.sendInviteConfirmDialog.$el)); + this.sendInviteConfirmDialog.visible = true; + this.sendInviteDialog.messageSlot = val.slot; + }; + + $app.methods.cancelSendInvite = function () { + this.sendInviteDialogVisible = false; + }; + + $app.methods.cancelInviteConfirm = function () { + this.sendInviteConfirmDialog.visible = false; + }; + + $app.methods.sendInviteConfirm = function () { + var D = this.sendInviteDialog; + if (D.messageType === 'invite') { + D.params.messageSlot = D.messageSlot; + API.sendInvite(D.params, D.userId).catch((err) => { + throw err; + }).then((args) => { + this.$message('Invite message sent'); + return args; + }); + } else if (D.messageType === 'requestInvite') { + D.params.requestSlot = D.messageSlot; + API.sendRequestInvite(D.params, D.userId).then((args) => { + this.$message('Request invite message sent'); + return args; + }); + } + this.sendInviteDialogVisible = false; + this.sendInviteRequestDialogVisible = false; + this.sendInviteConfirmDialog.visible = false; + }; + + // App: Invite Request Message Dialog + + $app.data.sendInviteRequestDialogVisible = false; + + $app.methods.cancelSendInviteRequest = function () { + this.sendInviteRequestDialogVisible = false; + }; + + API.$on('LOGIN', function () { + $app.sendInviteRequestDialogVisible = false; + $app.showSendInviteConfirmDialog.visible = false; + }); + + $app.methods.showSendInviteRequestDialog = function (params, userId) { + this.sendInviteDialog = { + params, + userId, + messageType: 'requestInvite' + }; + API.refreshInviteMessageTableData('request'); + this.$nextTick(() => adjustDialogZ(this.$refs.sendInviteRequestDialog.$el)); + this.sendInviteRequestDialogVisible = true; + }; + $app = new Vue($app); window.$app = $app; }()); diff --git a/html/src/index.pug b/html/src/index.pug index a67f7c4b..380c38bb 100644 --- a/html/src/index.pug +++ b/html/src/index.pug @@ -401,14 +401,16 @@ html el-table-column(label="Message" prop="message") template(v-once #default="scope") span(v-if="scope.row.message" v-text="scope.row.message") - span(v-else-if='scope.row.details.responseMessage' v-text="scope.row.details.responseMessage") span(v-else-if='scope.row.details.inviteMessage' v-text="scope.row.details.inviteMessage") + span(v-else-if='scope.row.details.requestMessage' v-text="scope.row.details.requestMessage") + span(v-else-if='scope.row.details.responseMessage' v-text="scope.row.details.responseMessage") el-table-column(label="Action" width="80" align="right") template(v-once #default="scope") - el-button(v-if="scope.row.type === 'friendRequest'" type="text" icon="el-icon-check" size="mini" @click="acceptNotification(scope.row)") - el-button(v-else-if="scope.row.type === 'invite'" type="text" icon="el-icon-chat-line-square" size="mini" @click="showSendInviteResponseDialog(scope.row)") - el-button(v-else-if="scope.row.type === 'requestInvite'" type="text" icon="el-icon-chat-line-square" size="mini" @click="showSendInviteRequestResponseDialog(scope.row)") - el-button(type="text" icon="el-icon-close" size="mini" @click="hideNotification(scope.row)") + template(v-if="scope.row.senderUserId !== API.currentUser.id") + el-button(v-if="scope.row.type === 'friendRequest'" type="text" icon="el-icon-check" size="mini" @click="acceptNotification(scope.row)") + el-button(v-else-if="scope.row.type === 'invite'" type="text" icon="el-icon-chat-line-square" size="mini" @click="showSendInviteResponseDialog(scope.row)") + el-button(v-else-if="scope.row.type === 'requestInvite'" type="text" icon="el-icon-chat-line-square" size="mini" @click="showSendInviteRequestResponseDialog(scope.row)") + el-button(type="text" icon="el-icon-close" size="mini" @click="hideNotification(scope.row)") //- profile .x-container(v-show="$refs.menu && $refs.menu.activeIndex === 'profile'") @@ -891,9 +893,10 @@ html template(v-else) template(v-if="lastLocation && isGameRunning") el-dropdown-item(icon="el-icon-message" command="Invite") Invite + el-dropdown-item(icon="el-icon-message" command="Invite Message") Invite With Message template(v-if="userDialog.isFriend") el-dropdown-item(icon="el-icon-postcard" command="Request Invite") Request Invite - //- el-dropdown-item(icon="el-icon-message" command="Message") Message + el-dropdown-item(icon="el-icon-postcard" command="Request Invite Message") Request Invite With Message template(v-else-if="userDialog.incomingRequest") el-dropdown-item(icon="el-icon-check" command="Accept Friend Request") Accept Friend Request el-dropdown-item(icon="el-icon-close" command="Decline Friend Request") Decline Friend Request @@ -1478,53 +1481,100 @@ html template(#footer) el-button(type="small" @click="cancelEditInviteMessage") Cancel el-button(type="primary" size="small" @click="saveEditInviteMessage") Save - - //- dialog: Edit And Send Invite Response Message - el-dialog.x-dialog(ref="editAndSendInviteResponseDialog" :visible.sync="editAndSendInviteResponseDialog.visible" title="Edit and Send Invite Message" width="400px") - div(style='font-size:12px') - span 1 hour edit cool down time. - el-input(type="textarea" v-model="editAndSendInviteResponseDialog.newMessage" size="mini" maxlength="64" show-word-limit :autosize="{ minRows:2, maxRows:5 }" placeholder="" style="margin-top:10px") - template(#footer) - el-button(type="small" @click="cancelEditAndSendInviteResponse") Cancel - el-button(type="primary" size="small" @click="saveEditAndSendInviteResponse") Send - - //- dialog Table: Send Invite Response Message - el-dialog.x-dialog(ref="sendInviteResponseDialog" :visible.sync="sendInviteResponseDialogVisible" title="Send Invite Response Message" width="800px") - data-tables(v-bind="inviteResponseMessageTable" @current-change="showSendInviteResponseConfirmDialog" style="margin-top:10px;cursor:pointer") - el-table-column(label="Slot" prop="slot" sortable="custom" width="70") - el-table-column(label="Message" prop="message") - el-table-column(label="Cool Down" prop="updatedAt" sortable="custom" width="110" align="right") - template(v-once #default="scope") - countdown-timer(:datetime="scope.row.updatedAt" :hours="1") - el-table-column(label="Action" width="60" align="right") - template(v-once #default="scope") - el-button(type="text" icon="el-icon-edit" size="mini" @click="showEditAndSendInviteResponseDialog('response', scope.row)") - template(#footer) - el-button(type="small" @click="API.refreshInviteMessageTableData('response')") Refresh - el-button(type="small" @click="cancelSendInviteResponse") Cancel - - //- dialog Table: Send Invite Response Message - el-dialog.x-dialog(ref="sendInviteRequestResponseDialog" :visible.sync="sendInviteRequestResponseDialogVisible" title="Send Invite Request Response Message" width="800px") - data-tables(v-bind="inviteRequestResponseMessageTable" @current-change="showSendInviteResponseConfirmDialog" style="margin-top:10px;cursor:pointer") - el-table-column(label="Slot" prop="slot" sortable="custom" width="70") - el-table-column(label="Message" prop="message") - el-table-column(label="Cool Down" prop="updatedAt" sortable="custom" width="110" align="right") - template(v-once #default="scope") - countdown-timer(:datetime="scope.row.updatedAt" :hours="1") - el-table-column(label="Action" width="60" align="right") - template(v-once #default="scope") - el-button(type="text" icon="el-icon-edit" size="mini" @click="showEditAndSendInviteResponseDialog('requestResponse', scope.row)") - template(#footer) - el-button(type="small" @click="API.refreshInviteMessageTableData('requestResponse')") Refresh - el-button(type="small" @click="cancelSendInviteRequestResponse") Cancel + + //- dialog: Edit And Send Invite Response Message + el-dialog.x-dialog(ref="editAndSendInviteResponseDialog" :visible.sync="editAndSendInviteResponseDialog.visible" title="Edit and Send Invite Message" width="400px") + div(style='font-size:12px') + span 1 hour edit cool down time. + el-input(type="textarea" v-model="editAndSendInviteResponseDialog.newMessage" size="mini" maxlength="64" show-word-limit :autosize="{ minRows:2, maxRows:5 }" placeholder="" style="margin-top:10px") + template(#footer) + el-button(type="small" @click="cancelEditAndSendInviteResponse") Cancel + el-button(type="primary" size="small" @click="saveEditAndSendInviteResponse") Send + + //- dialog Table: Send Invite Response Message + el-dialog.x-dialog(ref="sendInviteResponseDialog" :visible.sync="sendInviteResponseDialogVisible" title="Send Invite Response Message" width="800px") + data-tables(v-bind="inviteResponseMessageTable" @row-click="showSendInviteResponseConfirmDialog" style="margin-top:10px;cursor:pointer") + el-table-column(label="Slot" prop="slot" sortable="custom" width="70") + el-table-column(label="Message" prop="message") + el-table-column(label="Cool Down" prop="updatedAt" sortable="custom" width="110" align="right") + template(v-once #default="scope") + countdown-timer(:datetime="scope.row.updatedAt" :hours="1") + el-table-column(label="Action" width="60" align="right") + template(v-once #default="scope") + el-button(type="text" icon="el-icon-edit" size="mini" @click="showEditAndSendInviteResponseDialog('response', scope.row)") + template(#footer) + el-button(type="small" @click="cancelSendInviteResponse") Cancel + el-button(type="small" @click="API.refreshInviteMessageTableData('response')") Refresh + + //- dialog Table: Send Invite Request Response Message + el-dialog.x-dialog(ref="sendInviteRequestResponseDialog" :visible.sync="sendInviteRequestResponseDialogVisible" title="Send Invite Request Response Message" width="800px") + data-tables(v-bind="inviteRequestResponseMessageTable" @row-click="showSendInviteResponseConfirmDialog" style="margin-top:10px;cursor:pointer") + el-table-column(label="Slot" prop="slot" sortable="custom" width="70") + el-table-column(label="Message" prop="message") + el-table-column(label="Cool Down" prop="updatedAt" sortable="custom" width="110" align="right") + template(v-once #default="scope") + countdown-timer(:datetime="scope.row.updatedAt" :hours="1") + el-table-column(label="Action" width="60" align="right") + template(v-once #default="scope") + el-button(type="text" icon="el-icon-edit" size="mini" @click="showEditAndSendInviteResponseDialog('requestResponse', scope.row)") + template(#footer) + el-button(type="small" @click="cancelSendInviteRequestResponse") Cancel + el-button(type="small" @click="API.refreshInviteMessageTableData('requestResponse')") Refresh - //- dialog: Send Invite Message Confirm - el-dialog.x-dialog(ref="sendInviteResponseConfirmDialog" :visible.sync="sendInviteResponseConfirmDialog.visible" title="Send Invite Message" width="400px") - div(style='font-size:12px') - span Are you sure you want to send? - template(#footer) - el-button(type="small" @click="cancelInviteResponseConfirm") Cancel - el-button(type="primary" size="small" @click="sendInviteResponseConfirm") Confirm + //- dialog: Send Invite Response Message Confirm + el-dialog.x-dialog(ref="sendInviteResponseConfirmDialog" :visible.sync="sendInviteResponseConfirmDialog.visible" title="Send Invite Response Message" width="400px") + div(style='font-size:12px') + span Are you sure you want to send? + template(#footer) + el-button(type="small" @click="cancelInviteResponseConfirm") Cancel + el-button(type="primary" size="small" @click="sendInviteResponseConfirm") Confirm + + //- dialog Table: Send Invite Message + el-dialog.x-dialog(ref="sendInviteDialog" :visible.sync="sendInviteDialogVisible" title="Send Invite Message" width="800px") + data-tables(v-bind="inviteMessageTable" @row-click="showSendInviteConfirmDialog" style="margin-top:10px;cursor:pointer") + el-table-column(label="Slot" prop="slot" sortable="custom" width="70") + el-table-column(label="Message" prop="message") + el-table-column(label="Cool Down" prop="updatedAt" sortable="custom" width="110" align="right") + template(v-once #default="scope") + countdown-timer(:datetime="scope.row.updatedAt" :hours="1") + el-table-column(label="Action" width="60" align="right") + template(v-once #default="scope") + el-button(type="text" icon="el-icon-edit" size="mini" @click="showEditAndSendInviteDialog('message', scope.row)") + template(#footer) + el-button(type="small" @click="cancelSendInvite") Cancel + el-button(type="small" @click="API.refreshInviteMessageTableData('message')") Refresh + + //- dialog Table: Send Invite Request Message + el-dialog.x-dialog(ref="sendInviteRequestDialog" :visible.sync="sendInviteRequestDialogVisible" title="Send Invite Request Message" width="800px") + data-tables(v-bind="inviteRequestMessageTable" @row-click="showSendInviteConfirmDialog" style="margin-top:10px;cursor:pointer") + el-table-column(label="Slot" prop="slot" sortable="custom" width="70") + el-table-column(label="Message" prop="message") + el-table-column(label="Cool Down" prop="updatedAt" sortable="custom" width="110" align="right") + template(v-once #default="scope") + countdown-timer(:datetime="scope.row.updatedAt" :hours="1") + el-table-column(label="Action" width="60" align="right") + template(v-once #default="scope") + el-button(type="text" icon="el-icon-edit" size="mini" @click="showEditAndSendInviteDialog('request', scope.row)") + template(#footer) + el-button(type="small" @click="cancelSendInviteRequest") Cancel + el-button(type="small" @click="API.refreshInviteMessageTableData('request')") Refresh + + //- dialog: Send Invite Message Confirm + el-dialog.x-dialog(ref="sendInviteConfirmDialog" :visible.sync="sendInviteConfirmDialog.visible" title="Send Invite Message" width="400px") + div(style='font-size:12px') + span Are you sure you want to send? + template(#footer) + el-button(type="small" @click="cancelInviteConfirm") Cancel + el-button(type="primary" size="small" @click="sendInviteConfirm") Confirm + + //- dialog: Edit And Send Invite Message + el-dialog.x-dialog(ref="editAndSendInviteDialog" :visible.sync="editAndSendInviteDialog.visible" title="Edit and Send Invite Message" width="400px") + div(style='font-size:12px') + span 1 hour edit cool down time. + el-input(type="textarea" v-model="editAndSendInviteDialog.newMessage" size="mini" maxlength="64" show-word-limit :autosize="{ minRows:2, maxRows:5 }" placeholder="" style="margin-top:10px") + template(#footer) + el-button(type="small" @click="cancelEditAndSendInvite") Cancel + el-button(type="primary" size="small" @click="saveEditAndSendInvite") Send //- dialog: open source software notice el-dialog.x-dialog(:visible.sync="ossDialog" title="Open Source Software Notice" width="650px")