generated from cms/tibi-docs
first version
This commit is contained in:
@@ -4,13 +4,25 @@
|
||||
import Menu from "./lib/components/Menu/Menu.svelte"
|
||||
import NotFound from "./lib/components/NotFound.svelte"
|
||||
import Rows from "./lib/components/Pagebuilder/Rows.svelte"
|
||||
import { location, navigation, pages, serviceNavigation, rerender } from "./lib/store"
|
||||
import {
|
||||
location,
|
||||
navigation,
|
||||
pages,
|
||||
serviceNavigation,
|
||||
rerender,
|
||||
mediaLibrary,
|
||||
team,
|
||||
jobOffers,
|
||||
modules,
|
||||
} from "./lib/store"
|
||||
import { onMount, onDestroy } from "svelte"
|
||||
import { Route, Router } from "svelte-routing"
|
||||
import { loadPages } from "./lib/functions/getPages"
|
||||
import { loadNavigation } from "./lib/functions/loadNavigation"
|
||||
import ScrollTop from "./lib/components/widgets/scrollTop.svelte"
|
||||
import ScrollDown from "./lib/components/widgets/scrollDown.svelte"
|
||||
import { loadLibrary } from "./lib/functions/loadLibrary"
|
||||
import { loadModules } from "./lib/functions/loadModules"
|
||||
export let url = ""
|
||||
|
||||
if (url) {
|
||||
@@ -28,11 +40,23 @@
|
||||
async function getPages() {
|
||||
let pagesArray = await loadPages()
|
||||
let pagesRes: Pages = {}
|
||||
let teamRes: Pages = {}
|
||||
let jobOffersRes: Pages = {}
|
||||
|
||||
pagesArray.forEach((e) => {
|
||||
pagesRes[e.path] = e
|
||||
if (e.type == "page") {
|
||||
pagesRes[e.path] = e
|
||||
} else if (e.type == "teamMembers") {
|
||||
teamRes[e.path] = e
|
||||
} else if (e.type == "jobOffers") {
|
||||
jobOffersRes[e.path] = e
|
||||
} else {
|
||||
pagesRes[e.path] = e
|
||||
}
|
||||
})
|
||||
$pages = pagesRes
|
||||
$team = teamRes
|
||||
$jobOffers = jobOffersRes
|
||||
}
|
||||
|
||||
async function getNavigation() {
|
||||
@@ -41,8 +65,27 @@
|
||||
$serviceNavigation = nav[1]
|
||||
}
|
||||
|
||||
async function getLibrary() {
|
||||
let library: MediaLibrary[] = await loadLibrary()
|
||||
let lib = {}
|
||||
library.forEach((e) => {
|
||||
lib[e.id] = e
|
||||
})
|
||||
$mediaLibrary = lib
|
||||
}
|
||||
|
||||
async function getModules() {
|
||||
let moduleArray: Module[] = await loadModules()
|
||||
let mod = {}
|
||||
moduleArray.forEach((e) => {
|
||||
mod[e.id] = e
|
||||
})
|
||||
$modules = mod
|
||||
}
|
||||
|
||||
getNavigation()
|
||||
getPages()
|
||||
getLibrary()
|
||||
|
||||
let activeMenu = false
|
||||
$: {
|
||||
|
||||
34
frontend/src/lib/components/Pagebuilder/Module.svelte
Normal file
34
frontend/src/lib/components/Pagebuilder/Module.svelte
Normal 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}
|
||||
@@ -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}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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'}"
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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
6
frontend/src/lib/functions/loadLibrary.ts
Normal 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
6
frontend/src/lib/functions/loadModules.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import { api } from "../../api"
|
||||
|
||||
export async function loadModules(): Promise<Module[]> {
|
||||
let module = await api<Module[]>("module", {})
|
||||
return module.data
|
||||
}
|
||||
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user