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 8b1a396f68
commit 4d1eec023d
20 changed files with 424 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,7 +11,7 @@ api.get("/", (req: Request, res: Response, next: NextFunction) => {
res.send("Hello World!")
})
api.post("/resetdatabase", (req: Request, res: Response, next: NextFunction) => {
api.get("/resetdatabase", (req: Request, res: Response, next: NextFunction) => {
// Step 1: Delete all data tables
Category.destroy({ truncate: true })
OrderedItem.destroy({ truncate: true })
@@ -76,5 +76,5 @@ api.post("/resetdatabase", (req: Request, res: Response, next: NextFunction) =>
]
)
res.send("Success")
res.status(200).send()
})

58
software/db.svg
View File

@@ -1,58 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 2.43.0 (0)
-->
<!-- Title: undefined Pages: 1 -->
<svg width="378pt" height="252pt"
viewBox="0.00 0.00 377.60 251.60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(28.8 201.8)">
<title>undefined</title>
<polygon fill="white" stroke="transparent" points="-28.8,49.8 -28.8,-201.8 348.8,-201.8 348.8,49.8 -28.8,49.8"/>
<text text-anchor="start" x="116.5" y="12.6" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="12.00">database.sqlite</text>
<!-- Categories -->
<g id="node1" class="node">
<title>Categories</title>
<path fill="none" stroke="black" d="M12.24,-60.53C12.24,-60.53 132.24,-60.53 132.24,-60.53 138.24,-60.53 144.24,-66.53 144.24,-72.53 144.24,-72.53 144.24,-152.53 144.24,-152.53 144.24,-158.53 138.24,-164.53 132.24,-164.53 132.24,-164.53 12.24,-164.53 12.24,-164.53 6.24,-164.53 0.24,-158.53 0.24,-152.53 0.24,-152.53 0.24,-72.53 0.24,-72.53 0.24,-66.53 6.24,-60.53 12.24,-60.53"/>
<text text-anchor="start" x="37.24" y="-144.13" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="13.00">Categories</text>
<polyline fill="none" stroke="black" points="0.24,-134.53 144.24,-134.53 "/>
<text text-anchor="start" x="7.24" y="-120.93" font-family="Helvetica,sans-Serif" font-size="12.00">id* </text>
<text text-anchor="start" x="25.24" y="-120.93" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="12.00">integer</text>
<text text-anchor="start" x="7.24" y="-103.93" font-family="Helvetica,sans-Serif" font-size="12.00">name </text>
<text text-anchor="start" x="41.24" y="-103.93" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="12.00">varchar(255)</text>
<text text-anchor="start" x="7.24" y="-86.93" font-family="Helvetica,sans-Serif" font-size="12.00">createdAt </text>
<text text-anchor="start" x="62.24" y="-86.93" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="12.00">datetime</text>
<text text-anchor="start" x="7.24" y="-69.93" font-family="Helvetica,sans-Serif" font-size="12.00">updatedAt </text>
<text text-anchor="start" x="65.24" y="-69.93" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="12.00">datetime</text>
</g>
<!-- Products -->
<g id="node2" class="node">
<title>Products</title>
<path fill="none" stroke="black" d="M188.26,-0.23C188.26,-0.23 308.26,-0.23 308.26,-0.23 314.26,-0.23 320.26,-6.23 320.26,-12.23 320.26,-12.23 320.26,-160.23 320.26,-160.23 320.26,-166.23 314.26,-172.23 308.26,-172.23 308.26,-172.23 188.26,-172.23 188.26,-172.23 182.26,-172.23 176.26,-166.23 176.26,-160.23 176.26,-160.23 176.26,-12.23 176.26,-12.23 176.26,-6.23 182.26,-0.23 188.26,-0.23"/>
<text text-anchor="start" x="219.26" y="-151.83" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="13.00">Products</text>
<polyline fill="none" stroke="black" points="176.26,-142.23 320.26,-142.23 "/>
<text text-anchor="start" x="183.26" y="-128.63" font-family="Helvetica,sans-Serif" font-size="12.00">id* </text>
<text text-anchor="start" x="201.26" y="-128.63" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="12.00">integer</text>
<text text-anchor="start" x="183.26" y="-111.63" font-family="Helvetica,sans-Serif" font-size="12.00">brand </text>
<text text-anchor="start" x="217.26" y="-111.63" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="12.00">varchar(255)</text>
<text text-anchor="start" x="183.26" y="-94.63" font-family="Helvetica,sans-Serif" font-size="12.00">name </text>
<text text-anchor="start" x="217.26" y="-94.63" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="12.00">varchar(255)</text>
<text text-anchor="start" x="183.26" y="-77.63" font-family="Helvetica,sans-Serif" font-size="12.00">categoryId </text>
<text text-anchor="start" x="242.26" y="-77.63" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="12.00">integer</text>
<text text-anchor="start" x="183.26" y="-60.63" font-family="Helvetica,sans-Serif" font-size="12.00">price </text>
<text text-anchor="start" x="213.26" y="-60.63" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="12.00">integer</text>
<text text-anchor="start" x="183.26" y="-43.63" font-family="Helvetica,sans-Serif" font-size="12.00">discount </text>
<text text-anchor="start" x="232.26" y="-43.63" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="12.00">integer</text>
<text text-anchor="start" x="183.26" y="-26.63" font-family="Helvetica,sans-Serif" font-size="12.00">createdAt </text>
<text text-anchor="start" x="238.26" y="-26.63" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="12.00">datetime</text>
<text text-anchor="start" x="183.26" y="-9.63" font-family="Helvetica,sans-Serif" font-size="12.00">updatedAt </text>
<text text-anchor="start" x="241.26" y="-9.63" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="12.00">datetime</text>
</g>
<!-- Products&#45;&gt;Categories -->
<g id="edge1" class="edge">
<title>Products&#45;&gt;Categories</title>
<path fill="none" stroke="black" stroke-width="0.9" d="M176.16,-97C168.49,-98.15 160.65,-99.32 152.89,-100.48"/>
<polygon fill="black" stroke="black" stroke-width="0.9" points="152.02,-97.78 144.52,-101.73 152.84,-103.32 152.02,-97.78"/>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 5.4 KiB

170
software/package-lock.json generated
View File

@@ -9,17 +9,20 @@
"version": "0.0.0",
"dependencies": {
"@mdi/font": "^7.4.47",
"@vueuse/core": "^11.0.3",
"axios": "^1.7.7",
"body-parser": "^1.20.2",
"concurrently": "^8.2.2",
"cors": "^2.8.5",
"express": "^4.19.2",
"pinia": "^2.2.2",
"reflect-metadata": "^0.2.2",
"sequelize": "^6.37.3",
"sequelize-typescript": "^2.1.6",
"sqlite3": "^5.1.7",
"ts-node": "^10.9.2",
"vue": "^3.4.29",
"vue-router": "^4.4.3",
"vuetify": "^3.7.1",
"wait-on": "^8.0.0"
},
@@ -997,6 +1000,12 @@
"integrity": "sha512-w0URwf7BQb0rD/EuiG12KP0bailHKHP5YVviJG9zw3ykAokL0TuxU2TUqMB7EwZ59bDHYdeTIvjI5m0S7qHfOA==",
"license": "MIT"
},
"node_modules/@types/web-bluetooth": {
"version": "0.0.20",
"resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
"integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==",
"license": "MIT"
},
"node_modules/@vitejs/plugin-vue": {
"version": "5.1.3",
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.1.3.tgz",
@@ -1061,6 +1070,12 @@
"@vue/shared": "3.4.38"
}
},
"node_modules/@vue/devtools-api": {
"version": "6.6.3",
"resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.3.tgz",
"integrity": "sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw==",
"license": "MIT"
},
"node_modules/@vue/reactivity": {
"version": "3.4.38",
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.38.tgz",
@@ -1111,6 +1126,94 @@
"integrity": "sha512-q0xCiLkuWWQLzVrecPb0RMsNWyxICOjPrcrwxTUEHb1fsnvni4dcuyG7RT/Ie7VPTvnjzIaWzRMUBsrqNj/hhw==",
"license": "MIT"
},
"node_modules/@vueuse/core": {
"version": "11.0.3",
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-11.0.3.tgz",
"integrity": "sha512-RENlh64+SYA9XMExmmH1a3TPqeIuJBNNB/63GT35MZI+zpru3oMRUA6cEFr9HmGqEgUisurwGwnIieF6qu3aXw==",
"license": "MIT",
"dependencies": {
"@types/web-bluetooth": "^0.0.20",
"@vueuse/metadata": "11.0.3",
"@vueuse/shared": "11.0.3",
"vue-demi": ">=0.14.10"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@vueuse/core/node_modules/vue-demi": {
"version": "0.14.10",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
"integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
"hasInstallScript": true,
"license": "MIT",
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/@vueuse/metadata": {
"version": "11.0.3",
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-11.0.3.tgz",
"integrity": "sha512-+FtbO4SD5WpsOcQTcC0hAhNlOid6QNLzqedtquTtQ+CRNBoAt9GuV07c6KNHK1wCmlq8DFPwgiLF2rXwgSHX5Q==",
"license": "MIT",
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@vueuse/shared": {
"version": "11.0.3",
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-11.0.3.tgz",
"integrity": "sha512-0rY2m6HS5t27n/Vp5cTDsKTlNnimCqsbh/fmT2LgE+aaU42EMfXo8+bNX91W9I7DDmxfuACXMmrd7d79JxkqWA==",
"license": "MIT",
"dependencies": {
"vue-demi": ">=0.14.10"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@vueuse/shared/node_modules/vue-demi": {
"version": "0.14.10",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
"integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
"hasInstallScript": true,
"license": "MIT",
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/abbrev": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -3299,6 +3402,58 @@
"url": "https://github.com/sponsors/jonschlinkert"
}
},
"node_modules/pinia": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/pinia/-/pinia-2.2.2.tgz",
"integrity": "sha512-ja2XqFWZC36mupU4z1ZzxeTApV7DOw44cV4dhQ9sGwun+N89v/XP7+j7q6TanS1u1tdbK4r+1BUx7heMaIdagA==",
"license": "MIT",
"dependencies": {
"@vue/devtools-api": "^6.6.3",
"vue-demi": "^0.14.10"
},
"funding": {
"url": "https://github.com/sponsors/posva"
},
"peerDependencies": {
"@vue/composition-api": "^1.4.0",
"typescript": ">=4.4.4",
"vue": "^2.6.14 || ^3.3.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
},
"typescript": {
"optional": true
}
}
},
"node_modules/pinia/node_modules/vue-demi": {
"version": "0.14.10",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
"integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
"hasInstallScript": true,
"license": "MIT",
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/postcss": {
"version": "8.4.44",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.44.tgz",
@@ -4495,6 +4650,21 @@
}
}
},
"node_modules/vue-router": {
"version": "4.4.3",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.3.tgz",
"integrity": "sha512-sv6wmNKx2j3aqJQDMxLFzs/u/mjA9Z5LCgy6BE0f7yFWMjrPLnS/sPNn8ARY/FXw6byV18EFutn5lTO6+UsV5A==",
"license": "MIT",
"dependencies": {
"@vue/devtools-api": "^6.6.3"
},
"funding": {
"url": "https://github.com/sponsors/posva"
},
"peerDependencies": {
"vue": "^3.2.0"
}
},
"node_modules/vuetify": {
"version": "3.7.1",
"resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.7.1.tgz",

4
software/package.json
View File

@@ -18,16 +18,20 @@
},
"dependencies": {
"@mdi/font": "^7.4.47",
"@vueuse/core": "^11.0.3",
"axios": "^1.7.7",
"body-parser": "^1.20.2",
"concurrently": "^8.2.2",
"cors": "^2.8.5",
"express": "^4.19.2",
"pinia": "^2.2.2",
"reflect-metadata": "^0.2.2",
"sequelize": "^6.37.3",
"sequelize-typescript": "^2.1.6",
"sqlite3": "^5.1.7",
"ts-node": "^10.9.2",
"vue": "^3.4.29",
"vue-router": "^4.4.3",
"vuetify": "^3.7.1",
"wait-on": "^8.0.0"
},

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