Dynamic "Weiter gehts" "Leider gehts"

client/src/components/circle/CircleDiagram.vue

@@ -48,6 +48,7 @@ const pieData = computed(() => {
       pie.arrowStartAngle = pie.endAngle + (pie.startAngle - pie.endAngle) / 2
       pie.arrowEndAngle = pie.startAngle + (pie.startAngle - pie.endAngle) / 2
       pie.translation_key = thisLearningSequence.translation_key
+      pie.slug = thisLearningSequence.slug
       pie.someFinished = someFinished(thisLearningSequence)
       pie.allFinished = allFinished(thisLearningSequence)
     })
@@ -146,7 +147,7 @@ function render() {
     })
     .on('click', function (d, elm) {
       console.log('clicked on ', d, elm)
-      document.getElementById(elm.translation_key)?.scrollIntoView({behavior: 'smooth'})
+      document.getElementById(elm.slug)?.scrollIntoView({behavior: 'smooth'})
     })
 
 

client/src/components/circle/LearningSequence.vue

@@ -3,6 +3,7 @@ import ItCheckbox from '@/components/ui/ItCheckbox.vue'
 import type { LearningContent, LearningSequence } from '@/types'
 import { useCircleStore } from '@/stores/circle'
 import { computed } from 'vue'
+import _ from 'lodash'
 
 const props = defineProps<{
   learningSequence: LearningSequence
@@ -30,20 +31,19 @@ const allFinished = computed(() => {
   return false
 })
 
-const continueTranslationKey = computed(() => {
+const continueTranslationKeyTuple = computed(() => {
   if (props.learningSequence && circleStore.circle) {
-    const childrenReversed = [...circleStore.circle.flatLearningContents].reverse()
-    const lastFinished = childrenReversed.find((learningContent) => {
+    const lastFinished = _.findLast(circleStore.circle.flatLearningContents, (learningContent) => {
       return learningContent.completed
     })
 
     if (!lastFinished) {
       // must be the first
-      return circleStore.circle.flatLearningContents[0].translation_key
+      return [circleStore.circle.flatLearningContents[0].translation_key, true]
     }
 
     if (lastFinished && lastFinished.nextLearningContent) {
-      return lastFinished.nextLearningContent.translation_key
+      return [lastFinished.nextLearningContent.translation_key, false]
     }
   }
 
@@ -67,7 +67,7 @@ const learningSequenceBorderClass = computed(() => {
 </script>
 
 <template>
-  <div class="mb-8 learning-sequence" :id="learningSequence.translation_key">
+  <div class="mb-8 learning-sequence" :id="learningSequence.slug">
     <div class="flex items-center gap-4 mb-2 text-blue-900">
       <component :is="learningSequence.icon" />
       <h3 class="text-xl font-semibold">
@@ -99,11 +99,12 @@ const learningSequenceBorderClass = computed(() => {
           </ItCheckbox>
 
           <button
-            v-if="learningContent.translation_key === continueTranslationKey"
+            v-if="learningContent.translation_key === continueTranslationKeyTuple[0]"
             class="btn-blue -my-4"
             @click.stop="circleStore.openLearningContent(learningContent)"
           >
-            Weiter geht's
+            <span v-if="continueTranslationKeyTuple[1]"> Los geht's </span>
+            <span v-else> Weiter geht's </span>
           </button>
         </div>
 

client/src/views/CircleView.vue

@@ -8,8 +8,11 @@ import LearningContent from '@/components/circle/LearningContent.vue'
 import { onMounted } from 'vue'
 import { useCircleStore } from '@/stores/circle'
 import { useAppStore } from '@/stores/app'
+import { useRoute } from 'vue-router'
 
-log.debug('CircleView.vue created')
+const route = useRoute()
+
+log.debug('CircleView.vue created', route)
 
 const props = defineProps<{
   learningPathSlug: string
@@ -26,6 +29,15 @@ onMounted(async () => {
 
   try {
     await circleStore.loadCircle(props.learningPathSlug, props.circleSlug)
+
+    if (route.hash.startsWith('#ls-')) {
+      const hashLearningSequence = circleStore.circle?.learningSequences.find((ls) => {
+        return ls.slug.endsWith(route.hash.replace('#', ''))
+      })
+      if (hashLearningSequence) {
+        document.getElementById(hashLearningSequence.slug)?.scrollIntoView({ behavior: 'smooth' })
+      }
+    }
   } catch (error) {
     log.error(error)
   }

client/src/views/LearningPathView.vue

@@ -7,6 +7,7 @@ import { useUserStore } from '@/stores/user'
 
 import LearningPathDiagram from '@/components/circle/LearningPathDiagram.vue'
 import LearningPathViewVertical from '@/views/LearningPathViewVertical.vue'
+import { LearningPath } from '@/services/learningPath'
 
 log.debug('LearningPathView created')
 
@@ -26,6 +27,20 @@ onMounted(async () => {
     log.error(error)
   }
 })
+
+const createContinueUrl = (learningPath: LearningPath) => {
+  if (learningPath.nextLearningContent) {
+    const circle = learningPath.nextLearningContent.parentCircle
+    const lsShortSlug = learningPath.nextLearningContent.parentLearningSequence?.slug.replace(`${circle.slug}-`, '')
+    const url = `/learn/${learningPath.slug}/${learningPath.nextLearningContent.parentCircle.slug}#${lsShortSlug}`
+    const isFirst =
+      learningPath.nextLearningContent.translation_key ===
+      learningPath.circles[0].flatLearningContents[0].translation_key
+    return [url, isFirst]
+  }
+
+  return ['', false]
+}
 </script>
 
 <template>
@@ -73,11 +88,12 @@ onMounted(async () => {
             </h3>
             <router-link
               class="mt-4 btn-blue"
-              :to="`/learn/${learningPathStore.learningPath.slug}/${learningPathStore.learningPath.nextLearningContent.parentCircle.slug}`"
+              :to="createContinueUrl(learningPathStore.learningPath)[0]"
               data-cy="continue-button"
               translate
             >
-              Los geht's
+              <span v-if="createContinueUrl(learningPathStore.learningPath)[1]"> Los geht's </span>
+              <span v-else>Weiter geht's</span>
             </router-link>
           </div>
         </div>

server/vbv_lernwelt/templates/admin/index.html

@@ -5,11 +5,11 @@
   {% include "admin/app_list.html" with app_list=app_list show_changelinks=True %}
 
   <div class="content">
-    <form action="/core/cypressreset/" method="post">
+    <form action="/api/core/cypressreset/" method="post">
       {% csrf_token %}
       <button class="btn" name="">Testdaten zurück setzen</button>
     </form>
-    <form action="/core/schemareset/" method="post">
+    <form action="/api/core/schemareset/" method="post">
       {% csrf_token %}
       <button class="btn" name="">Datenbank zurück setzen</button>
     </form>