Rakantor/iu-quiz-app
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor: layout

Browse Source
This commit is contained in:
Rakantor
2022-11-04 17:44:32 +01:00
parent 56820b25c6
commit f5d0734e84
11 changed files with 121 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
pages/courses/_course/index.vue
View File

@@ -1,26 +1,56 @@
<template>
<v-container fluid class="pa-0">
<v-sheet class="rounded-lg pa-2">
<span class="text-h4 text--secondary">{{ courseID.toUpperCase() }}</span>
<span class="text-h4">{{ $store.getters.getCourseByID(courseID).name }}</span>
</v-sheet>
<v-container>
<v-row>
<v-col v-if="isAuthorized" cols="12">
<TutorPanel :course-id="courseID" />
</v-col>
<v-col cols="12">
<Challenge :course-id="courseID" />
</v-col>
<v-col cols="12">
<Coop :course-id="courseID" />
</v-col>
</v-row>
</v-container>
<v-row>
<v-col cols="12" sm="6">
<v-card height="100%" class="d-flex align-center pa-2">
<v-row no-gutters>
<v-col cols="12">
<span class="text-h5 text--secondary">{{ courseID.toUpperCase() }}</span>
</v-col>
<v-col cols="12">
<span class="text-h5">{{ $store.getters.getCourseByID(courseID).name }}</span>
</v-col>
</v-row>
</v-card>
</v-col>
<v-col cols="12" sm="6">
<v-card>
<v-card-title>Tutor</v-card-title>
<v-card-text>
<v-row align="center">
<v-col cols="auto">
<v-avatar size="64">
<img src="https://www.w3schools.com/howto/img_avatar.png" />
</v-avatar>
</v-col>
<v-col>
<div>{{ tutorName }}</div>
<div>{{ tutorEmail }}</div>
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-col>
<v-col cols="12">
<v-row>
<v-col v-if="isAuthorized" cols="12">
<TutorPanel :course-id="courseID" />
</v-col>
<v-col cols="12">
<Challenge :course-id="courseID" />
</v-col>
<v-col cols="12">
<Coop :course-id="courseID" />
</v-col>
</v-row>
</v-col>
</v-row>
</v-container>
</template>
<script>
import _capitalize from 'lodash-es/capitalize'
export default {
name: 'CourseIndexPage',
data() {
@@ -33,6 +63,17 @@ export default {
const isTutor = this.$auth.currentUser.email.endsWith('@iu.org')
const isAdmin = this.$store.getters.isAdmin
return isTutor || isAdmin
},
tutorEmail () {
return this.$store.getters.getCourseByID(this.courseID).tutor
},
tutorName () {
const nameParsed = this.tutorEmail.split('@')[0]
const nameParts = []
for (const namePart of nameParsed.split('.')) {
nameParts.push(_capitalize(namePart))
}
return nameParts.join(' ')
}
},
created () {

2
pages/courses/_course/play.vue
View File

@@ -27,7 +27,7 @@
</v-row>
</v-container>
<v-container v-else fluid class="fill-height">
<v-card flat color="transparent" class="mx-auto">
<v-card color="transparent" class="mx-auto">
<v-progress-circular indeterminate color="primary" size="64"></v-progress-circular>
</v-card>
</v-container>

2
pages/index.vue
View File

@@ -53,7 +53,7 @@ export default {
},
createUser () {
const displayName = _capitalize(this.$auth.currentUser.email.split('.')[0])
const user = new User(displayName, [])
const user = new User(displayName, [], [])
// Add a new document in collection "users"
setDoc(doc(this.$db, 'benutzer', this.$auth.currentUser.uid).withConverter(UserConverter), user)

21
pages/login.vue
View File

@@ -3,8 +3,12 @@
<!-- TODO: For demo purposes only. Delete in production. -->
<DemoInfoDialog />
<!-- -->
<v-card v-if="existingUser" width="500px" elevation="12" class="mx-auto">
<v-card-text>
<v-card width="500" elevation="12" class="mx-auto">
<v-card-title class="mb-3">
<span class="text-h3 font-weight-black flex-grow-1 flex-shrink-0">Quiz App</span>
<v-img src="/iu-logo.svg" height="40" contain class="flex-grow-0 flex-shrink-1"></v-img>
</v-card-title>
<v-card-text v-if="existingUser">
<v-form ref="loginForm" v-model="valid">
<v-text-field
v-model="email"
@@ -28,18 +32,15 @@
color="primary"
:loading="loading"
:disabled="loading"
class="mt-3"
@click="signIn"
>
Anmelden
</v-btn>
</v-card-text>
<v-card-text>
<v-btn text block color="primary" @click="existingUser = false">Noch kein Konto?</v-btn>
<v-btn text block color="primary" class="mt-3" @click="existingUser = false">Noch kein Konto?</v-btn>
<v-btn text block color="primary" @click="showPwResetDialog = true">Passwort vergessen?</v-btn>
</v-card-text>
</v-card>
<v-card v-else width="500px" elevation="12" class="mx-auto">
<v-card-text>
<v-card-text v-else>
<v-form ref="signupForm" v-model="valid">
<v-text-field
v-model="email"
@@ -113,7 +114,7 @@
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" outlined @click="showPwResetDialog = false">Abbrechen</v-btn>
<v-btn color="primary" text @click="showPwResetDialog = false">Abbrechen</v-btn>
<v-btn color="primary" depressed :loading="loading" :disabled="loading" @click="resetPassword">Link senden</v-btn>
</v-card-actions>
</v-card>
@@ -139,7 +140,7 @@ export default {
valid: false,
showPassword: false,
showPwResetDialog: false,
defaultErrorReqField: 'Feld darf nicht leer sein',
defaultErrorReqField: 'Pflichtfeld',
email: '',
emailRules: [
v => !!v || this.defaultErrorReqField,

4
pages/user.vue
View File

@@ -1,6 +1,6 @@
<template>
<v-container>
<v-sheet class="rounded-lg pa-4">
<v-card class="pa-4">
<v-row align="center">
<v-col cols="auto" style="position: relative">
<v-avatar size="200">
@@ -35,7 +35,7 @@
</v-btn>
</v-col>
</v-row>
</v-sheet>
</v-card>
</v-container>
</template>