Compare commits
13 commits
987b685c41
...
220d4b1f30
| Author | SHA1 | Date | |
|---|---|---|---|
| 220d4b1f30 | |||
| ae0f6cb620 | |||
| 628659c39d | |||
| 192b031140 | |||
| 3200c29c2f | |||
| 7af148058e | |||
| 259adf53f6 | |||
| 8ccedbed8a | |||
| c5be0b6b04 | |||
| 8f924151da | |||
| 7aa21c1c19 | |||
| 9d686e2af2 | |||
| eabd67f93e |
27 changed files with 10356 additions and 2725 deletions
76
README.md
76
README.md
|
|
@ -1,75 +1 @@
|
|||
# Nuxt Minimal Starter
|
||||
|
||||
Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
|
||||
|
||||
## Setup
|
||||
|
||||
Make sure to install dependencies:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm install
|
||||
|
||||
# pnpm
|
||||
pnpm install
|
||||
|
||||
# yarn
|
||||
yarn install
|
||||
|
||||
# bun
|
||||
bun install
|
||||
```
|
||||
|
||||
## Development Server
|
||||
|
||||
Start the development server on `http://localhost:3000`:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run dev
|
||||
|
||||
# pnpm
|
||||
pnpm dev
|
||||
|
||||
# yarn
|
||||
yarn dev
|
||||
|
||||
# bun
|
||||
bun run dev
|
||||
```
|
||||
|
||||
## Production
|
||||
|
||||
Build the application for production:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run build
|
||||
|
||||
# pnpm
|
||||
pnpm build
|
||||
|
||||
# yarn
|
||||
yarn build
|
||||
|
||||
# bun
|
||||
bun run build
|
||||
```
|
||||
|
||||
Locally preview production build:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run preview
|
||||
|
||||
# pnpm
|
||||
pnpm preview
|
||||
|
||||
# yarn
|
||||
yarn preview
|
||||
|
||||
# bun
|
||||
bun run preview
|
||||
```
|
||||
|
||||
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
|
||||
# TBD
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.Button {
|
||||
--padding: .2rem;
|
||||
--background: var(--color-main);
|
||||
--color: var(--color-white);
|
||||
--background: var(--color-gradient-main-dark);
|
||||
--color: var(--color-lightest);
|
||||
--background-hover: var(--color-main-dark);
|
||||
|
||||
position: relative;
|
||||
|
|
@ -13,9 +13,58 @@
|
|||
transition: var(--transition-default);
|
||||
outline: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
background: var(--background);
|
||||
color: var(--color);
|
||||
|
||||
&.transparent {
|
||||
--background: transparent;
|
||||
box-shadow: none;
|
||||
padding: .5em 1.5em;
|
||||
border-radius: var(--radius-default);
|
||||
}
|
||||
|
||||
&.raised {
|
||||
box-shadow: var(--box-shadow-z2);
|
||||
padding: .5em 1.5em;
|
||||
border-radius: var(--radius-default);
|
||||
|
||||
&.danger {
|
||||
--background: var(--color-gradient-error);
|
||||
--color: var(--color-lightest);
|
||||
}
|
||||
}
|
||||
|
||||
&.text {
|
||||
--background: transparent;
|
||||
--color: var(--color-darkest);
|
||||
padding: .5em 1.5em;
|
||||
border-radius: var(--radius-default);
|
||||
|
||||
&:hover {
|
||||
--background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
&.white {
|
||||
--color: var(--color-lightest);
|
||||
}
|
||||
|
||||
&.danger {
|
||||
--color: var(--color-error);
|
||||
|
||||
&:hover {
|
||||
--background: rgba(255, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.round {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 100%;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
&.cta {
|
||||
background: var(--background);
|
||||
color: var(--color);
|
||||
|
|
@ -29,9 +78,9 @@
|
|||
}
|
||||
|
||||
&.cta.white {
|
||||
--background: var(--color-white);
|
||||
--background: var(--color-lightest);
|
||||
--color: var(--color-main);
|
||||
--background-hover: var(--color-grey);
|
||||
--background-hover: var(--color-light);
|
||||
}
|
||||
|
||||
&.icon-button {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,13 @@
|
|||
.ButtonGroup {
|
||||
display: flex;
|
||||
background: var(--color-main);
|
||||
border-radius: var(--radius-default);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--box-shadow-z2);
|
||||
|
||||
& button {
|
||||
--color: var(--color-white-transparent);
|
||||
--background: var(--color-main);
|
||||
--color: var(--color-light);
|
||||
--background: var(--color-main-darkest);
|
||||
all: unset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -17,7 +21,7 @@
|
|||
transition: var(--transition-default);
|
||||
|
||||
&.active {
|
||||
--color: var(--color-white);
|
||||
--color: var(--color-lightest);
|
||||
--background: var(--color-main-dark);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
.Footer {
|
||||
background: var(--color-main-dark);
|
||||
position: relative;
|
||||
background: var(--color-darkest);
|
||||
padding: 1rem;
|
||||
z-index: 100;
|
||||
|
||||
& h4 {
|
||||
color: var(--color-white);
|
||||
color: var(--color-lightest);
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
|
@ -12,7 +14,7 @@
|
|||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: space-between;
|
||||
color: var(--color-white-transparent);
|
||||
color: var(--color-light);
|
||||
}
|
||||
|
||||
& .socials {
|
||||
|
|
@ -33,7 +35,7 @@
|
|||
gap: 1rem;
|
||||
|
||||
& a {
|
||||
color: var(--color-white);
|
||||
color: var(--color-lightest);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,44 +1,52 @@
|
|||
.Input {
|
||||
position: relative;
|
||||
flex: 25% 1 0;
|
||||
border: 2px solid var(--color-blue);
|
||||
border-radius: var(--radius-default);
|
||||
overflow: hidden;
|
||||
transition: var(--transition-default);
|
||||
outline: 0 solid var(--color-white);
|
||||
&.error {
|
||||
& .input-wrapper {
|
||||
border-color: var(--color-error);
|
||||
outline-width: 2px;
|
||||
}
|
||||
|
||||
& label {
|
||||
position: absolute;
|
||||
left: .5rem;
|
||||
font-size: 1.5em;
|
||||
top: .7rem;
|
||||
transition: var(--transition-default);
|
||||
}
|
||||
|
||||
& input {
|
||||
all: unset;
|
||||
width: calc(100% - 1rem);
|
||||
font-size: 1.2em;
|
||||
padding: 1.3rem .5rem .5rem .5rem;
|
||||
background: var(--color-white);
|
||||
|
||||
&[type="number"] {
|
||||
text-align: right;
|
||||
& span {
|
||||
color: var(--color-error);
|
||||
}
|
||||
}
|
||||
|
||||
&:has(input:invalid) {
|
||||
border-color: var(--color-red);
|
||||
outline-width: 2px;
|
||||
& span {
|
||||
font-size: .65em;
|
||||
}
|
||||
|
||||
& input:focus,
|
||||
& input:not(:placeholder-shown) {
|
||||
& + label {
|
||||
color: var(--color-main);
|
||||
font-size: 1em;
|
||||
& .input-wrapper {
|
||||
position: relative;
|
||||
flex: 25% 1 0;
|
||||
border: 2px solid var(--color-main-dark);
|
||||
border-radius: var(--radius-default);
|
||||
overflow: hidden;
|
||||
transition: var(--transition-default);
|
||||
outline: 0 solid var(--color-lightest);
|
||||
|
||||
& label {
|
||||
position: absolute;
|
||||
font-size: .8em;
|
||||
top: .3rem;
|
||||
right: .5rem;
|
||||
left: .5rem;
|
||||
transition: var(--transition-default);
|
||||
}
|
||||
|
||||
& input {
|
||||
all: unset;
|
||||
width: calc(100% - 1rem);
|
||||
padding: 1.3rem .5rem .5rem .5rem;
|
||||
background: var(--color-lightest);
|
||||
|
||||
&[type="number"] {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
& input:focus,
|
||||
& input:not(:placeholder-shown) {
|
||||
& + label {
|
||||
color: var(--color-main-dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,27 +1,50 @@
|
|||
:root {
|
||||
--padding-default: 1rem;
|
||||
--radius-default: 5px;
|
||||
--padding-small: .5rem;
|
||||
--radius-default: 3px;
|
||||
--transition-default: 150ms;
|
||||
|
||||
--color-white: white;
|
||||
--color-white-transparent: rgba(255, 255, 255, 0.67);
|
||||
--color-red: #cc0001;
|
||||
--color-blue-light: #61a7fd;
|
||||
--color-blue: #2e86de;
|
||||
--color-blue-dark: #1b4b7f;
|
||||
--color-grey: #c7c7c7;
|
||||
--color-success: #328104;
|
||||
--color-error: #A20606;
|
||||
--color-blue-light: #0DDCE7;
|
||||
--color-blue: #05B0FF;
|
||||
--color-blue-dark: #0266F2;
|
||||
--color-blue-darkest: #013174;
|
||||
|
||||
--color-darkest: #292929;
|
||||
--color-dark: #404040;
|
||||
--color-middle: #707070;
|
||||
--color-light: #E0E0E6;
|
||||
--color-lightest: #FAFAFF;
|
||||
|
||||
--color-green-light: #05FFC5;
|
||||
--color-green: #02F276;
|
||||
--color-green-dark: #09DC33;
|
||||
--color-green-darkest: #07B029;
|
||||
--color-green-darkest-most: #157C2A;
|
||||
|
||||
--color-orange: #DE9C2F;
|
||||
|
||||
--color-main: var(--color-blue);
|
||||
--color-main-light: var(--color-blue-light);
|
||||
--color-main-dark: var(--color-blue-dark);
|
||||
--color-main-darkest: var(--color-blue-darkest);
|
||||
|
||||
--color-accent: var(--color-orange);
|
||||
--color-accent: var(--color-green);
|
||||
--color-accent-light: var(--color-green-light);
|
||||
--color-accent-dark: var(--color-green-dark);
|
||||
--color-accent-darkest: var(--color-green-darkest);
|
||||
|
||||
--color-gradient-main: linear-gradient(to bottom right, var(--color-main), var(--color-main-light));
|
||||
--color-gradient-main-dark: linear-gradient(to bottom right, var(--color-main-darkest), var(--color-main-dark));
|
||||
--color-gradient-accent: linear-gradient(to bottom right, var(--color-accent), var(--color-accent-light));
|
||||
--color-gradient-accent-dark: linear-gradient(to bottom right, var(--color-accent-darkest), var(--color-accent-dark));
|
||||
--color-gradient-error: linear-gradient(to bottom right, #B00707, #DC0909);
|
||||
--color-gradient-error-reverse: linear-gradient(to top left, #B00707, #DC0909);
|
||||
|
||||
--box-shadow-upper: 0 -3px 6px rgba(0,0,0,0.16), 0 -3px 6px rgba(0,0,0,0.23);
|
||||
--box-shadow-z2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
|
||||
--box-shadow-inset: inset 0 3px 6px rgba(0,0,0,0.16), inset 0 3px 6px rgba(0,0,0,0.23);
|
||||
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
@ -35,6 +58,7 @@ body {
|
|||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
font-family: sans-serif;
|
||||
color: var(--color-darkest);
|
||||
}
|
||||
|
||||
.dot {
|
||||
|
|
@ -77,7 +101,6 @@ body {
|
|||
.card {
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-default);
|
||||
border: 1px solid var(--color-main);
|
||||
box-shadow: var(--box-shadow-z2);
|
||||
}
|
||||
|
||||
|
|
@ -106,7 +129,7 @@ body {
|
|||
}
|
||||
|
||||
.text-white {
|
||||
color: var(--color-white);
|
||||
color: var(--color-lightest);
|
||||
}
|
||||
|
||||
.bg-main {
|
||||
|
|
@ -123,4 +146,50 @@ body {
|
|||
|
||||
.bg-main-dark-hover:hover {
|
||||
background-color: var(--color-main-dark);
|
||||
}
|
||||
|
||||
.gap-default {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.bg-blue {
|
||||
background: var(--color-blue);
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
background: var(--color-lightest);
|
||||
}
|
||||
|
||||
.padding {
|
||||
gap: 1rem;
|
||||
padding: var(--padding-default);
|
||||
}
|
||||
|
||||
.padding-small {
|
||||
gap: 1rem;
|
||||
padding: var(--padding-small);
|
||||
}
|
||||
|
||||
dialog {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100vw;
|
||||
transform: translate(-50%, -50%);
|
||||
border: none;
|
||||
border-radius: var(--radius-default);
|
||||
|
||||
font-size: 1rem;
|
||||
|
||||
& header {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
& footer {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&::backdrop {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
|
|
@ -3,16 +3,19 @@
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--padding-default);
|
||||
background-color: var(--color-white);
|
||||
background-color: rgba(255 255 255 / .8);
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: var(--box-shadow-z2);
|
||||
color: var(--color-darkest);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
z-index: 100;
|
||||
|
||||
& strong {
|
||||
font-size: 2em;
|
||||
|
||||
& span {
|
||||
color: var(--color-main);
|
||||
color: var(--color-main-dark);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -38,7 +41,7 @@
|
|||
top: 0;
|
||||
height: 100dvh;
|
||||
transition: 150ms ease-in-out;
|
||||
background: var(--color-white);
|
||||
background: var(--color-lightest);
|
||||
font-size: 2em;
|
||||
align-items: end;
|
||||
z-index: 100;
|
||||
|
|
@ -49,6 +52,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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,93 +1,117 @@
|
|||
.PriceCard {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
transition: 150ms;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
max-height: 400px;
|
||||
opacity: 1;
|
||||
color: var(--color-darkest);
|
||||
background: black;
|
||||
|
||||
&.deleting {
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.folded {
|
||||
grid-template-rows: auto 0fr auto;
|
||||
}
|
||||
|
||||
& > header {
|
||||
color: var(--color-white);
|
||||
.bottom {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 1.3em;
|
||||
|
||||
& > .Button {
|
||||
color: var(--color-white);
|
||||
border: 2px solid var(--color-white);
|
||||
}
|
||||
}
|
||||
|
||||
& aside {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
& footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
& > .Button.delete {
|
||||
scale: 0;
|
||||
}
|
||||
|
||||
& > .Button.deletable {
|
||||
scale: 1;
|
||||
}
|
||||
}
|
||||
|
||||
& .padding {
|
||||
gap: 1rem;
|
||||
padding: var(--padding-default);
|
||||
}
|
||||
|
||||
& .bg-blue {
|
||||
background: var(--color-blue);
|
||||
}
|
||||
|
||||
& .bg-white {
|
||||
background: var(--color-white);
|
||||
}
|
||||
|
||||
& .wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
gap: 1rem;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
|
||||
& > * {
|
||||
flex-basis: 25%;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
& > .info {
|
||||
color: var(--color-lightest);
|
||||
font-size: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > .icon {
|
||||
color: var(--color-blue-light);
|
||||
font-size: 2rem;
|
||||
padding: .2rem;
|
||||
& .icon {
|
||||
filter: drop-shadow(1px 3px 1px rgb(0 0 0 / 0.4));
|
||||
}
|
||||
}
|
||||
|
||||
& > .price {
|
||||
font-size: 1.2rem;
|
||||
& .bg-edit {
|
||||
background: var(--color-gradient-main-dark);
|
||||
padding: 2rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
& .bg-delete {
|
||||
background: var(--color-gradient-error-reverse);
|
||||
padding: 2rem;
|
||||
text-align: right;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.top {
|
||||
position: relative;
|
||||
background: var(--color-lightest);
|
||||
z-index: 2;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
border-radius: var(--radius-default);
|
||||
|
||||
&.animated {
|
||||
transition: var(--transition-default);
|
||||
}
|
||||
|
||||
& > header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: var(--color-darkest);
|
||||
|
||||
& .icon {
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
& > .pro {
|
||||
font-size: .8rem;
|
||||
& .name-price {
|
||||
display: flex;
|
||||
gap: .5rem;
|
||||
|
||||
& > span:nth-child(1) {
|
||||
font-weight: bold;
|
||||
color: var(--color-main-light);
|
||||
max-width: 210px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
& > span:nth-child(2)::before {
|
||||
content: '•';
|
||||
margin-right: .5rem;
|
||||
color: var(--color-middle);
|
||||
}
|
||||
}
|
||||
|
||||
& .wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
gap: 1rem;
|
||||
justify-content: space-between;
|
||||
|
||||
& > .info {
|
||||
flex-grow: 0;
|
||||
align-items: center;
|
||||
gap: .25rem;
|
||||
font-weight: bold;
|
||||
|
||||
& > .price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
|
||||
& > .icon {
|
||||
color: var(--color-main-dark);
|
||||
}
|
||||
}
|
||||
|
||||
& > .pro {
|
||||
font-size: .6rem;
|
||||
color: var(--color-middle);
|
||||
font-weight: lighter;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
.Toolbar {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
background: var(--color-main);
|
||||
background: var(--color-main-darkest);
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
box-shadow: var(--box-shadow-upper);
|
||||
|
||||
& > .Button {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="ButtonGroup">
|
||||
<div class="ButtonGroup z-2">
|
||||
<button
|
||||
v-for="(button, index) in buttons"
|
||||
@click="click(index)"
|
||||
|
|
|
|||
39
app/components/Pp/DeleteDialog.vue
Normal file
39
app/components/Pp/DeleteDialog.vue
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<template>
|
||||
<dialog
|
||||
ref="dialog"
|
||||
closedby="any"
|
||||
>
|
||||
<form method="dialog">
|
||||
<header class="flex-row padding">
|
||||
Wirklich löschen?
|
||||
<PpButton class="round text">
|
||||
<Icon name="uil:times" mode="svg" />
|
||||
</PpButton>
|
||||
</header>
|
||||
<main>
|
||||
<div class="padding flex-col">
|
||||
<p>Bist du dir sicher, dass du diesen Eintrag löschen möchtest?</p>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="flex-row padding">
|
||||
<PpButton class="text">
|
||||
<span>Abbrechen</span>
|
||||
</PpButton>
|
||||
<PpButton class="danger raised" @click="$emit('delete')">
|
||||
<span>Löschen</span>
|
||||
</PpButton>
|
||||
</footer>
|
||||
</form>
|
||||
</dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
type Props = {
|
||||
currentCardIndex : number
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
defineEmits(['delete'])
|
||||
|
||||
|
||||
</script>
|
||||
|
|
@ -1,17 +1,20 @@
|
|||
<template>
|
||||
<div class="Input flex-col">
|
||||
<input
|
||||
<div class="Input">
|
||||
<div class="input-wrapper flex-col">
|
||||
<input
|
||||
v-model="text"
|
||||
:type="type"
|
||||
:id="makeId()"
|
||||
:id="id"
|
||||
:step="step"
|
||||
:min="min"
|
||||
:max="max"
|
||||
:required="required"
|
||||
placeholder=" "
|
||||
@blur="emit('blur')"
|
||||
/>
|
||||
<label :for="makeId()">{{ label }}</label>
|
||||
/>
|
||||
<label :for="id">{{ label }}</label>
|
||||
</div>
|
||||
<span v-if="message">{{ message }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -22,9 +25,9 @@ type Props = {
|
|||
min ?: number
|
||||
step ?: number
|
||||
required ?: boolean
|
||||
message ?: string
|
||||
label : string
|
||||
id : string
|
||||
uid : string
|
||||
}
|
||||
|
||||
const {
|
||||
|
|
@ -32,15 +35,9 @@ const {
|
|||
required = false,
|
||||
step = 0.01,
|
||||
min = 1,
|
||||
max,
|
||||
label,
|
||||
id,
|
||||
uid,
|
||||
} = defineProps<Props>()
|
||||
|
||||
const emit = defineEmits(['blur'])
|
||||
|
||||
const text = defineModel()
|
||||
|
||||
const makeId = () => `${id}_${uid}`
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,56 @@
|
|||
<template>
|
||||
<header class="Header">
|
||||
<strong><span>Pro</span>Papier</strong>
|
||||
<label for="burger_nav_toggle" v-if="available">
|
||||
<NuxtLink to="/">
|
||||
<strong><span>Pro</span>Papier</strong>
|
||||
</NuxtLink>
|
||||
<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
|
||||
</script>
|
||||
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>
|
||||
|
||||
<style scoped>
|
||||
header a {
|
||||
text-decoration: none;
|
||||
color: var(--color-darkest);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,64 +1,59 @@
|
|||
<template>
|
||||
<form
|
||||
ref="root"
|
||||
class="PriceCard card"
|
||||
:class="{ folded, deleting }"
|
||||
@submit.prevent="() => {}"
|
||||
>
|
||||
<header class="padding bg-blue">
|
||||
{{ card.name || 'Kein Name' }}
|
||||
<PpButton
|
||||
class="icon-button bg-main"
|
||||
@click="folded = !folded"
|
||||
>
|
||||
<Icon :name="folded ? 'uil:sort' : 'uil:sorting'" mode="svg" />
|
||||
</PpButton>
|
||||
</header>
|
||||
<aside>
|
||||
<div class="input-wrapper padding bg-blue flex-col">
|
||||
<div class="wrapper">
|
||||
<PpFormInput v-model="card.name" label="Name" id="n" :uid="card.uuid" type="text" @blur="update" />
|
||||
<PpFormInput v-model="card.price" label="Preis" id="p" :uid="card.uuid" type="number" :min="0.01" @blur="calculate" />
|
||||
<article class="PriceCard card">
|
||||
<div class="bottom">
|
||||
<div class="bg-edit">
|
||||
<Icon class="icon" name="uil:pen" mode="svg" />
|
||||
</div>
|
||||
<div class="bg-delete">
|
||||
<Icon class="icon" name="uil:trash-alt" mode="svg" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
ref="top"
|
||||
class="top flex-col"
|
||||
:class="{ 'animated' : !isSwiping }"
|
||||
:style="{ left }"
|
||||
>
|
||||
<header>
|
||||
<div class="name-price">
|
||||
<span>{{ card.name || 'Kein Name' }}</span>
|
||||
<span>{{ intl.format(+replaceComma(card.price))}}</span>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<PpFormInput v-model="card.roles" label="Rollen" id="r" :uid="card.uuid" type="number" :max="150" @blur="calculate" />
|
||||
<PpFormInput v-model="card.sheets" label="Blätter" id="b" :uid="card.uuid" type="number" :max="500" @blur="calculate" />
|
||||
<PpFormInput v-model="card.layers" label="Lagen" id="l" :uid="card.uuid" type="number" :max="10" @blur="calculate" />
|
||||
<div v-if="$device.isDesktop" class="flex-row gap-default">
|
||||
<PpButton class="icon-button" @click="update()">
|
||||
<Icon class="icon" name="uil:pen" mode="svg" />
|
||||
</PpButton>
|
||||
<PpButton class="icon-button" @click="deleteCard()">
|
||||
<Icon class="icon" name="uil:trash-alt" mode="svg" />
|
||||
</PpButton>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="wrapper padding bg-white">
|
||||
<div class="info flex-col">
|
||||
<Icon class="icon" name="uil:toilet-paper" mode="svg" />
|
||||
<span class="price">{{ intl.format(ppr) }}</span>
|
||||
<span class="pro">Pro 1</span>
|
||||
</div>
|
||||
<div class="info flex-col">
|
||||
<Icon class="icon" name="uil:file-landscape" mode="svg" />
|
||||
<span class="price">{{ intl.format(pps) }}</span>
|
||||
<span class="pro">Pro 10</span>
|
||||
</div>
|
||||
<div class="info flex-col">
|
||||
<Icon class="icon" name="uil:layer-group" mode="svg" />
|
||||
<span class="price">{{ intl.format(ppl) }}</span>
|
||||
<span class="pro">Pro 100</span>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="padding bg-blue flex-row">
|
||||
<PpButton
|
||||
class="delete"
|
||||
:class="{ deletable }"
|
||||
@click="deleteCard"
|
||||
>
|
||||
<Icon name="uil:trash" mode="svg" />
|
||||
Entfernen
|
||||
</PpButton>
|
||||
<PpButton v-if="false" class="cta white">
|
||||
<Icon name="uil:qrcode-scan" mode="svg" />
|
||||
Scan
|
||||
</PpButton>
|
||||
</footer>
|
||||
</form>
|
||||
</header>
|
||||
|
||||
<main class="wrapper">
|
||||
<div class="info flex-col">
|
||||
<div class="price">
|
||||
<Icon class="icon" name="uil:toilet-paper" mode="svg" />
|
||||
<span class="value">{{ intl.format(card.ppr) }}</span>
|
||||
</div>
|
||||
<span class="pro">Pro 1 {{ card.roles ? `(${card.roles})` : '' }}</span>
|
||||
</div>
|
||||
<div class="info flex-col">
|
||||
<div class="price">
|
||||
<Icon class="icon" name="uil:file-landscape" mode="svg" />
|
||||
<span class="value">{{ intl.format(card.pps) }}</span>
|
||||
</div>
|
||||
<span class="pro">Pro 100 {{ card.sheets ? `(${card.sheets})` : '' }}</span>
|
||||
</div>
|
||||
<div class="info flex-col">
|
||||
<div class="price">
|
||||
<Icon class="icon" name="uil:layer-group" mode="svg" />
|
||||
<span class="value">{{ intl.format(card.ppl) }}</span>
|
||||
</div>
|
||||
<span class="pro">Pro 100 {{ card.layers ? `(${card.layers})` : '' }}</span>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
@ -72,44 +67,30 @@ type Props = {
|
|||
const { card } = defineProps<Props>()
|
||||
const emit = defineEmits(['remove', 'update'])
|
||||
|
||||
const root = ref<HTMLElement>()
|
||||
const folded = ref<boolean>(false)
|
||||
const deleting = ref<boolean>(false)
|
||||
|
||||
const ppr = ref(card.ppr)
|
||||
const pps = ref(card.pps)
|
||||
const ppl = ref(card.ppl)
|
||||
const top = useTemplateRef('top')
|
||||
const left = shallowRef<string>('0')
|
||||
|
||||
const intl = Intl.NumberFormat('de-DE', {
|
||||
style: 'currency',
|
||||
currency: 'EUR',
|
||||
})
|
||||
|
||||
const calculate = () => {
|
||||
if (!card.price || !card.roles) return
|
||||
ppr.value = card.price / card.roles
|
||||
const { lengthX, isSwiping } = useSwipe(top, {
|
||||
passive: false,
|
||||
threshold: 30,
|
||||
onSwipe() {
|
||||
if (lengthX.value > 50 || lengthX.value < -50) {
|
||||
left.value = `${-clamp(lengthX.value, -100, 100)}px`
|
||||
}
|
||||
},
|
||||
onSwipeEnd() {
|
||||
if (lengthX.value < -50) update()
|
||||
if (lengthX.value > 50) deleteCard()
|
||||
left.value = '0'
|
||||
},
|
||||
})
|
||||
|
||||
if (!card.sheets) {
|
||||
update()
|
||||
return
|
||||
}
|
||||
pps.value = (ppr.value / card.sheets) * 10
|
||||
const update = () => emit('update')
|
||||
|
||||
if(!card.layers) {
|
||||
update()
|
||||
return
|
||||
}
|
||||
ppl.value = (pps.value / card.layers) * 10
|
||||
|
||||
update()
|
||||
}
|
||||
|
||||
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)
|
||||
const deleteCard = () => emit('remove')
|
||||
</script>
|
||||
|
|
|
|||
129
app/components/Pp/PriceCardDialog.vue
Normal file
129
app/components/Pp/PriceCardDialog.vue
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
<template>
|
||||
<dialog
|
||||
ref="dialog"
|
||||
closedby="any"
|
||||
>
|
||||
<form method="dialog">
|
||||
<header class="flex-row padding">
|
||||
{{ cardLabel }}
|
||||
<PpButton class="round text">
|
||||
<Icon name="uil:times" mode="svg" />
|
||||
</PpButton>
|
||||
</header>
|
||||
</form>
|
||||
<main v-if="currentCard">
|
||||
<div class="padding flex-col">
|
||||
<div class="flex-row gap-default">
|
||||
<PpFormInput
|
||||
v-model="currentCard.name"
|
||||
id="card_name"
|
||||
label="Name"
|
||||
:class="{'error': !validFields.name }"
|
||||
:message="!validFields.name ? 'Feld darf nicht leer sein.' : ''"
|
||||
/>
|
||||
<PpFormInput
|
||||
v-model="currentCard.price"
|
||||
id="card_price"
|
||||
label="Preis"
|
||||
:class="{'error': !validFields.price }"
|
||||
:message="!validFields.price ? 'Muss eine Zahl sein.' : ''"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-row gap-default">
|
||||
<PpFormInput
|
||||
v-model="currentCard.roles"
|
||||
id="card_roles"
|
||||
label="Rollen"
|
||||
:class="{'error': !validFields.roles }"
|
||||
:message="!validFields.roles ? 'Muss eine Ganzzahl sein.' : ''"
|
||||
/>
|
||||
<PpFormInput
|
||||
v-model="currentCard.sheets"
|
||||
id="card_sheets"
|
||||
label="Blätter"
|
||||
:class="{'error': !validFields.sheets }"
|
||||
:message="!validFields.sheets ? 'Muss eine Ganzzahl sein.' : ''"
|
||||
/>
|
||||
<PpFormInput
|
||||
v-model="currentCard.layers"
|
||||
id="card_layers"
|
||||
label="Lagen"
|
||||
:class="{'error': !validFields.layers }"
|
||||
:message="!validFields.layers ? 'Muss eine Ganzzahl sein.' : ''"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="flex-row padding">
|
||||
<form method="dialog">
|
||||
<PpButton class="danger text">
|
||||
<span>Abbrechen</span>
|
||||
</PpButton>
|
||||
</form>
|
||||
<PpButton class="raised" @click="validate">
|
||||
<span>{{ cardLabel }}</span>
|
||||
</PpButton>
|
||||
</footer>
|
||||
</dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Card } from '../../../shared/Card'
|
||||
|
||||
type Props = {
|
||||
currentCardIndex : number
|
||||
currentCard ?: Card
|
||||
}
|
||||
|
||||
const { currentCardIndex, currentCard } = defineProps<Props>()
|
||||
const emit = defineEmits(['update'])
|
||||
|
||||
const dialog = useTemplateRef<HTMLDialogElement>('dialog')
|
||||
const cardLabel = computed(() => currentCardIndex > -1 ? 'Bearbeiten' : 'Hinzufügen')
|
||||
|
||||
const checkPrice = () => {
|
||||
if (!currentCard) { return false }
|
||||
if (currentCard.price.length === 0) { return false }
|
||||
const price = +replaceComma(currentCard.price)
|
||||
return !isNaN(price)
|
||||
}
|
||||
|
||||
const checkIfInteger = (toBeNumber : string) => {
|
||||
if (toBeNumber.length === 0) { return false }
|
||||
if (toBeNumber.includes(',') || toBeNumber.includes('.')) { return false }
|
||||
return !isNaN(+toBeNumber)
|
||||
}
|
||||
|
||||
const validFields = reactive({
|
||||
name: true,
|
||||
price: true,
|
||||
roles: true,
|
||||
sheets: true,
|
||||
layers: true,
|
||||
})
|
||||
|
||||
const validate = () => {
|
||||
if (!currentCard) { return }
|
||||
|
||||
validFields.name = currentCard.name.length > 0
|
||||
validFields.price = checkPrice()
|
||||
validFields.roles = checkIfInteger(currentCard.roles)
|
||||
validFields.sheets = checkIfInteger(currentCard.sheets)
|
||||
validFields.layers = checkIfInteger(currentCard.layers)
|
||||
|
||||
if (Object.values(validFields).every(value => value)) {
|
||||
emit('update')
|
||||
dialog.value?.close()
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
dialog.value?.addEventListener('close', () => {
|
||||
validFields.name = true
|
||||
validFields.price = true
|
||||
validFields.roles = true
|
||||
validFields.sheets = true
|
||||
validFields.layers = true
|
||||
})
|
||||
})
|
||||
</script>
|
||||
72
app/pages/imprint.vue
Normal file
72
app/pages/imprint.vue
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
<template>
|
||||
<div>
|
||||
<section class="Imp flex-col gap-default content full">
|
||||
<div>
|
||||
<p>
|
||||
Fiona Lena Urban<br/>
|
||||
Fiona Urban aka webfussel<br/>
|
||||
Teichäckerweg 39<br/>
|
||||
76297 Stutensee
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3>Kontakt</h3>
|
||||
<ClientOnly>
|
||||
<p>
|
||||
Telefon: 017631640961<br/>
|
||||
E-Mail: fiona@webfussel.de
|
||||
</p>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3>Umsatzsteuer-ID</h3>
|
||||
<p>
|
||||
Umsatzsteuer-Identifikationsnummer gemäß § 27 a Umsatzsteuergesetz:<br/>
|
||||
DE348500161
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3>Angaben zur Berufs­haftpflicht­versicherung</h3>
|
||||
<p>
|
||||
<strong>Name und Sitz des Versicherers:</strong><br/>
|
||||
Hiscox SA<br/>
|
||||
Arnulfstr. 31<br/>
|
||||
80636 München
|
||||
</p>
|
||||
<p>
|
||||
<strong>Geltungsraum der Versicherung:</strong><br/>
|
||||
Bundesrepublik Deutschland
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3>Redaktionell verantwortlich</h3>
|
||||
<p>Fiona Lena Urban</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3>Verbraucher­streit­beilegung / Universal­schlichtungs­stelle</h3>
|
||||
<p>
|
||||
Wir sind nicht bereit oder verpflichtet, an Streitbeilegungsverfahren vor einer
|
||||
Verbraucherschlichtungsstelle teilzunehmen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex-col gap-default">
|
||||
<h3>Quellenangaben</h3>
|
||||
<div>
|
||||
<h4>Impressumstext</h4>
|
||||
<p>Quelle: <a href="https://www.e-recht24.de">e-recht24.de</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
useSeoMeta({
|
||||
robots: 'noindex, nofollow',
|
||||
})
|
||||
</script>
|
||||
|
|
@ -1,4 +1,15 @@
|
|||
<template>
|
||||
<PpDeleteDialog
|
||||
ref="deleteModal"
|
||||
:current-card-index="currentCardIndex"
|
||||
@delete="removeCard(currentCardIndex)"
|
||||
/>
|
||||
<PpPriceCardDialog
|
||||
ref="modal"
|
||||
:current-card="currentCard"
|
||||
:current-card-index="currentCardIndex"
|
||||
@update="updateCard()"
|
||||
/>
|
||||
<section class="content flex-col">
|
||||
<aside class="filter-bar">
|
||||
<PpButtonGroup
|
||||
|
|
@ -12,13 +23,13 @@
|
|||
:key="card.uuid"
|
||||
:deletable="cards.length > 1"
|
||||
:card="card"
|
||||
@update="newCard => updateCard(newCard, index)"
|
||||
@remove="removeCard(card)"
|
||||
@update="openModal(false, index)"
|
||||
@remove="openDeleteModal()"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<PpToolbar>
|
||||
<PpButton class="mini-button text-white" @click="sort(currentSort)">
|
||||
<PpButton class="mini-button text-white transparent" @click="sort(currentSort)">
|
||||
<Icon class="icon" name="uil:refresh" mode="svg" />
|
||||
<span>Neu sortieren</span>
|
||||
<span
|
||||
|
|
@ -27,7 +38,7 @@
|
|||
aria-hidden="true"
|
||||
/>
|
||||
</PpButton>
|
||||
<PpButton class="mini-button text-white" @click="addCard">
|
||||
<PpButton class="mini-button text-white transparent" @click="openModal(true, -1)">
|
||||
<Icon class="icon" name="uil:plus" mode="svg" />
|
||||
<span>Hinzufügen</span>
|
||||
</PpButton>
|
||||
|
|
@ -37,46 +48,82 @@
|
|||
<script setup lang="ts">
|
||||
import type { Card } from '../../shared/Card'
|
||||
import type { Button } from '../../shared/ButtonGroup'
|
||||
import { PpPriceCardDialog, PpDeleteDialog } from '#components'
|
||||
|
||||
const currentSort = ref(0)
|
||||
const isDirty = ref(false)
|
||||
const currentCard = ref<Card>()
|
||||
const currentCardIndex = ref<number>(-1)
|
||||
const modal = useTemplateRef<typeof PpPriceCardDialog>('modal')
|
||||
const deleteModal = useTemplateRef<typeof PpDeleteDialog>('deleteModal')
|
||||
|
||||
const createCard = (uuid : string) : Card => ({
|
||||
uuid,
|
||||
name: '',
|
||||
price: 0,
|
||||
roles: 0,
|
||||
sheets: 0,
|
||||
layers: 0,
|
||||
price: '',
|
||||
roles: '',
|
||||
sheets: '',
|
||||
layers: '',
|
||||
ppr: 0,
|
||||
pps: 0,
|
||||
ppl: 0,
|
||||
})
|
||||
|
||||
const cards = useState('cards', () => [
|
||||
const cards = useState<Card[]>('cards', () => [
|
||||
createCard(crypto.randomUUID()),
|
||||
])
|
||||
|
||||
const addCard = () => {
|
||||
cards.value.unshift(createCard(crypto.randomUUID()))
|
||||
isDirty.value = true
|
||||
}
|
||||
|
||||
const removeCard = (card : Card) => {
|
||||
cards.value = cards.value.filter(element => element.uuid !== card.uuid)
|
||||
const addCard = (card : Card) => {
|
||||
const price = calculate(card)
|
||||
cards.value.unshift({ ...card, ...price })
|
||||
isDirty.value = true
|
||||
updateLocalStorage()
|
||||
}
|
||||
|
||||
const updateCard = (card : Card, index : number) => {
|
||||
cards.value[index] = card
|
||||
const removeCard = (index : number) => {
|
||||
cards.value.splice(index, 1)
|
||||
isDirty.value = true
|
||||
updateLocalStorage()
|
||||
}
|
||||
|
||||
const updateCard = () => {
|
||||
if (currentCardIndex.value === -1) {
|
||||
addCard(currentCard.value!)
|
||||
return
|
||||
}
|
||||
|
||||
const price = calculate(currentCard.value!)
|
||||
const newCard = { ...currentCard.value!, ...price }
|
||||
cards.value.splice(currentCardIndex.value, 1, newCard)
|
||||
isDirty.value = true
|
||||
updateLocalStorage()
|
||||
}
|
||||
|
||||
const openModal = (createNew : boolean, index : number) => {
|
||||
if (createNew) {
|
||||
currentCardIndex.value = -1
|
||||
currentCard.value = createCard(crypto.randomUUID())
|
||||
|
||||
modal.value?.$el.showModal()
|
||||
return
|
||||
}
|
||||
|
||||
currentCardIndex.value = index
|
||||
currentCard.value = { ...cards.value[index]! }
|
||||
|
||||
modal.value?.$el.showModal()
|
||||
return
|
||||
}
|
||||
|
||||
const openDeleteModal = () => {
|
||||
deleteModal.value?.$el.showModal()
|
||||
}
|
||||
|
||||
const updateLocalStorage = () => {
|
||||
localStorage.setItem('cards', JSON.stringify(cards.value))
|
||||
localStorage.setItem('cards', JSON.stringify(cards.value.map(card => {
|
||||
const { uuid, name, price, roles, sheets, layers } = card
|
||||
return { uuid, name, price, roles, sheets, layers }
|
||||
})))
|
||||
localStorage.setItem('sort', JSON.stringify(currentSort.value))
|
||||
}
|
||||
|
||||
|
|
@ -120,8 +167,16 @@ const sort = (index : number) => {
|
|||
isDirty.value = false
|
||||
}
|
||||
|
||||
const calculate = (card : Card) => {
|
||||
const ppr = +replaceComma(card.price) / +card.roles
|
||||
const pps = (ppr / +card.sheets) * 100
|
||||
const ppl = (pps / +card.layers)
|
||||
|
||||
return { ppr, pps, ppl }
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const cardsFromStorage = JSON.parse(localStorage.getItem('cards') ?? '[]')
|
||||
const cardsFromStorage = JSON.parse(localStorage.getItem('cards') ?? '[]').map((card : Card) => ({ ...card, ...calculate(card) }))
|
||||
cards.value = cardsFromStorage.length !== 0 ? cardsFromStorage : cards.value
|
||||
const sortFromStorage = +JSON.parse(localStorage.getItem('sort') ?? '0')
|
||||
sort(sortFromStorage)
|
||||
|
|
|
|||
81
app/pages/overview.vue
Executable file
81
app/pages/overview.vue
Executable file
|
|
@ -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>
|
||||
19
app/pages/privacy.vue
Normal file
19
app/pages/privacy.vue
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<template>
|
||||
<section class="flex-col gap-default content full">
|
||||
<h3>
|
||||
Datenschutzerklärung
|
||||
</h3>
|
||||
<p>
|
||||
Wir senden keinerlei Daten an Drittanbieter.
|
||||
</p>
|
||||
<p>
|
||||
Wir verwerten keinerlei Daten.
|
||||
</p>
|
||||
<p>
|
||||
Alle persistierten Daten befinden sich ausschließlich auf Ihrem Endgerät im sogenannten "localStorage" und werden ausschließlich auf Ihrem Gerät verarbeitet.
|
||||
</p>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
3
app/utils/number.ts
Normal file
3
app/utils/number.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
export const replaceComma = (value: string | number) => `${value}`.replace(',', '.')
|
||||
|
||||
export const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max)
|
||||
|
|
@ -6,8 +6,27 @@ export default defineNuxtConfig({
|
|||
compatibilityVersion: 4,
|
||||
},
|
||||
|
||||
nitro: {
|
||||
prerender: {
|
||||
routes: [
|
||||
'/',
|
||||
'/imprint',
|
||||
'/privacy',
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
routeRules: {
|
||||
'/': { prerender: true },
|
||||
'/imprint': { prerender: true },
|
||||
'/privacy': { prerender: true },
|
||||
},
|
||||
|
||||
modules: [
|
||||
'@nuxt/icon',
|
||||
'@vueuse/nuxt',
|
||||
'@nuxtjs/device',
|
||||
'nuxt-mongoose',
|
||||
],
|
||||
|
||||
css : [
|
||||
|
|
@ -19,5 +38,12 @@ export default defineNuxtConfig({
|
|||
'./app/assets/styles/priceCard.css',
|
||||
'./app/assets/styles/formInput.css',
|
||||
'./app/assets/styles/toolbar.css',
|
||||
]
|
||||
})
|
||||
],
|
||||
|
||||
mongoose: {
|
||||
uri: `${process.env.MONGODB_URI}`,
|
||||
modelsDir: 'models',
|
||||
devtools: true,
|
||||
},
|
||||
|
||||
})
|
||||
11770
package-lock.json
generated
Executable file → Normal file
11770
package-lock.json
generated
Executable file → Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -3,6 +3,7 @@
|
|||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"prepare": "nuxt prepare",
|
||||
"build": "nuxt build",
|
||||
"dev": "nuxt dev",
|
||||
"dev:expose": "nuxt dev --host",
|
||||
|
|
@ -11,8 +12,13 @@
|
|||
"postinstall": "nuxt prepare"
|
||||
},
|
||||
"dependencies": {
|
||||
"@iconify-json/simple-icons": "^1.2.32",
|
||||
"@iconify-json/uil": "^1.2.3",
|
||||
"@nuxt/icon": "^1.10.3",
|
||||
"nuxt": "^3.15.4",
|
||||
"@nuxtjs/device": "^3.2.4",
|
||||
"@vueuse/nuxt": "^13.1.0",
|
||||
"nuxt": "^3.16.2",
|
||||
"nuxt-mongoose": "^1.0.6",
|
||||
"vue": "latest",
|
||||
"vue-router": "latest"
|
||||
}
|
||||
|
|
|
|||
9
server/api/products/index.get.ts
Normal file
9
server/api/products/index.get.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
export default defineEventHandler(async () => {
|
||||
try {
|
||||
return await ProductSchema.find()
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
return []
|
||||
}
|
||||
|
||||
})
|
||||
49
server/models/product.schema.ts
Normal file
49
server/models/product.schema.ts
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
import { defineMongooseModel } from '#nuxt/mongoose'
|
||||
|
||||
export const ProductSchema = defineMongooseModel({
|
||||
name: 'products',
|
||||
schema: {
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
brand: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
image: {
|
||||
type: String,
|
||||
required: true,
|
||||
unique: true,
|
||||
},
|
||||
market: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
category: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
sku: {
|
||||
type: String,
|
||||
required: true,
|
||||
unique: true,
|
||||
},
|
||||
price: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
pieces: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
sheets: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
layers: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
}
|
||||
})
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
export type Card = {
|
||||
uuid: string
|
||||
name: string
|
||||
price: number
|
||||
roles: number
|
||||
sheets: number
|
||||
layers: number
|
||||
ppr: number
|
||||
pps: number
|
||||
ppl: number
|
||||
}
|
||||
uuid: string
|
||||
name: string
|
||||
price: string
|
||||
roles: string
|
||||
sheets: string
|
||||
layers: string
|
||||
}
|
||||
|
|
|
|||
12
shared/db/Product.ts
Normal file
12
shared/db/Product.ts
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
export type Product = {
|
||||
name: string
|
||||
brand: string
|
||||
image: string
|
||||
market: string
|
||||
category: string
|
||||
sku: string
|
||||
price: number
|
||||
pieces: number
|
||||
sheets: number
|
||||
layers: number
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue