feat: Added viewer

viewer/app/all/page.tsx

@@ -0,0 +1,8 @@
+import { getData } from '@/lib/api';
+import SubstitutionViewer from './substitution-viewer';
+
+export default async function Page() {
+  const data = await getData();
+
+  return <SubstitutionViewer initialData={data} />;
+}

viewer/app/all/substitution-viewer.tsx

@@ -0,0 +1,224 @@
+'use client';
+
+import { useState, useMemo, useTransition, useEffect } from 'react';
+import { format, parseISO } from 'date-fns';
+import { RefreshCw } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+
+import { SubstitutionData, ChangeEntry } from '@/lib/types';
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Label } from '@/components/ui/label';
+import TakesPlace from '@/components/own/takes-place';
+import { TeacherAbsenceItem } from '@/components/own/teacher-absence';
+
+interface SubstitutionViewerProps {
+  initialData: SubstitutionData | null;
+}
+
+export default function SubstitutionViewer({ initialData }: SubstitutionViewerProps) {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+  const data = initialData;
+  
+  const [selectedDate, setSelectedDate] = useState<string>('');
+
+  useEffect(() => {
+    if (data?.schedule) {
+      const dates = Object.keys(data.schedule).sort();
+      if (dates.length > 0) {
+        if (!selectedDate || !data.schedule[selectedDate]) {
+          setSelectedDate(dates[0]);
+        }
+      }
+    }
+  }, [data, selectedDate]);
+
+  const currentDayData = data?.schedule?.[selectedDate];
+
+  const handleRefresh = () => {
+    startTransition(() => {
+      router.refresh();
+    });
+  };
+
+  const dates = data ? Object.keys(data.schedule).sort() : [];
+
+  if (!data) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-screen text-muted-foreground space-y-4">
+        <p>Nepodařilo se načíst data.</p>
+        <Button onClick={() => window.location.reload()}>Zkusit znovu</Button>
+      </div>
+    );
+  }
+
+  return (
+
+      <main className="flex-1 w-full max-w-[1920px] mx-auto p-4 md:p-6 space-y-6">
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 text-sm text-muted-foreground p-4 rounded-lg border">
+          <div>
+            <span className="font-medium">Poslední aktualizace:</span> {data.status.lastUpdated}
+            <span className="mx-2 hidden sm:inline">•</span>
+            <br className="sm:hidden" />
+            <span >
+              Aktualizace každých {data.status.currentUpdateSchedule < 60 ? `${data.status.currentUpdateSchedule} min` : `${data.status.currentUpdateSchedule / 60} hod`}
+            </span>
+          </div>
+          <Button variant="outline" size="sm" onClick={handleRefresh} disabled={isPending} className="w-full sm:w-auto">
+            <RefreshCw className={`h-4 w-4 mr-2 ${isPending ? 'animate-spin' : ''}`} />
+            Aktualizovat
+          </Button>
+        </div>
+
+        <div className="max-w-md">
+          <Label htmlFor="date-select" className="mb-2 block">Datum</Label>
+          <Select value={selectedDate} onValueChange={setSelectedDate}>
+            <SelectTrigger id="date-select" className="w-full">
+              <SelectValue placeholder="Vyberte datum" />
+            </SelectTrigger>
+            <SelectContent>
+              {dates.map((date) => {
+                const info = data.schedule[date];
+                const label = format(parseISO(date), 'd.M.yyyy');
+                const suffix = info.info.inWork ? ' (příprava)' : ''; 
+                return (
+                  <SelectItem key={date} value={date}>
+                    {label}{suffix}
+                  </SelectItem>
+                );
+              })}
+            </SelectContent>
+          </Select>
+        </div>
+
+        {currentDayData ? (
+          <div className="grid grid-cols-1 xl:grid-cols-4 gap-6">
+            <div className="xl:col-span-3 space-y-6">
+              
+              <div>
+                <h2 className="text-xl font-semibold mb-3">Změny v rozvrhu</h2>
+                <SubstitutionsTable changes={currentDayData.changes} />
+              </div>
+
+              <TakesPlace string={currentDayData.takesPlace} />
+            </div>
+
+            <div className="xl:col-span-1 space-y-6">
+              <div>
+                <h2 className="text-xl font-semibold mb-3 text-slate-900 dark:text-slate-100">Absence učitelů</h2>
+                {currentDayData.absence.length > 0 ? (
+                  <div className="space-y-3">
+                    {currentDayData.absence.map((entry, idx) => (
+                      <TeacherAbsenceItem key={idx} entry={entry} />
+                    ))}
+                  </div>
+                ) : (
+                  <div className="p-4 rounded-lg border border-dashed text-muted-foreground text-center bg-slate-50 dark:bg-slate-900/50">
+                    Žádní učitelé nemají absenci
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
+            <p className="text-lg">Pro vybrané datum nejsou k dispozici žádná data.</p>
+          </div>
+        )}
+      </main>
+  );
+}
+
+function SubstitutionsTable({ changes }: { changes: Record<string, (ChangeEntry | null)[]> }) {
+  const sortedClasses = useMemo(() => {
+    return Object.keys(changes).sort((a, b) => {
+      const regex = /^([A-Z]+)(\d+)([a-z]*)$/;
+      const ma = a.match(regex);
+      const mb = b.match(regex);
+
+      if (ma && mb) {
+          const [, pa, na, sa] = ma;
+          const [, pb, nb, sb] = mb;
+
+          const numDiff = parseInt(na) - parseInt(nb);
+          if (numDiff !== 0) return numDiff;
+          
+          const prefixDiff = pa.localeCompare(pb);
+          if (prefixDiff !== 0) return prefixDiff;
+
+          return sa.localeCompare(sb);
+      }
+
+      return a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' });
+    });
+  }, [changes]);
+
+  const maxHours = useMemo(() => {
+    let max = 0;
+    Object.values(changes).forEach(list => {
+      if (list.length > max) max = list.length;
+    });
+    return max;
+  }, [changes]);
+
+  const hours = Array.from({ length: maxHours }, (_, i) => i + 1);
+
+  return (
+    <Card className="overflow-hidden border p-0">
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm text-left border-collapse">
+          <thead>
+            <tr>
+              <th className="p-3 font-semibold border-b border-r min-w-[80px] text-center sticky left-0 z-10">
+                
+              </th>
+              {hours.map(h => (
+                <th key={h} className="p-3 font-semibold border-b border-r min-w-[60px] text-center w-[60px]">
+                  {h}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {sortedClasses.map((className) => (
+              <tr key={className} className="border-b last:border-0">
+                <td className="p-2 font-bold border-r sticky left-0 z-10 bg-card text-center">
+                  {className}
+                </td>
+                {hours.map((_, idx) => {
+                  const change = changes[className][idx];
+                  return (
+                    <td key={idx} className="p-[2px] border-r w-[70px] h-[70px] align-middle">
+                      {change ? (
+                        <div 
+                          className="w-full h-full min-h-[46px] flex items-center justify-center p-1 rounded-sm text-xs text-center truncate"
+                          style={{
+                            backgroundColor: change.backgroundColor || '#eee',
+                            color: change.foregroundColor ? "#" +change.foregroundColor.substring(3, 6) : '#000'
+                          }}
+                          title={change.text}
+                        >
+                          {change.text}
+                        </div>
+                      ) : (
+                        <div className="w-full h-full min-h-[46px]"></div>
+                      )}
+                    </td>
+                  );
+                })}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </Card>
+  );
+}

viewer/app/globals.css

@@ -0,0 +1,127 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+    @apply bg-background text-foreground;
+  }
+}

viewer/app/layout.tsx

@@ -0,0 +1,81 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import { ThemeProvider } from "@/components/theme-provider";
+import { Toaster } from "@/components/ui/sonner";
+
+import { AlertTriangle, InfoIcon, Menu } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Mimořádný rozvrh SPŠE Ječná",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+            <div className="flex flex-col min-h-screen">
+              <header className="sticky top-0 z-20 flex items-center justify-between px-4 py-3 border-b bg-background">
+                <div className="flex items-center gap-3">
+                  <Button variant="ghost" size="icon" className="md:hidden">
+                    <Menu className="h-5 w-5" />
+                  </Button>
+                  <h1 className="text-lg font-semibold">
+                    Mimořádný rozvrh
+                  </h1>
+                </div>
+                <div className="flex items-center gap-2">
+                   <Button variant="ghost" size="icon" title="Nahlásit chybu">
+                    <AlertTriangle className="h-5 w-5 text-amber-500" />
+                    <span className="sr-only">Nahlásit chybu</span>
+                  </Button>
+                </div>
+              </header>
+            <div className="w-full flex justify-center pt-8">
+              <Alert className="max-w-100">
+                <InfoIcon />
+                <AlertTitle>Pozor!</AlertTitle>
+                <AlertDescription>
+                  Tento web není oficiální a není jakkoliv spojen se SPŠE Ječná.
+                </AlertDescription>
+              </Alert>
+            </div>
+              {children}
+              <footer className="text-center text-xs text-white/70 pb-4">
+                &copy; 2026{" "}
+                <a href="https://jzitnik.dev" target="_blank" className="underline hover:text-white/90">Jakub Žitník</a>{" "}
+                •{" "}
+                <a href="https://www.gnu.org/licenses/gpl-3.0.html" target="_blank" className="underline hover:text-white/90">Licencováno pod GNU GPL v3.0</a>
+              </footer>
+            </div>
+          <Toaster />
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

viewer/app/page.tsx

@@ -0,0 +1,8 @@
+import { getData } from "@/lib/api";
+import View from "./view";
+
+export default async function Page() {
+  const data = await getData();
+
+  return <View data={data} />
+}

viewer/app/view.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { SubstitutionData, LocalData } from "@/lib/types";
+import { Card, CardContent } from "@/components/ui/card";
+import ScheduleViewer from "@/components/own/schedule-viewer";
+
+interface ViewProps {
+  data: SubstitutionData | null;
+}
+
+interface FormValues {
+  className: string;
+  jsonFile: FileList | null;
+}
+
+export default function View({ data }: ViewProps) {
+  const [loading, setLoading] = useState(true);
+  const [localData, setLocalData] = useState<LocalData | null>(null);
+
+  const form = useForm<FormValues>({
+    defaultValues: {
+      className: "",
+      jsonFile: null,
+    },
+  });
+
+  const onSubmit = async (values: FormValues) => {
+    const classNameProcessed = values.className.toLowerCase();
+
+    const file = values.jsonFile?.[0];
+    if (!file) {
+      alert("No file uploaded!");
+      return;
+    }
+
+    try {
+      const text = await file.text();
+      const jsonData = JSON.parse(text);
+      console.log(jsonData)
+      
+      const foundKey = Object.keys(jsonData).find(k => k.toLowerCase() === classNameProcessed);
+
+      if (!foundKey) {
+        alert("Class not found in file!");
+        return;
+      }
+
+      const data = {
+        class: classNameProcessed,
+        timetable: jsonData[foundKey]
+      };
+
+      setLocalData(data);
+      localStorage.setItem("data", JSON.stringify(data));
+
+    } catch (err) {
+      console.log(err)
+      alert("Invalid JSON file.");
+    }
+  };
+
+  useEffect(() => {
+    const saved = localStorage.getItem("data");
+    if (saved) {
+      setLocalData(JSON.parse(saved));
+    }
+    setLoading(false);
+  }, [data]);
+
+  if (loading) return <p>Loading...</p>;
+
+  if (!localData) {
+    return (
+      <div className="flex justify-center w-full">
+        <Card className="my-8 max-w-200">
+          <CardContent>
+            <Form {...form} >
+              <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+                <FormField
+                  control={form.control}
+                  name="className"
+                  rules={{
+                    required: "Třída je povinná",
+                    pattern: {
+                      value: /^[AEC][1-4][a-c]?$/i,
+                      message: "Neplatný název třídy"
+                    },
+                  }}
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Třída</FormLabel>
+                      <FormControl>
+                        <Input {...field} placeholder="C2c" />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="jsonFile"
+                  rules={{ required: "Soubor je povinný" }}
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Soubor</FormLabel>
+                      <FormControl>
+                        <input
+                          type="file"
+                          accept=".json"
+                          onChange={(e) => field.onChange(e.target.files)}
+                          className="cursor-pointer"
+                        />
+                      </FormControl>
+                      <FormDescription>
+                        <a href="/posts/viewer/getting_file" target="_blank" className="hover:underline">
+                          Jak získat soubor?
+                        </a>
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <Button type="submit" className="cursor-pointer">Odeslat</Button>
+              </form>
+            </Form>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full max-w-[1920px] mx-auto p-4 space-y-6">
+      <div className="flex justify-between items-center">
+        <h1 className="text-2xl font-bold">Rozvrh třídy {localData.class}</h1>
+        <Button variant="outline" onClick={() => setLocalData(null)}>Změnit třídu/soubor</Button>
+      </div>
+      <ScheduleViewer localData={localData} substitutionData={data} />
+    </div>
+  );
+}