From 21fa1bcff12eec92871d838f9c78a0063bc18be6 Mon Sep 17 00:00:00 2001
From: jensmjahle <126790845+jensmjahle@users.noreply.github.com>
Date: Wed, 24 Apr 2024 13:21:18 +0200
Subject: [PATCH] Save chosen milestone to store and route to chosen milestone
---
.../milestone/ActiveMilestoneDisplay.vue | 8 +++++++-
.../milestone/CompletedMilestoneDisplay.vue | 15 ++++++++++-----
src/views/HomePage/MilestoneView.vue | 4 ++++
3 files changed, 21 insertions(+), 6 deletions(-)
diff --git a/src/components/milestone/ActiveMilestoneDisplay.vue b/src/components/milestone/ActiveMilestoneDisplay.vue
index 6a3f93e..2c69846 100644
--- a/src/components/milestone/ActiveMilestoneDisplay.vue
+++ b/src/components/milestone/ActiveMilestoneDisplay.vue
@@ -1,5 +1,7 @@
<script setup lang="ts">
import ProgressBar from "@/components/ProgressBar.vue";
+import {useMilestoneStore} from "@/stores/currentMilestone";
+import router from "@/router";
const props = defineProps({
id: Number,
@@ -14,8 +16,11 @@ const props = defineProps({
const imageUrl = "src/assets/pig.png"
const openMilestone = () => {
- console.log("Open dialog")
+ useMilestoneStore().setMilestoneId(props.id)
+ router.push("/path")
}
+
+
</script>
<template>
@@ -52,5 +57,6 @@ const openMilestone = () => {
flex-direction: column;
place-content: space-between;
gap: 2.5%;
+ transition: 0.3s;
}
</style>
\ No newline at end of file
diff --git a/src/components/milestone/CompletedMilestoneDisplay.vue b/src/components/milestone/CompletedMilestoneDisplay.vue
index bb102fc..d4c91bc 100644
--- a/src/components/milestone/CompletedMilestoneDisplay.vue
+++ b/src/components/milestone/CompletedMilestoneDisplay.vue
@@ -1,4 +1,6 @@
<script setup lang="ts">
+import {ref} from "vue";
+
const props = defineProps({
id: Number,
title: String,
@@ -11,22 +13,25 @@ const props = defineProps({
});
const imageUrl = "src/assets/pig.png"
-function openMilestone(){
- console.log("Open milestone")
-}
+const displayDescription = ref(false)
+
</script>
<template>
<div class="completed-milestone-display"
- @click="openMilestone"
+ @mouseover="displayDescription = true"
+ @mouseleave="displayDescription = false"
:style="{
backgroundImage: image ? 'url(' + image + ')' : 'url(' + imageUrl + ')'
}">
<h2 class="title">{{props.title}}</h2>
- <div class="info">
+ <div class="info" v-if="!displayDescription">
<h4 v-if="currentSum">Du sparte {{props.currentSum}}kr</h4>
<h4 v-if="deadline">{{props.deadline.getDate()}}/{{props.deadline.getMonth()}}-{{props.deadline.getFullYear()}}</h4>
</div>
+ <div class="info" v-if="displayDescription">
+ <h4>{{props.description}}</h4>
+ </div>
</div>
diff --git a/src/views/HomePage/MilestoneView.vue b/src/views/HomePage/MilestoneView.vue
index 68b8335..1be21e3 100644
--- a/src/views/HomePage/MilestoneView.vue
+++ b/src/views/HomePage/MilestoneView.vue
@@ -220,6 +220,7 @@ flex-direction: column;
.active-milestone:hover{
transform: scale(1.02);
+ transition: 0.3s;
}
.right{
@@ -259,6 +260,7 @@ flex-direction: column;
.completed-milestone:hover{
transform: scale(1.05);
+ transition: 0.3s;
}
.pagination {
@@ -278,6 +280,7 @@ flex-direction: column;
}
.pagination button:hover {
+ transition: 0.3s;
transform: scale(1.05);
}
@@ -303,6 +306,7 @@ flex-direction: column;
}
.page-numbers button:hover {
+ transition: 0.3s;
transform: scale(1.05);
}
--
GitLab