diff --git a/src/nginxconfig/scss/style.scss b/src/nginxconfig/scss/style.scss
index 00e781f..cc339ce 100644
--- a/src/nginxconfig/scss/style.scss
+++ b/src/nginxconfig/scss/style.scss
@@ -16,3 +16,51 @@ limitations under the License.
$header: #0071fe;
@import "~do-bulma/src/style";
+
+.do-bulma {
+ .tabs {
+ ul {
+ li {
+ &.is-before {
+ a {
+ color: mix($dark-grey, $primary);
+
+ &::after {
+ background: rgba($primary, .5);
+ }
+
+ &:hover {
+ color: $dark-blue;
+
+ &::after {
+ background: $dark-blue;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ .panel {
+ margin-top: 0;
+ padding: 2rem 0;
+
+ .container {
+ padding: 0 1.5rem;
+ }
+
+ .tabs {
+ ul {
+ padding: 0 1rem;
+ }
+ }
+ }
+
+ .buttons-group {
+ align-items: center;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ }
+}
diff --git a/src/nginxconfig/templates/domain.vue b/src/nginxconfig/templates/domain.vue
index a326584..891b25d 100644
--- a/src/nginxconfig/templates/domain.vue
+++ b/src/nginxconfig/templates/domain.vue
@@ -15,10 +15,10 @@ limitations under the License.
-->
<template>
- <div>
+ <div class="panel">
<div class="tabs">
<ul>
- <li v-for="tab in tabs" :class="active === tab.key ? 'is-active' : undefined">
+ <li v-for="tab in tabs" :class="tabClass(tab.key)">
<a @click="active = tab.key">{{ tab.display }}{{ changes(tab.key) }}</a>
</li>
</ul>
@@ -29,6 +29,7 @@ limitations under the License.
:key="tab.key"
:data="$props.data[tab.key]"
:style="{ display: active === tab.key ? 'block' : 'none' }"
+ class="container"
></component>
</div>
</template>
@@ -67,6 +68,12 @@ limitations under the License.
resetValue(tab, key) {
this.setValue(tab, key, this.$props.data[tab][key].default);
},
+ tabClass(tab) {
+ if (tab === this.$data.active) return 'is-active';
+ const tabs = this.$data.tabs.map(t => t.key);
+ if (tabs.indexOf(tab) < tabs.indexOf(this.$data.active)) return 'is-before';
+ return undefined;
+ },
},
};
</script>
diff --git a/src/nginxconfig/templates/domain_sections/php.vue b/src/nginxconfig/templates/domain_sections/php.vue
index 43e02ae..b835351 100644
--- a/src/nginxconfig/templates/domain_sections/php.vue
+++ b/src/nginxconfig/templates/domain_sections/php.vue
@@ -40,5 +40,22 @@
};
},
computed: computedFromDefaults(defaults), // Getters & setters for the delegated data
+ watch: {
+ // If the Reverse proxy is enabled, PHP will be forced off
+ '$parent.$props.data.reverseProxy.reverseProxy.computed'() { this.checkPhpEnabled(); },
+ php() { this.checkPhpEnabled(); },
+ },
+ methods: {
+ checkPhpEnabled() {
+ const state = this.$parent.$props.data.reverseProxy.reverseProxy.computed;
+ if (state) {
+ this.$props.data.php.enabled = false;
+ this.$props.data.php.computed = false;
+ } else {
+ this.$props.data.php.enabled = true;
+ this.$props.data.php.computed = this.$props.data.php.value;
+ }
+ },
+ },
};
</script>
diff --git a/src/nginxconfig/templates/domain_sections/presets.vue b/src/nginxconfig/templates/domain_sections/presets.vue
index 10ae159..8c922e0 100644
--- a/src/nginxconfig/templates/domain_sections/presets.vue
+++ b/src/nginxconfig/templates/domain_sections/presets.vue
@@ -1,11 +1,13 @@
<template>
<div>
- <a v-for="(preset, key) in $props.data"
- :class="`button${preset.computed ? ' is-primary' : ''}`"
- @click="setPreset(key)"
- >
- {{ preset.display }}
- </a>
+ <div class="buttons-group">
+ <a v-for="(preset, key) in $props.data"
+ :class="`button${preset.computed ? ' is-primary' : ''}`"
+ @click="setPreset(key)"
+ >
+ {{ preset.display }}
+ </a>
+ </div>
</div>
</template>
@@ -19,41 +21,95 @@
default: false,
display: 'Frontend',
enabled: true,
+ computedCheck (data) {
+ return !data.php.php.computed
+ && !data.python.python.computed
+ && !data.reverseProxy.reverseProxy.computed
+ && data.routing.index.computed === 'index.html'
+ && data.routing.fallbackHtml.computed;
+ },
},
php: {
default: true,
display: 'PHP',
enabled: true,
+ computedCheck (data) {
+ return data.php.php.computed
+ && data.routing.index.computed === 'index.php'
+ && data.routing.fallbackPhp.computed
+ && !data.routing.fallbackHtml.computed
+ && !data.php.wordPressRules.computed
+ && !data.php.drupalRules.computed
+ && !data.php.magentoRules.computed;
+ },
},
django: {
default: false,
display: 'Django',
enabled: true,
+ computedCheck (data) {
+ return data.python.python.computed
+ && data.python.djangoRules.computed
+ && !data.routing.root.computed;
+ },
},
nodejs: {
default: false,
display: 'Node.js',
enabled: true,
+ computedCheck (data) {
+ return data.reverseProxy.reverseProxy.computed
+ && !data.routing.root.computed;
+ },
},
singlePageApplication: {
default: false,
display: 'Single-page application',
enabled: true,
+ computedCheck (data) {
+ return data.php.php.computed
+ && data.routing.index.computed === 'index.html'
+ && data.routing.fallbackHtml.computed;
+ },
},
wordPress: {
default: false,
display: 'WordPress',
enabled: true,
+ computedCheck (data) {
+ return data.routing.index.computed === 'index.php'
+ && data.routing.fallbackPhp.computed
+ && !data.routing.fallbackHtml.computed
+ && data.php.wordPressRules.computed
+ && !data.php.drupalRules.computed
+ && !data.php.magentoRules.computed;
+ },
},
drupal: {
default: false,
display: 'Drupal',
enabled: true,
+ computedCheck (data) {
+ return data.routing.index.computed === 'index.php'
+ && data.routing.fallbackPhp.computed
+ && !data.routing.fallbackHtml.computed
+ && !data.php.wordPressRules.computed
+ && data.php.drupalRules.computed
+ && !data.php.magentoRules.computed;
+ },
},
magento: {
default: false,
display: 'Magento',
enabled: true,
+ computedCheck (data) {
+ return data.routing.index.computed === 'index.php'
+ && data.routing.fallbackPhp.computed
+ && !data.routing.fallbackHtml.computed
+ && !data.php.wordPressRules.computed
+ && !data.php.drupalRules.computed
+ && data.php.magentoRules.computed;
+ },
},
};
@@ -71,6 +127,18 @@
};
},
computed: computedFromDefaults(defaults), // Getters & setters for the delegated data
+ watch: {
+ // When any data changes, check if it still matches a preset
+ '$parent.$props.data': {
+ handler(data) {
+ // This might cause recursion, but seems not to
+ Object.keys(this.$props.data).forEach(preset => {
+ this.$props.data[preset].computed = this.$props.data[preset].computedCheck(data);
+ });
+ },
+ deep: true,
+ },
+ },
methods: {
setPreset(key) {
// Set that we're using this preset
@@ -88,6 +156,7 @@
this.$parent.resetValue('routing', 'root');
this.$parent.resetValue('routing', 'index');
this.$parent.resetValue('routing', 'fallbackHtml');
+ this.$parent.resetValue('routing', 'fallbackPhp');
switch (key) {
case 'frontend':
@@ -97,7 +166,7 @@
break;
case 'php':
- this.$parent.setValue('routing', 'index', 'index.php');
+ // Defaults should be PHP
break;
case 'django':