From b050d1ede966eaaf3c8d4a088ce8012ff6549a46 Mon Sep 17 00:00:00 2001
From: vekaste <vekaste@stud.ntnu.no>
Date: Fri, 19 Apr 2024 16:57:47 +0200
Subject: [PATCH] feat: Adde greyscale to completed challenges
---
.../SavingGoalRoadmap.vue | 49 +++++++++++++------
1 file changed, 34 insertions(+), 15 deletions(-)
diff --git a/src/components/SavingGoalComponents/SavingGoalRoadmap.vue b/src/components/SavingGoalComponents/SavingGoalRoadmap.vue
index 74e8d2d..018c457 100644
--- a/src/components/SavingGoalComponents/SavingGoalRoadmap.vue
+++ b/src/components/SavingGoalComponents/SavingGoalRoadmap.vue
@@ -4,6 +4,7 @@ interface Step {
showPanel: boolean;
description: string;
percentFinished: number;
+ unFinished: boolean;
}
export default {
data() {
@@ -13,18 +14,28 @@ export default {
title: 'Spain trip' as string,
//This will be changed to info gathered from backend
steps: [
- { title: 'Challenge 1', showPanel: false, description: 'Save 50kr on coffee in 3 days', percentFinished: 22 },
- { title: 'Challenge 2', showPanel: false, description: 'Save 500kr on food in 7 days', percentFinished: 73 },
- { title: 'Challenge 3', showPanel: false, description: 'Save 350kr on clothes in 5 days', percentFinished: 50 },
- { title: 'Challenge 4', showPanel: false, description: 'Save 150kr on coffee in 4 days', percentFinished: 10 },
- { title: 'Challenge 5', showPanel: false, description: 'Save 50kr on coffee in 3 days', percentFinished: 90 }
+ { title: 'Challenge 1', showPanel: false, description: 'Save 50kr on coffee in 3 days', percentFinished: 22, unFinished: false },
+ { title: 'Challenge 2', showPanel: false, description: 'Save 500kr on food in 7 days', percentFinished: 73, unFinished: false },
+ { title: 'Challenge 3', showPanel: false, description: 'Save 350kr on clothes in 5 days', percentFinished: 50, unFinished: true },
+ { title: 'Challenge 4', showPanel: false, description: 'Save 150kr on coffee in 4 days', percentFinished: 10, unFinished: true },
+ { title: 'Challenge 5', showPanel: false, description: 'Save 50kr on coffee in 3 days', percentFinished: 90, unFinished: true }
]
,
bluePanelMaxHeight: 'auto' as string
};
},
mounted() {
- this.togglePanel(this.steps[2]);
+ setTimeout(() => {
+ this.togglePanel(this.steps[2]);
+ }, 500);
+
+ },
+ computed: {
+ computeImageFilter() {
+ return (step: Step) => {
+ return step.unFinished ? 'none' : 'grayscale(100%)';
+ };
+ }
},
methods: {
togglePanel(step: Step) {
@@ -40,12 +51,8 @@ export default {
if (step.showPanel) {
this.$nextTick(() => {
const panel = document.getElementById(`panel-${this.steps.indexOf(step)}`);
- console.log(panel);
if (panel) {
- setTimeout(() => {
- panel.scrollIntoView({ behavior: 'smooth', block: 'center' });
- console.log('I should have scrolled');
- }, 100); // Wait for 1 second before scrolling
+ panel.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
});
}
@@ -56,11 +63,24 @@ export default {
<template>
<div class="col-lg-8">
- <div class="SavingGoalTitle text-center">{{title}}</div>
+ <div class="SavingGoalTitle text-center">
+ {{title}}
+ <br>
+ <p class="d-inline-flex gap-1">
+ <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample" style="font-size: 25px;">
+ See more info
+ </button>
+ </p>
+ <div class="collapse" id="collapseExample">
+ <div class="card card-body bg-primary mx-auto" style="width: 80%;">
+ Total saved: 20kr
+ </div>
+ </div>
+ </div>
<ul class="timeline">
<li v-for="(step, index) in steps" :key="index" :class="{ 'timeline-inverted': index % 2 !== 0 }">
<div class="timeline-image z-1" @click="togglePanel(step)">
- <img class="circular-image" :src="step.showPanel ? altImage : image" alt="">
+ <img class="circular-image" :src="step.showPanel ? altImage : image" :style="{ filter: computeImageFilter(step) }" alt="">
</div>
<div class="timeline-panel z-3" :id="'panel-' + index" v-show="step.showPanel">
<div class="timeline-heading">
@@ -95,9 +115,8 @@ export default {
<style scoped>
.col-lg-8 {
- width: 63%;
+ width: 58%;
margin-bottom: 20px;
- max-height: 1000px;
}
.SavingGoalTitle {
--
GitLab