From 8dbec8b69921f70193fe8be8fb7ed28748b7b906 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Fri, 9 Sep 2022 12:16:48 +0200
Subject: [PATCH 1/5] Use `runserver_plus` to minimize runserver cpu usage

---
 prepare_server.sh                        | 4 ++--
 server/requirements/requirements-dev.txt | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/prepare_server.sh b/prepare_server.sh
index 1a5b1916..e60422eb 100755
--- a/prepare_server.sh
+++ b/prepare_server.sh
@@ -74,7 +74,7 @@ else
 fi
 
 if [ "$START_BACKGROUND" = true ]; then
-    python3 server/manage.py runserver "${DJANGO_PORT}" --settings="$DJANGO_SETTINGS_MODULE" > /dev/null &
+    python3 server/manage.py runserver_plus "${DJANGO_PORT}" --settings="$DJANGO_SETTINGS_MODULE" > /dev/null &
 else
-    python3 server/manage.py runserver "${DJANGO_PORT}" --settings="$DJANGO_SETTINGS_MODULE"
+    python3 server/manage.py runserver_plus "${DJANGO_PORT}" --settings="$DJANGO_SETTINGS_MODULE"
 fi
diff --git a/server/requirements/requirements-dev.txt b/server/requirements/requirements-dev.txt
index 2fc1305d..d8dcb9d5 100644
--- a/server/requirements/requirements-dev.txt
+++ b/server/requirements/requirements-dev.txt
@@ -109,7 +109,7 @@ django-csp==3.7
     # via -r requirements.in
 django-debug-toolbar==3.2.4
     # via -r requirements-dev.in
-django-extensions==3.1.5
+django-extensions==3.2.0
     # via -r requirements-dev.in
 django-filter==21.1
     # via wagtail
@@ -428,9 +428,9 @@ wagtail-factories==2.0.1
     # via -r requirements.in
 wagtail-localize==1.2.1
     # via -r requirements.in
-watchdog==2.1.7
+watchdog==2.1.9
     # via werkzeug
-watchgod==0.8.1
+watchgod==0.8.2
     # via
     #   -r requirements-dev.in
     #   uvicorn
@@ -440,7 +440,7 @@ webencodings==0.5.1
     # via html5lib
 websockets==10.2
     # via uvicorn
-werkzeug[watchdog]==2.1.0
+werkzeug[watchdog]==2.2.0
     # via -r requirements-dev.in
 wheel==0.37.1
     # via pip-tools

From 5d6e94ebd6234e79d50823faf12837477d27d82a Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Fri, 9 Sep 2022 15:09:42 +0200
Subject: [PATCH 2/5] Refactor LearningContent to its own route

---
 .../src/components/circle/LearningContent.vue | 43 ++++----------
 client/src/main.ts                            | 16 ++++-
 client/src/router/index.ts                    |  5 ++
 client/src/services/circle.ts                 |  5 ++
 client/src/stores/app.ts                      | 20 ++++++-
 client/src/stores/circle.ts                   | 33 ++++++++---
 client/src/views/CircleView.vue               |  4 ++
 client/src/views/LearningContentView.vue      | 59 +++++++++++++++++++
 client/vite.config.ts                         | 12 ++--
 9 files changed, 150 insertions(+), 47 deletions(-)
 create mode 100644 client/src/views/LearningContentView.vue

diff --git a/client/src/components/circle/LearningContent.vue b/client/src/components/circle/LearningContent.vue
index 6644ba26..fd5b3403 100644
--- a/client/src/components/circle/LearningContent.vue
+++ b/client/src/components/circle/LearningContent.vue
@@ -1,32 +1,24 @@
 <script setup lang="ts">
-import * as log from 'loglevel';
-import {computed} from 'vue';
-import {useCircleStore} from '@/stores/circle';
+import * as log from 'loglevel'
+import { computed } from 'vue'
+import { useCircleStore } from '@/stores/circle'
 
-log.debug('LearningContent.vue setup');
+log.debug('LearningContent.vue setup')
 
-const circleStore = useCircleStore();
+const circleStore = useCircleStore()
 
-const learningContent = computed(() => circleStore.currentLearningContent);
+const learningContent = computed(() => circleStore.currentLearningContent)
 
 const block = computed(() => {
   if (learningContent.value) {
-    return learningContent.value.contents[0];
+    return learningContent.value.contents[0]
   }
 })
-
 </script>
 
 <template>
   <div>
-    <nav
-      class="
-        px-4 lg:px-8
-        py-4
-        flex justify-between items-center
-        border-b border-gray-500
-      "
-    >
+    <nav class="px-4 lg:px-8 py-4 flex justify-between items-center border-b border-gray-500">
       <button
         type="button"
         class="btn-text inline-flex items-center px-3 py-2 font-normal"
@@ -50,15 +42,9 @@ const block = computed(() => {
     </nav>
 
     <div v-if="block.type === 'exercise'" class="h-screen">
-      <iframe
-        width="100%"
-        height="100%"
-        scrolling="no"
-        :src="block.value.url"
-      />
+      <iframe width="100%" height="100%" scrolling="no" :src="block.value.url" />
     </div>
 
-
     <div v-else class="mx-auto max-w-5xl px-4 lg:px-8 py-4">
       <p>{{ block.value.description }}</p>
 
@@ -69,24 +55,19 @@ const block = computed(() => {
           :title="learningContent.title"
           frameborder="0"
           allow="accelerometer; encrypted-media; gyroscope; picture-in-picture"
-          allowfullscreen>
+          allowfullscreen
+        >
         </iframe>
       </div>
 
-      <div
-        v-if="block.type === 'podcast'"
-      >
+      <div v-if="block.type === 'podcast'">
         <iframe width="100%" height="300" scrolling="no" frameborder="no" allow="" :src="block.value.url"></iframe>
       </div>
-
     </div>
-
   </div>
-
 </template>
 
 <style lang="scss" scoped>
-
 $header-height: 77px;
 $footer-height: 57px;
 
diff --git a/client/src/main.ts b/client/src/main.ts
index 977fb61c..c2777dd9 100644
--- a/client/src/main.ts
+++ b/client/src/main.ts
@@ -1,4 +1,4 @@
-import { createApp } from 'vue'
+import { createApp, markRaw } from 'vue'
 import { createPinia } from 'pinia'
 import * as log from 'loglevel'
 
@@ -7,6 +7,7 @@ import App from './App.vue'
 import router from './router'
 
 import '../tailwind.css'
+import type { Router } from 'vue-router'
 
 if (window.location.href.indexOf('localhost') >= 0) {
   log.setLevel('trace')
@@ -21,8 +22,19 @@ const app = createApp(App)
 // todo: define lang setup
 // await loadLocaleMessages(i18n, 'de')
 
-app.use(createPinia())
 app.use(router)
+
+declare module 'pinia' {
+  export interface PiniaCustomProperties {
+    router: Router
+  }
+}
+const pinia = createPinia();
+pinia.use(({ store }) => {
+  store.router = markRaw(router)
+})
+app.use(pinia)
 // app.use(i18n)
 
+
 app.mount('#app')
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index 764f3508..9f8f80d2 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -46,6 +46,11 @@ const router = createRouter({
       component: () => import('../views/CircleView.vue'),
       props: true,
     },
+    {
+      path: '/learn/:learningPathSlug/:circleSlug/:contentSlug',
+      component: () => import('../views/LearningContentView.vue'),
+      props: true,
+    },
     {
       path: '/styleguide',
       component: () => import('../views/StyleGuideView.vue'),
diff --git a/client/src/services/circle.ts b/client/src/services/circle.ts
index 87c0e7c4..22bae8d4 100644
--- a/client/src/services/circle.ts
+++ b/client/src/services/circle.ts
@@ -215,4 +215,9 @@ export class Circle implements LearningWagtailPage {
       this.parentLearningPath.calcNextLearningContent(completionData);
     }
   }
+
+  public getUrl(): string {
+    const shortSlug = this.slug.replace(`${this.parentLearningPath?.slug}-circle-`, '')
+    return `/learn/${this.parentLearningPath?.slug}/${shortSlug}`;
+  }
 }
diff --git a/client/src/stores/app.ts b/client/src/stores/app.ts
index 8e4bec05..7dcead06 100644
--- a/client/src/stores/app.ts
+++ b/client/src/stores/app.ts
@@ -6,10 +6,28 @@ export type AppState = {
   showMainNavigationBar: boolean
 }
 
+const showMainNavigationBarInitialState = () => {
+  let path = window.location.pathname;
+
+  // remove dangling slash
+  if (path.endsWith('/')) {
+    path = path.slice(0, -1);
+  }
+
+  const numberOfSlashes = (path.match(/\//g) || []).length;
+
+  // it should hide main navigation bar when on learning content page
+  if (path.startsWith('/learn/') && numberOfSlashes >= 4) {
+    return false
+  }
+
+  return true;
+}
+
 export const useAppStore = defineStore({
   id: 'app',
   state: () => ({
-    showMainNavigationBar: true,
+    showMainNavigationBar: showMainNavigationBarInitialState(),
     userLoaded: false,
     routingFinished: false,
   } as AppState),
diff --git a/client/src/stores/circle.ts b/client/src/stores/circle.ts
index 387966fc..a5ca294e 100644
--- a/client/src/stores/circle.ts
+++ b/client/src/stores/circle.ts
@@ -28,7 +28,7 @@ export const useCircleStore = defineStore({
   getters: {
   },
   actions: {
-    async loadCircle(learningPathSlug: string, circleSlug: string) {
+    async loadCircle(learningPathSlug: string, circleSlug: string): Promise<Circle> {
       this.circle = undefined;
       const learningPathStore = useLearningPathStore();
       await learningPathStore.loadLearningPath(learningPathSlug);
@@ -44,6 +44,20 @@ export const useCircleStore = defineStore({
 
       return this.circle
     },
+    async loadLearningContent(learningPathSlug: string, circleSlug: string, learningContentSlug: string) {
+      const circle = await this.loadCircle(learningPathSlug, circleSlug);
+      if (circle) {
+        this.currentLearningContent = circle.flatLearningContents.find((learningContent) => {
+          return learningContent.slug.endsWith(learningContentSlug);
+        });
+      }
+
+      if (!this.currentLearningContent) {
+        throw `No learning content found with slug: ${learningContentSlug}`;
+      }
+
+      return this.currentLearningContent;
+    },
     async markCompletion(page: LearningContent | LearningUnitQuestion, flag = true) {
       try {
         page.completed = flag;
@@ -61,15 +75,15 @@ export const useCircleStore = defineStore({
     },
     openLearningContent(learningContent: LearningContent) {
       this.currentLearningContent = learningContent;
-      const appStore = useAppStore();
-      appStore.showMainNavigationBar = false;
-      this.page = 'LEARNING_CONTENT';
+      const shortSlug = learningContent.slug.replace(`${this.circle?.slug}-lc-`, '');
+      this.router.push({
+        path: `${this.circle?.getUrl()}/${shortSlug}`,
+      });
     },
     closeLearningContent() {
-      this.currentLearningContent = undefined;
-      const appStore = useAppStore();
-      appStore.showMainNavigationBar = true;
-      this.page = 'INDEX';
+      this.router.push({
+        path: `${this.circle?.getUrl()}`
+      });
     },
     openSelfEvaluation(learningUnit: LearningUnit) {
       this.page = 'SELF_EVALUATION';
@@ -108,7 +122,8 @@ export const useCircleStore = defineStore({
           currentParent.children.length > 0
         ) {
           // go to self evaluation
-          this.openSelfEvaluation(currentParent);
+          // this.openSelfEvaluation(currentParent);
+          this.closeLearningContent();
         } else if (this.currentLearningContent.nextLearningContent) {
           if (
             this.currentLearningContent.parentLearningSequence &&
diff --git a/client/src/views/CircleView.vue b/client/src/views/CircleView.vue
index 358301c0..876411bf 100644
--- a/client/src/views/CircleView.vue
+++ b/client/src/views/CircleView.vue
@@ -8,6 +8,7 @@ import LearningContent from '@/components/circle/LearningContent.vue'
 import { onMounted } from 'vue'
 import { useCircleStore } from '@/stores/circle'
 import SelfEvaluation from '@/components/circle/SelfEvaluation.vue'
+import { useAppStore } from '@/stores/app'
 
 log.debug('CircleView.vue created')
 
@@ -16,6 +17,9 @@ const props = defineProps<{
   circleSlug: string
 }>()
 
+const appStore = useAppStore()
+appStore.showMainNavigationBar = true
+
 const circleStore = useCircleStore()
 
 onMounted(async () => {
diff --git a/client/src/views/LearningContentView.vue b/client/src/views/LearningContentView.vue
new file mode 100644
index 00000000..91015291
--- /dev/null
+++ b/client/src/views/LearningContentView.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import * as log from 'loglevel'
+import LearningContent from '@/components/circle/LearningContent.vue'
+
+import { onMounted } from 'vue'
+import { useCircleStore } from '@/stores/circle'
+import { useAppStore } from '@/stores/app'
+
+log.debug('LearningContentView created')
+
+const props = defineProps<{
+  learningPathSlug: string
+  circleSlug: string
+  contentSlug: string
+}>()
+
+const appStore = useAppStore()
+appStore.showMainNavigationBar = false
+
+const circleStore = useCircleStore()
+
+onMounted(async () => {
+  log.debug('LearningContentView mounted', props.learningPathSlug, props.circleSlug, props.contentSlug)
+
+  try {
+    await circleStore.loadLearningContent(props.learningPathSlug, props.circleSlug, props.contentSlug)
+  } catch (error) {
+    log.error(error)
+  }
+})
+</script>
+
+<template>
+  <LearningContent
+    v-if="circleStore.currentLearningContent"
+    :key="circleStore.currentLearningContent.translation_key"
+  />
+</template>
+
+<style lang="postcss" scoped>
+.circle-container {
+  background: linear-gradient(to right, white 0%, white 50%, theme(colors.gray.200) 50%, theme(colors.gray.200) 100%);
+}
+
+.circle {
+  max-width: 1440px;
+  margin: 0 auto;
+}
+
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/client/vite.config.ts b/client/vite.config.ts
index 36825c0d..5edc7109 100644
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -1,9 +1,9 @@
-import {fileURLToPath, URL} from 'url'
+import { fileURLToPath, URL } from "url";
 
-import {defineConfig, loadEnv} from 'vite'
-import vue from '@vitejs/plugin-vue'
+import { defineConfig, loadEnv } from "vite";
+import vue from "@vitejs/plugin-vue";
 // import vueI18n from '@intlify/vite-plugin-vue-i18n'
-import alias from '@rollup/plugin-alias'
+import alias from "@rollup/plugin-alias";
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
@@ -33,6 +33,10 @@ export default defineConfig(({ mode }) => {
         // ]
       }),
     ],
+    server: {
+      port: 5173,
+      hmr: { port: 5173 }
+    },
     resolve: {
       alias: {
         '@': fileURLToPath(new URL('./src', import.meta.url)),

From dc5adb6214f4e74883180dea1c6402b742934e12 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Fri, 9 Sep 2022 16:57:39 +0200
Subject: [PATCH 3/5] Refactor SelfEvaluation to its own route

---
 client/src/router/index.ts                    |  5 ++
 client/src/services/circle.ts                 | 10 +++
 client/src/stores/circle.ts                   | 61 ++++++++++++-------
 client/src/views/CircleView.vue               |  4 --
 client/src/views/LearningContentView.vue      | 21 +------
 .../views/LearningUnitSelfEvaluationView.vue  | 38 ++++++++++++
 prepare_server.sh                             |  4 +-
 7 files changed, 94 insertions(+), 49 deletions(-)
 create mode 100644 client/src/views/LearningUnitSelfEvaluationView.vue

diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index 9f8f80d2..af8feacc 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -46,6 +46,11 @@ const router = createRouter({
       component: () => import('../views/CircleView.vue'),
       props: true,
     },
+    {
+      path: '/learn/:learningPathSlug/:circleSlug/evaluate/:learningUnitSlug',
+      component: () => import('../views/LearningUnitSelfEvaluationView.vue'),
+      props: true,
+    },
     {
       path: '/learn/:learningPathSlug/:circleSlug/:contentSlug',
       component: () => import('../views/LearningContentView.vue'),
diff --git a/client/src/services/circle.ts b/client/src/services/circle.ts
index 22bae8d4..abb767cb 100644
--- a/client/src/services/circle.ts
+++ b/client/src/services/circle.ts
@@ -174,6 +174,16 @@ export class Circle implements LearningWagtailPage {
     return result;
   }
 
+  public get flatLearningUnits(): LearningUnit[] {
+    const result: LearningUnit[] = [];
+    this.learningSequences.forEach((learningSequence) => {
+      learningSequence.learningUnits.forEach((learningUnit) => {
+        result.push(learningUnit);
+      });
+    });
+    return result;
+  }
+
   public someFinishedInLearningSequence(translationKey: string): boolean {
     if (translationKey) {
       return this.flatChildren.filter((lc) => {
diff --git a/client/src/stores/circle.ts b/client/src/stores/circle.ts
index a5ca294e..5f2bdfe2 100644
--- a/client/src/stores/circle.ts
+++ b/client/src/stores/circle.ts
@@ -5,7 +5,6 @@ import { defineStore } from 'pinia'
 import type { LearningContent, LearningUnit, LearningUnitQuestion } from '@/types'
 import type { Circle } from '@/services/circle'
 import { itPost } from '@/fetchHelpers'
-import { useAppStore } from '@/stores/app'
 import { useLearningPathStore } from '@/stores/learningPath'
 
 export type CircleStoreState = {
@@ -58,6 +57,21 @@ export const useCircleStore = defineStore({
 
       return this.currentLearningContent;
     },
+    async loadSelfEvaluation(learningPathSlug: string, circleSlug: string, learningUnitSlug: string) {
+      const circle = await this.loadCircle(learningPathSlug, circleSlug);
+      if (circle) {
+        this.currentSelfEvaluation = circle.flatLearningUnits.find((child) => {
+          return child.slug.endsWith(learningUnitSlug)
+        });
+      }
+
+      if (!this.currentSelfEvaluation) {
+        throw `No self evaluation found with slug: ${learningUnitSlug}`;
+      }
+
+      return this.currentLearningContent;
+
+    },
     async markCompletion(page: LearningContent | LearningUnitQuestion, flag = true) {
       try {
         page.completed = flag;
@@ -86,16 +100,16 @@ export const useCircleStore = defineStore({
       });
     },
     openSelfEvaluation(learningUnit: LearningUnit) {
-      this.page = 'SELF_EVALUATION';
-      const appStore = useAppStore();
-      appStore.showMainNavigationBar = false;
       this.currentSelfEvaluation = learningUnit;
+      const shortSlug = learningUnit.slug.replace(`${this.circle?.slug}-lu-`, '');
+      this.router.push({
+        path: `${this.circle?.getUrl()}/evaluate/${shortSlug}`,
+      });
     },
     closeSelfEvaluation() {
-      this.currentSelfEvaluation = undefined;
-      const appStore = useAppStore();
-      appStore.showMainNavigationBar = true;
-      this.page = 'INDEX';
+      this.router.push({
+        path: `${this.circle?.getUrl()}`
+      });
     },
     calcSelfEvaluationStatus(learningUnit: LearningUnit) {
       if (learningUnit.children.length > 0) {
@@ -141,21 +155,22 @@ export const useCircleStore = defineStore({
       }
     },
     continueFromSelfEvaluation() {
-      if (this.currentSelfEvaluation) {
-        const nextContent = this.currentSelfEvaluation.learningContents[this.currentSelfEvaluation.learningContents.length - 1].nextLearningContent;
-
-        if (nextContent) {
-          if (this.currentSelfEvaluation?.parentLearningSequence?.id === nextContent?.parentLearningSequence?.id) {
-            this.openLearningContent(nextContent);
-          } else {
-            this.closeSelfEvaluation();
-          }
-        } else {
-          this.closeSelfEvaluation();
-        }
-      } else {
-        log.error('currentSelfEvaluation is undefined');
-      }
+      this.closeSelfEvaluation()
+      // if (this.currentSelfEvaluation) {
+      //   const nextContent = this.currentSelfEvaluation.learningContents[this.currentSelfEvaluation.learningContents.length - 1].nextLearningContent;
+      //
+      //   if (nextContent) {
+      //     if (this.currentSelfEvaluation?.parentLearningSequence?.id === nextContent?.parentLearningSequence?.id) {
+      //       this.openLearningContent(nextContent);
+      //     } else {
+      //       this.closeSelfEvaluation();
+      //     }
+      //   } else {
+      //     this.closeSelfEvaluation();
+      //   }
+      // } else {
+      //   log.error('currentSelfEvaluation is undefined');
+      // }
     }
   }
 })
diff --git a/client/src/views/CircleView.vue b/client/src/views/CircleView.vue
index 876411bf..6881dfec 100644
--- a/client/src/views/CircleView.vue
+++ b/client/src/views/CircleView.vue
@@ -7,7 +7,6 @@ import LearningContent from '@/components/circle/LearningContent.vue'
 
 import { onMounted } from 'vue'
 import { useCircleStore } from '@/stores/circle'
-import SelfEvaluation from '@/components/circle/SelfEvaluation.vue'
 import { useAppStore } from '@/stores/app'
 
 log.debug('CircleView.vue created')
@@ -46,9 +45,6 @@ onMounted(async () => {
       <div v-if="circleStore.page === 'LEARNING_CONTENT'">
         <LearningContent :key="circleStore.currentLearningContent.translation_key" />
       </div>
-      <div v-else-if="circleStore.page === 'SELF_EVALUATION'">
-        <SelfEvaluation :key="circleStore.currentSelfEvaluation.translation_key" />
-      </div>
       <div v-else>
         <div class="circle-container">
           <div class="circle">
diff --git a/client/src/views/LearningContentView.vue b/client/src/views/LearningContentView.vue
index 91015291..df25a693 100644
--- a/client/src/views/LearningContentView.vue
+++ b/client/src/views/LearningContentView.vue
@@ -37,23 +37,4 @@ onMounted(async () => {
   />
 </template>
 
-<style lang="postcss" scoped>
-.circle-container {
-  background: linear-gradient(to right, white 0%, white 50%, theme(colors.gray.200) 50%, theme(colors.gray.200) 100%);
-}
-
-.circle {
-  max-width: 1440px;
-  margin: 0 auto;
-}
-
-.v-enter-active,
-.v-leave-active {
-  transition: opacity 0.3s ease;
-}
-
-.v-enter-from,
-.v-leave-to {
-  opacity: 0;
-}
-</style>
+<style lang="postcss" scoped></style>
diff --git a/client/src/views/LearningUnitSelfEvaluationView.vue b/client/src/views/LearningUnitSelfEvaluationView.vue
new file mode 100644
index 00000000..f7c084c5
--- /dev/null
+++ b/client/src/views/LearningUnitSelfEvaluationView.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import * as log from 'loglevel'
+
+import SelfEvaluation from '@/components/circle/SelfEvaluation.vue'
+
+import { onMounted } from 'vue'
+import { useCircleStore } from '@/stores/circle'
+import { useAppStore } from '@/stores/app'
+
+log.debug('LearningUnitSelfEvaluationView created')
+
+const props = defineProps<{
+  learningPathSlug: string
+  circleSlug: string
+  learningUnitSlug: string
+}>()
+
+const appStore = useAppStore()
+appStore.showMainNavigationBar = false
+
+const circleStore = useCircleStore()
+
+onMounted(async () => {
+  log.debug('LearningUnitSelfEvaluationView mounted', props.learningPathSlug, props.circleSlug, props.learningUnitSlug)
+
+  try {
+    await circleStore.loadSelfEvaluation(props.learningPathSlug, props.circleSlug, props.learningUnitSlug)
+  } catch (error) {
+    log.error(error)
+  }
+})
+</script>
+
+<template>
+  <SelfEvaluation v-if="circleStore.currentSelfEvaluation" :key="circleStore.currentSelfEvaluation.translation_key" />
+</template>
+
+<style lang="postcss" scoped></style>
diff --git a/prepare_server.sh b/prepare_server.sh
index e60422eb..1a5b1916 100755
--- a/prepare_server.sh
+++ b/prepare_server.sh
@@ -74,7 +74,7 @@ else
 fi
 
 if [ "$START_BACKGROUND" = true ]; then
-    python3 server/manage.py runserver_plus "${DJANGO_PORT}" --settings="$DJANGO_SETTINGS_MODULE" > /dev/null &
+    python3 server/manage.py runserver "${DJANGO_PORT}" --settings="$DJANGO_SETTINGS_MODULE" > /dev/null &
 else
-    python3 server/manage.py runserver_plus "${DJANGO_PORT}" --settings="$DJANGO_SETTINGS_MODULE"
+    python3 server/manage.py runserver "${DJANGO_PORT}" --settings="$DJANGO_SETTINGS_MODULE"
 fi

From 6b0cf9effd2b581fc34ee26db10691cc54f7b8df Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Fri, 9 Sep 2022 17:36:43 +0200
Subject: [PATCH 4/5] Refactor LearningContent routing

---
 .../src/components/circle/LearningContent.vue | 15 ++--
 .../src/components/circle/SelfEvaluation.vue  | 72 +++++++------------
 client/src/stores/circle.ts                   | 51 +++++--------
 client/src/views/LearningContentView.vue      | 41 ++++++++---
 .../views/LearningUnitSelfEvaluationView.vue  | 15 ++--
 5 files changed, 97 insertions(+), 97 deletions(-)

diff --git a/client/src/components/circle/LearningContent.vue b/client/src/components/circle/LearningContent.vue
index fd5b3403..bbc0515a 100644
--- a/client/src/components/circle/LearningContent.vue
+++ b/client/src/components/circle/LearningContent.vue
@@ -1,23 +1,28 @@
 <script setup lang="ts">
 import * as log from 'loglevel'
 import { computed } from 'vue'
+import type { LearningContent } from '@/types'
 import { useCircleStore } from '@/stores/circle'
 
 log.debug('LearningContent.vue setup')
 
 const circleStore = useCircleStore()
 
-const learningContent = computed(() => circleStore.currentLearningContent)
+const props = defineProps<{
+  learningContent: LearningContent
+}>()
 
 const block = computed(() => {
-  if (learningContent.value) {
-    return learningContent.value.contents[0]
+  if (props.learningContent?.contents?.length) {
+    return props.learningContent.contents[0]
   }
+
+  return undefined
 })
 </script>
 
 <template>
-  <div>
+  <div v-if="block">
     <nav class="px-4 lg:px-8 py-4 flex justify-between items-center border-b border-gray-500">
       <button
         type="button"
@@ -35,7 +40,7 @@ const block = computed(() => {
         type="button"
         class="btn-blue"
         data-cy="complete-and-continue"
-        @click="circleStore.continueFromLearningContent()"
+        @click="circleStore.continueFromLearningContent(this.learningContent)"
       >
         Abschliessen und weiter
       </button>
diff --git a/client/src/components/circle/SelfEvaluation.vue b/client/src/components/circle/SelfEvaluation.vue
index ceeece63..dcb04db0 100644
--- a/client/src/components/circle/SelfEvaluation.vue
+++ b/client/src/components/circle/SelfEvaluation.vue
@@ -1,42 +1,39 @@
 <script setup lang="ts">
-import * as log from 'loglevel';
-import {computed, reactive} from 'vue';
-import {useCircleStore} from '@/stores/circle';
+import * as log from 'loglevel'
+import { computed, reactive } from 'vue'
+import { useCircleStore } from '@/stores/circle'
+import { LearningUnit } from '@/types'
 
-log.debug('LearningContent.vue setup');
+log.debug('LearningContent.vue setup')
 
-const circleStore = useCircleStore();
+const circleStore = useCircleStore()
 
 const state = reactive({
   questionIndex: 0,
-});
+})
 
-const questions = computed(() => circleStore.currentSelfEvaluation!.children);
-const currentQuestion = computed(() => questions.value[state.questionIndex]);
+const props = defineProps<{
+  learningUnit: LearningUnit
+}>()
+
+const questions = computed(() => props.learningUnit?.children)
+const currentQuestion = computed(() => questions.value[state.questionIndex])
 
 function handleContinue() {
-  log.debug('handleContinue');
+  log.debug('handleContinue')
   if (state.questionIndex + 1 < questions.value.length) {
-    log.debug('increment questionIndex', state.questionIndex);
-    state.questionIndex += 1;
+    log.debug('increment questionIndex', state.questionIndex)
+    state.questionIndex += 1
   } else {
-    log.debug('continue to next learning content');
-    circleStore.continueFromSelfEvaluation();
+    log.debug('continue to next learning content')
+    circleStore.continueFromSelfEvaluation()
   }
 }
-
 </script>
 
 <template>
-  <div>
-    <nav
-      class="
-        px-4 lg:px-8
-        py-4
-        flex justify-between items-center
-        border-b border-gray-500
-      "
-    >
+  <div v-if="learningUnit">
+    <nav class="px-4 lg:px-8 py-4 flex justify-between items-center border-b border-gray-500">
       <button
         type="button"
         class="btn-text inline-flex items-center px-3 py-2 font-normal"
@@ -46,24 +43,17 @@ function handleContinue() {
         <span class="hidden lg:inline">zurück zum Circle</span>
       </button>
 
-      <h1 class="text-xl hidden lg:block">{{ circleStore.currentSelfEvaluation.title }}</h1>
+      <h1 class="text-xl hidden lg:block">{{ learningUnit.title }}</h1>
 
-      <button
-        type="button"
-        class="btn-blue"
-        @click="handleContinue()"
-      >
-        Weiter
-      </button>
+      <button type="button" class="btn-blue" @click="handleContinue()">Weiter</button>
     </nav>
 
-
     <div class="mx-auto max-w-6xl px-4 lg:px-8 py-4">
-
       <div class="mt-2 lg:mt-8 text-gray-700">Schritt {{ state.questionIndex + 1 }} von {{ questions.length }}</div>
 
       <p class="text-xl mt-4">
-        Überprüfe, ob du in der Lernheinheit <span class="font-bold">"{{ circleStore.currentSelfEvaluation.title }}"</span> alles verstanden hast.<br>
+        Überprüfe, ob du in der Lernheinheit
+        <span class="font-bold">"{{ learningUnit.title }}"</span> alles verstanden hast.<br />
         Lies die folgende Aussage und bewerte sie:
       </p>
 
@@ -81,9 +71,7 @@ function handleContinue() {
             }"
           >
             <it-icon-smiley-happy class="w-16 h-16 mr-4"></it-icon-smiley-happy>
-            <span class="font-bold text-xl">
-            Ja, ich kann das.
-            </span>
+            <span class="font-bold text-xl"> Ja, ich kann das. </span>
           </button>
           <button
             @click="circleStore.markCompletion(currentQuestion, false)"
@@ -95,20 +83,14 @@ function handleContinue() {
             }"
           >
             <it-icon-smiley-thinking class="w-16 h-16 mr-4"></it-icon-smiley-thinking>
-            <span class="font-bold text-xl">
-              Das muss ich nochmals anschauen.
-            </span>
+            <span class="font-bold text-xl"> Das muss ich nochmals anschauen. </span>
           </button>
         </div>
 
         <div class="mt-6 lg:mt-12">Schau dein Fortschritt in deinem Kompetenzprofil: Kompetenzprofil öffnen</div>
       </div>
-
     </div>
-
   </div>
-
 </template>
 
-<style scoped>
-</style>
+<style scoped></style>
diff --git a/client/src/stores/circle.ts b/client/src/stores/circle.ts
index 5f2bdfe2..9fff1755 100644
--- a/client/src/stores/circle.ts
+++ b/client/src/stores/circle.ts
@@ -9,9 +9,6 @@ import { useLearningPathStore } from '@/stores/learningPath'
 
 export type CircleStoreState = {
   circle: Circle | undefined
-  currentLearningContent: LearningContent | undefined
-  currentSelfEvaluation: LearningUnit | undefined
-  page: 'INDEX' | 'OVERVIEW' | 'LEARNING_CONTENT' | 'SELF_EVALUATION'
 }
 
 export const useCircleStore = defineStore({
@@ -19,9 +16,6 @@ export const useCircleStore = defineStore({
   state: () => {
     return {
       circle: undefined,
-      currentLearningContent: undefined,
-      currentSelfEvaluation: undefined,
-      page: 'INDEX',
     } as CircleStoreState;
   },
   getters: {
@@ -45,32 +39,27 @@ export const useCircleStore = defineStore({
     },
     async loadLearningContent(learningPathSlug: string, circleSlug: string, learningContentSlug: string) {
       const circle = await this.loadCircle(learningPathSlug, circleSlug);
-      if (circle) {
-        this.currentLearningContent = circle.flatLearningContents.find((learningContent) => {
-          return learningContent.slug.endsWith(learningContentSlug);
-        });
-      }
+      const result = circle.flatLearningContents.find((learningContent) => {
+        return learningContent.slug.endsWith(learningContentSlug);
+      });
 
-      if (!this.currentLearningContent) {
+      if (!result) {
         throw `No learning content found with slug: ${learningContentSlug}`;
       }
 
-      return this.currentLearningContent;
+      return result
     },
     async loadSelfEvaluation(learningPathSlug: string, circleSlug: string, learningUnitSlug: string) {
       const circle = await this.loadCircle(learningPathSlug, circleSlug);
-      if (circle) {
-        this.currentSelfEvaluation = circle.flatLearningUnits.find((child) => {
-          return child.slug.endsWith(learningUnitSlug)
-        });
-      }
+      const learningUnit = circle.flatLearningUnits.find((child) => {
+        return child.slug.endsWith(learningUnitSlug)
+      });
 
-      if (!this.currentSelfEvaluation) {
+      if (!learningUnit) {
         throw `No self evaluation found with slug: ${learningUnitSlug}`;
       }
 
-      return this.currentLearningContent;
-
+      return learningUnit
     },
     async markCompletion(page: LearningContent | LearningUnitQuestion, flag = true) {
       try {
@@ -88,7 +77,6 @@ export const useCircleStore = defineStore({
       }
     },
     openLearningContent(learningContent: LearningContent) {
-      this.currentLearningContent = learningContent;
       const shortSlug = learningContent.slug.replace(`${this.circle?.slug}-lc-`, '');
       this.router.push({
         path: `${this.circle?.getUrl()}/${shortSlug}`,
@@ -100,7 +88,6 @@ export const useCircleStore = defineStore({
       });
     },
     openSelfEvaluation(learningUnit: LearningUnit) {
-      this.currentSelfEvaluation = learningUnit;
       const shortSlug = learningUnit.slug.replace(`${this.circle?.slug}-lu-`, '');
       this.router.push({
         path: `${this.circle?.getUrl()}/evaluate/${shortSlug}`,
@@ -122,12 +109,12 @@ export const useCircleStore = defineStore({
       }
       return undefined;
     },
-    continueFromLearningContent() {
-      if (this.currentLearningContent) {
-        this.markCompletion(this.currentLearningContent, true);
+    continueFromLearningContent(currentLearningContent: LearningContent) {
+      if (currentLearningContent) {
+        this.markCompletion(currentLearningContent, true);
 
-        const nextLearningContent = this.currentLearningContent.nextLearningContent;
-        const currentParent = this.currentLearningContent.parentLearningUnit;
+        const nextLearningContent = currentLearningContent.nextLearningContent;
+        const currentParent = currentLearningContent.parentLearningUnit;
         const nextParent = nextLearningContent?.parentLearningUnit;
 
         if (
@@ -138,12 +125,12 @@ export const useCircleStore = defineStore({
           // go to self evaluation
           // this.openSelfEvaluation(currentParent);
           this.closeLearningContent();
-        } else if (this.currentLearningContent.nextLearningContent) {
+        } else if (currentLearningContent.nextLearningContent) {
           if (
-            this.currentLearningContent.parentLearningSequence &&
-            this.currentLearningContent.parentLearningSequence.id === nextLearningContent?.parentLearningSequence?.id
+            currentLearningContent.parentLearningSequence &&
+            currentLearningContent.parentLearningSequence.id === nextLearningContent?.parentLearningSequence?.id
           ) {
-            this.openLearningContent(this.currentLearningContent.nextLearningContent);
+            this.openLearningContent(currentLearningContent.nextLearningContent);
           } else {
             this.closeLearningContent();
           }
diff --git a/client/src/views/LearningContentView.vue b/client/src/views/LearningContentView.vue
index df25a693..17af144b 100644
--- a/client/src/views/LearningContentView.vue
+++ b/client/src/views/LearningContentView.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import * as log from 'loglevel'
-import LearningContent from '@/components/circle/LearningContent.vue'
-
-import { onMounted } from 'vue'
+import { onMounted, reactive, watch } from 'vue'
 import { useCircleStore } from '@/stores/circle'
 import { useAppStore } from '@/stores/app'
+import LearningContent from '@/components/circle/LearningContent.vue'
+import { LearningContent as LearningContentType } from '@/types'
 
 log.debug('LearningContentView created')
 
@@ -14,27 +14,46 @@ const props = defineProps<{
   contentSlug: string
 }>()
 
+const state: { learningContent?: LearningContentType } = reactive({})
+
 const appStore = useAppStore()
 appStore.showMainNavigationBar = false
 
 const circleStore = useCircleStore()
 
-onMounted(async () => {
-  log.debug('LearningContentView mounted', props.learningPathSlug, props.circleSlug, props.contentSlug)
-
+const loadLearningContent = async () => {
   try {
-    await circleStore.loadLearningContent(props.learningPathSlug, props.circleSlug, props.contentSlug)
+    state.learningContent = await circleStore.loadLearningContent(
+      props.learningPathSlug,
+      props.circleSlug,
+      props.contentSlug
+    )
   } catch (error) {
     log.error(error)
   }
+}
+
+watch(
+  () => props.contentSlug,
+  async () => {
+    log.debug(
+      'LearningContentView props.contentSlug changed',
+      props.learningPathSlug,
+      props.circleSlug,
+      props.contentSlug
+    )
+    await loadLearningContent()
+  }
+)
+
+onMounted(async () => {
+  log.debug('LearningContentView mounted', props.learningPathSlug, props.circleSlug, props.contentSlug)
+  await loadLearningContent()
 })
 </script>
 
 <template>
-  <LearningContent
-    v-if="circleStore.currentLearningContent"
-    :key="circleStore.currentLearningContent.translation_key"
-  />
+  <LearningContent v-if="state.learningContent" :learning-content="state.learningContent" />
 </template>
 
 <style lang="postcss" scoped></style>
diff --git a/client/src/views/LearningUnitSelfEvaluationView.vue b/client/src/views/LearningUnitSelfEvaluationView.vue
index f7c084c5..dfcc08f6 100644
--- a/client/src/views/LearningUnitSelfEvaluationView.vue
+++ b/client/src/views/LearningUnitSelfEvaluationView.vue
@@ -3,9 +3,10 @@ import * as log from 'loglevel'
 
 import SelfEvaluation from '@/components/circle/SelfEvaluation.vue'
 
-import { onMounted } from 'vue'
-import { useCircleStore } from '@/stores/circle'
+import { onMounted, reactive } from 'vue'
 import { useAppStore } from '@/stores/app'
+import { useCircleStore } from '@/stores/circle'
+import type { LearningUnit } from '@/types'
 
 log.debug('LearningUnitSelfEvaluationView created')
 
@@ -20,11 +21,17 @@ appStore.showMainNavigationBar = false
 
 const circleStore = useCircleStore()
 
+const state: { learningUnit?: LearningUnit } = reactive({})
+
 onMounted(async () => {
   log.debug('LearningUnitSelfEvaluationView mounted', props.learningPathSlug, props.circleSlug, props.learningUnitSlug)
 
   try {
-    await circleStore.loadSelfEvaluation(props.learningPathSlug, props.circleSlug, props.learningUnitSlug)
+    state.learningUnit = await circleStore.loadSelfEvaluation(
+      props.learningPathSlug,
+      props.circleSlug,
+      props.learningUnitSlug
+    )
   } catch (error) {
     log.error(error)
   }
@@ -32,7 +39,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <SelfEvaluation v-if="circleStore.currentSelfEvaluation" :key="circleStore.currentSelfEvaluation.translation_key" />
+  <SelfEvaluation v-if="state.learningUnit" :learning-unit="state.learningUnit" />
 </template>
 
 <style lang="postcss" scoped></style>

From a57ef84ed8aa60c920f365d84f5f878670188442 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Fri, 9 Sep 2022 18:06:38 +0200
Subject: [PATCH 5/5] VBV-80: Umgesetzt Circle-Ansicht "weiter gehts"

---
 .../components/circle/LearningSequence.vue    | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/client/src/components/circle/LearningSequence.vue b/client/src/components/circle/LearningSequence.vue
index 91ccf59b..4f64590e 100644
--- a/client/src/components/circle/LearningSequence.vue
+++ b/client/src/components/circle/LearningSequence.vue
@@ -30,6 +30,26 @@ const allFinished = computed(() => {
   return false
 })
 
+const continueTranslationKey = computed(() => {
+  if (props.learningSequence && circleStore.circle) {
+    const childrenReversed = [...circleStore.circle.flatLearningContents].reverse()
+    const lastFinished = childrenReversed.find((learningContent) => {
+      return learningContent.completed
+    })
+
+    if (!lastFinished) {
+      // must be the first
+      return circleStore.circle.flatLearningContents[0].translation_key
+    }
+
+    if (lastFinished && lastFinished.nextLearningContent) {
+      return lastFinished.nextLearningContent.translation_key
+    }
+  }
+
+  return ''
+})
+
 const learningSequenceBorderClass = computed(() => {
   let result = []
   if (props.learningSequence && circleStore.circle) {
@@ -77,6 +97,14 @@ const learningSequenceBorderClass = computed(() => {
               >{{ learningContent.contents[0].type }}: {{ learningContent.title }}</span
             >
           </ItCheckbox>
+
+          <button
+            v-if="learningContent.translation_key === continueTranslationKey"
+            class="btn-blue -my-4"
+            @click.stop="circleStore.openLearningContent(learningContent)"
+          >
+            Weiter gehts
+          </button>
         </div>
 
         <div v-if="learningUnit.id" class="hover:cursor-pointer" @click="circleStore.openSelfEvaluation(learningUnit)">