mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-22 16:23:50 +02:00
3324d0d279
* Update Vue devtools
* upgrade vue pinia element-plus vue-i18n, add vite
* fix: i18n
* global components
* change v-deep
* upgrade vue-lazyload
* data table
* update enlint and safe-dialog
* package.json and vite.config.js
* el-icon
* el-message
* vue 2 -> vue3 migration changes
* $pinia
* dialog
* el-popover slot
* lint
* chore
* slot
* scss
* remote state access
* misc
* jsconfig
* el-button size mini -> small
* :model-value
* ElMessageBox
* datatable
* remove v-lazyload
* template #dropdown
* mini -> small
* css
* byebye hideTooltips
* use sass-embedded
* Update SQLite, remove unneeded libraries
* Fix shift remove local avatar favorites
* Electron arm64
* arm64 support
* bye pug
* f-word vite hah
* misc
* remove safe dialog component
* Add self invite to launch dialog
* Fix errors
* Icons 1
* improve localfavorite loading performance
* improve favorites world item performance
* dialog visibility changes for Element Plus
* clear element plus error
* import performance
* revert App.vue hah
* hah
* Revert "Add self invite to launch dialog"
This reverts commit 4801cfad58.
* Toggle self invite/open in-game
* Self invite on launch dialog
* el-button icon
* el-icon
* fix user dialog tab switching logic
* fix PlayerList
* Formatting changes
* More icons
* Fix friend log table
* loading margin
* fix markdown
* fix world dialog tab switching issue
* Fixes and formatting
* fix: global i18n.t export
* fix favorites world tab not working
* Create instance, displayName
* Remove group members sort by userId
* Fix loading dialog tabs on swtich
* Star
* charts console.warn
* wip: fix charts
* wip: fix charts
* wip: charts composables
* fix favorite item tooltip warning
* Fixes and formatting
* Clean up image dialogs
* Remove unused method
* Fix platform/size border
* Fix platform/size border
* $vr
* fix friendExportDialogVisible binding
* ElMessageBox and Settings
* Login formatting
* Rename VR overlay query
* Fix image popover and userdialog badges
* Formatting
* Big buttons
* Fixes, update Cef
* Fix gameLog table nav buttons jumping around while using nav buttons
* Fix z-index
* vr overlay
* vite input add theme
* defineAsyncComponent
* ISO 639-1
* fix i18n
* clean t
* Formatting, fix calendar, rotate arrows
* Show user status when user is offline
* Fix VR overlay
* fix theme and clean up
* split InstanceActivity
* tweak
* Fix VR overlay formatting
* fix scss var
* AppDebug hahahaha
* Years
* remove reactive
* improve perf
* state hah…
* fix user rendering poblems when user object is not yet loaded
* improve perf
* Update avatar/world image uploader, licenses, remove previous images dialog (old images are now deleted)
* improve perf 1
* Suppress stray errors
* fix traveling location display issue
* Fix empty instance creator
* improve friend list refresh performance
* fix main charts
* fix chart
* Fix darkmode
* Fix avatar dialog tags
---------
Co-authored-by: pa <maplenagisa@gmail.com>
296 lines
12 KiB
Vue
296 lines
12 KiB
Vue
<template>
|
|
<el-dialog
|
|
class="x-dialog"
|
|
v-model="inviteDialog.visible"
|
|
:title="t('dialog.invite.header')"
|
|
width="500px"
|
|
append-to-body>
|
|
<div v-if="inviteDialog.visible" v-loading="inviteDialog.loading">
|
|
<Location :location="inviteDialog.worldId" :link="false" />
|
|
<br />
|
|
<el-button size="small" style="margin-top: 10px" @click="addSelfToInvite">{{
|
|
t('dialog.invite.add_self')
|
|
}}</el-button>
|
|
<el-button
|
|
size="small"
|
|
:disabled="inviteDialog.friendsInInstance.length === 0"
|
|
style="margin-top: 10px"
|
|
@click="addFriendsInInstanceToInvite"
|
|
>{{ t('dialog.invite.add_friends_in_instance') }}</el-button
|
|
>
|
|
<el-button
|
|
size="small"
|
|
:disabled="vipFriends.length === 0"
|
|
style="margin-top: 10px"
|
|
@click="addFavoriteFriendsToInvite"
|
|
>{{ t('dialog.invite.add_favorite_friends') }}</el-button
|
|
>
|
|
|
|
<el-select
|
|
v-model="inviteDialog.userIds"
|
|
multiple
|
|
clearable
|
|
:placeholder="t('dialog.invite.select_placeholder')"
|
|
filterable
|
|
:disabled="inviteDialog.loading"
|
|
style="width: 100%; margin-top: 15px">
|
|
<template v-if="currentUser">
|
|
<el-option-group :label="t('side_panel.me')">
|
|
<el-option
|
|
class="x-friend-item"
|
|
:label="currentUser.displayName"
|
|
:value="currentUser.id"
|
|
style="height: auto">
|
|
<div :class="['avatar', userStatusClass(currentUser)]">
|
|
<img :src="userImage(currentUser)" loading="lazy" />
|
|
</div>
|
|
<div class="detail">
|
|
<span class="name">{{ currentUser.displayName }}</span>
|
|
</div>
|
|
</el-option>
|
|
</el-option-group>
|
|
</template>
|
|
|
|
<template v-if="inviteDialog.friendsInInstance.length">
|
|
<el-option-group :label="t('dialog.invite.friends_in_instance')">
|
|
<el-option
|
|
v-for="friend in inviteDialog.friendsInInstance"
|
|
:key="friend.id"
|
|
class="x-friend-item"
|
|
:label="friend.name"
|
|
:value="friend.id"
|
|
style="height: auto">
|
|
<template v-if="friend.ref">
|
|
<div :class="['avatar', userStatusClass(friend.ref)]">
|
|
<img :src="userImage(friend.ref)" loading="lazy" />
|
|
</div>
|
|
<div class="detail">
|
|
<span class="name" :style="{ color: friend.ref.$userColour }">{{
|
|
friend.ref.displayName
|
|
}}</span>
|
|
</div>
|
|
</template>
|
|
<span v-else>{{ friend.id }}</span>
|
|
</el-option>
|
|
</el-option-group>
|
|
</template>
|
|
|
|
<template v-if="vipFriends.length">
|
|
<el-option-group :label="t('side_panel.favorite')">
|
|
<el-option
|
|
v-for="friend in vipFriends"
|
|
:key="friend.id"
|
|
class="x-friend-item"
|
|
:label="friend.name"
|
|
:value="friend.id"
|
|
style="height: auto">
|
|
<template v-if="friend.ref">
|
|
<div :class="['avatar', userStatusClass(friend.ref)]">
|
|
<img :src="userImage(friend.ref)" loading="lazy" />
|
|
</div>
|
|
<div class="detail">
|
|
<span class="name" :style="{ color: friend.ref.$userColour }">{{
|
|
friend.ref.displayName
|
|
}}</span>
|
|
</div>
|
|
</template>
|
|
<span v-else>{{ friend.id }}</span>
|
|
</el-option>
|
|
</el-option-group>
|
|
</template>
|
|
|
|
<template v-if="onlineFriends.length">
|
|
<el-option-group :label="t('side_panel.online')">
|
|
<el-option
|
|
v-for="friend in onlineFriends"
|
|
:key="friend.id"
|
|
class="x-friend-item"
|
|
:label="friend.name"
|
|
:value="friend.id"
|
|
style="height: auto">
|
|
<template v-if="friend.ref">
|
|
<div :class="['avatar', userStatusClass(friend.ref)]">
|
|
<img :src="userImage(friend.ref)" loading="lazy" />
|
|
</div>
|
|
<div class="detail">
|
|
<span class="name" :style="{ color: friend.ref.$userColour }">{{
|
|
friend.ref.displayName
|
|
}}</span>
|
|
</div>
|
|
</template>
|
|
<span v-else>{{ friend.id }}</span>
|
|
</el-option>
|
|
</el-option-group>
|
|
</template>
|
|
|
|
<template v-if="activeFriends.length">
|
|
<el-option-group :label="t('side_panel.active')">
|
|
<el-option
|
|
v-for="friend in activeFriends"
|
|
:key="friend.id"
|
|
class="x-friend-item"
|
|
:label="friend.name"
|
|
:value="friend.id"
|
|
style="height: auto">
|
|
<template v-if="friend.ref">
|
|
<div class="avatar"><img :src="userImage(friend.ref)" loading="lazy" /></div>
|
|
<div class="detail">
|
|
<span class="name" :style="{ color: friend.ref.$userColour }">{{
|
|
friend.ref.displayName
|
|
}}</span>
|
|
</div>
|
|
</template>
|
|
<span v-else>{{ friend.id }}</span>
|
|
</el-option>
|
|
</el-option-group>
|
|
</template>
|
|
</el-select>
|
|
</div>
|
|
|
|
<template #footer>
|
|
<el-button
|
|
size="small"
|
|
:disabled="inviteDialog.loading || !inviteDialog.userIds.length"
|
|
@click="showSendInviteDialog"
|
|
>{{ t('dialog.invite.invite_with_message') }}</el-button
|
|
>
|
|
<el-button
|
|
type="primary"
|
|
size="small"
|
|
:disabled="inviteDialog.loading || !inviteDialog.userIds.length"
|
|
@click="sendInvite"
|
|
>{{ t('dialog.invite.invite') }}</el-button
|
|
>
|
|
</template>
|
|
<SendInviteDialog
|
|
:send-invite-dialog-visible="sendInviteDialogVisible"
|
|
:send-invite-dialog="sendInviteDialog"
|
|
:invite-dialog="inviteDialog"
|
|
@closeInviteDialog="closeInviteDialog" />
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
|
|
|
import { storeToRefs } from 'pinia';
|
|
import { ref } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { instanceRequest, notificationRequest } from '../../../api';
|
|
import { parseLocation, userImage, userStatusClass } from '../../../shared/utils';
|
|
import { useFriendStore, useGalleryStore, useInviteStore, useUserStore } from '../../../stores';
|
|
import SendInviteDialog from './SendInviteDialog.vue';
|
|
|
|
const { vipFriends, onlineFriends, activeFriends } = storeToRefs(useFriendStore());
|
|
const { refreshInviteMessageTableData } = useInviteStore();
|
|
const { currentUser } = storeToRefs(useUserStore());
|
|
const { clearInviteImageUpload } = useGalleryStore();
|
|
|
|
const { t } = useI18n();
|
|
const props = defineProps({
|
|
inviteDialog: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits(['closeInviteDialog']);
|
|
|
|
const sendInviteDialogVisible = ref(false);
|
|
const sendInviteDialog = ref({
|
|
messageSlot: {},
|
|
userId: '',
|
|
params: {}
|
|
});
|
|
|
|
function closeInviteDialog() {
|
|
emit('closeInviteDialog');
|
|
}
|
|
|
|
function showSendInviteDialog(params, userId) {
|
|
sendInviteDialog.value = {
|
|
params,
|
|
userId,
|
|
messageSlot: {}
|
|
};
|
|
refreshInviteMessageTableData('message');
|
|
clearInviteImageUpload();
|
|
sendInviteDialogVisible.value = true;
|
|
}
|
|
|
|
function addSelfToInvite() {
|
|
const D = props.inviteDialog;
|
|
if (!D.userIds.includes(currentUser.value.id)) {
|
|
D.userIds.push(currentUser.value.id);
|
|
}
|
|
}
|
|
|
|
function addFriendsInInstanceToInvite() {
|
|
const D = props.inviteDialog;
|
|
for (const friend of D.friendsInInstance) {
|
|
if (!D.userIds.includes(friend.id)) {
|
|
D.userIds.push(friend.id);
|
|
}
|
|
}
|
|
}
|
|
|
|
function addFavoriteFriendsToInvite() {
|
|
const D = props.inviteDialog;
|
|
for (const friend of vipFriends.value) {
|
|
if (!D.userIds.includes(friend.id)) {
|
|
D.userIds.push(friend.id);
|
|
}
|
|
}
|
|
}
|
|
|
|
function sendInvite() {
|
|
ElMessageBox.confirm('Continue? Invite', 'Confirm', {
|
|
confirmButtonText: 'Confirm',
|
|
cancelButtonText: 'Cancel',
|
|
type: 'info'
|
|
})
|
|
.then((action) => {
|
|
const D = props.inviteDialog;
|
|
if (action !== 'confirm' || D.loading === true) {
|
|
return;
|
|
}
|
|
D.loading = true;
|
|
const inviteLoop = () => {
|
|
if (D.userIds.length > 0) {
|
|
const receiverUserId = D.userIds.shift();
|
|
if (receiverUserId === currentUser.value.id) {
|
|
// can't invite self!?
|
|
const L = parseLocation(D.worldId);
|
|
instanceRequest
|
|
.selfInvite({
|
|
instanceId: L.instanceId,
|
|
worldId: L.worldId
|
|
})
|
|
.finally(inviteLoop);
|
|
} else {
|
|
notificationRequest
|
|
.sendInvite(
|
|
{
|
|
instanceId: D.worldId,
|
|
worldId: D.worldId,
|
|
worldName: D.worldName
|
|
},
|
|
receiverUserId
|
|
)
|
|
.finally(inviteLoop);
|
|
}
|
|
} else {
|
|
D.loading = false;
|
|
D.visible = false;
|
|
ElMessage({
|
|
message: 'Invite sent',
|
|
type: 'success'
|
|
});
|
|
}
|
|
};
|
|
inviteLoop();
|
|
})
|
|
.catch(() => {});
|
|
}
|
|
</script>
|