add: data from MongoDB

Retrieve Data from MongoDB

app/assets/styles/general.css

@@ -3,6 +3,7 @@
     --radius-default: 5px;
     --transition-default: 150ms;
 
+    --color-black: #333;
     --color-white: white;
     --color-white-transparent: rgba(255, 255, 255, 0.67);
     --color-red: #cc0001;
@@ -35,6 +36,7 @@ body {
     height: 100%;
     overflow-x: hidden;
     font-family: sans-serif;
+    color: var(--color-black);
 }
 
 .dot {

app/assets/styles/header.css

@@ -49,6 +49,17 @@
         align-items: center;
         & li {
             list-style: none;
+
+            & a {
+                color: var(--color-black);
+                text-decoration: none;
+                transition: var(--transition-default);
+
+                &.active {
+                    color: var(--color-main);
+                    font-weight: bold;
+                }
+            }
         }
     }
 }

app/components/Pp/Header.vue

@@ -1,22 +1,47 @@
 <template>
   <header class="Header">
     <strong><span>Pro</span>Papier</strong>
-    <label for="burger_nav_toggle" v-if="available">
+    <label for="burger_nav_toggle">
       <Icon name="solar:hamburger-menu-broken" size="2em" />
     </label>
-    <input type="checkbox" id="burger_nav_toggle" v-if="available" />
-    <nav class="flex-col" v-if="available">
+    <input ref="checkbox" type="checkbox" id="burger_nav_toggle"/>
+    <nav class="flex-col">
       <label for="burger_nav_toggle">
         <Icon name="solar:close-circle-broken" />
       </label>
       <ul class="flex-col">
-        <li>Home</li>
-        <li>Übersicht</li>
+        <li v-for="navPoint in navPoints" :key="navPoint.label">
+          <NuxtLink
+            :to="navPoint.to"
+            active-class="active"
+            @click="closeNav()"
+          >
+            {{ navPoint.label }}
+          </NuxtLink>
+        </li>
       </ul>
     </nav>
   </header>
 </template>
 
 <script setup lang="ts">
-const available = false
+type NavPoint = {
+  label: string
+  to: string
+}
+
+const navPoints = useState<NavPoint[]>('nav', () => ([
+  {
+    label: 'Home',
+    to: '/',
+  },
+  {
+    label: 'Übersicht',
+    to: '/overview',
+  },
+]))
+
+const cb = useTemplateRef('checkbox')
+const closeNav = () => { cb.value!.checked = false }
+
 </script>

app/pages/overview.vue

@@ -0,0 +1,81 @@
+<template>
+  <section class="content flex-col">
+    <aside class="filter-bar">
+      <PpButtonGroup
+        :buttons="filterButtons"
+        @click="sort"
+      />
+    </aside>
+    <div class="pc-wrapper flex-col" role="list">
+      <p
+        v-for="product in products"
+        :key="product.sku"
+      >
+        {{ product.name }} - {{ product.price }}
+      </p>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import type { Card } from '../../shared/Card'
+import type { Button } from '../../shared/ButtonGroup'
+import type { Product } from '../../shared/db/Product'
+
+const currentSort = ref(0)
+
+const createCard = (uuid : string) : Card => ({
+  uuid,
+  name: '',
+  price: 0,
+  roles: 0,
+  sheets: 0,
+  layers: 0,
+  ppr: 0,
+  pps: 0,
+  ppl: 0,
+})
+
+const { data : products } = useFetch<Product[]>('/api/products')
+
+const cards = useState('cards', () => [
+  createCard(crypto.randomUUID()),
+])
+
+const filterButtons = ref<Button[]>([
+  {
+    label: 'Rollen',
+    icon: 'uil:toilet-paper',
+  },
+  {
+    label: 'Blatt',
+    icon: 'uil:file-landscape',
+  },
+  {
+    label: 'Lagen',
+    icon: 'uil:layer-group',
+  },
+])
+
+const sortBy = (key : 'ppr' | 'pps' | 'ppl') => {
+  cards.value.sort((a : Card, b : Card) => a[key] - b[key])
+}
+
+const sort = (index : number) => {
+  currentSort.value = index
+  filterButtons.value.forEach(button => { button.active = false })
+  filterButtons.value[index]!.active = true
+
+  switch (index) {
+    case 0:
+      sortBy('ppr')
+      break
+    case 1:
+      sortBy('pps')
+      break
+    case 2:
+      sortBy('ppl')
+      break
+  }
+}
+</script>