update components

Former-commit-id: c8f6d9696fb9d68dc1ccf232f92a2171e503b565

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

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 = `
+        <nav class="navbar">
+            <div class="logo"><img src="res/logo.svg" height="80em" alt="logo"></div>
+            
+            <div class="push-right">
+                <!-- https://jonsuh.com/hamburgers/ -->
+                <button id="menu-toggler" class="hamburger">
+                    <span class="hamburger-line hamburger-line-top"></span>
+                    <span class="hamburger-line hamburger-line-middle"></span>
+                    <span class="hamburger-line hamburger-line-bottom"></span>
+                </button>
+            
+                <ul class="primary-menu menu nav-menu">
+                    <li class="menu-item current-menu-item"><a class="nav-link" href="#">New</a></li>
+                    <li class="menu-item dropdown"><a class="nav-link" href="#">Sets▾</a>
+                        <!-- TODO: Going to need to dynamically generate this -->
+                        <ul class = "sub-nav">
+                            <li><a class="sub-nav-link" href="#">1</a></li>
+                            <li><a class="sub-nav-link" href="#">2</a></li>
+                            <li><a class="sub-nav-link" href="#">3</a></li>
+                        </ul>
+                    </li>
+                    <li class="menu-item dropdown"><a class="nav-link"  href="#">Bricks▾</a>
+                        <ul class="sub-nav" >
+                            <li><a class="sub-nav-link" href="#">1</a></li>
+                            <li><a class="sub-nav-link" href="#">2</a></li>
+                            <li><a class="sub-nav-link" href="#">3</a></li>
+                        </ul>
+                    </li>
+                    <li class="menu-item"><a class="nav-link" href="#">My Account</a>
+                </ul>
+                <ul class="secondary-menu menu push-down">
+                    
+                    <span class="search-wrapper">
+                        <input id="search-bar" class="menu-item" type="text" placeholder="search..."/>
+                    </span>
+
+                    <img id="fave-icon" class="menu-item" src="https://www.svgrepo.com/show/25921/heart.svg" width="27px" stroke="#222" stroke-width="2px" alt="">
+                    
+                    <span id="cart-wrapper">
+                        <img id="cart-icon" class="menu-item" src="https://www.svgrepo.com/show/343743/cart.svg" width="30px" stroke="#222" stroke-width="2px" alt="">
+                        <span id="cart-number" class="menu-item">5</span>
+                    </span>
+                </ul>
+            </div>
+        </nav>`;
+    }
+
+    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%);
+            }
+        }`;
+    }
+}

client/public/index.html

@@ -8,7 +8,7 @@
 	<!-- ask rich about loading fonts elsewhere -->
 	<link href="https://fonts.googleapis.com/css2?family=Londrina+Solid&display=swap" rel="stylesheet">
 	<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">
-	<script src="components/components.js"></script>
+	<script type="module" src="components/components.js"></script>
 	
 	<script src="brick-renderer/webgl-debug.js"></script>
 	<script type="module" src="brick-renderer/glm/glm.mjs"></script>

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",

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/');

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,
+};

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