Python section all done

src/nginxconfig/scss/style.scss

@@ -107,7 +107,7 @@ $highlight: #f2c94c;
         color: $dark-grey;
         display: inline-block;
         font-size: 14px;
-        padding: .25rem .5rem;
+        padding: 0 .5rem;
       }
     }
 
@@ -144,6 +144,12 @@ $highlight: #f2c94c;
     .text {
       background: rgba($highlight, .35);
     }
+
+    label {
+      &.text {
+        padding: .25rem .5rem;
+      }
+    }
   }
 
   .checkbox,

src/nginxconfig/templates/domain_sections/php.vue

@@ -12,6 +12,9 @@
                             <template v-if="$parent.$props.data.reverseProxy.reverseProxy.computed">
                                 <br />PHP cannot be enabled whilst the reverse proxy is enabled.
                             </template>
+                            <template v-if="$parent.$props.data.python.python.computed">
+                                <br />PHP cannot be enabled whilst Python is enabled.
+                            </template>
                         </label>
                     </div>
                 </div>
@@ -135,12 +138,11 @@
         },
         computed: computedFromDefaults(defaults, 'php'), // Getters & setters for the delegated data
         watch: {
-            // If the Reverse proxy is enabled, PHP will be forced off
+            // If the Reverse proxy or Python is enabled, PHP will be forced off
             '$parent.$props.data': {
                 handler(data) {
                     // This might cause recursion, but seems not to
-                    const state = data.reverseProxy.reverseProxy.computed;
+                    if (data.reverseProxy.reverseProxy.computed || data.python.python.computed) {
-                    if (state) {
                         this.$props.data.php.enabled = false;
                         this.$props.data.php.computed = false;
                     } else {
@@ -150,7 +152,7 @@
                 },
                 deep: true,
             },
-            // Disable everything if php is disabled
+            // Disable everything if PHP is disabled
             '$props.data.php': {
                 handler(data) {
                     const state = data.computed;

src/nginxconfig/templates/domain_sections/python.vue

@@ -1,10 +1,66 @@
 <template>
     <div>
-        Hello world python
+        <div v-if="!pythonEnabled" class="field is-horizontal is-aligned-top">
+            <div class="field-label">
+                <label class="label">Python</label>
+            </div>
+            <div class="field-body">
+                <div class="field">
+                    <div class="control">
+                        <label class="text">
+                            Python is disabled.
+                            <template v-if="$parent.$props.data.reverseProxy.reverseProxy.computed">
+                                <br />Python cannot be enabled whilst the reverse proxy is enabled.
+                            </template>
+                            <template v-if="$parent.$props.data.php.php.computed">
+                                <br />Python cannot be enabled whilst PHP is enabled.
+                            </template>
+                        </label>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div v-else class="field is-horizontal">
+            <div class="field-label">
+                <label class="label">Python</label>
+            </div>
+            <div class="field-body">
+                <div :class="`field${pythonChanged ? ' is-changed' : ''}`">
+                    <div class="control">
+                        <div class="checkbox">
+                            <PrettyCheck v-model="python" class="p-default p-curve p-fill p-icon">
+                                <i slot="extra" class="icon fas fa-check"></i>
+                                enable Python
+                            </PrettyCheck>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div v-if="djangoRulesEnabled" class="field is-horizontal">
+            <div class="field-label">
+                <label class="label">Django rules</label>
+            </div>
+            <div class="field-body">
+                <div :class="`field${djangoRulesChanged ? ' is-changed' : ''}`">
+                    <div class="control">
+                        <div class="checkbox">
+                            <PrettyCheck v-model="djangoRules" class="p-default p-curve p-fill p-icon">
+                                <i slot="extra" class="icon fas fa-check"></i>
+                                enable Django-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';
@@ -21,18 +77,51 @@
     };
 
     export default {
-        name: 'DomainPython',                       // Component name
+        name: 'DomainPython',                                   // Component name
-        display: 'Python',                          // Display name for tab
+        display: 'Python',                                      // Display name for tab
-        key: 'python',                              // Key for data in parent
+        key: 'python',                                          // 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,
+        },
         props: {
-            data: Object,                           // Data delegated back to us from parent
+            data: Object,                                       // Data delegated back to us from parent
         },
         data () {
             return {
                 i18n,
             };
         },
-        computed: computedFromDefaults(defaults),   // Getters & setters for the delegated data
+        computed: computedFromDefaults(defaults, 'python'), // Getters & setters for the delegated data
+        watch: {
+            // If the Reverse proxy or PHP is enabled, Python will be forced off
+            '$parent.$props.data': {
+                handler(data) {
+                    // This might cause recursion, but seems not to
+                    if (data.reverseProxy.reverseProxy.computed || data.php.php.computed) {
+                        this.$props.data.python.enabled = false;
+                        this.$props.data.python.computed = false;
+                    } else {
+                        this.$props.data.python.enabled = true;
+                        this.$props.data.python.computed = this.$props.data.python.value;
+                    }
+                },
+                deep: true,
+            },
+            // Disable Django if Python is disabled
+            '$props.data.python': {
+                handler(data) {
+                    const state = data.computed;
+                    if (state) {
+                        this.$props.data.djangoRules.enabled = true;
+                        this.$props.data.djangoRules.computed = this.$props.data.djangoRules.value;
+                    } else {
+                        this.$props.data.djangoRules.enabled = false;
+                        this.$props.data.djangoRules.computed = false;
+                    }
+                },
+                deep: true,
+            },
+        },
     };
 </script>

src/nginxconfig/util/is_changed.js

@@ -1,8 +1,6 @@
 export default (prop, cat, key) => {
     // Show as changed when enabled & not default
-    // Show php as changed when completely disabled (by reverse proxy)
+    // Show php as changed when completely disabled (by reverse proxy or python)
-    // Show reverse proxy as changed when completely disabled (by php)
     return (prop.enabled && prop.value !== prop.default)
-        || (cat === 'php' && key === 'php' && prop.computed !== prop.default)
+        || (cat === 'php' && key === 'php' && prop.computed !== prop.default);
-        || (cat === 'reverseProxy' && key === 'reverseProxy' && prop.computed !== prop.default);
 };