diff --git a/.idea/workspace.xml b/.idea/workspace.xml index 81054d9..6807857 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -5,11 +5,22 @@ - + + + + + + - - - + + + + + + + + + @@ -103,7 +115,7 @@ - + diff --git a/frontend/package-lock.json b/frontend/package-lock.json index fab1083..a3ea7b3 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -10,7 +10,8 @@ "dependencies": { "pinia": "^3.0.1", "scss": "^0.2.4", - "vue": "^3.5.13" + "vue": "^3.5.13", + "vue-router": "^4.5.1" }, "devDependencies": { "@vitejs/plugin-vue": "^5.2.1", @@ -2046,6 +2047,27 @@ } } }, + "node_modules/vue-router": { + "version": "4.5.1", + "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.1.tgz", + "integrity": "sha512-ogAF3P97NPm8fJsE4by9dwSYtDwXIY1nFY9T6DyQnGHd1E2Da94w9JIolpe42LJGIl0DwOHBi8TcRPlPGwbTtw==", + "license": "MIT", + "dependencies": { + "@vue/devtools-api": "^6.6.4" + }, + "funding": { + "url": "https://github.com/sponsors/posva" + }, + "peerDependencies": { + "vue": "^3.2.0" + } + }, + "node_modules/vue-router/node_modules/@vue/devtools-api": { + "version": "6.6.4", + "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz", + "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==", + "license": "MIT" + }, "node_modules/vue-tsc": { "version": "2.2.4", "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.2.4.tgz", diff --git a/frontend/package.json b/frontend/package.json index 037003b..f19368c 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -11,7 +11,8 @@ "dependencies": { "pinia": "^3.0.1", "scss": "^0.2.4", - "vue": "^3.5.13" + "vue": "^3.5.13", + "vue-router": "^4.5.1" }, "devDependencies": { "@vitejs/plugin-vue": "^5.2.1", diff --git a/frontend/src/App.vue b/frontend/src/App.vue index c626557..e104d6a 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -1,46 +1,14 @@ \ No newline at end of file diff --git a/frontend/src/components/InfoHeader.vue b/frontend/src/components/InfoHeader.vue index d4ae32f..dcaeac7 100644 --- a/frontend/src/components/InfoHeader.vue +++ b/frontend/src/components/InfoHeader.vue @@ -5,7 +5,8 @@ import UserLoginInfo from "../items/UserLoginInfo.vue"; import SetingsIcon from "../assets/Icons/SetingsIcon.vue"; import DarkModeIcone from "../assets/Icons/DarkModeIcone.vue"; import LightModeIcone from "../assets/Icons/LightModeIcone.vue"; -import {onMounted, ref} from "vue"; +import {ref} from "vue"; +import router from "../router.ts"; const themeIs = ref("dark"); @@ -18,17 +19,9 @@ function switchThemeMode() { themeIs.value = newTheme; } -onMounted(() => { - const savedTheme = localStorage.getItem("theme"); - - if (savedTheme === "light" || savedTheme === "dark") { - themeIs.value = savedTheme; - } else { - themeIs.value = "dark"; - } - - document.documentElement.setAttribute("data-theme", themeIs.value); -}); +function navigateToSettings() { + router.push("/settings"); +} diff --git a/frontend/src/components/Playlist.vue b/frontend/src/components/Playlist.vue index 232593d..01160b6 100644 --- a/frontend/src/components/Playlist.vue +++ b/frontend/src/components/Playlist.vue @@ -25,10 +25,11 @@ const playlists = playlistsListStore(); diff --git a/frontend/src/components/SettingsHeader.vue b/frontend/src/components/SettingsHeader.vue new file mode 100644 index 0000000..6e6448b --- /dev/null +++ b/frontend/src/components/SettingsHeader.vue @@ -0,0 +1,38 @@ + + + + + \ No newline at end of file diff --git a/frontend/src/items/Button.vue b/frontend/src/items/Button.vue index 184ba84..974d633 100644 --- a/frontend/src/items/Button.vue +++ b/frontend/src/items/Button.vue @@ -2,7 +2,6 @@ import {defineProps} from "vue"; const props = defineProps<{ - label: string; type: 'primary' | 'secondary' | 'tertiary'; disabled: boolean; onClick: () => void; @@ -15,7 +14,7 @@ const props = defineProps<{ :disabled="props.disabled" @click="props.onClick" > - {{ props.label }} + diff --git a/frontend/src/main.ts b/frontend/src/main.ts index c4f39ed..c3cff7e 100644 --- a/frontend/src/main.ts +++ b/frontend/src/main.ts @@ -5,7 +5,9 @@ import App from './App.vue' const app = createApp(App); const pinia = createPinia(); +import router from './router'; app.use(pinia); +app.use(router); app.mount('#app'); diff --git a/frontend/src/router.ts b/frontend/src/router.ts new file mode 100644 index 0000000..0ebdfdb --- /dev/null +++ b/frontend/src/router.ts @@ -0,0 +1,18 @@ +import { createRouter, createWebHistory } from 'vue-router'; +import Home from './views/Home.vue'; +import Login from './views/DiscordLogin.vue'; +import Settings from './views/Settings.vue'; + + +const routes = [ + { path: '/', component: Home }, + { path: '/login', component: Login }, + { path: '/settings', component: Settings }, +]; + +const router = createRouter({ + history: createWebHistory(), + routes, +}); + +export default router; diff --git a/frontend/src/views/DiscordLogin.vue b/frontend/src/views/DiscordLogin.vue new file mode 100644 index 0000000..1d4711a --- /dev/null +++ b/frontend/src/views/DiscordLogin.vue @@ -0,0 +1,89 @@ + + + + + \ No newline at end of file diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue index a315cb4..1c77da3 100644 --- a/frontend/src/views/Home.vue +++ b/frontend/src/views/Home.vue @@ -1,96 +1,62 @@ \ No newline at end of file + diff --git a/frontend/src/views/HomeMobile.vue b/frontend/src/views/HomeMobile.vue new file mode 100644 index 0000000..345ea2c --- /dev/null +++ b/frontend/src/views/HomeMobile.vue @@ -0,0 +1,97 @@ + + + + + \ No newline at end of file diff --git a/frontend/src/views/Settings.vue b/frontend/src/views/Settings.vue new file mode 100644 index 0000000..d58889b --- /dev/null +++ b/frontend/src/views/Settings.vue @@ -0,0 +1,26 @@ + + + + + \ No newline at end of file