bene/dayzdockerserver
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial

Browse Source
This commit is contained in:
Bene
2024-10-20 16:20:55 +02:00
commit 33702fce0b
122 changed files with 9293 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
web/docroot/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DayZ Docker Server</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="src/main.js"></script>
</body>
</html>

1365
web/docroot/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

22
web/docroot/package.json Normal file
View File

@@ -0,0 +1,22 @@
{
"name": "docroot",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "vite --host",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"@popperjs/core": "^2.11.8",
"@vueuse/core": "^10.1.2",
"bootstrap": "^5.3.0",
"bootstrap-icons": "^1.10.5",
"pinia": "^2.1.3",
"vue": "^3.3.2"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.2.3",
"vite": "^4.3.5"
}
}

BIN
web/docroot/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

17
web/docroot/src/App.vue Normal file
View File

@@ -0,0 +1,17 @@
<script setup>
import Body from '@/components/Body.vue'
import Error from '@/components/Error.vue'
import Header from '@/components/Header.vue'
</script>
<template>
<Suspense>
<main>
<Error />
<div class="container-fluid min-vh-100 d-flex flex-column bg-light">
<Header />
<Body />
</div>
</main>
</Suspense>
</template>

9
web/docroot/src/components/Body.vue Normal file
View File

@@ -0,0 +1,9 @@
<script setup>
import Mods from '@/components/Mods.vue'
import SearchResults from "@/components/SearchResults.vue";
</script>
<template>
<SearchResults />
<Mods />
</template>

38
web/docroot/src/components/Error.vue Normal file
View File

@@ -0,0 +1,38 @@
<script setup>
import { onMounted } from 'vue'
import { Modal } from 'bootstrap'
import { useAppStore } from '@/stores/app.js'
const store = useAppStore()
let modal = {}
onMounted(() => {
modal = new Modal('#errorModal', {})
// modal.show()
})
</script>
<template>
<div
class="modal"
id="errorModal"
data-bs-backdrop="static"
data-bs-keyboard="false"
tabindex="-1"
aria-labelledby="errorModalLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="errorModalLabel">Error</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
{{ store.errorText }}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</template>

40
web/docroot/src/components/Header.vue Normal file
View File

@@ -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>

47
web/docroot/src/components/Modinfo.vue Normal file
View File

@@ -0,0 +1,47 @@
<script setup>
import { useFetch } from "@vueuse/core"
import XmlFile from '@/components/XmlFile.vue'
import { useAppStore } from '@/stores/app.js'
const store = useAppStore()
import { config } from '@/config'
const { data, error } = useFetch(() => config.baseUrl + `/mod/${store.modId}`, {
immediate: false,
refetch: true
}).get().json()
</script>
<template>
<div class="col-md-9 border">
<div v-if="error" class="d-flex">Error: {{ error }}</div>
<div v-else-if="data" class="d-flex">
<div>
<div>
<strong>{{ data.name }}</strong>
</div>
<div>
ID: {{ data.id }}
</div>
<div>
Size: {{ data.size.toLocaleString("en-US") }}
</div>
<div v-if="data.customXML.length > 0">
Custom XML files:
<ul>
<li v-for="info in data.customXML">
<a
:class="'simulink xmlfile ' + (store.modFile === info.name ? 'active' : '')"
@click="store.modFile=info.name"
>
{{ info.name }}
</a>
</li>
</ul>
</div>
</div>
<div class="col-1"></div>
<div>
<XmlFile />
</div>
</div>
</div>
</template>

55
web/docroot/src/components/Mods.vue Normal file
View File

@@ -0,0 +1,55 @@
<script setup>
import { config } from '@/config'
import { useFetch } from '@vueuse/core'
import { useAppStore } from '@/stores/app.js'
import ModInfo from '@/components/Modinfo.vue'
const store = useAppStore()
const { data, error } = useFetch(config.baseUrl + '/mods', {
afterFetch(ctx) {
store.mods = ctx.data.mods
return ctx
}
}).get().json()
</script>
<template>
<div class="row flex-grow-1" v-if="store.section === 'mods'">
<div v-if="error" class="row text-danger">
{{ error }}
</div>
<div class="col-md-3 border" v-if="data">
<div>
<h4 class="text-center">Installed Mods</h4>
<table>
<tr>
<th>Steam Link</th>
<th>Mod Name</th>
</tr>
<template
v-for="mod in data.mods.sort( (a,b) => { return a.name.localeCompare(b.name) } )"
>
<tr>
<td>
<a
target="_blank"
:href="config.steamUrl + mod.id"
>
{{ mod.id }}
</a>
</td>
<td>
<a
:class="'simulink' + (store.modId === parseInt(mod.id) ? ' active' : '')"
@click="store.modFile='';store.modId=parseInt(mod.id)"
>
{{ mod.name }}
</a>
</td>
</tr>
</template>
</table>
</div>
</div>
<ModInfo />
</div>
</template>

12
web/docroot/src/components/Search.vue Normal file
View File

@@ -0,0 +1,12 @@
<script setup>
import { useAppStore } from '@/stores/app.js'
const store = useAppStore()
</script>
<template>
<div class="col form-control-lg text-center">
<form @submit.prevent="(e) => {store.searchText=e.target.search.value; store.section='search'}">
<input name="search" placeholder="Search mods..." autofocus>
</form>
</div>
</template>

77
web/docroot/src/components/SearchResults.vue Normal file
View File

@@ -0,0 +1,77 @@
<script setup>
import { config } from '@/config'
import { BKMG } from '@/util'
import { useFetch} from '@vueuse/core'
import { useAppStore } from '@/stores/app.js'
const store = useAppStore()
const { data: searchResults, error, isFetching } = useFetch(() => config.baseUrl + `/search/${store.searchText}`, {
immediate: false,
refetch: true,
afterFetch(response) {
// const sortField = "time_updated"
const sortField = "lifetime_subscriptions"
response.data.response.publishedfiledetails.sort((a, b) =>
a[sortField] < b[sortField] ? 1 : -1
)
return response
}
}).get().json()
</script>
<template>
<div v-if="store.section === 'search'">
<div v-if="error" class="row text-danger">
{{ error }}
</div>
<div v-if="store.searchText === ''">
<div class="row justify-content-center">
<div class="col-4">
<h2>Search for something...</h2>
</div>
</div>
</div>
<div v-if="isFetching" class="row justify-content-center">
<div class="col-1 text-end">
<div class="spinner-border" role="status"></div>
</div>
<div class="col-4">
<h2>Searching for <strong>"{{ store.searchText }}"...</strong></h2>
</div>
</div>
<template v-if="searchResults && ! isFetching">
<div class="text-center">
<h2>{{ searchResults.response.total }} results for <strong>"{{ store.searchText }}"</strong></h2>
</div>
<div class="d-flex">
<table>
<tr>
<th>Steam Link</th>
<th>Title</th>
<th>Size</th>
<th>Last Updated</th>
<th>Subscriptions</th>
<th></th>
</tr>
<tr v-for="result in searchResults.response.publishedfiledetails">
<td>
<a
target="_blank"
:href="config.steamUrl + result.publishedfileid"
>
<img :alt="result.short_description" data-bs-toggle="tooltip" data-bs-placement="left" :title="result.short_description" width="160" height="90" :src="result.preview_url">
</a>
</td>
<td>{{ result.title }}</td>
<td>{{ BKMG(result.file_size) }}</td>
<td>{{ new Date(result.time_updated * 1000).toLocaleDateString("en-us") }}</td>
<td>{{ result.lifetime_subscriptions }}</td>
<td>
<button v-if="store.mods.find(o => o.id === result.publishedfileid)" @click="removeMod(result.publishedfileid)" type="button" class="btn btn-danger">Remove</button>
<button v-else @click="installMod(result.publishedfileid)" type="button" class="btn btn-success">Install</button>
</td>
</tr>
</table>
</div>
</template>
</div>
</template>

20
web/docroot/src/components/Servers.vue Normal file
View File

@@ -0,0 +1,20 @@
<script setup>
import { useAppStore } from '@/stores/app.js'
const store = useAppStore()
</script>
<template>
<div class="row" v-if="store.section === 'servers'">
<div class="col text-center">
<div class="row">
<div class="col">
<h2>Servers</h2>
</div>
</div>
<div class="row flex-grow-1">
<div class="col-6 justify-content-end">Running</div>
<div class="col-6">Stopped</div>
</div>
</div>
</div>
</template>

17
web/docroot/src/components/Status.vue Normal file
View File

@@ -0,0 +1,17 @@
<script setup>
const { status } = defineProps(['status'])
</script>
<template>
<div class="col">
<div>
Server files installed:
<span v-if="status.installed" class="bi bi-check h2 text-success"></span>
<span v-else class="bi bi-x h2 danger text-danger"></span>
</div>
<div v-if="status.version">
Version: <span class="text-success fw-bold">{{ status.version }}</span>
<span class="text-success fw-bold">({{ status.appid }})</span>
</div>
</div>
</template>

28
web/docroot/src/components/XmlFile.vue Normal file
View File

@@ -0,0 +1,28 @@
<script setup>
import { useFetch } from '@vueuse/core'
import { config } from '@/config'
import { useAppStore } from '@/stores/app.js'
import XmlTree from '@/components/XmlTree.vue'
const store = useAppStore()
const { data, error } = await useFetch(() => config.baseUrl + `/mod/${store.modId}/${store.modFile}`, {
immediate: false,
refetch: true,
afterFetch(response) {
const parser = new DOMParser()
try {
response.data = parser.parseFromString(response.data, "text/xml").documentElement
} catch(e) {
console.error(e)
response.error = e
}
return response
}
}).get()
</script>
<template>
<div v-if="error">{{ error }}</div>
<div v-else-if="data">
<XmlTree :element="data" :depth="0" />
</div>
</template>

49
web/docroot/src/components/XmlTree.vue Normal file
View File

@@ -0,0 +1,49 @@
<script setup>
const props = defineProps({
depth: Number,
element: [Element, Text],
})
function collapse(e) {
console.log(e)
// e.children?.forEach(x => x.classList?.add("d-none"))
}
function children(e) {
let children = []
let node = e.firstChild
while (node) {
children.push(node)
node = node.nextSibling
}
return children
}
</script>
<template>
<div v-if="props.element.nodeType === 1" :style="'padding-left: ' + (props.depth * 10) + 'px'">
<span class="d-flex">
<span
v-if="props.element.children.length > 0"
class="bi-dash simulink text-center"
@click="collapse"
/>
<span>&lt;{{props.element.nodeName}}</span>
<span v-if="props.element.hasAttributes()" v-for="attribute in props.element.attributes">
<span>&nbsp;{{attribute.name}}</span>
<span>=</span>
<span>"{{attribute.value}}"</span>
</span>
<span v-if="props.element.children.length === 0">&nbsp;/</span>
<span>></span>
</span>
<span v-for="child in children(props.element)">
<XmlTree v-if="child.nodeType !== 8" :element="child" :depth="props.depth + 1" />
</span>
<span
v-if="props.element.nodeType === 1"
style="padding-left: -10px"
>
<span>&lt;/{{props.element.nodeName}}></span>
</span>
</div>
<span v-if="props.element.nodeType === 3">{{props.element.data.trim()}}</span>
</template>

6
web/docroot/src/config.js Normal file
View File

@@ -0,0 +1,6 @@
const config = {
baseUrl: window.location.protocol + '//' + window.location.hostname + ':8000',
steamUrl: 'https://steamcommunity.com/sharedfiles/filedetails/?id='
}
export { config }

21
web/docroot/src/css/index.css Normal file
View File

@@ -0,0 +1,21 @@
button {
padding: 5px;
margin: 10px;
}
th, td {
padding-right: 10px
}
.active {
background-color: cyan;
}
.simulink {
cursor: pointer;
text-underline: blue;
}
.simulink:hover {
background-color: green;
}

25
web/docroot/src/main.js Normal file
View File

@@ -0,0 +1,25 @@
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap'
import 'bootstrap-icons/font/bootstrap-icons.css'
import './css/index.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import {useAppStore} from "@/stores/app";
// Create an instance of our Vue app
const app = createApp(App)
// Add the store
app.use(createPinia())
// A global error handler
app.config.errorHandler = (err, instance, info) => {
const store = useAppStore()
store.errorText = err.message
console.error('GLOBAL ERROR HANDLER! ', err, instance, info)
}
// Mount it
app.mount('#app')

12
web/docroot/src/stores/app.js Normal file
View File

@@ -0,0 +1,12 @@
import { defineStore } from 'pinia'
export const useAppStore = defineStore('app', {
state: () => ({
errorText: '',
modId: 0,
modFile: '',
mods: [],
searchText: '',
section: 'mods',
})
})

11
web/docroot/src/util.js Normal file
View File

@@ -0,0 +1,11 @@
const units = ['bytes', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']
const BKMG = (val) => {
let l = 0, n = parseInt(val, 10) || 0
while(n >= 1024 && ++l){
n = n/1024
}
return(n.toFixed(n < 10 && l > 0 ? 1 : 0) + ' ' + units[l])
}
export { BKMG }

17
web/docroot/vite.config.js Normal file
View File

@@ -0,0 +1,17 @@
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
server: {
port: 8001
}
})