Add total circle duration to circle view

client/src/views/CircleView.vue

@@ -5,10 +5,11 @@ import CircleOverview from '@/components/circle/CircleOverview.vue'
 import CircleDiagram from '@/components/circle/CircleDiagram.vue'
 import LearningContent from '@/components/circle/LearningContent.vue'
 
-import { onMounted } from 'vue'
+import { computed, onMounted } from 'vue'
 import { useCircleStore } from '@/stores/circle'
 import { useAppStore } from '@/stores/app'
 import { useRoute } from 'vue-router'
+import _ from 'lodash'
 
 const route = useRoute()
 
@@ -24,6 +25,15 @@ appStore.showMainNavigationBar = true
 
 const circleStore = useCircleStore()
 
+const duration = computed(() => {
+  if (circleStore.circle) {
+    const minutes = _.sumBy(circleStore.circle.learningSequences, 'minutes')
+    return `${minutes} Minuten`
+  }
+
+  return ''
+})
+
 onMounted(async () => {
   log.debug('CircleView.vue mounted', props.learningPathSlug, props.circleSlug)
 
@@ -75,6 +85,8 @@ onMounted(async () => {
                   {{ circleStore.circle?.title }}
                 </h1>
 
+                <div class="mt-2">Dauer: {{ duration }}</div>
+
                 <div class="w-full mt-8">
                   <CircleDiagram></CircleDiagram>
                 </div>