make index page pretty

This commit is contained in:
rxdn 2020-07-08 13:34:15 +01:00
parent ba7e6f02f5
commit 41ca4bbf04
5 changed files with 96 additions and 29 deletions

View File

@ -15,6 +15,7 @@ import (
type wrappedGuild struct {
Id uint64 `json:"id,string"`
Name string `json:"name"`
Icon string `json:"icon"`
}
func GetGuilds(ctx *gin.Context) {
@ -53,6 +54,7 @@ func GetGuilds(ctx *gin.Context) {
adminGuilds = append(adminGuilds, wrappedGuild{
Id: g.GuildId,
Name: g.Name,
Icon: g.Icon,
})
lock.Unlock()
}

View File

@ -105,6 +105,7 @@ func CallbackHandler(ctx *gin.Context) {
Name: guild.Name,
Owner: guild.Owner,
UserPermissions: int32(guild.Permissions),
Icon: guild.Icon,
})
}

2
go.mod
View File

@ -6,7 +6,7 @@ require (
github.com/BurntSushi/toml v0.3.1
github.com/TicketsBot/archiverclient v0.0.0-20200704164621-09d42dd941e0
github.com/TicketsBot/common v0.0.0-20200702195837-7afe5e77d1df
github.com/TicketsBot/database v0.0.0-20200620140717-f747a0bb4238
github.com/TicketsBot/database v0.0.0-20200708121851-08f2e7582b28
github.com/TicketsBot/logarchiver v0.0.0-20200425163447-199b93429026 // indirect
github.com/apex/log v1.1.2
github.com/boj/redistore v0.0.0-20180917114910-cd5dcc76aeff // indirect

View File

@ -205,4 +205,38 @@ html > ::-webkit-scrollbar {
.wrapper {
z-index: 1000 !important;
}
}
.guild {
width: 100%;
background-color: #121212;
height: 100px;
margin-bottom: 10px;
border-radius: 25px;
display: flex;
cursor: pointer;
}
.guild-icon {
height: 80px;
background-color: #272727;
border-radius: 50%;
margin-left: 10px;
}
.guild-icon-fa {
background-color: #272727;
border-radius: 50%;
margin-left: 10px;
color: white;
font-size: 60px !important;
width: 80px;
height: 80px;
text-align: center;
padding-top: 10px;
}
.guild-name {
color: white !important;
padding-left: 10px;
}

View File

@ -14,13 +14,18 @@
<br/>
<a href="https://invite.ticketsbot.net"><button class="btn btn-primary btn-fill"><i class="fas fa-plus"></i> Invite</button></a>
</p>
<table class="table table-hover table-striped" id="guild-table" style="display: none">
<thead>
<th>Server Name</th>
</thead>
<tbody id="guild-container">
</tbody>
</table>
<div class="container-fluid">
<div class="row" id="guild-container">
<div class="col-md-4">
<div class="guild align-items-center" onclick="invite();">
<i class="fas fa-plus fa-2x guild-icon-fa"></i>
<div class="align-items-center">
<span class="guild-name">Invite to your server</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@ -30,8 +35,8 @@
</div>
<script>
async function getPermissionLevels(guilds) {
const res = await axios.get('/user/permissionlevel?guilds=' + guilds.map(guild => guild.id).join(","));
async function getPermissionLevel(guildId) {
const res = await axios.get('/user/permissionlevel?guilds=' + guildId);
if (res.status !== 200 || !res.data.success) {
showToast('Error', res.data.error);
return;
@ -40,42 +45,67 @@
return res.data.levels;
}
async function goto(guildId) {
const permissionLevels = await getPermissionLevel(guildId);
if (permissionLevels[guildId] === 2) {
window.location.href = `/manage/${guildId}/settings`;
} else {
window.location.href = `/manage/${guildId}/logs`;
}
}
function invite() {
window.location.href = 'https:\/\/invite.ticketsbot.net';
}
async function loadData() {
const res = await axios.get('/user/guilds');
const permissionLevels = await getPermissionLevels(res.data);
console.log(permissionLevels)
if (res.data.length > 0) {
document.getElementById('guild-table').style.display = 'table';
const container = document.getElementById('guild-container');
for (guild of res.data) {
const tr = document.createElement('tr');
const td = document.createElement('td');
const col = document.createElement('div');
col.classList.add('col-md-4');
const link = document.createElement('a');
const guildContainer = document.createElement('div');
guildContainer.classList.add('guild', 'align-items-center');
// admin
if (permissionLevels[guild.id] === 2) {
link.href = `/manage/${guild.id}/settings`;
if (guild.icon === undefined || guild.icon === null || guild.icon === "") {
const icon = document.createElement('i');
icon.classList.add('fas', 'fa-question', 'guild-icon-fa');
guildContainer.appendChild(icon);
} else {
link.href = `/manage/${guild.id}/logs`;
const icon = document.createElement('img');
icon.classList.add('guild-icon');
icon.src = `https:\/\/cdn.discordapp.com/icons/${guild.id}/${guild.icon}.webp?size=256`;
guildContainer.appendChild(icon);
}
link.classList.add('server');
link.appendChild(document.createTextNode(guild.name));
const nameContainer = document.createElement('div');
nameContainer.classList.add('align-items-center');
td.appendChild(link);
tr.appendChild(td);
container.appendChild(tr);
const name = document.createElement('span');
name.classList.add('guild-name');
name.appendChild(document.createTextNode(guild.name));
nameContainer.appendChild(name);
guildContainer.appendChild(nameContainer);
const guildId = guild.id
guildContainer.onclick = async () => { await goto(guildId) };
col.appendChild(guildContainer);
container.appendChild(col);
}
} else {
document.getElementById('no-guilds').style.display = 'block';
}
}
withLoadingScreen(loadData);
withLoadingScreen(async () => {
await setDefaultHeader(); // on first load, this isnt set yet because its run async in auth.js
await loadData();
});
</script>
{{end}}