vbv/client/src/pages/cockpit/CockpitIndexPage.vue

<script setup lang="ts">
import ItPersonRow from "@/components/ui/ItPersonRow.vue";
import ItProgress from "@/components/ui/ItProgress.vue";
import { useCockpitStore } from "@/stores/cockpit";
import { useCompetenceStore } from "@/stores/competence";
import * as log from "loglevel";
import { ref } from "vue";

log.debug("CockpitIndexPage created");

const cockpitStore = useCockpitStore();
const competenceStore = useCompetenceStore();

function userCountStatus(userId: number) {
  return competenceStore.calcStatusCount(
    competenceStore.flatPerformanceCriteria(userId)
  );
}

const data = {
  circles: ["KMU Teil 1", "KMU Teil 2", "3-Säuli-Prinzip"],
  transferProgress: {
    fail: 0,
    success: 3,
    unknown: 8,
  },
};

const selectedCircle = ref(1);

function setActiveClasses(index: number) {
  return selectedCircle.value === index
    ? ["bg-blue-900", "text-white"]
    : ["text-bg-900"];
}

function setActiveCircle(index: number) {
  selectedCircle.value = index;
}
</script>

<template>
  <div class="bg-gray-200">
    <div class="container-large">
      <div class="flex lg:flex-row items-center mb-9">
        <h1 class="heading-3">{{ $t("general.circles") }}:</h1>
        <ul class="flex flex-row leading-7 text-base font-bold ml-4">
          <li
            v-for="(circle, index) in data.circles"
            :key="circle"
            class="mr-4 last:mr-0"
          >
            <button
              class="border-2 border-blue-900 rounded-full px-4 mr-4 last:mr-0"
              :class="setActiveClasses(index)"
              @click="setActiveCircle(index)"
            >
              {{ circle }}
            </button>
          </li>
        </ul>
      </div>
      <!-- Status -->
      <div class="grid gap-4 grid-rows-3 lg:grid-rows-none lg:grid-cols-3 mb-4">
        <div class="px-6 py-5 bg-white">
          <h1
            class="bg-assignment bg-no-repeat pl-[68px] heading-3 bg-60 leading-[60px] mb-4"
          >
            {{ $t("general.transferTask", 2) }}
          </h1>
          <div class="mb-4">
            <ItProgress :status-count="data.transferProgress"></ItProgress>
          </div>
          <p>{{ $t("cockpit.tasksDone") }}</p>
        </div>
        <div class="px-6 py-5 bg-white">
          <h1
            class="bg-feedback bg-no-repeat pl-[68px] heading-3 bg-60 leading-[60px] mb-4"
          >
            {{ $t("general.feedback", 2) }}
          </h1>
          <div class="mb-4">
            <ItProgress :status-count="data.transferProgress"></ItProgress>
          </div>
          <p>{{ $t("cockpit.feedbacksDone") }}</p>
        </div>
        <div class="px-6 py-5 bg-white">
          <h1
            class="bg-test bg-no-repeat pl-[68px] heading-3 bg-60 leading-[60px] mb-4"
          >
            {{ $t("general.examResult", 2) }}
          </h1>
          <div class="mb-4">
            <ItProgress :status-count="data.transferProgress"></ItProgress>
          </div>
          <p>{{ $t("cockpit.examsDone") }}</p>
        </div>
      </div>
      <div>
        <!-- progress -->
        <div v-if="cockpitStore.courseSessionUsers?.length" class="bg-white p-6">
          <h1 class="heading-3 mb-5">{{ $t("cockpit.progress") }}</h1>
          <ul>
            <ItPersonRow
              v-for="csu in cockpitStore.courseSessionUsers"
              :key="csu.user_id + csu.session_title"
              :name="`${csu.first_name} ${csu.last_name}`"
              :avatar-url="csu.avatar_url"
            >
              <template #center>
                <div class="flex flex-row">
                  <div>KMU Teil 1</div>
                  <ul class="ml-4 flex flex-row items-center">
                    <li class="flex flex-row items-center mr-6">
                      <it-icon-smiley-thinking
                        class="w-8 h-8 mr-2 inline-block"
                      ></it-icon-smiley-thinking>
                      <p class="text-bold inline-block">
                        {{ userCountStatus(csu.user_id).fail }}
                      </p>
                    </li>
                    <li class="flex flex-row items-center mr-6">
                      <it-icon-smiley-happy
                        class="w-8 h-8 mr-2 inline-block"
                      ></it-icon-smiley-happy>
                      <p class="text-bold inline-block">
                        {{ userCountStatus(csu.user_id).success }}
                      </p>
                    </li>
                    <li class="flex flex-row items-center">
                      <it-icon-smiley-neutral
                        class="w-8 h-8 mr-2 inline-block"
                      ></it-icon-smiley-neutral>
                      <p class="text-bold inline-block">
                        {{ userCountStatus(csu.user_id).unknown }}
                      </p>
                    </li>
                  </ul>
                </div>
              </template>
              <template #link>
                {{ $t("cockpit.profileLink") }}
              </template>
            </ItPersonRow>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped></style>