ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add translations strings

This commit is contained in:
Christian Cueni 2022-11-08 12:06:48 +01:00
parent 3608156353
commit 03bbd26774
21 changed files with 164 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
client/src/components/AppFooter.vue
View File

@ -7,13 +7,13 @@ log.debug("AppFooter created");
<template> <template>
<footer class="px-8 py-4 bg-gray-200 border-t flex flex-col lg:flex-row"> <footer class="px-8 py-4 bg-gray-200 border-t flex flex-col lg:flex-row">
<div>@2022 VBV</div> <div>@2022 VBV</div>
<div class="lg:ml-8">FAQ</div> <div class="lg:ml-8">{{ $t("footer.faq") }}</div>
<div class="lg:ml-8">Datenschutzbestimmungen</div> <div class="lg:ml-8">{{ $t("footer.dataProtection") }}</div>
<div class="lg:ml-8">Impressum</div> <div class="lg:ml-8">{{ $t("footer.imprint") }}</div>
<div class="flex-grow"></div> <div class="flex-grow"></div>
<div>VBV_VERSION_BUILD_NUMBER_VBV</div> <div>VBV_VERSION_BUILD_NUMBER_VBV</div>
<div class="lg:ml-8">Deutsch</div> <div class="lg:ml-8">Deutsch</div>
<div class="lg:ml-8">Kontakt</div> <div class="lg:ml-8">{{ $t("footer.contact") }}</div>
</footer> </footer>
</template> </template>

6
client/src/components/competences/PerformanceCriteriaRow.vue
View File

@ -32,7 +32,7 @@ const profilePageSlug = route.params["competenceProfilePageSlug"];
{{ criteria.competence_id }} {{ criteria.title }} {{ criteria.competence_id }} {{ criteria.title }}
</h4> </h4>
<p class="hidden lg:block"> <p class="hidden lg:block">
Lerneinheit: {{ $t("general.learningUnit") }}:
<router-link class="link" :to="criteria.learning_unit.frontend_url"> <router-link class="link" :to="criteria.learning_unit.frontend_url">
{{ criteria.learning_unit.title }} {{ criteria.learning_unit.title }}
</router-link> </router-link>
@ -40,7 +40,7 @@ const profilePageSlug = route.params["competenceProfilePageSlug"];
</div> </div>
</div> </div>
<p class="lg:hidden mb-2"> <p class="lg:hidden mb-2">
Lerneinheit: {{ $t("general.learningUnit") }}:
<router-link class="link" :to="criteria.learning_unit.frontend_url"> <router-link class="link" :to="criteria.learning_unit.frontend_url">
{{ criteria.learning_unit.title }} {{ criteria.learning_unit.title }}
</router-link> </router-link>
@ -50,7 +50,7 @@ const profilePageSlug = route.params["competenceProfilePageSlug"];
class="link" class="link"
:to="`/competence/${profilePageSlug}/criteria/${criteria.slug}`" :to="`/competence/${profilePageSlug}/criteria/${criteria.slug}`"
> >
Sich nochmals einschätzen {{ $t("competences.assessAgain") }}
</router-link> </router-link>
</span> </span>
</div> </div>

4
client/src/components/learningPath/LearningContent.vue
View File

@ -29,8 +29,8 @@ const block = computed(() => {
<div v-if="block"> <div v-if="block">
<LearningContentContainer <LearningContentContainer
:title="learningContent.title" :title="learningContent.title"
next-button-text="Abschliessen und weiter" :next-button-text="$t('learningContent.completeAndContinue')"
exit-text="zurück zum Circle" :exit-text="$t('general.backToCircle')"
@exit="circleStore.closeLearningContent(props.learningContent)" @exit="circleStore.closeLearningContent(props.learningContent)"
@next="circleStore.continueFromLearningContent(props.learningContent)" @next="circleStore.continueFromLearningContent(props.learningContent)"
> >

2
client/src/components/learningPath/LearningContentContainer.vue
View File

@ -37,7 +37,7 @@ const emit = defineEmits(["back", "next", "exit"]);
data-cy="cancel-and-back" data-cy="cancel-and-back"
@click="$emit('back')" @click="$emit('back')"
> >
Zurück {{ $t("general.backCapitalized") }}
</button> </button>
<button <button
type="button" type="button"

7
client/src/components/learningPath/LearningSequence.vue
View File

@ -141,9 +141,12 @@ const learningSequenceBorderClass = computed(() => {
<span <span
v-if="continueTranslationKeyTuple[1]" v-if="continueTranslationKeyTuple[1]"
class="whitespace-nowrap" class="whitespace-nowrap"
>Los geht's >
{{ $t("general.start") }}
</span>
<span v-else class="whitespace-nowrap">
{{ $t("general.nextStep") }}
</span> </span>
<span v-else class="whitespace-nowrap"> Weiter geht's </span>
</button> </button>
<div class="hidden sm:block"></div> <div class="hidden sm:block"></div>
<div class="w-full sm:w-auto"> <div class="w-full sm:w-auto">

30
client/src/components/learningPath/SelfEvaluation.vue
View File

@ -44,9 +44,9 @@ function handleBack() {
<template> <template>
<div v-if="learningUnit"> <div v-if="learningUnit">
<LearningContentContainer <LearningContentContainer
:title="`Selbsteinschätzung ${learningUnit.title}`" :title="$t('selfEvaluation.title', { title: learningUnit.title })"
:exit-text="'zurück zum Circle'" :exit-text="$t('general.backToCircle')"
:next-button-text="'Weiter'" :next-button-text="$t('general.next')"
:show-back-button="showBackButton" :show-back-button="showBackButton"
@exit="circleStore.closeSelfEvaluation(props.learningUnit)" @exit="circleStore.closeSelfEvaluation(props.learningUnit)"
@next="handleContinue()" @next="handleContinue()"
@ -54,14 +54,19 @@ function handleBack() {
> >
<div class="container-medium"> <div class="container-medium">
<div class="mt-2 lg:mt-8 text-gray-700"> <div class="mt-2 lg:mt-8 text-gray-700">
Schritt {{ state.questionIndex + 1 }} von {{ questions.length }} {{
$t("selfEvaluation.steps", {
current: state.questionIndex + 1,
max: questions.length,
})
}}
</div> </div>
<p class="text-large mt-4"> <p class="text-large mt-4">
Überprüfe, ob du in der Lernheinheit {{ $t("selfEvaluation.instruction[0]") }}
<span class="font-bold">«{{ learningUnit.title }}»</span> alles verstanden <span class="font-bold">«{{ learningUnit.title }}»</span>
hast.<br /> {{ $t("selfEvaluation.instruction[1]") }}<br />
Lies die folgende Aussage und bewerte sie: {{ $t("selfEvaluation.instruction[2]") }}
</p> </p>
<div class="mt-4 lg:mt-8 p-6 lg:p-12 border"> <div class="mt-4 lg:mt-8 p-6 lg:p-12 border">
@ -80,7 +85,9 @@ function handleBack() {
@click="circleStore.markCompletion(currentQuestion, 'success')" @click="circleStore.markCompletion(currentQuestion, 'success')"
> >
<it-icon-smiley-happy class="w-16 h-16 mr-4"></it-icon-smiley-happy> <it-icon-smiley-happy class="w-16 h-16 mr-4"></it-icon-smiley-happy>
<span class="font-bold text-large"> Ja, ich kann das. </span> <span class="font-bold text-large">
{{ $t("selfEvaluation.yes") }}.
</span>
</button> </button>
<button <button
class="flex-1 inline-flex items-center text-left p-4 border" class="flex-1 inline-flex items-center text-left p-4 border"
@ -92,12 +99,13 @@ function handleBack() {
@click="circleStore.markCompletion(currentQuestion, 'fail')" @click="circleStore.markCompletion(currentQuestion, 'fail')"
> >
<it-icon-smiley-thinking class="w-16 h-16 mr-4"></it-icon-smiley-thinking> <it-icon-smiley-thinking class="w-16 h-16 mr-4"></it-icon-smiley-thinking>
<span class="font-bold text-xl"> Das muss ich nochmals anschauen. </span> <span class="font-bold text-xl"> {{ $t("selfEvaluation.no") }}. </span>
</button> </button>
</div> </div>
<div class="mt-6 lg:mt-12"> <div class="mt-6 lg:mt-12">
Schau dein Fortschritt in deinem KompetenzNavi: KompetenzNavi öffnen {{ $t("selfEvaluation.progressText") }}
{{ $t("selfEvaluation.progressLink") }}
</div> </div>
</div> </div>
</div> </div>

2
client/src/i18n.ts
View File

@ -4,7 +4,7 @@ import { createI18n } from "vue-i18n";
// https://vue-i18n.intlify.dev/guide/advanced/lazy.html // https://vue-i18n.intlify.dev/guide/advanced/lazy.html
export const SUPPORT_LOCALES = ["de", "fr", "it"]; export const SUPPORT_LOCALES = ["de", "fr", "it"];
export function setupI18n(options = { locale: "de" }) { export function setupI18n(options = { locale: "de", legacy: false }) {
const i18n = createI18n(options); const i18n = createI18n(options);
setI18nLanguage(i18n, options.locale); setI18nLanguage(i18n, options.locale);
return i18n; return i18n;

60
client/src/locales/de.json
View File

@ -1,11 +1,67 @@
{ {
"general": { "general": {
"c2aNextStep": "Weiter geht's" "nextStep": "Weiter geht's",
"start": "Los geht's",
"backToLearningPath": "zurück zum Lernpfad",
"backToCircle": "zurück zum Circle",
"next": "Weiter",
"back": "zurück",
"backCapitalized": "@.capitalize:general.back",
"save": "Speichern",
"learningUnit": "Lerneinheit",
"show": "Anschauen"
}, },
"dashboard": { "dashboard": {
"welcome": "Willkommen, {name}" "welcome": "Willkommen, {name}"
}, },
"learningPathPage": { "learningPathPage": {
"showListView": "Listenansicht anzeigen" "welcomeBack": "Willkommen zurück, {name}",
"showListView": "Listenansicht anzeigen",
"nextStep": "Nächster Schritt"
},
"circlePage": {
"duration": "Dauer",
"circleContentBoxTitle": "Das lernst du in diesem Circle."
},
"learningContent": {
"completeAndContinue": "Abschliessen und weiter"
},
"selfEvaluation": {
"title": "Selbsteinschätzung {title}",
"steps": "Schritt {current} von {max}",
"instruction": [
"Überprüfe, ob du in der Lernheinheit",
"alles verstanden hast.",
"Lies die folgende Aussage und bewerte sie:"
],
"yes": "Ja, ich kann das",
"no": "Das muss ich nochmals anschauen",
"progressText": "Schau dein Fortschritt in deinem KompetenzNavi:",
"progressLink": "KompetenzNavi öffnen"
},
"competences": {
"title": "KompetenzNavi",
"lastImprovements": "Letzte verbesserte Kompetenzen",
"showAll": "Alle anschauen",
"assessment": "Einschätzungen",
"notAssessed": "Nicht eingeschätzt",
"assessAgain": "Sich nochmals einschätzen"
},
"mediaLibrary": {
"title": "Mediathek",
"learningMedia": {
"titel": "Lernmedien",
"description": "Finde eine vollständige Liste der Bücher und anderen Medien, auf die im Kurs verwiesen wird."
},
"handlungsfelder": {
"title": "Handlungsfeld | Handlungsfelder",
"description": "Finde alle Ressourcen der Handlungsfelder wie Lernmedien, Links und andere nützliche Informationen."
}
},
"footer": {
"dataProtection": "Datenschutzbestimmungen",
"imprint": "Impressum",
"contact": "Kontakt",
"faq": "FAQ"
} }
} }

15
client/src/main.ts
View File

@ -9,6 +9,12 @@ import router from "./router";
import type { Router } from "vue-router"; import type { Router } from "vue-router";
import "../tailwind.css"; import "../tailwind.css";
declare module "pinia" {
export interface PiniaCustomProperties {
router: Router;
}
}
if (window.location.href.indexOf("localhost") >= 0) { if (window.location.href.indexOf("localhost") >= 0) {
log.setLevel("trace"); log.setLevel("trace");
} else { } else {
@ -19,15 +25,9 @@ const i18n = setupI18n();
const app = createApp(App); const app = createApp(App);
// todo: define lang setup // todo: define lang setup
await loadLocaleMessages(i18n, "de"); loadLocaleMessages(i18n, "de").then(() => {
app.use(router); app.use(router);
declare module "pinia" {
export interface PiniaCustomProperties {
router: Router;
}
}
const pinia = createPinia(); const pinia = createPinia();
pinia.use(({ store }) => { pinia.use(({ store }) => {
store.router = markRaw(router); store.router = markRaw(router);
@ -36,3 +36,4 @@ app.use(pinia);
app.use(i18n); app.use(i18n);
app.mount("#app"); app.mount("#app");
});

2
client/src/pages/CockpitPage.vue
View File

@ -21,7 +21,7 @@ const userStore = useUserStore();
<h3 class="mb-4">Versicherungsvermittler/in</h3> <h3 class="mb-4">Versicherungsvermittler/in</h3>
<img class="mb-8 block" :src="'/static/icons/demo/vm-lernpfad.svg'" /> <img class="mb-8 block" :src="'/static/icons/demo/vm-lernpfad.svg'" />
<router-link class="btn-blue" to="/learn/versicherungsvermittlerin-lp"> <router-link class="btn-blue" to="/learn/versicherungsvermittlerin-lp">
{{ $t("general.c2aNextStep") }} {{ $t("general.nextStep") }}
</router-link> </router-link>
</div> </div>
<div class="bg-white p-6 md:w-[48%]"> <div class="bg-white p-6 md:w-[48%]">

22
client/src/pages/competence/CompetenceIndexPage.vue
View File

@ -53,7 +53,7 @@ const countStatus = computed(() => {
v-if="competenceStore.competenceProfilePage" v-if="competenceStore.competenceProfilePage"
class="flex flex-col lg:flex-row items-center justify-between mb-10" class="flex flex-col lg:flex-row items-center justify-between mb-10"
> >
<h1>KompetenzNavi</h1> <h1>{{ $t("competences.title") }}</h1>
<ItDropdownSelect <ItDropdownSelect
v-model="competenceStore.selectedCircle" v-model="competenceStore.selectedCircle"
class="w-full lg:w-96 mt-4 lg:mt-0" class="w-full lg:w-96 mt-4 lg:mt-0"
@ -62,7 +62,7 @@ const countStatus = computed(() => {
</div> </div>
<div class="bg-white px-8 py-4 lg:py-8 l mb-4 lg:mb-8"> <div class="bg-white px-8 py-4 lg:py-8 l mb-4 lg:mb-8">
<div> <div>
<h3 class="pb-4 border-b">Letzte verbesserte Kompetenzen</h3> <h3 class="pb-4 border-b">{{ $t("competences.lastImprovements") }}</h3>
<ul> <ul>
<li <li
v-for="competence in lastUpdatedCompetences" v-for="competence in lastUpdatedCompetences"
@ -85,20 +85,22 @@ const countStatus = computed(() => {
:to="`${competenceStore.competenceProfilePage?.frontend_url}/competences`" :to="`${competenceStore.competenceProfilePage?.frontend_url}/competences`"
class="btn-text inline-flex items-center pl-0 py-2" class="btn-text inline-flex items-center pl-0 py-2"
> >
<span>Alle anschauen</span> <span>{{ $t("competences.showAll") }}</span>
<it-icon-arrow-right></it-icon-arrow-right> <it-icon-arrow-right></it-icon-arrow-right>
</router-link> </router-link>
</div> </div>
</div> </div>
<div class="bg-white px-8 py-4 lg:py-8 l mb-4 lg:mb-8"> <div class="bg-white px-8 py-4 lg:py-8 l mb-4 lg:mb-8">
<h3 class="pb-4 lg:pb-0 mb-4 border-b lg:border-0">Einschätzungen</h3> <h3 class="pb-4 lg:pb-0 mb-4 border-b lg:border-0">
{{ $t("competences.assessment") }}
</h3>
<ul <ul
class="flex flex-col lg:flex-row lg:items-center lg:justify-between lg:gap-8 mb-6" class="flex flex-col lg:flex-row lg:items-center lg:justify-between lg:gap-8 mb-6"
> >
<li <li
class="inline-block pb-4 lg:pb-0 mb-4 border-b lg:border-b-0 lg:mb-0 lg:border-r flex-1" class="inline-block pb-4 lg:pb-0 mb-4 border-b lg:border-b-0 lg:mb-0 lg:border-r flex-1"
> >
<h5 class="text-gray-700 mb-4">«Das muss ich nochmals anschauen»</h5> <h5 class="text-gray-700 mb-4">«{{ $t("selfEvaluation.no") }}»</h5>
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
<it-icon-smiley-thinking class="w-16 h-16"></it-icon-smiley-thinking> <it-icon-smiley-thinking class="w-16 h-16"></it-icon-smiley-thinking>
<p class="text-7xl font-bold inline-block ml-4">{{ countStatus.fail }}</p> <p class="text-7xl font-bold inline-block ml-4">{{ countStatus.fail }}</p>
@ -107,7 +109,7 @@ const countStatus = computed(() => {
<li <li
class="inline-block pb-4 lg:pb-0 mb-4 border-b lg:border-b-0 lg:mb-0 lg:border-r flex-1" class="inline-block pb-4 lg:pb-0 mb-4 border-b lg:border-b-0 lg:mb-0 lg:border-r flex-1"
> >
<h5 class="text-gray-700 mb-4">«Ja, ich kann das»</h5> <h5 class="text-gray-700 mb-4">«{{ $t("selfEvaluation.no") }}»</h5>
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
<it-icon-smiley-happy class="w-16 h-16"></it-icon-smiley-happy> <it-icon-smiley-happy class="w-16 h-16"></it-icon-smiley-happy>
<p class="text-7xl font-bold inline-block ml-4"> <p class="text-7xl font-bold inline-block ml-4">
@ -116,7 +118,7 @@ const countStatus = computed(() => {
</div> </div>
</li> </li>
<li class="pb-4 lg:pb-0 border-b lg:border-b-0 lg:mb-0flex-1"> <li class="pb-4 lg:pb-0 border-b lg:border-b-0 lg:mb-0flex-1">
<h5 class="text-gray-700 mb-4">Nicht eingeschätzt</h5> <h5 class="text-gray-700 mb-4">{{ $t("competences.notAssessed") }}</h5>
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
<it-icon-smiley-neutral class="w-16 h-16"></it-icon-smiley-neutral> <it-icon-smiley-neutral class="w-16 h-16"></it-icon-smiley-neutral>
<p class="text-7xl font-bold inline-block ml-4"> <p class="text-7xl font-bold inline-block ml-4">
@ -129,7 +131,7 @@ const countStatus = computed(() => {
:to="`${competenceStore.competenceProfilePage?.frontend_url}/criteria`" :to="`${competenceStore.competenceProfilePage?.frontend_url}/criteria`"
class="btn-text inline-flex items-center pl-0 py-2" class="btn-text inline-flex items-center pl-0 py-2"
> >
<span>Alle anschauen</span> <span>{{ $t("competences.showAll") }}</span>
<it-icon-arrow-right></it-icon-arrow-right> <it-icon-arrow-right></it-icon-arrow-right>
</router-link> </router-link>
</div> </div>
@ -139,7 +141,7 @@ const countStatus = computed(() => {
> >
<div class="border-b flex flex-row items-center pb-4 mb-4"> <div class="border-b flex flex-row items-center pb-4 mb-4">
<it-icon-smiley-thinking class="w-11 h-11 mr-5"></it-icon-smiley-thinking> <it-icon-smiley-thinking class="w-11 h-11 mr-5"></it-icon-smiley-thinking>
<h3>«Das muss ich nochmals anschauen»</h3> <h3>«{{ $t("selfEvaluation.no") }}»</h3>
</div> </div>
<ul class="mb-6"> <ul class="mb-6">
<li <li
@ -154,7 +156,7 @@ const countStatus = computed(() => {
:to="`${competenceStore.competenceProfilePage?.frontend_url}/criteria`" :to="`${competenceStore.competenceProfilePage?.frontend_url}/criteria`"
class="btn-text inline-flex items-center pl-0 py-2" class="btn-text inline-flex items-center pl-0 py-2"
> >
<span>Alle anschauen</span> <span>{{ $t("competences.showAll") }}</span>
<it-icon-arrow-right></it-icon-arrow-right> <it-icon-arrow-right></it-icon-arrow-right>
</router-link> </router-link>
</div> </div>

2
client/src/pages/competence/CompetenceListPage.vue
View File

@ -18,7 +18,7 @@ const competenceStore = useCompetenceStore();
:to="competenceStore.competenceProfilePage?.frontend_url" :to="competenceStore.competenceProfilePage?.frontend_url"
> >
<it-icon-arrow-left /> <it-icon-arrow-left />
<span>zurück</span> <span>{{ $t("general.back") }}</span>
</router-link> </router-link>
</nav> </nav>
<div class="flex flex-col lg:flex-row items-center justify-between mb-10"> <div class="flex flex-col lg:flex-row items-center justify-between mb-10">

9
client/src/pages/competence/PerformanceCriteriaPage.vue
View File

@ -6,6 +6,7 @@ import type { CourseCompletionStatus } from "@/types";
import * as log from "loglevel"; import * as log from "loglevel";
import type { Ref } from "vue"; import type { Ref } from "vue";
import { computed, ref } from "vue"; import { computed, ref } from "vue";
import { useI18n } from "vue-i18n";
log.debug("CompetencesMainView created"); log.debug("CompetencesMainView created");
@ -23,20 +24,22 @@ const shownCriteria = computed(() => {
}); });
}); });
const { t } = useI18n();
const mobileMenuItems: MenuItem[] = [ const mobileMenuItems: MenuItem[] = [
{ {
id: "fail", id: "fail",
name: "«Das muss ich nochmals anschauen»", name: `«${t("selfEvaluation.no")}»`,
iconName: "it-icon-smiley-thinking", iconName: "it-icon-smiley-thinking",
}, },
{ {
id: "success", id: "success",
name: "«Ja, ich kann das»", name: `«${t("selfEvaluation.yes")}»`,
iconName: "it-icon-smiley-happy", iconName: "it-icon-smiley-happy",
}, },
{ {
id: "unknown", id: "unknown",
name: "Nicht eingeschätzt", name: t("competences.notAssessed"),
iconName: "it-icon-smiley-neutral", iconName: "it-icon-smiley-neutral",
}, },
]; ];

8
client/src/pages/competence/SinglePerformanceCriteriaPage.vue
View File

@ -58,8 +58,8 @@ findCriteria();
<div v-if="competencePage" class="absolute top-0 w-full bottom-0 bg-white"> <div v-if="competencePage" class="absolute top-0 w-full bottom-0 bg-white">
<LearningContentContainer <LearningContentContainer
:title="''" :title="''"
:exit-text="'zurück'" :exit-text="$t('general.back')"
:next-button-text="'Speichern'" :next-button-text="$t('general.save')"
@exit="router.back()" @exit="router.back()"
@next="router.back()" @next="router.back()"
> >
@ -80,7 +80,7 @@ findCriteria();
@click="circleStore.markCompletion(currentQuestion, 'success')" @click="circleStore.markCompletion(currentQuestion, 'success')"
> >
<it-icon-smiley-happy class="w-16 h-16 mr-4"></it-icon-smiley-happy> <it-icon-smiley-happy class="w-16 h-16 mr-4"></it-icon-smiley-happy>
<span class="font-bold text-large"> Ja, ich kann das. </span> <span class="font-bold text-large"> {{ $t("selfEvaluation.yes") }} </span>
</button> </button>
<button <button
class="flex-1 inline-flex items-center text-left p-4 border" class="flex-1 inline-flex items-center text-left p-4 border"
@ -92,7 +92,7 @@ findCriteria();
@click="circleStore.markCompletion(currentQuestion, 'fail')" @click="circleStore.markCompletion(currentQuestion, 'fail')"
> >
<it-icon-smiley-thinking class="w-16 h-16 mr-4"></it-icon-smiley-thinking> <it-icon-smiley-thinking class="w-16 h-16 mr-4"></it-icon-smiley-thinking>
<span class="font-bold text-xl"> Das muss ich nochmals anschauen. </span> <span class="font-bold text-xl"> {{ $t("selfEvaluation.no") }} </span>
</button> </button>
</div> </div>
</div> </div>

8
client/src/pages/learningPath/CirclePage.vue
View File

@ -91,14 +91,14 @@ onMounted(async () => {
data-cy="back-to-learning-path-button" data-cy="back-to-learning-path-button"
> >
<it-icon-arrow-left class="-ml-1 mr-1 h-5 w-5"></it-icon-arrow-left> <it-icon-arrow-left class="-ml-1 mr-1 h-5 w-5"></it-icon-arrow-left>
<span class="inline">zurück zum Lernpfad</span> <span class="inline">{{ $t("general.backToLearningPath") }}</span>
</router-link> </router-link>
<h1 class="text-blue-dark text-4xl lg:text-6xl" data-cy="circle-title"> <h1 class="text-blue-dark text-4xl lg:text-6xl" data-cy="circle-title">
{{ circleStore.circle?.title }} {{ circleStore.circle?.title }}
</h1> </h1>
<div class="mt-2">Dauer: {{ duration }}</div> <div class="mt-2">{{ $t("circlePage.duration") }}: {{ duration }}</div>
<div class="w-full mt-8"> <div class="w-full mt-8">
<CircleDiagram></CircleDiagram> <CircleDiagram></CircleDiagram>
@ -120,7 +120,9 @@ onMounted(async () => {
<div class="hidden lg:block"> <div class="hidden lg:block">
<div class="block border mt-8 p-6"> <div class="block border mt-8 p-6">
<h3 class="text-blue-dark">Das lernst du in diesem Circle.</h3> <h3 class="text-blue-dark">
{{ $t("circlePage.circleContentBoxTitle") }}
</h3>
<div class="leading-relaxed mt-4"> <div class="leading-relaxed mt-4">
{{ circleStore.circle?.description }} {{ circleStore.circle?.description }}
</div> </div>

10
client/src/pages/learningPath/LearningPathPage.vue
View File

@ -82,14 +82,16 @@ const createContinueUrl = (learningPath: LearningPath): [string, boolean] => {
class="bg-white p-4 lg:mb-16 flex flex-col lg:flex-row divide-y lg:divide-y-0 lg:divide-x divide-gray-500 justify-start" class="bg-white p-4 lg:mb-16 flex flex-col lg:flex-row divide-y lg:divide-y-0 lg:divide-x divide-gray-500 justify-start"
> >
<div class="p-2 lg:p-8 flex-auto"> <div class="p-2 lg:p-8 flex-auto">
<h2>Willkommmen zurück, {{ userStore.first_name }}</h2> <h2>
{{ $t("learningPathPage.welcomeBack", { name: userStore.first_name }) }}
</h2>
<p class="mt-4 text-xl"></p> <p class="mt-4 text-xl"></p>
</div> </div>
<div <div
v-if="learningPathStore.learningPath.nextLearningContent" v-if="learningPathStore.learningPath.nextLearningContent"
class="p-4 lg:p-8 flex-2" class="p-4 lg:p-8 flex-2"
> >
Nächster Schritt {{ $t("learningPathPage.nextStep") }}
<h3> <h3>
{{ {{
learningPathStore.learningPath.nextLearningContent.parentCircle.title learningPathStore.learningPath.nextLearningContent.parentCircle.title
@ -106,9 +108,9 @@ const createContinueUrl = (learningPath: LearningPath): [string, boolean] => {
translate translate
> >
<span v-if="createContinueUrl(learningPathStore.learningPath)[1]"> <span v-if="createContinueUrl(learningPathStore.learningPath)[1]">
Los geht's {{ $t("general.start") }}
</span> </span>
<span v-else>Weiter geht's</span> <span v-else>{{ $t("general.nextStep") }}</span>
</router-link> </router-link>
</div> </div>
</div> </div>

6
client/src/pages/mediaLibrary/MLCategoryDetailPage.vue
View File

@ -71,12 +71,14 @@ function hasMoreItemsForType<T>(itemType: MediaBlockType, items: T[]) {
:to="(backLink as string)" :to="(backLink as string)"
> >
<it-icon-arrow-left /> <it-icon-arrow-left />
<span>zurück</span> <span>{{ $t("general.back") }}</span>
</router-link> </router-link>
</nav> </nav>
<div class="flex md:flex-col lg:flex-row justify-between"> <div class="flex md:flex-col lg:flex-row justify-between">
<div class="lg:w-6/12"> <div class="lg:w-6/12">
<h3 class="font-normal text-large text-gray-900 mb-3">Handlungsfeld</h3> <h3 class="font-normal text-large text-gray-900 mb-3">
{{ $t("mediaLibrary.handlungsfelder.title", 1) }}
</h3>
<h1 class="mb-4 lg:mb-8" data-cy="hf-title">{{ mediaCategory.title }}</h1> <h1 class="mb-4 lg:mb-8" data-cy="hf-title">{{ mediaCategory.title }}</h1>
<p class="text-large">{{ mediaCategory.introduction_text }}</p> <p class="text-large">{{ mediaCategory.introduction_text }}</p>
</div> </div>

2
client/src/pages/mediaLibrary/MLCategoryIndexPage.vue
View File

@ -27,7 +27,7 @@ watch(dropdownSelected, (newValue) =>
<template> <template>
<div class="container-large"> <div class="container-large">
<div class="flex flex-col lg:flex-row items-center justify-between mb-10 mt-6"> <div class="flex flex-col lg:flex-row items-center justify-between mb-10 mt-6">
<h1>Handlungsfelder</h1> <h1>{{ $t("mediaLibrary.handlungsfelder.title", categories.length) }}</h1>
<!-- <ItDropdownSelect v-model="dropdownSelected" :items="mediaStore.availableLearningPaths"></ItDropdownSelect>--> <!-- <ItDropdownSelect v-model="dropdownSelected" :items="mediaStore.availableLearningPaths"></ItDropdownSelect>-->
</div> </div>
<div v-if="mediaStore.mediaLibraryPage"> <div v-if="mediaStore.mediaLibraryPage">

17
client/src/pages/mediaLibrary/MLIndexPage.vue
View File

@ -28,27 +28,26 @@ watch(dropdownSelected, (newValue) =>
<template> <template>
<div class="container-large"> <div class="container-large">
<div class="flex flex-col lg:flex-row items-center justify-between mb-12 mt-6"> <div class="flex flex-col lg:flex-row items-center justify-between mb-12 mt-6">
<h1>Mediathek</h1> <h1>{{ $t("mediaLibrary.title") }}</h1>
<!-- <ItDropdownSelect--> <!-- <ItDropdownSelect-->
<!-- v-model="dropdownSelected"--> <!-- v-model="dropdownSelected"-->
<!-- :items="mediaStore.availableLearningPaths"></ItDropdownSelect>--> <!-- :items="mediaStore.availableLearningPaths"></ItDropdownSelect>-->
</div> </div>
<OverviewCard <OverviewCard
v-if="mediaStore.mediaLibraryPage" v-if="mediaStore.mediaLibraryPage"
title="Handlungsfelder" :title="$t('mediaLibrary.handlungsfelder.title', 2)"
call2-action="Anschauen" :call2-action="$t('general.show')"
:link="`${mediaStore.mediaLibraryPage.frontend_url}/category`" :link="`${mediaStore.mediaLibraryPage.frontend_url}/category`"
description="Finde alle Ressourcen der Handlungsfelder wie Lernmedien, Links und andere nützliche Informationen." :description="$t('mediaLibrary.handlungsfelder.description')"
icon="handlungsfelder-overview" icon="handlungsfelder-overview"
class="mb-6" class="mb-6"
> ></OverviewCard>
</OverviewCard>
<OverviewCard <OverviewCard
v-if="mediaStore.mediaLibraryPage && generalCategory" v-if="mediaStore.mediaLibraryPage && generalCategory"
title="Lernmedien" :title="$t('mediaLibrary.learningMedia.titel')"
call2-action="Anschauen" :call2-action="$t('general.show')"
:link="`${generalCategory.frontend_url}/media`" :link="`${generalCategory.frontend_url}/media`"
description="Finde eine vollständige Liste der Bücher und anderen Medien, auf die im Kurs verwiesen wird." :description="$t('mediaLibrary.learningMedia.description')"
icon="lernmedien-overview" icon="lernmedien-overview"
class="mb-6" class="mb-6"
> >

5
client/vite.config.ts
View File

@ -33,6 +33,11 @@ export default defineConfig(({ mode }) => {
// ] // ]
}), }),
], ],
define: {
__VUE_I18N_FULL_INSTALL__: true,
__VUE_I18N_LEGACY_API__: false,
__INTLIFY_PROD_DEVTOOLS__: false,
},
server: { server: {
port: 5173, port: 5173,
hmr: { port: 5173 }, hmr: { port: 5173 },