Content Page überarbeitet. Inhalte werden nun auch erneut geholt, wenn sich die URL durch die History ändert. Aktuell statische Texte sind in localization files für en und de ausgelagert.

This commit is contained in:
Mario Linz 2022-06-02 11:04:37 +02:00
parent aaf2860714
commit cabaaef456
6 changed files with 66 additions and 35 deletions

View File

@ -186,19 +186,18 @@ export const sendEmail = async (type: string = "contactForm", data: any, noToken
})
}
export const getContent = async (locale: string, filter?: APIParams, params?: APIParams): Promise<Content[]> => {
export const getContent = async (filter: APIParams, params?: APIParams): Promise<Content> => {
const c = await api<Content[]>("content", {
// limit: 1,
params: {
sort: "priority",
...params,
},
filter: { locale, ...filter },
params,
filter,
sort: "-priority",
})
if (c?.data?.length) {
return c.data
return c.data[0]
}
return null
}

View File

@ -60,8 +60,6 @@
<Header />
{$_("test")}
<Router url="{url}">
<Route path="/" let:params>
<Home />

View File

@ -1,4 +1,5 @@
<script lang="ts">
import { _ } from "svelte-i18n"
import { getContent } from "../../api"
import { generalInfo, currentLang, location } from "../../store"
import { navigate } from "svelte-routing"
@ -9,30 +10,49 @@
let loading = true
let content: Content
let currentDomain = window.location.protocol + "//" + window.location.host
let connectedContentNotFound: boolean = false
let oldLocation: string
$: currentDomain = window.location.protocol + "//" + window.location.host
const load = (type?: string) => {
// Set default API call filter
let filter = {
locale: $currentLang,
path,
}
// API call filter without locale if URL changed
if (path !== content?.path) {
delete filter.locale
}
// Changed filter to find simmilar content for changed language
if (type === "changedLanguage" && content?.tags) {
filter = {
tags: { $in: content?.tags },
locale: $currentLang,
}
delete filter.path
}
// Get content by API call
loading = true
getContent($currentLang, filter)
getContent(filter)
.then((c) => {
if (c && c.length) {
if (c) {
if (type === "changedLanguage") {
navigate("/" + c[0].path + $location.search, { replace: true })
} else {
content = c[0]
let newPath = c.path + $location.search
window.history.pushState({}, document.getElementsByTagName("title")[0].innerHTML, newPath)
}
connectedContentNotFound = false
content = c
} else {
// Show message if not found simmilar content for changed language
if (filter.tags) {
connectedContentNotFound = true
}
content = null
}
})
.finally(() => {
@ -41,7 +61,9 @@
}
currentLang.subscribe(() => {
load("changedLanguage")
if (content) {
load("changedLanguage")
}
})
$: if (path) load()
@ -73,19 +95,31 @@
/>
</div>
<h1>Seite nicht gefunden!</h1>
<h1>{$_("pageNotFound")}</h1>
<p class="mb-md">
<strong>{path}</strong>
{#if connectedContentNotFound}
<div>
{@html $_("connectedContentNotFound", {
values: {
url: currentDomain + "/" + path,
lang: $_($currentLang) + ` (${$currentLang})`,
},
})}
</div>
{:else}
<strong>
<a href="{currentDomain + '/' + path}">{currentDomain + "/" + path}</a>
</strong>
{/if}
</p>
<p>
Die gesuchte Seite existiert nicht oder es ist ein anderer Fehler aufgetreten.<br />
Gehen Sie zurück oder gehen Sie zu <a href="/"><strong>{currentDomain}</strong></a>, um eine
neue Richtung zu wählen.
</p>
<p>
The page you are looking for doesn't exist or an other error occurred.<br />
Go back, or head over to <a href="/"><strong>{currentDomain}</strong></a> to choose a new direction.
{@html $_("pageNotFoundInformation", {
values: {
url: currentDomain,
backUrl: currentDomain + "/" + path,
},
})}
</p>
</div>
{/if}

View File

@ -1,8 +0,0 @@
#ccBarButtons #ccBarShowMoreButton {
color: @primary !important;
}
#ccBar ul li input[type="checkbox"]:checked ~ label:before {
background: @primary !important;
top: 1px;
}

View File

@ -1,3 +1,7 @@
{
"test": "DE - TEST"
"pageNotFound": "Seite nicht gefunden!",
"pageNotFoundInformation": "Die gesuchte Seite existiert nicht oder es ist ein anderer Fehler aufgetreten.<br/>Gehen Sie <a href=\"{backUrl}\"><strong>zurück</strong></a> oder gehen Sie zu <a href=\"{url}\"><strong>{url}</strong></a>, um eineneue Richtung zu wählen.",
"connectedContentNotFound": "Zur aktuellen Seite <a href=\"{url}\"><strong>{url}</strong></a> wurde für die gewählte Sprache \"<strong>{lang}</strong>\" keine Übersetzung gefunden!",
"de": "Deutsch",
"en": "Englisch"
}

View File

@ -1,3 +1,7 @@
{
"test": "EN - TEST"
"pageNotFound": "Page not found!",
"pageNotFoundInformation": "The page you are looking for doesn't exist or an other error occurred.<br/><a href=\"{backUrl}\"><strong>Go back</strong></a>, or head over to <a href=\"{url}\"><strong>{url}</strong></a> to choose a new direction.",
"connectedContentNotFound": "No translation was found for the selected language \"<strong>{lang}</strong>\" for the current page <a href=\"{url}\"><strong>{url}</strong></a>!",
"de": "German",
"en": "English"
}