feat: displaying infos

odyseja-ui/src/routes/panel/+layout.svelte

@@ -8,6 +8,7 @@
   const menuItems = [
     { label: 'Harmonogram', route: '/panel/timetable', icon: 'ic:round-calendar-view-month' },
     { label: 'Problemy', route: '/panel/problem', icon: 'ic:round-format-list-bulleted' },
+    { label: 'Informacje', route: '/panel/info', icon: 'ic:round-format-list-bulleted' },
   ];
 </script>
 

odyseja-ui/src/routes/panel/apiService.ts

@@ -1,117 +1,146 @@
-import { toastStore } from '@skeletonlabs/skeleton';
-import type { ToastSettings } from '@skeletonlabs/skeleton';
-import type { Problem, PerformanceGroup, Timetable, Problems, Performance } from './types';
-import { env } from '$env/dynamic/public';
+import type {ToastSettings} from '@skeletonlabs/skeleton';
+import {toastStore} from '@skeletonlabs/skeleton';
+import type {Info, InfoCategory, Infos, Performance, PerformanceGroup, Problem, Problems, Timetable} from './types';
+import {env} from '$env/dynamic/public';
 
 export const BASE_URL = env.PUBLIC_BASE_URL || "http://localhost:8081";
 
 export async function fetchTimeTable(): Promise<Timetable> {
-  const response = await fetch(BASE_URL + '/api/v2/timeTable', {
-    method: 'GET',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-  });
-
-  if (!response.ok) {
-    throw new Error(`Network response was not ok: ${response.status}`);
-  }
-
-  const timeTable: PerformanceGroup[] = await response.json();
-  return {timetable: timeTable} as Timetable;
+    const response = await fetch(BASE_URL + '/api/v2/timeTable', {
+        method: 'GET',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+    });
+
+    if (!response.ok) {
+        throw new Error(`Network response was not ok: ${response.status}`);
+    }
+
+    const timeTable: PerformanceGroup[] = await response.json();
+    return {timetable: timeTable} as Timetable;
 }
 
 export async function savePerformance(performance: Performance) {
-  const response = await fetch(BASE_URL + '/timeTable', {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-      Authorization: getBearer(),
-    },
-    body: JSON.stringify(performance)
-  })
-  if (!response.ok) {
-    showSadToast('Coś poszło nie tak :c')
-    throw new Error(`HTTP error! status: ${response.status}`);
-  }
-
-  showHappyToast('Występ zapisany pomyślnie')
+    const response = await fetch(BASE_URL + '/timeTable', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            Authorization: getBearer(),
+        },
+        body: JSON.stringify(performance)
+    })
+    if (!response.ok) {
+        showSadToast('Coś poszło nie tak :c')
+        throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    showHappyToast('Występ zapisany pomyślnie')
 }
 
 export async function deletePerformance(performanceId: number) {
-  const response = await fetch(BASE_URL + '/timeTable/' + performanceId, {
-    method: 'DELETE',
-    headers: {
-      'Content-Type': 'application/json',
-      Authorization: getBearer(),
+    const response = await fetch(BASE_URL + '/timeTable/' + performanceId, {
+        method: 'DELETE',
+        headers: {
+            'Content-Type': 'application/json',
+            Authorization: getBearer(),
+        }
+    })
+    if (!response.ok) {
+        showSadToast('Coś poszło nie tak :c')
+        throw new Error(`HTTP error! status: ${response.status}`);
     }
-  })
-  if (!response.ok) {
-    showSadToast('Coś poszło nie tak :c')
-    throw new Error(`HTTP error! status: ${response.status}`);
-  }
 
-  showHappyToast('Występ usunięty pomyślnie')
+    showHappyToast('Występ usunięty pomyślnie')
 }
 
 export async function fetchProblems(): Promise<Problems> {
-  let response = await fetch(BASE_URL + "/problem", {
-    method: 'GET',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-  })
-  if (!response.ok) {
-    throw new Error(`HTTP error! status: ${response.status}`);
-  }
-  const data = await response.json();
-  let problems = data as Problem[]
-  return { problems: problems };
+    let response = await fetch(BASE_URL + "/problem", {
+        method: 'GET',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+    })
+    if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    const data = await response.json();
+    let problems = data as Problem[]
+    return {problems: problems};
+}
+
+export async function fetchInfo(): Promise<Infos> {
+    let response = await fetch(BASE_URL + "/info", {
+        method: 'GET',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+    })
+    if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    const data = await response.json();
+    const categories = await fetchInfoCategory();
+    return {infos: data as Info[], categories: categories} as Infos;
+}
+
+export async function fetchInfoCategory(): Promise<InfoCategory[]> {
+    let response = await fetch(BASE_URL + "/info/category", {
+        method: 'GET',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+    })
+    if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    const data = await response.json();
+    return data as InfoCategory[];
 }
 
 export async function saveProblems(problems: Problems) {
-  let response = await fetch(BASE_URL + "/problem", {
-    method: 'PUT',
-    headers: {
-      'Content-Type': 'application/json',
-      Authorization: getBearer(),
-    },
-    body: JSON.stringify(problems.problems)
-  })
-  if (!response.ok) {
-    showSadToast('Coś poszło nie tak :c')
-    throw new Error(`HTTP error! status: ${response.status}`);
-  }
-
-  showHappyToast('Problemy zapisano pomyślnie')
+    let response = await fetch(BASE_URL + "/problem", {
+        method: 'PUT',
+        headers: {
+            'Content-Type': 'application/json',
+            Authorization: getBearer(),
+        },
+        body: JSON.stringify(problems.problems)
+    })
+    if (!response.ok) {
+        showSadToast('Coś poszło nie tak :c')
+        throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    showHappyToast('Problemy zapisano pomyślnie')
 }
 
 function showHappyToast(message: string) {
-  showToast(message, 'variant-filled-tertiary')
+    showToast(message, 'variant-filled-tertiary')
 }
 
 function showSadToast(message: string) {
-  showToast(message, 'variant-filled-tertiary')
+    showToast(message, 'variant-filled-tertiary')
 }
 
 function showToast(message: string, background: string) {
-  const t: ToastSettings = {
-    message: message,
-    timeout: 3000,
-    background: background
-  };
-  toastStore.trigger(t);
+    const t: ToastSettings = {
+        message: message,
+        timeout: 3000,
+        background: background
+    };
+    toastStore.trigger(t);
 }
 
 function getBearer(): string {
-  return 'Bearer ' + getCookie("access_token")
+    return 'Bearer ' + getCookie("access_token")
 }
 
 // @ts-ignore
 function getCookie(name: string): string {
-  const value = `; ${document.cookie}`;
-  const parts = value.split(`; ${name}=`);
-  if (parts.length === 2) { // @ts-ignore
-    return parts.pop().split(';').shift();
-  }
+    const value = `; ${document.cookie}`;
+    const parts = value.split(`; ${name}=`);
+    if (parts.length === 2) { // @ts-ignore
+        return parts.pop().split(';').shift();
+    }
 }

odyseja-ui/src/routes/panel/info/+page.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type {InfoCategory, Infos} from '../types';
+  import {Table, tableMapperValues} from "@skeletonlabs/skeleton";
+  import type {TableSource} from '@skeletonlabs/skeleton';
+
+  export let data: Infos;
+
+  $: selectedCategory = data.categories[0] as InfoCategory;
+
+  function mapInfosToTable(category): TableSource {
+    let infos = data.infos.filter(info => info.categoryName === category.name);
+    return {
+      head: ['Nazwa'],
+      body: tableMapperValues(infos, ['infoName']),
+      meta: tableMapperValues(infos, ['id', 'infoName']),
+      foot: [`<code class="code">${infos.length}</code>`]
+    };
+  }
+
+  function onInfoSelected(event) {
+    let info = data.infos.find(info => info.id === event.detail[0]);
+  }
+</script>
+
+{#each data.categories as category}
+  <div class="card card-hover cursor-pointer mb-6">
+    <header class="card-header">{category.name}</header>
+    <section class="p-4">
+      <Table source={mapInfosToTable(category)} interactive="true" on:selected={onInfoSelected}/>
+    </section>
+  </div>
+{/each}

odyseja-ui/src/routes/panel/info/+page.ts

@@ -0,0 +1,6 @@
+import {fetchInfo} from '../apiService';
+import type {PageLoad} from "../../../../.svelte-kit/types/src/routes/panel/problem/$types";
+
+export const load = (({params}) => {
+    return fetchInfo();
+}) satisfies PageLoad;

odyseja-ui/src/routes/panel/types.ts

@@ -78,4 +78,24 @@ export type Problems = {
 export type Problem = {
   id: number,
   name: string
+}
+
+export type Infos = {
+    infos: Info[],
+    categories: InfoCategory[]
+}
+
+export type Info = {
+  id: number,
+  infoName: string,
+  infoText: string,
+  city: number,
+  category: number,
+  sortNumber: number,
+  categoryName: string
+}
+
+export type InfoCategory = {
+  id: number,
+  name: string,
 }