Server section all done

This commit is contained in:
MattIPv4
2020-04-28 19:53:59 +01:00
parent 97b28323c5
commit fc6fd025b7
7 changed files with 253 additions and 4 deletions

View File

@@ -76,7 +76,8 @@ limitations under the License.
const data = this.$data.domains[index];
const changes = Object.entries(data).reduce((prev, current) => {
if (current[0] === 'presets') return prev; // Ignore changes from presets
prev += Object.values(current[1]).filter(d => d.default !== d.computed).length;
prev += Object.values(current[1])
.filter(d => d.enabled && d.default !== d.value).length;
return prev;
}, 0);
if (changes) return ` (${changes.toLocaleString()})`;

View File

@@ -58,7 +58,8 @@ limitations under the License.
methods: {
changes(tab) {
if (tab === 'presets') return ''; // Ignore changes from presets
const changes = Object.values(this.$props.data[tab]).filter(d => d.default !== d.computed).length;
const changes = Object.values(this.$props.data[tab])
.filter(d => d.enabled && d.default !== d.value).length;
if (changes) return ` (${changes.toLocaleString()})`;
return '';
},

View File

@@ -1,11 +1,116 @@
<template>
<div>
Hello world server
<input v-model="domain" type="text" />
<div class="field-row">
<div :class="`field${domainChanged ? ' is-changed' : ''}`">
<label class="label">Domain</label>
<div class="control">
<input v-model="domain" class="input" type="text" :placeholder="domainDefault" />
</div>
</div>
<div :class="`field${pathChanged ? ' is-changed' : ''}`">
<label class="label">Path</label>
<div class="control">
<input v-model="path" class="input" type="text" :placeholder="`/var/www/${domain}`" />
</div>
</div>
<div :class="`field${documentRootChanged ? ' is-changed' : ''}`">
<label class="label">Document root</label>
<div class="control">
<input v-model="documentRoot" class="input" type="text" :placeholder="documentRootDefault" />
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label">
<label class="label">www subdomain</label>
</div>
<div class="field-body">
<div :class="`field${wwwSubdomainChanged ? ' is-changed' : ''}`">
<div class="control">
<div class="checkbox">
<PrettyCheck v-model="wwwSubdomain" class="p-default p-curve p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
(www.{{ domain }})
</PrettyCheck>
</div>
</div>
</div>
</div>
</div>
<div v-if="cdnSubdomainEnabled" class="field is-horizontal">
<div class="field-label">
<label class="label">CDN subdomain</label>
</div>
<div class="field-body">
<div :class="`field${cdnSubdomainChanged ? ' is-changed' : ''}`">
<div class="control">
<div class="checkbox">
<PrettyCheck v-model="cdnSubdomain" class="p-default p-curve p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
(cdn.{{ domain }})
</PrettyCheck>
</div>
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label">
<label class="label">Redirect subdomains</label>
</div>
<div class="field-body">
<div :class="`field${redirectSubdomainsChanged ? ' is-changed' : ''}`">
<div class="control">
<div class="checkbox">
<PrettyCheck v-model="redirectSubdomains" class="p-default p-curve p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
({{ wwwSubdomain ? `${domain}, ` : '' }}*.{{ domain }}
<i class="fas fa-long-arrow-alt-right"></i>
{{ wwwSubdomain ? 'www.' : '' }}{{ domain }})
</PrettyCheck>
</div>
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label">
<label class="label">listen</label>
</div>
<div class="field-body">
<div :class="`field has-addons${listenIpv4Changed ? ' is-changed' : ''}`">
<div class="control">
<a class="button is-static">
IPv4
</a>
</div>
<div class="control is-expanded">
<input v-model="listenIpv4" class="input" type="text" :placeholder="listenIpv4Default" />
</div>
</div>
<div :class="`field has-addons${listenIpv6Changed ? ' is-changed' : ''}`">
<div class="control">
<a class="button is-static">
IPv6
</a>
</div>
<div class="control is-expanded">
<input v-model="listenIpv6" class="input" type="text" :placeholder="listenIpv6Default" />
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import PrettyCheck from 'pretty-checkbox-vue/check';
import i18n from '../../i18n';
import delegatedFromDefaults from '../../util/delegated_from_defaults';
import computedFromDefaults from '../../util/computed_from_defaults';
@@ -50,6 +155,9 @@
display: 'Server', // Display name for tab
key: 'server', // Key for data in parent
delegated: delegatedFromDefaults(defaults), // Data the parent will present here
components: {
PrettyCheck,
},
props: {
data: Object, // Data delegated back to us from parent
},
@@ -59,5 +167,22 @@
};
},
computed: computedFromDefaults(defaults), // Getters & setters for the delegated data
watch: {
// Only allow CDN when WWW is enabled first
'$props.data.wwwSubdomain': {
handler(data) {
// This might cause recursion, but seems not to
const state = data.computed;
if (state) {
this.$props.data.cdnSubdomain.enabled = true;
this.$props.data.cdnSubdomain.computed = this.$props.data.cdnSubdomain.value;
} else {
this.$props.data.cdnSubdomain.enabled = false;
this.$props.data.cdnSubdomain.computed = false;
}
},
deep: true,
},
},
};
</script>