Presets all work now with computed values

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;
+  }
+}

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>

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>

src/nginxconfig/templates/domain_sections/presets.vue

@@ -1,11 +1,13 @@
 <template>
     <div>
-        <a v-for="(preset, key) in $props.data"
+        <div class="buttons-group">
-           :class="`button${preset.computed ? ' is-primary' : ''}`"
+            <a v-for="(preset, key) in $props.data"
-           @click="setPreset(key)"
+               :class="`button${preset.computed ? ' is-primary' : ''}`"
-        >
+               @click="setPreset(key)"
-            {{ preset.display }}
+            >
-        </a>
+                {{ 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':