68 lines
2.2 KiB
Vue
68 lines
2.2 KiB
Vue
<template>
|
|
<div class="flex flex-wrap xs:flex-nowrap w-full xs:h-[calc(100vh-60px)] ps-1">
|
|
<div class="xs:flex-none w-full xs:w-[68px] join join-horizontal xs:join-vertical me-1 pt-7">
|
|
<button
|
|
class="join-item btn btn-sm btn-primary duration-500"
|
|
:class="activeConf === 1 && 'btn-secondary'"
|
|
@click="activeConf = 1"
|
|
>
|
|
{{ t('config.channel') }}
|
|
</button>
|
|
<button
|
|
v-if="authStore.role === 'GlobalAdmin'"
|
|
class="join-item btn btn-sm btn-primary duration-500"
|
|
:class="activeConf === 2 && 'btn-secondary'"
|
|
@click="activeConf = 2"
|
|
>
|
|
Advanced
|
|
</button>
|
|
<button
|
|
v-if="authStore.role !== 'User'"
|
|
class="join-item btn btn-sm btn-primary mt-1 duration-500"
|
|
:class="activeConf === 3 && 'btn-secondary'"
|
|
@click="activeConf = 3"
|
|
>
|
|
Playout
|
|
</button>
|
|
<button
|
|
class="join-item btn btn-sm btn-primary mt-1 duration-500"
|
|
:class="activeConf === 4 && 'btn-secondary'"
|
|
@click="activeConf = 4"
|
|
>
|
|
{{ t('config.user') }}
|
|
</button>
|
|
</div>
|
|
<div class="w-full xs:w-[calc(100%-70px)] mt-6 px-3 xs:px-6 overflow-auto">
|
|
<div>
|
|
<div v-if="activeConf === 1" class="w-full flex justify-center">
|
|
<ConfigChannel />
|
|
</div>
|
|
|
|
<div v-if="activeConf === 2" class="w-full flex justify-center">
|
|
<ConfigAdvanced />
|
|
</div>
|
|
|
|
<div v-else-if="activeConf === 3" class="w-full flex justify-center">
|
|
<ConfigPlayout />
|
|
</div>
|
|
|
|
<div v-else-if="activeConf === 4" class="w-full flex justify-center">
|
|
<ConfigUser />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { t } = useI18n()
|
|
|
|
const authStore = useAuth()
|
|
|
|
useHead({
|
|
title: `${t('button.configure')} | ffplayout`,
|
|
})
|
|
|
|
const activeConf = ref(1)
|
|
</script>
|