github
/
nginxconfig.io
mirror of https://github.com/digitalocean/nginxconfig.io
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Server section all done

pull/111/head
MattIPv4 2020-04-28 19:53:59 +01:00
parent 97b28323c5
commit fc6fd025b7
7 changed files with 253 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
package-lock.json generated
View File

@ -6254,6 +6254,19 @@
"dev": true,
"optional": true
},
"pretty-checkbox": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/pretty-checkbox/-/pretty-checkbox-3.0.3.tgz",
"integrity": "sha1-1JyAE6j8CO4MLW695FNGS/28Qo4="
},
"pretty-checkbox-vue": {
"version": "1.1.9",
"resolved": "https://registry.npmjs.org/pretty-checkbox-vue/-/pretty-checkbox-vue-1.1.9.tgz",
"integrity": "sha512-45HOanzF+BUTD5prwCoNrtEFYVzWtASTIIPtPQxGCajC097pFD/9mbyjEjoTsu8Tk4/rSyA7RNk6JpFWVHpLag==",
"requires": {
"pretty-checkbox": "^3.0.3"
}
},
"private": {
"version": "0.1.8",
"resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",

1
package.json
View File

@ -37,6 +37,7 @@
"do-bulma": "git+https://github.com/do-community/do-bulma.git",
"do-vue": "git+https://github.com/do-community/do-vue.git",
"parcel-bundler": "^1.12.4",
"pretty-checkbox-vue": "^1.1.9",
"vue": "^2.6.11",
"vue-hot-reload-api": "^2.3.3",
"vuex": "^3.3.0"

93
src/nginxconfig/scss/style.scss
View File

@ -15,9 +15,14 @@ limitations under the License.
*/
$header: #0071fe;
$highlight: #f2c94c;
@import "~do-bulma/src/style";
.do-bulma {
$pretty--color-dark: $primary;
$pretty--color-default: $primary;
@import "~pretty-checkbox/src/pretty-checkbox";
.tabs {
ul {
li {
@ -63,4 +68,92 @@ $header: #0071fe;
flex-direction: row;
justify-content: space-between;
}
.field-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 -.5rem;
.field {
flex-grow: 1;
margin: 0 .5rem;
text-align: left;
}
+ .field-row,
+ .field {
margin-top: 1rem;
}
}
.field {
&.is-horizontal {
align-items: center;
}
&.is-changed {
input {
&,
&:focus {
background: rgba($highlight, .35);
}
}
.checkbox {
background: rgba($highlight, .35);
}
}
label {
@include sailec-medium;
color: $dark-blue;
font-size: 1rem;
}
.button {
&.is-static {
background: $panel;
border-color: $border;
border-style: solid;
border-width: 1px 0 1px 1px;
color: $dark-grey;
padding: 0 ($margin * 1.5);
}
}
}
.checkbox {
border-radius: $border-radius;
padding: .25rem .5rem;
.pretty {
&.p-icon {
font-size: 18px;
margin: 0;
.state {
.icon {
&::before {
color: $panel;
font-size: 14px;
}
}
label {
color: $dark-grey;
font-size: 14px;
padding-left: calc(#{$margin / 2} + 1.5em);
text-indent: initial;
&::before,
&::after {
font-size: 18px;
}
}
}
}
}
}
}

3
src/nginxconfig/templates/app.vue
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()})`;

3
src/nginxconfig/templates/domain.vue
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 '';
},

129
src/nginxconfig/templates/domain_sections/server.vue
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>

15
src/nginxconfig/util/computed_from_defaults.js
View File

@ -9,6 +9,21 @@ export default (defaults) => {
this.$props.data[key].computed = value;
},
};
prev[key + 'Default'] = {
get() {
return this.$props.data[key].default;
},
};
prev[key + 'Enabled'] = {
get() {
return this.$props.data[key].enabled;
},
};
prev[key + 'Changed'] = {
get() {
return this.$props.data[key].enabled && this.$props.data[key].value !== this.$props.data[key].default;
},
};
return prev;
}, {});
};