add: iteration 1 finished

Finished simple calculator iteration

app/components/Pp/ButtonGroup.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="ButtonGroup">
+    <button
+      v-for="(button, index) in buttons"
+      @click="click(index)"
+      :class="{ 'active': button.active}"
+    >
+      <Icon :name="button.icon" mode="svg" />
+      <span>{{ button.label }}</span>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Button } from '../../../shared/ButtonGroup'
+
+type Props = {
+  buttons: Button[]
+}
+
+defineProps<Props>()
+const emit = defineEmits(['click'])
+
+const click = (index : number) => emit('click', index)
+</script>

app/components/Pp/Footer.vue

@@ -1,7 +1,46 @@
 <template>
-  <div>THIS IS A FOOTER</div>
+  <footer class="Footer">
+    <h4>Socials</h4>
+    <ul class="socials">
+      <li v-for="social in socials">
+        <a :href="social.href" target="_blank">
+          <Icon :name="social.icon" mode="svg" />
+        </a>
+      </li>
+    </ul>
+    <div class="bottom">
+      <small>&copy; 2025 by webfussel</small>
+      <ul class="data-links">
+        <li v-for="dataLink in dataLinks">
+          <NuxtLink :to="dataLink.to">
+            {{ dataLink.label }}
+          </NuxtLink>
+        </li>
+      </ul>
+    </div>
+  </footer>
 </template>
 
 <script setup lang="ts">
+const socials = [
+  {
+    icon: 'simple-icons:kofi',
+    href: 'https://ko-fi.com/webfussel',
+  },
+  {
+    icon: 'simple-icons:forgejo',
+    href: 'https://git.webfussel.de/webfussel/propapier',
+  },
+]
 
+const dataLinks = [
+  {
+    label: 'Impressum',
+    to: '/imprint',
+  },
+  {
+    label: 'Datenschutz',
+    to: '/privacy',
+  }
+]
 </script>

app/components/Pp/Header.vue

@@ -1,11 +1,11 @@
 <template>
   <header class="Header">
     <strong><span>Pro</span>Papier</strong>
-    <label for="burger_nav_toggle">
+    <label for="burger_nav_toggle" v-if="available">
       <Icon name="solar:hamburger-menu-broken" size="2em" />
     </label>
-    <input type="checkbox" id="burger_nav_toggle" />
-    <nav class="flex-col">
+    <input type="checkbox" id="burger_nav_toggle" v-if="available" />
+    <nav class="flex-col" v-if="available">
       <label for="burger_nav_toggle">
         <Icon name="solar:close-circle-broken" />
       </label>
@@ -18,5 +18,5 @@
 </template>
 
 <script setup lang="ts">
-
+const available = false
 </script>

app/components/Pp/PriceCard.vue

@@ -53,7 +53,7 @@
         <Icon name="uil:trash" mode="svg" />
         Entfernen
       </PpButton>
-      <PpButton class="cta white">
+      <PpButton v-if="false" class="cta white">
         <Icon name="uil:qrcode-scan" mode="svg" />
         Scan
       </PpButton>
@@ -72,46 +72,44 @@ type Props = {
 const { card } = defineProps<Props>()
 const emit = defineEmits(['remove', 'update'])
 
-onMounted(() => {
-  calculate()
-  if (card.price) folded.value = true
-})
-
 const root = ref<HTMLElement>()
 const folded = ref<boolean>(false)
 const deleting = ref<boolean>(false)
 
-const ppr = ref(0)
-const pps = ref(0)
-const ppl = ref(0)
+const ppr = ref(card.ppr)
+const pps = ref(card.pps)
+const ppl = ref(card.ppl)
 
 const intl = Intl.NumberFormat('de-DE', {
   style: 'currency',
   currency: 'EUR',
 })
 
-const update = () => {
-  emit('update', card)
-}
-
 const calculate = () => {
   if (!card.price || !card.roles) return
   ppr.value = card.price / card.roles
 
-  if (!card.sheets) return
+  if (!card.sheets) {
+    update()
+    return
+  }
   pps.value = (ppr.value / card.sheets) * 10
 
-  if(!card.layers) return
+  if(!card.layers) {
+    update()
+    return
+  }
   ppl.value = (pps.value / card.layers) * 10
 
   update()
 }
 
-const deleteCard = async () => {
-  root.value?.addEventListener('transitionend', () => {
-    emit('remove')
-  })
+const update = () => emit('update', { ...card, ppr: ppr.value, pps: pps.value, ppl: ppl.value })
 
+const deleteCard = async () => {
+  root.value?.addEventListener('transitionend', () => emit('remove'))
   deleting.value = true
 }
+
+onMounted(() => folded.value = !!card.price)
 </script>