Move software files one directory up, Readme
This commit is contained in:
65
src/pages/misc/homePage/bandsSection.vue
Normal file
65
src/pages/misc/homePage/bandsSection.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<script setup lang="ts">
|
||||
import { useBandStore } from '@/stores/band.store';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const bandStore = useBandStore()
|
||||
const router = useRouter()
|
||||
|
||||
bandStore.getBands()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-slide-group
|
||||
show-arrows
|
||||
center-active
|
||||
>
|
||||
<v-slide-group-item
|
||||
v-for="band of bandStore.bands"
|
||||
v-slot="{ isSelected, toggle }"
|
||||
>
|
||||
<v-hover
|
||||
v-slot="{ isHovering, props }"
|
||||
>
|
||||
<v-card
|
||||
:class="{ 'on-hover': isHovering }"
|
||||
:elevation="isHovering ? 12 : 2"
|
||||
v-bind="props"
|
||||
class="mx-2"
|
||||
@click="router.push('bands/details/' + band.name.replaceAll(' ', '-').toLowerCase())"
|
||||
>
|
||||
<v-img
|
||||
class="d-flex align-center text-center"
|
||||
:src="band.imageMembers"
|
||||
height="250px"
|
||||
width="350"
|
||||
cover
|
||||
>
|
||||
<v-card-title class="text-white text-h5">
|
||||
<p class="mt-4">
|
||||
{{ band.name }}
|
||||
</p>
|
||||
|
||||
<p class="ma-0 text-body-1 font-weight-bold">
|
||||
{{ band.genres[0].name }}
|
||||
</p>
|
||||
</v-card-title>
|
||||
</v-img>
|
||||
</v-card>
|
||||
</v-hover>
|
||||
</v-slide-group-item>
|
||||
</v-slide-group>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.v-card {
|
||||
transition: opacity .4s ease-in-out;
|
||||
}
|
||||
|
||||
.v-card:not(.on-hover) {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.show-btns {
|
||||
color: rgba(255, 255, 255, 1) !important;
|
||||
}
|
||||
</style>
|
||||
45
src/pages/misc/homePage/index.vue
Normal file
45
src/pages/misc/homePage/index.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<script setup lang="ts">
|
||||
import { useConcertStore } from '@/stores/concert.store';
|
||||
import { useLocationStore } from '@/stores/location.store';
|
||||
import bandSection from './bandsSection.vue';
|
||||
import UpcomingConcertsSection from './upcomingConcertsSection.vue';
|
||||
import TopLocationsSection from './topLocationsSection.vue';
|
||||
import { usePreferencesStore } from '@/stores/preferences.store';
|
||||
import welcomeDialog from './welcomeDialog.vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const concertStore = useConcertStore()
|
||||
const locationStore = useLocationStore()
|
||||
const preferencesStore = usePreferencesStore()
|
||||
const showWelcomeDialog = ref(false)
|
||||
|
||||
concertStore.getUpcomingConcerts()
|
||||
locationStore.getTopLocations()
|
||||
|
||||
// First startup
|
||||
if (preferencesStore.firstStartup) {
|
||||
showWelcomeDialog.value = true
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="pt-4">
|
||||
<band-section v-if="!preferencesStore.firstStartup" />
|
||||
</div>
|
||||
|
||||
<v-container v-if="!preferencesStore.firstStartup">
|
||||
<v-row>
|
||||
<v-spacer />
|
||||
|
||||
<v-col cols="10">
|
||||
<upcoming-concerts-section />
|
||||
|
||||
<top-locations-section />
|
||||
</v-col>
|
||||
|
||||
<v-spacer />
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<welcome-dialog :model-value="showWelcomeDialog" />
|
||||
</template>
|
||||
58
src/pages/misc/homePage/topLocationsSection.vue
Normal file
58
src/pages/misc/homePage/topLocationsSection.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<script setup lang="ts">
|
||||
import outlinedButton from '@/components/basics/outlinedButton.vue';
|
||||
import cardViewTopImage from '@/components/basics/cardViewTopImage.vue';
|
||||
import sectionDivider from '@/components/basics/sectionDivider.vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useLocationStore } from '@/stores/location.store';
|
||||
|
||||
const router = useRouter()
|
||||
const locationStore = useLocationStore()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<section-divider :title="$t('location.topLocations')" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col
|
||||
v-if="locationStore.fetchInProgress"
|
||||
v-for="n in 8"
|
||||
cols="6"
|
||||
md="3"
|
||||
>
|
||||
<card-view-top-image :loading="true" />
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
v-else
|
||||
v-for="location in locationStore.topLocations"
|
||||
cols="6"
|
||||
md="3"
|
||||
>
|
||||
<card-view-top-image
|
||||
:image="location.imageOutdoor"
|
||||
:title="location.name"
|
||||
smaller-title
|
||||
@click="router.push('/locations/details/' + location.name.replaceAll(' ', '-').toLowerCase())"
|
||||
:loading="locationStore.fetchInProgress"
|
||||
>
|
||||
{{ location.city.name }}, {{ location.city.country }}
|
||||
</card-view-top-image>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col>
|
||||
<outlined-button
|
||||
append-icon="mdi-chevron-right"
|
||||
@click="router.push('/locations')"
|
||||
block
|
||||
>
|
||||
{{ $t('location.allLocations') }}
|
||||
</outlined-button>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
61
src/pages/misc/homePage/upcomingConcertsSection.vue
Normal file
61
src/pages/misc/homePage/upcomingConcertsSection.vue
Normal file
@@ -0,0 +1,61 @@
|
||||
<script setup lang="ts">
|
||||
import { useConcertStore } from '@/stores/concert.store';
|
||||
import { useRouter } from 'vue-router';
|
||||
import cardViewTopImage from '@/components/basics/cardViewTopImage.vue';
|
||||
import outlinedButton from '@/components/basics/outlinedButton.vue';
|
||||
import sectionDivider from '@/components/basics/sectionDivider.vue';
|
||||
import moment from 'moment';
|
||||
|
||||
const concertStore = useConcertStore()
|
||||
const router = useRouter()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<section-divider :title="$t('concert.upcomingConcerts')" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col v-if="concertStore.fetchInProgress" v-for="n in 4" cols="6" md="3">
|
||||
<card-view-top-image :loading="true" />
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
v-else
|
||||
v-for="concert in concertStore.upcomingConcerts"
|
||||
cols="6"
|
||||
md="3"
|
||||
>
|
||||
<card-view-top-image
|
||||
:image="concert.image"
|
||||
:title="moment(concert.date).format('DD.MM.YYYY')"
|
||||
smaller-title
|
||||
@click="router.push('/bands/details/' + concert.band.name.replaceAll(' ', '-').toLowerCase())"
|
||||
:loading="concertStore.fetchInProgress"
|
||||
class="h-100"
|
||||
>
|
||||
<div>
|
||||
{{ concert.name }}
|
||||
</div>
|
||||
<div>
|
||||
{{ concert.band.name }}
|
||||
</div>
|
||||
{{ $t("misc.from") }} {{ (concert.price).toPrecision(4) }} €
|
||||
</card-view-top-image>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col>
|
||||
<outlined-button
|
||||
append-icon="mdi-chevron-right"
|
||||
@click="router.push('/concerts')"
|
||||
block
|
||||
>
|
||||
{{ $t('concert.allConcerts') }}
|
||||
</outlined-button>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
183
src/pages/misc/homePage/welcomeDialog.vue
Normal file
183
src/pages/misc/homePage/welcomeDialog.vue
Normal file
@@ -0,0 +1,183 @@
|
||||
<script setup lang="ts">
|
||||
import actionDialog from '@/components/basics/actionDialog.vue';
|
||||
import outlinedButton from '@/components/basics/outlinedButton.vue';
|
||||
import ServerStateText from '@/components/pageParts/serverStateText.vue';
|
||||
import { useFeedbackStore } from '@/stores/feedback.store';
|
||||
import { usePreferencesStore } from '@/stores/preferences.store';
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
const preferencesStore = usePreferencesStore()
|
||||
const feedbackStore = useFeedbackStore()
|
||||
const showDialog = defineModel()
|
||||
const currentStep = ref(0)
|
||||
|
||||
const steps = [
|
||||
feedbackStore.i18n.t('misc.firstStartup.connectToServer'),
|
||||
feedbackStore.i18n.t('misc.firstStartup.database'),
|
||||
feedbackStore.i18n.t('misc.firstStartup.exercises'),
|
||||
feedbackStore.i18n.t('misc.firstStartup.userData'),
|
||||
]
|
||||
|
||||
preferencesStore.getServerState()
|
||||
|
||||
|
||||
watch(() => currentStep.value, () => {
|
||||
switch(currentStep.value) {
|
||||
case 2: {
|
||||
preferencesStore.resetDb();
|
||||
break;
|
||||
}
|
||||
|
||||
case 3: {
|
||||
preferencesStore.resetExerciseProg();
|
||||
break;
|
||||
}
|
||||
|
||||
case 4: {
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<action-dialog
|
||||
v-model="showDialog"
|
||||
:title="$t('misc.firstStartup.title')"
|
||||
icon="mdi-human-greeting"
|
||||
max-width="800"
|
||||
persistent
|
||||
>
|
||||
<v-stepper
|
||||
v-model="currentStep"
|
||||
alt-labels
|
||||
flat
|
||||
>
|
||||
<template #default="{ prev, next }">
|
||||
<!-- Header items -->
|
||||
<v-stepper-header>
|
||||
<template v-for="(step, n) in steps">
|
||||
<v-stepper-item
|
||||
:complete="currentStep > n + 1"
|
||||
:title="step"
|
||||
:value="n + 1"
|
||||
complete-icon="mdi-check"
|
||||
color="green"
|
||||
/>
|
||||
|
||||
<v-divider v-if="n < steps.length - 1" />
|
||||
</template>
|
||||
</v-stepper-header>
|
||||
|
||||
|
||||
<!-- Content -->
|
||||
<v-stepper-window>
|
||||
<v-stepper-window-item
|
||||
:value="1"
|
||||
class="text-h4 text-center"
|
||||
>
|
||||
<div>
|
||||
{{ $t('preferences.serverState') }}:
|
||||
</div>
|
||||
|
||||
<server-state-text />
|
||||
</v-stepper-window-item>
|
||||
|
||||
<v-stepper-window-item
|
||||
:value="2"
|
||||
>
|
||||
<div v-if="preferencesStore.fetchInProgress" class="text-center text-h4 pb-4">
|
||||
<div class="pb-4">
|
||||
{{ $t('misc.firstStartup.createDatabase') }}
|
||||
</div>
|
||||
|
||||
<v-progress-linear indeterminate />
|
||||
</div>
|
||||
|
||||
<div v-else class="text-center text-h4 pb-4 text-green">
|
||||
<v-icon icon="mdi-check" /> {{ $t('misc.firstStartup.finished') }}
|
||||
</div>
|
||||
</v-stepper-window-item>
|
||||
|
||||
|
||||
<v-stepper-window-item
|
||||
:value="3"
|
||||
>
|
||||
<div v-if="preferencesStore.fetchInProgress" class="text-center text-h4 pb-4">
|
||||
<div class="pb-4">
|
||||
{{ $t('misc.firstStartup.createExercises') }}
|
||||
</div>
|
||||
|
||||
<v-progress-linear indeterminate />
|
||||
</div>
|
||||
|
||||
<div v-else class="text-center text-h4 pb-4 text-green">
|
||||
<v-icon icon="mdi-check" /> {{ $t('misc.firstStartup.finished') }}
|
||||
</div>
|
||||
</v-stepper-window-item>
|
||||
|
||||
|
||||
<v-stepper-window-item
|
||||
:value="4"
|
||||
>
|
||||
<v-container class="px-0 py-2">
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-text-field
|
||||
variant="outlined"
|
||||
hide-details
|
||||
:label="$t('misc.yourFullName')"
|
||||
v-model="preferencesStore.studentName"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-text-field
|
||||
variant="outlined"
|
||||
hide-details
|
||||
:label="$t('misc.registrationNumber')"
|
||||
v-model="preferencesStore.registrationNumber"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-stepper-window-item>
|
||||
</v-stepper-window>
|
||||
|
||||
|
||||
<!-- Next/Previous buttons -->
|
||||
<v-stepper-actions
|
||||
@click:next="next"
|
||||
>
|
||||
<template #prev="{ props }">
|
||||
<v-spacer />
|
||||
</template>
|
||||
|
||||
<template #next="{ props }">
|
||||
<outlined-button
|
||||
v-if="currentStep < 4"
|
||||
@click="props.onClick()"
|
||||
:disabled="preferencesStore.fetchInProgress"
|
||||
>
|
||||
{{ $t('misc.actions.next') }}
|
||||
</outlined-button>
|
||||
|
||||
<outlined-button
|
||||
v-else
|
||||
@click="showDialog = false; preferencesStore.firstStartup = false"
|
||||
:disabled="preferencesStore.studentName.length == 0 ||
|
||||
preferencesStore.registrationNumber.length == 0"
|
||||
prepend-icon="mdi-check"
|
||||
color="green"
|
||||
>
|
||||
{{ $t('misc.firstStartup.complete') }}
|
||||
</outlined-button>
|
||||
</template>
|
||||
</v-stepper-actions>
|
||||
</template>
|
||||
</v-stepper>
|
||||
</action-dialog>
|
||||
</template>
|
||||
Reference in New Issue
Block a user