Refactor frontend, display tours with cards on ToursPage
This commit is contained in:
11
software/src/data/api/bandApi.ts
Normal file
11
software/src/data/api/bandApi.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import axios from "axios"
|
||||
|
||||
let BASE_URL = "http://localhost:3000/bands"
|
||||
|
||||
export async function getAllBands() {
|
||||
return await axios.get(BASE_URL)
|
||||
}
|
||||
|
||||
export async function getOneBand(id: number) {
|
||||
return await axios.get(BASE_URL + '/' + id)
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
import axios from "axios";
|
||||
|
||||
let BASE_URL = "http://localhost:3000/brands"
|
||||
|
||||
export async function getAllBrands() {
|
||||
return await axios.get(BASE_URL)
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
import axios from "axios"
|
||||
|
||||
let BASE_URL = "http://localhost:3000/categories"
|
||||
|
||||
export async function getAllCategories() {
|
||||
return await axios.get(BASE_URL)
|
||||
}
|
||||
7
software/src/data/api/genreApi.ts
Normal file
7
software/src/data/api/genreApi.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import axios from "axios"
|
||||
|
||||
let BASE_URL = "http://localhost:3000/genres"
|
||||
|
||||
export async function getAllGenres() {
|
||||
return await axios.get(BASE_URL)
|
||||
}
|
||||
7
software/src/data/api/locationApi.ts
Normal file
7
software/src/data/api/locationApi.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import axios from "axios"
|
||||
|
||||
let BASE_URL = "http://localhost:3000/locations"
|
||||
|
||||
export async function getAllLocations() {
|
||||
return await axios.get(BASE_URL)
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
import axios from "axios"
|
||||
|
||||
let BASE_URL = "http://localhost:3000/products"
|
||||
|
||||
/**
|
||||
* Fetch all products from API
|
||||
*/
|
||||
export async function getAllProducts() {
|
||||
return await axios.get(BASE_URL)
|
||||
}
|
||||
7
software/src/data/api/showApi.ts
Normal file
7
software/src/data/api/showApi.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import axios from "axios"
|
||||
|
||||
let BASE_URL = "http://localhost:3000/shows"
|
||||
|
||||
export async function getAllShows() {
|
||||
return await axios.get(BASE_URL)
|
||||
}
|
||||
10
software/src/data/api/tourApi.ts
Normal file
10
software/src/data/api/tourApi.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
import axios from "axios"
|
||||
|
||||
let BASE_URL = "http://localhost:3000/tours"
|
||||
|
||||
/**
|
||||
* Fetch all tours from API
|
||||
*/
|
||||
export async function getAllTours() {
|
||||
return await axios.get(BASE_URL)
|
||||
}
|
||||
@@ -1,11 +1,11 @@
|
||||
import { ProductModel } from "./productModel"
|
||||
import { ShowModel } from "./showModel"
|
||||
|
||||
export class BasketItemModel {
|
||||
id: number = -1
|
||||
quantity: number = 1
|
||||
product: ProductModel = new ProductModel()
|
||||
product: ShowModel = new ShowModel()
|
||||
|
||||
constructor(quantity: number, product: ProductModel) {
|
||||
constructor(quantity: number, product: ShowModel) {
|
||||
this.quantity = quantity
|
||||
this.product = product
|
||||
}
|
||||
|
||||
5
software/src/data/models/cityModel.ts
Normal file
5
software/src/data/models/cityModel.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
export class CityModel {
|
||||
id: Number
|
||||
name: String
|
||||
country: String
|
||||
}
|
||||
@@ -1,7 +1,9 @@
|
||||
import { CityModel } from "./cityModel"
|
||||
|
||||
export class LocationModel {
|
||||
id: Number
|
||||
name: String
|
||||
address: String
|
||||
city: String
|
||||
city: CityModel
|
||||
image: String
|
||||
}
|
||||
@@ -3,6 +3,5 @@ import { BandModel } from "./bandModel"
|
||||
export class MemberModel {
|
||||
id: Number
|
||||
name: String
|
||||
band: BandModel
|
||||
image: String
|
||||
}
|
||||
@@ -3,7 +3,6 @@ import { BandModel } from "./bandModel"
|
||||
|
||||
export class RatingModel {
|
||||
id: Number
|
||||
account: AccountModel
|
||||
rating: Number
|
||||
band: BandModel
|
||||
}
|
||||
@@ -2,9 +2,9 @@ import { BandModel } from "./bandModel"
|
||||
import { ShowModel } from "./showModel"
|
||||
|
||||
export class TourModel {
|
||||
id: Number
|
||||
name: String
|
||||
id: number
|
||||
name: string
|
||||
offered: boolean
|
||||
band: BandModel
|
||||
offered: Boolean
|
||||
shows: Array<ShowModel>
|
||||
}
|
||||
@@ -6,8 +6,7 @@ import { useFeedbackStore } from "./feedbackStore";
|
||||
import { BannerStateEnum } from "../enums/bannerStateEnum";
|
||||
import { addOrder } from "../api/orderApi";
|
||||
import { useAccountStore } from "./accountStore";
|
||||
import { ProductModel } from "../models/productModel";
|
||||
import { useProductStore } from "./productStore";
|
||||
import { ShowModel } from "../models/showModel";
|
||||
import { AddressModel } from "../models/addressModel";
|
||||
import { PaymentModel } from "../models/paymentModel";
|
||||
|
||||
@@ -53,21 +52,21 @@ export const useBasketStore = defineStore('basketStore', {
|
||||
/**
|
||||
* Add an item to the basket. If the product is already in the basket, the quantity will increase
|
||||
*
|
||||
* @param product Product to add
|
||||
* @param show Show to add
|
||||
* @param quantity Quantity of the product
|
||||
*/
|
||||
addItemToBasket(product: ProductModel, quantity: number) {
|
||||
addItemToBasket(show: ShowModel, quantity: number) {
|
||||
const feedbackStore = useFeedbackStore()
|
||||
feedbackStore.changeBanner(BannerStateEnum.BASKETPRODUCTADDED)
|
||||
|
||||
// Product is already in the basket, increase number of items
|
||||
if (this.itemsInBasket.find((basketItem: BasketItemModel) =>
|
||||
basketItem.product.id == product.id))
|
||||
basketItem.product.id == show.id))
|
||||
{
|
||||
this.itemsInBasket.find((basketItem: BasketItemModel) =>
|
||||
basketItem.product.id == product.id).quantity += quantity
|
||||
basketItem.product.id == show.id).quantity += quantity
|
||||
} else {
|
||||
this.itemsInBasket.push(new BasketItemModel(quantity, product))
|
||||
this.itemsInBasket.push(new BasketItemModel(quantity, show))
|
||||
}
|
||||
},
|
||||
|
||||
@@ -75,22 +74,23 @@ export const useBasketStore = defineStore('basketStore', {
|
||||
* Take an order to the server. Sends all articles in the basket and creates an order entry in the backend database
|
||||
*/
|
||||
async takeOrder() {
|
||||
const accountStore = useAccountStore()
|
||||
const productStore = useProductStore()
|
||||
const feedbackStore = useFeedbackStore()
|
||||
// todo
|
||||
// const accountStore = useAccountStore()
|
||||
// const productStore = useProductStore()
|
||||
// const feedbackStore = useFeedbackStore()
|
||||
|
||||
await addOrder(accountStore.userAccount.id, this.itemsInBasket, this.usedPayment.id, this.usedAddress.id)
|
||||
.then(async result => {
|
||||
if (result.status == 201) {
|
||||
await accountStore.refreshOrders()
|
||||
await productStore.fetchAllProducts()
|
||||
// await addOrder(accountStore.userAccount.id, this.itemsInBasket, this.usedPayment.id, this.usedAddress.id)
|
||||
// .then(async result => {
|
||||
// if (result.status == 201) {
|
||||
// await accountStore.refreshOrders()
|
||||
// await productStore.fetchAllProducts()
|
||||
|
||||
this.itemsInBasket = []
|
||||
feedbackStore.changeBanner(BannerStateEnum.ORDERPLACESUCCESSFUL)
|
||||
} else {
|
||||
feedbackStore.changeBanner(BannerStateEnum.ERROR)
|
||||
}
|
||||
})
|
||||
// this.itemsInBasket = []
|
||||
// feedbackStore.changeBanner(BannerStateEnum.ORDERPLACESUCCESSFUL)
|
||||
// } else {
|
||||
// feedbackStore.changeBanner(BannerStateEnum.ERROR)
|
||||
// }
|
||||
// })
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -1,92 +0,0 @@
|
||||
import { useLocalStorage } from "@vueuse/core";
|
||||
import { defineStore } from "pinia";
|
||||
import { getAllProducts } from "../api/productApi";
|
||||
import { SortOrder } from "../enums/sortOrderEnum";
|
||||
import { CategoryModel } from "../models/categoryModel";
|
||||
import { ProductModel } from "../models/productModel";
|
||||
import { BrandModel } from "../models/brandModel";
|
||||
import { getAllCategories } from "../api/categoryApi";
|
||||
import { getAllBrands } from "../api/brandApi";
|
||||
|
||||
|
||||
export const useProductStore = defineStore("productStore", {
|
||||
state: () => ({
|
||||
products: useLocalStorage<Array<ProductModel>>("hackmycart/productStore/products", []),
|
||||
filteredProducts: useLocalStorage<Array<ProductModel>>("hackmycart/productStore/filteredProducts", []),
|
||||
sortOrder: useLocalStorage<SortOrder>("hackmycart/productStore/sortOrder", SortOrder.NAMEATOZ),
|
||||
filteredCategory: useLocalStorage<CategoryModel>("hackmycart/productStore/filteredCategory", new CategoryModel()),
|
||||
onlyDiscounts: useLocalStorage<Boolean>("hackmycart/productStore/onlyDiscounts", false),
|
||||
brands: useLocalStorage<Array<BrandModel>>("hackmycart/productStore/brands", []),
|
||||
categories: useLocalStorage<Array<CategoryModel>>("hackmycart/productStore/categories", [])
|
||||
}),
|
||||
|
||||
actions: {
|
||||
async fetchAllProducts() {
|
||||
await getAllProducts()
|
||||
.then(products => {
|
||||
this.products = products.data
|
||||
this.filteredProducts = products.data
|
||||
})
|
||||
},
|
||||
|
||||
async fetchAllCategories() {
|
||||
await getAllCategories()
|
||||
.then(categories => {
|
||||
this.categories = categories.data
|
||||
})
|
||||
},
|
||||
|
||||
async fetchAllBrands() {
|
||||
await getAllBrands()
|
||||
.then(brands => {
|
||||
this.brands = brands.data
|
||||
})
|
||||
},
|
||||
|
||||
async filterProducts() {
|
||||
if (this.filteredCategory.id == -1 || this.filteredCategory.id == 0) {
|
||||
this.filteredProducts = this.products
|
||||
} else {
|
||||
this.filteredProducts = this.products.filter((product: ProductModel) =>
|
||||
product.category.id == this.filteredCategory.id
|
||||
)
|
||||
}
|
||||
|
||||
if (this.onlyDiscounts) {
|
||||
this.filteredProducts = this.filteredProducts.filter((product: ProductModel) =>
|
||||
product.discount > 0
|
||||
)
|
||||
}
|
||||
},
|
||||
|
||||
sortProducts() {
|
||||
this.filteredProducts.sort((a: ProductModel, b: ProductModel) => {
|
||||
switch (this.sortOrder)
|
||||
{
|
||||
case SortOrder.PRICELOWTOHIGH: {
|
||||
return a.price - b.price
|
||||
}
|
||||
case SortOrder.PRICEHIGHTOLOW: {
|
||||
return b.price - a.price
|
||||
}
|
||||
case SortOrder.NAMEATOZ: {
|
||||
if (b.name > a.name) {
|
||||
return -1
|
||||
}
|
||||
else {
|
||||
return 1
|
||||
}
|
||||
}
|
||||
case SortOrder.NAMEZTOA: {
|
||||
if (b.name < a.name) {
|
||||
return -1
|
||||
}
|
||||
else {
|
||||
return 1
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
21
software/src/data/stores/tourStore.ts
Normal file
21
software/src/data/stores/tourStore.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import { useLocalStorage } from "@vueuse/core";
|
||||
import { defineStore } from "pinia";
|
||||
import { TourModel } from "../models/tourModel";
|
||||
import { getAllTours } from "../api/tourApi";
|
||||
import { GenreModel } from "../models/genreModel";
|
||||
|
||||
export const useTourStore = defineStore("tourStore", {
|
||||
state: () => ({
|
||||
tours: useLocalStorage<Array<TourModel>>("hackmycart/tourStore/tours", []),
|
||||
genres: useLocalStorage<Array<GenreModel>>("hackmycart/tourStore/genres", [])
|
||||
}),
|
||||
|
||||
actions: {
|
||||
async fetchAllTours() {
|
||||
await getAllTours()
|
||||
.then(result => {
|
||||
this.tours = result.data
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user