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

.gitignore

@@ -466,3 +466,8 @@ conf/modules.inc.php
 conf/routers.inc.php
 conf/lang.inc.php
 logs/Exception.log
+
+
+z_dome/
+composer.lock
+adminer.php

composer.json

@@ -5,7 +5,13 @@
   "authors": [
     {
       "name": "Maurice Grönwoldt",
-      "email": "mauricegroenwoldt@gmail.com"
+      "email": "mauricegroenwoldt@gmail.com",
+      "description": "founder"
+    },
+    {
+      "name": "Dominic Seela",
+      "email": "kontakt@engineertrooper.com",
+      "description": "friendly developer, supporter"
     }
   ],
   "require": {

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'
     ])
 })();

src/Venom/Admin/Routes/TemplateLoader.php

@@ -4,6 +4,7 @@
 namespace Venom\Admin\Routes;
 
 use Venom\Core\ArgumentHandler;
+use Venom\Core\Config;
 use Venom\Helper\TemplateUtil;
 use Venom\Routing\Route;
 
@@ -11,8 +12,10 @@ class TemplateLoader implements Route
 {
     public function handle(): bool
     {
-        header('Expires: ' . gmdate('D, d M Y H:i:s \G\M\T', time() + (60 * 60 * 60 * 30)));
+        if (!Config::getInstance()->isDevMode()) {
-        header('Cache-Control: public');
+            header('Expires: ' . gmdate('D, d M Y H:i:s \G\M\T', time() + (60 * 60 * 60 * 30)));
+            header('Cache-Control: public');
+        }
         $id = ArgumentHandler::get()->getItem('tpl', '..');
         if (strpos($id, '..')) {
             return false;

src/Venom/Core/DatabaseHandler.php

@@ -49,7 +49,7 @@ class DatabaseHandler
         }
     }
 
-    public function getOne(string $query, array $args): ?DatabaseObject
+    public function getOne(string $query, array $args = []): ?DatabaseObject
     {
         $data = $this->getAll($query, $args);
         if (count($data) > 0) {
@@ -58,7 +58,7 @@ class DatabaseHandler
         return null;
     }
 
-    public function getAll(string $query, array $args): array
+    public function getAll(string $query, array $args = []): array
     {
         $stmt = $this->db->prepare($query);
         $stmt->setFetchMode(PDO::FETCH_CLASS, DatabaseObject::class);
@@ -66,7 +66,7 @@ class DatabaseHandler
         return $stmt->fetchAll();
     }
 
-    public function execute(string $query, array $args): bool
+    public function execute(string $query, array $args = []): bool
     {
         $stmt = $this->db->prepare($query);
         return $stmt->execute($args);

src/Venom/Helper/AdminHelper.php

@@ -6,7 +6,7 @@ namespace Venom\Helper;
 
 class AdminHelper
 {
-    public static function getResponse($content, bool $shouldReload = false, string $component = '', $extra = false)
+    public static function sendResponse($content, string $component = '', bool $shouldReload = false, $extra = false)
     {
         $response = [
             'content' => $content,

src/modules/MetaDataModule.php

@@ -0,0 +1,78 @@
+<?php
+
+
+namespace Modules;
+
+
+use Venom\Core\Config;
+use Venom\Core\Module;
+use Venom\Helper\AdminHelper;
+use Venom\Routing\Route;
+use Venom\Routing\Router;
+use Venom\Venom;
+
+class MetaDataModule implements Module, Route
+{
+
+    public function register(Venom $venom): bool
+    {
+        if (Config::getInstance()->isAdmin()) {
+            $this->registerAdminRoutes($venom);
+        }
+        return true;
+    }
+
+    public function init(): void
+    {
+    }
+
+    private function registerAdminRoutes(Venom $venom)
+    {
+        $venom->getRouter(Router::ADMIN_ROUTER)->addRoutes([
+            '/metaData' => [
+                'cl' => MetaDataModule::class,
+                'roles' => ['ROLE_ADMIN'],
+                'routes' => [
+                    '*' => [
+                        "GET" => 'get',
+                    ],
+                    '1' => [
+                        "GET" => 'getById',
+                        "POST" => 'update',
+                        "PUT" => 'insert',
+                    ]
+                ]
+            ]
+        ]);
+    }
+
+    public function get()
+    {
+        AdminHelper::sendResponse([
+            'metaData' => [
+                ['id' => 1, 'name' => 'engineertrooper', 'icon' => 'vt-edit'],
+                ['id' => 2, 'name' => 'versustunze', 'icon' => 'vt-edit']
+            ]
+        ]);
+    }
+
+    public function update(): bool
+    {
+        return false;
+    }
+
+    public function insert(): bool
+    {
+        return false;
+    }
+
+    public function getById($id)
+    {
+        AdminHelper::sendResponse([
+            'caseName' => 'ROLE_ADMIN',
+            'id' => $id,
+            'name' => 'Admin',
+            'icon' => 'vt-visibility',
+        ]);
+    }
+}

src/modules/OverviewModule.php

@@ -0,0 +1,81 @@
+<?php
+
+
+namespace Modules;
+
+
+use Venom\Core\Config;
+use Venom\Core\Module;
+use Venom\Helper\AdminHelper;
+use Venom\Routing\Route;
+use Venom\Routing\Router;
+use Venom\Venom;
+
+class OverviewModule implements Module, Route
+{
+
+    public function register(Venom $venom): bool
+    {
+        if (Config::getInstance()->isAdmin()) {
+            $this->registerAdminRoutes($venom);
+        }
+        return true;
+    }
+
+    public function init(): void
+    {
+    }
+
+    private function registerAdminRoutes(Venom $venom)
+    {
+        $venom->getRouter(Router::ADMIN_ROUTER)->addRoutes([
+            '/overview' => [
+                'cl' => OverviewModule::class,
+                'roles' => ['ROLE_ADMIN'],
+                'routes' => [
+                    '*' => [
+                        "GET" => 'get',
+                    ],
+                    '1' => [
+                        "GET" => 'getById',
+                        "POST" => 'update',
+                        "PUT" => 'insert',
+                    ]
+                ]
+            ]
+        ]);
+    }
+
+    public function get()
+    {
+        AdminHelper::sendResponse([
+            'pages' => [
+                ['id' => 1, 'name' => 'Flamingos going wild!', 'icon' => 'vt-edit'],
+                ['id' => 2, 'name' => 'Turbinen sind geil.', 'icon' => 'vt-edit'],
+                ['id' => 3, 'name' => 'Aufbau und Umbau des neuen VENOMs Plugins', 'icon' => 'vt-edit'],
+                ['id' => 4, 'name' => 'Aber Mama hat gesagt!', 'icon' => 'vt-edit'],
+                ['id' => 5, 'name' => 'Frische Fische nur heute!', 'icon' => 'vt-edit']
+            ]
+        ]);
+    }
+
+    public function update(): bool
+    {
+        return false;
+    }
+
+    public function insert(): bool
+    {
+        return false;
+    }
+
+    public function getById($id)
+    {
+        AdminHelper::sendResponse([
+            'caseName' => 'ROLE_ADMIN',
+            'id' => $id,
+            'name' => 'Admin',
+            'icon' => 'vt-visibility',
+        ]);
+    }
+}

src/modules/PageModule.php

@@ -0,0 +1,81 @@
+<?php
+
+
+namespace Modules;
+
+
+use Venom\Core\Config;
+use Venom\Core\Module;
+use Venom\Helper\AdminHelper;
+use Venom\Routing\Route;
+use Venom\Routing\Router;
+use Venom\Venom;
+
+class PageModule implements Module, Route
+{
+
+    public function register(Venom $venom): bool
+    {
+        if (Config::getInstance()->isAdmin()) {
+            $this->registerAdminRoutes($venom);
+        }
+        return true;
+    }
+
+    public function init(): void
+    {
+    }
+
+    private function registerAdminRoutes(Venom $venom)
+    {
+        $venom->getRouter(Router::ADMIN_ROUTER)->addRoutes([
+            '/pages' => [
+                'cl' => PageModule::class,
+                'roles' => ['ROLE_ADMIN'],
+                'routes' => [
+                    '*' => [
+                        "GET" => 'get',
+                    ],
+                    '1' => [
+                        "GET" => 'getById',
+                        "POST" => 'update',
+                        "PUT" => 'insert',
+                    ]
+                ]
+            ]
+        ]);
+    }
+
+    public function get()
+    {
+        AdminHelper::sendResponse([
+            'pages' => [
+                ['id' => 1, 'name' => 'Flamingos going wild!', 'icon' => 'vt-edit'],
+                ['id' => 2, 'name' => 'Turbinen sind geil.', 'icon' => 'vt-edit'],
+                ['id' => 3, 'name' => 'Aufbau und Umbau des neuen VENOMs Plugins', 'icon' => 'vt-edit'],
+                ['id' => 4, 'name' => 'Aber Mama hat gesagt!', 'icon' => 'vt-edit'],
+                ['id' => 5, 'name' => 'Frische Fische nur heute!', 'icon' => 'vt-edit']
+            ]
+        ]);
+    }
+
+    public function update(): bool
+    {
+        return false;
+    }
+
+    public function insert(): bool
+    {
+        return false;
+    }
+
+    public function getById($id)
+    {
+        AdminHelper::sendResponse([
+            'caseName' => 'ROLE_ADMIN',
+            'id' => $id,
+            'name' => 'Admin',
+            'icon' => 'vt-visibility',
+        ]);
+    }
+}

src/modules/RoleModule.php

@@ -5,6 +5,7 @@ namespace Modules;
 
 
 use Venom\Core\Config;
+use Venom\Core\DatabaseHandler;
 use Venom\Core\Module;
 use Venom\Helper\AdminHelper;
 use Venom\Routing\Route;
@@ -48,7 +49,8 @@ class RoleModule implements Module, Route
 
     public function get()
     {
-        AdminHelper::getResponse([
+        //$req = DatabaseHandler::get()->getAll("SELECT * FROM roles");
+        AdminHelper::sendResponse([
             'roles' => [
                 ['id' => 1, 'name' => 'Admin', 'icon' => 'vt-visibility'],
                 ['id' => 2, 'name' => 'Moderator', 'icon' => 'vt-edit'],
@@ -69,7 +71,7 @@ class RoleModule implements Module, Route
 
     public function getById($id)
     {
-        AdminHelper::getResponse([
+        AdminHelper::sendResponse([
             'caseName' => 'ROLE_ADMIN',
             'id' => $id,
             'name' => 'Admin',

src/modules/SeoUrlModule.php

@@ -0,0 +1,81 @@
+<?php
+
+
+namespace Modules;
+
+
+use Venom\Core\Config;
+use Venom\Core\Module;
+use Venom\Helper\AdminHelper;
+use Venom\Routing\Route;
+use Venom\Routing\Router;
+use Venom\Venom;
+
+class SeoUrlModule implements Module, Route
+{
+
+    public function register(Venom $venom): bool
+    {
+        if (Config::getInstance()->isAdmin()) {
+            $this->registerAdminRoutes($venom);
+        }
+        return true;
+    }
+
+    public function init(): void
+    {
+    }
+
+    private function registerAdminRoutes(Venom $venom)
+    {
+        $venom->getRouter(Router::ADMIN_ROUTER)->addRoutes([
+            '/seoUrl' => [
+                'cl' => SeoUrlModule::class,
+                'roles' => ['ROLE_ADMIN'],
+                'routes' => [
+                    '*' => [
+                        "GET" => 'get',
+                    ],
+                    '1' => [
+                        "GET" => 'getById',
+                        "POST" => 'update',
+                        "PUT" => 'insert',
+                    ]
+                ]
+            ]
+        ]);
+    }
+
+    public function get()
+    {
+        AdminHelper::sendResponse([
+            'pages' => [
+                ['id' => 1, 'name' => 'Flamingos going wild!', 'icon' => 'vt-edit'],
+                ['id' => 2, 'name' => 'Turbinen sind geil.', 'icon' => 'vt-edit'],
+                ['id' => 3, 'name' => 'Aufbau und Umbau des neuen VENOMs Plugins', 'icon' => 'vt-edit'],
+                ['id' => 4, 'name' => 'Aber Mama hat gesagt!', 'icon' => 'vt-edit'],
+                ['id' => 5, 'name' => 'Frische Fische nur heute!', 'icon' => 'vt-edit']
+            ]
+        ]);
+    }
+
+    public function update(): bool
+    {
+        return false;
+    }
+
+    public function insert(): bool
+    {
+        return false;
+    }
+
+    public function getById($id)
+    {
+        AdminHelper::sendResponse([
+            'caseName' => 'ROLE_ADMIN',
+            'id' => $id,
+            'name' => 'Admin',
+            'icon' => 'vt-visibility',
+        ]);
+    }
+}

src/modules/UserModule.php

@@ -0,0 +1,78 @@
+<?php
+
+
+namespace Modules;
+
+
+use Venom\Core\Config;
+use Venom\Core\Module;
+use Venom\Helper\AdminHelper;
+use Venom\Routing\Route;
+use Venom\Routing\Router;
+use Venom\Venom;
+
+class UserModule implements Module, Route
+{
+
+    public function register(Venom $venom): bool
+    {
+        if (Config::getInstance()->isAdmin()) {
+            $this->registerAdminRoutes($venom);
+        }
+        return true;
+    }
+
+    public function init(): void
+    {
+    }
+
+    private function registerAdminRoutes(Venom $venom)
+    {
+        $venom->getRouter(Router::ADMIN_ROUTER)->addRoutes([
+            '/users' => [
+                'cl' => UserModule::class,
+                'roles' => ['ROLE_ADMIN'],
+                'routes' => [
+                    '*' => [
+                        "GET" => 'get',
+                    ],
+                    '1' => [
+                        "GET" => 'getById',
+                        "POST" => 'update',
+                        "PUT" => 'insert',
+                    ]
+                ]
+            ]
+        ]);
+    }
+
+    public function get()
+    {
+        AdminHelper::sendResponse([
+            'users' => [
+                ['id' => 1, 'name' => 'engineertrooper', 'icon' => 'vt-edit'],
+                ['id' => 2, 'name' => 'versustunze', 'icon' => 'vt-edit']
+            ]
+        ]);
+    }
+
+    public function update(): bool
+    {
+        return false;
+    }
+
+    public function insert(): bool
+    {
+        return false;
+    }
+
+    public function getById($id)
+    {
+        AdminHelper::sendResponse([
+            'caseName' => 'ROLE_ADMIN',
+            'id' => $id,
+            'name' => 'Admin',
+            'icon' => 'vt-visibility',
+        ]);
+    }
+}

src/modules/VenomStatusModule.php

@@ -0,0 +1,78 @@
+<?php
+
+
+namespace Modules;
+
+
+use Venom\Core\Config;
+use Venom\Core\Module;
+use Venom\Helper\AdminHelper;
+use Venom\Routing\Route;
+use Venom\Routing\Router;
+use Venom\Venom;
+
+class VenomStatusModule implements Module, Route
+{
+
+    public function register(Venom $venom): bool
+    {
+        if (Config::getInstance()->isAdmin()) {
+            $this->registerAdminRoutes($venom);
+        }
+        return true;
+    }
+
+    public function init(): void
+    {
+    }
+
+    private function registerAdminRoutes(Venom $venom)
+    {
+        $venom->getRouter(Router::ADMIN_ROUTER)->addRoutes([
+            '/venomStatus' => [
+                'cl' => VenomStatusModule::class,
+                'roles' => ['ROLE_ADMIN'],
+                'routes' => [
+                    '*' => [
+                        "GET" => 'get',
+                    ],
+                    '1' => [
+                        "GET" => 'getById',
+                        "POST" => 'update',
+                        "PUT" => 'insert',
+                    ]
+                ]
+            ]
+        ]);
+    }
+
+    public function get()
+    {
+        AdminHelper::sendResponse([
+            'users' => [
+                ['id' => 1, 'name' => 'engineertrooper', 'icon' => 'vt-edit'],
+                ['id' => 2, 'name' => 'versustunze', 'icon' => 'vt-edit']
+            ]
+        ]);
+    }
+
+    public function update(): bool
+    {
+        return false;
+    }
+
+    public function insert(): bool
+    {
+        return false;
+    }
+
+    public function getById($id)
+    {
+        AdminHelper::sendResponse([
+            'caseName' => 'ROLE_ADMIN',
+            'id' => $id,
+            'name' => 'Admin',
+            'icon' => 'vt-visibility',
+        ]);
+    }
+}

tpl/admin/admin-panel.php

@@ -1,13 +1,13 @@
 <main>
     <nav class="menu">
         <h1 class="logo">Venom</h1>
-        <div data-link="">Meta Data</div>
+        <div data-link="/metaData">Meta Data</div>
-        <div data-link="" class="active">Overview</div>
+        <div data-link="/overview" class="active">Overview</div>
-        <div data-link="">Pages</div>
+        <div data-link="/pages">Pages</div>
         <div data-link="/roles">Roles</div>
-        <div data-link="">SEO-URL</div>
+        <div data-link="/seoUrl">SEO-URL</div>
-        <div data-link="">Users</div>
+        <div data-link="/users">Users</div>
-        <div data-link="">Venom-Status</div>
+        <div data-link="/venomStatus">Venom-Status</div>
         <div data-link="/admin/api/login/logout">Ausloggen</div>
     </nav>
     <div class="content-area">

tpl/admin/base.php

@@ -1,6 +1,7 @@
 <?php
 
 use Venom\Views\Asset;
+use Venom\Core\Config;
 
 ?>
 <!doctype html>
@@ -14,7 +15,7 @@ use Venom\Views\Asset;
     <?php Asset::get()->renderCSS(); ?>
     <!--link rel="stylesheet" href="/theme/admin/css/admin-panel.css"-->
 </head>
-<body>
+<body <?=Config::getInstance()->isDevMode() ? 'debug' : ''?>>
 <?php
 if (!$this->getVar('isLoggedIn')) {
     $this->renderTemplate('login');

tpl/admin/jsTemplates/includes/svg.tpl

@@ -1,3 +1,3 @@
-<svg role="img" class="icon">
+<svg role="img" class="icon ${class}">
-    <use href="/theme/admin/icon-sprite.svg#${icon}"></use>
+    <use href="/theme/admin/icon-sprite.svg#${icon}" xlink:href="/theme/admin/icon-sprite.svg#${icon}"></use>
 </svg>

tpl/admin/jsTemplates/includes/switch.tpl

@@ -0,0 +1,5 @@
+<v-switch data-id="${id}">
+    <input type="checkbox" required name="${name}">
+    <label></label>
+    <span>${desc}</span>
+</v-switch>

tpl/admin/jsTemplates/metaDataList.tpl

@@ -0,0 +1,5 @@
+<div class="meta-data">
+    <header>
+        <h2>Meta Data</h2>
+    </header>
+</div>

tpl/admin/jsTemplates/overview.tpl

@@ -0,0 +1,5 @@
+<div class="overview">
+    <header>
+        <h2>Overview</h2>
+    </header>
+</div>

tpl/admin/jsTemplates/pageEdit.tpl

@@ -0,0 +1,67 @@
+<div class="page-edit">
+    <header>
+        <h2>Page Edit</h2>
+    </header>
+    <div>
+        <span data-link="/pages" class="icon-text">
+        {include(includes/svg;class=back-arrow;icon=vt-arrow-back)}
+        </span>
+    </div>
+    <h3>Page Information</h3>
+    <div>
+        <v-input
+                class="input-group"
+                data-label="New Page Name"
+                required
+                name="newPageName"
+                data-error="New Page Name is required">
+        </v-input>
+    </div>
+    <div>
+        <v-select required name="pageVisibility">
+            <v-label empty="Current Author"></v-label>
+            <v-options>
+                <v-option value="engineertrooper">engineertrooper (Dominic Seela)</v-option>
+                <v-option value="versustunez">versustunez (Maurice Grönwoldt)</v-option>
+            </v-options>
+        </v-select>
+    </div>
+    <div>
+        <v-select required name="pageVisibility">
+            <v-label empty="Page Visibility"></v-label>
+            <v-options>
+                <v-option value="visible">Visible</v-option>
+                <v-option value="privat">Privat</v-option>
+            </v-options>
+        </v-select>
+    </div>
+    <div>
+        <v-editor name="pageTextArea" rows="25">!</v-editor>
+    </div>
+    <div
+    <div class="btn-line">
+        <div>
+            <button class="btn btn--valid">
+                <span class="btn-ripple"></span>
+                <span class="btn__content">Save</span>
+            </button>
+        </div>
+    </div>
+
+    <div class="btn-line">
+        <div>
+            <button class="btn btn--valid">
+                <span class="btn-ripple"></span>
+                <span class="btn__content">Save</span>
+            </button>
+            <button class="btn btn--primary">
+                <span class="btn-ripple"></span>
+                <span class="btn__content">Reset</span>
+            </button>
+            <button class="btn btn--warn">
+                <span class="btn-ripple"></span>
+                <span class="btn__content">Delete Page</span>
+            </button>
+        </div>
+    </div>
+</div>

tpl/admin/jsTemplates/pagesList.tpl

@@ -0,0 +1,22 @@
+<div class="pages-list">
+    <header>
+        <h2>Pages</h2>
+    </header>
+    <div>
+        <h3>Add new Page</h3>
+        {include(includes/input;label=New Page Name;name=newPageName;error=New Page Name is required;type=text)}
+        {include(includes/btn;type=primary;content=Add)}
+    </div>
+    <div>
+        <h3>All Pages</h3>
+        {foreach(pages as page,key)}
+        <div data-link="/pages" data-id="${page.id}">
+            <span class="icon-text">
+                {include(includes/svg;icon=$page.icon)}
+            </span>
+            <span>${page.name}</span>
+        </div>
+        {/for}
+    </div>
+</div>
+

tpl/admin/jsTemplates/roleEdit.tpl

@@ -0,0 +1,62 @@
+<div class="role-edit">
+    <header>
+        <h2>Role: ${roles.name}</h2>
+    </header>
+    <div>
+        <span data-link="/roles" class="icon-text">
+            {include(includes/svg;class=back-arrow;icon=vt-arrow-back)}
+        </span>
+    </div>
+    <div class="block">
+        <h3>Role Status</h3>
+        {include(includes/switch;id=${switch.id};name=permissionEditMetaData;desc=If enabled role is active.)}
+    </div>
+    <div class="block">
+        <h3>Role Name</h3>
+        <v-input
+                class="input-group"
+                data-label="Change Name"
+                required
+                name="roleName"
+                data-error="Role Name is required"></v-input>
+    </div>
+    <v-table>
+        <h3>Privileges</h3>
+        <v-table-row class="role-switches">
+            <div class="modules">
+                <h4>Module</h4>
+                <div>Meta-Data</div>
+                <div>Pages</div>
+                <div>Roles</div>
+                <div>SEO-URL</div>
+                <div>Users</div>
+                <div>VENOM-Status</div>
+            </div>
+            <div>
+                <h4>Edit</h4>
+                {include(includes/switch;id=${switch.id};name=permissionEditMetaData)}
+                {include(includes/switch;id=${switch.id};name=permissionEditPages)}
+                {include(includes/switch;id=${switch.id};name=permissionEditRoles)}
+                {include(includes/switch;id=${switch.id};name=permissionEditSeoUrl)}
+                {include(includes/switch;id=${switch.id};name=permissionEditUsers)}
+                {include(includes/switch;id=${switch.id};name=permissionEditVenomStatus)}
+            </div>
+            <div>
+                <h4>View</h4>
+                {include(includes/switch;id=${switch.id};name=permissionViewMetaData)}
+                {include(includes/switch;id=${switch.id};name=permissionViewPages)}
+                {include(includes/switch;id=${switch.id};name=permissionViewRoles)}
+                {include(includes/switch;id=${switch.id};name=permissionViewSeoUrl)}
+                {include(includes/switch;id=${switch.id};name=permissionViewUsers)}
+                {include(includes/switch;id=${switch.id};name=permissionViewVenomStatus)}
+            </div>
+        </v-table-row>
+    </v-table>
+    <div class="btn-line">
+        <div>
+            {include(includes/btn;type=valid;content=Save)}
+            {include(includes/btn;type=primary;content=Reset)}
+            {include(includes/btn;type=warn;content=Delete Role)}
+        </div>
+    </div>
+</div>

tpl/admin/jsTemplates/rolesList.tpl

@@ -1,23 +1,23 @@
-<v-table>
+<div class="roles-list">
-    <v-table-header>
+    <header>
         <h2>Roles</h2>
-    </v-table-header>
+    </header>
-    <v-table-row>
+    <div class="flexbox">
         <div>
             <h3>Overview</h3>
             {foreach(roles as role,key)}
-                <div data-link="/roles" data-id="${role.id}">
+            <div data-link="/roles" data-id="${role.id}">
                     <span class="icon-text">
                         {include(includes/svg;icon=$role.icon)}
                     </span>
-                    <span>${role.name}</span>
+                <span>${role.name}</span>
-                </div>
+            </div>
             {/for}
         </div>
         <div>
             <h3>Add new Role</h3>
-            {include(includes/input;label=New Role Name;name=newRoleame;error=New Role Name is required;type=text)}
+            {include(includes/input;label=New Role Name;name=newRoleName;error=New Role Name is required;type=text)}
             {include(includes/btn;type=primary;content=Add)}
         </div>
-    </v-table-row>
+    </div>
-</v-table>
+</div>

tpl/admin/jsTemplates/seoUrlEdit.tpl

@@ -0,0 +1,10 @@
+<div class="seo-url-list">
+    <header>
+        <h2>SEO Urls Edit</h2>
+    </header>
+    <div>
+    <span data-link="/seoUrl" class="icon-text">
+        {include(includes/svg;class=back-arrow;icon=vt-arrow-back)}
+    </span>
+    </div>
+</div>

tpl/admin/jsTemplates/seoUrlList.tpl

@@ -0,0 +1,5 @@
+<div class="seo-url-list">
+    <header>
+        <h2>SEO Urls</h2>
+    </header>
+</div>

tpl/admin/jsTemplates/userEdit.tpl

@@ -0,0 +1,96 @@
+<div class="users-edit">
+    <header>
+         <h2>User: engineertrooper</h2>
+    </header>
+<div>
+    <span data-link="/users" class="icon-text">
+        {include(includes/svg;class=back-arrow;icon=vt-arrow-back)}
+    </span>
+</div>
+<div>
+    <v-input
+            class="input-group"
+            data-label="Username"
+            required
+            name="newUserName"
+            data-error="New User Name is required">EngineerTrooper
+    </v-input>
+</div>
+<div>
+    <v-input
+            class="input-group"
+            data-label="Author Name"
+            required
+            name="newAuthorName"
+            data-error="Author Name is required">Dominic Seela
+    </v-input>
+</div>
+<div>
+    <v-input
+            class="input-group"
+            data-label="E-Mail"
+            required
+            name="newEMailAddress"
+            data-error="E-Mail Address is required">kontakt@engineertrooper.com
+    </v-input>
+</div>
+<div>
+    <v-input
+            class="input-group"
+            data-label="Password"
+            required
+            name="newPassword"
+            type="password"
+            data-error="Password is required">
+    </v-input>
+</div>
+<div>
+    <v-input
+            class="input-group"
+            data-label="Password (Repeat)"
+            required
+            name="newPasswordRepeat"
+            type="password"
+            data-error="Password is required">
+    </v-input>
+</div>
+<v-table>
+    <h3>Privileges</h3>
+    <v-table-row class="role-switches">
+        <div class="modules">
+            <h4>Module</h4>
+            <div>Meta-Data</div>
+            <div>Pages</div>
+            <div>Roles</div>
+            <div>SEO-URL</div>
+            <div>Users</div>
+            <div>VENOM-Status</div>
+        </div>
+        <div>
+            <h4>Edit</h4>
+            {include(includes/switch;id=${switch.id};name=permissionEditMetaData)}
+            {include(includes/switch;id=${switch.id};name=permissionEditPages)}
+            {include(includes/switch;id=${switch.id};name=permissionEditRoles)}
+            {include(includes/switch;id=${switch.id};name=permissionEditSeoUrl)}
+            {include(includes/switch;id=${switch.id};name=permissionEditUsers)}
+            {include(includes/switch;id=${switch.id};name=permissionEditVenomStatus)}
+        </div>
+        <div>
+            <h4>View</h4>
+            {include(includes/switch;id=${switch.id};name=permissionViewMetaData)}
+            {include(includes/switch;id=${switch.id};name=permissionViewPages)}
+            {include(includes/switch;id=${switch.id};name=permissionViewRoles)}
+            {include(includes/switch;id=${switch.id};name=permissionViewSeoUrl)}
+            {include(includes/switch;id=${switch.id};name=permissionViewUsers)}
+            {include(includes/switch;id=${switch.id};name=permissionViewVenomStatus)}
+        </div>
+    </v-table-row>
+</v-table>
+<div class="btn-line">
+    <div>
+        {include(includes/btn;type=valid;content=Save)}
+        {include(includes/btn;type=primary;content=Reset)}
+        {include(includes/btn;type=warn;content=Delete Role)}
+    </div>
+</div>
+</div>

tpl/admin/jsTemplates/usersList.tpl

@@ -0,0 +1,25 @@
+<div class="users-list">
+    <header>
+        <h2>Users</h2>
+    </header>
+</div>
+<div class="roles-list">
+    <div class="flexbox">
+        <div>
+            <h3>Overview</h3>
+            {foreach(users as user,key)}
+            <div data-link="/users" data-id="${user.id}">
+                    <span class="icon-text">
+                        {include(includes/svg;icon=$user.icon)}
+                    </span>
+                <span>${user.name}</span>
+            </div>
+            {/for}
+        </div>
+        <div>
+            <h3>Add new User</h3>
+            {include(includes/input;label=New User Name;name=newUserName;error=New User Name is required;type=text)}
+            {include(includes/btn;type=primary;content=Add)}
+        </div>
+    </div>
+</div>

tpl/admin/jsTemplates/venomStatus.tpl

@@ -0,0 +1,5 @@
+<div class="venom-status">
+    <header>
+        <h2>Venom Status</h2>
+    </header>
+</div>