gcg-website/static/admin/previews/page-previews/event-preview.js

124 lines
3.8 KiB
JavaScript
Raw Normal View History

import {
PageHeader,
DateFormat,
Section,
Container,
} from "./components/index.js";
const EventPreview = ({ widgetsFor, entry }) => {
2023-05-29 16:22:34 +02:00
return [
PageHeader(entry),
Section(
Container([
2023-05-29 16:22:34 +02:00
h(
"ul",
{ className: "list-inline text-center filter-controls mb-5" },
h(
"li",
{ className: "list-inline-item m-3 text-uppercase active" },
"Alle"
),
2023-05-29 16:22:34 +02:00
h(
"li",
{ className: "list-inline-item m-3 text-uppercase" },
"Anstehend"
),
h(
"li",
{ className: "list-inline-item m-3 text-uppercase" },
"Vergangen"
)
),
h(
"div",
{ className: "filtr-container row" },
widgetsFor("events").map((event) =>
2023-05-29 16:22:34 +02:00
h(
"div",
{ className: "filtr-item col-12" },
2023-05-29 16:22:34 +02:00
h(
"div",
{
className: "card hover-shadow border-primary mb-4 p-0",
},
2023-05-29 16:22:34 +02:00
h(
"div",
{ className: "row g-0" },
2023-05-29 16:22:34 +02:00
h(
"div",
{
className:
"col-md-3 text-center p-4 bg-primary text-white rounded",
2023-05-29 16:22:34 +02:00
},
h(
2023-08-01 21:44:43 +02:00
"div",
{ className: "h2" },
event.data.date != null && event.data.date != ""
? DateFormat({
date: event.data.date,
format: { day: "numeric" },
})
: null
),
h(
2023-08-01 21:44:43 +02:00
"div",
{},
event.data.date != null && event.data.date != ""
? DateFormat({
date: event.data.date,
format: { month: "short", year: "numeric" },
})
2023-05-29 16:22:34 +02:00
: null
),
event.data.enddate != null && event.data.enddate != ""
? [
h("br"),
"bis " +
DateFormat({
date: event.data.enddate,
format: {
day: "numeric",
month: "short",
year: "numeric",
},
}),
]
: null
),
h(
"div",
{ className: "col-md-9" },
2023-05-29 16:22:34 +02:00
h(
"div",
{
className:
"card-body h-100 d-flex flex-column justify-content-around",
2023-05-29 16:22:34 +02:00
},
h("h4", { className: "card-title" }, event.data.title),
event.data.location
? h(
"div",
{
className: "card-text",
},
2023-05-29 16:22:34 +02:00
h("i", {
className:
"mdi mdi-map-marker-radius-outline icon-s text-primary me-2",
}),
event.data.location
)
: null
)
2023-05-29 16:22:34 +02:00
)
)
)
)
)
),
])
2023-05-29 16:22:34 +02:00
),
];
};
export default EventPreview;