tobias/eventmaster
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

Product images

Browse Source
This commit is contained in:
Tobias Zoghaib
2024-09-06 18:49:22 +02:00
parent 53d079c95f
commit b585ceb81b
5 changed files with 21 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
software/backend/models/product.model.ts
View File

@@ -24,6 +24,9 @@ export class Product extends Model {
@Column @Column
rating: number rating: number
@Column
imageUrl: string
// Relations // Relations
@BelongsTo(() => Category) @BelongsTo(() => Category)
category: Category category: Category

15
software/backend/routes/api.routes.ts
View File

@@ -31,13 +31,14 @@ api.get("/resetdatabase", (req: Request, res: Response, next: NextFunction) => {
Product.bulkCreate( Product.bulkCreate(
[ [
{ id: 0, brand: "Tuxedo", name: "Hypherion Ultra Max", price: 999.99, categoryId: 0, discount: 10, rating: 4.6 }, { id: 0, brand: "Lenovo", name: "Thinkpad T14", price: 799.99, categoryId: 0, discount: 10, rating: 4.6, imageUrl: "https://f.media-amazon.com/images/I/51OHlMuJ5pL._AC_SL1280_.jpg" },
{ id: 1, brand: "Puma", name: "Men's Shirt", price: 14.99, categoryId: 2, discount: 0, rating: 3.8 }, { id: 1, brand: "Puma", name: "Men's Shirt", price: 14.99, categoryId: 2, discount: 0, rating: 3.8, imageUrl: "https://images.unsplash.com/photo-1496346236646-50e985b31ea4?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8dCUyMHNoaXJ0JTIwbWVufGVufDB8fDB8fHww" },
{ id: 2, brand: "Puma", name: "Woman's Shirt", price: 14.99, categoryId: 2, discount: 0, rating: 4.0 }, { id: 2, brand: "Puma", name: "Woman's Shirt", price: 14.99, categoryId: 2, discount: 0, rating: 4.0, imageUrl: "https://images.unsplash.com/photo-1485218126466-34e6392ec754?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8dCUyMHNoaXJ0JTIwd29tYW58ZW58MHx8MHx8fDA%3D" },
{ id: 3, brand: "George Orwell", name: "1984", price: 9.99, categoryId: 3, discount: 0, rating: 4.9 }, { id: 3, brand: "George Orwell", name: "1984", price: 9.99, categoryId: 3, discount: 0, rating: 4.9, imageUrl: "https://f.media-amazon.com/images/I/81BExVLr8sL._SL1500_.jpg" },
{ id: 4, brand: "Johann W. Goethe", name: "Faust", price: 4.99, categoryId: 3, discount: 0, rating: 4.2 }, { id: 4, brand: "Johann W. Goethe", name: "Faust", price: 4.99, categoryId: 3, discount: 0, rating: 4.2, imageUrl: "https://f.media-amazon.com/images/I/71p1k4JwDqL._SL1500_.jpg" },
{ id: 5, brand: "Theodor Sturm", name: "Der Schimmelreiter", price: 4.99, categoryId: 3, discount: 0, rating: 3.5 }, { id: 5, brand: "Theodor Sturm", name: "Der Schimmelreiter", price: 4.99, categoryId: 3, discount: 0, rating: 3.5, imageUrl: "https://f.media-amazon.com/images/I/81uUWtGmKtL._SL1500_.jpg" },
{ id: 6, brand: "Aldous Huxley", name: "Brave New World", price: 7.99, categoryId: 3, discount: 0, rating: 4.4 }, { id: 6, brand: "Aldous Huxley", name: "Brave New World", price: 7.99, categoryId: 3, discount: 0, rating: 4.4, imageUrl: "https://f.media-amazon.com/images/I/917t3Joq2WL._SL1500_.jpg" },
{ id: 7, brand: "Ankermann", name: "Gaming Work V3", price: 1299.99, categoryId: 0, discount: 0, rating: 4.7, imageUrl: "https://f.media-amazon.com/images/I/81gpDyNWhzL._AC_SL1500_.jpg" }
] ]
) )

1
software/src/data/models/productModel.ts
View File

@@ -6,6 +6,7 @@ export class ProductModel {
price: number = 0 price: number = 0
discount: number = 0 discount: number = 0
rating: number = 1 rating: number = 1
imageUrl: string = ""
createdAt: string = "" createdAt: string = ""
updatedAt: string = "" updatedAt: string = ""
} }

17
software/src/pages/productsPage/filterBar.vue
View File

@@ -25,24 +25,23 @@ const onlyDiscounts = defineModel("onlyDiscounts", { required: true, type: Boole
</script> </script>
<template> <template>
<v-card title="Filter" prepend-icon="mdi-filter"> <v-card>
<v-container> <v-card-title>
<v-row> <div v-if="numberOfItems == 1">
<v-col class="d-flex justify-left align-center">
<div v-if="numberOfItems == 1">
{{ numberOfItems }} Produkt {{ numberOfItems }} Produkt
</div> </div>
<div v-else> <div v-else>
{{ numberOfItems }} Produkte {{ numberOfItems }} Produkte
</div> </div>
</v-col> </v-card-title>
<v-container class="pb-0">
<v-row>
<v-spacer /> <v-spacer />
<v-col class="d-flex justify-center align-center"> <v-col class="d-flex justify-center align-center">
<v-checkbox label="Angebote" v-model="onlyDiscounts" /> <v-checkbox label="Angebote" v-model="onlyDiscounts" />
</v-col> </v-col>
<v-col> <v-col class="d-flex justify-left align-center">
<v-select :items="categories" label="Categories" v-model="selectedCategory" > <v-select :items="categories" label="Categories" v-model="selectedCategory" >
<template v-slot:item="{ props, item }"> <template v-slot:item="{ props, item }">
<v-list-item v-bind="props" :prepend-icon="item.raw.icon" :title="item.raw.name" /> <v-list-item v-bind="props" :prepend-icon="item.raw.icon" :title="item.raw.name" />
@@ -54,7 +53,7 @@ const onlyDiscounts = defineModel("onlyDiscounts", { required: true, type: Boole
</v-select> </v-select>
</v-col> </v-col>
<v-col> <v-col class="d-flex justify-left align-center">
<v-select label="Sortieren nach" :items="sortBy" v-model="sortedBy" > <v-select label="Sortieren nach" :items="sortBy" v-model="sortedBy" >
<template v-slot:item="{ props, item }"> <template v-slot:item="{ props, item }">
<v-list-item v-bind="props" :prepend-icon="item.raw.icon" :title="item.raw.name" /> <v-list-item v-bind="props" :prepend-icon="item.raw.icon" :title="item.raw.name" />

2
software/src/pages/productsPage/productCard.vue
View File

@@ -16,7 +16,7 @@ defineProps({
<template> <template>
<v-card link> <v-card link>
<v-img <v-img
src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?q=80&w=799&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" :src="product.imageUrl"
cover cover
max-height="200" max-height="200"
class="align-end text-white" class="align-end text-white"