WIP: Add basic Handlungsfeld page

client/src/components/mediacenter/LinkCard.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+
+export interface Props {
+  title: string,
+  description: string,
+  linkText: string,
+  url: string,
+  icon: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  icon: '',
+  description: '',
+})
+
+</script>
+
+<template>
+  <div class="border-gray-500 border flex p-4 items-center">
+    <img
+      class="mr-6"
+      :src="icon" />
+    <div>
+      <h4 class="mb-2 text-bold">{{title}}</h4>
+      <p class="mb-2">{{description}}</p>
+      <router-link
+        :to="url"
+        class="link"
+      >
+        <span class="inline">{{linkText}}</span>
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+</style>

client/src/i18n.ts

@@ -1,5 +1,5 @@
 import { nextTick } from 'vue'
-import { createI18n } from 'vue-i18n/index'
+import { createI18n } from 'vue-i18n'
 
 // https://vue-i18n.intlify.dev/guide/advanced/lazy.html
 export const SUPPORT_LOCALES = ['de', 'fr', 'it']

client/src/router/index.ts

@@ -37,6 +37,10 @@ const router = createRouter({
           path: 'handlungsfelder',
           component: () => import('@/views/HandlungsfelderOverview.vue')
         },
+        {
+          path: 'handlungsfeld',
+          component: () => import('@/views/Handlungsfeld.vue')
+        },
       ]
     },
     {

client/src/views/Handlungsfeld.vue

@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import * as log from 'loglevel';
+import LinkCard from "@/components/mediacenter/LinkCard.vue";
+
+log.debug('Handlungsfeld created');
+
+const field = {
+  title: 'Fahrzeug',
+  description: 'Das Auto ist für viele der grösste Stolz! Es birgt aber auch ein grosses Gefahrenpotenzial.  Dabei geht es bei den heutigen Fahrzeugpreisen und Reparaturkosten rasch um namhafte Summen, die der Fahrzeugbesitzer und die Fahrzeugbesitzerin in einem grösseren Schadenfall oft nur schwer selbst aufbringen kann.',
+  icon: '/static/icons/demo/icon-hf-fahrzeug-big.svg',
+  summary: {
+    text: 'In diesem berufstypischem Handlungsfeld lernst du alles rund um Motorfahrzeugversicherungen, wie man sein Auto optimal schützen kann, wie du vorgehst bei einem Fahrzeugwechsel, welche Aspekte du bei einer Offerte beachten musst und wie du dem Kunden die Lösung präsentierst.',
+    items: [
+      'Motorfahrzeughaftpflichtversicherung',
+      'Motorfahrzeugkaskoversicherung',
+      'Insassenunfallversicherung'
+    ]
+  },
+  items: [
+    {
+      title: 'Lernmedien',
+      type: 'learnmedia',
+      moreLink: '',
+      items: [
+        {
+          title: 'Die Motorfahrzeughaftpflicht',
+          description: 'Buch «Sach- und Vermögensversicherungen» – Kapitel 16',
+          iconUrl: '/static/icons/demo/icon-hf-book.png',
+          linkText: 'PDF anzeigen',
+          link: 'https://www.iterativ.ch'
+        },
+        {
+          title: 'Die Motorfahrzeughaftpflicht',
+          iconUrl: '/static/icons/demo/icon-hf-book.png',
+          description: 'Buch «Sach- und Vermögensversicherungen» – Kapitel 16',
+          linkText: 'PDF anzeigen',
+          link: 'https://www.iterativ.ch'
+        },
+        {
+          title: 'Die Motorfahrzeughaftpflicht',
+          iconUrl: '/static/icons/demo/icon-hf-book.png',
+          description: 'Buch «Sach- und Vermögensversicherungen» – Kapitel 16',
+          linkText: 'PDF anzeigen',
+          link: 'https://www.iterativ.ch'
+        },
+        {
+          title: 'Die Motorfahrzeughaftpflicht',
+          iconUrl: '/static/icons/demo/icon-hf-book.png',
+          description: 'Buch «Sach- und Vermögensversicherungen» – Kapitel 16',
+          linkText: 'PDF anzeigen',
+          link: 'https://www.iterativ.ch'
+        },
+      ]
+    },
+    {
+      title: 'Links',
+      type: 'externalLinks',
+      moreLink: '',
+      items: [
+        {
+          title: 'Nationales Versicherungsbüro',
+          iconUrl: '',
+          description: '',
+          linkText: 'Link öffnen',
+          link: 'https://www.iterativ.ch'
+        },
+        {
+          title: 'Adressen der Strassenverkehrsämter',
+          iconUrl: '',
+          description: '',
+          linkText: 'Link öffnen',
+          link: 'https://www.iterativ.ch'
+        },
+      ]
+    },
+    {
+      title: 'Verankerung im Lernpfad',
+      type: 'internalLinks',
+      moreLink: '',
+      items: [
+        {
+          title: 'Circle: Einstieg – Lernsequenz: Anwenden',
+          iconUrl: '',
+          description: '',
+          linkText: 'Lerineinheit anzeigen',
+          link: 'https://www.iterativ.ch'
+        },
+        {
+          title: 'Circle: Einstieg – Lernsequenz: Anwenden',
+          iconUrl: '',
+          description: '',
+          linkText: 'Lerineinheit anzeigen',
+          link: 'https://www.iterativ.ch'
+        },
+        {
+          title: 'Circle: Einstieg – Lernsequenz: Anwenden',
+          iconUrl: '',
+          description: '',
+          linkText: 'Lerineinheit anzeigen',
+          link: 'https://www.iterativ.ch'
+        },
+        {
+          title: 'Circle: Einstieg – Lernsequenz: Anwenden',
+          iconUrl: '',
+          description: '',
+          linkText: 'Lerineinheit anzeigen',
+          link: 'https://www.iterativ.ch'
+        },
+      ]
+    },
+   {
+      title: 'Querverweise',
+      type: 'realtiveLinks',
+      moreLink: '',
+      items: [
+        {
+          title: 'Rechtsstreigkeiten',
+          iconUrl: '',
+          description: 'Lernmedium: Verkehrsrechtsschutz – Buch «Sach- und Vermögensversicherungen/Kapitel 12.3»',
+          linkText: 'Handlungsfeldanzeigen',
+          link: 'https://www.iterativ.ch'
+        },
+        {
+          title: 'Rechtsstreigkeiten',
+          iconUrl: '',
+          description: 'Lernmedium: Verkehrsrechtsschutz – Buch «Sach- und Vermögensversicherungen/Kapitel 12.3»',
+          linkText: 'Handlungsfeldanzeigen',
+          link: 'https://www.iterativ.ch'
+        },
+      ]
+    },
+  ]
+}
+
+</script>
+
+<template>
+  <Teleport to="body">
+    <div class="px-16 fixed top-0 overflow-y-scroll bg-white h-full w-full">
+      <div class="-mx-16 pt-4 pb-24 px-16 mb-20 bg-gray-200 flex justify-between">
+        <div class="w-5/12">
+          <h3 class="font-normal text-large mb-3">Handlungsfeld</h3>
+          <h1 class="mb-4">{{field.title}}</h1>
+          <p>{{field.description}}</p>
+        </div>
+        <img
+          class="w-5/12"
+          :src="field.icon"/>
+      </div>
+      <section class="mb-20">
+        <h2 class="mb-4">Das erwartet dich in diesem Handlungsfeld</h2>
+        <p class="mb-4 lg:w-2/3">{{field.summary.text}}</p>
+        <ul>
+          <li
+            v-for="item in field.summary.items"
+            :key="item"
+            class="mb-2">{{item}}</li>
+        </ul>
+      </section>
+      <section
+        class="mb-20"
+        v-for="item in field.items" :key="item.title">
+        <h2 class="mb-4">{{item.title}}</h2>
+        <ul class="grid gap-4 grid-cols-2">
+          <li v-for="subItem in item.items" :key="subItem.link">
+              <LinkCard
+                v-if="item.type === 'learnmedia'"
+                :title="subItem.title"
+                :icon="subItem.iconUrl"
+                :description="subItem.description"
+                :url="subItem.link"
+                :link-text="subItem.linkText" />
+          </li>
+        </ul>
+
+      </section>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.it-icon-hf {
+  color: blue
+}
+.it-icon-hf > * {
+  @apply m-auto;
+}
+</style>

client/src/views/HandlungsfelderOverview.vue

@@ -72,7 +72,7 @@ const fields = [
         >
           <img
             class="m-auto"
-            :src="`/static/icons/${field.icon}.svg`"/>
+            :src="`/static/icons/demo/${field.icon}.svg`"/>
           <h3 class="text-base text-center">{{field.name}}</h3>
         </li>
       </ul>
@@ -82,10 +82,9 @@ const fields = [
 </template>
 
 <style scoped>
-.it-icon-hf {
-  color: blue
-}
+
 .it-icon-hf > * {
   @apply m-auto;
 }
+
 </style>

client/src/views/MediaView.vue

@@ -13,7 +13,7 @@ log.debug('ShopView created');
         <li class="ml-10">Handlungsfelder</li>
         <li class="ml-10">Allgemeines zu Versicherungen</li>
         <li class="ml-10">Lernmedien</li>
-        <li class="ml-10">Lexikon</li>
+        <li class="ml-10"><a href="https://www.vbv.ch/de/der-vbv/lernen-lehren/lexikon">Lexikon</a></li>
       </ul>
     </nav>
     <main class="px-8 py-8">