94 lines
2 KiB
Vue
94 lines
2 KiB
Vue
|
<template>
|
||
|
|
<div class="relaycxt">
|
||
|
|
<portal to="icon"><fa :icon="faProjectDiagram"/></portal>
|
||
|
|
<portal to="title">{{ $t('relays') }}</portal>
|
||
|
|
|
||
|
|
<section class="_card add">
|
||
|
|
<div class="_title"><fa :icon="faPlus"/> {{ $t('addRelay') }}</div>
|
||
|
|
<div class="_content">
|
||
|
|
<mk-input v-model="inbox">
|
||
|
|
<span>{{ $t('inboxUrl') }}</span>
|
||
|
|
</mk-input>
|
||
|
|
<mk-button @click="add(inbox)" primary><fa :icon="faPlus"/> {{ $t('add') }}</mk-button>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="_card relays">
|
||
|
|
<div class="_title"><fa :icon="faProjectDiagram"/> {{ $t('addedRelays') }}</div>
|
||
|
|
<div class="_content relay" v-for="relay in relays" :key="relay.inbox">
|
||
|
|
<div>{{ relay.inbox }}</div>
|
||
|
|
<div>{{ $t(`_relayStatus.${relay.status}`) }}</div>
|
||
|
|
<mk-button class="button" inline @click="remove(relay.inbox)"><fa :icon="faTrashAlt"/> {{ $t('remove') }}</mk-button>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import Vue from 'vue';
|
||
|
|
import { faPlus, faProjectDiagram } from '@fortawesome/free-solid-svg-icons';
|
||
|
|
import { faSave, faTrashAlt } from '@fortawesome/free-regular-svg-icons';
|
||
|
|
import i18n from '../../i18n';
|
||
|
|
import MkButton from '../../components/ui/button.vue';
|
||
|
|
import MkInput from '../../components/ui/input.vue';
|
||
|
|
|
||
|
|
export default Vue.extend({
|
||
|
|
i18n,
|
||
|
|
|
||
|
|
metaInfo() {
|
||
|
|
return {
|
||
|
|
title: this.$t('relays') as string
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
components: {
|
||
|
|
MkButton,
|
||
|
|
MkInput,
|
||
|
|
},
|
||
|
|
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
relays: [],
|
||
|
|
inbox: '',
|
||
|
|
faPlus, faProjectDiagram, faSave, faTrashAlt
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
created() {
|
||
|
|
this.refresh();
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
add(inbox: string) {
|
||
|
|
this.$root.api('admin/relays/add', {
|
||
|
|
inbox
|
||
|
|
}).then((relay: any) => {
|
||
|
|
this.refresh();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
remove(inbox: string) {
|
||
|
|
this.$root.api('admin/relays/remove', {
|
||
|
|
inbox
|
||
|
|
}).then(() => {
|
||
|
|
this.refresh();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
refresh() {
|
||
|
|
this.$root.api('admin/relays/list').then((relays: any) => {
|
||
|
|
this.relays = relays;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
._content.relay {
|
||
|
|
div {
|
||
|
|
margin: 0.5em 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|