From b611b039a09af1dc722b63697da889644a909d7c Mon Sep 17 00:00:00 2001
From: MattIPv4 <me@mattcowley.co.uk>
Date: Thu, 30 Apr 2020 16:34:35 +0100
Subject: [PATCH] PHP section all done

---
 src/nginxconfig/scss/style.scss               |  11 +-
 .../templates/domain_sections/php.vue         | 118 +++++++++++++++++-
 2 files changed, 127 insertions(+), 2 deletions(-)

diff --git a/src/nginxconfig/scss/style.scss b/src/nginxconfig/scss/style.scss
index 9acb84c..6eb5e6c 100644
--- a/src/nginxconfig/scss/style.scss
+++ b/src/nginxconfig/scss/style.scss
@@ -101,6 +101,14 @@ $highlight: #f2c94c;
 
       color: $dark-blue;
       font-size: 1rem;
+
+      &.text {
+        border-radius: $border-radius;
+        color: $dark-grey;
+        display: inline-block;
+        font-size: 14px;
+        padding: .25rem .5rem;
+      }
     }
 
     .button {
@@ -132,7 +140,8 @@ $highlight: #f2c94c;
     }
 
     .checkbox,
-    .radio {
+    .radio,
+    .text {
       background: rgba($highlight, .35);
     }
   }
diff --git a/src/nginxconfig/templates/domain_sections/php.vue b/src/nginxconfig/templates/domain_sections/php.vue
index 67d4baa..ab99c46 100644
--- a/src/nginxconfig/templates/domain_sections/php.vue
+++ b/src/nginxconfig/templates/domain_sections/php.vue
@@ -1,8 +1,99 @@
 <template>
-    <div>Hello world php</div>
+    <div>
+        <div v-if="!phpEnabled" class="field is-horizontal is-aligned-top">
+            <div class="field-label">
+                <label class="label">PHP</label>
+            </div>
+            <div class="field-body">
+                <div class="field is-changed">
+                    <div class="control">
+                        <label class="text">
+                            PHP is disabled.
+                            <template v-if="$parent.$props.data.reverseProxy.reverseProxy.computed">
+                                <br />PHP cannot be enabled whilst the reverse proxy is enabled.
+                            </template>
+                        </label>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div v-else class="field is-horizontal">
+            <div class="field-label">
+                <label class="label">PHP</label>
+            </div>
+            <div class="field-body">
+                <div :class="`field${phpChanged ? ' is-changed' : ''}`">
+                    <div class="control">
+                        <div class="checkbox">
+                            <PrettyCheck v-model="php" class="p-default p-curve p-fill p-icon">
+                                <i slot="extra" class="icon fas fa-check"></i>
+                                enable PHP
+                            </PrettyCheck>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div v-if="wordPressRulesEnabled" class="field is-horizontal">
+            <div class="field-label">
+                <label class="label">WordPress rules</label>
+            </div>
+            <div class="field-body">
+                <div :class="`field${wordPressRulesChanged ? ' is-changed' : ''}`">
+                    <div class="control">
+                        <div class="checkbox">
+                            <PrettyCheck v-model="wordPressRules" class="p-default p-curve p-fill p-icon">
+                                <i slot="extra" class="icon fas fa-check"></i>
+                                enable WordPress-specific rules
+                            </PrettyCheck>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div v-if="drupalRulesEnabled" class="field is-horizontal">
+            <div class="field-label">
+                <label class="label">Drupal rules</label>
+            </div>
+            <div class="field-body">
+                <div :class="`field${drupalRulesChanged ? ' is-changed' : ''}`">
+                    <div class="control">
+                        <div class="checkbox">
+                            <PrettyCheck v-model="drupalRules" class="p-default p-curve p-fill p-icon">
+                                <i slot="extra" class="icon fas fa-check"></i>
+                                enable Drupal-specific rules
+                            </PrettyCheck>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div v-if="magentoRulesEnabled" class="field is-horizontal">
+            <div class="field-label">
+                <label class="label">Magento rules</label>
+            </div>
+            <div class="field-body">
+                <div :class="`field${magentoRulesChanged ? ' is-changed' : ''}`">
+                    <div class="control">
+                        <div class="checkbox">
+                            <PrettyCheck v-model="magentoRules" class="p-default p-curve p-fill p-icon">
+                                <i slot="extra" class="icon fas fa-check"></i>
+                                enable Magento-specific rules
+                            </PrettyCheck>
+                        </div>
+                    </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';
@@ -31,6 +122,9 @@
         display: 'PHP',                                     // Display name for tab
         key: 'php',                                         // 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
         },
@@ -56,6 +150,28 @@
                 },
                 deep: true,
             },
+            // Disable everything if php is disabled
+            '$props.data.php': {
+                handler(data) {
+                    const state = data.computed;
+                    if (state) {
+                        this.$props.data.wordPressRules.enabled = true;
+                        this.$props.data.wordPressRules.computed = this.$props.data.wordPressRules.value;
+                        this.$props.data.drupalRules.enabled = true;
+                        this.$props.data.drupalRules.computed = this.$props.data.drupalRules.value;
+                        this.$props.data.magentoRules.enabled = true;
+                        this.$props.data.magentoRules.computed = this.$props.data.magentoRules.value;
+                    } else {
+                        this.$props.data.wordPressRules.enabled = false;
+                        this.$props.data.wordPressRules.computed = false;
+                        this.$props.data.drupalRules.enabled = false;
+                        this.$props.data.drupalRules.computed = false;
+                        this.$props.data.magentoRules.enabled = false;
+                        this.$props.data.magentoRules.computed = false;
+                    }
+                },
+                deep: true,
+            },
         },
     };
 </script>