Add conf.yaml PWA config (#168)

Closes: #160
Reviewed-on: #168
This commit is contained in:
2024-03-30 21:00:35 -07:00
parent 0420e6b411
commit c1542283ea
8 changed files with 174 additions and 54 deletions

View File

@@ -31,19 +31,22 @@
<span style="margin-left: 16px;">Disable video estimates<f7-icon size="16" style="padding-left: 5px;" f7="question_diamond_fill" tooltip="faster: recommended for slower devices" /></span>
<f7-toggle v-model:checked="otherSettings.disableVideo" style="margin-right: 16px;" />
</div>
<div style="display:flex; justify-content:space-between; width: 100%">
<span style="margin-left: 16px;">Use external server</span>
<f7-toggle v-model:checked="serverSettings.use" style="margin-right: 16px;" @change="setDirty()" />
<div v-if="serverToggle">
<div style="display:flex; justify-content:space-between; width: 100%">
<span style="margin-left: 16px;">Use external server</span>
<f7-toggle v-model:checked="serverSettings.use" style="margin-right: 16px;" @change="setDirty()" />
</div>
<f7-list >
<f7-list-input :disabled="!serverSettings.use || serverList" v-model:value="serverSettings.address" label="Server address" type="text" placeholder="127.0.0.1" />
<f7-list-input :disabled="!serverSettings.use || serverList" v-model:value="serverSettings.port" label="Server port" type="text" placeholder="9001" />
</f7-list>
<span>Other servers</span>
<f7-list :dividers="true" :outline="true" :strong="true" :inset="true" style="width: calc(100% - 32px); margin-top: 0;">
<f7-list-item v-for="(addObj) in externalIp" :disabled="!serverSettings.use" :title="addObj.name" @click="setServerProps(addObj.address, addObj.port)"></f7-list-item>
<f7-list-item v-if="!serverList" v-for="(port, add) in otherIp" :disabled="!serverSettings.use" :title="add" @click="setServerProps(add, port)">{{ port }}</f7-list-item>
<f7-list-item v-if="Object.keys(otherIp).length == 0 && externalIp.length == 0" title="No previous server settings"></f7-list-item>
</f7-list>
</div>
<f7-list>
<f7-list-input :disabled="!serverSettings.use" v-model:value="serverSettings.address" label="Server address" type="text" placeholder="127.0.0.1" />
<f7-list-input :disabled="!serverSettings.use" v-model:value="serverSettings.port" label="Server port" type="text" placeholder="9001" />
</f7-list>
<span>Other servers</span>
<f7-list :dividers="true" :outline="true" :strong="true" :inset="true" style="width: calc(100% - 32px); margin-top: 0;">
<f7-list-item v-for="(port, add) in otherIp" :disabled="!serverSettings.use" :title="add" @click="setServerProps(add, port)">{{ port }}</f7-list-item>
<f7-list-item v-if="Object.keys(otherIp).length == 0" title="No previous server settings"></f7-list-item>
</f7-list>
</div>
<f7-button fill @click="saveAllSettings">SAVE</f7-button>
</div>
@@ -61,6 +64,7 @@
<script>
import { f7 } from 'framework7-vue'
import store from '../js/store'
export default {
data () {
@@ -72,8 +76,8 @@
},
serverSettings: {
use: false,
address: '10.170.64.22',
port: '9001',
address: '127.0.0.1',
port: '9000',
previous: {}
},
themeSettings: {
@@ -81,6 +85,9 @@
}
}
},
setup() {
return store()
},
computed: {
otherIp () {
let filteredIps = {}
@@ -90,6 +97,15 @@
}
}
return filteredIps
},
serverToggle () {
return ['optional','list'].includes(this.externalType)
},
serverList () {
return this.externalType == 'list'
},
externalIp () {
return this.getServerList()
}
},
created () {
@@ -106,7 +122,7 @@
let saveSetting = new Promise(
(saved,failed) => {
try {
if (this.serverSettings.use) {
if (this.serverSettings.use && !this.externalIp.some( (srv) => srv.address == this.serverSettings.address)) {
this.serverSettings.previous[this.serverSettings.address] = this.serverSettings.port
}
localStorage.setItem('serverSettings',JSON.stringify(this.serverSettings))
@@ -151,7 +167,8 @@
},
toggleSettingsView () {
this.showAdvanced = !this.showAdvanced
this.$refs.advancedSettings.style.maxHeight = `${this.showAdvanced ? this.$refs.advancedSettings.scrollHeight : 0}px`
//this.$refs.advancedSettings.style.maxHeight = `${this.showAdvanced ? this.$refs.advancedSettings.scrollHeight : 0}px`
this.$refs.advancedSettings.style.maxHeight = this.showAdvanced ? '100%' : '0px'
},
confirmBack () {
if (this.isDirty) {