basic basket

Former-commit-id: 8c801211da983fe5e03535b2fd16a400bb01578e

client/public/components/basket-popout.mjs

@@ -135,18 +135,23 @@ class BasketPopout extends Component {
                                 <span class="popup-content-item-title">Items</span>
                                 ${Object.keys(this.state.items).map((key) => {
                                     const item = this.state.items[key];
-                                    console.log(item)
                                     return /* html */`
                                         <div class="popup-content-item">
-                                            <span class="popup-content-item-title">${item.quantity}x ${key}</span>
-                                            <span class="popup-content-item-value">${item.type}</span>
+                                            <span class="popup-content-item-title">X${item.quantity}</span>
+                                            <span class="popup-content-item-value">
+                                                <super-compact-listing-component class="sc-listing" 
+                                                                                 id="${key.split('~')[0]}"
+                                                                                 type="${item.type}"
+                                                                                 quantity="${item.quantity}">
+                                                </super-compact-listing-component>
+                                            </span>
                                         </div>
                                     `;
                                 }).join('')}
                             </div>
                         </div>
                         <div class="popup-footer">
-                            <button class="popup-footer-button">View Basket</button>
+                            <a href="/basket"><button class="popup-footer-button">View Basket</button></a>
                         </div>
                     </div>
                 </span>
@@ -187,16 +192,30 @@ class BasketPopout extends Component {
                 }
 
                 #basket-popup {
+                    font-size: 0.5em;
                     position: absolute;
                     background-color: #AB8FFF;
                     right: 0;
-                    width: 200px;
-                    height: 200px;
+                    width: 60%;
+                    padding-top: 20px;
+                    padding-bottom: 20px;
+                    height: auto;
+                    overflow-y: scroll;
+                    overflow-x: hidden;
                     flex-direction: column;
                     justify-content: center;
                     align-items: center;
                     z-index: 100;
                 }
+
+                @media (pointer:none), (pointer:coarse), screen and (max-width: 900px) {
+                    #basket-popup {
+                        position: fixed;
+                        left: 0;
+                        width: 100%;
+                    }
+                }
+
             `,
         };
     }

client/public/components/super-compact-listing.mjs

@@ -9,6 +9,21 @@ class SuperCompactProductListing extends Component {
         super(SuperCompactProductListing);
     }
 
+    async OnMount() {
+        if (!this.state.name || !this.state.price) {
+            const product = (await fetch(`/api/${this.state.type}/${this.state.id}`).then(res => res.json())).data;
+            const name = product.name;
+            const price = (product.discount || product.price) * this.state.quantity || 1;
+            const tag = product.tag;
+            this.setState({
+                ...this.getState,
+                name,
+                price,
+                tag,
+            }, false);
+        }
+    }
+
     Render() {
         return {
             template: /* html */`

src/controllers/set-controller.js

@@ -95,7 +95,6 @@ async function GetSet(setId) {
     }, {});
 
     const set = dbres.rows[0];
-    delete set.tag;
     set.includedBricks = bricks;
     set.tags = Array.from(tags);
     set.type = 'set';