0
0
This commit is contained in:
syuilo 2018-11-16 05:07:59 +09:00
parent bf3fee4481
commit 672b7a4c3d
No known key found for this signature in database
GPG Key ID: BDC4C49D06AB9D69
2 changed files with 39 additions and 40 deletions

View File

@ -8,6 +8,12 @@
<p>{{ $t('@.ai-chan-kawaii') }}</p> <p>{{ $t('@.ai-chan-kawaii') }}</p>
</header> </header>
<marquee-text v-if="instances.length > 0" class="instances" :repeat="10" :duration="60">
<span v-for="instance in instances" class="instance">
<b :style="{ background: instance.bg }">{{ instance.host }}</b>{{ instance.notesCount | number }} / {{ instance.usersCount | number }}
</span>
</marquee-text>
<div v-if="stats" class="stats"> <div v-if="stats" class="stats">
<div> <div>
<div> <div>
@ -84,6 +90,8 @@ import XCpuMemory from "./cpu-memory.vue";
import XCharts from "./charts.vue"; import XCharts from "./charts.vue";
import XApLog from "./ap-log.vue"; import XApLog from "./ap-log.vue";
import { faDatabase } from '@fortawesome/free-solid-svg-icons'; import { faDatabase } from '@fortawesome/free-solid-svg-icons';
import MarqueeText from 'vue-marquee-text-component';
import randomColor from 'randomcolor';
export default Vue.extend({ export default Vue.extend({
i18n: i18n('admin/views/dashboard.vue'), i18n: i18n('admin/views/dashboard.vue'),
@ -91,7 +99,8 @@ export default Vue.extend({
components: { components: {
XCpuMemory, XCpuMemory,
XCharts, XCharts,
XApLog XApLog,
MarqueeText
}, },
data() { data() {
@ -99,6 +108,7 @@ export default Vue.extend({
stats: null, stats: null,
connection: null, connection: null,
meta: null, meta: null,
instances: [],
faDatabase faDatabase
}; };
}, },
@ -113,6 +123,18 @@ export default Vue.extend({
this.$root.api('stats').then(stats => { this.$root.api('stats').then(stats => {
this.stats = stats; this.stats = stats;
}); });
this.$root.api('instances', {
sort: '+notes'
}).then(instances => {
instances.forEach(i => {
i.bg = randomColor({
seed: i.host,
luminosity: 'dark'
});
});
this.instances = instances;
});
}, },
beforeDestroy() { beforeDestroy() {
@ -136,7 +158,6 @@ export default Vue.extend({
> header > header
display flex display flex
margin-bottom 16px
padding-bottom 16px padding-bottom 16px
border-bottom solid 1px var(--adminDashboardHeaderBorder) border-bottom solid 1px var(--adminDashboardHeaderBorder)
color var(--adminDashboardHeaderFg) color var(--adminDashboardHeaderFg)
@ -161,6 +182,20 @@ export default Vue.extend({
margin-left auto margin-left auto
margin-right 0 margin-right 0
> .instances
padding 16px
color var(--adminDashboardHeaderFg)
font-size 13px
>>> .instance
margin 0 10px
> b
padding 2px 6px
margin-right 4px
border-radius 4px
color #fff
> .stats > .stats
display flex display flex
justify-content space-between justify-content space-between

View File

@ -37,11 +37,6 @@
</div> </div>
</nav> </nav>
<main> <main>
<marquee-text v-if="instances.length > 0" class="instances" :repeat="10" :duration="30">
<span v-for="instance in instances" class="instance">
<b :style="{ background: instance.bg }">{{ instance.host }}</b>{{ instance.notesCount | number }} / {{ instance.usersCount | number }}
</span>
</marquee-text>
<div class="page"> <div class="page">
<div v-if="page == 'dashboard'"><x-dashboard/></div> <div v-if="page == 'dashboard'"><x-dashboard/></div>
<div v-if="page == 'instance'"><x-instance/></div> <div v-if="page == 'instance'"><x-instance/></div>
@ -70,8 +65,6 @@ import XHashtags from "./hashtags.vue";
import XUsers from "./users.vue"; import XUsers from "./users.vue";
import { faHeadset, faArrowLeft } from '@fortawesome/free-solid-svg-icons'; import { faHeadset, faArrowLeft } from '@fortawesome/free-solid-svg-icons';
import { faGrin } from '@fortawesome/free-regular-svg-icons'; import { faGrin } from '@fortawesome/free-regular-svg-icons';
import MarqueeText from 'vue-marquee-text-component';
import randomColor from 'randomcolor';
// Detect the user agent // Detect the user agent
const ua = navigator.userAgent.toLowerCase(); const ua = navigator.userAgent.toLowerCase();
@ -86,8 +79,7 @@ export default Vue.extend({
XEmoji, XEmoji,
XAnnouncements, XAnnouncements,
XHashtags, XHashtags,
XUsers, XUsers
MarqueeText
}, },
provide: { provide: {
isMobile isMobile
@ -98,25 +90,11 @@ export default Vue.extend({
version, version,
isMobile, isMobile,
navOpend: !isMobile, navOpend: !isMobile,
instances: [],
faGrin, faGrin,
faArrowLeft, faArrowLeft,
faHeadset faHeadset
}; };
}, },
created() {
this.$root.api('instances', {
sort: '+notes'
}).then(instances => {
instances.forEach(i => {
i.bg = randomColor({
seed: i.host,
luminosity: 'dark'
});
});
this.instances = instances;
});
},
methods: { methods: {
nav(page: string) { nav(page: string) {
this.page = page; this.page = page;
@ -287,22 +265,8 @@ export default Vue.extend({
width 100% width 100%
padding 0 0 0 250px padding 0 0 0 250px
> .instances
padding 10px
background #000
color #fff
font-size 13px
>>> .instance
margin 0 10px
> b
padding 0px 6px
margin-right 4px
border-radius 4px
> .page > .page
max-width 1300px max-width 1150px
&.isMobile &.isMobile
> main > main