mirror of
https://ceregatti.org/git/daniel/dayzdockerserver.git
synced 2025-05-06 14:21:18 +00:00
Refactor Error to Dialog.
Comment out Steam API key handling. We'll need some other way to get the key other than reading the environment. Separate alert from steamcmd "server output" dialog. Remove the old CSS file, as that will need to be figured out. Look into the IDE not resolving files. WIP.
This commit is contained in:
Daniel Ceregatti
parent
9cf22998d2
commit
20700cdc26
12 changed files with 84 additions and 81 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<script setup>
|
||||
import Error from '@/components/Error.vue'
|
||||
import Dialog from '@/components/Dialog.vue'
|
||||
import Header from '@/components/Header.vue'
|
||||
import { useFetch } from '@vueuse/core'
|
||||
import { useAppStore } from '@/store.js'
|
||||
|
|
@ -15,7 +15,7 @@ useFetch('/status', {
|
|||
<template>
|
||||
<Suspense>
|
||||
<main>
|
||||
<Error />
|
||||
<Dialog />
|
||||
<Header />
|
||||
</main>
|
||||
</Suspense>
|
||||
|
|
|
|||
52
web/docroot/src/components/Dialog.vue
Normal file
52
web/docroot/src/components/Dialog.vue
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<script setup>
|
||||
import Dialog from 'primevue/dialog'
|
||||
import { useAppStore } from '@/store.js'
|
||||
const store = useAppStore()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog v-model:visible="store.stream" maximizable modal :style="{ width: '50rem' }">
|
||||
<template #header>
|
||||
<div class="grid">
|
||||
<div class="col align-content-center justify-content-center"><i class="pi pi-exclamation-circle" style="color: green;"></i></div>
|
||||
<div class="col align-content-center justify-content-center white-space-nowrap">{{ $t('Server Output') }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #default>
|
||||
<div class="steamcmd">
|
||||
<pre class="pre">{{ store.streamText }}</pre>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<i v-if="store.streamLoading" class="pi pi-spin pi-cog" style="color: red;"></i>
|
||||
<i v-else class="pi pi-check" style="color: green;"></i>
|
||||
</template>
|
||||
</Dialog>
|
||||
<Dialog v-model:visible="store.alert" modal :header="$t('Alert')" :style="{ width: '25rem' }">
|
||||
<template #header>
|
||||
<div class="grid">
|
||||
<div class="col align-content-center justify-content-center"><i class="pi pi-exclamation-circle" style="color: green;"></i></div>
|
||||
<div class="col align-content-center justify-content-center">{{ $t('Alert') }}</div>
|
||||
</div>
|
||||
</template>
|
||||
{{ store.alertText }}
|
||||
</Dialog>
|
||||
<Dialog v-model:visible="store.error" modal :header="$t('Error')" :style="{ width: '25rem' }">
|
||||
<template #header>
|
||||
<div class="grid">
|
||||
<div class="col align-content-center justify-content-center"><i class="pi pi-exclamation-triangle" style="color: red;"></i></div>
|
||||
<div class="col align-content-center justify-content-center">{{ $t('Error') }}</div>
|
||||
</div>
|
||||
</template>
|
||||
{{ store.errorText }}
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.steamcmd {
|
||||
min-height: 300px;
|
||||
}
|
||||
.pre {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
<script setup>
|
||||
import Dialog from 'primevue/dialog'
|
||||
import { useAppStore } from '@/store.js'
|
||||
const store = useAppStore()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog v-model:visible="store.alert" maximizable modal :style="{ width: '50rem' }">
|
||||
<template #header>
|
||||
<div>
|
||||
{{ $t('Alert') }}
|
||||
</div>
|
||||
</template>
|
||||
<template #default>
|
||||
<div class="steamcmd">
|
||||
<pre class="pre">{{ store.alertText }}</pre>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<i v-if="store.alertLoading" class="pi pi-spin pi-cog" style="color: red;"></i>
|
||||
<i v-else class="pi pi-check" style="color: green;"></i>
|
||||
</template>
|
||||
</Dialog>
|
||||
<Dialog v-model:visible="store.error" modal :header="$t('Error')" :style="{ width: '25rem' }">
|
||||
{{ store.errorText }}
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.steamcmd {
|
||||
min-height: 300px;
|
||||
}
|
||||
.pre {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -21,14 +21,13 @@ const test = async (type) => {
|
|||
}
|
||||
|
||||
const continuous = async () => {
|
||||
store.setAlert('')
|
||||
store.alertLoading = true
|
||||
const url = '/test?type=continuous'
|
||||
const response = await fetch(url)
|
||||
store.setStream('')
|
||||
for await (const chunk of response.body) {
|
||||
store.alertText += new TextDecoder().decode(chunk)
|
||||
store.setStream(new TextDecoder().decode(chunk), true)
|
||||
}
|
||||
store.alertLoading = false
|
||||
store.setSteamLoading(false)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -72,14 +71,14 @@ const continuous = async () => {
|
|||
<div class="grid">
|
||||
<div class="col-6 col-offset-3">
|
||||
<div>
|
||||
<Button @click="store.alertText = $t('This is an alert message')">{{ $t('Test alert') }}</Button>
|
||||
<Button @click="store.setAlert($t('This is an alert message'))">{{ $t('Test alert') }}</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="col-6 col-offset-3">
|
||||
<div>
|
||||
<Button @click="store.errorText = $t('This is an error message')">{{ $t('Test error') }}</Button>
|
||||
<Button @click="store.setError($t('This is an error message'))">{{ $t('Test error') }}</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,9 +16,9 @@ const client_appid = 221100
|
|||
const serverFiles = "/serverfiles"
|
||||
const homeDir = "/home/user"
|
||||
|
||||
const steamAPIKey = process?.env["STEAMAPIKEY"] || ""
|
||||
|
||||
const searchUrl = "https://api.steampowered.com/IPublishedFileService/QueryFiles/v1/?numperpage=1000&appid=221100&return_short_description=true&strip_description_bbcode=true&key=" + steamAPIKey + "&search_text="
|
||||
// const steamAPIKey = process?.env["STEAMAPIKEY"] || ""
|
||||
//
|
||||
// const searchUrl = "https://api.steampowered.com/IPublishedFileService/QueryFiles/v1/?numperpage=1000&appid=221100&return_short_description=true&strip_description_bbcode=true&key=" + steamAPIKey + "&search_text="
|
||||
|
||||
const config = {
|
||||
client_appid: client_appid,
|
||||
|
|
@ -27,7 +27,7 @@ const config = {
|
|||
loginFile: homeDir + "/steamlogin",
|
||||
modDir: "/mods/" + client_appid,
|
||||
port: 8000,
|
||||
searchUrl: searchUrl,
|
||||
// searchUrl: searchUrl,
|
||||
serverFiles: serverFiles,
|
||||
stable_server_appid: stable_server_appid,
|
||||
steamUrl: 'https://steamcommunity.com/sharedfiles/filedetails/?id=',
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
.active {
|
||||
background-color: cyan;
|
||||
}
|
||||
|
||||
.simulink {
|
||||
cursor: pointer;
|
||||
text-underline: blue;
|
||||
}
|
||||
|
||||
.simulink:hover {
|
||||
background-color: green;
|
||||
}
|
||||
|
|
@ -25,6 +25,7 @@ export const en = {
|
|||
'Server files installed': 'Server files installed',
|
||||
'Server files are installed': 'Server files are installed',
|
||||
'Server files were successfully installed': 'Server files were successfully installed',
|
||||
'Server Output': 'Server Output',
|
||||
'Servers': 'Servers',
|
||||
'Stable': 'Stable',
|
||||
'Status': 'Status',
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ export const pt = {
|
|||
'Server files installed': 'Arquivos de servidor instalados',
|
||||
'Server files are installed': 'Arquivos de servidor estão instalados',
|
||||
'Server files were successfully installed': 'Arquivos de servidor foram instalados com sucesso',
|
||||
'Server Output': 'Saída de servidor',
|
||||
'Servers': 'Servidores',
|
||||
'Stable': 'Estável',
|
||||
'Status': 'Estado',
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import 'primeicons/primeicons.css'
|
||||
import 'primeflex/primeflex.css'
|
||||
import './css/index.css'
|
||||
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
|
|
|
|||
|
|
@ -3,14 +3,11 @@ import { defineStore } from 'pinia'
|
|||
export const useAppStore = defineStore('app', {
|
||||
state: () => ({
|
||||
alert: false,
|
||||
alertLoading: false,
|
||||
alertText: '',
|
||||
error: false,
|
||||
errorText: '',
|
||||
loading: false,
|
||||
modId: 0,
|
||||
modFile: false,
|
||||
messageText: false,
|
||||
mods: [],
|
||||
searchText: false,
|
||||
servers: [],
|
||||
|
|
@ -21,25 +18,29 @@ export const useAppStore = defineStore('app', {
|
|||
stableInstalled: false,
|
||||
version: ''
|
||||
},
|
||||
stream: false,
|
||||
streamLoading: false,
|
||||
streamText: '',
|
||||
}),
|
||||
actions: {
|
||||
setAlert(alertText, loading = false) {
|
||||
setAlert(alertText) {
|
||||
this.alertText = alertText
|
||||
this.alert = true
|
||||
this.setAlertLoading(loading)
|
||||
if (loading) {
|
||||
this.alertText += alertText
|
||||
},
|
||||
setStream(streamText) {
|
||||
this.stream = true
|
||||
if (streamText) {
|
||||
this.streamText += streamText
|
||||
} else {
|
||||
this.alertText = alertText
|
||||
this.streamText = ''
|
||||
}
|
||||
},
|
||||
setAlertLoading(alertLoading) {
|
||||
this.alertLoading = alertLoading
|
||||
setStreamLoading(streamLoading) {
|
||||
this.streamLoading = streamLoading
|
||||
},
|
||||
setError(error) {
|
||||
this.error = error
|
||||
},
|
||||
setLoading(loading) {
|
||||
this.loading = loading
|
||||
this.errorText = error
|
||||
this.error = true
|
||||
},
|
||||
setModId(modId) {
|
||||
this.modId = modId
|
||||
|
|
@ -47,9 +48,6 @@ export const useAppStore = defineStore('app', {
|
|||
setModFile(modFile) {
|
||||
this.modFile = modFile
|
||||
},
|
||||
setMessageText(messageText) {
|
||||
this.messageText = messageText
|
||||
},
|
||||
setMods(mods) {
|
||||
this.mods = mods
|
||||
},
|
||||
|
|
|
|||
|
|
@ -320,7 +320,7 @@ app.get('/test', async (req, res) => {
|
|||
if (type === "error") {
|
||||
const ret = {
|
||||
"errorCode": 42,
|
||||
"alert": "This is a test server error",
|
||||
"error": "This is a test server error",
|
||||
}
|
||||
res.send(ret)
|
||||
} else if (type === "alert") {
|
||||
|
|
@ -334,7 +334,7 @@ app.get('/test', async (req, res) => {
|
|||
res.write("data: This is a test server continuous output 1\n")
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
res.write("data: This is a test server continuous output 2\n")
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
await new Promise(resolve => setTimeout(resolve, 2000));
|
||||
res.write("data: This is a test server continuous output 3 but it's a very long line intended to force wrapping of text because the length is so long and the girth is so gorth\n")
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
res.write("data: This is a test server continuous output 4\nDone!")
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import path from 'path'
|
||||
|
||||
export default defineConfig({
|
||||
cacheDir: '/tmp/vite',
|
||||
plugins: [vue()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': './web/docroot/src/'
|
||||
'@': path.resolve(__dirname, "./docroot/src/"),
|
||||
}
|
||||
},
|
||||
server: {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue