einsimon/Volleyball-Website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updated UI

Browse source
This commit is contained in:
Simon Einzinger 2024-09-20 22:04:50 +02:00
parent b10a2ea8a5
commit 5c0eb2f077
8 changed files with 321 additions and 220 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
README.md
View file

@ -1,24 +1,29 @@
# hallendienst # Volleyball
## Project setup ## Project setup
``` ```
npm install npm install
``` ```
### Compiles and hot-reloads for development ### Compiles and hot-reloads for development
``` ```
npm run serve npm run serve
``` ```
### Compiles and minifies for production ### Compiles and minifies for production
``` ```
npm run build npm run build
``` ```
### Lints and fixes files ### Lints and fixes files
``` ```
npm run lint npm run lint
``` ```
### Customize configuration ### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/). See [Configuration Reference](https://cli.vuejs.org/config/).

209
src/App.vue
View file

@ -1,11 +1,17 @@
<template> <template>
<div id="app"> <div id="app">
<h1>DJK Saarbrücken-Rastpfuhl - Herren 1</h1> <h1>DJK Saarbrücken-Rastpfuhl - Herren 1</h1>
<div class="container">
<DutyDisplay :duties="duties" /> <div class="main-container">
</div> <!-- DutyDisplay Component -->
<div class="container"> <SectionContainer title="Mannschaftsdienste">
<GameDisplay :games="games" /> <DutyDisplay :duties="duties" />
</SectionContainer>
<!-- GameDisplay Component -->
<SectionContainer title="Anstehende Spiele">
<GameDisplay :games="games" />
</SectionContainer>
</div> </div>
</div> </div>
</template> </template>
@ -13,190 +19,71 @@
<script> <script>
import DutyDisplay from "./components/DutyDisplay.vue"; import DutyDisplay from "./components/DutyDisplay.vue";
import GameDisplay from "./components/GameDisplay.vue"; import GameDisplay from "./components/GameDisplay.vue";
import SectionContainer from "./components/SectionContainer.vue"; // New reusable container
import { duties, games } from "./data"; // Importing duties and games
export default { export default {
name: "App", name: "App",
components: { components: {
DutyDisplay, DutyDisplay,
GameDisplay, GameDisplay,
SectionContainer, // Reusable container for sections
}, },
data() { data() {
return { return {
duties: [ duties, // Use imported duties data
{ games, // Use imported games data
week: 1,
courtDuty: ["Jason", "Tim", "Jacob"],
cashDuty: ["Simon", "Max", "Dima"],
},
{
week: 2,
courtDuty: ["Niclas, Bruno"],
cashDuty: ["Oleksandr", "Volodymyr", "Jonathan"],
},
{
week: 3,
courtDuty: ["Benedikt", "MJ"],
cashDuty: ["Jason", "Tim", "Jacob"],
},
{
week: 4,
courtDuty: ["Ali", "Niklas"],
cashDuty: ["Niclas", "Bruno"],
},
{
week: 5,
courtDuty: ["Daniel", "Stephan"],
cashDuty: ["Benedikt", "MJ"],
},
{ week: 6, courtDuty: ["Kieran", "Marcel"], cashDuty: ["Ali, Niklas"] },
{
week: 7,
courtDuty: ["Simon", "Max", "Dima"],
cashDuty: ["Daniel", "Stephan"],
},
{
week: 8,
courtDuty: ["Oleksandr", "Volodymyr", "Jonathan"],
cashDuty: ["Kieran", "Marcel"],
},
],
games: [
{
date: "2024-09-21",
gameNr: 1,
team1: "Tv Saarwellingen",
team2: "DJK Saarbrücken-Rastpfuhl",
host: 1,
},
{
date: "2024-09-28",
gameNr: 1,
team1: "DJK Saarbrücken-Rastpfuhl",
team2: "SVK Blieskastel-Zweibrücken",
host: 1,
},
{
date: "2024-09-28",
gameNr: 2,
team1: "DJK Saarbrücken-Rastpfuhl",
team2: "TV Klarenthal",
host: 1,
},
{
date: "2024-11-02",
gameNr: 1,
team1: "TV Düppenweiler",
team2: "DJK Saarbrücken-Rastpfuhl",
host: 1,
},
{
date: "2024-11-09",
gameNr: 1,
team1: "DJK Saarbrücken-Rastpfuhl",
team2: "TV Brebach",
host: 1,
},
{
date: "2024-11-09",
gameNr: 2,
team1: "DJK Saarbrücken-Rastpfuhl",
team2: "TV 06 Limbach",
host: 1,
},
{
date: "2024-11-30",
gameNr: 2,
team1: "TV Saarwellingen 2",
team2: "DJK Saarbrücken-Rastpfuhl",
host: 1,
},
{
date: "2024-12-14",
gameNr: 2,
team1: "TV Wiesbach 2",
team2: "DJK Saarbrücken-Rastpfuhl",
host: 1,
},
{
date: "2025-01-11",
gameNr: 1,
team1: "TV Klarenthal",
team2: "DJK Saarbrücken-Rastpfuhl",
host: 1,
},
{
date: "2025-01-18",
gameNr: 1,
team1: "TV Brebach",
team2: "DJK Saarbrücken-Rastpfuhl",
host: 1,
},
{
date: "2025-02-01",
gameNr: 1,
team1: "DJK Saarbrücken-Rastpfuhl",
team2: "TV Düppenweiler",
host: 1,
},
{
date: "2025-02-01",
gameNr: 2,
team1: "DJK Saarbrücken-Rastpfuhl",
team2: "TV Wiesbach 2",
host: 1,
},
{
date: "2025-02-15",
gameNr: 1,
team1: "TV 06 Limbach",
team2: "DJK Saarbrücken-Rastpfuhl",
host: 1,
},
{
date: "2025-03-08",
gameNr: 1,
team1: "SVK Blieskastel-Zweibrücken",
team2: "DJK Saarbrücken-Rastpfuhl",
host: 2,
},
{
date: "2025-03-08",
gameNr: 2,
team1: "TV Saarwellingen",
team2: "DJK Saarbrücken-Rastpfuhl",
host: 2,
},
],
}; };
}, },
}; };
</script> </script>
<style> <style scoped>
#app { #app {
font-family: Avenir, Helvetica, Arial, sans-serif; font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center; text-align: center;
background-color: #f4f4f9; background-color: #f4f4f9;
min-height: 100vh; min-height: 100vh;
padding: 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center; /* Center content vertically */
align-items: center; align-items: center; /* Center content horizontally */
} }
h1 { h1 {
color: #34495e; color: #34495e;
margin-top: 20px; margin-bottom: 40px;
font-size: 2.5em; font-size: 2.5em;
font-weight: bold;
} }
.container { .main-container {
background-color: white; display: flex;
padding: 20px; flex-direction: column; /* Stack items vertically */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); gap: 20px;
border-radius: 10px;
max-width: 800px;
width: 100%; width: 100%;
margin-top: 20px; max-width: 1200px;
align-items: center; /* Center the containers horizontally */
}
@media (max-width: 768px) {
#app {
padding: 10px; /* Reduce padding on mobile */
}
h1 {
font-size: 2em; /* Smaller heading on mobile */
}
.main-container {
gap: 20px; /* Consistent spacing between sections */
}
}
@media (max-width: 480px) {
h1 {
font-size: 1.8em; /* Further reduce font size for smaller screens */
}
} }
</style> </style>

52
src/assets/global.css Normal file
View file

@ -0,0 +1,52 @@
.section-container {
background-color: white;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 10px;
width: 100%;
max-width: 500px;
margin: 0 auto;
}
h1,
h2 {
color: #34495e;
font-weight: bold;
}
h2 {
font-size: 1.8em;
text-transform: uppercase;
border-bottom: 2px solid #16a085;
padding-bottom: 10px;
text-align: left;
color: #16a085;
}
@media (max-width: 768px) {
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
.section-container {
padding: 15px;
}
}
@media (max-width: 480px) {
h1 {
font-size: 1.8em;
}
h2 {
font-size: 1.3em;
}
.section-container {
padding: 10px;
}
}

51
src/components/DutyDisplay.vue
View file

@ -1,33 +1,30 @@
<template> <template>
<div class="duties"> <div class="duty-container">
<h2>Mannschaftsdienste für Woche {{ currentWeek }}</h2> <div class="duty-section">
<div class="duty-container"> <div class="icon-top-right">
<div class="duty-section"> <i class="fa-solid fa-house"></i>
<div class="icon-top-right">
<i class="fa-solid fa-house"></i>
</div>
<div class="section-header">
<h3>Hallendienst</h3>
</div>
<ul>
<li v-for="person in currentDuties.courtDuty" :key="person">
{{ person }}
</li>
</ul>
</div> </div>
<div class="duty-section"> <div class="section-header">
<div class="icon-top-right"> <h3>Hallendienst</h3>
<i class="fas fa-money-bill-wave"></i>
</div>
<div class="section-header">
<h3>Kassendienst</h3>
</div>
<ul>
<li v-for="person in currentDuties.cashDuty" :key="person">
{{ person }}
</li>
</ul>
</div> </div>
<ul>
<li v-for="person in currentDuties.courtDuty" :key="person">
{{ person }}
</li>
</ul>
</div>
<div class="duty-section">
<div class="icon-top-right">
<i class="fas fa-money-bill-wave"></i>
</div>
<div class="section-header">
<h3>Kassendienst</h3>
</div>
<ul>
<li v-for="person in currentDuties.cashDuty" :key="person">
{{ person }}
</li>
</ul>
</div> </div>
</div> </div>
</template> </template>

49
src/components/GameDisplay.vue
View file

@ -1,35 +1,28 @@
<template> <template>
<div class="games"> <div v-if="upcomingGames.length" class="game-cards">
<h2>Anstehende Spiele</h2> <div class="game-card" v-for="(game, index) in upcomingGames" :key="index">
<div v-if="upcomingGames.length" class="game-cards"> <div class="icon-top-right">
<div <i class="fa-solid fa-volleyball"></i>
class="game-card"
v-for="(game, index) in upcomingGames"
:key="index"
>
<div class="icon-top-right">
<i class="fa-solid fa-volleyball"></i>
</div>
<h3>{{ formatDate(game.date) }} - Spiel {{ game.gameNr }}</h3>
<div class="teams">
<div class="team">
<i :class="getIconClass(game.team1)"></i>
<p>{{ game.team1 }}</p>
</div>
<p class="versus">VS</p>
<div class="team">
<i :class="getIconClass(game.team2)"></i>
<p>{{ game.team2 }}</p>
</div>
</div>
<p class="host">
<strong>Gastgeber:</strong>
{{ game.host === 1 ? game.team1 : game.team2 }}
</p>
</div> </div>
<h3>{{ formatDate(game.date) }} - Spiel {{ game.gameNr }}</h3>
<div class="teams">
<div class="team">
<i :class="getIconClass(game.team1)"></i>
<p>{{ game.team1 }}</p>
</div>
<p class="versus">VS</p>
<div class="team">
<i :class="getIconClass(game.team2)"></i>
<p>{{ game.team2 }}</p>
</div>
</div>
<p class="host">
<strong>Gastgeber:</strong>
{{ game.host === 1 ? game.team1 : game.team2 }}
</p>
</div> </div>
<p v-else>No upcoming games</p>
</div> </div>
<p v-else>No upcoming games</p>
</template> </template>
<script> <script>

20
src/components/SectionContainer.vue Normal file
View file

@ -0,0 +1,20 @@
<template>
<div class="section-container">
<h2>{{ title }}</h2>
<slot></slot>
</div>
</template>
<script>
export default {
name: "SectionContainer",
props: {
title: {
type: String,
required: true,
},
},
};
</script>
<style scoped></style>

146
src/data.js Normal file
View file

@ -0,0 +1,146 @@
export const duties = [
{
week: 1,
courtDuty: ["Jason", "Tim", "Jacob"],
cashDuty: ["Simon", "Max", "Dima"],
},
{
week: 2,
courtDuty: ["Niclas, Bruno"],
cashDuty: ["Oleksandr", "Volodymyr", "Jonathan"],
},
{
week: 3,
courtDuty: ["Benedikt", "MJ"],
cashDuty: ["Jason", "Tim", "Jacob"],
},
{
week: 4,
courtDuty: ["Ali", "Niklas"],
cashDuty: ["Niclas", "Bruno"],
},
{
week: 5,
courtDuty: ["Daniel", "Stephan"],
cashDuty: ["Benedikt", "MJ"],
},
{ week: 6, courtDuty: ["Kieran", "Marcel"], cashDuty: ["Ali, Niklas"] },
{
week: 7,
courtDuty: ["Simon", "Max", "Dima"],
cashDuty: ["Daniel", "Stephan"],
},
{
week: 8,
courtDuty: ["Oleksandr", "Volodymyr", "Jonathan"],
cashDuty: ["Kieran", "Marcel"],
},
];
export const games = [
{
date: "2024-09-21",
gameNr: 1,
team1: "Tv Saarwellingen",
team2: "DJK Saarbrücken-Rastpfuhl",
host: 1,
},
{
date: "2024-09-28",
gameNr: 1,
team1: "DJK Saarbrücken-Rastpfuhl",
team2: "SVK Blieskastel-Zweibrücken",
host: 1,
},
{
date: "2024-09-28",
gameNr: 2,
team1: "DJK Saarbrücken-Rastpfuhl",
team2: "TV Klarenthal",
host: 1,
},
{
date: "2024-11-02",
gameNr: 1,
team1: "TV Düppenweiler",
team2: "DJK Saarbrücken-Rastpfuhl",
host: 1,
},
{
date: "2024-11-09",
gameNr: 1,
team1: "DJK Saarbrücken-Rastpfuhl",
team2: "TV Brebach",
host: 1,
},
{
date: "2024-11-09",
gameNr: 2,
team1: "DJK Saarbrücken-Rastpfuhl",
team2: "TV 06 Limbach",
host: 1,
},
{
date: "2024-11-30",
gameNr: 2,
team1: "TV Saarwellingen 2",
team2: "DJK Saarbrücken-Rastpfuhl",
host: 1,
},
{
date: "2024-12-14",
gameNr: 2,
team1: "TV Wiesbach 2",
team2: "DJK Saarbrücken-Rastpfuhl",
host: 1,
},
{
date: "2025-01-11",
gameNr: 1,
team1: "TV Klarenthal",
team2: "DJK Saarbrücken-Rastpfuhl",
host: 1,
},
{
date: "2025-01-18",
gameNr: 1,
team1: "TV Brebach",
team2: "DJK Saarbrücken-Rastpfuhl",
host: 1,
},
{
date: "2025-02-01",
gameNr: 1,
team1: "DJK Saarbrücken-Rastpfuhl",
team2: "TV Düppenweiler",
host: 1,
},
{
date: "2025-02-01",
gameNr: 2,
team1: "DJK Saarbrücken-Rastpfuhl",
team2: "TV Wiesbach 2",
host: 1,
},
{
date: "2025-02-15",
gameNr: 1,
team1: "TV 06 Limbach",
team2: "DJK Saarbrücken-Rastpfuhl",
host: 1,
},
{
date: "2025-03-08",
gameNr: 1,
team1: "SVK Blieskastel-Zweibrücken",
team2: "DJK Saarbrücken-Rastpfuhl",
host: 2,
},
{
date: "2025-03-08",
gameNr: 2,
team1: "TV Saarwellingen",
team2: "DJK Saarbrücken-Rastpfuhl",
host: 2,
},
];

7
src/main.js
View file

@ -1,4 +1,5 @@
import { createApp } from 'vue' import { createApp } from "vue";
import App from './App.vue' import App from "./App.vue";
import "./assets/global.css";
createApp(App).mount('#app') createApp(App).mount("#app");