Refactor Circle page
This commit is contained in:
Daniel Egger
parent
49aaa526b5
commit
ff666086dc
|
|
@ -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>
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<template>
|
||||
<ul>
|
||||
<li>Einstieg</li>
|
||||
<li>Analyse</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "LearningPath"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
export default {
|
||||
name: "MainNavigationBar"
|
||||
}
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -27,8 +27,9 @@ const router = createRouter({
|
|||
}
|
||||
},
|
||||
{
|
||||
path: '/analyse',
|
||||
component: () => import('../views/CircleAnalyseExampleView.vue'),
|
||||
path: '/circle/:circleSlug',
|
||||
component: () => import('../views/Circle.vue'),
|
||||
props: true
|
||||
},
|
||||
{
|
||||
path: '/profile',
|
||||
|
|
@ -38,10 +39,6 @@ const router = createRouter({
|
|||
path: '/learningpath/:learningPathId',
|
||||
component: () => import('../views/LearningPathOverview.vue'),
|
||||
},
|
||||
{
|
||||
path: '/learningpath/:learningPathId/circle/:circleId',
|
||||
component: () => import('../views/CircleView.vue'),
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
<script>
|
||||
import axios from 'axios';
|
||||
import MainNavigationBar from '../components/MainNavigationBar.vue';
|
||||
|
||||
export default {
|
||||
components: { MainNavigationBar },
|
||||
props: ['circleSlug',],
|
||||
data() {
|
||||
return {
|
||||
count: 0,
|
||||
|
|
@ -9,10 +12,10 @@ export default {
|
|||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('CircleAnalyseExampleView mounted');
|
||||
console.log('CircleAnalyseExampleView mounted', this.circleSlug);
|
||||
axios({
|
||||
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) => {
|
||||
this.circleData = response.data.items[0];
|
||||
});
|
||||
|
|
@ -22,6 +25,8 @@ export default {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<MainNavigationBar/>
|
||||
|
||||
<div class="circle">
|
||||
<div class="flex">
|
||||
<div class="flex-initial w-128 p-8">
|
||||
|
|
@ -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>
|
||||
|
|
@ -2,10 +2,6 @@
|
|||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
* {
|
||||
@apply text-blue-dark;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
h1 {
|
||||
@apply text-6xl font-bold
|
||||
|
|
|
|||
Loading…
Reference in New Issue