mirror of
				https://github.com/csharpee/nginxconfig.io.git
				synced 2025-10-30 00:02:37 -04:00 
			
		
		
		
	New data system
This commit is contained in:
		
							parent
							
								
									4c22ba571a
								
							
						
					
					
						commit
						e6b8d36068
					
				| @ -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> | ||||
|  | ||||
| @ -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"> | ||||
|                     <a @click="setTab(tab)">{{ tab }}</a> | ||||
|                 <li v-for="(_, key) in tabs" :class="key === tab ? 'is-active' : undefined"> | ||||
|                     <a @click="tab = key">{{ key }}{{ sectionChanges(key) }}</a> | ||||
|                 </li> | ||||
|             </ul> | ||||
|         </div> | ||||
|         <keep-alive> | ||||
|             <component :is="tabComponent" :ref="tabName"></component> | ||||
|         </keep-alive> | ||||
|         <component v-for="(component, key) in tabs" | ||||
|                    :is="component" | ||||
|                    :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], | ||||
|                 tabComponent: Object.values(Sections)[0], | ||||
|                 tabs: Object.keys(Sections), | ||||
|                 tab: Object.keys(Sections)[0], | ||||
|                 tabs: Sections, | ||||
|             }; | ||||
|         }, | ||||
|         methods: { | ||||
|             setTab(tab) { | ||||
|                 this.$data.tabName = tab; | ||||
|                 this.$data.tabComponent = Sections[tab]; | ||||
|             sectionChanges(key) { | ||||
|                 if (key in this.$refs && this.$refs[key] && this.$refs[key][0].changes) { | ||||
|                     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()); | ||||
|             }, | ||||
|         }, | ||||
|     }; | ||||
|  | ||||
| @ -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> | ||||
|  | ||||
| @ -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> | ||||
|  | ||||
| @ -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> | ||||
|  | ||||
| @ -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> | ||||
|  | ||||
| @ -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> | ||||
|  | ||||
| @ -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> | ||||
|  | ||||
| @ -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> | ||||
|  | ||||
| @ -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 Vuex from 'vuex'; | ||||
|     import i18n from '../../i18n'; | ||||
| 
 | ||||
|     Vue.use(Vuex); | ||||
| 
 | ||||
|     // Create the store of values | ||||
|     const store = new Vuex.Store({ | ||||
|         state: { | ||||
|             path: { | ||||
|                 default: '', | ||||
|             }, | ||||
|             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; | ||||
|     }); | ||||
|     const defaults = { | ||||
|         domain: 'example.com', | ||||
|         path: '', | ||||
|         documentRoot: '', | ||||
|         wwwSubdomain: false, | ||||
|         cdnSubdomain: false, | ||||
|         redirectSubdomains: true, | ||||
|     }; | ||||
| 
 | ||||
|     export default { | ||||
|         name: 'DomainServer', | ||||
|         store, | ||||
|         computed: { | ||||
|             ...Object.keys(store.state).reduce((prev, current) => { | ||||
|                 prev[current] = { | ||||
|                     get () { | ||||
|                         return this.$store.state[current].value; | ||||
|                     }, | ||||
|                     set (value) { | ||||
|                         this.$store.commit(`set${current.slice(0, 1).toUpperCase()}${current.slice(1)}`, value); | ||||
|                     }, | ||||
|                 }; | ||||
|                 return prev; | ||||
|             }, {}), | ||||
|         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> | ||||
|  | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user