diff --git a/client/public/components/components.js b/client/public/components/components.js
index c951e3c..893ed79 100644
--- a/client/public/components/components.js
+++ b/client/public/components/components.js
@@ -2,13 +2,34 @@ async function sideLoad(path) {
return await fetch(path).then(response => response.text());
}
-class Component extends HTMLElement {
+const Components = [];
+
+export function RegisterComponent(name, component) {
+ customElements.define(`${name}-component`, component);
+ Components[name] = component;
+}
+
+export function UpdateComponent(name) {
+
+}
+
+export default class BaseComponent extends HTMLElement {
+ constructor() {
+ super();
+ this.attachShadow({ mode: 'open' });
+ }
+
+
+ async attatchTemplate(path) {
+ const template = await sideLoad(path);
+ this.shadowRoot.innerHTML = template;
+ }
}
// other components with behaviour go here
// non-generic components
-class LoadingComponent extends Component {
+class LoadingComponent extends BaseComponent {
async connectedCallback() {
}
@@ -16,6 +37,7 @@ class LoadingComponent extends Component {
customElements.define('loading-component', LoadingComponent);
+
// some not-so-scalable way to load all the generic template-like components
async function loadComponents() {
// because of "sECuRItY" i can't simply just find everything in the components folder
@@ -36,7 +58,7 @@ async function loadComponents() {
const scriptPath = `./components/${components[i]}/${components[i]}.js`;
const scriptComponent = await sideLoad(scriptPath);
- const Template = class extends Component {
+ const Template = class extends HTMLElement {
connectedCallback() {
// TODO: THIS NEEDS DOCUMENTATION / REFACTORING
// make a kinda generic way to do this
diff --git a/client/public/components/notification-bar.js b/client/public/components/notification-bar.js
new file mode 100644
index 0000000..883379b
--- /dev/null
+++ b/client/public/components/notification-bar.js
@@ -0,0 +1,166 @@
+import BaseComponent from './components.js';
+
+export default class NotificationBarComponent extends BaseComponent {
+ constructor() {
+ super();
+ this.attachShadow({ mode: 'open' });
+ }
+
+ render() {
+ this.html = `
+ `;
+ }
+
+ attatchStyle() {
+ return `
+ .notification-bar {
+ display: inline-block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 2em;
+ background-color: #00B4F5;
+ box-shadow: #222 0px 0px 5px;
+ transition: all 0.3s ease-in;
+ }
+
+ .notification-bar-text {
+ font-family: 'Josefin Sans', sans-serif;
+ text-transform: uppercase;
+ text-align: center;
+ color: #fff;
+ padding: 0px 1em;
+ height: 100%;
+ line-height: 35px;
+ font-size: 1.3em;
+ font-weight: bold;
+ text-align: center;
+ }
+
+ .notification-bar-close {
+ display: inline-block;
+ padding: 0px 1em;
+ height: 100%;
+ line-height: 2em;
+ color: #fff;
+ font-size: 1.5em;
+ font-weight: bold;
+ text-align: center;
+ font-family: 'Open Sans', sans-serif;
+ }
+
+ .notification-bar-close:hover {
+ color: #fff;
+ }
+
+ .notification-bar-close:focus {
+ outline: none;
+ }
+
+ .notification-bar-close:active {
+ color: #fff;
+ }
+
+ .notification-bar-close:hover {
+ color: #fff;
+ }
+
+ .notification-bar-close:focus {
+ outline: none;
+ }
+
+ .notification-toggler {
+ position: absolute;
+ right: 2px;
+ top: 2px;
+ background: transparent;
+ border: none;
+ cursor: pointer;
+ outline: none;
+ height: 2em;
+ width: 2em;
+ z-index: 100;
+ transition: all 0.2s ease-in;
+ }
+
+ .cross-line {
+ background: #222;
+ box-shadow: #222 0px 0px 2px;
+ position: absolute;
+ height: 2px;
+ left: 0;
+ width: 100%;
+ }
+
+ #notification-toggler:hover .cross-line {
+ background: #777;
+ }
+
+ .cross-line-top {
+ top: 50%;
+ transform: rotate(45deg) translatey(-50%);
+ }
+
+ .cross-line-bottom {
+ bottom: 50%;
+ transform: rotate(-45deg) translatey(50%);
+ }
+
+ /* move it further up the screen than the mobile toggler would */
+ .notification-toggled {
+ transform: translatey(-200%);
+ }
+
+ /* don's show on mobile or 'small mode' */
+ @media (pointer:none), (pointer:coarse), screen and (max-width: 900px) {
+ .notification-bar {
+ transform: translatey(-200%);
+ }
+ }`;
+ }
+}
diff --git a/client/public/index.html b/client/public/index.html
index 6620ebc..348b02f 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -8,7 +8,7 @@
-
+
diff --git a/docs/API.md b/docs/API.md
index 52acd66..e14109d 100644
--- a/docs/API.md
+++ b/docs/API.md
@@ -29,12 +29,37 @@ automatically every request
### /api/search/
### /api/bricks/
+
+GET
+
+Response Object
+```json
+{
+
+}
+```
+
### /api/sets/
### /api/brick/:id/
### /api/set/:id/
### /api/cdn/:id/
### /api/auth/login/
### /api/auth/signup/
+
+Request Body
+```json
+{
+
+}
+```
+
+Response Object
+```json
+{
+
+}
+```
+
### /api/auth/orders/
### /api/auth/basket/
@@ -42,7 +67,6 @@ automatically every request
```js
{
- status: 200,
error: false
result: {
// defined in the response description for each route
@@ -54,7 +78,6 @@ automatically every request
```js
{
- status: 400,
error: {
short: "Error doing x",
long: "y needs to be z",
diff --git a/src/controllers/brick-controller.js b/src/controllers/brick-controller.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/controllers/set-controller.js b/src/controllers/set-controller.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/routes/api.js b/src/routes/api.js
index ca4da57..49e08ba 100644
--- a/src/routes/api.js
+++ b/src/routes/api.js
@@ -8,7 +8,7 @@ const Auth0 = require('./auth0-router.js');
function Init() {
Server.App.get('/api/search/', []);
- Server.App.get('/api/bricks/');
+ Server.App.get('/api/bricks/', Bricks.Query);
Server.App.get('/api/sets/');
Server.App.get('/api/brick/:id/');
Server.App.get('/api/set/:id/');
diff --git a/src/routes/bricks-router.js b/src/routes/bricks-router.js
index e69de29..90cc887 100644
--- a/src/routes/bricks-router.js
+++ b/src/routes/bricks-router.js
@@ -0,0 +1,33 @@
+const Controller = require('../controllers/brick-controller.js');
+
+function Query(req, res, next) {
+ const query = req.query;
+
+ // Validation
+ const validation = Controller.ValidateQuery(query);
+ if (!validation.isValid) {
+ return res.status(400).json({
+ error: {
+ short: validation.error,
+ long: validation.longError,
+ },
+ });
+ }
+
+ // Query
+ Controller.Query(query, (err, data) => {
+ if (err) {
+ return res.status(500).json({
+ error: err,
+ });
+ }
+
+ res.json(data);
+ });
+
+ next();
+}
+
+module.exports = {
+ Query,
+};
diff --git a/src/routes/server.js b/src/routes/server.js
index 0597101..f632440 100644
--- a/src/routes/server.js
+++ b/src/routes/server.js
@@ -8,8 +8,8 @@ function listen(port) {
Logger.Info(`Listening on ${port}...`);
Logger.Info('Setting up basic middleware...');
- app.use(Logger.ExpressLogger);
+ app.use(Logger.ExpressLogger);
app.use(express.static('client/public/'));
}