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

VueRouter, Pinia state management, add pages, design preferences page

Browse Source
This commit is contained in:
Tobias Zoghaib
2024-09-05 17:47:02 +02:00
parent 6464521b04
commit 4662a929a0
20 changed files with 424 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
software/src/App.vue
View File

@@ -1,10 +1,14 @@
<script setup lang="ts">
import { ref } from 'vue';
import axios from 'axios';
import { useTheme } from 'vuetify/lib/framework.mjs';
import { useUserStore } from './data/stores/userStore';
const showDrawer = ref(true)
const userStore = useUserStore()
const categories = ref([])
const newCategory = ref("")
const theme = useTheme()
theme.global.name.value = userStore.theme
function requestAllCategories() {
axios.get('http://127.0.0.1:3000/categories')
@@ -14,18 +18,6 @@ function requestAllCategories() {
})
}
function addCategory() {
axios.post("http://127.0.0.1:3000/categories", {
name: newCategory.value
})
.then(requestAllCategories)
}
function resetDb() {
axios.post("http://127.0.0.1:3000/api/resetdatabase")
requestAllCategories()
}
requestAllCategories()
</script>
@@ -37,35 +29,26 @@ requestAllCategories()
<v-app-bar-title>HackMyCart</v-app-bar-title>
</v-app-bar>
<v-navigation-drawer>
<v-navigation-drawer permanent>
<v-list>
<v-list-subheader>Shop Kategorien</v-list-subheader>
<v-list-item v-for="category in categories" link :prepend-icon="category.icon">
<v-list-item v-for="category in categories" link :prepend-icon="category.icon" to="/">
{{ category.name }}
</v-list-item>
<v-list-subheader>Account & Hilfe</v-list-subheader>
<v-list-item title="Account" link prepend-icon="mdi-account" />
<v-list-item title="Bestellungen" link prepend-icon="mdi-cart-check" />
<v-list-item title="Einstellungen" link prepend-icon="mdi-cog" />
<v-list-subheader>Account</v-list-subheader>
<v-list-item title="Login" prepend-icon="mdi-login" to="/login" link />
<v-list-item title="Account" prepend-icon="mdi-account" to="/account" link />
<v-list-item title="Bestellungen" prepend-icon="mdi-cart-check" to="/orders" link />
<v-list-subheader>System & Hilfe</v-list-subheader>
<v-list-item title="Einstellungen" prepend-icon="mdi-cog" to="/preferences" link />
</v-list>
</v-navigation-drawer>
<v-main>
<v-container>
<v-row>
<v-col>
<v-text-field label="Category name" v-model="newCategory" />
</v-col>
<v-col cols="2">
<v-btn @click="addCategory" >Hinzufügen</v-btn>
</v-col>
<v-col cols="2">
<v-btn @click="resetDb">Datenbank zurücksetzen</v-btn>
</v-col>
</v-row>
</v-container>
<!-- todo -->
<!-- Here changes the router the content -->
<router-view></router-view>
</v-main>
</v-app>
</template>

17
software/src/components/alertBanner.vue Normal file
View File

@@ -0,0 +1,17 @@
<script setup lang="ts">
import BannerModel from '@/data/models/bannerModel';
const alertBanner = defineModel("alertBanner", { required: true, type: BannerModel })
</script>
<template>
<v-expand-transition>
<v-row v-if="alertBanner.show">
<v-col>
<v-alert v-model="alertBanner.show" :color="alertBanner.color" :icon="alertBanner.icon" closable>
{{ alertBanner.message }}
</v-alert>
</v-col>
</v-row>
</v-expand-transition>
</template>

9
software/src/data/enums/themeEnums.ts Normal file
View File

@@ -0,0 +1,9 @@
export enum ThemeEnum {
DARKRED = "darkRed",
LIGHTRED = "lightRed",
DARKBLUE = "darkBlue",
LIGHTBLUE = "lightBlue",
DARKGREEN = "darkGreen",
LIGHTGREEN = "lightGreen"
}

6
software/src/data/models/bannerModel.ts Normal file
View File

@@ -0,0 +1,6 @@
export default class BannerModel {
message: string = "Success!"
show: boolean = false
color: string = "green"
icon: string = "mdi-check"
}

9
software/src/data/stores/userStore.ts Normal file
View File

@@ -0,0 +1,9 @@
import { defineStore } from "pinia";
import { useLocalStorage } from "@vueuse/core";
import { ThemeEnum } from "../enums/themeEnums";
export const useUserStore = defineStore('user', {
state: () => ({
theme: useLocalStorage<ThemeEnum>("hackmycart/userStore/theme", ThemeEnum.DARKRED)
})
})

4
software/src/main.ts
View File

@@ -2,7 +2,11 @@ import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import router from './plugins/router'
import pinia from './plugins/pinia'
createApp(App)
.use(vuetify)
.use(router)
.use(pinia)
.mount('#app')

6
software/src/pages/AccountPage.vue Normal file
View File

@@ -0,0 +1,6 @@
<script setup lang="ts">
</script>
<template>
Account
</template>

6
software/src/pages/OrdersPage.vue Normal file
View File

@@ -0,0 +1,6 @@
<script setup lang="ts">
</script>
<template>
Orders
</template>

6
software/src/pages/ProductsPage.vue Normal file
View File

@@ -0,0 +1,6 @@
<script setup lang="ts">
</script>
<template>
Products
</template>

34
software/src/pages/preferencesPage/index.vue Normal file
View File

@@ -0,0 +1,34 @@
<script setup lang="ts">
import { Ref, ref } from 'vue';
import pageSetup from './pageSetup.vue';
import systemSetup from './systemSetup.vue';
import BannerModel from '@/data/models/bannerModel';
import alertBanner from '@/components/alertBanner.vue';
const banner: Ref<BannerModel> = ref(new BannerModel())
</script>
<template>
<v-container>
<v-row>
<v-col>
<v-container max-width="800">
<alert-banner v-model:alert-banner="banner" />
<v-row>
<v-col>
<page-setup />
</v-col>
</v-row>
<v-row>
<v-col>
<system-setup v-model:alert-banner="banner" />
</v-col>
</v-row>
</v-container>
</v-col>
</v-row>
</v-container>
</template>

25
software/src/pages/preferencesPage/pageSetup.vue Normal file
View File

@@ -0,0 +1,25 @@
<script setup lang="ts">
import { ThemeEnum } from '@/data/enums/themeEnums';
import { useTheme } from 'vuetify/lib/framework.mjs';
import { useUserStore } from '@/data/stores/userStore';
const userStore = useUserStore()
const theme = useTheme()
const themeEnums = Object.values(ThemeEnum)
function changeTheme() {
theme.global.name.value = userStore.theme
}
</script>
<template>
<v-card title="Page Setup" prepend-icon="mdi-view-dashboard">
<v-container>
<v-row>
<v-col>
<v-select v-model="userStore.theme" :items="themeEnums" label="Selected theme" @update:model-value="changeTheme" />
</v-col>
</v-row>
</v-container>
</v-card>
</template>

35
software/src/pages/preferencesPage/systemSetup.vue Normal file
View File

@@ -0,0 +1,35 @@
<script setup lang="ts">
import BannerModel from '@/data/models/bannerModel';
import axios from 'axios';
const alertBanner = defineModel("alertBanner", { required: true, type: BannerModel })
function resetDb() {
axios.get("http://127.0.0.1:3000/api/resetdatabase")
.then(res => {
if (res.status == 200) {
alertBanner.value.show = true
}
})
// todo: Request all data
}
function resetSettings() {
}
</script>
<template>
<v-card title="System Setup" prepend-icon="mdi-engine">
<v-container>
<v-row>
<v-col class="d-flex justify-center align-center">
<v-btn @click="resetDb" color="primary" prepend-icon="mdi-database-refresh">Datenbank zurücksetzen</v-btn>
</v-col>
<v-col class="d-flex justify-center align-center">
<v-btn @click="resetDb" color="primary" prepend-icon="mdi-cog-counterclockwise">Einstellungen zurücksetzen</v-btn>
</v-col>
</v-row>
</v-container>
</v-card>
</template>

5
software/src/plugins/pinia.ts Normal file
View File

@@ -0,0 +1,5 @@
import { createPinia } from "pinia"
const pinia = createPinia()
export default pinia

10
software/src/plugins/router.ts Normal file
View File

@@ -0,0 +1,10 @@
import { createRouter, createWebHistory } from 'vue-router'
import routes from './../router/routes'
// Router configuration
const router = createRouter({
history: createWebHistory(),
routes
})
export default router

47
software/src/plugins/vuetify.ts
View File

@@ -4,13 +4,58 @@ import '@mdi/font/css/materialdesignicons.css'
import { createVuetify } from 'vuetify/lib/framework.mjs'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import colors from 'vuetify/util/colors'
// Vuetify config
const vuetify = createVuetify({
components,
directives,
theme: {
defaultTheme: 'dark'
defaultTheme: 'dark',
themes: {
darkRed: {
dark: true,
colors: {
primary: colors.red.darken1,
secondary: colors.red.lighten2
}
},
lightRed: {
dark: false,
colors: {
primary: colors.red.darken1,
secondary: colors.red.darken4
}
},
darkBlue: {
dark: true,
colors: {
primary: colors.blue.darken1,
secondary: colors.blue.lighten2
}
},
lightBlue: {
dark: false,
colors: {
primary: colors.blue.darken1,
secondary: colors.blue.darken4
}
},
darkGreen: {
dark: true,
colors: {
primary: colors.green.darken1,
secondary: colors.green.lighten2
}
},
lightGreen: {
dark: false,
colors: {
primary: colors.green.darken1,
secondary: colors.green.darken4
}
}
}
}
})

13
software/src/router/routes.ts Normal file
View File

@@ -0,0 +1,13 @@
import AccountPage from "@/pages/AccountPage.vue";
import OrdersPage from "@/pages/OrdersPage.vue";
import PreferencesPage from "@/pages/preferencesPage/index.vue";
import ProductsPage from "@/pages/ProductsPage.vue";
const routes = [
{ path: '/', component: ProductsPage },
{ path: '/account', component: AccountPage },
{ path: '/orders', component: OrdersPage },
{ path: '/preferences', component: PreferencesPage },
]
export default routes