diff --git a/html/src/app.js b/html/src/app.js index 9d9e6f0c..ba39ed10 100644 --- a/html/src/app.js +++ b/html/src/app.js @@ -812,7 +812,27 @@ CefSharp.BindObjectAsync( }); API.$on('USER:CURRENT', function (args) { - args.ref = this.applyCurrentUser(args.json); + var { json } = args; + args.ref = this.applyCurrentUser(json); + this.applyUser({ + id: json.id, + username: json.username, + displayName: json.displayName, + bio: json.bio, + bioLinks: json.bioLinks, + currentAvatarImageUrl: json.currentAvatarImageUrl, + currentAvatarThumbnailImageUrl: json.currentAvatarThumbnailImageUrl, + status: json.status, + statusDescription: json.statusDescription, + state: json.state, + tags: json.tags, + developerType: json.developerType, + last_login: json.last_login, + last_platform: json.last_platform, + allowAvatarCopying: json.allowAvatarCopying, + isFriend: false, + location: ($app.isGameRunning === true) ? $app.lastLocation : '' + }); }); API.$on('USER:CURRENT:SAVE', function (args) { @@ -1094,6 +1114,14 @@ CefSharp.BindObjectAsync( API.applyUser = function (json) { var ref = this.cachedUsers.get(json.id); + // adjust some missing variables + if (json.id === API.currentUser.id) { + json.status = API.currentUser.status; + json.statusDescription = API.currentUser.statusDescription; + json.state = API.currentUser.state; + json.last_login = API.currentUser.last_login; + json.location = ($app.isGameRunning === true) ? $app.lastLocation : ''; + } if (ref === undefined) { ref = { id: '', @@ -3615,6 +3643,7 @@ CefSharp.BindObjectAsync( $app.data.friends = new Map(); $app.data.pendingActiveFriends = new Set(); $app.data.friendsNo = 0; + $app.data.isFriendsGroupMe = true; $app.data.isFriendsGroup0 = true; $app.data.isFriendsGroup1 = true; $app.data.isFriendsGroup2 = true; @@ -4443,6 +4472,16 @@ CefSharp.BindObjectAsync( }; $app.methods.updateDiscord = function () { + var ref = API.cachedUsers.get(API.currentUser.id); + if (ref !== undefined) { + var myLocation = (this.isGameRunning === true) ? this.lastLocation : ''; + if (ref.location !== myLocation) { + API.applyUser({ + id: ref.id, + location: myLocation + }); + } + } if (this.isGameRunning === false || this.lastLocation === '') { Discord.SetActive(false); @@ -5367,19 +5406,6 @@ CefSharp.BindObjectAsync( // App: More - $app.data.userLanguageVisible = 0; - $app.data.userLanguageSelected = ''; - $app.data.userLanguages = (function () { - var data = []; - for (var key in subsetOfLanguages) { - var value = subsetOfLanguages[key]; - data.push({ - key, - value - }); - } - return data; - }()); $app.data.currentUserTreeData = []; $app.data.pastDisplayNameTable = { data: [], @@ -5446,24 +5472,6 @@ CefSharp.BindObjectAsync( $app.visits = args.json; }); - $app.methods.addUserLanguage = function (language) { - if (language !== String(language)) { - return; - } - API.addUserTags({ - tags: [`language_${language}`] - }); - }; - - $app.methods.removeUserLanguage = function (language) { - if (language !== String(language)) { - return; - } - API.removeUserTags({ - tags: [`language_${language}`] - }); - }; - $app.methods.logout = function () { this.$confirm('Continue? Logout', 'Confirm', { confirmButtonText: 'Confirm', @@ -6118,6 +6126,14 @@ CefSharp.BindObjectAsync( } if (command === 'Add Favorite') { this.showFavoriteDialog('friend', D.id); + } else if (command === 'Edit Social Status') { + this.showSocialStatusDialog(); + } else if (command === 'Edit Language') { + this.showLanguageDialog(); + } else if (command === 'Edit Bio') { + this.showBioDialog(); + } else if (command === 'Logout') { + this.logout(); } else if (command === 'Message') { this.$prompt('Enter a message', 'Send Message', { distinguishCancelAndClose: true, @@ -6822,6 +6838,62 @@ CefSharp.BindObjectAsync( D.visible = true; }; + // App: Language Dialog + + $app.data.languageDialog = { + visible: false, + loading: false, + languageChoice: false, + languageValue: '', + languages: (function () { + var data = []; + for (var key in subsetOfLanguages) { + var value = subsetOfLanguages[key]; + data.push({ + key, + value + }); + } + return data; + }()) + }; + + API.$on('LOGOUT', function () { + $app.languageDialog.visible = false; + }); + + $app.methods.addUserLanguage = function (language) { + if (language !== String(language)) { + return; + } + var D = this.languageDialog; + D.loading = true; + API.addUserTags({ + tags: [`language_${language}`] + }).finally(function () { + D.loading = false; + }); + }; + + $app.methods.removeUserLanguage = function (language) { + if (language !== String(language)) { + return; + } + var D = this.languageDialog; + D.loading = true; + API.removeUserTags({ + tags: [`language_${language}`] + }).finally(function () { + D.loading = false; + }); + }; + + $app.methods.showLanguageDialog = function () { + this.$nextTick(() => adjustDialogZ(this.$refs.languageDialog.$el)); + var D = this.languageDialog; + D.visible = true; + }; + // App: Bio Dialog $app.data.bioDialog = { diff --git a/html/src/index.pug b/html/src/index.pug index 5c550a08..a10f4ebd 100644 --- a/html/src/index.pug +++ b/html/src/index.pug @@ -397,45 +397,6 @@ html .detail span.name(v-text="API.currentUser.displayName") span.extra(v-text="API.currentUser.username") - .x-friend-item(@click="showSocialStatusDialog()") - .detail - span.name #[i.el-icon-edit] Social Status - span.extra - el-tooltip(placement="top") - template(#content) - span(v-if="API.currentUser.status === 'active'") Online - span(v-else-if="API.currentUser.status === 'join me'") Join Me - span(v-else-if="API.currentUser.status === 'ask me'") Ask Me - span(v-else-if="API.currentUser.status === 'busy'") Do Not Disturb - span(v-else) Offline - i.x-user-status(:class="userStatusClass(API.currentUser)") - span(v-text="API.currentUser.statusDescription") - .x-friend-item(@click="showBioDialog()") - .detail - span.name #[i.el-icon-edit] Bio - pre.extra(style="font-family:inherit;font-size:12px;white-space:pre-wrap;margin:0 0.5em 0 0") {{ API.currentUser.bio || '-' }} - div(style="margin-top:5px") - el-tooltip(v-for="(link, index) in API.currentUser.bioLinks" :key="index") - template(#content) - span(v-text="link") - img(:src="getFaviconUrl(link)" style="width:16px;height:16px;vertical-align:middle;margin-right:5px" @click.stop="openExternalLink(link)") - .x-friend-item - .detail - span.name Languages - span.extra - div(style="margin:5px 0") - el-tag(v-for="item in API.currentUser.$languages" :key="item.key" size="small" type="info" effect="plain" closable @close="removeUserLanguage(item.key)" style="margin-right:5px") - span.famfamfam-flags(:class="languageClass(item.key)" style="display:inline-block;margin-right:5px") - | {{ item.value }} ({{ item.key }}) - div(v-if="userLanguageVisible") - el-select(v-model="userLanguageSelected" size="mini") - el-option(v-for="item in userLanguages" :key="item.key" :value="item.key" :label="item.value") - span.famfamfam-flags(:class="languageClass(item.key)" style="display:inline-block;margin-right:5px") - | {{ item.value }} ({{ item.key }}) - el-button(@click="userLanguageVisible=0; addUserLanguage(userLanguageSelected)" size="mini") Ok - el-button(@click="userLanguageVisible=0" size="mini" style="margin-left:0") Cancel - div(v-else) - el-button(@click="userLanguageSelected='';userLanguageVisible=1" size="mini") Add Language .x-friend-item .detail span.name Last Login @@ -444,12 +405,6 @@ html .detail span.name Two-Factor Auth (2FA) span.extra {{ API.currentUser.twoFactorAuthEnabled ? 'Enabled' : 'Disabled' }} - .x-friend-item(v-if="API.currentUser.homeLocation" @click="showWorldDialog(API.currentUser.homeLocation)") - .detail - span.name Home Location - span.extra - location(:location="API.currentUser.homeLocation" :link="false") - el-button(@click.stop="resetHome()" size="mini" icon="el-icon-delete" circle style="margin-left:5px") div(style="margin-top:10px") el-button-group el-button(size="small" icon="el-icon-switch-button" @click="logout()") Logout @@ -567,6 +522,17 @@ html img.avatar(v-lazy="item.ref.currentAvatarThumbnailImageUrl") span(v-else) Search More: #[span(v-text="item.label" style="font-weight:bold")] .x-friend-list(style="padding-bottom:10px") + .x-friend-group + i.el-icon-arrow-right(:class="{ rotate: isFriendsGroupMe }") + span.x-link(@click="isFriendsGroupMe = !isFriendsGroupMe" style="margin-left:5px") ME + div(v-show="isFriendsGroupMe") + .x-friend-item(:key="API.currentUser.id" @click="showUserDialog(API.currentUser.id)") + .avatar(:class="userStatusClass(API.currentUser)") + img(v-lazy="API.currentUser.currentAvatarThumbnailImageUrl") + .detail + span.name(v-text="API.currentUser.displayName" :class="API.currentUser.$trustClass") + location.extra(v-if="isGameRunning === true" :location="lastLocation" :link="false") + span.extra(v-else v-text="API.currentUser.statusDescription" :link="false") .x-friend-group(v-show="friendsGroup0.length") i.el-icon-arrow-right(:class="{ rotate: isFriendsGroup0 }") span.x-link(@click="isFriendsGroup0 = !isFriendsGroup0" style="margin-left:5px") VIP―{{ friendsGroup0.length }} @@ -666,22 +632,28 @@ html 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) el-dropdown-menu(#default="dropdown") - template(v-if="userDialog.isFriend") - el-dropdown-item(icon="el-icon-message" command="Message") 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 - el-dropdown-item(v-else-if="userDialog.outgoingRequest" icon="el-icon-close" command="Cancel Friend Request") Cancel Friend Request - el-dropdown-item(v-else icon="el-icon-plus" command="Send Friend Request") Send Friend Request - el-dropdown-item(icon="el-icon-s-custom" command="Show Avatar Author" divided) Show Avatar Author - el-dropdown-item(v-if="userDialog.isBlock" icon="el-icon-circle-check" command="Unblock" divided style="color:#F56C6C") Unblock - el-dropdown-item(v-else icon="el-icon-circle-close" command="Block" divided) Block - el-dropdown-item(v-if="userDialog.isMute" icon="el-icon-microphone" command="Unmute" style="color:#F56C6C") Unmute - el-dropdown-item(v-else icon="el-icon-turn-off-microphone" command="Mute") Mute - el-dropdown-item(v-if="userDialog.isHideAvatar" icon="el-icon-user-solid" command="Show Avatar" style="color:#F56C6C") Show Avatar - el-dropdown-item(v-else icon="el-icon-user" command="Hide Avatar") Hide Avatar - template(v-if="userDialog.isFriend") - el-dropdown-item(icon="el-icon-delete" command="Unfriend" divided) Unfriend + template(v-if="userDialog.ref.id === API.currentUser.id") + el-dropdown-item(icon="el-icon-edit" command="Edit Social Status") Edit Social Status + el-dropdown-item(icon="el-icon-edit" command="Edit Language") Edit Language + el-dropdown-item(icon="el-icon-edit" command="Edit Bio") Edit Bio + el-dropdown-item(icon="el-icon-switch-button" command="Logout" divided) Logout + template(v-else) + template(v-if="userDialog.isFriend") + el-dropdown-item(icon="el-icon-message" command="Message") 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 + el-dropdown-item(v-else-if="userDialog.outgoingRequest" icon="el-icon-close" command="Cancel Friend Request") Cancel Friend Request + el-dropdown-item(v-else icon="el-icon-plus" command="Send Friend Request") Send Friend Request + el-dropdown-item(icon="el-icon-s-custom" command="Show Avatar Author" divided) Show Avatar Author + el-dropdown-item(v-if="userDialog.isBlock" icon="el-icon-circle-check" command="Unblock" divided style="color:#F56C6C") Unblock + el-dropdown-item(v-else icon="el-icon-circle-close" command="Block" divided) Block + el-dropdown-item(v-if="userDialog.isMute" icon="el-icon-microphone" command="Unmute" style="color:#F56C6C") Unmute + el-dropdown-item(v-else icon="el-icon-turn-off-microphone" command="Mute") Mute + el-dropdown-item(v-if="userDialog.isHideAvatar" icon="el-icon-user-solid" command="Show Avatar" style="color:#F56C6C") Show Avatar + el-dropdown-item(v-else icon="el-icon-user" command="Hide Avatar") Hide Avatar + template(v-if="userDialog.isFriend") + el-dropdown-item(icon="el-icon-delete" command="Unfriend" divided) Unfriend el-tabs el-tab-pane(label="Info") div(v-if="userDialog.ref.location" style="display:flex;flex-direction:column;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #eee") @@ -733,6 +705,12 @@ html .detail span.name Last Platform span.extra(v-text="userDialog.ref.last_platform") + .x-friend-item(v-if="userDialog.ref.id === API.currentUser.id && API.currentUser.homeLocation" @click="showWorldDialog(API.currentUser.homeLocation)" style="width:100%") + .detail + span.name Home Location + span.extra + location(:location="API.currentUser.homeLocation" :link="false") + el-button(@click.stop="resetHome()" size="mini" icon="el-icon-delete" circle style="margin-left:5px") 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 }} @@ -974,25 +952,39 @@ html //- dialog: social status el-dialog.x-dialog(ref="socialStatusDialog" :visible.sync="socialStatusDialog.visible" title="Social Status" width="400px") - el-row(v-loading="socialStatusDialog.loading") - el-col(:span="9") - el-select(v-model="socialStatusDialog.status") - el-option(label="Online" value="active"). - #[i.x-user-status.active] Online - el-option(label="Join Me" value="join me"). - #[i.x-user-status.joinme] Join Me - el-option(label="Ask Me" value="ask me"). - #[i.x-user-status.askme] Ask Me - el-option(label="Do Not Disturb" value="busy"). - #[i.x-user-status.busy] Do Not Disturb - el-option(label="Offline" value="offline"). - #[i.x-user-status.offline] Offline - el-col(:span="1")   - el-col(:span="14") - el-input(v-model="socialStatusDialog.statusDescription" placeholder="Status") + div(v-loading="socialStatusDialog.loading") + el-select(v-model="socialStatusDialog.status" style="dispaly:block") + el-option(label="Online" value="active"). + #[i.x-user-status.active] Online + el-option(label="Join Me" value="join me"). + #[i.x-user-status.joinme] Join Me + el-option(label="Ask Me" value="ask me"). + #[i.x-user-status.askme] Ask Me + el-option(label="Do Not Disturb" value="busy"). + #[i.x-user-status.busy] Do Not Disturb + el-option(label="Offline" value="offline"). + #[i.x-user-status.offline] Offline + el-input(v-model="socialStatusDialog.statusDescription" placeholder="Status" style="dispaly:block;margin-top:10px") template(#footer) el-button(type="primary" size="small" :disabled="socialStatusDialog.loading" @click="saveSocialStatus") Update + //- dialog: language + el-dialog.x-dialog(ref="languageDialog" :visible.sync="languageDialog.visible" title="Language" width="400px") + div(v-loading="languageDialog.loading") + div(style="margin:5px 0") + el-tag(v-for="item in API.currentUser.$languages" :key="item.key" size="small" type="info" effect="plain" closable @close="removeUserLanguage(item.key)" style="margin-right:5px") + span.famfamfam-flags(:class="languageClass(item.key)" style="display:inline-block;margin-right:5px") + | {{ item.value }} ({{ item.key }}) + div(v-if="languageDialog.languageChoice === true") + el-select(v-model="languageDialog.languageValue" size="mini") + el-option(v-for="item in languageDialog.languages" :key="item.key" :value="item.key" :label="item.value") + span.famfamfam-flags(:class="languageClass(item.key)" style="display:inline-block;margin-right:5px") + | {{ item.value }} ({{ item.key }}) + el-button(@click="languageDialog.languageChoice=false; addUserLanguage(languageDialog.languageValue)" size="mini") Ok + el-button(@click="languageDialog.languageChoice=false" size="mini" style="margin-left:0") Cancel + div(v-else) + el-button(@click="languageDialog.languageValue='';languageDialog.languageChoice=true" size="mini") Add Language + //- dialog: bio el-dialog.x-dialog(ref="bioDialog" :visible.sync="bioDialog.visible" title="Bio" width="400px") el-input(type="textarea" v-model="bioDialog.bio" size="mini" maxlength="512" show-word-limit :autosize="{ minRows:2, maxRows:5 }" placeholder="Please input a bio")