149 lines
4.7 KiB
Svelte
149 lines
4.7 KiB
Svelte
{#if importModal}
|
|
<ImportModal guildId={guildId} on:close={() => importModal = false}/>
|
|
{/if}
|
|
<section class="sidebar">
|
|
<header>
|
|
<img src="{iconUrl}" class="guild-icon" alt="Guild icon" width="50" height="50" on:error={handleIconLoadError} />
|
|
{guild.name}
|
|
</header>
|
|
<nav>
|
|
<ul class="nav-list">
|
|
<ManageSidebarLink {currentRoute} title="← Back to servers" href="/" />
|
|
|
|
{#if isAdmin}
|
|
<ManageSidebarLink {currentRoute} title="Settings" icon="fa-cogs" href="/manage/{guildId}/settings" />
|
|
{/if}
|
|
|
|
<ManageSidebarLink {currentRoute} title="Transcripts" icon="fa-copy" href="/manage/{guildId}/transcripts" />
|
|
|
|
{#if isAdmin}
|
|
<ManageSidebarLink {currentRoute} routePrefix="/manage/{guildId}/panels" title="Ticket Panels" icon="fa-mouse-pointer" href="/manage/{guildId}/panels" />
|
|
|
|
<ManageSidebarLink {currentRoute} title="Forms" icon="fa-poll-h" href="/manage/{guildId}/forms" />
|
|
<ManageSidebarLink {currentRoute} title="Staff Teams" icon="fa-users" href="/manage/{guildId}/teams" />
|
|
<ManageSidebarLink {currentRoute} title="Integrations" icon="fa-robot" href="/manage/{guildId}/integrations" />
|
|
{/if}
|
|
|
|
<ManageSidebarLink {currentRoute} title="Tickets" icon="fa-ticket-alt" href="/manage/{guildId}/tickets" />
|
|
<ManageSidebarLink {currentRoute} title="Blacklist" icon="fa-ban" href="/manage/{guildId}/blacklist" />
|
|
<ManageSidebarLink {currentRoute} title="Tags" icon="fa-tags" href="/manage/{guildId}/tags" />
|
|
|
|
{#if isAdmin}
|
|
<hr />
|
|
<div class="row" style="align-items: center; justify-content: center;">
|
|
<ManageSidebarButton on:click={() => importModal = true} title="Import Data" icon="fa-file-import" />
|
|
</div>
|
|
{/if}
|
|
</ul>
|
|
</nav>
|
|
<nav class="bottom">
|
|
<hr/>
|
|
<ul class="nav-list">
|
|
<ManageSidebarLink {currentRoute} title="Documentation" icon="fa-book" href="https://docs.ticketsbot.cloud" newWindow />
|
|
<ManageSidebarLink {currentRoute} title="Logout" icon="fa-sign-out-alt" href="/logout" />
|
|
</ul>
|
|
</nav>
|
|
</section>
|
|
|
|
<style>
|
|
.sidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-self: flex-start;
|
|
background-color: #272727;
|
|
padding: 15px;
|
|
width: 275px;
|
|
border-radius: 6px;
|
|
user-select: none;
|
|
}
|
|
|
|
header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 10px;
|
|
|
|
font-weight: bold;
|
|
|
|
padding: 6px 10px;
|
|
border-radius: 4px;
|
|
|
|
background: linear-gradient(33.3deg, #873ef5 0%, #995DF3 100%);
|
|
box-shadow: 0 6px 6px rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .1);
|
|
}
|
|
|
|
.guild-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
nav > ul {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
nav hr {
|
|
width: 40%;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
@media (max-width: 800px) {
|
|
.sidebar {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import {onMount} from "svelte";
|
|
import axios from "axios";
|
|
import {API_URL} from "../js/constants";
|
|
import {notifyError, withLoadingScreen} from "../js/util";
|
|
import {getIconUrl, getDefaultIcon} from "../js/icons";
|
|
import ManageSidebarLink from "./ManageSidebarLink.svelte";
|
|
import ManageSidebarButton from "./ManageSidebarButton.svelte";
|
|
import SubNavigation from "./SubNavigation.svelte";
|
|
import SubNavigationLink from "./SubNavigationLink.svelte";
|
|
|
|
import ImportModal from "../components/manage/ImportModal.svelte";
|
|
|
|
export let currentRoute;
|
|
export let permissionLevel;
|
|
|
|
let importModal = false;
|
|
|
|
$: isAdmin = permissionLevel >= 2;
|
|
|
|
let guildId = currentRoute.namedParams.id;
|
|
|
|
let guild = {};
|
|
let iconUrl = "";
|
|
|
|
let retried = false;
|
|
function handleIconLoadError(e) {
|
|
if (retried) return;
|
|
|
|
retried = true;
|
|
iconUrl = getDefaultIcon(guildId);
|
|
}
|
|
|
|
async function loadGuild() {
|
|
const res = await axios.get(`${API_URL}/api/${guildId}/guild`);
|
|
if (res.status !== 200) {
|
|
notifyError(res.data.error);
|
|
return;
|
|
}
|
|
|
|
guild = res.data;
|
|
}
|
|
|
|
onMount(async () => {
|
|
await withLoadingScreen(async () => {
|
|
await loadGuild();
|
|
|
|
iconUrl = getIconUrl(guildId, guild.icon);
|
|
})
|
|
});
|
|
</script> |