enhance(apps/frontend-manage): display multiplier and start / end inf…

…ormation on micro session overview
uzh-bf · Sep 20, 2023 · 21b5361 · 21b5361
1 parent 3ee278d
commit 21b5361
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 4 deletions.
diff --git a/apps/frontend-pwa/src/pages/micro/[id]/index.tsx b/apps/frontend-pwa/src/pages/micro/[id]/index.tsx
@@ -1,11 +1,18 @@
 import { useQuery } from '@apollo/client'
+import {
+  faClock,
+  faQuestionCircle,
+  faTimesCircle,
+} from '@fortawesome/free-regular-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import {
   GetMicroSessionDocument,
   SelfDocument,
 } from '@klicker-uzh/graphql/dist/ops'
 import Loader from '@klicker-uzh/shared-components/src/Loader'
 import { addApolloState, initializeApollo } from '@lib/apollo'
 import { Button, H3, Prose, UserNotification } from '@uzh-bf/design-system'
+import dayjs from 'dayjs'
 import { GetStaticPaths, GetStaticPropsContext } from 'next'
 import { useTranslations } from 'next-intl'
 import dynamic from 'next/dynamic'
@@ -98,6 +105,46 @@ function MicroSessionIntroduction({ id }: Props) {
         >
           <DynamicMarkdown content={data.microSession.description} />
         </Prose>
+
+        <div className="grid grid-cols-1 mb-4 md:mb-0 md:grid-cols-2 text-sm gap-y-1">
+          <div className="flex flex-row items-center gap-2">
+            <FontAwesomeIcon icon={faQuestionCircle} />
+            <div>
+              {t('pwa.learningElement.numOfQuestions', {
+                number: data.microSession.instances?.length,
+              })}
+            </div>
+          </div>
+          <div className="flex flex-row items-center gap-2">
+            <FontAwesomeIcon icon={faTimesCircle} />
+            <div>
+              {t('pwa.learningElement.multiplicatorPoints', {
+                mult: data.microSession.pointsMultiplier,
+              })}
+            </div>
+          </div>
+          <div className="flex flex-row items-center gap-2">
+            <FontAwesomeIcon icon={faClock} />
+            <div>
+              {t('pwa.microSession.availableFrom', {
+                date: dayjs(data.microSession.scheduledStartAt).format(
+                  'DD/MM/YYYY HH:mm'
+                ),
+              })}
+            </div>
+          </div>
+          <div className="flex flex-row items-center gap-2">
+            <FontAwesomeIcon icon={faClock} />
+            <div>
+              {t('pwa.microSession.availableUntil', {
+                date: dayjs(data.microSession.scheduledEndAt).format(
+                  'DD/MM/YYYY HH:mm'
+                ),
+              })}
+            </div>
+          </div>
+        </div>
+
         <Link href={`/micro/${data.microSession.id}/0`} legacyBehavior>
           <Button
             className={{

diff --git a/packages/graphql/src/graphql/ops/QGetMicroSession.graphql b/packages/graphql/src/graphql/ops/QGetMicroSession.graphql
@@ -5,6 +5,9 @@ query GetMicroSession($id: String!) {
     id
     displayName
     description
+    pointsMultiplier
+    scheduledStartAt
+    scheduledEndAt
     course {
       id
       displayName

diff --git a/packages/graphql/src/ops.ts b/packages/graphql/src/ops.ts
diff --git a/packages/graphql/src/public/client.json b/packages/graphql/src/public/client.json
@@ -84,7 +84,7 @@
    "GetLearningElement": "be8354ddae0cc19fab73f199daaa2e868ccac95b62fb6d30f054b8987f2a0a33",
    "GetLearningElements": "b52b80f8e157bbae0da3f345e6cabac0c5c3346ed07a51b1164cf7b924a8db42",
    "GetLoginToken": "491946fc1fcbd066ea481c564313f4e50b7cc98ea16ab16a7a2146d75ec8cf00",
-   "GetMicroSession": "52c07450b929e6754169c6cbe959f345f08b2a90da7f3f8a4f086ef1d8139c25",
+   "GetMicroSession": "891a0eebff405b27ff929db7c74f26dcd510b53c3b9f7cdff69ae8b0dd17bb86",
    "GetParticipantCourses": "bb82d68f51f9b46767e9f6a8c9c66ef2642b487c8f8a84473ce10f1b44eaf7fe",
    "GetParticipantDetails": "dcedf4660b759eab45cd5018c25a7485653a7c2af72061e6ad0a4b26403e16b2",
    "GetParticipantGroups": "ed00e7291d2ce97456fd3d3549fbb0ac68e86573da564d38c6798e9bfb439e4d",

diff --git a/packages/graphql/src/public/server.json b/packages/graphql/src/public/server.json
@@ -84,7 +84,7 @@
    "be8354ddae0cc19fab73f199daaa2e868ccac95b62fb6d30f054b8987f2a0a33": "fragment QuestionData on QuestionInstance {\n  questionData {\n    id\n    name\n    type\n    displayMode\n    content\n    explanation\n    pointsMultiplier\n    ... on ChoicesQuestionData {\n      options {\n        choices {\n          ix\n          correct\n          feedback\n          value\n          __typename\n        }\n        __typename\n      }\n      __typename\n    }\n    ... on NumericalQuestionData {\n      options {\n        accuracy\n        placeholder\n        unit\n        restrictions {\n          min\n          max\n          __typename\n        }\n        solutionRanges {\n          min\n          max\n          __typename\n        }\n        __typename\n      }\n      __typename\n    }\n    ... on FreeTextQuestionData {\n      options {\n        restrictions {\n          maxLength\n          __typename\n        }\n        solutions\n        __typename\n      }\n      __typename\n    }\n    __typename\n  }\n  __typename\n}\nquery GetLearningElement($id: String!) {\n  learningElement(id: $id) {\n    id\n    name\n    displayName\n    description\n    pointsMultiplier\n    resetTimeDays\n    orderType\n    previouslyAnswered\n    previousScore\n    previousPointsAwarded\n    totalTrials\n    stacksWithQuestions\n    numOfQuestions\n    course {\n      id\n      displayName\n      color\n      __typename\n    }\n    stacks {\n      id\n      displayName\n      description\n      order\n      elements {\n        id\n        order\n        mdContent\n        questionInstance {\n          id\n          pointsMultiplier\n          ...QuestionData\n          evaluation {\n            feedbacks {\n              ix\n              feedback\n              correct\n              value\n              __typename\n            }\n            choices\n            answers\n            score\n            pointsAwarded\n            percentile\n            newPointsFrom\n            xpAwarded\n            newXpFrom\n            __typename\n          }\n          __typename\n        }\n        __typename\n      }\n      __typename\n    }\n    __typename\n  }\n}",
    "b52b80f8e157bbae0da3f345e6cabac0c5c3346ed07a51b1164cf7b924a8db42": "query GetLearningElements {\n  learningElements {\n    id\n    displayName\n    courseId\n    __typename\n  }\n}",
    "491946fc1fcbd066ea481c564313f4e50b7cc98ea16ab16a7a2146d75ec8cf00": "query GetLoginToken {\n  getLoginToken {\n    loginToken\n    loginTokenExpiresAt\n    __typename\n  }\n}",
-   "52c07450b929e6754169c6cbe959f345f08b2a90da7f3f8a4f086ef1d8139c25": "fragment QuestionData on QuestionInstance {\n  questionData {\n    id\n    name\n    type\n    displayMode\n    content\n    explanation\n    pointsMultiplier\n    ... on ChoicesQuestionData {\n      options {\n        choices {\n          ix\n          correct\n          feedback\n          value\n          __typename\n        }\n        __typename\n      }\n      __typename\n    }\n    ... on NumericalQuestionData {\n      options {\n        accuracy\n        placeholder\n        unit\n        restrictions {\n          min\n          max\n          __typename\n        }\n        solutionRanges {\n          min\n          max\n          __typename\n        }\n        __typename\n      }\n      __typename\n    }\n    ... on FreeTextQuestionData {\n      options {\n        restrictions {\n          maxLength\n          __typename\n        }\n        solutions\n        __typename\n      }\n      __typename\n    }\n    __typename\n  }\n  __typename\n}\nquery GetMicroSession($id: String!) {\n  microSession(id: $id) {\n    id\n    displayName\n    description\n    course {\n      id\n      displayName\n      color\n      __typename\n    }\n    instances {\n      id\n      pointsMultiplier\n      ...QuestionData\n      evaluation {\n        feedbacks {\n          ix\n          feedback\n          correct\n          value\n          __typename\n        }\n        choices\n        answers\n        score\n        pointsAwarded\n        percentile\n        newPointsFrom\n        __typename\n      }\n      __typename\n    }\n    __typename\n  }\n}",
+   "891a0eebff405b27ff929db7c74f26dcd510b53c3b9f7cdff69ae8b0dd17bb86": "fragment QuestionData on QuestionInstance {\n  questionData {\n    id\n    name\n    type\n    displayMode\n    content\n    explanation\n    pointsMultiplier\n    ... on ChoicesQuestionData {\n      options {\n        choices {\n          ix\n          correct\n          feedback\n          value\n          __typename\n        }\n        __typename\n      }\n      __typename\n    }\n    ... on NumericalQuestionData {\n      options {\n        accuracy\n        placeholder\n        unit\n        restrictions {\n          min\n          max\n          __typename\n        }\n        solutionRanges {\n          min\n          max\n          __typename\n        }\n        __typename\n      }\n      __typename\n    }\n    ... on FreeTextQuestionData {\n      options {\n        restrictions {\n          maxLength\n          __typename\n        }\n        solutions\n        __typename\n      }\n      __typename\n    }\n    __typename\n  }\n  __typename\n}\nquery GetMicroSession($id: String!) {\n  microSession(id: $id) {\n    id\n    displayName\n    description\n    pointsMultiplier\n    scheduledStartAt\n    scheduledEndAt\n    course {\n      id\n      displayName\n      color\n      __typename\n    }\n    instances {\n      id\n      pointsMultiplier\n      ...QuestionData\n      evaluation {\n        feedbacks {\n          ix\n          feedback\n          correct\n          value\n          __typename\n        }\n        choices\n        answers\n        score\n        pointsAwarded\n        percentile\n        newPointsFrom\n        __typename\n      }\n      __typename\n    }\n    __typename\n  }\n}",
    "bb82d68f51f9b46767e9f6a8c9c66ef2642b487c8f8a84473ce10f1b44eaf7fe": "query GetParticipantCourses {\n  participantCourses {\n    id\n    isArchived\n    displayName\n    description\n    __typename\n  }\n}",
    "dcedf4660b759eab45cd5018c25a7485653a7c2af72061e6ad0a4b26403e16b2": "query GetParticipantDetails($id: String!) {\n  participantDetails(participantId: $id) {\n    id\n    username\n    avatar\n    avatarSettings\n    level\n    levelData {\n      id\n      avatar\n      name\n      index\n      requiredXp\n      nextLevel {\n        id\n        index\n        avatar\n        requiredXp\n        name\n        __typename\n      }\n      __typename\n    }\n    xp\n    achievements {\n      id\n      achievedAt\n      achievedCount\n      achievement {\n        id\n        name\n        description\n        icon\n        iconColor\n        __typename\n      }\n      __typename\n    }\n    __typename\n  }\n}",
    "ed00e7291d2ce97456fd3d3549fbb0ac68e86573da564d38c6798e9bfb439e4d": "query GetParticipantGroups($courseId: String!) {\n  participantGroups(courseId: $courseId) {\n    id\n    name\n    code\n    score\n    participants {\n      id\n      username\n      score\n      isSelf\n      rank\n      __typename\n    }\n    __typename\n  }\n}",

diff --git a/packages/i18n/messages/de.ts b/packages/i18n/messages/de.ts
@@ -444,6 +444,8 @@ Da die KlickerUZH-App noch nicht im iOS-App-Store verfügbar ist, folgen Sie die
         'Du hast das Microlearning <it>{name}</it> erfolgreich absolviert. Da du allerdings nicht Teil der Leaderboards in diesem Kurs bist, werden deine Punkte nicht gespeichert. Um in Zukunft Punkte zu sammeln, tritt dem Leaderboard auf der Kursübersicht bei.',
       missingParticipation:
         'Du hast das Microlearning <it>{name}</it> erfolgreich absolviert. Da du allerdings nicht Mitglied dieses Kurses bist, werden deine Punkte und Erfahrungspunkte nicht gespeichert. Um in Zukunft sowohl Punkte als auch XP zu sammeln, tritt jetzt dem Kurs bei.',
+      availableFrom: 'Verfügbar ab {date}',
+      availableUntil: 'Verfügbar bis {date}',
     },
     session: {
       noActiveQuestion: 'Keine Frage aktiv.',

diff --git a/packages/i18n/messages/en.ts b/packages/i18n/messages/en.ts
@@ -445,6 +445,8 @@ Since the KlickerUZH app is not yet available on the iOS App Store, follow these
         'You have successfully completed the microlearning <it>{name}</it>. Since you are not part of the leaderboards in this course, your points will not be saved. To collect points in the future, join the leaderboard through the course overview.',
       missingParticipation:
         'You have successfully completed the microlearning <it>{name}</it>. Since you are not a member of this course, your points and experience points will not be saved. To collect points and XP in the future, join the course now.',
+      availableFrom: 'Available from {date}',
+      availableUntil: 'Available until {date}',
     },
     session: {
       noActiveQuestion: 'No question active.',