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

VBV-88: LearningPathView vertical

This commit is contained in:
Daniel Egger 2022-09-13 14:39:07 +02:00
parent 384999619c
commit 0c01d39fb3
4 changed files with 43 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="de">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />

34
client/src/components/circle/LearningPathDiagram.vue
View File

@ -1,18 +1,11 @@
<script> <script>
import * as d3 from 'd3' import * as d3 from 'd3'
import { useLearningPathStore } from '../../stores/learningPath' import { useLearningPathStore } from '@/stores/learningPath'
import colors from '@/colors.json' import colors from '@/colors.json'
import * as log from 'loglevel'
export default { export default {
props: { props: {
width: {
default: 1640,
type: Number,
},
height: {
default: 256,
type: Number,
},
vertical: { vertical: {
default: false, default: false,
type: Boolean, type: Boolean,
@ -22,14 +15,19 @@ export default {
type: String, type: String,
}, },
}, },
data() {
return {
width: 1640,
height: 384,
}
},
setup() { setup() {
const learningPathStore = useLearningPathStore() const learningPathStore = useLearningPathStore()
return { learningPathStore } return { learningPathStore }
}, },
computed: { computed: {
viewBox() { viewBox() {
return `0 0 ${this.width} ${this.height * 1.5}` return `0 0 ${this.width} ${this.height}`
}, },
circles() { circles() {
function someFinished(circle, learningSequence) { function someFinished(circle, learningSequence) {
@ -81,6 +79,13 @@ export default {
}, },
mounted() { mounted() {
log.debug('LearningPathDiagram mounted')
if (this.vertical) {
this.width = Math.min(1080, window.innerWidth - 32)
this.height = 860
}
const circleWidth = this.vertical ? 60 : 200 const circleWidth = this.vertical ? 60 : 200
const radius = (circleWidth * 0.8) / 2 const radius = (circleWidth * 0.8) / 2
@ -235,7 +240,7 @@ export default {
// Calculate positions of objects // Calculate positions of objects
if (this.vertical) { if (this.vertical) {
const Circles_X = 60 const Circles_X = radius
const Topics_X = Circles_X - radius const Topics_X = Circles_X - radius
circle_groups.attr('transform', (d, i) => { circle_groups.attr('transform', (d, i) => {
@ -255,10 +260,7 @@ export default {
return 'topic '.concat(d.is_visible ? 'block' : 'hidden') return 'topic '.concat(d.is_visible ? 'block' : 'hidden')
}) })
topicLines topicLines.transition().duration('1000').attr('x2', this.width)
.transition()
.duration('1000')
.attr('x2', this.width * 0.8)
topicTitles.attr('y', 30) topicTitles.attr('y', 30)
} else { } else {

10
client/src/views/LearningPathView.vue
View File

@ -54,16 +54,18 @@ onMounted(async () => {
></LearningPathDiagram> ></LearningPathDiagram>
</div> </div>
<h1 data-cy="learning-path-title" class="m-12">{{ learningPathStore.learningPath.title }}</h1> <h1 data-cy="learning-path-title" class="m-6 lg:m-12" style="hyphens: auto">
{{ learningPathStore.learningPath.title }}
</h1>
<div <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" class="bg-white m-6 lg: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"> <div class="p-4 lg:p-8 flex-auto">
<h2 translate>Willkommmen zurück, {{ userStore.first_name }}</h2> <h2 translate>Willkommmen zurück, {{ userStore.first_name }}</h2>
<p class="mt-4 text-xl"></p> <p class="mt-4 text-xl"></p>
</div> </div>
<div class="p-8 flex-2" v-if="learningPathStore.learningPath.nextLearningContent" translate> <div class="p-4 lg:p-8 flex-2" v-if="learningPathStore.learningPath.nextLearningContent" translate>
Nächster Schirtt Nächster Schirtt
<h3> <h3>
{{ learningPathStore.learningPath.nextLearningContent.parentCircle.title }}: {{ learningPathStore.learningPath.nextLearningContent.parentCircle.title }}:

43
client/src/views/LearningPathViewVertical.vue
View File

@ -1,46 +1,39 @@
<script setup lang="ts"> <script setup lang="ts">
import * as log from 'loglevel'
import { useLearningPathStore } from '@/stores/learningPath'
import { useUserStore } from '@/stores/user'
import * as log from 'loglevel'; import LearningPathDiagram from '@/components/circle/LearningPathDiagram.vue'
import {useLearningPathStore} from '@/stores/learningPath'; import ItFullScreenModal from '@/components/ui/ItFullScreenModal.vue'
import {useUserStore} from '@/stores/user';
import LearningPathDiagram from '@/components/circle/LearningPathDiagram.vue'; log.debug('LearningPathView created')
import ItFullScreenModal from '@/components/ui/ItFullScreenModal.vue';
log.debug('LearningPathView created');
const props = defineProps<{ const props = defineProps<{
learningPathSlug: string, learningPathSlug: string
show: boolean show: boolean
}>() }>()
const learningPathStore = useLearningPathStore()
const learningPathStore = useLearningPathStore(); const userStore = useUserStore()
const userStore = useUserStore();
const emits = defineEmits(['closemodal']) const emits = defineEmits(['closemodal'])
</script> </script>
<template> <template>
<ItFullScreenModal <ItFullScreenModal :show="show" @closemodal="$emit('closemodal')">
:show="show" <div class="bg-white mx-auto max-w-[1440px] lg:p-6 p-4" v-if="learningPathStore.learningPath">
@closemodal="$emit('closemodal')"> <h1 style="hyphens: auto">{{ learningPathStore.learningPath.title }}</h1>
<div class="bg-white" v-if="learningPathStore.learningPath">
<h1 class="m-6">{{ learningPathStore.learningPath.title }}</h1>
<div class="learningpath flex flex-col"> <div class="learningpath flex flex-col">
<div class="flex flex-col h-max"> <div class="flex flex-col h-max">
<div class="bg-red py-8"> <div class="bg-red py-8">
<LearningPathDiagram class="max-w-[1680px] w-full" <LearningPathDiagram
height="2000" class="max-w-[1280px] w-full"
identifier="verticalVisualization" identifier="verticalVisualization"
v-bind:vertical="true"></LearningPathDiagram> v-bind:vertical="true"
></LearningPathDiagram>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</ItFullScreenModal> </ItFullScreenModal>
</template> </template>
<style scoped> <style scoped></style>
</style>