adding

mix-manifest.json

@@ -2,6 +2,7 @@
     "/public/js/spritemap.js": "/public/js/spritemap.js",
     "/public/js/index.js": "/public/js/index.js",
     "/public/js/critical.js": "/public/js/critical.js",
+    "/public/js/dashboard.js": "/public/js/dashboard.js",
     "/public/css/index.css": "/public/css/index.css",
     "/public/css/demo.html": "/public/css/demo.html",
     "/public/css/IBMPlexMono-Bold.eot": "/public/css/IBMPlexMono-Bold.eot",

package-lock.json

@@ -7,9 +7,14 @@
       "license": "GPL",
       "dependencies": {
         "@tentakelfabrik/plain-ui": "^0.1.0",
+        "@tentakelfabrik/tiny-validator": "^2.0.0",
+        "axios": "^0.21.1",
+        "lodash.remove": "^4.7.0",
+        "riot": "^6.0.1",
         "turbolinks": "^5.2.0"
       },
       "devDependencies": {
+        "@riotjs/compiler": "^6.0.1",
         "@riotjs/webpack-loader": "^5.0.0",
         "cross-env": "^7.0.3",
         "laravel-mix": "^6.0.25",
@@ -516,7 +521,6 @@
       "version": "7.14.7",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.7.tgz",
       "integrity": "sha512-X67Z5y+VBJuHB/RjwECp8kSl5uYi0BvRbNeWqkaJCVh+LiTPl19WBUfG627psSgp9rSf6ojuXghQM3ha6qHHdA==",
-      "dev": true,
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -1776,6 +1780,82 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@riotjs/compiler": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@riotjs/compiler/-/compiler-6.0.1.tgz",
+      "integrity": "sha512-rMXD6Dh7C2EGEaIKnfuoCpQFaCeL2h6ZywLAYmiqedYU806gRpkjXCXNzoJatsD72FqVJ2gy5nFFs+HzuXoO8w==",
+      "dependencies": {
+        "@babel/parser": "^7.14.7",
+        "@riotjs/parser": "^4.3.1",
+        "@riotjs/util": "2.0.4",
+        "cssesc": "^3.0.0",
+        "cumpa": "^1.0.1",
+        "curri": "^1.0.1",
+        "dom-nodes": "^1.1.3",
+        "globals": "^13.10.0",
+        "recast": "^0.20.4",
+        "source-map": "^0.7.3"
+      }
+    },
+    "node_modules/@riotjs/compiler/node_modules/globals": {
+      "version": "13.10.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.10.0.tgz",
+      "integrity": "sha512-piHC3blgLGFjvOuMmWZX60f+na1lXFDhQXBf1UYp2fXPXqvEUbOhNwi6BsQ0bQishwedgnjkwv1d9zKf+MWw3g==",
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@riotjs/compiler/node_modules/source-map": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@riotjs/compiler/node_modules/type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@riotjs/dom-bindings": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@riotjs/dom-bindings/-/dom-bindings-6.0.0.tgz",
+      "integrity": "sha512-7FQoVSVUSjPapIaqIvopzRuMbpn8e5lDxCs3t2C8jtmL4zCKc1/FJ9/pKSYUkr0upr1x+tRgYbfjCejzB8aSvA==",
+      "dependencies": {
+        "@riotjs/util": "^2.0.4"
+      }
+    },
+    "node_modules/@riotjs/parser": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@riotjs/parser/-/parser-4.3.1.tgz",
+      "integrity": "sha512-ZUeAcey3ShAtquHBwuHFLrtPL1j0iEeXoOQoaZMaqVp15vq5UqOBxBcOVNfCXbr9ZbhnVCEEmek/9YFt5Ni8bA==",
+      "dependencies": {
+        "curri": "^1.0.1",
+        "dom-nodes": "^1.1.3"
+      },
+      "engines": {
+        "node": ">=4.2",
+        "npm": ">=3.0"
+      }
+    },
+    "node_modules/@riotjs/util": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@riotjs/util/-/util-2.0.4.tgz",
+      "integrity": "sha512-C+YpN8p30T1+qtuPaHS2uobRHG+EpQhtXsu+Ul7sOStb1PnqptXut2YHSffQ6Xlu+FoOlP/BcMu+RVYvzWPmkg=="
+    },
     "node_modules/@riotjs/webpack-loader": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/@riotjs/webpack-loader/-/webpack-loader-5.0.0.tgz",
@@ -1811,6 +1891,96 @@
         "reflex-grid": "^2.0.7"
       }
     },
+    "node_modules/@tentakelfabrik/tiny-validator": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@tentakelfabrik/tiny-validator/-/tiny-validator-2.0.0.tgz",
+      "integrity": "sha512-UrucY0JiqHhApjgBwJ9wrl7xm2U7UQBQV/OU99Ti+RlR3kIk2dGailFxdXWFr2+GI4qs1eZdbjU8gN2bacZ7CA==",
+      "dependencies": {
+        "form-serialize": "^0.7.2",
+        "riot": "^5.1.2",
+        "validate.js": "^0.13.1"
+      }
+    },
+    "node_modules/@tentakelfabrik/tiny-validator/node_modules/@riotjs/compiler": {
+      "version": "5.4.2",
+      "resolved": "https://registry.npmjs.org/@riotjs/compiler/-/compiler-5.4.2.tgz",
+      "integrity": "sha512-TFeSdF3WeEqpXf/Cy7dw3SjNmczKTqF4lBWfb1Fb2PJ/uSyxpFbxLI0+0LgHn6+EtqlqNhSvxsiKXEB26iwDsQ==",
+      "dependencies": {
+        "@babel/parser": "^7.14.1",
+        "@riotjs/parser": "^4.3.1",
+        "@riotjs/util": "2.0.2",
+        "cssesc": "^3.0.0",
+        "cumpa": "^1.0.1",
+        "curri": "^1.0.1",
+        "dom-nodes": "^1.1.3",
+        "globals": "^13.8.0",
+        "recast": "^0.20.4",
+        "source-map": "^0.7.3"
+      }
+    },
+    "node_modules/@tentakelfabrik/tiny-validator/node_modules/@riotjs/compiler/node_modules/@riotjs/util": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@riotjs/util/-/util-2.0.2.tgz",
+      "integrity": "sha512-1UYavIex5+5uH7vjOZ4o8j0Hm6Mwt9p1vZfdR8Jl7y0aSEzYmWVYJCP7KfOiU4EoVNuk3tBTW6ju2Ik4sf0coA=="
+    },
+    "node_modules/@tentakelfabrik/tiny-validator/node_modules/@riotjs/dom-bindings": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/@riotjs/dom-bindings/-/dom-bindings-5.1.3.tgz",
+      "integrity": "sha512-rQcXFzK5KveUUCVzpqU2MSjM8FydYgvQ0V0m2EJmyxGpxbiNINud0m4ffaU1+nWP9koevyjG80AX5drBkrXdyQ==",
+      "dependencies": {
+        "@riotjs/util": "^2.0.4"
+      }
+    },
+    "node_modules/@tentakelfabrik/tiny-validator/node_modules/globals": {
+      "version": "13.10.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.10.0.tgz",
+      "integrity": "sha512-piHC3blgLGFjvOuMmWZX60f+na1lXFDhQXBf1UYp2fXPXqvEUbOhNwi6BsQ0bQishwedgnjkwv1d9zKf+MWw3g==",
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@tentakelfabrik/tiny-validator/node_modules/riot": {
+      "version": "5.4.5",
+      "resolved": "https://registry.npmjs.org/riot/-/riot-5.4.5.tgz",
+      "integrity": "sha512-/nsRLereXUNZNuTRZyzC6/lz9FXUaEl/+d+xB0f8j1ZlDV1gkRdKo5t3Kxcg8EmRXfWFP6MIHQAtGpO2uLWN4g==",
+      "dependencies": {
+        "@riotjs/compiler": "^5.4.2",
+        "@riotjs/dom-bindings": "5.1.3",
+        "@riotjs/util": "^2.0.4",
+        "bianco.attr": "^1.0.0",
+        "bianco.query": "^1.0.0",
+        "cumpa": "^1.0.1",
+        "curri": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/@tentakelfabrik/tiny-validator/node_modules/source-map": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@tentakelfabrik/tiny-validator/node_modules/type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@trysound/sax": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.1.1.tgz",
@@ -2434,6 +2604,17 @@
         "inherits": "2.0.1"
       }
     },
+    "node_modules/ast-types": {
+      "version": "0.14.2",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.14.2.tgz",
+      "integrity": "sha512-O0yuUDnZeQDL+ncNGlJ78BiO4jnYI3bvMsD5prT0/nsgijG/LpNBIr63gTjVTNsiGkgQhiyCShTgxt8oXOrklA==",
+      "dependencies": {
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/async": {
       "version": "2.6.3",
       "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
@@ -2470,6 +2651,14 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+      "dependencies": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "node_modules/babel-loader": {
       "version": "8.2.2",
       "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.2.tgz",
@@ -2578,6 +2767,27 @@
       "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=",
       "dev": true
     },
+    "node_modules/bianco.attr": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/bianco.attr/-/bianco.attr-1.0.0.tgz",
+      "integrity": "sha512-ry700auBXrfRcn18wgOlDeCIAOy1HKnUrM96hc2xbzt4FQL+pfXTUGrt++gg9/rpp7JD4JUXi0X1OB7um+jm2w==",
+      "dependencies": {
+        "bianco.dom-to-array": "^0.0.10"
+      }
+    },
+    "node_modules/bianco.dom-to-array": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/bianco.dom-to-array/-/bianco.dom-to-array-0.0.10.tgz",
+      "integrity": "sha512-EFYkcEGPmIqatvh+6I2eF6/X4mDtEyGoBucqmudJ5qABbFOw3RPIWB913aLD1FTaux8pZtYzD/yvcwGJKSNgXg=="
+    },
+    "node_modules/bianco.query": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/bianco.query/-/bianco.query-1.0.0.tgz",
+      "integrity": "sha512-pDstv5+tsuw//wNuPnXuf4DjyN116tcH/a7hxbqH1OpWMsBgBkp/O29uxlWEZWN5e6hCaGajLNA9CAGTsgYeWw==",
+      "dependencies": {
+        "bianco.dom-to-array": "^0.0.10"
+      }
+    },
     "node_modules/big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
@@ -3656,7 +3866,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
       "bin": {
         "cssesc": "bin/cssesc"
       },
@@ -3752,6 +3961,16 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/cumpa": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/cumpa/-/cumpa-1.0.1.tgz",
+      "integrity": "sha512-Ew3sfG4cqvDFINS1VgdvLX1FIruhySlnP6DRLhB+1EjewiOzhJzKRKPEp/TCuo0RDisSFeuaDrk0S4Q8grF9CA=="
+    },
+    "node_modules/curri": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/curri/-/curri-1.0.1.tgz",
+      "integrity": "sha512-VwFb2MGqN0A1RPA0vSgDRSWc0c+V6N9yz8pVYJ9AXILAukRAyCZP5Sqp4VdOxgw1lT0t5oaplwIDT/ruF3Nz7Q=="
+    },
     "node_modules/debug": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
@@ -3937,6 +4156,11 @@
         "buffer-indexof": "^1.0.0"
       }
     },
+    "node_modules/dom-nodes": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dom-nodes/-/dom-nodes-1.1.3.tgz",
+      "integrity": "sha512-y5wnIx97oe0IqMllL/lizgkK2c9vu1cQeqPCCsS7mwNdPuYxg3b04eDJynHhC63kM8+ZsteOmiPElfVGOUmmKg=="
+    },
     "node_modules/dom-serializer": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
@@ -4251,7 +4475,6 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
       "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
-      "dev": true,
       "bin": {
         "esparse": "bin/esparse.js",
         "esvalidate": "bin/esvalidate.js"
@@ -4629,7 +4852,6 @@
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz",
       "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -4645,6 +4867,11 @@
         }
       }
     },
+    "node_modules/form-serialize": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/form-serialize/-/form-serialize-0.7.2.tgz",
+      "integrity": "sha1-sKL/DCICb7bT0VydM/beakMuRzI="
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -6128,6 +6355,11 @@
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
       "dev": true
     },
+    "node_modules/lodash.remove": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/lodash.remove/-/lodash.remove-4.7.0.tgz",
+      "integrity": "sha1-8x0x58OaBpDVB07A02JxYjNO5iY="
+    },
     "node_modules/lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -7960,6 +8192,28 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/recast": {
+      "version": "0.20.4",
+      "resolved": "https://registry.npmjs.org/recast/-/recast-0.20.4.tgz",
+      "integrity": "sha512-6qLIBGGRcwjrTZGIiBpJVC/NeuXpogXNyRQpqU1zWPUigCphvApoCs9KIwDYh1eDuJ6dAFlQoi/QUyE5KQ6RBQ==",
+      "dependencies": {
+        "ast-types": "0.14.2",
+        "esprima": "~4.0.0",
+        "source-map": "~0.6.1",
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/recast/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/rechoir": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.0.tgz",
@@ -8341,6 +8595,23 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/riot": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/riot/-/riot-6.0.1.tgz",
+      "integrity": "sha512-k5qsyJMclKq0/msDS9gtsSUU/dF/iz212KsBE5Wk9fcsPKNJ+eFdHytwD+2zJJghbhwTf3r0OHnj2MLyvJy8+Q==",
+      "dependencies": {
+        "@riotjs/compiler": "^6.0.1",
+        "@riotjs/dom-bindings": "6.0.0",
+        "@riotjs/util": "^2.0.4",
+        "bianco.attr": "^1.0.0",
+        "bianco.query": "^1.0.0",
+        "cumpa": "^1.0.1",
+        "curri": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/ripemd160": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.2.tgz",
@@ -9487,8 +9758,7 @@
     "node_modules/tslib": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
-      "dev": true
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
     },
     "node_modules/tty-browserify": {
       "version": "0.0.0",
@@ -9706,6 +9976,11 @@
       "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
       "dev": true
     },
+    "node_modules/validate.js": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/validate.js/-/validate.js-0.13.1.tgz",
+      "integrity": "sha512-PnFM3xiZ+kYmLyTiMgTYmU7ZHkjBZz2/+F0DaALc/uUtVzdCt1wAosvYJ5hFQi/hz8O4zb52FQhHZRC+uVkJ+g=="
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -10635,8 +10910,7 @@
     "@babel/parser": {
       "version": "7.14.7",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.7.tgz",
-      "integrity": "sha512-X67Z5y+VBJuHB/RjwECp8kSl5uYi0BvRbNeWqkaJCVh+LiTPl19WBUfG627psSgp9rSf6ojuXghQM3ha6qHHdA==",
-      "dev": true
+      "integrity": "sha512-X67Z5y+VBJuHB/RjwECp8kSl5uYi0BvRbNeWqkaJCVh+LiTPl19WBUfG627psSgp9rSf6ojuXghQM3ha6qHHdA=="
     },
     "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
       "version": "7.14.5",
@@ -11506,6 +11780,65 @@
         "fastq": "^1.6.0"
       }
     },
+    "@riotjs/compiler": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@riotjs/compiler/-/compiler-6.0.1.tgz",
+      "integrity": "sha512-rMXD6Dh7C2EGEaIKnfuoCpQFaCeL2h6ZywLAYmiqedYU806gRpkjXCXNzoJatsD72FqVJ2gy5nFFs+HzuXoO8w==",
+      "requires": {
+        "@babel/parser": "^7.14.7",
+        "@riotjs/parser": "^4.3.1",
+        "@riotjs/util": "2.0.4",
+        "cssesc": "^3.0.0",
+        "cumpa": "^1.0.1",
+        "curri": "^1.0.1",
+        "dom-nodes": "^1.1.3",
+        "globals": "^13.10.0",
+        "recast": "^0.20.4",
+        "source-map": "^0.7.3"
+      },
+      "dependencies": {
+        "globals": {
+          "version": "13.10.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-13.10.0.tgz",
+          "integrity": "sha512-piHC3blgLGFjvOuMmWZX60f+na1lXFDhQXBf1UYp2fXPXqvEUbOhNwi6BsQ0bQishwedgnjkwv1d9zKf+MWw3g==",
+          "requires": {
+            "type-fest": "^0.20.2"
+          }
+        },
+        "source-map": {
+          "version": "0.7.3",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ=="
+        },
+        "type-fest": {
+          "version": "0.20.2",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+          "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ=="
+        }
+      }
+    },
+    "@riotjs/dom-bindings": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@riotjs/dom-bindings/-/dom-bindings-6.0.0.tgz",
+      "integrity": "sha512-7FQoVSVUSjPapIaqIvopzRuMbpn8e5lDxCs3t2C8jtmL4zCKc1/FJ9/pKSYUkr0upr1x+tRgYbfjCejzB8aSvA==",
+      "requires": {
+        "@riotjs/util": "^2.0.4"
+      }
+    },
+    "@riotjs/parser": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@riotjs/parser/-/parser-4.3.1.tgz",
+      "integrity": "sha512-ZUeAcey3ShAtquHBwuHFLrtPL1j0iEeXoOQoaZMaqVp15vq5UqOBxBcOVNfCXbr9ZbhnVCEEmek/9YFt5Ni8bA==",
+      "requires": {
+        "curri": "^1.0.1",
+        "dom-nodes": "^1.1.3"
+      }
+    },
+    "@riotjs/util": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@riotjs/util/-/util-2.0.4.tgz",
+      "integrity": "sha512-C+YpN8p30T1+qtuPaHS2uobRHG+EpQhtXsu+Ul7sOStb1PnqptXut2YHSffQ6Xlu+FoOlP/BcMu+RVYvzWPmkg=="
+    },
     "@riotjs/webpack-loader": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/@riotjs/webpack-loader/-/webpack-loader-5.0.0.tgz",
@@ -11537,6 +11870,82 @@
         "reflex-grid": "^2.0.7"
       }
     },
+    "@tentakelfabrik/tiny-validator": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@tentakelfabrik/tiny-validator/-/tiny-validator-2.0.0.tgz",
+      "integrity": "sha512-UrucY0JiqHhApjgBwJ9wrl7xm2U7UQBQV/OU99Ti+RlR3kIk2dGailFxdXWFr2+GI4qs1eZdbjU8gN2bacZ7CA==",
+      "requires": {
+        "form-serialize": "^0.7.2",
+        "riot": "^5.1.2",
+        "validate.js": "^0.13.1"
+      },
+      "dependencies": {
+        "@riotjs/compiler": {
+          "version": "5.4.2",
+          "resolved": "https://registry.npmjs.org/@riotjs/compiler/-/compiler-5.4.2.tgz",
+          "integrity": "sha512-TFeSdF3WeEqpXf/Cy7dw3SjNmczKTqF4lBWfb1Fb2PJ/uSyxpFbxLI0+0LgHn6+EtqlqNhSvxsiKXEB26iwDsQ==",
+          "requires": {
+            "@babel/parser": "^7.14.1",
+            "@riotjs/parser": "^4.3.1",
+            "@riotjs/util": "2.0.2",
+            "cssesc": "^3.0.0",
+            "cumpa": "^1.0.1",
+            "curri": "^1.0.1",
+            "dom-nodes": "^1.1.3",
+            "globals": "^13.8.0",
+            "recast": "^0.20.4",
+            "source-map": "^0.7.3"
+          },
+          "dependencies": {
+            "@riotjs/util": {
+              "version": "2.0.2",
+              "resolved": "https://registry.npmjs.org/@riotjs/util/-/util-2.0.2.tgz",
+              "integrity": "sha512-1UYavIex5+5uH7vjOZ4o8j0Hm6Mwt9p1vZfdR8Jl7y0aSEzYmWVYJCP7KfOiU4EoVNuk3tBTW6ju2Ik4sf0coA=="
+            }
+          }
+        },
+        "@riotjs/dom-bindings": {
+          "version": "5.1.3",
+          "resolved": "https://registry.npmjs.org/@riotjs/dom-bindings/-/dom-bindings-5.1.3.tgz",
+          "integrity": "sha512-rQcXFzK5KveUUCVzpqU2MSjM8FydYgvQ0V0m2EJmyxGpxbiNINud0m4ffaU1+nWP9koevyjG80AX5drBkrXdyQ==",
+          "requires": {
+            "@riotjs/util": "^2.0.4"
+          }
+        },
+        "globals": {
+          "version": "13.10.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-13.10.0.tgz",
+          "integrity": "sha512-piHC3blgLGFjvOuMmWZX60f+na1lXFDhQXBf1UYp2fXPXqvEUbOhNwi6BsQ0bQishwedgnjkwv1d9zKf+MWw3g==",
+          "requires": {
+            "type-fest": "^0.20.2"
+          }
+        },
+        "riot": {
+          "version": "5.4.5",
+          "resolved": "https://registry.npmjs.org/riot/-/riot-5.4.5.tgz",
+          "integrity": "sha512-/nsRLereXUNZNuTRZyzC6/lz9FXUaEl/+d+xB0f8j1ZlDV1gkRdKo5t3Kxcg8EmRXfWFP6MIHQAtGpO2uLWN4g==",
+          "requires": {
+            "@riotjs/compiler": "^5.4.2",
+            "@riotjs/dom-bindings": "5.1.3",
+            "@riotjs/util": "^2.0.4",
+            "bianco.attr": "^1.0.0",
+            "bianco.query": "^1.0.0",
+            "cumpa": "^1.0.1",
+            "curri": "^1.0.1"
+          }
+        },
+        "source-map": {
+          "version": "0.7.3",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ=="
+        },
+        "type-fest": {
+          "version": "0.20.2",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+          "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ=="
+        }
+      }
+    },
     "@trysound/sax": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.1.1.tgz",
@@ -12098,6 +12507,14 @@
         }
       }
     },
+    "ast-types": {
+      "version": "0.14.2",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.14.2.tgz",
+      "integrity": "sha512-O0yuUDnZeQDL+ncNGlJ78BiO4jnYI3bvMsD5prT0/nsgijG/LpNBIr63gTjVTNsiGkgQhiyCShTgxt8oXOrklA==",
+      "requires": {
+        "tslib": "^2.0.1"
+      }
+    },
     "async": {
       "version": "2.6.3",
       "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
@@ -12121,6 +12538,14 @@
         "postcss-value-parser": "^4.1.0"
       }
     },
+    "axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "babel-loader": {
       "version": "8.2.2",
       "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.2.tgz",
@@ -12198,6 +12623,27 @@
       "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=",
       "dev": true
     },
+    "bianco.attr": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/bianco.attr/-/bianco.attr-1.0.0.tgz",
+      "integrity": "sha512-ry700auBXrfRcn18wgOlDeCIAOy1HKnUrM96hc2xbzt4FQL+pfXTUGrt++gg9/rpp7JD4JUXi0X1OB7um+jm2w==",
+      "requires": {
+        "bianco.dom-to-array": "^0.0.10"
+      }
+    },
+    "bianco.dom-to-array": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/bianco.dom-to-array/-/bianco.dom-to-array-0.0.10.tgz",
+      "integrity": "sha512-EFYkcEGPmIqatvh+6I2eF6/X4mDtEyGoBucqmudJ5qABbFOw3RPIWB913aLD1FTaux8pZtYzD/yvcwGJKSNgXg=="
+    },
+    "bianco.query": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/bianco.query/-/bianco.query-1.0.0.tgz",
+      "integrity": "sha512-pDstv5+tsuw//wNuPnXuf4DjyN116tcH/a7hxbqH1OpWMsBgBkp/O29uxlWEZWN5e6hCaGajLNA9CAGTsgYeWw==",
+      "requires": {
+        "bianco.dom-to-array": "^0.0.10"
+      }
+    },
     "big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
@@ -13082,8 +13528,7 @@
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
     },
     "cssnano": {
       "version": "5.0.6",
@@ -13149,6 +13594,16 @@
         "css-tree": "^1.1.2"
       }
     },
+    "cumpa": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/cumpa/-/cumpa-1.0.1.tgz",
+      "integrity": "sha512-Ew3sfG4cqvDFINS1VgdvLX1FIruhySlnP6DRLhB+1EjewiOzhJzKRKPEp/TCuo0RDisSFeuaDrk0S4Q8grF9CA=="
+    },
+    "curri": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/curri/-/curri-1.0.1.tgz",
+      "integrity": "sha512-VwFb2MGqN0A1RPA0vSgDRSWc0c+V6N9yz8pVYJ9AXILAukRAyCZP5Sqp4VdOxgw1lT0t5oaplwIDT/ruF3Nz7Q=="
+    },
     "debug": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
@@ -13303,6 +13758,11 @@
         "buffer-indexof": "^1.0.0"
       }
     },
+    "dom-nodes": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dom-nodes/-/dom-nodes-1.1.3.tgz",
+      "integrity": "sha512-y5wnIx97oe0IqMllL/lizgkK2c9vu1cQeqPCCsS7mwNdPuYxg3b04eDJynHhC63kM8+ZsteOmiPElfVGOUmmKg=="
+    },
     "dom-serializer": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
@@ -13546,8 +14006,7 @@
     "esprima": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
-      "dev": true
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
     },
     "esrecurse": {
       "version": "4.3.0",
@@ -13848,8 +14307,12 @@
     "follow-redirects": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz",
-      "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==",
-      "dev": true
+      "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg=="
+    },
+    "form-serialize": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/form-serialize/-/form-serialize-0.7.2.tgz",
+      "integrity": "sha1-sKL/DCICb7bT0VydM/beakMuRzI="
     },
     "forwarded": {
       "version": "0.2.0",
@@ -14951,6 +15414,11 @@
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
       "dev": true
     },
+    "lodash.remove": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/lodash.remove/-/lodash.remove-4.7.0.tgz",
+      "integrity": "sha1-8x0x58OaBpDVB07A02JxYjNO5iY="
+    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -16278,6 +16746,24 @@
         "picomatch": "^2.2.1"
       }
     },
+    "recast": {
+      "version": "0.20.4",
+      "resolved": "https://registry.npmjs.org/recast/-/recast-0.20.4.tgz",
+      "integrity": "sha512-6qLIBGGRcwjrTZGIiBpJVC/NeuXpogXNyRQpqU1zWPUigCphvApoCs9KIwDYh1eDuJ6dAFlQoi/QUyE5KQ6RBQ==",
+      "requires": {
+        "ast-types": "0.14.2",
+        "esprima": "~4.0.0",
+        "source-map": "~0.6.1",
+        "tslib": "^2.0.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
     "rechoir": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.0.tgz",
@@ -16569,6 +17055,20 @@
         "glob": "^7.1.3"
       }
     },
+    "riot": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/riot/-/riot-6.0.1.tgz",
+      "integrity": "sha512-k5qsyJMclKq0/msDS9gtsSUU/dF/iz212KsBE5Wk9fcsPKNJ+eFdHytwD+2zJJghbhwTf3r0OHnj2MLyvJy8+Q==",
+      "requires": {
+        "@riotjs/compiler": "^6.0.1",
+        "@riotjs/dom-bindings": "6.0.0",
+        "@riotjs/util": "^2.0.4",
+        "bianco.attr": "^1.0.0",
+        "bianco.query": "^1.0.0",
+        "cumpa": "^1.0.1",
+        "curri": "^1.0.1"
+      }
+    },
     "ripemd160": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.2.tgz",
@@ -17465,8 +17965,7 @@
     "tslib": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
-      "dev": true
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
     },
     "tty-browserify": {
       "version": "0.0.0",
@@ -17647,6 +18146,11 @@
       "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
       "dev": true
     },
+    "validate.js": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/validate.js/-/validate.js-0.13.1.tgz",
+      "integrity": "sha512-PnFM3xiZ+kYmLyTiMgTYmU7ZHkjBZz2/+F0DaALc/uUtVzdCt1wAosvYJ5hFQi/hz8O4zb52FQhHZRC+uVkJ+g=="
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",

package.json

@@ -7,9 +7,14 @@
   "license": "GPL",
   "dependencies": {
     "@tentakelfabrik/plain-ui": "^0.1.0",
+    "@tentakelfabrik/tiny-validator": "^2.0.0",
+    "axios": "^0.21.1",
+    "lodash.remove": "^4.7.0",
+    "riot": "^6.0.1",
     "turbolinks": "^5.2.0"
   },
   "devDependencies": {
+    "@riotjs/compiler": "^6.0.1",
     "@riotjs/webpack-loader": "^5.0.0",
     "cross-env": "^7.0.3",
     "laravel-mix": "^6.0.25",

public/css/index.css

@@ -14905,6 +14905,20 @@ input[type=checkbox].field-choice:checked ~ .field-switch:after {
     font-size: 2.7rem;
   }
 }
+/**
+ *
+ *
+ */
+.buckets__title {
+  font-size: 1.6rem;
+}
+.buckets__item {
+  transition: transform 0.2s;
+}
+.buckets__item a:hover {
+  color: var(--text);
+}
+
 .container--app {
   max-width: 100%;
   padding: 15px 30px;

resources/js/components/buckets.riot

@@ -1,25 +1,50 @@
 <app-buckets>
     <div class="buckets">
         <div class="grid">
-            <div class="col-12 col-md-4" each={ bucket in buckets }>
-                <a class="panel" href="/bucket/single/{ bucket.id }">
-                    { bucket.title }
-                </a>
+            <div class="col-12 col-md-4 col-xlg-3" each={ bucket in state.buckets }>
+                <article class="panel buckets__item">
+                    <div class="bar">
+                        <div class="bar__end w-100">
+                            <button class="button button--transparent" onclick={ (event) => { handleDelete(event, bucket) } }>
+                                <svg class="icon fill-text-contrast" aria-hidden="true">
+                                    <use xlink:href="/symbol-defs.svg#icon-delete"></use>
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="panel__body">
+                        <a href="/bucket/{ bucket._id }">
+                            <h3 class="buckets__title">
+                                { bucket.title }
+                            </h3>
+                            <div class="content">
+                                <p>
+                                    { bucket.description }
+                                </p>
+                            </div>
+                        </a>
+                    </div>
+                </article>
             </div>
         </div>
-        <div class="buckets__more">
-            <button type="button" class="button" onclick={ handleClick }>
-                More
-                <span class="icon is-small is-left">
-                    <svg aria-hidden="true">
-                        <use xlink:href="/symbol-defs.svg#icon-add-circle"></use>
-                    </svg>
-                </span>
-            </button>
+        <div class="grid">
+            <div class="col-12">
+                <div class="buckets__more">
+                    <button type="button" class="button" onclick={ handleClick }>
+                        More
+                        <svg class="icon" aria-hidden="true">
+                            <use xlink:href="/symbol-defs.svg#icon-arrow-down"></use>
+                        </svg>
+                    </button>
+                </div>
+            </div>
         </div>
     </div>
     <script>
 
+        import axios from 'axios'
+        import remove from 'lodash.remove'
+
         /**
          *
          *
@@ -29,8 +54,43 @@
          */
 
         export default {
+
+            state: {
+                buckets: []
+            },
+
+            onBeforeMount() {
+                this.fetch()
+            },
+
             handleClick() {
 
+            },
+
+            handleDelete(event, bucket) {
+                event.preventDefault()
+
+                axios.delete('/api/bucket/' + bucket._id)
+                    .then((response) => {
+
+                        // removing from buckets
+                        remove(this.state.buckets, function(b) {
+                            return b._id === bucket._id
+                        })
+
+                        this.update()
+                    })
+            },
+
+            fetch() {
+                axios.get('/api/bucket/', {
+                    params: {
+                        visiblity: this.props.visiblity
+                    }
+                }).then((response) => {
+                    this.state.buckets = response.data.data
+                    this.update()
+                })
             }
         }
 

resources/js/dashboard.js

@@ -0,0 +1,11 @@
+import AppBuckets from './components/buckets.riot'
+
+/**
+ *  Bucket
+ *
+ *
+ */
+
+// register components
+riot.register('app-buckets', AppBuckets)
+riot.mount('app-buckets')

resources/scss/components/_buckets.scss

@@ -0,0 +1,22 @@
+/**
+ *
+ *
+ */
+
+.buckets {
+
+    &__title {
+        font-size: 1.6rem;
+    }
+
+    &__item {
+        transition: transform 0.2s;
+
+        a {
+            &:hover {
+                color: var(--text);
+            }
+        }
+    }
+
+}

resources/scss/index.scss

@@ -1,5 +1,7 @@
 @import
     '../../node_modules/@tentakelfabrik/plain-ui/src/scss/plain-ui',
+
+    'components/buckets',
     'container';
 
 .turbolinks-progress-bar {

resources/views/layout.html

@@ -20,9 +20,12 @@
                 </div>
                 <div class="bar__main">
                     <div class="tabs tabs--contrast">
-                        <a href="/" class="tabs__item tabs__item--selected">
+                        <a href="/" data-turbolinks="false" class="tabs__item tabs__item--selected">
                             Dashboard
                         </a>
+                        <a href="/" class="tabs__item">
+                            Settings
+                        </a>
                     </div>
                 </div>
             </div>
@@ -32,5 +35,8 @@
             <%~ it.body %>
         </main>
 
+        <script type="text/javascript" src="/js/index.js" defer></script>
+        <script type="text/javascript" src="/js/dashboard.js" defer></script>
+
     </body>
 </html>

src/enums/bucket.ts

@@ -4,6 +4,7 @@ import Enum from 'https://deno.land/x/enum@v3.0.4/index.js'
 export const visibilties = new Enum([
     'PUBLIC',
     'COMMUNITY',
+    'GROUP',
     'PRIVATE'
 ], { freeze: true, name: 'visibilties' })
 

src/http/api/bucket.ts

@@ -1,7 +1,34 @@
 import { Router } from 'https://deno.land/x/opine@1.5.3/mod.ts'
 
+import { v4 } from "https://deno.land/std@0.99.0/uuid/mod.ts";
+import { validate, required, isIn, maxLength } from 'https://deno.land/x/validasaur@v0.15.0/mod.ts'
+
+import { Database } from 'https://deno.land/x/aloedb@0.9.0/mod.ts'
+import { BucketSchema } from './../../stores/bucket.ts'
+
+import { visibilties, types } from './../../enums/bucket.ts'
+
 const router = Router()
 
+/**
+ *
+ *
+ *  @param  request
+ *  @param  response
+ *  @return
+ */
+router.get('/', async function(request, response)
+{
+    const db = new Database<BucketSchema>('./storage/database/buckets.json')
+    const buckets = await db.findMany({
+        "type" : "1"
+    })
+
+    response.json({
+        data: buckets
+    })
+})
+
 /**
  *
  *
@@ -42,8 +69,24 @@ router.put('/:uuid', function(request, response, next) {
  *  @param  response
  *  @return
  */
-router.delete('/:uuid', function(request, response, next) {
+router.delete('/:uuid', async function(request, response, next)
+{
+    if (!v4.validate(request.params.uuid)) {
+        response.setStatus(404)
+    }
+
+    let result = false
+
+    const db = new Database<BucketSchema>('./storage/database/buckets.json')
+    const bucket = await db.deleteOne({ _id: request.params.uuid });
+
+    if (bucket) {
+        result = true
+    }
 
+    response.json({
+        'success': result
+    })
 })
 
 export default router

src/stores/bucket.ts

@@ -3,6 +3,7 @@ export interface BucketSchema {
     title: string;
     description: string;
     owner: string;
+    type: string;
     configuration: string[];
     visiblity: string;
     created_at: string;

webpack.mix.js

@@ -13,6 +13,17 @@ const SvgSpritemapPlugin = require('svg-spritemap-webpack-plugin')
  */
 
 mix.webpackConfig({
+    module: {
+        rules: [{
+            test: /\.riot$/,
+            use: [{
+                loader: '@riotjs/webpack-loader',
+                options: {
+                    hot: false
+                }
+            }]
+        }
+    ]},
     plugins: [
         new SvgSpritemapPlugin([
                 'node_modules/@tentakelfabrik/plain-ui/src/icons/mono-icons/svg/*.svg',
@@ -49,6 +60,7 @@ mix.options({
 mix
     .js('resources/js/index.js', 'public/js')
     .js('resources/js/critical.js', 'public/js')
+    .js('resources/js/dashboard.js', 'public/js')
     .sass('resources/scss/index.scss', 'public/css')
     .copy(
         'node_modules/@tentakelfabrik/plain-ui/src/fonts/*',