feat: add departure board page

README.md

@@ -9,13 +9,13 @@ at https://simrail.tools. Currently implemented are:
 - A journey view showing live detailed information about a single journey (including future and past trains). Can
   currently only be accessed by selecting a train on the map and clicking on "Journey
   Details" (https://simrail.tools/journeys/<id\>)
+- Departure Boards, showing all departing trains at a point on a server (https://simrail.tools/departureboard)
 
 Planned features include:
 
 - A nicer home page
 - Journey search feature
 - Vehicle composition display (including images)
-- Departure Boards (preview available at https://departure-boards.sit-frontend.pages.dev/departureboard)
 
 If you want to request a feature feel free to [open an issue](https://github.com/simrailtools/frontend/issues/new) or
 contact me on Discord: `@derklaro`.

package.json

@@ -20,6 +20,8 @@
     "@maplibre/maplibre-gl-style-spec": "^24.4.1",
     "@nats-io/nats-core": "^3.3.1",
     "@tanstack/react-devtools": "^0.9.5",
+    "@tanstack/react-form": "^1.28.3",
+    "@tanstack/react-form-devtools": "^0.2.16",
     "@tanstack/react-pacer": "^0.19.4",
     "@tanstack/react-pacer-devtools": "^0.5.2",
     "@tanstack/react-query": "^5.90.21",

src/api/rest/types.gen.ts

@@ -314,9 +314,13 @@ export type JourneyStopPlaceDto = {
 
 export type JourneyTransportDto = {
     /**
-     * The external category of the transport
+     * The category of the transport
      */
     category: string;
+    /**
+     * The external category of the transport (for example internal can be RPJ, external IR), null if the same as the internal category
+     */
+    categoryExternal?: string | null;
     /**
      * The number of the transport
      */
@@ -405,7 +409,7 @@ export type SimRailServerDto = {
     /**
      * The scenery (map part) that is available on the server
      */
-    scenery: 'FULL' | 'WARSAW_LODZ_PSARY' | 'WARSAW_LODZ_KRAKOW' | 'WARSAW_LODZ_KATOWICE' | 'WARSAW_KATOWICE_KRAKOW';
+    scenery: 'FULL' | 'WARSAW_LODZ_PSARY' | 'WARSAW_LODZ_KRAKOW' | 'WARSAW_LODZ_KATOWICE' | 'WARSAW_KATOWICE_KRAKOW' | 'KATOWICE_PSARY_KOZLOW';
     /**
      * The instant (ISO-8601) when the data of the server was last updated
      */
@@ -520,6 +524,10 @@ export type JourneyTransportSummaryDto = {
      * The external category of the transport
      */
     category: string;
+    /**
+     * The external category of the transport (for example internal can be RPJ, external IR), null if the same as the internal category
+     */
+    categoryExternal?: string | null;
     /**
      * The number of the transport
      */
@@ -777,9 +785,13 @@ export type BoardStopInfoDto = {
 
 export type BoardTransportDto = {
     /**
-     * The external category of the transport
+     * The category of the transport
      */
     category: string;
+    /**
+     * The external category of the transport (for example internal can be RPJ, external IR), null if the same as the internal category
+     */
+    categoryExternal?: string | null;
     /**
      * The number of the transport
      */

src/components/form/Button.tsx

@@ -0,0 +1,16 @@
+import type { ComponentProps, FC } from "react";
+import { cn } from "@/lib/utils.ts";
+
+export const Button: FC<ComponentProps<"button">> = ({ children, className = "", ref, ...props }) => (
+  <button
+    ref={ref}
+    className={cn(
+      "inline-block bg-blue-500 text-white font-medium rounded-lg px-4 py-2 enabled:hover:bg-blue-600",
+      "focus:outline-none focus:ring-2 focus:ring-blue-400 transition",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </button>
+);

src/components/form/RangeInput.tsx

@@ -0,0 +1,19 @@
+import type { ComponentProps, FC } from "react";
+import { cn } from "@/lib/utils.ts";
+
+export const RangeInput: FC<Omit<ComponentProps<"input">, "type">> = ({ className, value, ref, ...props }) => (
+  <div className="flex items-center w-full space-x-4">
+    <input
+      ref={ref}
+      type={"range"}
+      className={cn(
+        "w-full h-2 bg-gray-200 rounded-lg accent-blue-400 appearance-none",
+        "focus:outline-none focus:ring-2 focus:ring-blue-400 transition",
+        className,
+      )}
+      value={value}
+      {...props}
+    />
+    <span className="w-12 text-right text-gray-700">{value}</span>
+  </div>
+);

src/components/form/SelectInput.tsx

@@ -0,0 +1,34 @@
+import type { ComponentProps, FC, PropsWithChildren } from "react";
+import { cn } from "@/lib/utils.ts";
+
+export const SelectInput: FC<PropsWithChildren<ComponentProps<"select">>> = ({
+  children,
+  className = "",
+  ref,
+  ...props
+}) => (
+  <div className="relative w-full">
+    <select
+      ref={ref}
+      className={cn(
+        "block w-full appearance-none bg-white border border-gray-300 rounded-lg px-4 py-2 pr-8",
+        "text-gray-800 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent",
+        "hover:border-gray-400 transition",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </select>
+    <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2">
+      <svg className="h-4 w-4 text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+        <title>Dropdown Arrow</title>
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M5.23 7.21a.75.75 0 011.06-.02L10 10.674l3.71-3.486a.75.75 0 111.04 1.084l-4.24 3.99a.75.75 0 01-1.04 0l-4.24-3.99a.75.75 0 01-.02-1.06z"
+        />
+      </svg>
+    </div>
+  </div>
+);

src/components/form/ToggleInput.tsx

@@ -0,0 +1,10 @@
+import type { ComponentProps, FC } from "react";
+import { cn } from "@/lib/utils.ts";
+
+export const ToggleInput: FC<Omit<ComponentProps<"input">, "type">> = ({ className = "", ref, ...props }) => (
+  <label className={cn("relative inline-flex items-center cursor-pointer", className)}>
+    <input type="checkbox" className="sr-only peer" {...props} ref={ref} />
+    <div className="w-11 h-6 bg-gray-200 peer-focus:ring-2 peer-focus:ring-blue-400 rounded-full peer-checked:bg-blue-500 transition-all" />
+    <div className="absolute left-1 top-1 bg-white w-4 h-4 rounded-full peer-checked:translate-x-5 transition-transform" />
+  </label>
+);

src/index.css

@@ -4,4 +4,14 @@
   --background-image-trains-snow: url("assets/background/background_snow.jpg");
   --background-image-trains-night: url("assets/background/background_night.jpg");
   --background-image-trains-normal: url("assets/background/background_normal.jpg");
+
+  --animate-marquee: marquee 30s infinite 2s linear;
+  @keyframes marquee {
+    0% {
+      transform: translate3d(0px, 0, 0);
+    }
+    100% {
+      transform: translate3d(calc(-50% + 0px), 0, 0);
+    }
+  }
 }