From 4662a929a018154e0af209ee979694206d989365 Mon Sep 17 00:00:00 2001 From: TobiZog Date: Thu, 5 Sep 2024 17:47:02 +0200 Subject: [PATCH] VueRouter, Pinia state management, add pages, design preferences page --- software/backend/routes/api.routes.ts | 4 +- software/db.svg | 58 ------ software/package-lock.json | 170 ++++++++++++++++++ software/package.json | 4 + software/src/App.vue | 51 ++---- software/src/components/alertBanner.vue | 17 ++ software/src/data/enums/themeEnums.ts | 9 + software/src/data/models/bannerModel.ts | 6 + software/src/data/stores/userStore.ts | 9 + software/src/main.ts | 4 + software/src/pages/AccountPage.vue | 6 + software/src/pages/OrdersPage.vue | 6 + software/src/pages/ProductsPage.vue | 6 + software/src/pages/preferencesPage/index.vue | 34 ++++ .../src/pages/preferencesPage/pageSetup.vue | 25 +++ .../src/pages/preferencesPage/systemSetup.vue | 35 ++++ software/src/plugins/pinia.ts | 5 + software/src/plugins/router.ts | 10 ++ software/src/plugins/vuetify.ts | 47 ++++- software/src/router/routes.ts | 13 ++ 20 files changed, 424 insertions(+), 95 deletions(-) delete mode 100644 software/db.svg create mode 100644 software/src/components/alertBanner.vue create mode 100644 software/src/data/enums/themeEnums.ts create mode 100644 software/src/data/models/bannerModel.ts create mode 100644 software/src/data/stores/userStore.ts create mode 100644 software/src/pages/AccountPage.vue create mode 100644 software/src/pages/OrdersPage.vue create mode 100644 software/src/pages/ProductsPage.vue create mode 100644 software/src/pages/preferencesPage/index.vue create mode 100644 software/src/pages/preferencesPage/pageSetup.vue create mode 100644 software/src/pages/preferencesPage/systemSetup.vue create mode 100644 software/src/plugins/pinia.ts create mode 100644 software/src/plugins/router.ts create mode 100644 software/src/router/routes.ts diff --git a/software/backend/routes/api.routes.ts b/software/backend/routes/api.routes.ts index a975a0f..1a00e8b 100644 --- a/software/backend/routes/api.routes.ts +++ b/software/backend/routes/api.routes.ts @@ -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() }) \ No newline at end of file diff --git a/software/db.svg b/software/db.svg deleted file mode 100644 index 2dd62bb..0000000 --- a/software/db.svg +++ /dev/null @@ -1,58 +0,0 @@ - - - - - - -undefined - -database.sqlite - - -Categories - -Categories - -id* -integer -name -varchar(255) -createdAt -datetime -updatedAt -datetime - - - -Products - -Products - -id* -integer -brand -varchar(255) -name -varchar(255) -categoryId -integer -price -integer -discount -integer -createdAt -datetime -updatedAt -datetime - - - -Products->Categories - - - - - diff --git a/software/package-lock.json b/software/package-lock.json index a4aa785..2c9f066 100644 --- a/software/package-lock.json +++ b/software/package-lock.json @@ -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", diff --git a/software/package.json b/software/package.json index 2caa3b1..f69906f 100644 --- a/software/package.json +++ b/software/package.json @@ -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" }, diff --git a/software/src/App.vue b/software/src/App.vue index 797523c..52c2e3f 100644 --- a/software/src/App.vue +++ b/software/src/App.vue @@ -1,10 +1,14 @@ @@ -37,35 +29,26 @@ requestAllCategories() HackMyCart - + Shop Kategorien - + {{ category.name }} - Account & Hilfe - - - + Account + + + + + System & Hilfe + - - - - - - - Hinzufügen - - - Datenbank zurücksetzen - - - - + + diff --git a/software/src/components/alertBanner.vue b/software/src/components/alertBanner.vue new file mode 100644 index 0000000..11b63cc --- /dev/null +++ b/software/src/components/alertBanner.vue @@ -0,0 +1,17 @@ + + + \ No newline at end of file diff --git a/software/src/data/enums/themeEnums.ts b/software/src/data/enums/themeEnums.ts new file mode 100644 index 0000000..25ddfbe --- /dev/null +++ b/software/src/data/enums/themeEnums.ts @@ -0,0 +1,9 @@ +export enum ThemeEnum { + DARKRED = "darkRed", + LIGHTRED = "lightRed", + DARKBLUE = "darkBlue", + LIGHTBLUE = "lightBlue", + DARKGREEN = "darkGreen", + LIGHTGREEN = "lightGreen" + +} \ No newline at end of file diff --git a/software/src/data/models/bannerModel.ts b/software/src/data/models/bannerModel.ts new file mode 100644 index 0000000..06476b3 --- /dev/null +++ b/software/src/data/models/bannerModel.ts @@ -0,0 +1,6 @@ +export default class BannerModel { + message: string = "Success!" + show: boolean = false + color: string = "green" + icon: string = "mdi-check" +} \ No newline at end of file diff --git a/software/src/data/stores/userStore.ts b/software/src/data/stores/userStore.ts new file mode 100644 index 0000000..0af3932 --- /dev/null +++ b/software/src/data/stores/userStore.ts @@ -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("hackmycart/userStore/theme", ThemeEnum.DARKRED) + }) +}) \ No newline at end of file diff --git a/software/src/main.ts b/software/src/main.ts index b603a0b..3536f3a 100644 --- a/software/src/main.ts +++ b/software/src/main.ts @@ -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') diff --git a/software/src/pages/AccountPage.vue b/software/src/pages/AccountPage.vue new file mode 100644 index 0000000..42b3353 --- /dev/null +++ b/software/src/pages/AccountPage.vue @@ -0,0 +1,6 @@ + + + \ No newline at end of file diff --git a/software/src/pages/OrdersPage.vue b/software/src/pages/OrdersPage.vue new file mode 100644 index 0000000..5294a0b --- /dev/null +++ b/software/src/pages/OrdersPage.vue @@ -0,0 +1,6 @@ + + + \ No newline at end of file diff --git a/software/src/pages/ProductsPage.vue b/software/src/pages/ProductsPage.vue new file mode 100644 index 0000000..ba1c9f8 --- /dev/null +++ b/software/src/pages/ProductsPage.vue @@ -0,0 +1,6 @@ + + + \ No newline at end of file diff --git a/software/src/pages/preferencesPage/index.vue b/software/src/pages/preferencesPage/index.vue new file mode 100644 index 0000000..2da9e77 --- /dev/null +++ b/software/src/pages/preferencesPage/index.vue @@ -0,0 +1,34 @@ + + + \ No newline at end of file diff --git a/software/src/pages/preferencesPage/pageSetup.vue b/software/src/pages/preferencesPage/pageSetup.vue new file mode 100644 index 0000000..08ebc21 --- /dev/null +++ b/software/src/pages/preferencesPage/pageSetup.vue @@ -0,0 +1,25 @@ + + + \ No newline at end of file diff --git a/software/src/pages/preferencesPage/systemSetup.vue b/software/src/pages/preferencesPage/systemSetup.vue new file mode 100644 index 0000000..32899b5 --- /dev/null +++ b/software/src/pages/preferencesPage/systemSetup.vue @@ -0,0 +1,35 @@ + + + \ No newline at end of file diff --git a/software/src/plugins/pinia.ts b/software/src/plugins/pinia.ts new file mode 100644 index 0000000..fbb8e3b --- /dev/null +++ b/software/src/plugins/pinia.ts @@ -0,0 +1,5 @@ +import { createPinia } from "pinia" + +const pinia = createPinia() + +export default pinia \ No newline at end of file diff --git a/software/src/plugins/router.ts b/software/src/plugins/router.ts new file mode 100644 index 0000000..99a2215 --- /dev/null +++ b/software/src/plugins/router.ts @@ -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 \ No newline at end of file diff --git a/software/src/plugins/vuetify.ts b/software/src/plugins/vuetify.ts index 1b2ab4e..79a50ad 100644 --- a/software/src/plugins/vuetify.ts +++ b/software/src/plugins/vuetify.ts @@ -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 + } + } + } } }) diff --git a/software/src/router/routes.ts b/software/src/router/routes.ts new file mode 100644 index 0000000..05f2feb --- /dev/null +++ b/software/src/router/routes.ts @@ -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 \ No newline at end of file