torsten/trainingstagebuch
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Torsten Schulz (notebook)
2024-08-16 16:34:23 +02:00
commit 31ca0979ce
4216 changed files with 499206 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/.gitignore vendored Normal file
View File

@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

3
frontend/.vscode/extensions.json vendored Normal file
View File

@@ -0,0 +1,3 @@
{
"recommendations": ["Vue.volar"]
}

5
frontend/README.md Normal file
View File

@@ -0,0 +1,5 @@
# Vue 3 + Vite
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).

14
frontend/index.html Normal file
View File

@@ -0,0 +1,14 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Trainingstagebuch</title>
</head>
<body>
<h1>Trainingstagebuch</h1>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

2481
frontend/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

45
frontend/package.json Normal file
View File

@@ -0,0 +1,45 @@
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"dependencies": {
"axios": "^1.7.3",
"core-js": "^3.8.3",
"vue": "^3.2.13",
"vue-router": "^4.4.0",
"vuex": "^4.1.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.6.2",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"sass": "^1.77.8",
"sass-loader": "^14.2.1",
"vite": "^4.5.3"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]
}

1
frontend/public/vite.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

70
frontend/src/App.vue Normal file
View File

@@ -0,0 +1,70 @@
<template>
<div class="main">
<div v-if="isAuthenticated" class="navigation">
Verein:
<select v-model="selectedClub">
<option value="">---</option>
<option value="new">Neuer Verein</option>
<option v-for="club in clubs" :key="club.id" :value="club.id">{{ club.name }}</option>
</select>
</div>
<router-view></router-view>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
import apiClient from './apiClient.js';
export default {
name: 'App',
data() {
return {
selectedClub: null, // Initialisiere selectedClub als null
};
},
computed: {
...mapGetters(['isAuthenticated', 'currentClub', 'clubs']),
},
watch: {
selectedClub(newVal) {
console.log('selectedClub watcher:', newVal);
this.setCurrentClub(newVal);
},
currentClub(newVal) {
console.log('currentClub watcher:', newVal);
if (newVal === 'new') {
this.$router.push('/createclub');
} else if (newVal) {
this.$router.push(`/showclub/${newVal}`);
}
}
},
methods: {
...mapActions(['setCurrentClub', 'setClubs']),
},
async mounted() {
const response = await apiClient.get('/clubs');
this.setClubs(response.data);
if (this.currentClub) {
this.selectedClub = this.currentClub;
}
}
};
</script>
<style>
.main {
display: flex;
height: 100%;
overflow: hidden;
flex: 1;
}
.navigation {
width: 10em;
background-color: #e0e0e0;
}
router-view {
flex: 1;
}
</style>

22
frontend/src/apiClient.js Normal file
View File

@@ -0,0 +1,22 @@
import axios from 'axios';
import store from './store';
const apiClient = axios.create({
baseURL: 'http://localhost:3000/api',
});
apiClient.interceptors.request.use(config => {
const token = store.getters.token;
const user = store.getters.username;
if (token) {
config.headers['authcode'] = token;
}
if (user) {
config.headers['userid'] = user;
}
return config;
});
export default apiClient;

16
frontend/src/assets/css/main.scss Normal file
View File

@@ -0,0 +1,16 @@
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
h1 {
border-bottom: 1px solid #000000;
}
#app {
flex: 1;
}

1
frontend/src/assets/vue.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 496 B

43
frontend/src/components/HelloWorld.vue Normal file
View File

@@ -0,0 +1,43 @@
<script setup>
import { ref } from 'vue'
defineProps({
msg: String,
})
const count = ref(0)
</script>
<template>
<h1>{{ msg }}</h1>
<div class="card">
<button type="button" @click="count++">count is {{ count }}</button>
<p>
Edit
<code>components/HelloWorld.vue</code> to test HMR
</p>
</div>
<p>
Check out
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
>create-vue</a
>, the official Vue + Vite starter
</p>
<p>
Learn more about IDE Support for Vue in the
<a
href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
target="_blank"
>Vue Docs Scaling up Guide</a
>.
</p>
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>
<style scoped>
.read-the-docs {
color: #888;
}
</style>

10
frontend/src/main.js Normal file
View File

@@ -0,0 +1,10 @@
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import '@/assets/css/main.scss';
createApp(App)
.use(router)
.use(store)
.mount('#app');

23
frontend/src/router.js Normal file
View File

@@ -0,0 +1,23 @@
import { createRouter, createWebHistory } from 'vue-router';
import Register from './views/Register.vue';
import Login from './views/Login.vue';
import Activate from './views/Activate.vue';
import Home from './views/Home.vue';
import CreateClub from './views/CreateClub.vue';
import ClubView from './views/ClubView.vue';
const routes = [
{ path: '/register', component: Register },
{ path: '/login', component: Login },
{ path: '/activate/:activationCode', component: Activate },
{ path: '/', component: Home },
{ path: '/createclub', component: CreateClub },
{ path: '/showclub/:1', component: ClubView },
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;

65
frontend/src/store.js Normal file
View File

@@ -0,0 +1,65 @@
import { createStore } from 'vuex';
const store = createStore({
state: {
token: localStorage.getItem('token') || null,
username: localStorage.getItem('username') || '',
currentClub: localStorage.getItem('currentClub') || null,
clubs: localStorage.getItem('clubs') || [],
},
mutations: {
setToken(state, token) {
state.token = token;
localStorage.setItem('token', token);
state.currentClub = null;
localStorage.setItem('currentClub', null);
},
setUsername(state, username) {
state.username = username;
localStorage.setItem('username', username);
},
setClub(state, club) {
state.currentClub = club;
localStorage.setItem('currentClub', club);
},
setClubsMutation(state, clubs) {
state.clubs = clubs;
localStorage.setItem('clubs', clubs);
},
clearToken(state) {
state.token = null;
localStorage.removeItem('token');
router.push("/");
},
clearUsername(state) {
state.username = '';
localStorage.removeItem('username');
}
},
actions: {
login({ commit }, { token, username }) {
commit('setToken', token);
commit('setUsername', username);
},
logout({ commit }) {
commit('clearToken');
commit('clearUsername');
},
setCurrentClub({ commit }, club) {
console.log('action', club);
commit('setClub', club);
},
setClubs({ commit }, clubs) {
commit('setClubsMutation', clubs);
}
},
getters: {
isAuthenticated: state => !!state.token,
token: state => state.token,
username: state => state.username,
currentClub: state => state.currentClub,
clubs: state => state.clubs,
},
});
export default store;

79
frontend/src/style.css Normal file
View File

@@ -0,0 +1,79 @@
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
.card {
padding: 2em;
}
#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}

27
frontend/src/views/Activate.vue Normal file
View File

@@ -0,0 +1,27 @@
<template>
<div>
<h2>Activate Account</h2>
<button @click="activate">Activate</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
methods: {
async activate() {
try {
const activationCode = this.$route.params.activationCode;
await axios.get(`/api/auth/activate/${activationCode}`);
alert('Account activated! You can now log in.');
this.$router.push('/login');
} catch (error) {
console.error(error);
alert('Activation failed.');
}
},
},
};
</script>

16
frontend/src/views/ClubView.vue Normal file
View File

@@ -0,0 +1,16 @@
<template>
<h2>Verein {{ club.name }}</h2>
</template>
<script>
export default {
name: "ClubView",
data() {
return {
club: {
name: '',
},
}
}
}
</script>

42
frontend/src/views/CreateClub.vue Normal file
View File

@@ -0,0 +1,42 @@
<template>
<div>
<h2>Verein anlegen</h2>
<label>Name des Vereins: <input type="text" v-model="clubName" /></label>
<button @click="createClub">Verein anlegen</button>
</div>
</template>
<script>
import { mapActions } from 'vuex/dist/vuex.cjs.js';
import apiClient from '../apiClient';
export default {
name: "CreateClubView",
data() {
return {
clubName: '',
}
},
methods: {
...mapActions(['setClubs', 'setCurrentClub']),
async createClub() {
if (this.clubName.trim().length < 3) {
alert('Bitte gib dem Verein einen Aussagekräftigen Namen');
return;
}
try {
const newClub = await apiClient.post('/clubs', { name: this.clubName });
const clubsResponse = await apiClient.get('/clubs');
this.setClubs(clubsResponse.data);
this.setCurrentClub(newClub.data);
} catch (error) {
if (error.status === 409) {
alert('Der Verein existiert bereits.');
} else {
alert('Ein unbekannter Fehler ist aufgetreten.');
}
}
}
}
}
</script>

20
frontend/src/views/Home.vue Normal file
View File

@@ -0,0 +1,20 @@
<template>
<div>
<h2>Home</h2>
<p v-if="!isAuthenticated">You are not logged in. <router-link to="/login">Login</router-link> or <router-link to="/register">Register</router-link></p>
<p v-else>Welcome! <button @click="logout">Logout</button></p>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
export default {
computed: {
...mapGetters(['isAuthenticated']),
},
methods: {
...mapActions(['logout']),
},
};
</script>

39
frontend/src/views/Login.vue Normal file
View File

@@ -0,0 +1,39 @@
<template>
<div>
<h2>Login</h2>
<form @submit.prevent="executeLogin">
<input v-model="email" type="email" placeholder="Email" required />
<input v-model="password" type="password" placeholder="Password" required />
<button type="submit">Login</button>
</form>
</div>
</template>
<script>
import axios from 'axios';
import { mapActions } from 'vuex';
export default {
data() {
return {
email: '',
password: '',
};
},
methods: {
...mapActions(['login']),
async executeLogin() {
try {
const response = await axios.post('http://localhost:3000/api/auth/login', { email: this.email, password: this.password }, {
timeout: 5000,
});
await this.login({ token: response.data.token, username: this.email });
this.$router.push('/');
} catch (error) {
console.error(error);
alert('Login failed.');
}
},
},
};
</script>

36
frontend/src/views/Register.vue Normal file
View File

@@ -0,0 +1,36 @@
<template>
<div>
<h2>Register</h2>
<form @submit.prevent="register">
<input v-model="email" type="email" placeholder="Email" required />
<input v-model="password" type="password" placeholder="Password" required />
<button type="submit">Register</button>
</form>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
email: '',
password: '',
};
},
methods: {
async register() {
try {
await axios.post('/api/auth/register', { email: this.email, password: this.password });
alert('Registration successful! Please check your email to activate your account.');
} catch (error) {
console.error(error);
alert('Registration failed.');
}
},
},
};
</script>

17
frontend/vite.config.js Normal file
View File

@@ -0,0 +1,17 @@
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': '/src'
}
},
server: {
port: 5000,
watch: {
usePolling: true,
}
},
});