New data system

src/nginxconfig/templates/app.vue

@@ -27,7 +27,20 @@ limitations under the License.
         </Header>
 
         <div class="main container">
-            <Domain></Domain>
+            <div class="tabs">
+                <ul>
+                    <li v-for="index in domains" :class="index === active ? 'is-active' : undefined">
+                        <a @click="active = index">{{ domainTitle(index) }}</a>
+                    </li>
+                </ul>
+            </div>
+
+            <template v-for="index in domains">
+                <Domain ref="domains"
+                        :key="index"
+                        :style="{ display: index === active ? 'block' : 'none' }"
+                ></Domain>
+            </template>
         </div>
 
         <Footer :text="i18n.templates.app.oss"></Footer>
@@ -35,26 +48,11 @@ limitations under the License.
 </template>
 
 <script>
-    import Vue from 'vue';
-    import Vuex from 'vuex';
     import i18n from '../i18n';
     import Header from 'do-vue/src/templates/header';
     import Footer from 'do-vue/src/templates/footer';
     import Domain from './domain';
 
-    Vue.use(Vuex);
-
-    const store = new Vuex.Store({
-        state: {
-            domains: {},
-        },
-        mutations: {
-            setDomain(state, domain, data) {
-                state.domains[domain] = data;
-            },
-        },
-    });
-
     export default {
         name: 'App',
         components: {
@@ -62,11 +60,20 @@ limitations under the License.
             Header,
             Footer,
         },
-        store,
         data() {
             return {
                 i18n,
+                domains: 1,
+                active: 1,
             };
         },
+        methods: {
+            domainTitle(index) {
+                if (this.$refs.domains) {
+                    const data = this.$refs.domains[index-1].export();
+                    return data.Server.domain;
+                }
+            },
+        },
     };
 </script>

src/nginxconfig/templates/domain.vue

@@ -18,14 +18,18 @@ limitations under the License.
     <div>
         <div class="tabs">
             <ul>
-                <li v-for="tab in tabs" :class="tabName === tab ? 'is-active' : undefined">
+                <li v-for="(_, key) in tabs" :class="key === tab ? 'is-active' : undefined">
-                    <a @click="setTab(tab)">{{ tab }}</a>
+                    <a @click="tab = key">{{ key }}{{ sectionChanges(key) }}</a>
                 </li>
             </ul>
         </div>
-        <keep-alive>
+        <component v-for="(component, key) in tabs"
-            <component :is="tabComponent" :ref="tabName"></component>
+                   :is="component"
-        </keep-alive>
+                   :ref="key"
+                   :key="key"
+                   :style="{ display: key === tab ? 'block' : 'none' }"
+        ></component>
+        <a class="button" @click="log">Log export data to console</a>
     </div>
 </template>
 
@@ -36,15 +40,39 @@ limitations under the License.
         name: 'Domain',
         data() {
             return {
-                tabName: Object.keys(Sections)[0],
+                tab: Object.keys(Sections)[0],
-                tabComponent: Object.values(Sections)[0],
+                tabs: Sections,
-                tabs: Object.keys(Sections),
             };
         },
         methods: {
-            setTab(tab) {
+            sectionChanges(key) {
-                this.$data.tabName = tab;
+                if (key in this.$refs && this.$refs[key] && this.$refs[key][0].changes) {
-                this.$data.tabComponent = Sections[tab];
+                    const changes = this.$refs[key][0].changes();
+                    if (changes) {
+                        return ` (${changes.toLocaleString()})`;
+                    }
+                }
+                return '';
+            },
+            changes() {
+                return Object.keys(Sections).reduce((prev, key) => {
+                    if (key in this.$refs && this.$refs[key] && this.$refs[key][0].changes) {
+                        prev += this.$refs[key][0].changes();
+                    }
+                    return prev;
+                }, 0);
+            },
+            exports () {
+                return Object.keys(Sections).reduce((prev, key) => {
+                    prev[key] = {};
+                    if (key in this.$refs && this.$refs[key] && this.$refs[key][0].exports) {
+                        prev[key] = this.$refs[key][0].exports();
+                    }
+                    return prev;
+                }, {});
+            },
+            log () {
+                console.log(this.exports());
             },
         },
     };

src/nginxconfig/templates/domain_sections/https.vue

@@ -3,7 +3,52 @@
 </template>
 
 <script>
+    import i18n from '../../i18n';
+
+    const defaults = {
+        https: true,
+        http2: true,
+        forceHttps: true,
+        hsts: true,
+        hstsSubdomains: true,
+        hstsPreload: true,
+        certType: 'letsEncrypt',
+        letsEncryptEmail: '',
+        sslCertificate: '',
+        sslCertificateKey: '',
+    };
+
     export default {
         name: 'DomainHTTPS',
+        props: {
+            data: Object,
+        },
+        data () {
+            return {
+                i18n,
+                defaults,
+                ...defaults,
+            };
+        },
+        created () {
+            if (this.$props.data) {
+                for (const key in this.$props.data) {
+                    if (key in defaults) {
+                        this.$data[key] = this.$props.data[key];
+                    }
+                }
+            }
+        },
+        methods: {
+            exports() {
+                return Object.keys(defaults).reduce((prev, key) => {
+                    prev[key] = this.$data[key];
+                    return prev;
+                }, {});
+            },
+        },
+        changes() {
+            return Object.keys(defaults).filter(key => defaults[key] !== this.$data[key]).length;
+        },
     };
 </script>

src/nginxconfig/templates/domain_sections/logging.vue

@@ -3,7 +3,44 @@
 </template>
 
 <script>
+    import i18n from '../../i18n';
+
+    const defaults = {
+        accessLog: false,
+        errorLog: false,
+    };
+
     export default {
         name: 'DomainLogging',
+        props: {
+            data: Object,
+        },
+        data () {
+            return {
+                i18n,
+                defaults,
+                ...defaults,
+            };
+        },
+        created () {
+            if (this.$props.data) {
+                for (const key in this.$props.data) {
+                    if (key in defaults) {
+                        this.$data[key] = this.$props.data[key];
+                    }
+                }
+            }
+        },
+        methods: {
+            exports() {
+                return Object.keys(defaults).reduce((prev, key) => {
+                    prev[key] = this.$data[key];
+                    return prev;
+                }, {});
+            },
+            changes() {
+                return Object.keys(defaults).filter(key => defaults[key] !== this.$data[key]).length;
+            },
+        },
     };
 </script>

src/nginxconfig/templates/domain_sections/php.vue

@@ -3,7 +3,46 @@
 </template>
 
 <script>
+    import i18n from '../../i18n';
+
+    const defaults = {
+        php: true,
+        wordPressRules: false,
+        drupalRules: false,
+        magentoRules: false,
+    };
+
     export default {
         name: 'DomainPHP',
+        props: {
+            data: Object,
+        },
+        data () {
+            return {
+                i18n,
+                defaults,
+                ...defaults,
+            };
+        },
+        created () {
+            if (this.$props.data) {
+                for (const key in this.$props.data) {
+                    if (key in defaults) {
+                        this.$data[key] = this.$props.data[key];
+                    }
+                }
+            }
+        },
+        methods: {
+            exports() {
+                return Object.keys(defaults).reduce((prev, key) => {
+                    prev[key] = this.$data[key];
+                    return prev;
+                }, {});
+            },
+        },
+        changes() {
+            return Object.keys(defaults).filter(key => defaults[key] !== this.$data[key]).length;
+        },
     };
 </script>

src/nginxconfig/templates/domain_sections/presets.vue

@@ -3,7 +3,50 @@
 </template>
 
 <script>
+    import i18n from '../../i18n';
+
+    const defaults = {
+        frontend: false,
+        php: true,
+        django: false,
+        nodejs: false,
+        singlePageApplication: false,
+        wordPress: false,
+        drupal: false,
+        magento: false,
+    };
+
     export default {
         name: 'DomainPresets',
+        props: {
+            data: Object,
+        },
+        data () {
+            return {
+                i18n,
+                defaults,
+                ...defaults,
+            };
+        },
+        created () {
+            if (this.$props.data) {
+                for (const key in this.$props.data) {
+                    if (key in defaults) {
+                        this.$data[key] = this.$props.data[key];
+                    }
+                }
+            }
+        },
+        methods: {
+            exports() {
+                return Object.keys(defaults).reduce((prev, key) => {
+                    prev[key] = this.$data[key];
+                    return prev;
+                }, {});
+            },
+            changes() {
+                return Object.keys(defaults).filter(key => defaults[key] !== this.$data[key]).length;
+            },
+        },
     };
 </script>

src/nginxconfig/templates/domain_sections/python.vue

@@ -3,7 +3,44 @@
 </template>
 
 <script>
+    import i18n from '../../i18n';
+
+    const defaults = {
+        python: false,
+        djangoRules: false,
+    };
+
     export default {
         name: 'DomainPython',
+        props: {
+            data: Object,
+        },
+        data () {
+            return {
+                i18n,
+                defaults,
+                ...defaults,
+            };
+        },
+        created () {
+            if (this.$props.data) {
+                for (const key in this.$props.data) {
+                    if (key in defaults) {
+                        this.$data[key] = this.$props.data[key];
+                    }
+                }
+            }
+        },
+        methods: {
+            exports() {
+                return Object.keys(defaults).reduce((prev, key) => {
+                    prev[key] = this.$data[key];
+                    return prev;
+                }, {});
+            },
+        },
+        changes() {
+            return Object.keys(defaults).filter(key => defaults[key] !== this.$data[key]).length;
+        },
     };
 </script>

src/nginxconfig/templates/domain_sections/reverse_proxy.vue

@@ -3,7 +3,45 @@
 </template>
 
 <script>
+    import i18n from '../../i18n';
+
+    const defaults = {
+        reverseProxy: false,
+        path: '/',
+        proxyPass: '',
+    };
+
     export default {
         name: 'DomainReverseProxy',
+        props: {
+            data: Object,
+        },
+        data () {
+            return {
+                i18n,
+                defaults,
+                ...defaults,
+            };
+        },
+        created () {
+            if (this.$props.data) {
+                for (const key in this.$props.data) {
+                    if (key in defaults) {
+                        this.$data[key] = this.$props.data[key];
+                    }
+                }
+            }
+        },
+        methods: {
+            exports() {
+                return Object.keys(defaults).reduce((prev, key) => {
+                    prev[key] = this.$data[key];
+                    return prev;
+                }, {});
+            },
+        },
+        changes() {
+            return Object.keys(defaults).filter(key => defaults[key] !== this.$data[key]).length;
+        },
     };
 </script>

src/nginxconfig/templates/domain_sections/routing.vue

@@ -3,7 +3,46 @@
 </template>
 
 <script>
+    import i18n from '../../i18n';
+
+    const defaults = {
+        root: true,
+        index: 'index.php',
+        fallbackRouting: ['index.php'],
+        legacyPhpRouting: false,
+    };
+
     export default {
         name: 'DomainRouting',
+        props: {
+            data: Object,
+        },
+        data () {
+            return {
+                i18n,
+                defaults,
+                ...defaults,
+            };
+        },
+        created () {
+            if (this.$props.data) {
+                for (const key in this.$props.data) {
+                    if (key in defaults) {
+                        this.$data[key] = this.$props.data[key];
+                    }
+                }
+            }
+        },
+        methods: {
+            exports() {
+                return Object.keys(defaults).reduce((prev, key) => {
+                    prev[key] = this.$data[key];
+                    return prev;
+                }, {});
+            },
+            changes() {
+                return Object.keys(defaults).filter(key => defaults[key] !== this.$data[key]).length;
+            },
+        },
     };
 </script>

src/nginxconfig/templates/domain_sections/server.vue

@@ -1,71 +1,53 @@
 <template>
-    <div>Hello world server</div>
+    <div>
+        Hello world server
+        <input type="text" v-model="domain" />
+    </div>
 </template>
 
 <script>
-    import Vue from 'vue';
+    import i18n from '../../i18n';
-    import Vuex from 'vuex';
 
-    Vue.use(Vuex);
+    const defaults = {
-
+        domain: 'example.com',
-    // Create the store of values
+        path: '',
-    const store = new Vuex.Store({
+        documentRoot: '',
-        state: {
+        wwwSubdomain: false,
-            path: {
+        cdnSubdomain: false,
-                default: '',
+        redirectSubdomains: true,
-            },
+    };
-            documentRoot: {
-                default: '',
-            },
-            wwwSubdomain: {
-                default: false,
-            },
-            cdnSubdomain: {
-                default: false,
-            },
-            redirectSubdomains: {
-                default: true,
-            },
-        },
-        mutations: {
-            setPath(state, value) {
-                state.path.value = value;
-            },
-            setDocumentRoot(state, value) {
-                state.documentRoot.value = value;
-            },
-            setWwwSubdomain(state, value) {
-                state.wwwSubdomain.value = value;
-            },
-            setCdnSubdomain(state, value) {
-                state.cdnSubdomain.value = value;
-            },
-            setRedirectSubdomains(state, value) {
-                state.redirectSubdomains.value = value;
-            },
-        },
-    });
-
-    // Set the values to defaults
-    Object.keys(store.state).forEach(key => {
-        store.state[key].value = store.state[key].value || store.state[key].default;
-    });
 
     export default {
         name: 'DomainServer',
-        store,
+        props: {
-        computed: {
+            data: Object,
-            ...Object.keys(store.state).reduce((prev, current) => {
+        },
-                prev[current] = {
+        data () {
-                    get () {
+            return {
-                        return this.$store.state[current].value;
+                i18n,
-                    },
+                defaults,
-                    set (value) {
+                ...defaults,
-                        this.$store.commit(`set${current.slice(0, 1).toUpperCase()}${current.slice(1)}`, value);
+            };
-                    },
+        },
-                };
+        created () {
-                return prev;
+            if (this.$props.data) {
-            }, {}),
+                for (const key in this.$props.data) {
+                    if (key in defaults) {
+                        this.$data[key] = this.$props.data[key];
+                    }
+                }
+            }
+        },
+        methods: {
+            exports() {
+                return Object.keys(defaults).reduce((prev, key) => {
+                    prev[key] = this.$data[key];
+                    return prev;
+                }, {});
+            },
+            changes() {
+                return Object.keys(defaults).filter(key => defaults[key] !== this.$data[key]).length;
+            },
         },
     };
 </script>