Merge branch 'feature/responsive-learnpfad' into develop
This commit is contained in:
Lorenz Padberg
commit
8e404771ee
|
|
@ -1,47 +1,9 @@
|
|||
<script>
|
||||
import * as d3 from 'd3';
|
||||
import { useLearningPathStore } from '../../stores/learningPath';
|
||||
import {useLearningPathStore} from '../../stores/learningPath';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
learningPathContents: {
|
||||
default: {
|
||||
topics: [
|
||||
{
|
||||
id: 4,
|
||||
title: 'Basissdf',
|
||||
slug: 'basissdf',
|
||||
type: 'learnpath.Topic',
|
||||
translation_key: 'fdabcf72-728a-4279-ba34-e079761a14ad',
|
||||
is_visible: false,
|
||||
circles: [
|
||||
{
|
||||
id: 5,
|
||||
title: 'Basis',
|
||||
slug: 'basis',
|
||||
type: 'learnpath.Circle',
|
||||
translation_key: '13951cfd-b36d-42d5-b84a-178f0a7da106',
|
||||
learning_sequences: [
|
||||
{
|
||||
id: 11,
|
||||
title: 'Starten',
|
||||
done: false,
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
title: 'Beobachten',
|
||||
done: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
],
|
||||
},
|
||||
type: Object,
|
||||
},
|
||||
|
||||
width: {
|
||||
default: 1640,
|
||||
type: Number,
|
||||
|
|
@ -50,11 +12,18 @@ export default {
|
|||
default: 256,
|
||||
type: Number,
|
||||
},
|
||||
vertical: {
|
||||
default: false,
|
||||
type: Boolean
|
||||
},
|
||||
identifier: {
|
||||
required: true,
|
||||
type: String
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
const learningPathStore = useLearningPathStore()
|
||||
|
||||
return { learningPathStore }
|
||||
return {learningPathStore}
|
||||
},
|
||||
computed: {
|
||||
viewBox() {
|
||||
|
|
@ -62,8 +31,8 @@ export default {
|
|||
},
|
||||
circles() {
|
||||
if (this.learningPathStore.learningPath) {
|
||||
let internalCircles = this.learningPathStore.learningPath.circles;
|
||||
internalCircles.forEach((circle) => {
|
||||
let internalCircles = []
|
||||
this.learningPathStore.learningPath.circles.forEach((circle) => {
|
||||
let pieWeights = new Array(Math.max(circle.learningSequences.length, 1)).fill(1)
|
||||
let pieGenerator = d3.pie()
|
||||
let pieData = pieGenerator(pieWeights)
|
||||
|
|
@ -73,23 +42,29 @@ export default {
|
|||
const lp = circle.learningSequences[parseInt(pie.index)];
|
||||
pie.done = circle.someFinishedInLearningSequence(lp.translation_key);
|
||||
});
|
||||
circle.pieData = pieData.reverse()
|
||||
|
||||
|
||||
let newCircle = {}
|
||||
newCircle.pieData = pieData.reverse()
|
||||
newCircle.title = circle.title
|
||||
newCircle.slug = circle.slug
|
||||
newCircle.id = circle.id
|
||||
internalCircles.push(newCircle)
|
||||
});
|
||||
return internalCircles
|
||||
}
|
||||
return [];
|
||||
},
|
||||
svg() {
|
||||
return d3.select('.learning-path-visualization')
|
||||
|
||||
return d3.select("#" + this.identifier)
|
||||
},
|
||||
|
||||
learningPath() {
|
||||
return Object.assign({}, this.learningPathStore.learningPath)
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
mounted() {
|
||||
const circleWidth = 200
|
||||
const circleWidth = this.vertical ? 60 : 200
|
||||
const radius = (circleWidth * 0.8) / 2
|
||||
const blue900 = '#00224D',
|
||||
blue700 = '#1A5197',
|
||||
|
|
@ -101,6 +76,7 @@ export default {
|
|||
|
||||
let vueRouter = this.$router
|
||||
|
||||
|
||||
// Create append pie charts to the main svg
|
||||
const circle_groups = this.svg
|
||||
.selectAll('.circle')
|
||||
|
|
@ -108,10 +84,6 @@ export default {
|
|||
.enter()
|
||||
.append('g')
|
||||
.attr('class', 'circle')
|
||||
.attr('transform', (d, i) => {
|
||||
let x_coord = (i + 1) * circleWidth - radius
|
||||
return 'translate(' + x_coord + ', 200)'
|
||||
})
|
||||
.on('mouseover', function (d, i) {
|
||||
d3.select(this)
|
||||
.selectAll('.learningSegmentArc')
|
||||
|
|
@ -170,52 +142,134 @@ export default {
|
|||
.attr('fill', blue900)
|
||||
.style('font-size', 19)
|
||||
.text((d) => d.title)
|
||||
.attr('y', radius + 30)
|
||||
.attr('class', 'circlesText text-xl font-bold')
|
||||
.style('text-anchor', 'middle')
|
||||
.call(wrap, circleWidth - 20)
|
||||
.attr('class', 'circlesText text-xl font-bold hidden lg:block')
|
||||
|
||||
const topicHeightOffset = 20
|
||||
const topicHeight = 50
|
||||
const circleHeigth = circleWidth + 20
|
||||
|
||||
function getTopicPosition(i, d, topics){
|
||||
let x =0
|
||||
for (let index=0; index < i; index++){
|
||||
function getTopicHorizontalPosition(i, d, topics) {
|
||||
let x = 0
|
||||
for (let index = 0; index < i; index++) {
|
||||
x += circleWidth * topics[index].circles.length
|
||||
}
|
||||
return x + 30
|
||||
}
|
||||
|
||||
function getTopicVerticalPosition(i, d, topics) {
|
||||
let pos = topicHeightOffset
|
||||
|
||||
for (let index = 0; index < i; index++) {
|
||||
let topic = topics[index]
|
||||
if (topic.is_visible) {
|
||||
pos += topicHeight
|
||||
}
|
||||
pos += circleHeigth * topic.circles.length
|
||||
}
|
||||
return pos + topicHeightOffset
|
||||
}
|
||||
|
||||
function getCircleVerticalPostion(i, d, topics) {
|
||||
let y = circleHeigth / 2 + topicHeightOffset + 10
|
||||
for (let topic_index = 0; topic_index < topics.length; topic_index++) {
|
||||
const topic = topics[topic_index]
|
||||
if (topic.is_visible) {
|
||||
y += topicHeight
|
||||
}
|
||||
for (let circle_index = 0; circle_index < topic.circles.length; circle_index++) {
|
||||
let circle = topic.circles[circle_index]
|
||||
if (circle.id === d.id) {
|
||||
return y
|
||||
}
|
||||
y += circleHeigth
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const topicGroups = this.svg
|
||||
.selectAll('.topic')
|
||||
.data(this.learningPathStore.learningPath.topics)
|
||||
.data(this.learningPath.topics)
|
||||
.enter()
|
||||
.append('g')
|
||||
.attr('transform', (d, i) => {
|
||||
return "translate(" + getTopicPosition(i, d, this.learningPathStore.learningPath.topics) + ",0)"
|
||||
.attr('class', (d) => {
|
||||
return 'topic '.concat(d.is_visible ? "hidden lg:block" : "hidden")
|
||||
})
|
||||
.style("visibility", d => d.is_visible ? "visible" : "hidden")
|
||||
.attr('class', 'topic')
|
||||
|
||||
const topicLines = topicGroups
|
||||
.append('line')
|
||||
.attr('x1', -10)
|
||||
.attr('y1', 0)
|
||||
.attr('x2', -10)
|
||||
.attr('y2', 0)
|
||||
.attr('class', 'stroke-gray-500')
|
||||
.attr('stroke-width', 1.76)
|
||||
.attr('stroke-width', 1)
|
||||
|
||||
const topicTitles = topicGroups
|
||||
.append('text')
|
||||
.attr('y', 20)
|
||||
.attr('fill', blue900)
|
||||
.style('font-size', 19)
|
||||
.style('font-size', 16)
|
||||
.text((d) => d.title)
|
||||
.attr('class', 'topicTitles font-bold')
|
||||
.call(wrap, circleWidth)
|
||||
|
||||
|
||||
topicLines.transition().duration('1000').attr('y2', 350)
|
||||
// Calculate positions of objects
|
||||
|
||||
if (this.vertical) {
|
||||
const Circles_X = 60
|
||||
const Topics_X = Circles_X - radius
|
||||
|
||||
|
||||
circle_groups
|
||||
.attr('transform', (d, i) => {
|
||||
return 'translate('+ Circles_X + ',' + getCircleVerticalPostion(i, d, this.learningPath.topics) + ')'
|
||||
})
|
||||
|
||||
circlesText
|
||||
.attr('y', 7)
|
||||
.attr('x', radius + 40)
|
||||
|
||||
|
||||
topicGroups
|
||||
.attr('transform', (d, i) => {
|
||||
return "translate(" + Topics_X + ", " + getTopicVerticalPosition(i, d, this.learningPath.topics) + ")"
|
||||
})
|
||||
|
||||
|
||||
topicLines
|
||||
.transition().duration('1000').attr('x2', this.width * 0.8)
|
||||
|
||||
topicTitles
|
||||
.attr('y', 30)
|
||||
|
||||
|
||||
} else {
|
||||
circle_groups
|
||||
.attr('transform', (d, i) => {
|
||||
let x_coord = (i + 1) * circleWidth - radius
|
||||
return 'translate(' + x_coord + ', 200)'
|
||||
})
|
||||
|
||||
circlesText
|
||||
.attr('y', radius + 30)
|
||||
.style('text-anchor', 'middle')
|
||||
.call(wrap, circleWidth - 20)
|
||||
|
||||
topicGroups
|
||||
.attr('transform', (d, i) => {
|
||||
return "translate(" + getTopicHorizontalPosition(i, d, this.learningPathStore.learningPath.topics) + ",0)"
|
||||
})
|
||||
|
||||
topicLines
|
||||
.attr('x1', -10)
|
||||
.attr('y1', 0)
|
||||
.attr('x2', -10)
|
||||
.attr('y2', 0)
|
||||
.transition().duration('1000').attr('y2', 350)
|
||||
|
||||
topicTitles
|
||||
.attr('y', 20)
|
||||
.style('font-size', 19)
|
||||
.call(wrap, circleWidth * 0.8)
|
||||
.attr('class', 'topicTitles font-bold')
|
||||
|
||||
|
||||
}
|
||||
|
||||
function wrap(text, width) {
|
||||
text.each(function () {
|
||||
|
|
@ -258,8 +312,9 @@ export default {
|
|||
|
||||
<template>
|
||||
<div class="svg-container h-full content-start">
|
||||
<svg class="learning-path-visualization h-full" :viewBox="viewBox">
|
||||
<svg class="learning-path-visualization h-full" :viewBox="viewBox" :id=identifier>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import {useLearningPathStore} from '@/stores/learningPath';
|
|||
import {useUserStore} from '@/stores/user';
|
||||
|
||||
import LearningPathDiagram from '@/components/circle/LearningPathDiagram.vue';
|
||||
import LearningPathViewVertical from "@/views/LearningPathViewVertical.vue";
|
||||
|
||||
|
||||
log.debug('LearningPathView created');
|
||||
|
|
@ -27,23 +28,37 @@ onMounted(async () => {
|
|||
|
||||
<template>
|
||||
<div class="bg-gray-200" v-if="learningPathStore.learningPath">
|
||||
<Teleport to="body">
|
||||
<LearningPathViewVertical
|
||||
:show="learningPathStore.page === 'OVERVIEW'"
|
||||
@closemodal="learningPathStore.page = 'INDEX'"
|
||||
v-bind:learning-path-slug="this.learningPathSlug"
|
||||
/>
|
||||
</Teleport>
|
||||
|
||||
<div class="learningpath flex flex-col">
|
||||
<div class="flex flex-col h-max">
|
||||
<div class="bg-white py-8">
|
||||
<LearningPathDiagram class="max-w-[1680px] w-full"></LearningPathDiagram>
|
||||
<div class="bg-white py-8 flex flex-col">
|
||||
<div class="flex justify-end p-3">
|
||||
<button class="flex items-center" @click="learningPathStore.page = 'OVERVIEW'">
|
||||
<it-icon-list/>
|
||||
Listen Ansicht anzeigen
|
||||
</button>
|
||||
</div>
|
||||
<LearningPathDiagram class="max-w-[1680px] w-full" identifier="mainVisualization" v-bind:vertical="false"></LearningPathDiagram>
|
||||
</div>
|
||||
|
||||
<h1 class="m-12">{{ learningPathStore.learningPath.title }}</h1>
|
||||
|
||||
<div class="bg-white m-12 p-8 flex flex-row justify-start">
|
||||
<div
|
||||
class="bg-white m-12 p-8 flex flex-col lg:flex-row divide-y lg:divide-y-0 lg:divide-x divide-gray-500 justify-start">
|
||||
<div class="p-8 flex-auto">
|
||||
<h2>Willkommmen zurück, {{userStore.first_name}}</h2>
|
||||
<h2>Willkommmen zurück, {{ userStore.first_name }}</h2>
|
||||
<p class="mt-4 text-xl">
|
||||
Du hast bereits drei circles bearbeitet, mach weiter so!
|
||||
</p>
|
||||
</div>
|
||||
<div class="p-8 border-l border-gray-500 flex-1">
|
||||
<div class="p-8 flex-1">
|
||||
Nächster Schirtt
|
||||
<h3>Analyse: Anwenden</h3>
|
||||
<router-link class="mt-4 btn-blue" to="/circle/analyse">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,49 @@
|
|||
<script setup lang="ts">
|
||||
|
||||
import * as log from 'loglevel';
|
||||
|
||||
import {onMounted} from 'vue'
|
||||
import {useLearningPathStore} from '@/stores/learningPath';
|
||||
import {useUserStore} from '@/stores/user';
|
||||
|
||||
import LearningPathDiagram from '@/components/circle/LearningPathDiagram.vue';
|
||||
import ItFullScreenModal from '@/components/ui/ItFullScreenModal.vue';
|
||||
import {Circle} from "@/services/circle";
|
||||
|
||||
|
||||
log.debug('LearningPathView created');
|
||||
|
||||
const props = defineProps<{
|
||||
learningPathSlug: string,
|
||||
show: boolean
|
||||
|
||||
}>()
|
||||
|
||||
|
||||
const learningPathStore = useLearningPathStore();
|
||||
const userStore = useUserStore();
|
||||
|
||||
const emits = defineEmits(['closemodal'])
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<ItFullScreenModal
|
||||
:show="show"
|
||||
@closemodal="$emit('closemodal')">
|
||||
<div class="bg-white" v-if="learningPathStore.learningPath">
|
||||
<h1 class="m-6">{{ learningPathStore.learningPath.title }}</h1>
|
||||
<div class="learningpath flex flex-col">
|
||||
<div class="flex flex-col h-max">
|
||||
<div class="bg-red py-8">
|
||||
<LearningPathDiagram class="max-w-[1680px] w-full"
|
||||
height="2000"
|
||||
identifier="verticalVisualization"
|
||||
v-bind:vertical="true"></LearningPathDiagram>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ItFullScreenModal>
|
||||
</template>
|
||||
<style scoped>
|
||||
</style>
|
||||
Loading…
Reference in New Issue