feat: add group by station

eslint.config.js

@@ -335,10 +335,6 @@ export default [
       // disallow use of the Array constructor
       "@typescript-eslint/no-array-constructor": "warn",
 
-      // disallow if as the only statement in an else block
-      // https://eslint.org/docs/rules/no-lonely-if
-      "no-lonely-if": "warn",
-
       // disallow un-paren'd mixes of different operators
       // https://eslint.org/docs/rules/no-mixed-operators
       "@stylistic/no-mixed-operators": [

src/lib/assets/icon.opt.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><defs><pattern xlink:href="#a" id="b" patternTransform="matrix(-1.39935 -.80792 -4.72493 8.18382 0 0)"/><pattern id="a" width="2" height="1" patternTransform="scale(10)" patternUnits="userSpaceOnUse"><path d="M0-.5h1v2H0z" style="fill:#1a1a1a;stroke:none"/></pattern></defs><path d="M18 22a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2z" style="fill:#565656;fill-opacity:1;fill-rule:nonzero"/><path d="M18 22a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2z" style="fill:url(#b);fill-opacity:1;fill-rule:nonzero"/><path d="M12 2v7L9.5 7.5 7 9V2Z" style="display:inline;fill:#7480ff;fill-opacity:1"/><g style="font-size:13.3333px;line-height:1.25"><path d="M10.53 9.951H8.603l3.414 9.697h2.168l3.419-9.697h-1.932l-2.519 7.633h-.1z" style="fill:#fff"/></g></svg>

src/lib/assets/icon.svg

@@ -0,0 +1,83 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 24 24"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="book.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs8">
+    <pattern
+       inkscape:collect="always"
+       xlink:href="#Strips1_1"
+       id="pattern6415"
+       patternTransform="matrix(-1.3993505,-0.80791526,-4.7249348,8.1838246,0,0)" />
+    <pattern
+       inkscape:collect="always"
+       patternUnits="userSpaceOnUse"
+       width="2"
+       height="1"
+       patternTransform="translate(0,0) scale(10,10)"
+       id="Strips1_1"
+       inkscape:stockid="Stripes 1:1"
+       inkscape:isstock="true">
+      <rect
+         style="fill:#1a1a1a;stroke:none"
+         x="0"
+         y="-0.5"
+         width="1"
+         height="2"
+         id="rect2363" />
+    </pattern>
+  </defs>
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="28.114784"
+     inkscape:cx="15.045465"
+     inkscape:cy="6.4734625"
+     inkscape:window-width="2516"
+     inkscape:window-height="1051"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     d="m 18,22 c 1.104569,0 2,-0.895431 2,-2 V 4 C 20,2.89 19.1,2 18,2 H 6 C 4.8954305,2 4,2.8954305 4,4 v 16 c 0,1.104569 0.8954305,2 2,2 z"
+     id="path6417"
+     sodipodi:nodetypes="sssssssss"
+     style="fill:#565656;fill-opacity:1;fill-rule:nonzero"
+     inkscape:label="bookbg" />
+  <path
+     d="m 18,22 c 1.104569,0 2,-0.895431 2,-2 V 4 C 20,2.89 19.1,2 18,2 H 6 C 4.8954305,2 4,2.8954305 4,4 v 16 c 0,1.104569 0.8954305,2 2,2 z"
+     id="path2"
+     sodipodi:nodetypes="sssssssss"
+     style="fill:url(#pattern6415);fill-opacity:1;fill-rule:nonzero"
+     inkscape:label="bookpattern" />
+  <path
+     d="M 12,2 V 9 L 9.5,7.5 7,9 V 2 Z"
+     id="path2-0"
+     inkscape:label="tab"
+     sodipodi:nodetypes="cccccc"
+     style="display:inline;fill:#7480ff;fill-opacity:1" />
+  <g
+     id="text291"
+     style="font-size:13.3333px;line-height:1.25">
+    <path
+       d="M 10.529934,9.9511185 H 8.6028554 l 3.4138176,9.6969455 h 2.168555 L 17.60378,9.9511185 h -1.931814 l -2.518933,7.6325565 h -0.09943 z"
+       style="fill:#ffffff"
+       id="path1804" />
+  </g>
+</svg>

src/lib/components/filter/Autocomplete.svelte

@@ -13,7 +13,7 @@
   import IconButton from "$lib/components/ui/IconButton.svelte";
   import outclick from "$lib/actions/outclick";
 
-  import type { BaseItem } from "./types";
+  import type { BaseItem, OnSelectResult } from "./types";
 
   /**
    * This is a simplified version of simple-svelte-autocomplete
@@ -23,7 +23,6 @@
    */
 
   type T = $$Generic<BaseItem>;
-  type OnSelectResult = { newValue: string; close: boolean };
 
   /** List of items to choose from (or an async function fetching them) */
   export let items: T[] | (() => Promise<T[]>);
@@ -58,6 +57,7 @@
   export let filterFn: (item: T) => boolean = () => true;
 
   /** Selection callback. Returns the new input value after selection */
+  export let onTextInput: (value: string) => OnSelectResult | void = () => {};
   export let onSelect: (item: T, kb: boolean) => OnSelectResult | void = () => {};
   export let onUnselect = (): void => {};
   export let onClose = (kb: boolean): void => {};
@@ -267,6 +267,13 @@
   function selectItem(): void {
     const listItem = filteredItems[highlightIndex];
     selectListItem(listItem, true);
+    if (!listItem && inputElm && inputElm.value.length > 0) {
+      const res = onTextInput(inputElm.value);
+      if (res) {
+        setInputValue(res.newValue);
+        if (res.close) close(true);
+      }
+    }
   }
 
   const [floatingRef, floatingContent] = createFloatingActions({

src/lib/components/filter/FilterChip.svelte

@@ -33,6 +33,14 @@
     else onRemove();
   }
 
+  const onTextInput = filter.textToItem ? (text: string) => {
+    const res = filter.textToItem!(text);
+    if (res) {
+      fdata.selection = res;
+      return { close: true, newValue: "" };
+    }
+  } : undefined;
+
   $: if (fdata.editing && autocomplete) {
     autocomplete.open();
   }
@@ -91,6 +99,7 @@
             }
             return { close: false, newValue: item.name ?? "" };
           }}
+          {onTextInput}
           padding={false}
           partOfFilterbar
           selection={fdata.selection?.id

src/lib/components/filter/filters.ts

@@ -28,7 +28,7 @@ export function weekFilterItems(): BaseItem[] {
     res.push({ id: r.toString(), name: r.format() });
   };
 
-  addRange(new DateRange(null, range.start));
+  addRange(new DateRange(null, range.end));
   for (let i = 0; i < WEEK_LIMIT; i++) {
     addRange(range);
     range.addDays(7);
@@ -104,10 +104,16 @@ export const ENTRY_FILTERS: Record<string, FilterDef> = {
   },
   date: {
     id: "date",
-    name: "Woche",
+    name: "Datum",
     icon: mdiCalendar,
     inputType: InputType.FilterList,
     options: async () => weekFilterItems(),
+    textToItem: (s) => {
+      const parsed = DateRange.parseHuman(s);
+      if (parsed) {
+        return { id: parsed.toString(), name: parsed.format() };
+      }
+    },
   },
 };
 

src/lib/components/filter/types.ts

@@ -28,6 +28,7 @@ export type FilterDef = {
     icon?: string;
   };
   options?: () => Promise<BaseItem[]>;
+  textToItem?: (s: string) => BaseItem | void;
 };
 
 export type FilterData = {
@@ -41,6 +42,8 @@ export type FilterQdata = Record<
   string | number | boolean | { id: string | number; name?: string }[]
 >;
 
+export type OnSelectResult = { newValue: string; close: boolean };
+
 export function isFilterValueless(inputType: InputType): boolean {
   return inputType === InputType.None || inputType === InputType.Boolean;
 }

src/lib/components/ui/EntryCard.svelte

@@ -18,6 +18,12 @@
     {#if entry.current_version.priority}
       <div class="badge ellipsis badge-warning">Priorität</div>
     {/if}
+    {#if entry.execution && !entry.execution.done}
+      <div class="badge ellipsis badge-warning">Notiz</div>
+    {/if}
+    {#if entry.patient.room}
+      <div class="badge ellipsis badge-primary">{entry.patient.room.name}</div>
+    {/if}
     <span>{formatPatientName(entry.patient)}</span>
 
     <span class="ml-auto hidden md:block">von {entry.current_version.author.name}</span>

src/lib/components/ui/PaginationButtons.svelte

@@ -4,14 +4,21 @@
   } from "@mdi/js";
 
   import { PAGINATION_LIMIT } from "$lib/shared/constants";
-  import type { Pagination, PaginationRequest } from "$lib/shared/model";
+  import type { PaginationRequest } from "$lib/shared/model";
 
   import { screenWidthSmall } from "$lib/stores";
 
   import Icon from "./Icon.svelte";
 
+  type PaginationX = {
+    items?: unknown[];
+    nItems?: number;
+    total: number;
+    offset: number;
+  };
+
   export let paginationData: PaginationRequest | null | undefined;
-  export let data: Pagination<unknown>;
+  export let data: PaginationX;
   export let onUpdate: (pagination: PaginationRequest) => void = () => {};
 
   $: limit = paginationData?.limit ?? PAGINATION_LIMIT;
@@ -52,7 +59,7 @@
 
 <div class="flex flex-col gap-2 items-center">
   <p class="text-sm">
-    {data.offset + 1}-{data.offset + data.items.length} von {data.total}
+    {data.offset + 1}-{data.offset + (data.items?.length ?? data.nItems ?? 0)} von {data.total}
   </p>
 
   <div class="join">

src/lib/components/ui/WeekSelector.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
-  import { mdiChevronLeft, mdiChevronRight } from "@mdi/js";
+  import {
+    mdiChevronDoubleLeft, mdiChevronDoubleRight, mdiChevronLeft, mdiChevronRight,
+  } from "@mdi/js";
 
-  import { DateRange } from "$lib/shared/util";
+  import { DateRange, shiftDateRange } from "$lib/shared/util";
 
   import Autocomplete from "$lib/components/filter/Autocomplete.svelte";
   import { weekFilterItems } from "$lib/components/filter/filters";
-  import type { BaseItem } from "$lib/components/filter/types";
+  import type { BaseItem, OnSelectResult } from "$lib/components/filter/types";
 
   import IconButton from "./IconButton.svelte";
 
@@ -15,26 +17,8 @@
   export let dateRange: DateRange = new DateRange(null, DateRange.thisWeek().end);
   export let onSelect: (value: DateRange) => void = () => {};
 
-  function addDays(n: number): void {
-    if (dateRange.start === null) {
-      dateRange.start = new Date(dateRange.end!);
-      dateRange.start.setDate(dateRange.start.getDate() - 6);
-    } else if (dateRange.end === null) {
-      dateRange.end = new Date(dateRange.start!);
-      dateRange.end.setDate(dateRange.end.getDate() + 6);
-    } else {
-      dateRange.addDays(n);
-    }
-  }
-
-  function nextWeek(): void {
-    addDays(7);
-    dateRange = dateRange; // update reactive
-    onSelect(dateRange);
-  }
-
-  function previousWeek(): void {
-    addDays(-7);
+  function addDays(week: boolean, fwd: boolean): void {
+    shiftDateRange(dateRange, week, fwd);
     dateRange = dateRange; // update reactive
     onSelect(dateRange);
   }
@@ -47,30 +31,47 @@
     editing = false;
   }
 
+  function onTextInput(txt: string): OnSelectResult | void {
+    const parsed = DateRange.parseHuman(txt);
+    if (parsed) {
+      dateRange = parsed;
+      onSelect(dateRange);
+      return { close: true, newValue: "" };
+    }
+  }
+
   $: if (editing && autocomplete) {
     autocomplete.open();
   }
 </script>
 
 <div class="flex items-center">
-  <IconButton path={mdiChevronLeft} on:click={previousWeek} />
-  {#if editing}
-    <Autocomplete
-      bind:this={autocomplete}
-      items={async () => weekFilterItems()}
-      onClose={stopEditing}
-      onSelect={(item) => {
-        if (typeof item.id === "string") {
-          const parsed = DateRange.parse(item.id);
-          if (parsed) dateRange = parsed;
-          onSelect(dateRange);
-        }
-        return { close: true, newValue: "" };
-      }}
-      partOfFilterbar
-      selection={{ id: dateRange.toString(), name: dateRange.format() }} />
-  {:else}
-    <button on:click={startEditing}>{dateRange.format()}</button>
-  {/if}
-  <IconButton path={mdiChevronRight} on:click={nextWeek} />
+  <IconButton path={mdiChevronDoubleLeft} on:click={() => addDays(true, false)} />
+  <IconButton path={mdiChevronLeft} on:click={() => addDays(false, false)} />
+
+  <div class="w-48">
+    {#if editing}
+      <Autocomplete
+        bind:this={autocomplete}
+        items={async () => weekFilterItems()}
+        noAutoselect1
+        onClose={stopEditing}
+        onSelect={(item) => {
+          if (typeof item.id === "string") {
+            const parsed = DateRange.parse(item.id);
+            if (parsed) dateRange = parsed;
+            onSelect(dateRange);
+          }
+          return { close: true, newValue: "" };
+        }}
+        {onTextInput}
+        partOfFilterbar
+        selection={{ id: dateRange.toString(), name: dateRange.format() }} />
+    {:else}
+      <button class="w-full text-center" on:click={startEditing}>{dateRange.format()}</button>
+    {/if}
+  </div>
+
+  <IconButton path={mdiChevronRight} on:click={() => addDays(false, true)} />
+  <IconButton path={mdiChevronDoubleRight} on:click={() => addDays(true, true)} />
 </div>

src/lib/shared/model/validation.ts

@@ -153,7 +153,9 @@ export const ZEntriesFilter = returnDataInSameOrderAsPassed(z
   })
   .partial());
 
-export const ZEntriesQuery = paginatedQuery(ZEntriesFilter);
+export const ZEntriesQuery = paginatedQuery(ZEntriesFilter).extend({
+  group: z.string().optional(),
+});
 
 export const ZPatientsFilter = returnDataInSameOrderAsPassed(z
   .object({

src/lib/shared/util/date.test.ts

@@ -1,7 +1,14 @@
 import { expect, it, vi } from "vitest";
 
 import {
-  DateRange, dateFromYMD, dateToYMD, formatDate, humanDate, utcDateToYMD,
+  DateRange,
+  dateFromHuman,
+  dateFromYMD,
+  dateToYMD,
+  formatDate,
+  humanDate,
+  shiftDateRange,
+  utcDateToYMD,
 } from "./date";
 
 const MINUTE = 60000;
@@ -72,3 +79,64 @@ it.each([
     expect(res.toString()).toBe(s);
   }
 });
+
+it.each([
+  // Open ranges
+  {
+    r: "..2024-04-14", week: true, fwd: true, exp: "2024-04-15..2024-04-21",
+  },
+  {
+    r: "..2024-04-14", week: true, fwd: false, exp: "2024-04-08..2024-04-14",
+  },
+  {
+    r: "2024-04-08..", week: true, fwd: true, exp: "2024-04-08..2024-04-14",
+  },
+  {
+    r: "2024-04-08..", week: true, fwd: false, exp: "2024-04-01..2024-04-07",
+  },
+  // Full week
+  {
+    r: "2024-04-08..2024-04-14", week: true, fwd: true, exp: "2024-04-15..2024-04-21",
+  },
+  {
+    r: "2024-04-08..2024-04-14", week: true, fwd: false, exp: "2024-04-01..2024-04-07",
+  },
+  // Partial week
+  {
+    r: "2024-04-13..2024-04-16", week: true, fwd: true, exp: "2024-04-15..2024-04-21",
+  },
+  {
+    r: "2024-04-13..2024-04-16", week: true, fwd: false, exp: "2024-04-08..2024-04-14",
+  },
+
+  // Days
+  {
+    r: "2024-04-13..2024-04-13", week: false, fwd: true, exp: "2024-04-14..2024-04-14",
+  },
+  {
+    r: "2024-04-13..2024-04-13", week: false, fwd: false, exp: "2024-04-12..2024-04-12",
+  },
+  // Full range to day
+  {
+    r: "2024-04-08..2024-04-14", week: false, fwd: true, exp: "2024-04-14..2024-04-14", // TODO: inc date (15)
+  },
+  {
+    r: "2024-04-08..2024-04-14", week: false, fwd: false, exp: "2024-04-08..2024-04-08", // TODO: dec date (7)
+  },
+  // Open range to day
+  {
+    r: "..2024-04-14", week: false, fwd: true, exp: "2024-04-15..2024-04-15",
+  },
+])("shiftDateRange $r", ({
+  r, week, fwd, exp,
+}) => {
+  const range = DateRange.parse(r, true)!;
+  const expected = DateRange.parse(exp, true);
+  shiftDateRange(range, week, fwd);
+  expect(range).toStrictEqual(expected);
+});
+
+it("dateFromHuman", () => {
+  expect(dateFromHuman("04.12.2023")).toStrictEqual(new Date(2023, 11, 4));
+  expect(dateFromHuman("04.12.")).toStrictEqual(new Date(new Date().getFullYear(), 11, 4));
+});

src/lib/shared/util/date.ts

@@ -42,6 +42,22 @@ export function dateFromYMD(s: string): Date {
   return NaN;
 }
 
+export function dateFromHuman(s: string): Date {
+  const parts = s.split(".").filter((x) => x.length > 0).map((x) => parseInt(x));
+  if (parts.length > 0 && parts.length < 4) {
+    const [d, m, y] = parts;
+    const now = new Date();
+    return new Date(
+      // eslint-disable-next-line no-nested-ternary
+      y ? y < 1000 ? y + 2000 : y : now.getFullYear(),
+      m ? m - 1 : now.getMonth(),
+      d,
+    );
+  }
+  // @ts-expect-error emulate behavior of date constructor
+  return NaN;
+}
+
 /** Convert the given date to a string (using the internal UTC format) */
 export function utcDateToYMD(date: Date): string {
   return date.toISOString().slice(0, 10);
@@ -61,19 +77,25 @@ function dateDiffInDays(a: Date, b: Date): number {
   return Math.round((ts2 - ts1) / MS_PER_DAY);
 }
 
-export function humanDate(date: Date | string, time = false): string {
+export function humanDate(date: Date | string, time = false, cap = false): string {
   const now = new Date();
   const dt = coerceDate(date);
   const threshold = 302400000; // 3.5 * 24 * 3_600_000
   const diff = Number(dt) - Number(now); // pos: Future, neg: Past
-  if (Math.abs(diff) > threshold) return `am ${formatDate(date, time)}`;
+  if (Math.abs(diff) > threshold) {
+    const datestr = formatDate(date, time);
+    return cap ? datestr : "am" + datestr;
+  }
 
   const intl = new Intl.RelativeTimeFormat(LOCALE);
+  const outstr = cap ? (s: string) => {
+    return s.charAt(0).toUpperCase() + s.slice(1);
+  } : (s: string) => s;
 
   const diffDays = dateDiffInDays(now, dt);
   if (diffDays !== 0) {
-    if (diffDays === 1) return "morgen";
-    if (diffDays === -1) return "gestern";
+    if (diffDays === 1) return outstr("morgen");
+    if (diffDays === -1) return outstr("gestern");
     return intl.format(diffDays, "day");
   }
 
@@ -85,7 +107,7 @@ export function humanDate(date: Date | string, time = false): string {
     if (diffMinutes !== 0) return intl.format(diffMinutes, "minute");
   }
 
-  return time ? "jetzt gerade" : "heute";
+  return outstr(time ? "jetzt gerade" : "heute");
 }
 
 export class DateRange {
@@ -106,14 +128,19 @@ export class DateRange {
     return new DateRange(start, end);
   }
 
+  /** Get a date range of the week containing the given date */
+  static weekOf(day: Date, offset = 0): DateRange {
+    const thisDay = new Date(day);
+    const todayWd = thisDay.getDay();
+    // Day starts at Sunday (0)
+    const daysMinus = (todayWd === 0 ? 6 : todayWd - 1) - offset * 7;
+    thisDay.setDate(thisDay.getDate() - daysMinus);
+    return DateRange.withLength(thisDay, 6);
+  }
+
   /** Create a date range of the current calendar week */
   static thisWeek(): DateRange {
-    const dayStart = new Date();
-    const todayWd = dayStart.getDay();
-    // Day starts at Sunday (0)
-    const daysMinus = todayWd === 0 ? 6 : todayWd - 1;
-    dayStart.setDate(dayStart.getDate() - daysMinus);
-    return DateRange.withLength(dayStart, 6);
+    return DateRange.weekOf(new Date());
   }
 
   /** Parse a date range from a string
@@ -124,10 +151,23 @@ export class DateRange {
    * - Range with 1 end: `2024-04-13..`; `..2024-04-20`
    */
   static parse(s: string, utc = false): DateRange | null {
-    const parts = s.split("..", 2);
+    return DateRange.parseInternal(s, "..", (p) => utc ? new Date(p) : dateFromYMD(p));
+  }
+
+  /** Parse a date range from human input */
+  static parseHuman(s: string): DateRange | null {
+    return DateRange.parseInternal(s, "-", dateFromHuman);
+  }
+
+  private static parseInternal(
+    s: string,
+    split: string | RegExp,
+    dateParser: (s: string) => Date,
+  ): DateRange | null {
+    const parts = s.split(split, 2);
     const parsed = parts.map((p) => {
       if (p.length === 0) return null;
-      return utc ? new Date(p) : dateFromYMD(p);
+      return dateParser(p);
     });
 
     if (parsed.length === 0
@@ -145,8 +185,8 @@ export class DateRange {
 
   /** Shift the range by the given number of days. This modifies the range in-place */
   addDays(n: number): void {
-    this.start?.setDate(this.start.getDate() + n);
-    this.end?.setDate(this.end.getDate() + n);
+    this.start?.setUTCDate(this.start.getUTCDate() + n);
+    this.end?.setUTCDate(this.end.getUTCDate() + n);
   }
 
   /** Return a parsable string representation */
@@ -162,6 +202,54 @@ export class DateRange {
   format(): string {
     if (this.start === null) return "bis " + formatDate(this.end!);
     if (this.end === null) return "ab " + formatDate(this.start);
+    if (this.start.getFullYear() === this.end.getFullYear()
+      && this.start.getMonth() === this.end.getMonth()
+      && this.start.getDate() === this.end.getDate()) return formatDate(this.start);
     return formatDate(this.start) + " \u2013 " + formatDate(this.end);
   }
+
+  eq(b: DateRange): boolean {
+    return dateEq(this.start, b.start) && dateEq(this.end, b.end);
+  }
+}
+
+function dateEq(d1: Date | null, d2: Date | null): boolean {
+  if (!d1 || !d2) return d1 === d2;
+  return d1.getUTCFullYear() === d2.getUTCFullYear()
+    && d1.getUTCMonth() === d2.getUTCMonth()
+    && d1.getUTCDate() === d2.getUTCDate();
+}
+
+export function shiftDateRange(dateRange: DateRange, week: boolean, fwd: boolean) {
+  let modDir = null;
+  if (dateRange.start === null) {
+    dateRange.start = new Date(dateRange.end!);
+    modDir = true;
+  }
+  if (dateRange.end === null) {
+    dateRange.end = new Date(dateRange.start!);
+    modDir = false;
+  }
+
+  const inc = fwd ? 1 : -1;
+  const leader = fwd ? dateRange.end : dateRange.start;
+
+  if (week) {
+    // Align range with week
+    const lweek = DateRange.weekOf(leader);
+    if (dateRange.eq(lweek)) {
+      if (modDir === null || modDir === fwd) dateRange.addDays(inc * 7);
+    } else {
+      dateRange.start = lweek.start;
+      dateRange.end = lweek.end;
+      if (modDir === fwd) dateRange.addDays(inc * 7);
+    }
+  } else {
+    if (dateEq(dateRange.start, dateRange.end)) {
+      dateRange.addDays(inc);
+    } else {
+      dateRange.start = leader;
+      dateRange.end = leader;
+    }
+  }
 }

src/lib/shared/util/util.test.ts

@@ -20,7 +20,7 @@ it("getQueryUrl", () => {
   };
 
   const queryUrl = getQueryUrl(query, "");
-  expect(queryUrl).toBe("?filter%5Bauthor%5D%5B0%5D%5Bid%5D=2&filter%5Bauthor%5D%5B0%5D%5Bname%5D=Max&filter%5Bcategory%5D%5B0%5D%5Bid%5D=1&filter%5Bcategory%5D%5B0%5D%5Bname%5D=Blutabnahme&filter%5Bcategory%5D%5B1%5D%5Bid%5D=2&filter%5Bcategory%5D%5B1%5D%5Bname%5D=Labortests&filter%5Bdone%5D=true&filter%5Bsearch%5D=Hello%20World&pagination%5Blimit%5D=10&pagination%5Boffset%5D=20&sort%5Bfield%5D=room&sort%5Basc%5D=true");
+  expect(queryUrl).toBe("?filter%5Bauthor%5D%5B0%5D%5Bid%5D=2&filter%5Bauthor%5D%5B0%5D%5Bname%5D=Max&filter%5Bcategory%5D%5B0%5D%5Bid%5D=1&filter%5Bcategory%5D%5B0%5D%5Bname%5D=Blutabnahme&filter%5Bcategory%5D%5B1%5D%5Bid%5D=2&filter%5Bcategory%5D%5B1%5D%5Bname%5D=Labortests&filter%5Bdone%5D=true&filter%5Bsearch%5D=Hello%20World&pagination%5Blimit%5D=10&pagination%5Boffset%5D=20&sort%5B0%5D=room");
 
   const decoded = ZEntriesQuery.parse(parseQueryUrl(queryUrl));
   expect(decoded).toStrictEqual(query);

src/lib/shared/util/util.ts

@@ -161,7 +161,7 @@ export function defaultVisitUrl(): string {
 export async function moveEntryTodoDate(id: number, nTodoDays: number, init?: TRPCClientInit) {
   if (nTodoDays > 0) {
     const entry = await trpc(init).entry.get.query(id);
-    const newDate = new Date(entry.current_version.date);
+    const newDate = new Date();
     newDate.setDate(newDate.getDate() + nTodoDays);
 
     await trpc(init).entry.newVersion.mutate({

src/routes/(app)/about/+page.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import logo from "$lib/assets/icon.opt.svg";
+
   // eslint-disable-next-line no-undef
   const version = __VERSION__;
   // eslint-disable-next-line no-undef
@@ -6,6 +8,7 @@
 </script>
 
 <div class="flex flex-col items-center">
+  <img alt="" src={logo} width="200" />
   <h1 class="heading">Visitenbuch</h1>
   <p>Version: {version}</p>
   <p>Letzte Änderung: {lastmod}</p>

src/routes/(app)/entry/[id]/+page.server.ts

@@ -7,7 +7,7 @@ import { ZUrlEntityId } from "$lib/shared/model/validation";
 import { trpc } from "$lib/shared/trpc";
 import { loadWrap, moveEntryTodoDate } from "$lib/shared/util";
 
-import { SchemaNewExecution } from "./editExecution/schema";
+import { SchemaNewExecution } from "./schema";
 
 export const actions: Actions = {
   default: async (event) => loadWrap(async () => {

src/routes/(app)/entry/[id]/+page.svelte

@@ -10,7 +10,7 @@
   import EntryTodoButton from "$lib/components/ui/EntryTodoButton.svelte";
   import MarkdownInput from "$lib/components/ui/markdown/MarkdownInput.svelte";
 
-  import { SchemaNewExecution } from "./editExecution/schema";
+  import { SchemaNewExecution } from "./schema";
 
   export let data: PageData;
 

src/routes/(app)/entry/[id]/+page.ts

@@ -6,7 +6,7 @@ import { ZUrlEntityId } from "$lib/shared/model/validation";
 import { trpc } from "$lib/shared/trpc";
 import { loadWrap } from "$lib/shared/util";
 
-import { SchemaNewExecution } from "./editExecution/schema";
+import { SchemaNewExecution } from "./schema";
 
 export const load: PageLoad = async (event) => {
   const entry = await loadWrap(async () => {

src/routes/(app)/entry/[id]/editExecution/+page.server.ts

@@ -7,7 +7,7 @@ import { ZUrlEntityId } from "$lib/shared/model/validation";
 import { trpc } from "$lib/shared/trpc";
 import { loadWrap, moveEntryTodoDate } from "$lib/shared/util";
 
-import { SchemaNewExecution } from "./schema";
+import { SchemaNewExecution } from "../schema";
 
 export const actions: Actions = {
   default: async (event) => loadWrap(async () => {

src/routes/(app)/entry/[id]/editExecution/+page.svelte

@@ -10,7 +10,7 @@
   import EntryTodoButton from "$lib/components/ui/EntryTodoButton.svelte";
   import MarkdownInput from "$lib/components/ui/markdown/MarkdownInput.svelte";
 
-  import { SchemaNewExecution } from "./schema";
+  import { SchemaNewExecution } from "../schema";
 
   export let data: PageData;
 

src/routes/(app)/entry/[id]/editExecution/+page.ts

@@ -6,7 +6,7 @@ import { ZUrlEntityId } from "$lib/shared/model/validation";
 import { trpc } from "$lib/shared/trpc";
 import { loadWrap } from "$lib/shared/util";
 
-import { SchemaNewExecution } from "./schema";
+import { SchemaNewExecution } from "../schema";
 
 export const load: PageLoad = async (event) => {
   const entry = await loadWrap(async () => {

src/routes/(app)/entry/[id]/editExecution/schema.ts

@@ -1,9 +0,0 @@
-import { zod } from "sveltekit-superforms/adapters";
-
-import { ZEntryExecutionNew, fields } from "$lib/shared/model/validation";
-
-export const SchemaNewExecution = zod(
-  ZEntryExecutionNew.extend({
-    old_execution_id: fields.EntityId().optional(),
-  }),
-);

src/routes/(app)/entry/[id]/schema.ts

@@ -1,10 +1,9 @@
 import { zod } from "sveltekit-superforms/adapters";
-import { z } from "zod";
 
-import { fields } from "$lib/shared/model/validation";
+import { ZEntryExecutionNew, fields } from "$lib/shared/model/validation";
 
-const ZEntryDone = z.object({
-  text: fields.TextString(),
-});
-
-export const SchemaEntryExecution = zod(ZEntryDone);
+export const SchemaNewExecution = zod(
+  ZEntryExecutionNew.extend({
+    old_execution_id: fields.EntityId().optional(),
+  }),
+);

src/routes/(app)/visit/+page.svelte

@@ -3,13 +3,18 @@
   import { goto } from "$app/navigation";
   import type { PageData } from "./$types";
 
+  import { mdiCalendar, mdiDomain } from "@mdi/js";
+
   import { URL_VISIT } from "$lib/shared/constants";
   import type { PaginationRequest, Station } from "$lib/shared/model";
   import { trpc } from "$lib/shared/trpc";
-  import { DateRange, getQueryUrl } from "$lib/shared/util";
+  import {
+    DateRange, dateFromYMD, getQueryUrl, humanDate,
+  } from "$lib/shared/util";
 
   import Autocomplete from "$lib/components/filter/Autocomplete.svelte";
   import EntryCard from "$lib/components/ui/EntryCard.svelte";
+  import IconButton from "$lib/components/ui/IconButton.svelte";
   import PaginationButtons from "$lib/components/ui/PaginationButtons.svelte";
   import WeekSelector from "$lib/components/ui/WeekSelector.svelte";
 
@@ -40,9 +45,12 @@
     selection = null;
   }
 
+  $: groupByStation = data.query.group === "station";
+
   function paginationUpdate(pagination: PaginationRequest): void {
     updateQuery({
       filter: data.query.filter,
+      group: data.query.group,
       pagination,
     });
   }
@@ -54,6 +62,14 @@
         station: selection ? [selection] : undefined,
         date: dateRange ? [{ id: dateRange.toString() }] : undefined,
       },
+      group: data.query.group,
+    });
+  }
+
+  function toggleGroup(): void {
+    updateQuery({
+      ...data.query,
+      group: groupByStation ? undefined : "station",
     });
   }
 
@@ -74,30 +90,53 @@
 
 <div class="flex flex-wrap gap-2 justify-between">
   <div class="flex gap-2 items-center">
-    <span>Woche:</span>
+    <!-- <span>Zeitraum:</span> -->
     <WeekSelector onSelect={filterUpdate} bind:dateRange />
   </div>
 
-  <div class="flex gap-2 items-center">
-    <span>Station:</span>
-    <Autocomplete
-      clearBtn
-      inputCls="input input-sm input-bordered"
-      items={async () => trpc().station.list.query()}
-      onSelect={filterUpdate}
-      onUnselect={filterUpdate}
-      bind:selection />
+  <div class="flex flex-wrap gap-2">
+    <div class="flex items-center gap-2">
+      <span>Gruppierung:</span>
+      <IconButton ariaLabel={groupByStation ? "Station" : "Datum"} path={groupByStation ? mdiDomain : mdiCalendar} on:click={toggleGroup} />
+    </div>
+    <div class="flex items-center gap-2">
+      <span>Station:</span>
+      <Autocomplete
+        clearBtn
+        inputCls="input input-sm input-bordered"
+        items={async () => trpc().station.list.query()}
+        onSelect={filterUpdate}
+        onUnselect={filterUpdate}
+        bind:selection />
+    </div>
   </div>
 </div>
 
 <div class="flex flex-col gap-4">
-  {#each data.entries.items as entry}
-    <EntryCard {entry} />
+  {#each data.groups as group}
+    {@const first = group.items[0] ?? group.prio[0]}
+    <div class="bg-base-content/15 rounded-xl px-2 font-bold">
+      {#if data.groupByStation}
+        {#if first.patient.room}
+          Station {first.patient.room?.station.name}
+        {:else}
+          Keine Station
+        {/if}
+      {:else}
+        {humanDate(dateFromYMD(first.current_version.date), false, true)}
+      {/if}
+    </div>
+    {#each group.prio as entry}
+      <EntryCard {entry} />
+    {/each}
+    {#each group.items as entry}
+      <EntryCard {entry} />
+    {/each}
   {/each}
 </div>
 
 <PaginationButtons
-  data={data.entries}
+  data={data.pagination}
   onUpdate={paginationUpdate}
   paginationData={data.query.pagination}
 />

src/routes/(app)/visit/+page.ts

@@ -4,9 +4,16 @@ import { redirect } from "@sveltejs/kit";
 import { z } from "zod";
 
 import { ZEntriesQuery } from "$lib/shared/model/validation";
-import { trpc } from "$lib/shared/trpc";
+import { trpc, type RouterOutput } from "$lib/shared/trpc";
 import { defaultVisitUrl, loadWrap, parseQueryUrl } from "$lib/shared/util";
 
+type EntryItems = RouterOutput["entry"]["list"]["items"];
+type EntryItem = EntryItems[0];
+type EntryGroup = {
+  items: EntryItems,
+  prio: EntryItems,
+};
+
 export const load: PageLoad = async (event) => {
   return loadWrap(async () => {
     let query: z.infer<typeof ZEntriesQuery> = {};
@@ -20,20 +27,49 @@ export const load: PageLoad = async (event) => {
       redirect(302, defaultVisitUrl());
     }
 
+    const groupByStation = query.group === "station";
+
     // Sort entries by date
-    if (!query.sort) {
-      query.sort = ["priority:dsc", "date"];
-    }
+    query.sort = ["date", "room"];
+    if (groupByStation) query.sort.reverse();
 
     const entries = await trpc(event).entry.list.query(query);
 
-    // Move prioritized items to the front
-    entries.items.forEach((itm, i) => {
-      if (itm.current_version.priority) {
-        entries.items.unshift(entries.items.splice(i, 1)[0]);
-      }
-    });
+    // Group items by date
+    const getGroupKey = groupByStation
+      ? (e: EntryItem) => e.patient.room?.station.id
+      : (e: EntryItem) => e.current_version.date;
 
-    return { query, entries };
+    const groups: EntryGroup[] = [];
+    let dg = null;
+    let items: EntryItems = [];
+    let prio: EntryItems = [];
+
+    for (const entry of entries.items) {
+      // New group
+      if (getGroupKey(entry) !== dg) {
+        dg = getGroupKey(entry);
+        if (items.length > 0 || prio.length > 0) {
+          groups.push({ items, prio });
+          items = [];
+          prio = [];
+        }
+      }
+      if (entry.current_version.priority) {
+        prio.push(entry);
+      } else {
+        items.push(entry);
+      }
+    }
+    if (items.length > 0 || prio.length > 0) {
+      groups.push({ items, prio });
+    }
+
+    return {
+      query,
+      groups,
+      pagination: { offset: entries.offset, total: entries.total, nItems: entries.items.length },
+      groupByStation,
+    };
   });
 };