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

New data system

pull/111/head
MattIPv4 2020-04-27 23:22:38 +01:00
parent 4c22ba571a
commit e6b8d36068
10 changed files with 383 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/nginxconfig/templates/app.vue
View File

@ -27,7 +27,20 @@ limitations under the License.
</Header>
<div class="main container">
<Domain></Domain>
<div class="tabs">
<ul>
<li v-for="index in domains" :class="index === active ? 'is-active' : undefined">
<a @click="active = index">{{ domainTitle(index) }}</a>
</li>
</ul>
</div>
<template v-for="index in domains">
<Domain ref="domains"
:key="index"
:style="{ display: index === active ? 'block' : 'none' }"
></Domain>
</template>
</div>
<Footer :text="i18n.templates.app.oss"></Footer>
@ -35,26 +48,11 @@ limitations under the License.
</template>
<script>
import Vue from 'vue';
import Vuex from 'vuex';
import i18n from '../i18n';
import Header from 'do-vue/src/templates/header';
import Footer from 'do-vue/src/templates/footer';
import Domain from './domain';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
domains: {},
},
mutations: {
setDomain(state, domain, data) {
state.domains[domain] = data;
},
},
});
export default {
name: 'App',
components: {
@ -62,11 +60,20 @@ limitations under the License.
Header,
Footer,
},
store,
data() {
return {
i18n,
domains: 1,
active: 1,
};
},
methods: {
domainTitle(index) {
if (this.$refs.domains) {
const data = this.$refs.domains[index-1].export();
return data.Server.domain;
}
},
},
};
</script>

50
src/nginxconfig/templates/domain.vue
View File

@ -18,14 +18,18 @@ limitations under the License.
<div>
<div class="tabs">
<ul>
<li v-for="tab in tabs" :class="tabName === tab ? 'is-active' : undefined">
<a @click="setTab(tab)">{{ tab }}</a>
<li v-for="(_, key) in tabs" :class="key === tab ? 'is-active' : undefined">
<a @click="tab = key">{{ key }}{{ sectionChanges(key) }}</a>
</li>
</ul>
</div>
<keep-alive>
<component :is="tabComponent" :ref="tabName"></component>
</keep-alive>
<component v-for="(component, key) in tabs"
:is="component"
:ref="key"
:key="key"
:style="{ display: key === tab ? 'block' : 'none' }"
></component>
<a class="button" @click="log">Log export data to console</a>
</div>
</template>
@ -36,15 +40,39 @@ limitations under the License.
name: 'Domain',
data() {
return {
tabName: Object.keys(Sections)[0],
tabComponent: Object.values(Sections)[0],
tabs: Object.keys(Sections),
tab: Object.keys(Sections)[0],
tabs: Sections,
};
},
methods: {
setTab(tab) {
this.$data.tabName = tab;
this.$data.tabComponent = Sections[tab];
sectionChanges(key) {
if (key in this.$refs && this.$refs[key] && this.$refs[key][0].changes) {
const changes = this.$refs[key][0].changes();
if (changes) {
return ` (${changes.toLocaleString()})`;
}
}
return '';
},
changes() {
return Object.keys(Sections).reduce((prev, key) => {
if (key in this.$refs && this.$refs[key] && this.$refs[key][0].changes) {
prev += this.$refs[key][0].changes();
}
return prev;
}, 0);
},
exports () {
return Object.keys(Sections).reduce((prev, key) => {
prev[key] = {};
if (key in this.$refs && this.$refs[key] && this.$refs[key][0].exports) {
prev[key] = this.$refs[key][0].exports();
}
return prev;
}, {});
},
log () {
console.log(this.exports());
},
},
};

45
src/nginxconfig/templates/domain_sections/https.vue
View File

@ -3,7 +3,52 @@
</template>
<script>
import i18n from '../../i18n';
const defaults = {
https: true,
http2: true,
forceHttps: true,
hsts: true,
hstsSubdomains: true,
hstsPreload: true,
certType: 'letsEncrypt',
letsEncryptEmail: '',
sslCertificate: '',
sslCertificateKey: '',
};
export default {
name: 'DomainHTTPS',
props: {
data: Object,
},
data () {
return {
i18n,
defaults,
...defaults,
};
},
created () {
if (this.$props.data) {
for (const key in this.$props.data) {
if (key in defaults) {
this.$data[key] = this.$props.data[key];
}
}
}
},
methods: {
exports() {
return Object.keys(defaults).reduce((prev, key) => {
prev[key] = this.$data[key];
return prev;
}, {});
},
},
changes() {
return Object.keys(defaults).filter(key => defaults[key] !== this.$data[key]).length;
},
};
</script>

37
src/nginxconfig/templates/domain_sections/logging.vue
View File

@ -3,7 +3,44 @@
</template>
<script>
import i18n from '../../i18n';
const defaults = {
accessLog: false,
errorLog: false,
};
export default {
name: 'DomainLogging',
props: {
data: Object,
},
data () {
return {
i18n,
defaults,
...defaults,
};
},
created () {
if (this.$props.data) {
for (const key in this.$props.data) {
if (key in defaults) {
this.$data[key] = this.$props.data[key];
}
}
}
},
methods: {
exports() {
return Object.keys(defaults).reduce((prev, key) => {
prev[key] = this.$data[key];
return prev;
}, {});
},
changes() {
return Object.keys(defaults).filter(key => defaults[key] !== this.$data[key]).length;
},
},
};
</script>

39
src/nginxconfig/templates/domain_sections/php.vue
View File

@ -3,7 +3,46 @@
</template>
<script>
import i18n from '../../i18n';
const defaults = {
php: true,
wordPressRules: false,
drupalRules: false,
magentoRules: false,
};
export default {
name: 'DomainPHP',
props: {
data: Object,
},
data () {
return {
i18n,
defaults,
...defaults,
};
},
created () {
if (this.$props.data) {
for (const key in this.$props.data) {
if (key in defaults) {
this.$data[key] = this.$props.data[key];
}
}
}
},
methods: {
exports() {
return Object.keys(defaults).reduce((prev, key) => {
prev[key] = this.$data[key];
return prev;
}, {});
},
},
changes() {
return Object.keys(defaults).filter(key => defaults[key] !== this.$data[key]).length;
},
};
</script>

43
src/nginxconfig/templates/domain_sections/presets.vue
View File

@ -3,7 +3,50 @@
</template>
<script>
import i18n from '../../i18n';
const defaults = {
frontend: false,
php: true,
django: false,
nodejs: false,
singlePageApplication: false,
wordPress: false,
drupal: false,
magento: false,
};
export default {
name: 'DomainPresets',
props: {
data: Object,
},
data () {
return {
i18n,
defaults,
...defaults,
};
},
created () {
if (this.$props.data) {
for (const key in this.$props.data) {
if (key in defaults) {
this.$data[key] = this.$props.data[key];
}
}
}
},
methods: {
exports() {
return Object.keys(defaults).reduce((prev, key) => {
prev[key] = this.$data[key];
return prev;
}, {});
},
changes() {
return Object.keys(defaults).filter(key => defaults[key] !== this.$data[key]).length;
},
},
};
</script>

37
src/nginxconfig/templates/domain_sections/python.vue
View File

@ -3,7 +3,44 @@
</template>
<script>
import i18n from '../../i18n';
const defaults = {
python: false,
djangoRules: false,
};
export default {
name: 'DomainPython',
props: {
data: Object,
},
data () {
return {
i18n,
defaults,
...defaults,
};
},
created () {
if (this.$props.data) {
for (const key in this.$props.data) {
if (key in defaults) {
this.$data[key] = this.$props.data[key];
}
}
}
},
methods: {
exports() {
return Object.keys(defaults).reduce((prev, key) => {
prev[key] = this.$data[key];
return prev;
}, {});
},
},
changes() {
return Object.keys(defaults).filter(key => defaults[key] !== this.$data[key]).length;
},
};
</script>

38
src/nginxconfig/templates/domain_sections/reverse_proxy.vue
View File

@ -3,7 +3,45 @@
</template>
<script>
import i18n from '../../i18n';
const defaults = {
reverseProxy: false,
path: '/',
proxyPass: '',
};
export default {
name: 'DomainReverseProxy',
props: {
data: Object,
},
data () {
return {
i18n,
defaults,
...defaults,
};
},
created () {
if (this.$props.data) {
for (const key in this.$props.data) {
if (key in defaults) {
this.$data[key] = this.$props.data[key];
}
}
}
},
methods: {
exports() {
return Object.keys(defaults).reduce((prev, key) => {
prev[key] = this.$data[key];
return prev;
}, {});
},
},
changes() {
return Object.keys(defaults).filter(key => defaults[key] !== this.$data[key]).length;
},
};
</script>

39
src/nginxconfig/templates/domain_sections/routing.vue
View File

@ -3,7 +3,46 @@
</template>
<script>
import i18n from '../../i18n';
const defaults = {
root: true,
index: 'index.php',
fallbackRouting: ['index.php'],
legacyPhpRouting: false,
};
export default {
name: 'DomainRouting',
props: {
data: Object,
},
data () {
return {
i18n,
defaults,
...defaults,
};
},
created () {
if (this.$props.data) {
for (const key in this.$props.data) {
if (key in defaults) {
this.$data[key] = this.$props.data[key];
}
}
}
},
methods: {
exports() {
return Object.keys(defaults).reduce((prev, key) => {
prev[key] = this.$data[key];
return prev;
}, {});
},
changes() {
return Object.keys(defaults).filter(key => defaults[key] !== this.$data[key]).length;
},
},
};
</script>

102
src/nginxconfig/templates/domain_sections/server.vue
View File

@ -1,71 +1,53 @@
<template>
<div>Hello world server</div>
<div>
Hello world server
<input type="text" v-model="domain" />
</div>
</template>
<script>
import Vue from 'vue';
import Vuex from 'vuex';
import i18n from '../../i18n';
Vue.use(Vuex);
// Create the store of values
const store = new Vuex.Store({
state: {
path: {
default: '',
},
documentRoot: {
default: '',
},
wwwSubdomain: {
default: false,
},
cdnSubdomain: {
default: false,
},
redirectSubdomains: {
default: true,
},
},
mutations: {
setPath(state, value) {
state.path.value = value;
},
setDocumentRoot(state, value) {
state.documentRoot.value = value;
},
setWwwSubdomain(state, value) {
state.wwwSubdomain.value = value;
},
setCdnSubdomain(state, value) {
state.cdnSubdomain.value = value;
},
setRedirectSubdomains(state, value) {
state.redirectSubdomains.value = value;
},
},
});
// Set the values to defaults
Object.keys(store.state).forEach(key => {
store.state[key].value = store.state[key].value || store.state[key].default;
});
const defaults = {
domain: 'example.com',
path: '',
documentRoot: '',
wwwSubdomain: false,
cdnSubdomain: false,
redirectSubdomains: true,
};
export default {
name: 'DomainServer',
store,
computed: {
...Object.keys(store.state).reduce((prev, current) => {
prev[current] = {
get () {
return this.$store.state[current].value;
},
set (value) {
this.$store.commit(`set${current.slice(0, 1).toUpperCase()}${current.slice(1)}`, value);
},
};
return prev;
}, {}),
props: {
data: Object,
},
data () {
return {
i18n,
defaults,
...defaults,
};
},
created () {
if (this.$props.data) {
for (const key in this.$props.data) {
if (key in defaults) {
this.$data[key] = this.$props.data[key];
}
}
}
},
methods: {
exports() {
return Object.keys(defaults).reduce((prev, key) => {
prev[key] = this.$data[key];
return prev;
}, {});
},
changes() {
return Object.keys(defaults).filter(key => defaults[key] !== this.$data[key]).length;
},
},
};
</script>