frontend/teacher-View-erstellen #69
6 changed files with 111 additions and 76 deletions
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
#app {
|
||||
margin-left: 325px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
a,
|
||||
|
|
|
|||
|
|
@ -33,7 +33,6 @@ function setClass(input: number) {
|
|||
header="Sidebar"
|
||||
v-if="isLoggedIn"
|
||||
>
|
||||
<h1 v-if="store.classInfo != null">{{ store.classInfo.name }}</h1>
|
||||
<div v-if="isTeacher">
|
||||
<ul>
|
||||
<li v-for="item in elements">
|
||||
|
|
@ -44,10 +43,10 @@ function setClass(input: number) {
|
|||
<div v-else>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/about">Offene/Abgegebene Evaluaionsbögen</a>
|
||||
<p href="/about">Offene/Abgegebene Evaluaionsbögen</p>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/about">Notenübersicht</a>
|
||||
<p href="/about">Notenübersicht</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import HomeView from '../views/HomeView.vue'
|
||||
import TeacherView from '../views/TeacherView.vue'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: HomeView,
|
||||
name: 'teacher',
|
||||
component: TeacherView,
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
|
|
@ -29,7 +29,6 @@ const router = createRouter({
|
|||
|
||||
component: () => import('../views/LoginView.vue'),
|
||||
},
|
||||
|
||||
],
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<h1>Home View</h1>
|
||||
</template>
|
||||
|
|
@ -1,68 +1,76 @@
|
|||
<template>
|
||||
<div class="Login">
|
||||
<h1>This is the Login Page</h1>
|
||||
</div>
|
||||
<div class="card flex justify-center">
|
||||
<Form :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
|
||||
<FormField v-slot="$field" as="section" name="username" initialValue="" class="flex flex-col gap-2">
|
||||
<InputText type="text" placeholder="Username" />
|
||||
<Message v-if="$field?.invalid" severity="error" size="small" variant="simple">{{ $field.error?.message }}</Message>
|
||||
</FormField>
|
||||
<FormField v-slot="$field" asChild name="password" initialValue="">
|
||||
<section class="flex flex-col gap-2">
|
||||
<Password type="text" placeholder="Password" :feedback="false" toggleMask fluid />
|
||||
<Message v-if="$field?.invalid" severity="error" size="small" variant="simple">{{ $field.error?.message }}</Message>
|
||||
</section>
|
||||
</FormField>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
<script setup>
|
||||
import InputText from 'primevue/inputtext'
|
||||
import Button from 'primevue/button'
|
||||
import Message from 'primevue/message'
|
||||
import Password from 'primevue/password'
|
||||
import Checkbox from 'primevue/checkbox'
|
||||
|
||||
</Form>
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox v-model="remember" inputId="rememberme" binary/>
|
||||
<label for="rememberme"> Rememberme </label>
|
||||
</div>
|
||||
</div>
|
||||
import { FormField } from '@primevue/forms'
|
||||
import { Form } from '@primevue/forms'
|
||||
import { zodResolver } from '@primevue/forms/resolvers/zod'
|
||||
import { z } from 'zod'
|
||||
import { useToast } from 'primevue/usetoast'
|
||||
import { ref } from 'vue'
|
||||
|
||||
</template>
|
||||
const remember = ref(false)
|
||||
|
||||
<script setup>
|
||||
import InputText from 'primevue/inputtext';
|
||||
import Button from 'primevue/button';
|
||||
import Message from 'primevue/message';
|
||||
import Password from 'primevue/password';
|
||||
import Checkbox from 'primevue/checkbox';
|
||||
const toast = useToast()
|
||||
|
||||
import { FormField } from '@primevue/forms';
|
||||
import { Form } from '@primevue/forms';
|
||||
import { zodResolver } from '@primevue/forms/resolvers/zod';
|
||||
import { z } from 'zod';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import { ref } from "vue";
|
||||
const resolver = zodResolver(
|
||||
z.object({
|
||||
username: z.string().min(1, { message: 'Username is required.' }),
|
||||
password: z.string().min(1, { message: 'Password is required.' }),
|
||||
}),
|
||||
)
|
||||
|
||||
const remember = ref(false);
|
||||
|
||||
const toast = useToast();
|
||||
|
||||
const resolver = zodResolver(
|
||||
z.object({
|
||||
username: z.string().min(1, { message: 'Username is required.' }),
|
||||
password: z.string().min(1, { message: 'Password is required.' })
|
||||
})
|
||||
);
|
||||
|
||||
const onFormSubmit = ({ valid }) => {
|
||||
if (valid) {
|
||||
toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
@media (min-width: 1024px) {
|
||||
.about {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
const onFormSubmit = ({ valid }) => {
|
||||
if (valid) {
|
||||
toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 })
|
||||
}
|
||||
</style>
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="Login">
|
||||
<h1>This is the Login Page</h1>
|
||||
</div>
|
||||
<div class="card flex justify-center">
|
||||
<Form :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
|
||||
<FormField
|
||||
v-slot="$field"
|
||||
as="section"
|
||||
name="username"
|
||||
initialValue=""
|
||||
class="flex flex-col gap-2"
|
||||
>
|
||||
<InputText type="text" placeholder="Username" />
|
||||
<Message v-if="$field?.invalid" severity="error" size="small" variant="simple">{{
|
||||
$field.error?.message
|
||||
}}</Message>
|
||||
</FormField>
|
||||
<FormField v-slot="$field" asChild name="password" initialValue="">
|
||||
<section class="flex flex-col gap-2">
|
||||
<Password type="text" placeholder="Password" :feedback="false" toggleMask fluid />
|
||||
<Message v-if="$field?.invalid" severity="error" size="small" variant="simple">{{
|
||||
$field.error?.message
|
||||
}}</Message>
|
||||
</section>
|
||||
</FormField>
|
||||
<Button type="submit" severity="secondary" label="Submit" />
|
||||
</Form>
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox v-model="remember" inputId="rememberme" binary />
|
||||
<label for="rememberme"> Rememberme </label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
@media (min-width: 1024px) {
|
||||
.about {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
35
frontend/src/views/TeacherView.vue
Normal file
35
frontend/src/views/TeacherView.vue
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<script setup lang="ts">
|
||||
import { useClassStore } from '@/stores/classStore'
|
||||
import Card from 'primevue/card'
|
||||
import router from '@/router'
|
||||
|
||||
const store = useClassStore()
|
||||
|
||||
store.loadClasses()
|
||||
|
||||
var elements = store.classInfoList
|
||||
|
||||
function setClass(input: number) {
|
||||
store.setActiveClass(input)
|
||||
router.push({ name: 'about' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Card v-for="item in elements" class="cards" href="/about" @click="setClass(item.id)">
|
||||
<template #title>{{ item.name }}</template>
|
||||
<template #content>
|
||||
<p class="m-0">Klassebereich von: {{ item.name }}</p>
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.cards {
|
||||
outline-style: solid;
|
||||
margin-top: 20px;
|
||||
outline-color: gray;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Reference in a new issue