Initial

web/docroot/src/components/Header.vue

@@ -0,0 +1,40 @@
+<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>