Files
dayzdockerserver/web/docroot/src/components/Header.vue
2024-10-20 16:20:55 +02:00

41 lines
1.5 KiB
Vue

<script setup>
import Search from '@/components/Search.vue'
import Status from '@/components/Status.vue'
import Servers from '@/components/Servers.vue'
import { useFetch } from '@vueuse/core'
import { useAppStore } from '@/stores/app.js'
const store = useAppStore()
import { config } from '@/config'
const { error, data } = await useFetch(config.baseUrl + '/status').get().json()
const set = (w, e) => {
store.section = w
const active = Array.from(document.getElementsByClassName('active'))
active.forEach((a) => a.classList.remove('active'))
e.target.classList.add('active')
}
</script>
<template>
<div v-if="data" class="row">
<div class="col-3 text-center">
<h1>DayZ Docker Server</h1>
</div>
<div class="col-5">
<button
@click="installbase"
:class="'btn btn-sm ' + (data.installed ? 'btn-danger' : 'btn-success')"
>
Install Server Files
</button>
<button @click="updatebase" class="btn btn-sm btn-outline-success">Update Server Files</button>
<button @click="updatemods" class="btn btn-sm btn-outline-success">Update Mods</button>
<button type="button" @click="set('servers', $event)" class="btn btn-sm btn-outline-primary">Servers</button>
<button type="button" @click="set('mods', $event)" class="btn btn-sm btn-outline-primary active" data-bs-toggle="button">Mods</button>
<button type="button" @click="set('search', $event)" class="btn btn-sm btn-outline-primary">Search</button>
</div>
<Search />
<Status :status="data" />
<Servers />
</div>
</template>