wm-fontis/wm-fontis-tibi-2023
3
0
Fork 0
generated from cms/tibi-docs
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first version

Browse Source
This commit is contained in:
Robin Grenzdörfer
2023-11-12 10:02:26 +00:00
parent b107392907
commit 92ca030e6c
33 changed files with 1005 additions and 444 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/lib/components/Pagebuilder/Module.svelte Normal file
View File

@@ -0,0 +1,34 @@
<script lang="ts">
import { jobOffers, modules, team } from "../../store"
import Worldcard from "../widgets/Worldcard/worldcard.svelte"
import Boxlist from "../widgets/boxlist.svelte"
import ExtendableBox from "../widgets/extendableBox.svelte"
import IconCycleBox from "../widgets/iconCycleBox.svelte"
import IconCycleCircle from "../widgets/iconCycleCircle.svelte"
import PageLinkBlocks from "../widgets/pageLinkBlocks.svelte"
import Persons from "../widgets/persons.svelte"
let col: { contentType: "moduleImport"; moduleImport: string }
let pageId: string
let bright: boolean
let isHP: boolean
let row: Row
let module = $modules[col.moduleImport]
</script>
{#if module.type == "iconCycleCircle"}
<IconCycleCircle iconCycleCircle="{module.iconCycleCircle}" pageId="{pageId}" />
{:else if module.type == "iconCycleSquare"}
<IconCycleBox iconCycleSquare="{module.iconCycleSquare}" pageId="{pageId}" />
{:else if module.type == "worldCard"}
<Worldcard worldCard="{module.worldCard}" pageId="{pageId}" />
{:else if module.type == "chefTeam"}
<Persons persons="{Object.values($team).filter((p) => p.personType == 'chef')}" pageId="{pageId}" />
{:else if module.type == "employeeTeam"}
<Boxlist persons="{Object.values($team).filter((p) => p.personType == 'employee')}" />
{:else if module.type == "jobOffer"}
<ExtendableBox pages="{Object.values($jobOffers)}" />
{:else if module.type == "jobOfferLink"}
<PageLinkBlocks pages="{Object.values($jobOffers)}" />
{/if}

61
frontend/src/lib/components/Pagebuilder/Pagebuilder.svelte
View File

@@ -14,26 +14,19 @@
import TextLink from "../widgets/textLink.svelte"
import TopDown from "../widgets/topDown.svelte"
import WorldCard from "../widgets/Worldcard/worldcard.svelte"
import { pages, rerender } from "../../store"
import { modules, pages, rerender, team } from "../../store"
import IconCycleCircle from "../widgets/iconCycleCircle.svelte"
import IconCycleBox from "../widgets/iconCycleBox.svelte"
import Module from "./Module.svelte"
export let row: Row
export let pageId: string
export let bright: boolean
export let isHP: boolean
export let i: number
export let page: Page
export let personPage: boolean
function checkNestedPath() {
const pathSegments = location.pathname.split("/").filter((segment) => segment.length)
if (pathSegments.length > 1) {
pathSegments.pop() // remove the last segment
return "/" + pathSegments.join("/")
}
return ""
}
let nestedPath = checkNestedPath()
window.addEventListener("popstate", function (event) {
$rerender = $rerender + 1
})
@@ -41,18 +34,18 @@
{#if Object.keys(row).length}
{#if row.topTitle}
<h3 class="{row.topTitleUpperCase ? 'hph3' : 'nmh3'}" class:red="{row.topTitleRed}">
<h3 class="{row.topTitleUpperCase ? 'hph3' : 'nmh3'}">
{row.topTitle}
</h3>
{/if}
{#if nestedPath}
{#if personPage}
<div class="top-header" style="display: flex; width: 100%; justify-content: space-between;">
<h3
style="cursor: pointer; display: flex; align-items: center; gap: 10px; line-height: 1.4;"
on:keydown
on:click="{() => {
$rerender = $rerender + 1
navigate(nestedPath)
navigate('/' + location.pathname.split('/').at(0))
}}"
>
<img src="/media/arrow-l.svg" alt="arrow" /> Zurück zur Übersicht
@@ -62,15 +55,19 @@
on:keydown
on:click="{() => {
$rerender = $rerender + 1
navigate(row?.nextPage || nestedPath)
let chefs = Object.values($team).filter((p) => p.personType == 'chef')
let i = chefs.findIndex((p) => p.path == page.path)
if (i == chefs.length - 1) i = 0
else i++
navigate(chefs[i].path)
}}"
>
Zum nächsten Profil <img src="/media/arrowr.svg" alt="arrow" />
</h3>
</div>
{/if}
{#if row.pageTitle}
<h1>{row.pageTitle}</h1>
{#if page.pageTitle && i == 0}
<h1>{page.pageTitle}</h1>
{/if}
{#if row.title}
<h2 class="">{row.title}</h2>
@@ -83,10 +80,16 @@
class="row"
class:twoToThree="{row.twoToThree}"
class:normalWrap="{row.flexWrapNormal}"
class:dominant="{row.columns.some((col) => col.contentType == 'iconCycleCircle')}"
class:dominant="{row.columns.some(
(col) => col.contentType == 'moduleImport' && $modules?.[col.moduleImport]?.type == 'iconCycleCircle'
)}"
>
{#each row?.columns as col}
<div class="col" class:dominant="{col.contentType == 'iconCycleCircle'}">
<div
class="col"
class:dominant="{col.contentType == 'moduleImport' &&
$modules?.[col.moduleImport]?.type == 'iconCycleCircle'}"
>
{#if col?.contentType == "text"}
<Text text="{col?.text}" />
{:else if col?.contentType == "textLink"}
@@ -95,12 +98,12 @@
path="{Object.values($pages)?.find((o) => o.id == col.textLink.link)?.path || '/'}"
bright="{bright}"
/>
{:else if col.contentType == "moduleImport"}
<Module col="{col}" pageId="{pageId}" bright="{bright}" isHP="{isHP}" row="{row}" />
{:else if col.contentType == "image"}
<Image image="{col?.image}" col="{col}" pageId="{pageId}" />
{:else if col.contentType == "iconBlocks"}
<IconBlock pageId="{pageId}" col="{col}" />
{:else if col.contentType == "pageLinkBlocks"}
<PageLinkBlocks col="{col}" />
{:else if col.contentType == "networkEvents"}
<Events col="{col}" pageId="{pageId}" />
{:else if col.contentType == "publications"}
@@ -111,18 +114,8 @@
<InfoBoard col="{col}" pageId="{pageId}" />
{:else if col.contentType == "nestedCard"}
<NestedCard col="{col}" />
{:else if col.contentType == "boxlist"}
<Boxlist col="{col}" />
{:else if col.contentType == "extendableBoxes"}
<ExtendableBox col="{col}" />
{:else if col.contentType == "personPreview"}
<Persons col="{col}" pageId="{pageId}" />
{:else if col.contentType == "iconCycleCircle"}
<IconCycleCircle col="{col}" pageId="{pageId}" />
{:else if col.contentType == "iconCycleSquare"}
<IconCycleBox col="{col}" pageId="{pageId}" />
{:else if col.contentType == "worldCard"}
<WorldCard col="{col}" pageId="{pageId}" />
{/if}
</div>
{/each}

39
frontend/src/lib/components/Pagebuilder/Rows.svelte
View File

@@ -1,27 +1,35 @@
<script lang="ts">
import { pages, scrollToRowNr } from "../../store"
import { mediaLibrary, pages, scrollToRowNr, team } from "../../store"
import Homepage from "./Homepage.svelte"
import Pagebuilder from "./Pagebuilder.svelte"
import { apiBaseURL } from "../../../config"
import { onMount } from "svelte"
export let path
export let path: string
export let homepage = false
export let image: FileField
let page: Page
let personPage = false
function initPage() {
page = $pages[path]
if ($pages[path]) {
page = $pages[path]
} else if (
Object.values($team)
.map((p) => p.path == path)
.includes(true)
) {
page = Object.values($team).find((p) => p.path == path)
personPage = true
}
}
onMount(() => {
if ($scrollToRowNr !== -1) {
console.log("test321-", $scrollToRowNr)
if (!$scrollToRowNr) {
$scrollToRowNr = -1
return
}
let element = document.getElementById("row-" + $scrollToRowNr)
console.log(element)
if (!element) {
$scrollToRowNr = -1
return
@@ -35,7 +43,7 @@
})
$: {
if (Object.keys($pages).length) {
if (Object.keys($pages).length || Object.keys($team).length) {
initPage()
}
}
@@ -50,22 +58,27 @@
id="row-{i}"
style="{path == '/' && i == page.rows.length - 1
? 'padding-bottom: 300px; margin-bottom: -40px;'
: ''} {row.row.noBottomMargin ? 'margin-bottom: 0px; padding-bottom: 0px;' : ''} {row.row
.noTopMargin
: ''} {row.noBottomMargin ? 'margin-bottom: 0px; padding-bottom: 0px;' : ''} {row.noTopMargin
? 'margin-top: 0px; padding-top: 0px;'
: ''}"
>
{#if row.row.backgroundImage}
{#if row.backgroundImage && mediaLibrary[row.backgroundImage]}
<div class="background-image">
<img src="{`${apiBaseURL}page/${page.id}/${row.row.backgroundImage?.src}`}" alt="img" />
<img
src="{`${apiBaseURL}medialib/${row?.backgroundImage}/${
mediaLibrary?.[row?.backgroundImage]?.file?.src
}`}"
alt="img"
/>
</div>
{/if}
<div class="content" class:bright="{row.row.backgroundImage}">
<div class="content" class:bright="{row.backgroundImage}">
<Pagebuilder
personPage
isHP="{path == '/'}"
row="{row.row}"
row="{row}"
pageId="{page.id}"
bright="{!!row.row.backgroundImage}"
bright="{!!row.backgroundImage}"
/>
</div>
</div>

3
frontend/src/lib/components/widgets/Worldcard/card.svelte
View File

@@ -1,5 +1,6 @@
<script lang="ts">
import { apiBaseURL } from "../../../../config"
import { mediaLibrary } from "../../../store"
export let card: Card
export let properties: string[][]
@@ -23,7 +24,7 @@
</script>
<div class="card">
<img src="{apiBaseURL}page/{pageId}/{card.image.src}" alt="card" />
<img src="{apiBaseURL}medialib/{card.image}/{$mediaLibrary?.[card?.image]?.file?.src}" alt="card" />
<div class="content">
<div

4
frontend/src/lib/components/widgets/Worldcard/worldcard.svelte
View File

@@ -2,7 +2,7 @@
import Card from "./card.svelte"
import Selectbox from "./selectbox.svelte"
export let col: Column
export let worldCard: WorldCard
export let pageId: string
let availableProperties = [
@@ -38,7 +38,7 @@
<div style="display: flex; flex-direction: column; width: 100%; align-items: center;">
<div class="worldcard">
<div class="worldcard">
{#each col.worldCard.row as row}
{#each worldCard.rows as row}
<div class="wc-row">
{#each row.cards as card}
<Card

12
frontend/src/lib/components/widgets/boxlist.svelte
View File

@@ -1,20 +1,18 @@
<script lang="ts">
export let col: Column
// A function to compare first names and sort the array
export let persons: Page[]
let boxes = persons.map((p) => p.personPreview.name)
const sortByFirstName = (a, b) => {
const nameA = a.name.split(" ")[0] // Extracts the first name from "First Last"
const nameB = b.name.split(" ")[0]
return nameA.localeCompare(nameB)
}
col.boxList.boxes.sort(sortByFirstName) // Sorts the array in place
boxes = boxes.sort(sortByFirstName)
</script>
<div class="boxList">
{#each col.boxList.boxes as name}
{#each boxes as name}
<div class="box">
{name.name}
{name}
</div>
{/each}
</div>

7
frontend/src/lib/components/widgets/events.svelte
View File

@@ -1,5 +1,6 @@
<script lang="ts">
import { apiBaseURL } from "../../../config"
import { mediaLibrary } from "../../store"
export let col: Column
export let pageId: string
@@ -44,7 +45,11 @@
</div>
<div class="details">
<em>{nE.title}</em>
<a href="{apiBaseURL}page/{pageId}/{nE.file.src}" style="text-decoration: none;" download="{apiBaseURL}page/{pageId}/{nE.file.src}">
<a
href="{apiBaseURL}medialib/{nE.file}/{$mediaLibrary?.[nE?.file]?.file?.src}"
style="text-decoration: none;"
download="{apiBaseURL}medialib/{nE.file}/{$mediaLibrary?.[nE?.file]?.file?.src}"
>
<button class="more">mehr</button></a
>
</div>

6
frontend/src/lib/components/widgets/extendableBox.svelte
View File

@@ -2,9 +2,9 @@
import { onMount } from "svelte"
import { openExtendableNr } from "../../store"
export let col: Column
export let pages: Page[]
export let opened = -1
let jobOffers = pages.map((p) => p.jobOffer)
onMount(() => {
if (!isNaN($openExtendableNr) && $openExtendableNr !== -1) {
opened = $openExtendableNr
@@ -14,7 +14,7 @@
</script>
<div class="boxes">
{#each col.extendableBoxes as box, i}
{#each jobOffers as box, i}
<div class="box" class:opened="{i == opened}">
<div
class="upper"

4
frontend/src/lib/components/widgets/iconBlock.svelte
View File

@@ -1,15 +1,15 @@
<script lang="ts">
import { apiBaseURL } from "../../../config"
import { mediaLibrary } from "../../store"
export let pageId: string
export let col: Column
</script>
<div class="iconBlock">
{#each col.iconBlocks as icon}
<div class="icon">
<img src="{`${apiBaseURL}page/${pageId}/${icon.icon?.src}`}" alt="img" />
<img src="{`${apiBaseURL}medialib/${icon.icon}/${mediaLibrary?.[icon?.icon]?.file?.src}`}" alt="img" />
<div class="text">
<em>{icon.bigText}</em>
<p>{icon.smallText}</p>

9
frontend/src/lib/components/widgets/iconCycleBox.svelte
View File

@@ -1,24 +1,25 @@
<script lang="ts">
import { apiBaseURL } from "../../../config"
export let col: Column
import { mediaLibrary } from "../../store"
export let iconCycleSquare: IconCycleSquare
export let pageId: string
let active = -1
setInterval(() => {
active += 1
if (active == col.iconCycleSquare.boxes.length) active = 0
if (active == iconCycleSquare.boxes.length) active = 0
}, 1250)
</script>
<div class="iconCycleSquares">
{#each col?.iconCycleSquare?.boxes as box, i}
{#each iconCycleSquare?.boxes as box, i}
<div class="box" id="box{i}" class:active="{i == active}">
<div class="content">
<div class="icon">
<svg
stroke="{i == active ? 'black' : 'white'}"
fill="{i == active ? 'black' : 'white'}"
data-src="{apiBaseURL}page/{pageId}/{box.icon?.src}"></svg>
data-src="{apiBaseURL}medialib/{box?.icon}/{$mediaLibrary?.[box?.icon]?.file?.src}"></svg>
</div>
<div class="text">
{box.text}

14
frontend/src/lib/components/widgets/iconCycleCircle.svelte
View File

@@ -1,11 +1,13 @@
<script lang="ts">
import { apiBaseURL } from "../../../config"
import { onMount } from "svelte"
import { mediaLibrary } from "../../store"
export let iconCycleCircle: IconCycleCircle
export let col: Column
export let pageId: string
let count = col.iconCycleCircle.boxes.length // The number of surrounding circles.
let count = iconCycleCircle.boxes.length // The number of surrounding circles.
let angleStep = 360 / count
let radius = 310
@@ -34,7 +36,7 @@
<div class="container">
<div class="main-circle">
<div class="content">
{col.iconCycleCircle.innerText}
{iconCycleCircle.innerText}
</div>
{#each circles as { x, y, rotation }, i}
<div
@@ -52,10 +54,12 @@
id="mySvgObject{i}"
stroke="{i == focused ? 'white' : 'black'}"
fill="{i == focused ? 'white' : 'black'}"
data-src="{apiBaseURL}page/{pageId}/{col.iconCycleCircle?.boxes[i]?.icon?.src}"></svg>
data-src="{apiBaseURL}medialib/{iconCycleCircle?.boxes[i]?.icon}/{$mediaLibrary[
iconCycleCircle?.boxes[i]?.icon
]?.file?.src}"></svg>
</div>
<div class="text" style="text-align: center;">
{@html col.iconCycleCircle?.boxes[i]?.text}
{@html iconCycleCircle?.boxes[i]?.text}
</div>
</div>
</div>

10
frontend/src/lib/components/widgets/image.svelte
View File

@@ -1,19 +1,23 @@
<script lang="ts">
import { apiBaseURL } from "../../../config"
import { mediaLibrary } from "../../store"
export let image: FileField
export let pageId: string
export let col: Column
export let col: { contentType: "image"; image: string; icons: { icon: string; link: string }[] }
</script>
<div class="image-container">
<img src="{`${apiBaseURL}page/${pageId}/${image?.src}`}" alt="img" />
<img src="{`${apiBaseURL}medialib/${image?.src}/${$mediaLibrary[image?.src]?.file?.src}`}" alt="img" />
</div>
{#if col && col.icons}
<div class="icons">
{#each col.icons as icon}
<div class="icon">
<a href="{icon.link}" style="text-decoration: none;" target="_blank">
<img src="{`${apiBaseURL}page/${pageId}/${icon.icon?.src}`}" alt="img" />
<img
src="{`${apiBaseURL}medialib/${image?.src}/${$mediaLibrary[image?.src]?.file?.src}`}"
alt="img"
/>
</a>
</div>
{/each}

6
frontend/src/lib/components/widgets/infoBoard.svelte
View File

@@ -1,5 +1,6 @@
<script lang="ts">
import { apiBaseURL } from "../../../config"
import { mediaLibrary } from "../../store"
export let col: Column
export let pageId: string
@@ -8,7 +9,10 @@
<div class="infoBoard">
<div class="header">
<div class="icon">
<img src="{`${apiBaseURL}page/${pageId}/${col.infoBoard.icon?.src}`}" alt="img" />
<img
src="{`${apiBaseURL}medialib/${col.infoBoard.icon}/${$mediaLibrary[col.infoBoard.icon]?.file?.src}`}"
alt="img"
/>
</div>
<div class="title">
{col.infoBoard.title}

20
frontend/src/lib/components/widgets/pageLinkBlocks.svelte
View File

@@ -1,22 +1,21 @@
<script lang="ts">
import { navigate } from "svelte-routing/src/history"
import { openExtendableNr, pages, rerender, scrollToRowNr } from "../../store"
export let col: Column
import { openExtendableNr, rerender, scrollToRowNr } from "../../store"
export let pages: Page[]
let jobOffers = pages.map((p) => p.jobOffer)
let focused = -1
</script>
<div class="link-container">
{#each col.pageLinkBlocks as link, i}
{#if isNaN(link.extendableRowNr)}
{#each jobOffers as job, i}
{#if i > 3}
<button
class="page-ref"
on:click="{() => {
$rerender = $rerender + 1
$scrollToRowNr = link.rowNr
navigate(Object.values($pages)?.find((o) => o.id == link.page)?.path || '/')
}}"
>
{link.name}
{job.title}
</button>
{:else}
<button
@@ -29,14 +28,9 @@
class="row-ref fill"
on:click="{() => {
$rerender = $rerender + 1
$scrollToRowNr = link.rowNr
$openExtendableNr = link.extendableRowNr
navigate(Object.values($pages)?.find((o) => o.id == link.page)?.path || '/')
}}"
>
<div>
{link.name}
</div>
<div>Mehr offene Stellen</div>
<svg
data-src="/media/arrow-r.svg"
stroke="{i == focused ? '#fff' : 'black'}"

22
frontend/src/lib/components/widgets/persons.svelte
View File

@@ -1,39 +1,45 @@
<script lang="ts">
import { apiBaseURL } from "../../../config"
import { pages, rerender } from "../../store"
import { mediaLibrary, pages, rerender } from "../../store"
import { navigate } from "svelte-routing/src/history"
export let pageId: string
export let col: Column
export let persons: Page[]
let hover = -1
</script>
<div class="persons">
{#each col.personPreview as pp, i}
{#each persons as p, i}
<button
class="person"
on:click="{() => {
$rerender = $rerender + 1
navigate(Object.values($pages)?.find((o) => o.id == pp.link)?.path || '/')
navigate(p.path)
}}"
>
<div class="image" on:mouseover="{() => (hover = i)}" on:focus on:blur on:mouseout="{() => (hover = -1)}">
<!-- Initial Image -->
<img
class="initial"
src="{`${apiBaseURL}page/${pageId}/${pp.initialImage?.src}`}"
src="{`${apiBaseURL}medialib/${p.personPreview.hoverImage}/${
$mediaLibrary[p.personPreview.initialImage]?.file?.src
}`}"
alt="img"
style="opacity: {hover == i ? 0 : 1}"
/>
<!-- Hover Image -->
<img
class="hover"
src="{`${apiBaseURL}page/${pageId}/${pp.hoverImage?.src}`}"
src="{`${apiBaseURL}medialib/${p.personPreview.hoverImage}/${
$mediaLibrary[p.personPreview.hoverImage]?.file?.src
}`}"
alt="img"
style="opacity: {hover == i ? 1 : 0}"
/>
</div>
<div class="text">
{pp.name}
{p.personPreview.name}
</div>
</button>
{/each}
@@ -68,7 +74,7 @@
position: absolute;
top: 0;
left: 0;
transition: opacity 0.3s;
transition: opacity 0.3s;
}
}
.text {

5
frontend/src/lib/components/widgets/publications.svelte
View File

@@ -1,5 +1,6 @@
<script lang="ts">
import { apiBaseURL } from "../../../config"
import { mediaLibrary } from "../../store"
export let col: Column
export let pageId: string
@@ -20,8 +21,8 @@
<div class="content">{@html publication.content}</div>
<div class="download">
<a
href="{apiBaseURL}page/{pageId}/{publication.file.src}"
download="{apiBaseURL}page/{pageId}/{publication.file.src}"
href="{apiBaseURL}medialib/{publication.file}/{$mediaLibrary[publication.file]?.file.src}"
download="{apiBaseURL}medialib/{publication.file}/{$mediaLibrary[publication.file]?.file.src}"
>
<button class="download-button">zur Publikation</button>
</a>

6
frontend/src/lib/functions/loadLibrary.ts Normal file
View File

@@ -0,0 +1,6 @@
import { api } from "../../api"
export async function loadLibrary(): Promise<MediaLibrary[]> {
let lib = await api<MediaLibrary[]>("medialib", {})
return lib.data
}

6
frontend/src/lib/functions/loadModules.ts Normal file
View File

@@ -0,0 +1,6 @@
import { api } from "../../api"
export async function loadModules(): Promise<Module[]> {
let module = await api<Module[]>("module", {})
return module.data
}

4
frontend/src/lib/store.ts
View File

@@ -12,6 +12,10 @@ export const location = writable(initLoc)
export let navigation = writable<Navigation>()
export let pages = writable<Pages>({})
export let team = writable<Pages>({})
export let jobOffers = writable<Pages>({})
export let modules = writable<{ [id: string]: Module }>({})
export let mediaLibrary = writable<{ [id: string]: MediaLibrary }>({})
export let serviceNavigation = writable<Navigation>()
export let rerender = writable(0)
export let scrollToRowNr = writable(-1)