diff --git a/frontend/src/app/data/page.tsx b/frontend/src/app/data/page.tsx index 819336964..d5ec58200 100644 --- a/frontend/src/app/data/page.tsx +++ b/frontend/src/app/data/page.tsx @@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react"; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; +import { string } from "zod"; interface DataModel { @@ -24,8 +25,14 @@ interface DataModel { pve_version: string; } +interface Aotd { + nsapp: string; + count: number; +} + const DataFetcher: React.FC = () => { const [data, setData] = useState<DataModel[]>([]); + const [aotd, setAotd] = useState<Aotd[]>([]); const [loading, setLoading] = useState<boolean>(true); const [error, setError] = useState<string | null>(null); const [searchQuery, setSearchQuery] = useState(''); @@ -47,6 +54,16 @@ const DataFetcher: React.FC = () => { } finally { setLoading(false); } + try { + const response = await fetch("http://api.htl-braunau.at/data/json/appoftheday"); + if (!response.ok) throw new Error("Failed to fetch data: ${response.statusText}"); + const result: Aotd[] = await response.json(); + setAotd(result); + } catch (err) { + setError((err as Error).message); + } finally { + setLoading(false); + } }; fetchData(); @@ -120,6 +137,10 @@ const DataFetcher: React.FC = () => { return ( <div className="p-6 mt-20"> <h1 className="text-2xl font-bold mb-4 text-center">Created LXCs</h1> + <div className="mb-4"> + <h3 className="text-xl font-bold">Application of the Day</h3> + {aotd.nsapp} ({aotd.count} times) + </div> <div className="mb-4 flex space-x-4"> <div> <input