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

Refactor Circle page

This commit is contained in:
Daniel Egger 2022-05-23 17:08:06 +02:00
parent 49aaa526b5
commit ff666086dc
9 changed files with 19 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
client/src/components/CircleSidebar.vue
View File

@ -1,19 +0,0 @@
<template>
<div>
<h1>Analyse</h1>
<p>Dauer 8 Stunden</p>
<div>CircleComponent</div>
<div>CircleOverviewComponent</div>
<div>FachexpertenKontaktieren</div>
</div>
</template>
<script>
export default {
name: "CircleSidebar"
}
</script>
<style scoped>
</style>

16
client/src/components/LearningPath.vue
View File

@ -1,16 +0,0 @@
<template>
<ul>
<li>Einstieg</li>
<li>Analyse</li>
</ul>
</template>
<script>
export default {
name: "LearningPath"
}
</script>
<style scoped>
</style>

29
client/src/components/LearningSequence.vue
View File

@ -1,29 +0,0 @@
<template>
<section>
<div>
<h2>Starten</h2>
<p>30 Minuten</p>
</div>
<ul>
<li v-for="unit in units" :key="unit">
{{unit}}
</li>
</ul>
</section>
</template>
<script>
export default {
props: ['units'],
setup (props) {
return {
}
},
}
</script>
<style scoped>
</style>

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

@ -1,18 +1,18 @@
<template>
<nav class="bg-blue-dark flex flex-row text-white">
<p>Ich bin ein myVBV Header</p>
<ul>
<li>Ich bin ein myVBV link</li>
</ul>
</nav>
</template>
<script> <script>
export default { export default {
name: "MainNavigationBar" name: "MainNavigationBar"
} }
</script> </script>
<template>
<nav class="bg-blue-dark 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>
<a href="" class="">Berufstypische Situationen</a>
</nav>
</template>
<style scoped> <style scoped>
</style> </style>

18
client/src/components/VBVNavigationBar.vue
View File

@ -1,18 +0,0 @@
<template>
<nav class="bg-blue-dark flex flex-row text-white">
<p>Ich bin ein VBV Header</p>
<ul>
<li>Ich bin ein VBV link</li>
</ul>
</nav>
</template>
<script>
export default {
name: "VBVNavigationBar"
}
</script>
<style scoped>
</style>

9
client/src/router/index.ts
View File

@ -27,8 +27,9 @@ const router = createRouter({
} }
}, },
{ {
path: '/analyse', path: '/circle/:circleSlug',
component: () => import('../views/CircleAnalyseExampleView.vue'), component: () => import('../views/Circle.vue'),
props: true
}, },
{ {
path: '/profile', path: '/profile',
@ -38,10 +39,6 @@ const router = createRouter({
path: '/learningpath/:learningPathId', path: '/learningpath/:learningPathId',
component: () => import('../views/LearningPathOverview.vue'), component: () => import('../views/LearningPathOverview.vue'),
}, },
{
path: '/learningpath/:learningPathId/circle/:circleId',
component: () => import('../views/CircleView.vue'),
}
] ]
}) })

9
client/src/views/CircleAnalyseExampleView.vue → client/src/views/Circle.vue
View File

@ -1,7 +1,10 @@
<script> <script>
import axios from 'axios'; import axios from 'axios';
import MainNavigationBar from '../components/MainNavigationBar.vue';
export default { export default {
components: { MainNavigationBar },
props: ['circleSlug',],
data() { data() {
return { return {
count: 0, count: 0,
@ -9,10 +12,10 @@ export default {
} }
}, },
mounted() { mounted() {
console.log('CircleAnalyseExampleView mounted'); console.log('CircleAnalyseExampleView mounted', this.circleSlug);
axios({ axios({
method: 'get', method: 'get',
url: 'http://localhost:8000/wagtailapi/v2/pages/?type=learnpath.Circle&slug=analyse&fields=title,description,learning_sequences' url: `http://localhost:8000/wagtailapi/v2/pages/?type=learnpath.Circle&slug=${this.circleSlug}&fields=title,description,learning_sequences`
}).then((response) => { }).then((response) => {
this.circleData = response.data.items[0]; this.circleData = response.data.items[0];
}); });
@ -22,6 +25,8 @@ export default {
</script> </script>
<template> <template>
<MainNavigationBar/>
<div class="circle"> <div class="circle">
<div class="flex"> <div class="flex">
<div class="flex-initial w-128 p-8"> <div class="flex-initial w-128 p-8">

36
client/src/views/CircleView.vue
View File

@ -1,36 +0,0 @@
<template>
<VBVNavigationBar />
<MainNavigationBar />
<div class="flex flex-row">
<CircleSidebar />
<main class="flex-grow">
circle main content
<LearningSequence :units="units"/>
</main>
</div>
</template>
<script>
import MainNavigationBar from "../components/MainNavigationBar.vue";
import VBVNavigationBar from "../components/VBVNavigationBar.vue";
import CircleSidebar from "../components/CircleSidebar.vue";
import LearningSequence from "../components/LearningSequence.vue";
import {reactive} from "vue";
export default {
name: "CircleView",
components: {LearningSequence, CircleSidebar, MainNavigationBar, VBVNavigationBar},
setup () {
const units = reactive(['video bla', 'fachwissen'])
return {
units
}
}
}
</script>
<style scoped>
</style>

4
tailwind/input.css
View File

@ -2,10 +2,6 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
* {
@apply text-blue-dark;
}
@layer base { @layer base {
h1 { h1 {
@apply text-6xl font-bold @apply text-6xl font-bold