VENOM-10: added files x.tpl, x.php Modules

public/theme/admin/css/admin-panel.css

@@ -1 +1 @@
-main{display:flex;height:100vh;overflow:hidden}.menu{width:220px;background-color:#1b1b1b;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);flex-shrink:0;display:flex;flex-direction:column}.menu .logo{text-align:center;font-family:monospace}.menu div[data-link]{padding:.75rem .5rem;position:relative}.menu div[data-link]:after{background-color:#3949ab;content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;transform:scaleX(0);transition:transform .4s;transform-origin:left}.menu div[data-link]:hover:after{transform:scaleX(1)}.menu div[data-link]:last-child{margin-top:auto}.menu div[data-link].active{font-weight:700}.content-area{padding:0 1%;margin:1rem 1.5rem;flex-grow:1;overflow-y:auto;width:100%;max-height:100%;background:rgba(27,27,27,.5)}.content-area .inline{display:inline}.content-area .inline div{display:inline}.content-area .btn-line{margin-top:35px}.content-area .btn-line div{text-align:right}.content-area .btn-line div button{display:inline;margin-left:10px;min-width:100px}.content-area textarea{background:rgba(27,27,27,.5);color:#fff;margin:15px 0 0 0;font-family:sans-serif;font-size:1.1rem;min-width:100%}.content-area .modules div{padding:6px 20px 6px 0}.content-area .fix-pad{padding-top:14px}
+main{display:flex;height:100vh;overflow:hidden}.menu{width:220px;background-color:#1b1b1b;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);flex-shrink:0;display:flex;flex-direction:column}.menu .logo{text-align:center;font-family:monospace}.menu div[data-link]{padding:.75rem .5rem;position:relative}.menu div[data-link]:after{background-color:#3949ab;content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;transform:scaleX(0);transition:transform .4s;transform-origin:left}.menu div[data-link]:hover:after{transform:scaleX(1)}.menu div[data-link]:last-child{margin-top:auto}.menu div[data-link].active{font-weight:700}.content-area{padding:0 1%;margin:1rem 1.5rem;flex-grow:1;overflow-y:auto;width:100%;max-height:100%;background:rgba(27,27,27,.5)}.content-area header{display:block;text-align:center}.content-area .back-arrow{width:36px;height:36px}.content-area .block{display:block}.content-area .flexbox{display:flex;flex-wrap:wrap}.content-area .flexbox div{width:50%}.content-area .inline{display:inline}.content-area .inline div{display:inline}.content-area .btn-line{margin-top:35px}.content-area .btn-line div{text-align:right}.content-area .btn-line div button{display:inline;margin-left:10px;min-width:100px}.content-area .role-edit .block{margin:40px 0}.content-area .role-edit .role-switches h4{padding:0 5px}.content-area .role-edit .role-switches div v-switch{padding:10px 5px;border-bottom:#5d5d5d 1px solid}.content-area .role-edit .role-switches .modules div{padding:14px 5px 8px 5px}.content-area textarea{background:rgba(27,27,27,.5);color:#fff;margin:15px 0 0 0;font-family:sans-serif;font-size:1.1rem;min-width:100%}.content-area .modules div{padding:6px 20px 6px 0}.content-area .fix-pad{padding-top:14px}

public/theme/admin/js/components.js

@@ -23,6 +23,66 @@ class Component {
         }
     }
 }
+class MetaDataComponent extends Component {
+    constructor() {
+        super("/metaData");
+        this.tpl = "metaDataList";
+        this.tpl2 = "metaDataEdit";
+        this._url = "/admin/api/metaData";
+    }
+
+    async handle(data, ds) {
+        let meTpl = ds.id ? this.tpl2 : this.tpl;
+        await tpl.loadTemplate(meTpl);
+        return await tpl.renderOn(meTpl, data.content);
+    }
+
+    getUrl(ds) {
+        let url = this._url;
+        if (ds.id) {
+            url += '/' + ds.id;
+        }
+        return url;
+    }
+}
+class OverviewComponent extends Component {
+    constructor() {
+        super("/overview");
+        this.tpl = "overview";
+        this._url = "/admin/api/overview";
+    }
+
+    async handle(data, ds) {
+        await tpl.loadTemplate(this.tpl);
+        return await tpl.renderOn(this.tpl, data.content);
+    }
+
+    getUrl(ds) {
+        return this._url;
+    }
+}
+class PagesComponent extends Component {
+    constructor() {
+        super("/pages");
+        this.tpl = "pagesList";
+        this.tpl2 = "pageEdit";
+        this._url = "/admin/api/pages";
+    }
+
+    async handle(data, ds) {
+        let meTpl = ds.id ? this.tpl2 : this.tpl;
+        await tpl.loadTemplate(meTpl);
+        return await tpl.renderOn(meTpl, data.content);
+    }
+
+    getUrl(ds) {
+        let url = this._url;
+        if (ds.id) {
+            url += '/' + ds.id;
+        }
+        return url;
+    }
+}
 class RolesComponent extends Component {
     constructor() {
         super("/roles");
@@ -45,9 +105,76 @@ class RolesComponent extends Component {
         return url;
     }
 }
+class SeoUrlComponent extends Component {
+    constructor() {
+        super("/seoUrl");
+        this.tpl = "seoUrlList";
+        this.tpl2 = "seoUrlEdit";
+        this._url = "/admin/api/seoUrl";
+    }
+
+    async handle(data, ds) {
+        let meTpl = ds.id ? this.tpl2 : this.tpl;
+        await tpl.loadTemplate(meTpl);
+        return await tpl.renderOn(meTpl, data.content);
+    }
+
+    getUrl(ds) {
+        let url = this._url;
+        if (ds.id) {
+            url += '/' + ds.id;
+        }
+        return url;
+    }
+}
+class UsersComponent extends Component {
+    constructor() {
+        super("/users");
+        this.tpl = "usersList";
+        this.tpl2 = "userEdit";
+        this._url = "/admin/api/users";
+    }
+
+    async handle(data, ds) {
+        let meTpl = ds.id ? this.tpl2 : this.tpl;
+        await tpl.loadTemplate(meTpl);
+        return await tpl.renderOn(meTpl, data.content);
+    }
+
+    getUrl(ds) {
+        let url = this._url;
+        if (ds.id) {
+            url += '/' + ds.id;
+        }
+        return url;
+    }
+}
+class VenomStatusComponent extends Component {
+    constructor() {
+        super("/venomStatus");
+        this.tpl = "venomStatus";
+        this._url = "/admin/api/venomStatus";
+    }
+
+    async handle(data, ds) {
+        await tpl.loadTemplate(this.tpl);
+        return await tpl.renderOn(this.tpl, data.content);
+    }
+
+    getUrl(ds) {
+        return this._url;
+    }
+}
 (() => {
     // init all Components ;)
+    new MetaDataComponent();
+    new OverviewComponent();
+    new PagesComponent();
     new RolesComponent();
+    new SeoUrlComponent();
+    new UsersComponent();
+    new VenomStatusComponent();
+
 
     if (routerIsReady) {
         document.body.dispatchEvent(new CustomEvent('triggerRouter'));

public/theme/admin/js/components.min.js

@@ -1 +1 @@
-class Component{constructor(t){this.name=t,this.start()}handle(t,e){}init(){}getUrl(t){return""}start(){window.routerIsReady?(router.addComponent(this.name||VUtils.tempId(),this),this.init()):window.addEventListener("routerReady",this.start.bind(this))}}class RolesComponent extends Component{constructor(){super("/roles"),this.tpl="rolesList",this.tpl2="roleEdit",this._url="/admin/api/roles"}async handle(t,e){let n=e.id?this.tpl2:this.tpl;return await tpl.loadTemplate(n),await tpl.renderOn(n,t.content)}getUrl(t){let e=this._url;return t.id&&(e+="/"+t.id),e}}new RolesComponent,routerIsReady?document.body.dispatchEvent(new CustomEvent("triggerRouter")):document.addEventListener("routerReady",t=>{document.body.dispatchEvent(new CustomEvent("triggerRouter"))});
+class Component{constructor(t){this.name=t,this.start()}handle(t,e){}init(){}getUrl(t){return""}start(){window.routerIsReady?(router.addComponent(this.name||VUtils.tempId(),this),this.init()):window.addEventListener("routerReady",this.start.bind(this))}}class MetaDataComponent extends Component{constructor(){super("/metaData"),this.tpl="metaDataList",this.tpl2="metaDataEdit",this._url="/admin/api/metaData"}async handle(t,e){let n=e.id?this.tpl2:this.tpl;return await tpl.loadTemplate(n),await tpl.renderOn(n,t.content)}getUrl(t){let e=this._url;return t.id&&(e+="/"+t.id),e}}class OverviewComponent extends Component{constructor(){super("/overview"),this.tpl="overview",this._url="/admin/api/overview"}async handle(t,e){return await tpl.loadTemplate(this.tpl),await tpl.renderOn(this.tpl,t.content)}getUrl(t){return this._url}}class PagesComponent extends Component{constructor(){super("/pages"),this.tpl="pagesList",this.tpl2="pageEdit",this._url="/admin/api/pages"}async handle(t,e){let n=e.id?this.tpl2:this.tpl;return await tpl.loadTemplate(n),await tpl.renderOn(n,t.content)}getUrl(t){let e=this._url;return t.id&&(e+="/"+t.id),e}}class RolesComponent extends Component{constructor(){super("/roles"),this.tpl="rolesList",this.tpl2="roleEdit",this._url="/admin/api/roles"}async handle(t,e){let n=e.id?this.tpl2:this.tpl;return await tpl.loadTemplate(n),await tpl.renderOn(n,t.content)}getUrl(t){let e=this._url;return t.id&&(e+="/"+t.id),e}}class SeoUrlComponent extends Component{constructor(){super("/seoUrl"),this.tpl="seoUrlList",this.tpl2="seoUrlEdit",this._url="/admin/api/seoUrl"}async handle(t,e){let n=e.id?this.tpl2:this.tpl;return await tpl.loadTemplate(n),await tpl.renderOn(n,t.content)}getUrl(t){let e=this._url;return t.id&&(e+="/"+t.id),e}}class UsersComponent extends Component{constructor(){super("/users"),this.tpl="usersList",this.tpl2="userEdit",this._url="/admin/api/users"}async handle(t,e){let n=e.id?this.tpl2:this.tpl;return await tpl.loadTemplate(n),await tpl.renderOn(n,t.content)}getUrl(t){let e=this._url;return t.id&&(e+="/"+t.id),e}}class VenomStatusComponent extends Component{constructor(){super("/venomStatus"),this.tpl="venomStatus",this._url="/admin/api/venomStatus"}async handle(t,e){return await tpl.loadTemplate(this.tpl),await tpl.renderOn(this.tpl,t.content)}getUrl(t){return this._url}}new MetaDataComponent,new OverviewComponent,new PagesComponent,new RolesComponent,new SeoUrlComponent,new UsersComponent,new VenomStatusComponent,routerIsReady?document.body.dispatchEvent(new CustomEvent("triggerRouter")):document.addEventListener("routerReady",t=>{document.body.dispatchEvent(new CustomEvent("triggerRouter"))});

public/theme/admin/js/scripts.js

@@ -476,7 +476,17 @@ class FormHandler {
         }
     }
 
+    class VSwitch extends HTMLElement {
+        constructor() {
+            super();
+            const id = this.dataset.id || VUtils.tempId();
+            $('input', this).id = id;
+            $('label', this).setAttribute('for', id);
+        }
+    }
+
     customElements.define("v-input", VInput);
+    customElements.define("v-switch", VSwitch);
 
     if ($('#login')) {
         new FormHandler('form#login', 'body', () => {
@@ -685,7 +695,8 @@ class FormHandler {
                 });
             })
             document.body.addEventListener('triggerRouter', e => {
-                this.handle(sessionStorage.getItem('url'));
+                let storage = sessionStorage.getItem('url') || JSON.stringify({data: {link: $('[data-link].active').dataset.link}});
+                this.handle(storage);
             })
             window.addEventListener('popstate', e => {
                 this.handle(e.state);
@@ -1157,7 +1168,7 @@ class VTpeLTemplate {
 
     parseContent(cache) {
         if (cache) {
-            let storage = localStorage.getItem(this.name);
+            let storage = localStorage.getItem("vtepl-"+this.name);
             if (storage) {
                 this.parser.parsed = JSON.parse(storage);
                 return;
@@ -1165,7 +1176,7 @@ class VTpeLTemplate {
         }
         this.parser.tokenize();
         if (cache) {
-            localStorage.setItem(this.name, JSON.stringify(this.parser.parsed));
+            localStorage.setItem("vtepl-"+this.name, JSON.stringify(this.parser.parsed));
         }
     }
 }
@@ -1181,5 +1192,6 @@ class VTpeLTemplate {
         'includes/input',
         'includes/select',
         'includes/svg',
+        'includes/switch'
     ])
 })();