Add basic mediacenter store

client/src/components/mediacenter/LinkCard.vue

@@ -1,16 +1,20 @@
 <script setup lang="ts">
 
+import MediaLink from "@/components/mediacenter/MediaLink.vue";
+
 export interface Props {
   title: string,
   description: string,
   linkText: string,
   url: string,
-  icon: string
+  icon: string,
+  openWindow?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   icon: '',
   description: '',
+  openWindow: false
 })
 
 </script>
@@ -23,12 +27,13 @@ const props = withDefaults(defineProps<Props>(), {
     <div>
       <h4 class="mb-2 text-bold">{{title}}</h4>
       <p class="mb-2">{{description}}</p>
-      <router-link
+      <media-link
         :to="url"
+        :blank="openWindow"
         class="link"
       >
         <span class="inline">{{linkText}}</span>
-      </router-link>
+      </media-link>
     </div>
   </div>
 </template>

client/src/components/mediacenter/MediaLink.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+// https://router.vuejs.org/guide/advanced/extending-router-link.html
+// https://vueschool.io/articles/vuejs-tutorials/extending-vue-router-links-in-vue-3/
+
+import { RouterLink, useLink } from 'vue-router'
+import {computed} from "vue";
+
+const props = defineProps(
+  {
+    ...RouterLink.props, // @ts-ignore
+    blank: {
+      type: Boolean,
+      default: false
+    }
+  })
+
+const isExternalLink = computed(() => typeof props.to === 'string' && props.to.startsWith('http'));
+
+</script>
+
+<template>
+  <div>
+  <a v-if="isExternalLink"
+     :target="props.blank ? '_blank' : '_self'"
+     rel="noopener"
+     :href="props.to">
+    <slot />
+  </a>
+  <router-link
+    v-else
+     :target="props.blank ? '_blank' : '_self'"
+     rel="noopener"
+    v-bind="props"
+  >
+    <slot />
+  </router-link>
+  </div>
+</template>

client/src/components/ui/ItDropdownSelect.vue

@@ -37,7 +37,7 @@ const dropdownSelected = computed({
 
 <template>
   <Listbox as="div" v-model="dropdownSelected">
-    <div class="mt-1 relative w-128">
+    <div class="mt-1 relative w-96">
       <ListboxButton
         class="bg-white relative w-full border border-gray-500 pl-5 pr-10 py-3 text-left cursor-default font-bold">
         <span class="block truncate">{{ dropdownSelected.name }}</span>

client/src/stores/mediacenter.ts

@@ -0,0 +1,16 @@
+import { defineStore } from 'pinia'
+
+export const useMediaCenterStore = defineStore({
+  id: 'mediacenter',
+  state: () => {
+    return {
+      selectedLearningPath: { id: 1, name: 'Alle Lehrgänge' },
+      availableLearningPaths: [
+        { id: 1, name: 'Alle Lehrgänge' },
+        { id: 2, name: 'Versicherungsvermittler/in' }
+      ]
+    }
+  },
+  getters: {},
+  actions: {},
+})

client/src/views/Handlungsfeld.vue

@@ -2,6 +2,7 @@
 import * as log from 'loglevel';
 import LinkCard from "@/components/mediacenter/LinkCard.vue";
 import HandlungsfeldLayout from "@/views/HandlungsfeldLayout.vue";
+import MediaLink from "@/components/mediacenter/MediaLink.vue";
 
 log.debug('Handlungsfeld created');
 
@@ -28,35 +29,40 @@ const field = {
           description: 'Buch «Sach- und Vermögensversicherungen» – Kapitel 16',
           iconUrl: '/static/icons/demo/icon-hf-book.png',
           linkText: 'PDF anzeigen',
-          link: 'https://www.iterativ.ch'
+          link: '/static/media/documents/01a_Motorfahrzeughaftpflicht.pdf',
+          openWindow: true
         },
         {
           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'
+          link: '/static/media/documents/01a_Motorfahrzeughaftpflicht.pdf',
+          openWindow: true
         },
         {
           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'
+          link: '/static/media/documents/01a_Motorfahrzeughaftpflicht.pdf',
+          openWindow: true
         },
         {
           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'
+          link: '/static/media/documents/01a_Motorfahrzeughaftpflicht.pdf',
+          openWindow: true
         },
         {
           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'
+          link: '/static/media/documents/01a_Motorfahrzeughaftpflicht.pdf',
+          openWindow: true
         },
       ]
     },
@@ -70,14 +76,16 @@ const field = {
           iconUrl: '',
           description: '',
           linkText: 'Link öffnen',
-          link: 'https://www.iterativ.ch'
+          link: 'https://www.nbi-ngf.ch/h',
+          openWindow: true
         },
         {
           title: 'Adressen der Strassenverkehrsämter',
           iconUrl: '',
           description: '',
           linkText: 'Link öffnen',
-          link: 'https://www.iterativ.ch'
+          link: 'https://asa.ch/strassenverkehrsaemter/adressen/',
+          openWindow: true
         },
       ]
     },
@@ -91,28 +99,32 @@ const field = {
           iconUrl: '',
           description: '',
           linkText: 'Lerineinheit anzeigen',
-          link: 'https://www.iterativ.ch'
+          link: 'http://localhost:8000/learn/versicherungsvermittlerin/versicherungsvermittlerin-circle-analyse',
+          openWindow: false
         },
         {
           title: 'Circle: Einstieg – Lernsequenz: Anwenden',
           iconUrl: '',
           description: '',
           linkText: 'Lerineinheit anzeigen',
-          link: 'https://www.iterativ.ch'
+          link: 'http://localhost:8000/learn/versicherungsvermittlerin/versicherungsvermittlerin-circle-analyse',
+          openWindow: false
         },
         {
           title: 'Circle: Einstieg – Lernsequenz: Anwenden',
           iconUrl: '',
           description: '',
           linkText: 'Lerineinheit anzeigen',
-          link: 'https://www.iterativ.ch'
+          link: 'http://localhost:8000/learn/versicherungsvermittlerin/versicherungsvermittlerin-circle-analyse',
+          openWindow: false
         },
         {
           title: 'Circle: Einstieg – Lernsequenz: Anwenden',
           iconUrl: '',
           description: '',
           linkText: 'Lerineinheit anzeigen',
-          link: 'https://www.iterativ.ch'
+          link: 'http://localhost:8000/learn/versicherungsvermittlerin/versicherungsvermittlerin-circle-analyse',
+          openWindow: false
         },
       ]
     },
@@ -126,14 +138,16 @@ const field = {
           iconUrl: '/static/icons/demo/icon-hf-einkommenssicherung.svg',
           description: 'Lernmedium: Verkehrsrechtsschutz – Buch «Sach- und Vermögensversicherungen/Kapitel 12.3»',
           linkText: 'Handlungsfeldanzeigen',
-          link: 'https://www.iterativ.ch'
+          link: 'http://localhost:8000/mediacenter/handlungsfeld',
+          openWindow: false
         },
         {
           title: 'Rechtsstreigkeiten',
           iconUrl: '/static/icons/demo/icon-hf-einkommenssicherung.svg',
           description: 'Lernmedium: Verkehrsrechtsschutz – Buch «Sach- und Vermögensversicherungen/Kapitel 12.3»',
           linkText: 'Handlungsfeldanzeigen',
-          link: 'https://www.iterativ.ch'
+          link: 'http://localhost:8000/mediacenter/handlungsfeld',
+          openWindow: false
         },
       ]
     },
@@ -174,7 +188,7 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
         <div class="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>
+            <h1 class="mb-4 lg:mb-8">{{field.title}}</h1>
             <p>{{field.description}}</p>
           </div>
           <img
@@ -212,16 +226,21 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
                   :icon="subItem.iconUrl"
                   :description="subItem.description"
                   :url="subItem.link"
-                  :link-text="subItem.linkText" />
+                  :link-text="subItem.linkText"
+                  :open-window="subItem.openWindow"
+                />
                 <div v-else class="flex items-center justify-between border-b py-4">
                   <h4 class="text-bold">{{subItem.title}}</h4>
-                  <router-link :to="subItem.link" class="link">{{subItem.linkText}}</router-link>
+                  <media-link
+                    :blank="subItem.openWindow"
+                    :to="subItem.link"
+                    class="link">{{subItem.linkText}}</media-link>
                 </div>
             </li>
           </ul>
           <router-link
             v-if="hasMoreItemsForType(item.type, item.items)"
-            to="/" class="flex items-center">
+            to="/mediacenter/handlungsfeldlist" class="flex items-center">
             <span>Alle anschauen</span>
             <it-icon-arrow-right></it-icon-arrow-right>
           </router-link>

client/src/views/HandlungsfelderOverview.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import * as log from 'loglevel';
 import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
-import {reactive, ref} from "vue";
+import {reactive, ref, watch} from "vue";
+import {useMediaCenterStore} from "@/stores/mediacenter";
 
 log.debug('HandlungsfelderOverview created');
 
@@ -56,20 +57,13 @@ const fields = [
   },
 ]
 
-const dropdownItems = reactive(
+const mediaStore = useMediaCenterStore();
-  [
+const dropdownSelected = ref(mediaStore.selectedLearningPath);
-    {
-      id: 1,
-      name: 'Alle Lehrgänge'
-    },
-    {
-      id: 2,
-      name: 'Versicherungsvermittler/in'
-    }
-  ]
-)
 
-const dropdownSelected = ref(dropdownItems[0])
+watch(dropdownSelected, (newValue) => mediaStore.$patch({
+    selectedLearningPath: newValue
+  })
+)
 
 </script>
 
@@ -79,7 +73,7 @@ const dropdownSelected = ref(dropdownItems[0])
       <h1>Handlungsfelder</h1>
       <ItDropdownSelect
         v-model="dropdownSelected"
-        :items="dropdownItems"></ItDropdownSelect>
+        :items="mediaStore.availableLearningPaths"></ItDropdownSelect>
     </div>
     <div>
       <ul class="grid gap-5 grid-cols-1 lg:grid-cols-4">

client/src/views/MediaList.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import HandlungsfeldLayout from "@/views/HandlungsfeldLayout.vue";
+import MediaLink from "@/components/mediacenter/MediaLink.vue";
 
 const data = {
   title: 'Fahrzeug: Lernmedien',
@@ -9,35 +10,40 @@ const data = {
       description: 'Buch «Sach- und Vermögensversicherungen» – Kapitel 16',
       iconUrl: '/static/icons/demo/icon-hf-book.png',
       linkText: 'PDF anzeigen',
-      link: 'https://www.iterativ.ch'
+      link: '/static/media/documents/01a_Motorfahrzeughaftpflicht.pdf',
+      openWindow: true
     },
     {
       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'
+      link: '/static/media/documents/01a_Motorfahrzeughaftpflicht.pdf',
+      openWindow: true
     },
     {
       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'
+      link: '/static/media/documents/01a_Motorfahrzeughaftpflicht.pdf',
+      openWindow: true
     },
     {
       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'
+      link: '/static/media/documents/01a_Motorfahrzeughaftpflicht.pdf',
+      openWindow: true
     },
     {
       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'
+      link: '/static/media/documents/01a_Motorfahrzeughaftpflicht.pdf',
+      openWindow: true
     },
   ]
 }
@@ -72,7 +78,10 @@ const data = {
                 </div>
               </div>
               <div class="">
-                <router-link :to="item.link" class="link">{{item.linkText}}</router-link>
+                <media-link
+                  :to="item.link"
+                  :blank="item.openWindow"
+                  class="link">{{item.linkText}}</media-link>
               </div>
             </li>
           </ul>

client/src/views/MediaMainView.vue

@@ -2,24 +2,18 @@
 import * as log from 'loglevel';
 import OverviewCard from '@/components/mediacenter/OverviewCard.vue';
 import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
-import {reactive, ref} from "vue";
+import {watch, ref} from "vue";
+import {useMediaCenterStore} from "@/stores/mediacenter";
 
 log.debug('MediaMainView created');
 
-const dropdownItems = reactive(
+const mediaStore = useMediaCenterStore();
-  [
+const dropdownSelected = ref(mediaStore.selectedLearningPath);
-    {
-      id: 1,
-      name: 'Alle Lehrgänge'
-    },
-    {
-      id: 2,
-      name: 'Versicherungsvermittler/in'
-    }
-  ]
-)
 
-const dropdownSelected = ref(dropdownItems[0])
+watch(dropdownSelected, (newValue) => mediaStore.$patch({
+    selectedLearningPath: newValue
+  })
+)
 
 </script>
 
@@ -29,7 +23,7 @@ const dropdownSelected = ref(dropdownItems[0])
       <h1>Mediathek</h1>
       <ItDropdownSelect
         v-model="dropdownSelected"
-        :items="dropdownItems"></ItDropdownSelect>
+        :items="mediaStore.availableLearningPaths"></ItDropdownSelect>
     </div>
     <OverviewCard
       title="Handlungsfelder"