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

Add basic mediacenter store

This commit is contained in:
Christian Cueni 2022-09-06 11:55:55 +02:00
parent f7b0140eec
commit 442ee3e4da
10 changed files with 132 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
client/src/components/mediacenter/LinkCard.vue
View File

@ -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>

38
client/src/components/mediacenter/MediaLink.vue Normal file
View File

@ -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>

2
client/src/components/ui/ItDropdownSelect.vue
View File

@ -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>

16
client/src/stores/mediacenter.ts Normal file
View File

@ -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: {},
})

53
client/src/views/Handlungsfeld.vue
View File

@ -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>

24
client/src/views/HandlungsfelderOverview.vue
View File

@ -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(
[
{
id: 1,
name: 'Alle Lehrgänge'
},
{
id: 2,
name: 'Versicherungsvermittler/in'
}
]
)
const mediaStore = useMediaCenterStore();
const dropdownSelected = ref(mediaStore.selectedLearningPath);
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">

21
client/src/views/MediaList.vue
View File

@ -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>

24
client/src/views/MediaMainView.vue
View File

@ -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(
[
{
id: 1,
name: 'Alle Lehrgänge'
},
{
id: 2,
name: 'Versicherungsvermittler/in'
}
]
)
const mediaStore = useMediaCenterStore();
const dropdownSelected = ref(mediaStore.selectedLearningPath);
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"

9
server/vbv_lernwelt/static/icons/demo/icon-hf-fahrzeug-big.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 284 KiB

BIN
server/vbv_lernwelt/static/media/documents/01a_Motorfahrzeughaftpflicht.pdf Normal file
View File

Binary file not shown.