Umbau Ganztagsbereich (#292)

- [x] Umbau von Bereich zu Hauptseite mit Kacheln - [x] Aktualisierung für SJ 2025/2026 - [x] Aktualisierung in CMS-Konfiguration inkl. Vorschau Reviewed-on: #292
2024-09-16 21:34:24 +02:00
parent 8695df0533
commit f377ec7f25
42 changed files with 257 additions and 640 deletions
--- a/static/admin/config/collections/ganztag.js
+++ b/static/admin/config/collections/ganztag.js
@ -1,86 +0,0 @@
-import { EditorProps, MarkdownProps, ImageProps } from "../props.js";
-import { Title, DescriptionText, DraftBoolean } from "./widgets.js";
-
-const GanztagCollection = {
-  name: "ganztagsangebote",
-  label: "Ganztag",
-  label_singular: "Arbeitsgemeinschaft",
-  description:
-    "Hier kann die Übersicht der Ganztagsangebote bearbeitet werden.",
-  icon: "group",
-  folder: "content/ganztagsangebote",
-  ...EditorProps,
-  filter: {
-    field: "type",
-    value: "ganztagsangebote",
-  },
-  summary_fields: ["title", "draft", "category", "schedule", "room"],
-  fields: [
-    Title(false),
-    DraftBoolean,
-    DescriptionText,
-    {
-      name: "image",
-      label: "Titelbild",
-      default: "/media/ganztagsangebote/image.webp",
-      ...ImageProps,
-      required: true,
-    },
-    {
-      name: "category",
-      label: "Themebereich",
-      hint: "Verwaltet in den Einstellungen",
-      widget: "relation",
-      collection: "settings",
-      file: "data-categories",
-      value_field: "ganztag.*",
-      search_fields: ["ganztag.*"],
-      display_fields: ["ganztag.*"],
-      required: true,
-    },
-    {
-      name: "duration",
-      label: "Dauer",
-      widget: "string",
-      required: true,
-    },
-    {
-      name: "schedule",
-      label: "Tag/Stunden",
-      widget: "string",
-      required: true,
-    },
-    {
-      name: "class",
-      label: "Klassenstufen(n)",
-      widget: "string",
-      required: true,
-    },
-    {
-      name: "room",
-      label: "Raum",
-      widget: "string",
-      required: true,
-    },
-    {
-      name: "apply_url",
-      label: "Anmeldelink",
-      widget: "hidden",
-      default: "https://moodle.bildung-lsa.de/gcg/mod/choice/view.php?id=828",
-    },
-    {
-      name: "type",
-      label: "Typ",
-      widget: "hidden",
-      default: "ganztagsangebote",
-    },
-    {
-      name: "body",
-      label: "Inhalt",
-      required: false,
-      ...MarkdownProps,
-    },
-  ],
-};
-
-export default GanztagCollection;
--- a/static/admin/config/collections/index-pages.js
+++ b/static/admin/config/collections/index-pages.js
@ -241,7 +241,46 @@ const IndexPagesCollection = {
      name: "ganztagsangebote-index",
      label: "Unser Ganztagsbereich",
      file: "content/ganztagsangebote/_index.md",
-      fields: [Title(false), DescriptionText],
+      fields: [
+        Title(false),
+        DescriptionText,
+        {
+          name: "tiles",
+          label: "Ganztagsangebote",
+          hint: "Die Vorschau zeigt nur die Karten, NICHT die Inhalte.",
+          widget: "list",
+          required: false,
+          collapsed: true,
+          fields: [
+            Title(false),
+            {
+              name: "image",
+              label: "Titelbild",
+              default: "/media/ganztagsangebote/image.webp",
+              ...ImageProps,
+              required: true,
+            },
+            {
+              name: "category",
+              label: "Themebereich",
+              hint: "Verwaltet in den Einstellungen",
+              widget: "relation",
+              collection: "settings",
+              file: "data-categories",
+              value_field: "ganztag.*",
+              search_fields: ["ganztag.*"],
+              display_fields: ["ganztag.*"],
+              required: true,
+            },
+            {
+              name: "content",
+              label: "Inhalt",
+              required: false,
+              ...MarkdownProps,
+            },
+          ],
+        },
+      ],
    },
    {
      name: "projektwoche-index",
--- a/static/admin/config/collections/index.js
+++ b/static/admin/config/collections/index.js
@ -4,7 +4,6 @@ import PagesCollection from "./pages.js";
 import AuthorCollection from "./author.js";
 import BlogCollection from "./blog.js";
 import FormsCollection from "./forms.js";
-import GanztagCollection from "./ganztag.js";
 import WettbewerbeCollection from "./wettbewerbe.js";
 import BegabteCollection from "./begabte.js";
 import ProjektwocheCollection from "./projektwoche.js";
@ -23,7 +22,6 @@ export {
  AuthorCollection,
  BlogCollection,
  FormsCollection,
-  GanztagCollection,
  WettbewerbeCollection,
  BegabteCollection,
  ProjektwocheCollection,
--- a/static/admin/config/index.js
+++ b/static/admin/config/index.js
@ -8,7 +8,6 @@ import {
  ChronikjahreCollection,
  ChronikseitenCollection,
  FormsCollection,
-  GanztagCollection,
  IndexPagesCollection,
  PagesCollection,
  ProjektwocheCollection,
@ -64,7 +63,6 @@ const config = {
    AuthorCollection,
    BlogCollection,
    FormsCollection,
-    GanztagCollection,
    WettbewerbeCollection,
    BegabteCollection,
    ProjektwocheCollection,
--- a/static/admin/index.html
+++ b/static/admin/index.html
@ -22,7 +22,6 @@
        AboutPreview,
        BlogPreview,
        ContestPreview,
-        GanztagPreview,
        PagePreview,
        EventPreview,
        AnmeldungPreview,
@ -64,7 +63,6 @@
      CMS.registerPreviewTemplate("about-index", AboutPreview);
      CMS.registerPreviewTemplate("blog", BlogPreview);
      CMS.registerPreviewTemplate("wettbewerbe", ContestPreview);
-      CMS.registerPreviewTemplate("ganztagsangebote", GanztagPreview);
      CMS.registerPreviewTemplate("kontakt", KontaktPreview);
      CMS.registerPreviewTemplate("termine", EventPreview);
      CMS.registerPreviewTemplate("anmeldung-index", AnmeldungPreview);
@ -75,7 +73,7 @@
      CMS.registerPreviewTemplate("forms", FormsPreview);
      CMS.registerPreviewTemplate("cantorpreis", CantorpreisPreview);
      CMS.registerPreviewTemplate("begabte", ContestPreview);
-      ["projektwoche", "superhaufen"].forEach((page) =>
+      ["projektwoche", "superhaufen", "ganztagsangebote-index"].forEach((page) =>
        CMS.registerPreviewTemplate(page, ProjektwochePreview)
      );
      ["abiturienten", "cantorfora"].forEach((page) =>
@ -85,7 +83,6 @@
        "blog-index",
        "cantorpreis-index",
        "forms-index",
-        "ganztagsangebote-index",
        "wettbewerbe-index",
        "begabte-index",
        "abiturienten-index",
@ -134,7 +131,6 @@
        "blog",
        "cantorpreis",
        "pages",
-        "ganztagsangebote",
        "wettbewerbe",
        "begabte",
        "projektwoche",
--- a/static/admin/previews/page-previews/ganztag-preview.js
+++ b/static/admin/previews/page-previews/ganztag-preview.js
@ -1,111 +0,0 @@
-import {
-  Container,
-  ContentJustify,
-  PageHeader,
-  Section,
-} from "./components/index.js";
-
-const GanztagPreview = ({
-  widgetFor,
-  entry,
-  fields,
-  collection,
-}) => {
-  const imageField = useMemo(() => {
-    return fields.find((field) => field.name === "image");
-  }, [fields]);
-
-  const imageUrl = useMediaAsset(
-    entry.data.image,
-    collection,
-    imageField,
-    entry
-  );
-  return [
-    PageHeader(entry),
-    Section(
-      Container([
-        h("img", { className: "img-fluid w-100 mb-4", src: imageUrl }),
-        h("h2", {}, entry.data.title),
-        h(
-          "div",
-          { className: "row mb-4" },
-          h(
-            "div",
-            { className: "col-lg-3 col-sm-6 mb-3 mb-sm-0" },
-            h(
-              "div",
-              { className: "d-flex align-items-center" },
-              h("i", {
-                className:
-                  "mdi mdi-calendar-today-outline text-primary icon-md me-2",
-              }),
-              h(
-                "div",
-                { className: "text-start" },
-                h("h6", { className: "mb-0 text-uppercase" }, "Zeit"),
-                h("p", { className: "mb-0" }, entry.data.schedule)
-              )
-            )
-          ),
-          h(
-            "div",
-            { className: "col-lg-3 col-sm-6 mb-3 mb-sm-0" },
-            h(
-              "div",
-              { className: "d-flex align-items-center" },
-              h("i", {
-                className: "mdi mdi-timer-sand text-primary icon-md me-2",
-              }),
-              h(
-                "div",
-                { className: "text-start" },
-                h("h6", { className: "mb-0 text-uppercase" }, "Dauer"),
-                h("p", { className: "mb-0" }, entry.data.duration)
-              )
-            )
-          ),
-          h(
-            "div",
-            { className: "col-lg-3 col-sm-6 mb-3 mb-sm-0" },
-            h(
-              "div",
-              { className: "d-flex align-items-center" },
-              h("i", {
-                className: "mdi mdi-crowd text-primary icon-md me-2",
-              }),
-              h(
-                "div",
-                { className: "text-start" },
-                h("h6", { className: "mb-0 text-uppercase" }, "Klassen"),
-                h("p", { className: "mb-0" }, entry.data.class)
-              )
-            )
-          ),
-          h(
-            "div",
-            { className: "col-lg-3 col-sm-6 mb-3 mb-sm-0" },
-            h(
-              "div",
-              { className: "d-flex align-items-center" },
-              h("i", {
-                className:
-                  "mdi mdi-map-marker-radius-outline text-primary icon-md me-2",
-              }),
-              h(
-                "div",
-                { className: "text-start" },
-                h("h6", { className: "mb-0 text-uppercase" }, "Raum"),
-                h("p", { className: "mb-0" }, entry.data.room)
-              )
-            )
-          )
-        ),
-        h("hr", { className: "mb-4" }),
-        ContentJustify(widgetFor("body")),
-      ])
-    ),
-  ];
-};
-
-export default GanztagPreview;
--- a/static/admin/previews/page-previews/index.js
+++ b/static/admin/previews/page-previews/index.js
@ -1,7 +1,6 @@
 import AboutPreview from "./about-preview.js";
 import BlogPreview from "./blog-preview.js";
 import ContestPreview from "./contest-preview.js";
-import GanztagPreview from "./ganztag-preview.js";
 import PagePreview from "./page-preview.js";
 import EventPreview from "./event-preview.js";
 import AnmeldungPreview from "./anmeldung-preview.js";
@ -22,7 +21,6 @@ export {
  AboutPreview,
  BlogPreview,
  ContestPreview,
-  GanztagPreview,
  PagePreview,
  EventPreview,
  AnmeldungPreview,
--- a/static/admin/previews/page-previews/projektwoche-preview.js
+++ b/static/admin/previews/page-previews/projektwoche-preview.js
@ -1,11 +1,7 @@
-import {
-  Container,
-  ContentJustify,
-  PageHeader,
-  Row,
-} from "./components/index.js";
+import { Container, ContentJustify, PageHeader, Row } from "./components/index.js";

-const ProjektwochePreview = ({ widgetsFor, widgetFor, entry }) => {
+const ProjektwochePreview = ({ widgetsFor, widgetFor, entry, collection, fields }) => {
+  const imageField = useMemo(() => fields.find((field) => field.name === "image"), [fields]);
  return [
    PageHeader(entry),
    h(
@ -23,30 +19,27 @@ const ProjektwochePreview = ({ widgetsFor, widgetFor, entry }) => {
                {
                  className: "card border-primary rounded-0 hover-shadow mb-4",
                },
-                h(
-                  "div",
-                  {
-                    className: "container fb-tile-color",
-                    style: { backgroundColor: tile.data.bg_color },
-                  },
-                  h("i", {
-                    className: (tile.data.icon ?? "") + " fb-tile-icon",
-                    style: { color: tile.data.font_color },
-                  })
-                ),
+                tile.data.image && tile.data.image != "" && tile.data.image != "/media/image.webp"
+                  ? h("img", {
+                      className: "card-img-top rounded-0",
+                      src: useMediaAsset(tile.data.image, collection, imageField, entry),
+                    })
+                  : h(
+                      "div",
+                      {
+                        className: "container fb-tile-color",
+                        style: { backgroundColor: tile.data.bg_color },
+                      },
+                      h("i", {
+                        className: (tile.data.icon ?? "") + " fb-tile-icon",
+                        style: { color: tile.data.font_color },
+                      })
+                    ),
                h(
                  "div",
                  { className: "card-body" },
-                  h(
-                    "h4",
-                    { className: "card-title text-truncate" },
-                    tile.data.title
-                  ),
-                  h(
-                    "button",
-                    { type: "button", className: "btn btn-primary btn-sm" },
-                    "Mehr anzeigen"
-                  )
+                  h("h4", { className: "card-title text-truncate" }, tile.data.title),
+                  h("button", { type: "button", className: "btn btn-primary btn-sm" }, "Mehr anzeigen")
                )
              )
            )
--- a/static/media/ganztagsangebote/english-theatre.webp
+++ b/static/media/ganztagsangebote/english-theatre.webp
--- a/static/media/ganztagsangebote/homepage.webp
+++ b/static/media/ganztagsangebote/homepage.webp
--- a/static/media/ganztagsangebote/jugger.webp
+++ b/static/media/ganztagsangebote/jugger.webp
--- a/static/media/ganztagsangebote/modelleisenbahn.webp
+++ b/static/media/ganztagsangebote/modelleisenbahn.webp
--- a/static/media/ganztagsangebote/sport.webp
+++ b/static/media/ganztagsangebote/sport.webp
--- a/static/media/ganztagsangebote/tischtennis.webp
+++ b/static/media/ganztagsangebote/tischtennis.webp
--- a/static/media/wettbewerbe/strongest-student.webp
+++ b/static/media/wettbewerbe/strongest-student.webp