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

Update circle view

This commit is contained in:
Daniel Egger 2022-06-01 11:29:19 +02:00
parent 19cc0c2af3
commit cd676bbe96
5 changed files with 21 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/MainNavigationBar.vue
View File

@ -5,7 +5,7 @@ export default {
</script>
<template>
<nav class="bg-blue-dark flex flex-row gap-x-8 items-center text-white px-8 py-4">
<nav class="bg-blue-900 flex flex-row gap-x-8 items-center text-white px-8 py-4">
<a href="" class="text-xl">myVBV</a>
<a href="" class="">Lernpfad</a>
<a href="" class="">Kompetenzprofil</a>

2
client/src/components/circle/LearningSequence.vue
View File

@ -5,7 +5,7 @@ defineProps(['learningSequence'])
<template>
<div class="mb-8 learning-sequence">
<h3 class="mb-2">{{ learningSequence.title }}</h3>
<h3 class="mb-2 text-xl">{{ learningSequence.title }}</h3>
<div class="bg-white p-4 border border-slate-300 border-l-4 border-l-blue-500">
<div v-for="learningPackage in learningSequence.learning_packages">

27
client/src/views/Circle.vue
View File

@ -16,7 +16,7 @@ export default {
console.log('CircleAnalyseExampleView mounted', this.circleSlug);
axios({
method: 'get',
url: `http://localhost:8000/wagtailapi/v2/pages/?type=learnpath.Circle&slug=${this.circleSlug}&fields=title,description,learning_sequences`
url: `/wagtailapi/v2/pages/?type=learnpath.Circle&slug=${this.circleSlug}&fields=title,description,learning_sequences(title,learning_packages(title,my_title,learning_units(title)))`,
}).then((response) => {
this.circleData = response.data.items[0];
});
@ -29,33 +29,35 @@ export default {
<MainNavigationBar/>
<div class="circle">
<div class="flex">
<div class="flex-initial w-128 p-8">
<div class="flex flex-col lg:flex-row">
<div class="flex-initial lg:w-128 px-8 py-8">
<h1 class="text-blue-dark text-7xl">
{{ circleData.title }}
</h1>
<div class="circle-image mt-8"></div>
<div class="mt-8">
<img src="@/assets/circle-analyse.svg" alt="">
</div>
<div class="outcome border border-slate-300 mt-8 p-6">
<div class="outcome border border-gray-500 mt-8 p-6">
<h3 class="text-blue-dark">Das lernst du in diesem Circle.</h3>
<div class="prose mt-4">
{{ circleData.description }}
</div>
<button class="px-4 py-3 bg-blue-dark text-white text-xl mt-4">Erfahre mehr dazu</button>
<button class="btn-primary mt-4">Erfahre mehr dazu</button>
</div>
<div class="expert border border-slate-300 mt-8 p-6">
<div class="expert border border-gray-500 mt-8 p-6">
<h3 class="text-blue-dark">Hast du Fragen?</h3>
<div class="prose mt-4">Tausche dich mit der Fachexpertin aus für den Circle Analyse aus.</div>
<button class="px-4 py-3 border-2 border-blue-dark bg-white text-blue-dark text-xl mt-4">
<button class="btn-secondary mt-4">
Fachexpertin kontaktieren
</button>
</div>
</div>
<div class="flex-auto bg-blue-100 p-8 pl-24">
<div class="flex-auto bg-gray-100 px-4 py-8">
<div v-for="learningSequence in circleData.learning_sequences">
<LearningSequence :learning-sequence="learningSequence"></LearningSequence>
</div>
@ -67,11 +69,4 @@ export default {
</template>
<style scoped>
.circle-image {
width: 440px;
height: 440px;
background: url('@/assets/circle-analyse.svg');
background-size: contain;
background-repeat: no-repeat;
}
</style>

6
client/src/views/StyelGuideView.vue
View File

@ -25,14 +25,14 @@ export default defineComponent({
<h2 class="heading-1">Colors</h2>
</div>
<table class="text-gray-700">
<tr class="h-12 md:h-18 xl:h-24">
<tr class="h-12 md:h-18 lg:h-24">
<td></td>
<td class="text-center" v-for="value in colorValues">{{value}}</td>
</tr>
<tr v-for="color in colors" class="h-12 md:h-18 xl:h-24">
<tr v-for="color in colors" class="h-12 md:h-18 lg:h-24">
<td>{{color}}</td>
<td v-for="value in colorValues" class="px-2">
<div class="w-8 h-8 md:w-12 md:h-12 xl:w-16 xl:h-16 rounded-full" :class="[colorBgClass(color, value)]"></div>
<div class="w-8 h-8 md:w-12 md:h-12 lg:w-16 lg:h-16 rounded-full" :class="[colorBgClass(color, value)]"></div>
</td>
</tr>
</table>

13
server/vbv_lernwelt/learnpath/models.py
View File

@ -97,11 +97,15 @@ class Circle(Page, Orderable):
APIField('title'),
APIField('description'),
APIField('topic'),
APIField('learning_sequences'),
# APIField('content_structure'),
]
@property
def content_structure(self):
# FIXME: not needed!?
# you can access nested content with the following url scheme (look a the nested parentheses!):
# /wagtailapi/v2/pages/?type=learnpath.Circle&slug=analyse&fields=title,description,learning_sequences(title,learning_packages(title,my_title,learning_units(title)))
learning_sequences = LearningSequence.objects.filter(circle_id=self.id).values()
learning_packages = LearningPackage.objects.filter(learning_sequence__circle_id=self.id).values()
learning_units = LearningUnit.objects.filter(learning_package__learning_sequence__circle_id=self.id).values('learning_package_id', 'title')
@ -123,9 +127,6 @@ class Circle(Page, Orderable):
return content
def full_clean(self, *args, **kwargs):
self.slug = find_available_slug(Circle, slugify(self.title, allow_unicode=True))
super(Circle, self).full_clean(*args, **kwargs)
@ -163,15 +164,12 @@ class LearningSequence(Orderable):
panels = [FieldPanel('title'), FieldPanel('category'), FieldPanel('circle')]
api_fields = [
APIField('title'),
APIField('category'),
APIField('learning_packages'),
]
class Meta:
verbose_name = "Learning Sequence"
@ -183,7 +181,6 @@ class LearningSequence(Orderable):
super(LearningSequence, self).full_clean(*args, **kwargs)
class LearningPackage(Orderable):
title = models.CharField(max_length=256, default='')
@ -199,13 +196,13 @@ class LearningPackage(Orderable):
api_fields = [
APIField('title'),
APIField('my_title'),
APIField('learning_units'),
]
@property
def my_title(self):
return self.title
def full_clean(self, *args, **kwargs):
self.slug = find_available_slug(LearningPackage, slugify(self.title, allow_unicode=True))
super(LearningPackage, self).full_clean(*args, **kwargs)