mentorenwahl/frontend_old/src/routes/index.svelte

<script lang="ts" context="module">
  export function load({ session }: { session: App.Session }) {
    if (!session.user.token) {
      return {
        status: 302,
        redirect: "/login",
      };
    }

    return {
      props: {
        session,
      },
    };
  }
</script>

<script lang="ts">
  import { operationStore, query, gql, mutation } from "@urql/svelte";
  // import * as svelteForms from "svelte-forms";
  // import * as validators from "svelte-forms/validators";

  import type { User } from "$lib/graphql";
  import { UserRole } from "$lib/graphql";
  import StudentHome from "$lib/StudentHome.svelte";

  interface Data {
    me: User;
  }

  const meStore = operationStore<Data>(gql`
    query Me {
      me {
        firstName
        role
        admin
        student {
          id
          vote {
            id
          }
        }
        teacher {
          id
        }
      }
    }
  `);
  query(meStore);

  // const teacherRegisterFormMaxStudents = svelteForms.field("maxStudents", 0, [
  //   validators.required(),
  //   validators.min(0),
  // ]);
  // const teacheRegisterForm = svelteForms.form(teacherRegisterFormMaxStudents);

  // interface RegisterTeacherData {
  //   registerTeacher: Teacher;
  // }

  // interface RegisterTeacherVars {
  //   maxStudents: number;
  // }

  // const registerTeacherStore = operationStore<
  //   RegisterTeacherData,
  //   RegisterTeacherVars
  // >(gql`
  //   mutation RegisterTeacher($maxStudents: Int!) {
  //     registerTeacher(input: { maxStudents: $maxStudents }) {
  //       id
  //     }
  //   }
  // `);

  // const registerTeacherMutation = mutation(registerTeacherStore);

  // async function registerTeacher(): Promise<void> {
  //   await registerTeacherMutation({
  //     maxStudents: $teacherRegisterFormMaxStudents.value,
  //   });

  //   if (!$registerTeacherStore.error && $registerTeacherStore.data) {
  //     location.reload();
  //   }
  // }

  // interface RegisterStudentData {
  //   registerStudent: Student;
  // }

  // const registerStudentStore = operationStore<RegisterStudentData>(gql`
  //   mutation RegisterStudent() {
  //     registerStudent() {
  //       id
  //     }
  //   }
  // `);
  // const registerStudentMutation = mutation(registerStudentStore);

  // async function registerStudent(): Promise<void> {
  //   await registerStudentMutation();

  //   if (!$registerStudentStore.error && $registerStudentStore.data) {
  //     location.reload();
  //   }
  // }
</script>

{#if $meStore.error}
  <p style="color: red;">{$meStore.error.message}</p>
{:else if $meStore.fetching}
  <p>Laden...</p>
{:else}
  <h1>Hey {$meStore.data.me.firstName}!</h1>
  <hr />

  {#if $meStore.data.me.role === UserRole.TEACHER}
    <!-- {#if !$meStore.data.me.teacher}
      <p>Registriere dich jetzt als Lehrer:</p>
      <form on:submit|preventDefault={registerTeacher}>
        <label for="maxStudents">Maximale Schüler:</label>
        <br />
        <input
          type="number"
          name="maxStudents"
          min="0"
          bind:value={$teacherRegisterFormMaxStudents.value}
        />
        <br />
        <label for="skif">SKIF:</label>
        <br />
        <input
          type="checkbox"
          name="skif"
          bind:checked={$teacherRegisterFormSkif.value}
        />

        <br /><br />

        <button type="submit" disabled={!$teacheRegisterForm.valid}
          >Registrieren</button
        >
      </form>
      {#if $registerTeacherStore.error}
        <p style="color: red;">{$registerTeacherStore.error.message}</p>
      {:else if $registerTeacherStore.fetching}
        <p>Laden...</p>
      {:else if $registerTeacherStore.data}
        <p>Registrierung erfolgreich!</p>
      {/if}
    {/if} -->
  {:else if $meStore.data.me.role === UserRole.STUDENT}
    <!-- {#if !$meStore.data.me.student}
      <p>Registriere dich jetzt als Schüler:</p>
      <form on:submit|preventDefault={registerStudent}>
        <label for="skif">SKIF:</label>
        <br />
        <input
          type="checkbox"
          name="skif"
          bind:checked={$registerStudentSkif.value}
        />

        <br /><br />

        <button type="submit" disabled={!$registerStudentForm.valid}
          >Registrieren</button
        >
      </form>
      {#if $registerStudentStore.error}
        <p style="color: red;">{$registerStudentStore.error.message}</p>
      {:else if $registerStudentStore.fetching}
        <p>Laden...</p>
      {:else if $registerStudentStore.data}
        <p>Registrierung erfolgreich!</p>
      {/if}
    {/if} -->
    <StudentHome />
  {/if}
{/if}