163 lines
No EOL
4.1 KiB
Vue
163 lines
No EOL
4.1 KiB
Vue
<template>
|
|
<NuxtLayout name="client">
|
|
<div id="middle-left-column" class="main-grid-row">
|
|
<div id="server-name-container">
|
|
<span id="server-name">{{ server?.name }}</span>
|
|
<button id="server-settings-button" @click="toggleGuildSettings">
|
|
<Icon id="server-settings-icon" name="lucide:chevron-down" />
|
|
</button>
|
|
<GuildOptionsMenu v-if="showGuildSettings" />
|
|
</div>
|
|
<div id="channels-list">
|
|
<ChannelEntry v-for="channel of channels" :name="channel.name"
|
|
:uuid="channel.uuid" :current-uuid="(route.params.channelId as string)"
|
|
:href="`/servers/${route.params.serverId}/channels/${channel.uuid}`" />
|
|
</div>
|
|
</div>
|
|
<MessageArea :channel-url="channelUrlPath" />
|
|
<div id="members-container">
|
|
<div id="members-list">
|
|
<MemberEntry v-for="member of members" :member="member" tabindex="0"/>
|
|
</div>
|
|
</div>
|
|
</NuxtLayout>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import ChannelEntry from "~/components/Guild/ChannelEntry.vue";
|
|
import GuildOptionsMenu from "~/components/Guild/GuildOptionsMenu.vue";
|
|
import MemberEntry from "~/components/Member/MemberEntry.vue";
|
|
import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse } from "~/types/interfaces";
|
|
|
|
const route = useRoute();
|
|
|
|
const loading = useState("loading");
|
|
|
|
const channelUrlPath = `channels/${route.params.channelId}`;
|
|
|
|
const server = ref<GuildResponse | undefined>();
|
|
const channels = ref<ChannelResponse[] | undefined>();
|
|
const channel = ref<ChannelResponse | undefined>();
|
|
|
|
const members = ref<GuildMemberResponse[]>();
|
|
|
|
const showInvitePopup = ref(false);
|
|
const showGuildSettings = ref(false);
|
|
|
|
//const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[];
|
|
//console.log("channelid: servers:", servers);
|
|
|
|
const { fetchMembers } = useApi();
|
|
|
|
onMounted(async () => {
|
|
console.log("mounting");
|
|
const guildUrl = `guilds/${route.params.serverId}`;
|
|
server.value = await fetchWithApi(guildUrl);
|
|
await setArrayVariables();
|
|
});
|
|
|
|
onActivated(async () => {
|
|
console.log("activating");
|
|
const guildUrl = `guilds/${route.params.serverId}`;
|
|
server.value = await fetchWithApi(guildUrl);
|
|
await setArrayVariables();
|
|
});
|
|
|
|
async function setArrayVariables() {
|
|
members.value = await fetchMembers(route.params.serverId as string);
|
|
const guildUrl = `guilds/${route.params.serverId}`;
|
|
channels.value = await fetchWithApi(`${guildUrl}/channels`);
|
|
console.log("channels:", channels.value);
|
|
channel.value = await fetchWithApi(`/channels/${route.params.channelId}`);
|
|
console.log("channel:", channel.value);
|
|
}
|
|
|
|
function toggleGuildSettings(e: Event) {
|
|
e.preventDefault();
|
|
showGuildSettings.value = !showGuildSettings.value;
|
|
}
|
|
|
|
function toggleInvitePopup(e: Event) {
|
|
e.preventDefault();
|
|
showInvitePopup.value = !showInvitePopup.value;
|
|
}
|
|
|
|
function handleMemberClick(member: GuildMemberResponse) {
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
#middle-left-column {
|
|
padding-left: .5em;
|
|
padding-right: .5em;
|
|
border-right: 1px solid var(--padding-color);
|
|
background: var(--optional-channel-list-background);
|
|
background-color: var(--sidebar-background-color);
|
|
}
|
|
|
|
#members-container {
|
|
min-width: 15rem;
|
|
max-width: 15rem;
|
|
border-left: 1px solid var(--padding-color);
|
|
background: var(--optional-member-list-background);
|
|
}
|
|
|
|
#members-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-x: hidden;
|
|
overflow-y: scroll;
|
|
padding-left: 1.25em;
|
|
padding-right: 1.25em;
|
|
padding-top: 0.75em;
|
|
padding-bottom: 0.75em;
|
|
max-height: calc(100% - 0.75em * 2); /* 100% - top and bottom */
|
|
}
|
|
|
|
.member-item {
|
|
display: flex;
|
|
margin-top: .5em;
|
|
margin-bottom: .5em;
|
|
gap: .5em;
|
|
align-items: center;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#channels-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: .5em;
|
|
}
|
|
|
|
.member-avatar {
|
|
height: 2.3em;
|
|
width: 2.3em;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.member-display-name {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
#server-name-container {
|
|
padding-top: 3dvh;
|
|
padding-bottom: 3dvh;
|
|
display: flex;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
|
|
#server-name {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
#server-settings-button {
|
|
background-color: transparent;
|
|
font-size: 1em;
|
|
color: white;
|
|
border: none;
|
|
padding: 0%;
|
|
}
|
|
</style> |