StyAndCo/zeppelin
3
0
Fork 0
mirror of https://github.com/ZeppelinBot/Zeppelin.git synced 2025-05-11 04:45:02 +00:00
Code Releases Activity

Dashboard work and related

Browse source
This commit is contained in:
Dragory 2019-06-23 19:18:41 +03:00
parent 7bda2b1763
commit b230a73a6f
44 changed files with 637 additions and 272 deletions
Download patch file Download diff file Expand all files Collapse all files

3
dashboard/src/components/App.vue
View file

@ -1,3 +1,6 @@
<template>
<router-view></router-view>
</template>
<script>
</script>

70
dashboard/src/components/Dashboard.vue
View file

@ -1,36 +1,46 @@
<template>
<div v-if="loading">
Loading...
</div>
<div v-else>
<h1>Guilds</h1>
<table v-for="guild in guilds">
<tr>
<td>{{ guild.guild_id }}</td>
<td>{{ guild.name }}</td>
<td>
<a v-bind:href="'/dashboard/guilds/' + guild.guild_id + '/config'">Config</a>
</td>
</tr>
</table>
<div class="dashboard">
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="container">
<div class="navbar-brand">
<div class="navbar-item">
<img class="dashboard-logo" src="../img/logo.png" aria-hidden="true">
<h1 class="dashboard-title">Zeppelin Dashboard</h1>
</div>
</div>
<div class="navbar-menu is-active">
<div class="navbar-start">
<router-link to="/dashboard" class="navbar-item">Guilds</router-link>
<a href="#" class="navbar-item">Docs</a>
<a href="#" class="navbar-item">Log out</a>
</div>
</div>
</div>
</nav>
<div class="section">
<div class="container">
<router-view></router-view>
</div>
</div>
</div>
</template>
<script>
import {mapState} from "vuex";
<style scoped>
.dashboard-logo {
margin-right: 12px;
}
export default {
async mounted() {
await this.$store.dispatch("guilds/loadAvailableGuilds");
this.loading = false;
},
data() {
return { loading: true };
},
computed: {
...mapState('guilds', {
guilds: 'available',
}),
},
};
.dashboard-title {
font-weight: 600;
}
</style>
<script>
export default {
async mounted() {
await import("../style/dashboard.scss");
}
};
</script>

22
dashboard/src/components/GuildConfigEditor.vue → dashboard/src/components/DashboardGuildConfigEditor.vue
View file

@ -3,14 +3,23 @@
Loading...
</div>
<div v-else>
<h1>Config for {{ guild.name }}</h1>
<h2 class="title is-1">Config for {{ guild.name }}</h2>
<codemirror v-model="editableConfig" :options="cmConfig"></codemirror>
<button v-on:click="save" :disabled="saving">Save</button>
<button class="button" v-on:click="save" :disabled="saving">Save</button>
<span v-if="saving">Saving...</span>
<span v-else-if="saved">Saved!</span>
</div>
</template>
<style scoped>
.vue-codemirror {
margin-bottom: 16px;
}
>>> .CodeMirror {
height: 70vh;
}
</style>
<script>
import {mapState} from "vuex";
import { codemirror } from "vue-codemirror";
@ -37,7 +46,6 @@
return {
loading: true,
saving: false,
saved: false,
editableConfig: null,
cmConfig: {
indentWithTabs: false,
@ -51,7 +59,7 @@
computed: {
...mapState('guilds', {
guild() {
return this.$store.state.guilds.available.find(g => g.guild_id === this.$route.params.guildId);
return this.$store.state.guilds.available.find(g => g.id === this.$route.params.guildId);
},
config() {
return this.$store.state.guilds.configs[this.$route.params.guildId];
@ -65,9 +73,7 @@
guildId: this.$route.params.guildId,
config: this.editableConfig,
});
this.saving = false;
this.saved = true;
setTimeout(() => this.saved = false, 2500);
this.$router.push("/dashboard");
},
},
};

61
dashboard/src/components/DashboardGuildList.vue Normal file
View file

@ -0,0 +1,61 @@
<template>
<div v-if="loading">
Loading...
</div>
<div v-else>
<h2 class="title is-2">Guilds</h2>
<table class="table">
<tr v-for="guild in guilds">
<td>
<img v-if="guild.icon" class="guild-logo" :src="guild.icon" :aria-label="'Logo for guild ' + guild.name">
</td>
<td>
<div class="guild-name">{{ guild.name }}</div>
<div class="guild-id">{{ guild.id }}</div>
</td>
<td>
<router-link class="button" :to="'/dashboard/guilds/' + guild.id + '/config'">Config</router-link>
</td>
</tr>
</table>
</div>
</template>
<style scoped>
.table td {
vertical-align: middle;
}
.guild-logo {
display: block;
width: 42px;
border-radius: 50%;
}
.guild-name {
font-weight: 600;
}
.guild-id {
color: hsla(220, 100%, 95%, 0.6);
}
</style>
<script>
import {mapState} from "vuex";
export default {
async mounted() {
await this.$store.dispatch("guilds/loadAvailableGuilds");
this.loading = false;
},
data() {
return { loading: true };
},
computed: {
...mapState('guilds', {
guilds: 'available',
}),
},
};
</script>

11
dashboard/src/components/Index.vue
View file

@ -1,11 +0,0 @@
<template>
<p>Redirecting...</p>
</template>
<script>
export default {
created() {
this.$router.push('/login');
}
};
</script>

14
dashboard/src/components/Login.vue
View file

@ -1,14 +0,0 @@
<template>
<a v-bind:href="env.API_URL + '/auth/login'">Login</a>
</template>
<script>
export default {
computed: {
blah() {
return this.$state.apiKey;
}
}
};
</script>

19
dashboard/src/components/Splash.vue Normal file
View file

@ -0,0 +1,19 @@
<template>
<div class="splash">
<div class="wrapper">
<img class="logo" src="../img/logo.png" alt="Zeppelin Logo">
<h1>Zeppelin</h1>
<div class="description">
Zeppelin is a private moderation bot for Discord, designed with large servers and reliability in mind.
</div>
<div class="actions">
<a class="btn" href="/login">Dashboard</a>
<a class="btn disabled" href="#">Docs</a>
</div>
</div>
</div>
</template>
<script>
import "../style/splash.scss";
</script>