Add web UI. This has lofty goals.

Use node js module syntax.
Make dev easier by not starting the web UI from docker startup.
This commit is contained in:
Daniel Ceregatti 2023-05-24 23:40:44 -07:00
parent 0a73bea7f6
commit 5267ae70bb
8 changed files with 324 additions and 23 deletions

View file

@ -9,6 +9,7 @@ EOF
# Uncomment the line below to run things manually in the container, then run:
# docker compose exec main bash
tail -f /dev/null
exit 0
# Otherwise, start the server normally
#/files/dayzserver start
/files/dayzserver start

View file

@ -10,6 +10,12 @@ export PS1="${debian_chroot:+($debian_chroot)}\u@dz-main:\w\$ "
EOF
fi
# Uncomment the lines below to run things manually in the container, then run:
# docker compose exec main bash
tail -f /dev/null
exit 0
# Otherwise, start the server normally
cd /web
npm i
node index.js

View file

@ -56,7 +56,7 @@ loadconfig(){
if [ ! -f "${SERVER_INSTALL_FILE}" ]
then
echo
echo -e "The DayZ server files are not installed. Run '${green}docker-compose run --rm main dayzserver install${default}'"
echo -e "The DayZ server files are not installed. You need to do this first in the web UI."
echo
exit 1
fi

View file

@ -1,10 +1,139 @@
const express = require('express')
const path = require('path')
import express from 'express'
import path from 'path'
import fs from 'fs'
const app = express()
const port = 8000
app.use('/', express.static(path.join(__dirname, 'root')))
/*
The DayZ server Steam app ID. USE ONE OR THE OTHER!!
app.listen(port, () => {
console.log(`Listening on port ${port}`)
Presumably once the Linux server is officially released, the binaries will come from this ID.
Meanwhile, if we have a release-compatible binary, the base files must be installed from this id,
even if the server binary and required shared objects don't come from it. (They'd come from...elsewhere...)
*/
//const server_appid = "223350"
/*
Without a release binary, we must use the experimental server app ID.
*/
const server_appid = "1042420"
/*
DayZ release client Steam app ID. This is for mods, as only the release client has them.
*/
const client_appid = "221100"
/*
Base file locations
*/
const modDir = "/mods"
const serverFiles = "/serverfiles"
const d = '/'
/*
XML config files the system can handle. These are retrieved from values in templates located in /files/mods/:modId
*/
const configFiles = [
'cfgeventspawns.xml',
'cfgspawnabletypes.xml',
'events.xml',
'types.xml',
]
const config = {
installFile: serverFiles + "/DayZServer",
modDir: modDir + "/" + client_appid,
port: 8000,
}
const getDirSize = (dirPath) => {
let size = 0
const files = fs.readdirSync(dirPath)
for (let i = 0; i < files.length; i++) {
const filePath = path.join(dirPath, files[i])
const stats = fs.statSync(filePath)
if (stats.isFile()) {
size += stats.size
} else if (stats.isDirectory()) {
size += getDirSize(filePath)
}
}
return size
}
const getCustomXML = (modId) => {
const ret = []
for(const file of configFiles) {
if (fs.existsSync(config.modDir + d + modId + d + file)) {
ret.push({name:file})
}
}
return ret
}
const getModNameById = (id) => {
const files = fs.readdirSync(serverFiles, {encoding: 'utf8', withFileTypes: true})
for (const file of files) {
if (file.isSymbolicLink()) {
const sym = fs.readlinkSync(serverFiles + d + file.name)
if(sym.indexOf(id) > -1) return file.name
}
}
}
const getMods = () => {
const mods = []
fs.readdirSync(config.modDir).forEach(file => {
const name = getModNameById(file)
mods.push({name:name,id:file})
})
return mods
}
app.use(express.static('root'))
app.get('/status', (req, res) => {
// FIXME! Group these into a Promise.All()
const installed = fs.existsSync(config.installFile)
const mods = getMods()
const ret = {
"installed": installed,
"version": "1.20.bogus",
"mods": mods
}
res.send(ret)
})
app.route('/mod/:modId')
.get((req, res) => {
// Get mod metadata by ID
const modId = req.params["modId"]
const modDir = config.modDir + d + modId
const customXML = getCustomXML(modId)
const ret = {
id: modId,
name: getModNameById(modId),
size: getDirSize(modDir),
customXML: customXML
}
res.send(ret)
})
.post((req, res) => {
// Add a mod by ID
})
.put((req, res) => {
// Update a mod by ID
})
app.route('/mod/:modId/:file')
.get((req, res) => {
const modId = req.params["modId"]
const file = req.params["file"]
const contents = fs.readFileSync(config.modDir + d + modId + d + file)
res.send(contents)
})
app.listen(config.port, () => {
console.log(`Listening on port ${config.port}`)
})

View file

@ -11,5 +11,6 @@
"license": "ISC",
"dependencies": {
"express": "^4.18.2"
}
},
"type": "module"
}

30
web/root/index.css Normal file
View file

@ -0,0 +1,30 @@
body {
padding-top: 50px;
background-color: black;
}
.green {
color: green;
font-weight: bolder;
}
.yellow {
color: yellow;
font-weight: bolder;
}
.darkgrey {
background-color: darkgray;
font-weight: bolder;
margin-bottom: 10px;
}
.modInfo {
background-color: aliceblue;
}
.simulink {
cursor: pointer;
text-underline: blue;
}
th, td {
padding-right: 10px
}

View file

@ -3,21 +3,19 @@
<head>
<meta charset="UTF-8">
<title>DayZ Docker Server</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
body {
padding-top: 50px;
background-color: darkgray;
}
</style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="/index.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>DayZ Docker Server</h1>
</div>
</div>
<div id="app"></div>
<script type="module">
import app from '/index.js'
// eslint-disable-next-line no-undef
Vue.createApp(app).mount('#app')
</script>
</body>
</html>

136
web/root/index.js Normal file
View file

@ -0,0 +1,136 @@
const template = `
<div class="container-fluid">
<div class="row jumbotron darkgrey">
<div class="col-10">
<h1>DayZ Docker Server</h1>
</div>
<div class="col-2">
<div>
Server files installed: {{ installed }}
</div>
<div>
Version: {{ version }}
</div>
</div>
</div>
<div
v-if="fetchError != ''"
class="row jumbotron text-center alert alert-danger"
>
{{ fetchError }}
</div>
<div class="row jumbotron darkgrey">
<div class="col-3">
<h2 class="text-center">Mods</h2>
<table>
<tr>
<th>Steam Link</th>
<th>Mod Info</th>
</tr>
<template
v-for="mod in mods"
:key="index"
>
<tr>
<td>
<a
target="_blank"
:href="'https://steamcommunity.com/sharedfiles/filedetails/?id=' + mod.id"
>
{{ mod.id }}
</a>
</td>
<td>
<a class="simulink" @click="getModInfo(mod.id)">{{ mod.name }}</a>
</td>
</tr>
</template>
</table>
</div>
<div class="col-9 modInfo" v-if="modInfo != ''">
<div class="text-center col-2">
<h2>{{ modInfo.name }}</h2>
</div>
<div class="row">
<div class="col-2">
<div>
ID: {{ modInfo.id }}
</div>
<div>
Size: {{ modInfo.size.toLocaleString("en-US") }}
</div>
<div v-if="modInfo.customXML.length > 0">
Custom XML files:
<ul>
<li v-for="info in modInfo.customXML">
<a class="simulink" @click="getXMLInfo(modInfo.id,info.name)">{{ info.name }}</a>
</li>
</ul>
</div>
</div>
<div class="col-10">
<textarea cols="120" rows="15" v-if="this.XMLInfo != ''">{{ this.XMLInfo }}</textarea>
</div>
</div>
</div>
</div>
</div>
</template>
`
export default {
name: 'DazDockerServer',
template: template,
data() {
return {
fetchError: "",
installed: false,
mods: [],
modInfo: "",
version: "Unknown",
XMLInfo: "",
}
},
methods: {
getModInfo(modId) {
fetch('/mod/' + modId)
.then(response => response.json())
.then(response => {
this.modInfo = response
this.XMLInfo = ""
})
.catch((error) => {
console.error(error)
this.fetchError = error.message
})
},
getXMLInfo(modId, file) {
fetch('/mod/' + modId + '/' + file)
.then(response => response.text())
.then(response => {
this.XMLInfo = response
})
.catch((error) => {
console.error(error)
this.fetchError = error.message
})
}
},
mounted() {
// Get the data
fetch('/status')
.then(response => response.json())
.then(response => {
this.installed = response.installed
this.version = response.version
this.mods = response.mods
if(response.error) {
this.fetchError = response.error
}
})
.catch((error) => {
console.error(error)
this.fetchError = error.message
})
}
}