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

Routing section is done

pull/111/head
MattIPv4 2020-04-30 20:58:34 +01:00
parent a5813b7d41
commit c4831b9fec
2 changed files with 160 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -97,22 +97,22 @@
}; };
export default { export default {
name: 'DomainReverseProxy', // Component name name: 'DomainReverseProxy', // Component name
display: 'Reverse proxy', // Display name for tab display: 'Reverse proxy', // Display name for tab
key: 'reverseProxy', // Key for data in parent key: 'reverseProxy', // Key for data in parent
delegated: delegatedFromDefaults(defaults), // Data the parent will present here delegated: delegatedFromDefaults(defaults), // Data the parent will present here
components: { components: {
PrettyCheck, PrettyCheck,
}, },
props: { props: {
data: Object, // Data delegated back to us from parent data: Object, // Data delegated back to us from parent
}, },
data () { data () {
return { return {
i18n, i18n,
}; };
}, },
computed: computedFromDefaults(defaults), // Getters & setters for the delegated data computed: computedFromDefaults(defaults, 'reverseProxy'), // Getters & setters for the delegated data
watch: { watch: {
// If the PHP or Python is enabled, the Reverse proxy will be forced off // If the PHP or Python is enabled, the Reverse proxy will be forced off
'$parent.$props.data': { '$parent.$props.data': {

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

@ -1,8 +1,109 @@
<template> <template>
<div>Hello world routing</div> <div>
<div class="field is-horizontal">
<div class="field-label">
<label class="label">root</label>
</div>
<div class="field-body">
<div class="field">
<div :class="`control${rootChanged ? ' is-changed' : ''}`">
<div class="checkbox">
<PrettyCheck v-model="root" class="p-default p-curve p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
enable
</PrettyCheck>
</div>
</div>
</div>
</div>
</div>
<div v-if="indexEnabled" class="field is-horizontal is-aligned-top">
<div class="field-label">
<label class="label">index</label>
</div>
<div class="field-body">
<div class="field">
<div v-for="value in $props.data.index.options"
:class="`control${indexChanged ? ' is-changed' : ''}`"
>
<div class="radio">
<PrettyRadio v-model="index" :value="value" class="p-default p-round p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
{{ value }}
</PrettyRadio>
</div>
</div>
</div>
</div>
</div>
<div v-if="fallbackHtmlEnabled || fallbackPhpEnabled" class="field is-horizontal is-aligned-top">
<div class="field-label">
<label class="label">Fallback routing</label>
</div>
<div class="field-body">
<div class="field">
<div v-if="fallbackHtmlEnabled" :class="`control${fallbackHtmlChanged ? ' is-changed' : ''}`">
<div class="checkbox">
<PrettyCheck v-model="fallbackHtml" class="p-default p-curve p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
index.html
</PrettyCheck>
</div>
</div>
<div v-if="fallbackPhpEnabled" :class="`control${fallbackPhpChanged ? ' is-changed' : ''}`">
<div class="checkbox">
<PrettyCheck v-model="fallbackPhp" class="p-default p-curve p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
index.php
</PrettyCheck>
</div>
</div>
</div>
</div>
</div>
<div v-if="fallbackPhpPathEnabled" class="field is-horizontal">
<div class="field-label">
<label class="label">Fallback routing PHP path</label>
</div>
<div class="field-body">
<div :class="`field${fallbackPhpPathChanged ? ' is-changed' : ''}`">
<div class="control">
<input v-model="fallbackPhpPath"
class="input"
type="text"
:placeholder="$props.data.fallbackPhpPath.default"
/>
</div>
</div>
</div>
</div>
<div v-if="legacyPhpRoutingEnabled" class="field is-horizontal">
<div class="field-label">
<label class="label">Legacy PHP routing</label>
</div>
<div class="field-body">
<div class="field">
<div :class="`control${legacyPhpRoutingChanged ? ' is-changed' : ''}`">
<div class="checkbox">
<PrettyCheck v-model="legacyPhpRouting" class="p-default p-curve p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
enable legacy routing
</PrettyCheck>
</div>
</div>
</div>
</div>
</div>
</div>
</template> </template>
<script> <script>
import PrettyCheck from 'pretty-checkbox-vue/check';
import PrettyRadio from 'pretty-checkbox-vue/radio';
import i18n from '../../i18n'; import i18n from '../../i18n';
import delegatedFromDefaults from '../../util/delegated_from_defaults'; import delegatedFromDefaults from '../../util/delegated_from_defaults';
import computedFromDefaults from '../../util/computed_from_defaults'; import computedFromDefaults from '../../util/computed_from_defaults';
@ -25,6 +126,10 @@
default: true, default: true,
enabled: true, enabled: true,
}, },
fallbackPhpPath: {
default: '/api/',
enabled: false,
},
legacyPhpRouting: { legacyPhpRouting: {
default: false, default: false,
enabled: true, enabled: true,
@ -32,18 +137,60 @@
}; };
export default { export default {
name: 'DomainRouting', // Component name name: 'DomainRouting', // Component name
display: 'Routing', // Display name for tab display: 'Routing', // Display name for tab
key: 'routing', // Key for data in parent key: 'routing', // Key for data in parent
delegated: delegatedFromDefaults(defaults), // Data the parent will present here delegated: delegatedFromDefaults(defaults), // Data the parent will present here
components: {
PrettyCheck,
PrettyRadio,
},
props: { props: {
data: Object, // Data delegated back to us from parent data: Object, // Data delegated back to us from parent
}, },
data () { data () {
return { return {
i18n, i18n,
}; };
}, },
computed: computedFromDefaults(defaults), // Getters & setters for the delegated data computed: computedFromDefaults(defaults, 'routing'), // Getters & setters for the delegated data
watch: {
// Disable all options (expect legacy php) if root is disabled
'$props.data.root': {
handler(data) {
const state = data.computed;
if (state) {
this.$props.data.index.enabled = true;
this.$props.data.index.computed = this.$props.data.index.value;
this.$props.data.fallbackHtml.enabled = true;
this.$props.data.fallbackHtml.computed = this.$props.data.fallbackHtml.value;
this.$props.data.fallbackPhp.enabled = true;
this.$props.data.fallbackPhp.computed = this.$props.data.fallbackPhp.value;
} else {
this.$props.data.index.enabled = false;
this.$props.data.index.computed = '';
this.$props.data.fallbackHtml.enabled = false;
this.$props.data.fallbackHtml.computed = false;
this.$props.data.fallbackPhp.enabled = false;
this.$props.data.fallbackPhp.computed = false;
}
},
deep: true,
},
// Only enable PHP path if both fallback routing options enabled
'$props.data': {
handler(data) {
// This might cause recursion, but seems not to
if (data.fallbackHtml.computed && data.fallbackPhp.computed) {
this.$props.data.fallbackPhpPath.enabled = true;
this.$props.data.fallbackPhpPath.computed = this.$props.data.fallbackPhpPath.value;
} else {
this.$props.data.fallbackPhpPath.enabled = false;
this.$props.data.fallbackPhpPath.computed = '';
}
},
deep: true,
},
},
}; };
</script> </script>