From 43c311145e8b9dd18ca4c10d8019512ae567bf6d Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Thu, 25 Aug 2022 15:11:46 +0200
Subject: [PATCH] Add basic styles to Handlungsfelder

---
 .../components/mediacenter/OverviewCard.vue   |  2 +-
 client/src/router/index.ts                    |  6 +-
 client/src/views/HandlungsfelderOverview.vue  | 91 +++++++++++++++++++
 client/src/views/MediaMainView.vue            |  4 +-
 4 files changed, 99 insertions(+), 4 deletions(-)
 create mode 100644 client/src/views/HandlungsfelderOverview.vue

diff --git a/client/src/components/mediacenter/OverviewCard.vue b/client/src/components/mediacenter/OverviewCard.vue
index 67fb303d..48bf5b81 100644
--- a/client/src/components/mediacenter/OverviewCard.vue
+++ b/client/src/components/mediacenter/OverviewCard.vue
@@ -21,7 +21,7 @@ const props = withDefaults(defineProps<Props>(), {
       <h3 class="mb-4">{{title}}</h3>
       <p class="mb-4">{{description}}</p>
       <router-link
-        to="/mediacenter/overview"
+        :to="link"
         class="inline-flex items-center font-normal"
       >
         <span class="inline">{{call2Action}}</span>
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index 204beaf5..8f7675b7 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -32,7 +32,11 @@ const router = createRouter({
         {
           path: 'overview',
           component: () => import('@/views/MediaMainView.vue')
-        }
+        },
+        {
+          path: 'handlungsfelder',
+          component: () => import('@/views/HandlungsfelderOverview.vue')
+        },
       ]
     },
     {
diff --git a/client/src/views/HandlungsfelderOverview.vue b/client/src/views/HandlungsfelderOverview.vue
new file mode 100644
index 00000000..9737d05f
--- /dev/null
+++ b/client/src/views/HandlungsfelderOverview.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import * as log from 'loglevel';
+import OverviewCard from '@/components/mediacenter/OverviewCard.vue';
+
+log.debug('HandlungsfelderOverview created');
+
+const fields = [
+  {
+    name: 'Fahrzeug',
+    icon: 'icon-hf-fahrzeug'
+  },
+  {
+    name: 'Reisen',
+    icon: 'icon-hf-reisen'
+  },
+  {
+    name: 'Einkommenssicherung',
+    icon: 'icon-hf-einkommenssicherung'
+  },
+  {
+    name: 'Gesundheit',
+    icon: 'icon-hf-fahrzeug'
+  },
+  {
+    name: 'Haushalt',
+    icon: 'icon-hf-reisen'
+  },
+  {
+    name: 'Sparen',
+    icon: 'icon-hf-einkommenssicherung'
+  },
+  {
+    name: 'Pensionierung',
+    icon: 'icon-hf-fahrzeug'
+  },
+  {
+    name: 'KMU',
+    icon: 'icon-hf-reisen'
+  },
+  {
+    name: 'Wohneigentum',
+    icon: 'icon-hf-einkommenssicherung'
+  },
+  {
+    name: 'Rechtsstreitigkeiten',
+    icon: 'icon-hf-fahrzeug'
+  },
+  {
+    name: 'Erben / Vererben',
+    icon: 'icon-hf-reisen'
+  },
+  {
+    name: 'Selbstständigkeit',
+    icon: 'icon-hf-einkommenssicherung'
+  },
+]
+
+</script>
+
+<template>
+  <div class="mx-auto max-w-5xl">
+    <div class="flex items-center justify-between mb-10">
+      <h1>Handlungsfelder</h1>
+      <div>Dropdown</div>
+    </div>
+    <div>
+      <ul class="grid gap-5 grid-cols-4">
+        <li
+          class="bg-white p-4 w-58"
+          v-for="field in fields"
+          :key="field.name"
+        >
+          <img
+            class="m-auto"
+            :src="`/static/icons/${field.icon}.svg`"/>
+          <h3 class="text-base text-center">{{field.name}}</h3>
+        </li>
+      </ul>
+    </div>
+
+  </div>
+</template>
+
+<style scoped>
+.it-icon-hf {
+  color: blue
+}
+.it-icon-hf > * {
+  @apply m-auto;
+}
+</style>
diff --git a/client/src/views/MediaMainView.vue b/client/src/views/MediaMainView.vue
index 705a158c..205423df 100644
--- a/client/src/views/MediaMainView.vue
+++ b/client/src/views/MediaMainView.vue
@@ -15,7 +15,7 @@ log.debug('MediaMainView created');
     <OverviewCard
       title="Handlungsfelder"
       call2-action="Anschauen"
-      link="/mediacenter/some"
+      link="/mediacenter/handlungsfelder"
       description="Finde alle Ressourcen der Handlungsfelder wie Lernmedien, Links und andere nützliche Informationen."
       icon="handlungsfelder-overview"
       class="mb-6">
@@ -23,7 +23,7 @@ log.debug('MediaMainView created');
     <OverviewCard
       title="Lernmedien"
       call2-action="Anschauen"
-      link="/mediacenter/some"
+      link="/mediacenter/lernmedien"
       description="Finde eine vollständige Liste der Bücher und anderen Medien, auf die im Kurs verwiesen wird."
       icon="lernmedien-overview"
       class="mb-6">