make index page pretty

app/http/endpoints/api/guilds.go

@@ -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()
 			}

app/http/endpoints/root/callback.go

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

go.mod

@@ -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

public/static/css/style.css

@@ -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;
+}

public/templates/views/index.tmpl

@@ -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">
+                <div class="container-fluid">
-                  <thead>
+                  <div class="row" id="guild-container">
-                    <th>Server Name</th>
+                    <div class="col-md-4">
-                  </thead>
+                      <div class="guild align-items-center" onclick="invite();">
-                  <tbody id="guild-container">
+                        <i class="fas fa-plus fa-2x guild-icon-fa"></i>
-                  </tbody>
+                        <div class="align-items-center">
-                </table>
+                          <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) {
+      async function getPermissionLevel(guildId) {
-          const res = await axios.get('/user/permissionlevel?guilds=' + guilds.map(guild => guild.id).join(","));
+          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 col = document.createElement('div');
-                  const td = document.createElement('td');
+                  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 (guild.icon === undefined || guild.icon === null || guild.icon === "") {
-                  if (permissionLevels[guild.id] === 2) {
+                      const icon = document.createElement('i');
-                      link.href = `/manage/${guild.id}/settings`;
+                      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');
+                  const nameContainer = document.createElement('div');
-                  link.appendChild(document.createTextNode(guild.name));
+                  nameContainer.classList.add('align-items-center');
 
-                  td.appendChild(link);
+                  const name = document.createElement('span');
-                  tr.appendChild(td);
+                  name.classList.add('guild-name');
-                  container.appendChild(tr);
+                  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}}