Make profile badges common.

This commit is contained in:
Buster Neece 2022-12-15 22:11:49 -06:00
parent 86e8d565a4
commit 0a5a4e2fd0
No known key found for this signature in database
GPG Key ID: F1D2E64A0005E80E
7 changed files with 71 additions and 15 deletions

View File

@ -4,8 +4,7 @@
<h3 class="card-title">
<translate key="lang_profile_backend_title">AutoDJ Service</translate>
<small class="badge badge-pill badge-success" v-if="np.services.backend_running" key="lang_profile_backend_running" v-translate>Running</small>
<small class="badge badge-pill badge-danger" v-else key="lang_profile_backend_not_running" v-translate>Not Running</small>
<running-badge :running="np.services.backend_running"></running-badge>
<br>
<small>{{ backendName }}</small>
</h3>
@ -42,6 +41,7 @@
<script>
import {BACKEND_LIQUIDSOAP} from '~/components/Entity/RadioAdapters.js';
import Icon from '~/components/Common/Icon';
import RunningBadge from "./Common/RunningBadge.vue";
export const profileBackendProps = {
props: {
@ -61,7 +61,7 @@ export const profileBackendProps = {
export default {
inheritAttrs: false,
components: {Icon},
components: {RunningBadge, Icon},
mixins: [profileBackendProps],
props: {
np: Object

View File

@ -0,0 +1,26 @@
<template>
<small class="badge badge-pill ml-2" :class="badgeClass">{{ badgeText }}</small>
</template>
<script setup>
import {computed} from "vue";
import {useGettext} from "vue3-gettext";
const props = defineProps({
enabled: Boolean
});
const badgeClass = computed(() => {
return (props.enabled)
? 'badge-success'
: 'badge-danger';
});
const {$gettext} = useGettext();
const badgeText = computed(() => {
return (props.enabled)
? $gettext('Enabled')
: $gettext('Disabled');
});
</script>

View File

@ -0,0 +1,26 @@
<template>
<small class="badge badge-pill ml-2" :class="badgeClass">{{ badgeText }}</small>
</template>
<script setup>
import {computed} from "vue";
import {useGettext} from "vue3-gettext";
const props = defineProps({
running: Boolean
});
const badgeClass = computed(() => {
return (props.running)
? 'badge-success'
: 'badge-danger';
});
const {$gettext} = useGettext();
const badgeText = computed(() => {
return (props.running)
? $gettext('Running')
: $gettext('Not Running');
});
</script>

View File

@ -3,8 +3,8 @@
<div class="card-header bg-primary-dark">
<h3 class="card-title">
<translate key="lang_frontend_title">Broadcasting Service</translate>
<small class="badge badge-pill badge-success" v-if="np.services.frontend_running" key="lang_frontend_running">Running</small>
<small class="badge badge-pill badge-danger" v-else key="lang_frontend_not_running">Not Running</small>
<running-badge :running="np.services.frontend_running"></running-badge>
<br>
<small>{{ frontendName }}</small>
</h3>
@ -96,6 +96,7 @@
import {FRONTEND_ICECAST, FRONTEND_SHOUTCAST} from '~/components/Entity/RadioAdapters.js';
import CopyToClipboardButton from '~/components/Common/CopyToClipboardButton';
import Icon from '~/components/Common/Icon';
import RunningBadge from "./Common/RunningBadge.vue";
export const profileFrontendProps = {
props: {
@ -114,7 +115,7 @@ export const profileFrontendProps = {
export default {
inheritAttrs: false,
components: {Icon, CopyToClipboardButton},
components: {RunningBadge, Icon, CopyToClipboardButton},
mixins: [profileFrontendProps],
props: {
np: Object

View File

@ -4,7 +4,7 @@
<div class="card-header bg-primary-dark">
<h3 class="card-title">
<translate key="lang_profile_public_title">Public Pages</translate>
<small class="badge badge-pill badge-success" key="lang_profile_public_enabled" v-translate>Enabled</small>
<enabled-badge :enabled="true"></enabled-badge>
</h3>
</div>
<table class="table table-striped table-responsive-md mb-0">
@ -61,7 +61,7 @@
<div class="card-header bg-primary-dark">
<h3 class="card-title">
<translate key="lang_profile_public_title">Public Pages</translate>
<small class="badge badge-pill badge-danger" key="lang_profile_public_disabled" v-translate>Disabled</small>
<enabled-badge :enabled="false"></enabled-badge>
</h3>
</div>
<div class="card-actions" v-if="userCanManageProfile">
@ -77,6 +77,7 @@
<script>
import EmbedModal, {profileEmbedModalProps} from './EmbedModal';
import Icon from '~/components/Common/Icon';
import EnabledBadge from "./Common/EnabledBadge.vue";
export const profilePublicProps = {
props: {
@ -98,7 +99,7 @@ export const profilePublicProps = {
export default {
inheritAttrs: false,
components: {Icon, EmbedModal},
components: {EnabledBadge, Icon, EmbedModal},
mixins: [profilePublicProps, profileEmbedModalProps],
computed: {
langDisablePublicPages() {

View File

@ -4,7 +4,7 @@
<div class="card-header bg-primary-dark">
<h3 class="card-title">
<translate key="lang_profile_requests_title">Song Requests</translate>
<small class="badge badge-pill badge-success" key="lang_profile_requests_enabled" v-translate>Enabled</small>
<enabled-badge :enabled="true"></enabled-badge>
</h3>
</div>
<div class="card-actions" v-if="userCanManageReports || userCanManageProfile">
@ -22,7 +22,7 @@
<div class="card-header bg-primary-dark">
<h3 class="card-title">
<translate key="lang_profile_requests_title">Song Requests</translate>
<small class="badge badge-pill badge-danger" key="lang_profile_requests_disabled" v-translate>Disabled</small>
<enabled-badge :enabled="false"></enabled-badge>
</h3>
</div>
<div class="card-actions" v-if="userCanManageProfile">
@ -37,6 +37,7 @@
<script>
import Icon from '~/components/Common/Icon';
import EnabledBadge from "./Common/EnabledBadge.vue";
export const profileRequestsProps = {
props: {
@ -50,7 +51,7 @@ export const profileRequestsProps = {
export default {
inheritAttrs: false,
components: {Icon},
components: {EnabledBadge, Icon},
mixins: [profileRequestsProps],
computed: {
langDisableRequests() {

View File

@ -4,7 +4,7 @@
<div class="card-header bg-primary-dark">
<h3 class="card-title">
<translate key="lang_profile_streamers_title">Streamers/DJs</translate>
<small class="badge badge-pill badge-success" key="lang_profile_streamers_enabled" v-translate>Enabled</small>
<enabled-badge :enabled="true"></enabled-badge>
</h3>
</div>
<div class="card-actions" v-if="userCanManageStreamers || userCanManageProfile">
@ -22,7 +22,7 @@
<div class="card-header bg-primary-dark">
<h3 class="card-title">
<translate key="lang_profile_streamers_title">Streamers/DJs</translate>
<small class="badge badge-pill badge-danger" key="lang_profile_streamers_disabled" v-translate>Disabled</small>
<enabled-badge :enabled="false"></enabled-badge>
</h3>
</div>
<div class="card-actions" v-if="userCanManageProfile">
@ -37,6 +37,7 @@
<script>
import Icon from '~/components/Common/Icon';
import EnabledBadge from "./Common/EnabledBadge.vue";
export const profileStreamersProps = {
props: {
@ -50,7 +51,7 @@ export const profileStreamersProps = {
export default {
inheritAttrs: false,
components: {Icon},
components: {EnabledBadge, Icon},
mixins: [profileStreamersProps],
computed: {
langDisableStreamers() {