diff --git a/package-lock.json b/package-lock.json
index 531c3213c1bbce25c61ab9721471562475c8d51b..0471796d560b09ef5e70bd1f3d72d97eb00a44ca 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,9 +11,10 @@
"@vuepic/vue-datepicker": "^8.5.0",
"chart.js": "^4.4.2",
"js-confetti": "^0.12.0",
+ "mitt": "^3.0.1",
"pinia": "^2.1.7",
"pinia-plugin-persistedstate": "^3.2.1",
- "vue": "^3.4.21",
+ "vue": "^3.4.25",
"vue-chartjs": "^5.3.1",
"vue-router": "^4.3.0"
},
@@ -2138,49 +2139,49 @@
}
},
"node_modules/@vue/compiler-core": {
- "version": "3.4.23",
- "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.23.tgz",
- "integrity": "sha512-HAFmuVEwNqNdmk+w4VCQ2pkLk1Vw4XYiiyxEp3z/xvl14aLTUBw2OfVH3vBcx+FtGsynQLkkhK410Nah1N2yyQ==",
+ "version": "3.4.25",
+ "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.25.tgz",
+ "integrity": "sha512-Y2pLLopaElgWnMNolgG8w3C5nNUVev80L7hdQ5iIKPtMJvhVpG0zhnBG/g3UajJmZdvW0fktyZTotEHD1Srhbg==",
"dependencies": {
- "@babel/parser": "^7.24.1",
- "@vue/shared": "3.4.23",
+ "@babel/parser": "^7.24.4",
+ "@vue/shared": "3.4.25",
"entities": "^4.5.0",
"estree-walker": "^2.0.2",
"source-map-js": "^1.2.0"
}
},
"node_modules/@vue/compiler-dom": {
- "version": "3.4.23",
- "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.23.tgz",
- "integrity": "sha512-t0b9WSTnCRrzsBGrDd1LNR5HGzYTr7LX3z6nNBG+KGvZLqrT0mY6NsMzOqlVMBKKXKVuusbbB5aOOFgTY+senw==",
+ "version": "3.4.25",
+ "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.25.tgz",
+ "integrity": "sha512-Ugz5DusW57+HjllAugLci19NsDK+VyjGvmbB2TXaTcSlQxwL++2PETHx/+Qv6qFwNLzSt7HKepPe4DcTE3pBWg==",
"dependencies": {
- "@vue/compiler-core": "3.4.23",
- "@vue/shared": "3.4.23"
+ "@vue/compiler-core": "3.4.25",
+ "@vue/shared": "3.4.25"
}
},
"node_modules/@vue/compiler-sfc": {
- "version": "3.4.23",
- "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.23.tgz",
- "integrity": "sha512-fSDTKTfzaRX1kNAUiaj8JB4AokikzStWgHooMhaxyjZerw624L+IAP/fvI4ZwMpwIh8f08PVzEnu4rg8/Npssw==",
+ "version": "3.4.25",
+ "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.25.tgz",
+ "integrity": "sha512-m7rryuqzIoQpOBZ18wKyq05IwL6qEpZxFZfRxlNYuIPDqywrXQxgUwLXIvoU72gs6cRdY6wHD0WVZIFE4OEaAQ==",
"dependencies": {
- "@babel/parser": "^7.24.1",
- "@vue/compiler-core": "3.4.23",
- "@vue/compiler-dom": "3.4.23",
- "@vue/compiler-ssr": "3.4.23",
- "@vue/shared": "3.4.23",
+ "@babel/parser": "^7.24.4",
+ "@vue/compiler-core": "3.4.25",
+ "@vue/compiler-dom": "3.4.25",
+ "@vue/compiler-ssr": "3.4.25",
+ "@vue/shared": "3.4.25",
"estree-walker": "^2.0.2",
- "magic-string": "^0.30.8",
+ "magic-string": "^0.30.10",
"postcss": "^8.4.38",
"source-map-js": "^1.2.0"
}
},
"node_modules/@vue/compiler-ssr": {
- "version": "3.4.23",
- "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.23.tgz",
- "integrity": "sha512-hb6Uj2cYs+tfqz71Wj6h3E5t6OKvb4MVcM2Nl5i/z1nv1gjEhw+zYaNOV+Xwn+SSN/VZM0DgANw5TuJfxfezPg==",
+ "version": "3.4.25",
+ "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.25.tgz",
+ "integrity": "sha512-H2ohvM/Pf6LelGxDBnfbbXFPyM4NE3hrw0e/EpwuSiYu8c819wx+SVGdJ65p/sFrYDd6OnSDxN1MB2mN07hRSQ==",
"dependencies": {
- "@vue/compiler-dom": "3.4.23",
- "@vue/shared": "3.4.23"
+ "@vue/compiler-dom": "3.4.25",
+ "@vue/shared": "3.4.25"
}
},
"node_modules/@vue/devtools-api": {
@@ -2250,48 +2251,48 @@
}
},
"node_modules/@vue/reactivity": {
- "version": "3.4.23",
- "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.23.tgz",
- "integrity": "sha512-GlXR9PL+23fQ3IqnbSQ8OQKLodjqCyoCrmdLKZk3BP7jN6prWheAfU7a3mrltewTkoBm+N7qMEb372VHIkQRMQ==",
+ "version": "3.4.25",
+ "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.25.tgz",
+ "integrity": "sha512-mKbEtKr1iTxZkAG3vm3BtKHAOhuI4zzsVcN0epDldU/THsrvfXRKzq+lZnjczZGnTdh3ojd86/WrP+u9M51pWQ==",
"dependencies": {
- "@vue/shared": "3.4.23"
+ "@vue/shared": "3.4.25"
}
},
"node_modules/@vue/runtime-core": {
- "version": "3.4.23",
- "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.23.tgz",
- "integrity": "sha512-FeQ9MZEXoFzFkFiw9MQQ/FWs3srvrP+SjDKSeRIiQHIhtkzoj0X4rWQlRNHbGuSwLra6pMyjAttwixNMjc/xLw==",
+ "version": "3.4.25",
+ "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.25.tgz",
+ "integrity": "sha512-3qhsTqbEh8BMH3pXf009epCI5E7bKu28fJLi9O6W+ZGt/6xgSfMuGPqa5HRbUxLoehTNp5uWvzCr60KuiRIL0Q==",
"dependencies": {
- "@vue/reactivity": "3.4.23",
- "@vue/shared": "3.4.23"
+ "@vue/reactivity": "3.4.25",
+ "@vue/shared": "3.4.25"
}
},
"node_modules/@vue/runtime-dom": {
- "version": "3.4.23",
- "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.23.tgz",
- "integrity": "sha512-RXJFwwykZWBkMiTPSLEWU3kgVLNAfActBfWFlZd0y79FTUxexogd0PLG4HH2LfOktjRxV47Nulygh0JFXe5f9A==",
+ "version": "3.4.25",
+ "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.25.tgz",
+ "integrity": "sha512-ode0sj77kuwXwSc+2Yhk8JMHZh1sZp9F/51wdBiz3KGaWltbKtdihlJFhQG4H6AY+A06zzeMLkq6qu8uDSsaoA==",
"dependencies": {
- "@vue/runtime-core": "3.4.23",
- "@vue/shared": "3.4.23",
+ "@vue/runtime-core": "3.4.25",
+ "@vue/shared": "3.4.25",
"csstype": "^3.1.3"
}
},
"node_modules/@vue/server-renderer": {
- "version": "3.4.23",
- "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.23.tgz",
- "integrity": "sha512-LDwGHtnIzvKFNS8dPJ1SSU5Gvm36p2ck8wCZc52fc3k/IfjKcwCyrWEf0Yag/2wTFUBXrqizfhK9c/mC367dXQ==",
+ "version": "3.4.25",
+ "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.25.tgz",
+ "integrity": "sha512-8VTwq0Zcu3K4dWV0jOwIVINESE/gha3ifYCOKEhxOj6MEl5K5y8J8clQncTcDhKF+9U765nRw4UdUEXvrGhyVQ==",
"dependencies": {
- "@vue/compiler-ssr": "3.4.23",
- "@vue/shared": "3.4.23"
+ "@vue/compiler-ssr": "3.4.25",
+ "@vue/shared": "3.4.25"
},
"peerDependencies": {
- "vue": "3.4.23"
+ "vue": "3.4.25"
}
},
"node_modules/@vue/shared": {
- "version": "3.4.23",
- "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.23.tgz",
- "integrity": "sha512-wBQ0gvf+SMwsCQOyusNw/GoXPV47WGd1xB5A1Pgzy0sQ3Bi5r5xm3n+92y3gCnB3MWqnRDdvfkRGxhKtbBRNgg=="
+ "version": "3.4.25",
+ "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.25.tgz",
+ "integrity": "sha512-k0yappJ77g2+KNrIaF0FFnzwLvUBLUYr8VOwz+/6vLsmItFp51AcxLL7Ey3iPd7BIRyWPOcqUjMnm7OkahXllA=="
},
"node_modules/@vue/test-utils": {
"version": "2.4.5",
@@ -5546,14 +5547,11 @@
}
},
"node_modules/magic-string": {
- "version": "0.30.9",
- "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.9.tgz",
- "integrity": "sha512-S1+hd+dIrC8EZqKyT9DstTH/0Z+f76kmmvZnkfQVmOpDEF9iVgdYif3Q/pIWHmCoo59bQVGW0kVL3e2nl+9+Sw==",
+ "version": "0.30.10",
+ "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz",
+ "integrity": "sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==",
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.4.15"
- },
- "engines": {
- "node": ">=12"
}
},
"node_modules/map-stream": {
@@ -5662,6 +5660,11 @@
"node": ">=16 || 14 >=14.17"
}
},
+ "node_modules/mitt": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+ "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
+ },
"node_modules/mlly": {
"version": "1.6.1",
"resolved": "https://registry.npmjs.org/mlly/-/mlly-1.6.1.tgz",
@@ -7584,15 +7587,15 @@
}
},
"node_modules/vue": {
- "version": "3.4.23",
- "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.23.tgz",
- "integrity": "sha512-X1y6yyGJ28LMUBJ0k/qIeKHstGd+BlWQEOT40x3auJFTmpIhpbKLgN7EFsqalnJXq1Km5ybDEsp6BhuWKciUDg==",
- "dependencies": {
- "@vue/compiler-dom": "3.4.23",
- "@vue/compiler-sfc": "3.4.23",
- "@vue/runtime-dom": "3.4.23",
- "@vue/server-renderer": "3.4.23",
- "@vue/shared": "3.4.23"
+ "version": "3.4.25",
+ "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.25.tgz",
+ "integrity": "sha512-HWyDqoBHMgav/OKiYA2ZQg+kjfMgLt/T0vg4cbIF7JbXAjDexRf5JRg+PWAfrAkSmTd2I8aPSXtooBFWHB98cg==",
+ "dependencies": {
+ "@vue/compiler-dom": "3.4.25",
+ "@vue/compiler-sfc": "3.4.25",
+ "@vue/runtime-dom": "3.4.25",
+ "@vue/server-renderer": "3.4.25",
+ "@vue/shared": "3.4.25"
},
"peerDependencies": {
"typescript": "*"
diff --git a/package.json b/package.json
index 6f66083185f9528e0545e2de9ee07b78dbb7a1b0..87df8458295a0207175dc6270ff31ae36a82fc6f 100644
--- a/package.json
+++ b/package.json
@@ -19,9 +19,10 @@
"@vuepic/vue-datepicker": "^8.5.0",
"chart.js": "^4.4.2",
"js-confetti": "^0.12.0",
+ "mitt": "^3.0.1",
"pinia": "^2.1.7",
"pinia-plugin-persistedstate": "^3.2.1",
- "vue": "^3.4.21",
+ "vue": "^3.4.25",
"vue-chartjs": "^5.3.1",
"vue-router": "^4.3.0"
},
diff --git a/src/assets/png/sad-pig.png b/src/assets/png/sad-pig.png
new file mode 100644
index 0000000000000000000000000000000000000000..a0e9c5afa490e8f078cf1ee5802317a956853903
Binary files /dev/null and b/src/assets/png/sad-pig.png differ
diff --git a/src/components/MilestonePath/DirectTransfer.vue b/src/components/MilestonePath/DirectTransfer.vue
index 619ec9abb233bf0ace6065088e970522279ad02e..d32e2e4f449e7db848493e1c3bc4aa16dd471541 100644
--- a/src/components/MilestonePath/DirectTransfer.vue
+++ b/src/components/MilestonePath/DirectTransfer.vue
@@ -32,16 +32,16 @@ function transfer() {
#Title{
font-size: 1.5em;
- margin-left: 5%;
font-weight: bold;
}
#Transfer{
display: flex;
- justify-content: space-evenly;
+ justify-content: space-between;
}
#TransferInput{
+ width: 70%;
font-size: 1.5em;
border-radius: 20px;
border-color: var(--color-border);
diff --git a/src/components/MilestonePath/MilestoneDescription.vue b/src/components/MilestonePath/MilestoneDescription.vue
index dd4b7d0a548ae10eecb048d5cb52fe4d363b5531..fb23af2904688a778d206faaedaecbf84015c3e7 100644
--- a/src/components/MilestonePath/MilestoneDescription.vue
+++ b/src/components/MilestonePath/MilestoneDescription.vue
@@ -36,7 +36,6 @@ const props = defineProps({
#Title, #Description{
font-size: 1.5em;
- margin-left: 5%;
}
#Title{
diff --git a/src/components/MilestonePath/MilestoneProgress.vue b/src/components/MilestonePath/MilestoneProgress.vue
index 33ed1b441952dab3fda123d54412b888406ccea9..429ecfa6521a86efb900852417c67f83548182eb 100644
--- a/src/components/MilestonePath/MilestoneProgress.vue
+++ b/src/components/MilestonePath/MilestoneProgress.vue
@@ -24,7 +24,6 @@ const props = defineProps({
#TotalSavings, #Savings{
font-size: 1.5em;
- margin-left: 5%;
}
#TotalSavings{
@@ -36,8 +35,7 @@ const props = defineProps({
border-radius: 20px;
width: 100%;
height: 30%;
- padding-left: 1%;
- padding-right: 1%;
+ padding: 2%;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
}
diff --git a/src/components/challenge/ActiveChallengeDisplay.vue b/src/components/challenge/ActiveChallengeDisplay.vue
index f1fb206228b5f021f77978f684b13974d2dfeb97..3354bb1f67b6aedc8a0039fbc099386ad3fdc24c 100644
--- a/src/components/challenge/ActiveChallengeDisplay.vue
+++ b/src/components/challenge/ActiveChallengeDisplay.vue
@@ -1,6 +1,6 @@
<script setup lang="ts">
-const emits = defineEmits(['challengeCompleted']);
+const emits = defineEmits(['challengeCompleted', 'challengeDeleted']);
interface Challenge{
'challengeId':number,
@@ -16,6 +16,10 @@ const props = defineProps({
required: true
}
});
+const expirationDate = () => {
+ return new Date(props.challenge?.expirationDate).
+ toLocaleDateString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric' });
+}
const completeTheChallenge = () => {
if(props.challenge.challengeId){
@@ -23,15 +27,27 @@ const completeTheChallenge = () => {
}
}
+const deleteTheChallenge = () => {
+ if(props.challenge.challengeId){
+ emits('challengeDeleted', props.challenge.challengeId)
+ }
+}
</script>
<template>
<div class="potential-challenge-display">
- <h3 class="title">{{ props.challenge.challengeTitle }}</h3>
- <h4 class="description">{{ props.challenge.challengeDescription }}</h4>
- <div class="on-object-hover">
- <h4>Utløpsdato: {{props.challenge.expirationDate}} |</h4>
- <h4 class="sum"> Sparesum: {{props.challenge.goalSum}} kr,-</h4>
+ <img
+ class="close-img"
+ src="/src/components/icons/navigation/close.svg"
+ alt="delete-button"
+ @click="deleteTheChallenge()">
+ <div class="content">
+ <h3 class="title">{{ props.challenge.challengeTitle }}</h3>
+ <h4 class="description">{{ props.challenge.challengeDescription }}</h4>
+ <div class="extra-info">
+ <h4 class="expiration-date">Utløpsdato: {{expirationDate()}} |</h4>
+ <h4 class="sum"> Sparesum: {{props.challenge.goalSum}} kr,-</h4>
+ </div>
</div>
<div class="button-container">
<button class="complete-button" @click="completeTheChallenge()">
@@ -46,35 +62,74 @@ const completeTheChallenge = () => {
.potential-challenge-display{
display: flex;
flex-direction: column;
- padding: 1.5%;
+ place-items: end;
place-content: space-between;
+ padding: 1.5%;
+ gap: 1.0%;
+}
+
+.content{
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ height: 65%;
+}
+.close-img{
+ width: 5.0%;
+}
+
+.close-img:hover{
+ transform: scale(1.2);
}
.title{
text-align: center;
+
color: var(--color-text-black);
}
.description{
text-align: center;
color: var(--color-text-black);
+ overflow: hidden;
}
-.on-object-hover{
+.extra-info{
display: none;
}
+.expiration-date{
+ color: var(--color-text-black);
+}
+
+.sum{
+ color: var(--color-text-black);
+}
.potential-challenge-display:hover{
- .on-object-hover{
+ .extra-info{
display: flex;
flex-direction: row;
place-content: center;
gap: 1.0%;
}
+
+ .expiration-date{
+ font-weight: bold;
+ }
+
+ .sum{
+ font-weight: bold;
+ }
+
+ .content{
+ overflow: scroll;
+ }
+
.description{
- display: none;
+ overflow: visible;
}
+
}
.button-container{
@@ -105,4 +160,30 @@ const completeTheChallenge = () => {
font-weight: bold;
}
+@media only screen and (max-width: 1000px){
+ .extra-info{
+ display: flex;
+ flex-direction: row;
+ place-content: center;
+ gap: 1.0%;
+ }
+ .potential-challenge-display:hover{
+ .description{
+ text-align: center;
+ color: var(--color-text-black);
+ }
+ }
+
+ .potential-challenge-display:hover{
+ .extra-info{
+ display: flex;
+ flex-direction: row;
+ place-content: center;
+ gap: 1.0%;
+ }
+ }
+}
+
+
+
</style>
\ No newline at end of file
diff --git a/src/components/challenge/ActiveChallengesList.vue b/src/components/challenge/ActiveChallengesList.vue
new file mode 100644
index 0000000000000000000000000000000000000000..38c8c0fd19e511eb0d3ff3a77cbe34e24dd01446
--- /dev/null
+++ b/src/components/challenge/ActiveChallengesList.vue
@@ -0,0 +1,263 @@
+<script setup lang="ts">
+
+import ActiveChallengeDisplay from '@/components/challenge/ActiveChallengeDisplay.vue'
+import { onMounted, ref, watch } from 'vue'
+import { getActiveChallenges } from '@/utils/challengeutils'
+import { useTokenStore } from '@/stores/token'
+import JSConfetti from 'js-confetti'
+import CompleteChallengePopUp from '@/components/popups/CompleteChallengePopUp.vue'
+import DeleteChallengePopUp from '@/components/popups/DeleteChallengePopUp.vue'
+import eventBus from '@/components/service/eventBus.js'; // Import the event bus instance
+
+interface Challenge{
+ challengeId: number,
+ challengeTitle: string,
+ challengeDescription: string,
+ goalSum:number,
+ expirationDate:string
+}
+
+const token:string = useTokenStore().jwtToken;
+
+const jsConfetti = new JSConfetti()
+
+const displayPopUp = ref<boolean>(false);
+const displayDeletePopUp = ref<boolean>(false);
+
+const activeChallenges = ref<Challenge[]>([])
+
+const challengeToBeCompleted = ref<number|any>(null)
+const challengeToBeDeleted = ref<number|any>(null)
+
+const SIZE = 4
+const pages = ref<number>(1)
+const currentPage = ref<number>(0)
+
+onMounted(async () => {
+ try {
+ await fetchActiveChallenges();
+ } catch (error) {
+ console.error('Error fetching user info:', error);
+ }
+})
+
+const fetchActiveChallenges = async () => {
+ try{
+ const { content, totalPages, number } = await getActiveChallenges(token, currentPage.value,SIZE)
+
+ pages.value = totalPages;
+ currentPage.value = number;
+ activeChallenges.value = content;
+
+ } catch (error){
+ console.error('Error fetching inactive challenges:', error);
+ }
+}
+
+const handleRequestToCompleteChallenge = (challengeId: number) => {
+ challengeToBeCompleted.value = challengeId;
+ displayPopUp.value = true;
+}
+
+const handleRequestToDeleteChallenge = async (challengeId: number) => {
+ challengeToBeDeleted.value = challengeId;
+ displayDeletePopUp.value = true;
+}
+const closePopUp = async () => {
+ displayPopUp.value = false;
+}
+
+const closeDeletePopUp = async () => {
+ displayDeletePopUp.value = false;
+}
+
+const handleChallengeCompleted = async () => {
+ await closePopUp();
+ await jsConfetti.addConfetti();
+ await fetchActiveChallenges();
+}
+
+const handleChallengeDeleted = async () => {
+ await closeDeletePopUp();
+ await fetchActiveChallenges();
+}
+
+const previousPage = () => {
+ currentPage.value --
+}
+const goToPage = (pageNumber:number) => {
+ currentPage.value = pageNumber;
+}
+
+const nextPage = () =>{
+ currentPage.value ++;
+}
+
+eventBus.on('updateChallenges', () => {
+ fetchActiveChallenges();
+});
+
+watch(currentPage, fetchActiveChallenges);
+
+</script>
+
+<template>
+ <div v-if="displayPopUp" class="popup-container">
+ <CompleteChallengePopUp
+ :challenge-id="challengeToBeCompleted"
+ @closePopUp="closePopUp"
+ @challengeCompleted="handleChallengeCompleted"
+ ></CompleteChallengePopUp>
+ </div>
+
+ <div v-if="displayDeletePopUp" class="popup-container">
+ <DeleteChallengePopUp
+ :challenge-id="challengeToBeDeleted"
+ @closeDeletePopUp="closeDeletePopUp"
+ @challengeDeleted="handleChallengeDeleted"
+ ></DeleteChallengePopUp>
+ </div>
+
+ <div class="active-challenge-component">
+ <div class="active-challenges">
+ <ActiveChallengeDisplay
+ class="active-challenge"
+ v-for="(activeChallenge, index) in activeChallenges"
+ :key="index"
+ :challenge="activeChallenge"
+ @challengeCompleted="handleRequestToCompleteChallenge(activeChallenge.challengeId)"
+ @challengeDeleted ="handleRequestToDeleteChallenge(activeChallenge.challengeId)"
+ ></ActiveChallengeDisplay>
+ <h4 class="challenge-placeholder" id="active-challenge-placeholder" v-if="activeChallenges.length == 0">
+ Du har ingen aktive utfordringer.<br>
+ Lag din egen utfordring eller aksepter våre tilpassede forslag!
+ Aktive utfordringer vil vises i denne boksen.
+ </h4>
+ </div>
+ <div class="pagination">
+ <button @click="previousPage" :disabled="currentPage === 0">Forige side</button>
+ <div v-if="pages>0" class="page-numbers">
+ <button
+ v-for="pageNumber in pages"
+ :key="pageNumber-2"
+ :class="{ chosen: pageNumber-1 === currentPage }"
+ @click="goToPage(pageNumber-1)"
+ >{{ pageNumber}}</button>
+ </div>
+ <button @click="nextPage" :disabled="currentPage === pages - 1 || pages === 0">Neste side</button>
+ </div>
+ </div>
+
+</template>
+
+<style scoped>
+
+.popup-container {
+ position: fixed; /* Change to fixed to cover the entire viewport */
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ background-color: rgba(64, 64, 64, 0.5);
+
+ align-items: center;
+ z-index: 1000; /* Adjust z-index as needed */
+}
+
+.active-challenge-component{
+ display: flex;
+ flex-direction: column;
+
+ height: 100%;
+ width: 100%;
+
+ padding: 5.0%;
+ gap: 2.5%;
+
+ place-content: space-between;
+}
+
+.active-challenges{
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ width: 100%;
+ gap:2.5%
+}
+
+.active-challenge{
+ border-radius: 20px;
+ border: 2px solid var(--color-border);
+ background-color: var(--color-background-white);
+
+ min-height: calc(calc(100% - 2.5*4%)/4);
+ width: 100%;
+}
+
+.active-challenge:hover{
+ transform: scale(1.05);
+}
+#active-challenge-placeholder{
+ color: var(--color-headerText);
+}
+
+.challenge-placeholder{
+ text-align: center;
+}
+.pagination {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ flex: 1;
+}
+
+.pagination button {
+ padding: 5px 10px;
+ margin: 0 5px;
+ border: none;
+ border-radius: 5px;
+ background-color: var(--color-pageination-button);
+}
+
+.pagination button:hover {
+ transform: scale(1.05);
+}
+
+.pagination button:active{
+ background-color: var(--color-pageination-button-click);
+}
+
+.pagination button:disabled {
+ color: var(--color-inactive-button-text);
+ cursor: not-allowed;
+ transform: none;
+ background-color: var(--color-pageination-button) ;
+}
+
+.page-numbers {
+ display: flex;
+}
+
+.page-numbers button {
+ border: 1px solid var(--color-border);
+ border-radius: 5px;
+ background-color: var(--color-pageination-button);
+}
+
+.page-numbers button:hover {
+ transform: scale(1.05);
+}
+
+.page-numbers button:active {
+ background-color: var(--color-pageination-button-click);
+}
+
+.chosen{
+ color: var(--color-heading);
+ font-weight: bold;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/challenge/PotentialChallengeDisplay.vue b/src/components/challenge/InactiveChallengeDisplay.vue
similarity index 83%
rename from src/components/challenge/PotentialChallengeDisplay.vue
rename to src/components/challenge/InactiveChallengeDisplay.vue
index 18ce8749dc51df55cece04104eb3c4a78e629baf..068dbdfef5615ad33b92ecba1b925c45aaf731e5 100644
--- a/src/components/challenge/PotentialChallengeDisplay.vue
+++ b/src/components/challenge/InactiveChallengeDisplay.vue
@@ -2,9 +2,7 @@
import { activateChallenge, deleteChallenge } from '@/utils/challengeutils'
import { useTokenStore } from '@/stores/token'
-
-const token:string = useTokenStore().jwtToken;
-const emits = defineEmits(['challengeAccepted', 'challengeDeclined']);
+import eventBus from '@/components/service/eventBus.js'
interface Challenge{
'challengeId':number,
@@ -21,12 +19,21 @@ const props = defineProps({
}
});
+const token:string = useTokenStore().jwtToken;
+
+const emit = defineEmits(['challengeAccepted', 'challengeDeclined']);
+
+const expirationDate = () => {
+ return new Date(props.challenge?.expirationDate).
+ toLocaleDateString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric' });
+}
+
const declineChallenge = async () => {
console.log('decline-button clicked')
if(props.challenge.challengeId){
try{
await deleteChallenge(token, props.challenge.challengeId);
- emits('challengeDeclined', props.challenge.challengeId);
+ emit('challengeDeclined', props.challenge.challengeId);
} catch (error){
alert('Noe gikk galt! Venligst prøv på nytt.')
}
@@ -39,7 +46,8 @@ const acceptChallenge = async () => {
if(props.challenge.challengeId){
try{
await activateChallenge(token, props.challenge.challengeId);
- emits('challengeAccepted', props.challenge.challengeId);
+ emit('challengeAccepted', props.challenge.challengeId);
+ eventBus.emit('updateChallenges');
} catch (error){
alert('Noe gikk galt! Venligst prøv på nytt.')
}
@@ -52,7 +60,7 @@ const acceptChallenge = async () => {
<h2 class="title">{{ props.challenge.challengeTitle }}</h2>
<h4 class="description">{{ props.challenge.challengeDescription }}</h4>
<div class="info">
- <h4>Utløpsdato: {{props.challenge.expirationDate}} |</h4>
+ <h4>Utløpsdato: {{expirationDate()}} |</h4>
<h4 class="sum"> Sparesum: {{props.challenge.goalSum}} kr,-</h4>
</div>
<div class="options">
diff --git a/src/components/challenge/InactiveChallengeList.vue b/src/components/challenge/InactiveChallengeList.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0ef172e1b2f47d04250bba33ffbb5e0de493a832
--- /dev/null
+++ b/src/components/challenge/InactiveChallengeList.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+
+import PotentialChallengeDisplay from '@/components/challenge/InactiveChallengeDisplay.vue'
+import { onMounted, ref } from 'vue'
+import { getInactiveChallenges } from '@/utils/challengeutils'
+import { useTokenStore } from '@/stores/token'
+import router from '@/router'
+
+interface Challenge{
+ challengeId: number,
+ challengeTitle: string,
+ challengeDescription: string,
+ goalSum:number,
+ expirationDate:string
+}
+
+const token:string = useTokenStore().jwtToken;
+
+const inactiveChallenges = ref<Challenge[]>([])
+
+onMounted(async () => {
+ try {
+ await fetchInactiveChallenges();
+ } catch (error) {
+ console.error('Error fetching user info:', error);
+ }
+})
+
+const fetchInactiveChallenges = async () => {
+ try {
+ const { content} = await getInactiveChallenges(token)
+ inactiveChallenges.value = content;
+ } catch (error) {
+ console.error('Error fetching active challenges:', error);
+ }
+}
+
+// Function to handle the emitted challengeAccepted event
+const handleChallengeAccepted = async () => {
+ await fetchInactiveChallenges();
+}
+
+// Function to handle the emitted challengeDeclined event
+const handleChallengeDeclined = async () => {
+ await fetchInactiveChallenges();
+}
+
+</script>
+
+<template>
+ <div class="inactive-challenge-list">
+
+ <div class="challenge-recommendations">
+ <PotentialChallengeDisplay
+ class="potential-challenge"
+ v-for="(potentialChallenge, index) in inactiveChallenges"
+ :key="index"
+ :challenge="potentialChallenge"
+ @challengeAccepted="handleChallengeAccepted"
+ @challengeDeclined="handleChallengeDeclined"
+ ></PotentialChallengeDisplay>
+
+ <h4 class="challenge-placeholder" v-if="inactiveChallenges.length == 0">
+ Ojda, her gikk det unna.<br>
+ Vi har for øyeblikket ingen flere forslag til utfordringer. <br>
+ Lag din egen personlige utfordring eller kom tilbake senere! <br>
+ Nye utfordringer blir generert med gjevne mellomrom.
+ </h4>
+ </div>
+
+ </div>
+
+</template>
+
+<style scoped>
+
+.inactive-challenge-list{
+ display: flex;
+ flex-direction: column;
+ place-content: space-between;
+
+ gap: 2.5%;
+
+ width: 100%;
+ height: 100%;
+}
+
+.challenge-recommendations{
+ display: flex;
+ flex-direction: column;
+
+ height: 100%;
+ width: 100%;
+ gap: 2.5%;
+}
+
+.challenge-placeholder{
+ text-align: center;
+}
+
+.potential-challenge{
+ border-radius: 20px;
+ border: 2px solid var(--color-border);
+ box-shadow: 0 4px 4px var(--color-shadow);
+
+ height: calc(100%/3);
+ width: 100%;
+}
+
+.potential-challenge:hover{
+ transform: scale(1.02);
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/economy/TransactionComponent.vue b/src/components/economy/TransactionComponent.vue
index ea0deda37024d70891a6742f7c7fc356b5be6bc8..898e76bd7970b8668c30a7ceaf14e30accfeeaee 100644
--- a/src/components/economy/TransactionComponent.vue
+++ b/src/components/economy/TransactionComponent.vue
@@ -47,8 +47,8 @@ const toggleExpand = () => {
border-radius: 20px;
border: 1px solid var(--color-border);
box-shadow: 0 4px 4px 0 var(--color-shadow);
- width: 80%;
- height: 10%;
+ width: 100%;
+ height: 100%;
margin-bottom: 2.5%;
display:flex;
overflow: hidden;
@@ -56,9 +56,6 @@ const toggleExpand = () => {
background-color: var(--vt-c-Orange)
}
-.component.expanded {
- height: auto; /* Allow the component to expand */
-}
.component-left{
width:50%;
height:100%;
diff --git a/src/components/icons/navigation/close.svg b/src/components/icons/navigation/close.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e4273fcb042f20cd29b6c1f0b89f2a0acd8453ad
--- /dev/null
+++ b/src/components/icons/navigation/close.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="#000000" d="M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z"/></svg>
\ No newline at end of file
diff --git a/src/components/icons/navigation/help.svg b/src/components/icons/navigation/help.svg
new file mode 100644
index 0000000000000000000000000000000000000000..034ded96f56cbf9d99a0c77a3cc0ec1ed6e4b00e
--- /dev/null
+++ b/src/components/icons/navigation/help.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12ZM3.00683 12C3.00683 16.9668 7.03321 20.9932 12 20.9932C16.9668 20.9932 20.9932 16.9668 20.9932 12C20.9932 7.03321 16.9668 3.00683 12 3.00683C7.03321 3.00683 3.00683 7.03321 3.00683 12Z" fill="#0F0F0F"/>
+<path d="M13.5 18C13.5 18.8284 12.8284 19.5 12 19.5C11.1716 19.5 10.5 18.8284 10.5 18C10.5 17.1716 11.1716 16.5 12 16.5C12.8284 16.5 13.5 17.1716 13.5 18Z" fill="#0F0F0F"/>
+<path d="M11 12V14C11 14 11 15 12 15C13 15 13 14 13 14V12C13 12 13.4792 11.8629 13.6629 11.7883C13.6629 11.7883 13.9969 11.6691 14.2307 11.4896C14.4646 11.3102 14.6761 11.097 14.8654 10.8503C15.0658 10.6035 15.2217 10.3175 15.333 9.99221C15.4443 9.66693 15.5 9.4038 15.5 9C15.5 8.32701 15.3497 7.63675 15.0491 7.132C14.7596 6.61604 14.3476 6.21786 13.8132 5.93745C13.2788 5.64582 12.6553 5.5 11.9427 5.5C11.4974 5.5 11.1021 5.55608 10.757 5.66825C10.4118 5.7692 10.1057 5.9094 9.83844 6.08887C9.58236 6.25712 9.36525 6.4478 9.18711 6.66091C9.02011 6.86281 8.8865 7.0591 8.78629 7.24978C8.68609 7.44046 8.61929 7.6087 8.58589 7.75452C8.51908 7.96763 8.49125 8.14149 8.50238 8.27609C8.52465 8.41069 8.59145 8.52285 8.70279 8.61258C8.81413 8.70231 8.9867 8.79765 9.22051 8.8986C9.46546 8.97712 9.65473 9.00516 9.78834 8.98273C9.93308 8.96029 10.05 8.89299 10.1391 8.78083C10.1391 8.78083 10.6138 8.10569 10.7474 7.97109C10.8922 7.82528 11.0703 7.71312 11.2819 7.6346C11.4934 7.54487 11.7328 7.5 12 7.5C12.579 7.5 13.0076 7.64021 13.286 7.92062C13.5754 8.18982 13.6629 8.41629 13.6629 8.93225C13.6629 9.27996 13.6017 9.56038 13.4792 9.77349C13.3567 9.9866 13.1953 10.1605 12.9949 10.2951C12.9949 10.2951 12.7227 10.3991 12.5 10.5C12.2885 10.5897 11.9001 10.7381 11.6997 10.8503C11.5104 10.9512 11.4043 11.0573 11.2819 11.2144C11.1594 11.3714 11 11.7308 11 12Z" fill="#0F0F0F"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/milestone/ActiveMilestonesList.vue b/src/components/milestone/ActiveMilestonesList.vue
index 0d22a44591ee974347e5aa3f2bc598f6edd29e28..8d352b416aaf48acc15a674b8b6550681c535d14 100644
--- a/src/components/milestone/ActiveMilestonesList.vue
+++ b/src/components/milestone/ActiveMilestonesList.vue
@@ -4,7 +4,6 @@ import ActiveMilestoneDisplay from '@/components/milestone/ActiveMilestoneDispla
import { onMounted, ref } from 'vue'
import { useTokenStore } from '@/stores/token'
import { getAllMilestones } from '@/utils/MilestoneUtils'
-import router from '@/router'
interface Milestone{
milestoneId: number;
@@ -18,21 +17,61 @@ interface Milestone{
username: string;
}
-const activeMilestones = ref(<Milestone[]>[])
+const token = useTokenStore().jwtToken
-onMounted(async () => {
- const token = useTokenStore().$state.jwtToken
- activeMilestones.value = await getAllMilestones(token);
+const activeMilestones = ref<Milestone[]>([])
+const currentPage = ref<number>(0)
+const pages = ref<number>(1)
+const SIZE = 3
+
+onMounted( () => {
+ fetchActiveMilestones();
})
+const fetchActiveMilestones = async () => {
+ try{
+ console.log(currentPage.value)
+ const { content, totalPages, number } = await getAllMilestones(token, currentPage.value,SIZE)
+ pages.value = totalPages;
+ currentPage.value = number;
+ activeMilestones.value = content;
+ }catch (error){
+ console.log(error)
+ }
+}
+
+const previousPage = () => {
+ currentPage.value --
+ fetchActiveMilestones();
+}
+const goToPage = (pageNumber:number) => {
+ currentPage.value = pageNumber;
+ fetchActiveMilestones();
+}
+
+const nextPage = () =>{
+ currentPage.value ++;
+ fetchActiveMilestones();
+}
+
</script>
<template>
- <div class="active-milestones">
- <template v-if="activeMilestones.length === 0">
- <h4>Opps, her var det tomt.<br>Lag ditt første sparemål for å komme i gang!</h4>
- </template>
- <template v-else>
+ <div class="active-milestone-component">
+ <div class="pagination">
+ <button @click="previousPage" :disabled="currentPage === 0">Forige side</button>
+ <div v-if="pages>0" class="page-numbers">
+ <button
+ v-for="pageNumber in pages"
+ :key="pageNumber-2"
+ :class="{ chosen: pageNumber-1 === currentPage }"
+ @click="goToPage(pageNumber-1)"
+ >{{ pageNumber}}</button>
+ </div>
+ <button @click="nextPage" :disabled="currentPage === pages - 1 || pages === 0">Neste side</button>
+ </div>
+
+ <div class="milestones">
<ActiveMilestoneDisplay
class="active-milestone"
v-for="(activeMilestone, index) in activeMilestones"
@@ -46,18 +85,33 @@ onMounted(async () => {
:startDate="activeMilestone.startDate"
:image="activeMilestone.milestoneImage"
></ActiveMilestoneDisplay>
- </template>
+ <h4 v-if="activeMilestones.length === 0">
+ Opps, her var det tomt.<br>
+ Lag ditt første sparemål for å komme i gang!
+ </h4>
+ </div>
+
</div>
</template>
<style scoped>
-.active-milestones{
+.active-milestone-component{
display: flex;
flex-direction: column;
text-align: center;
height: 100%;
width: 100%;
+
+ gap: 2.5%;
+}
+
+.milestones{
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+
gap: 2.5%;
}
@@ -66,7 +120,7 @@ onMounted(async () => {
border: 2px solid var(--color-border);
box-shadow: 0 4px 4px var(--color-shadow);
- min-height: 30%;
+ height: calc(100%/3);
width: 100%;
}
@@ -75,4 +129,64 @@ onMounted(async () => {
transition: 0.3s;
}
+
+.pagination {
+ display: flex;
+ justify-content: left;
+ align-items: center;
+ width: 100%;
+}
+
+.pagination button {
+ padding: 5px 10px;
+ margin: 0 5px;
+ border: 1px solid var(--color-border);
+ border-radius: 5px;
+ background-color: var(--color-pageination-button);
+}
+
+.pagination button:hover {
+ transform: scale(1.05);
+}
+
+.pagination button:active{
+ background-color: var(--color-pageination-button-click);
+}
+
+.pagination button:disabled {
+ color: var(--color-inactive-button-text);
+ cursor: not-allowed;
+ transform: none;
+ background-color: var(--color-pageination-button) ;
+}
+
+.page-numbers {
+ display: flex;
+}
+
+.page-numbers button {
+ border: 1px solid var(--color-border);
+ border-radius: 5px;
+ background-color: var(--color-pageination-button);
+}
+
+.page-numbers button:hover {
+ transform: scale(1.05);
+}
+
+.page-numbers button:active {
+ background-color: var(--color-pageination-button-click);
+}
+
+.chosen{
+ color: var(--color-heading);
+ font-weight: bold;
+}
+
+@media only screen and (max-width: 1000px){
+ .pagination{
+ place-content: center;
+ }
+}
+
</style>
\ No newline at end of file
diff --git a/src/components/milestone/CompletedMilestoneDisplay.vue b/src/components/milestone/CompletedMilestoneDisplay.vue
index 98d494322a9b05c4f9c48589d1efc70bafa52c0b..4866c4f360c8527cdfbe34daf34df0bb81721ed0 100644
--- a/src/components/milestone/CompletedMilestoneDisplay.vue
+++ b/src/components/milestone/CompletedMilestoneDisplay.vue
@@ -33,7 +33,6 @@ const displayDescription = ref(false)
<h4>{{props.description}}</h4>
</div>
-
</div>
</template>
@@ -43,6 +42,7 @@ const displayDescription = ref(false)
flex-direction: column;
place-content: space-between;
padding: 1.5%;
+ color: var(--color-text-black);
}
.title{
text-align: left;
diff --git a/src/components/milestone/MilestoneLogList.vue b/src/components/milestone/MilestoneLogList.vue
new file mode 100644
index 0000000000000000000000000000000000000000..084892961ea058c193912decf50e37f21319028b
--- /dev/null
+++ b/src/components/milestone/MilestoneLogList.vue
@@ -0,0 +1,207 @@
+<script setup lang="ts">
+
+import { onMounted, ref } from 'vue'
+import { useTokenStore } from '@/stores/token'
+import { getAllMilestoneLogs } from '@/utils/MilestoneUtils'
+import CompletedMilestoneDisplay from '@/components/milestone/CompletedMilestoneDisplay.vue'
+
+interface Milestone{
+ milestoneId: number;
+ milestoneTitle: string;
+ milestoneDescription: string
+ milestoneGoalSum: number;
+ milestoneCurrentSum: number;
+ deadlineDate: Date;
+ startDate: Date;
+ milestoneImage: string;
+ username: string;
+}
+
+const token = useTokenStore().jwtToken
+
+const completedMilestones = ref<Milestone[]>([])
+const currentPage = ref<number>(0)
+const pages = ref<number>(1)
+const SIZE = 4
+
+onMounted( () => {
+ fetchActiveMilestones();
+})
+
+const fetchActiveMilestones = async () => {
+ try{
+ console.log(currentPage.value)
+ const { content, totalPages, number } = await getAllMilestoneLogs(token, currentPage.value,SIZE)
+ pages.value = totalPages;
+ currentPage.value = number;
+ completedMilestones.value = content;
+ }catch (error){
+ console.log(error)
+ }
+}
+
+const previousPage = () => {
+ currentPage.value --
+ fetchActiveMilestones();
+}
+const goToPage = (pageNumber:number) => {
+ currentPage.value = pageNumber;
+ fetchActiveMilestones();
+}
+
+const nextPage = () =>{
+ currentPage.value ++;
+ fetchActiveMilestones();
+}
+
+</script>
+
+<template>
+ <div class="completed-milestones-component">
+ <div class="milestones">
+ <CompletedMilestoneDisplay
+ class="completed-milestone"
+ v-for="(completedMilestone, index) in completedMilestones"
+ :key="index"
+ :id="completedMilestone.milestoneId"
+ :title="completedMilestone.milestoneTitle"
+ :description="completedMilestone.milestoneDescription"
+ :current-sum="completedMilestone.milestoneCurrentSum"
+ :goal-sum="completedMilestone.milestoneGoalSum"
+ :deadline="completedMilestone.deadlineDate"
+ :start-date="completedMilestone.startDate"
+ :image="completedMilestone.milestoneImage"
+ ></CompletedMilestoneDisplay>
+ <CompletedMilestoneDisplay
+ class="completed-milestone"
+ v-for="(completedMilestone, index) in completedMilestones"
+ :key="index"
+ :id="completedMilestone.milestoneId"
+ :title="completedMilestone.milestoneTitle"
+ :description="completedMilestone.milestoneDescription"
+ :current-sum="completedMilestone.milestoneCurrentSum"
+ :goal-sum="completedMilestone.milestoneGoalSum"
+ :deadline="completedMilestone.deadlineDate"
+ :start-date="completedMilestone.startDate"
+ :image="completedMilestone.milestoneImage"
+ ></CompletedMilestoneDisplay>
+
+ <h4 class="milestone-placeholder" v-if="completedMilestones.length == 0">
+ Du har ingen fullførte sparemål
+ <br>Avsluttede sparemål ender opp her sånn at du får full oversikt.
+ </h4>
+ </div>
+
+ <div class="pagination">
+ <button @click="previousPage" :disabled="currentPage === 0">Forige side</button>
+ <div v-if="pages>0" class="page-numbers">
+ <button
+ v-for="pageNumber in pages"
+ :key="pageNumber-2"
+ @click="goToPage(pageNumber-1)"
+ :class="{ chosen: pageNumber-1 === currentPage }"
+ >{{ pageNumber}}</button>
+ </div>
+ <button @click="nextPage" :disabled="currentPage === pages - 1 || pages === 0">Neste side</button>
+ </div>
+ </div>
+</template>
+
+<style scoped>
+
+.completed-milestones-component{
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+
+ height: 100%;
+ width: 100%;
+
+ place-content: space-between;
+
+ padding: 5.0%;
+ gap: 2.5%;
+}
+
+.milestones{
+ display: flex;
+ flex-direction: column;
+ gap: 2.5%;
+
+ width: 100%;
+ height: 100%;
+}
+
+.completed-milestone{
+ border-radius: 20px;
+ border: 2px solid var(--color-border);
+ background-color: var(--color-background-white);
+
+ min-height: calc(calc(100% - 2.5*4%)/4);
+ width: 100%;
+}
+
+.completed-milestone:hover{
+ transform: scale(1.05);
+ transition: 0.3s;
+}
+
+.milestone-placeholder{
+ color:var(--color-headerText);
+}
+
+.pagination {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ flex: 1;
+}
+
+.pagination button {
+ padding: 5px 10px;
+ margin: 0 5px;
+ border: 1px solid var(--color-border);
+ border-radius: 5px;
+ background-color: var(--color-pageination-button);
+}
+
+.pagination button:hover {
+ transform: scale(1.05);
+}
+
+.pagination button:active{
+ background-color: var(--color-pageination-button-click);
+}
+
+.pagination button:disabled {
+ color: var(--color-inactive-button-text);
+ cursor: not-allowed;
+ transform: none;
+ background-color: var(--color-pageination-button) ;
+}
+
+.page-numbers {
+ display: flex;
+}
+
+.page-numbers button {
+ border: 1px solid var(--color-border);
+ border-radius: 5px;
+ background-color: var(--color-pageination-button);
+}
+
+.page-numbers button:hover {
+ transform: scale(1.05);
+}
+
+.page-numbers button:active {
+ background-color: var(--color-pageination-button-click);
+}
+
+.chosen{
+ color: var(--color-heading);
+ font-weight: bold;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/challenge/CompleteChallengePopUp.vue b/src/components/popups/CompleteChallengePopUp.vue
similarity index 93%
rename from src/components/challenge/CompleteChallengePopUp.vue
rename to src/components/popups/CompleteChallengePopUp.vue
index 1ac824b6a1ef55b7cf71d93d0be8e82f5bae7056..b9f50147918e4afc43a9a8d8fd14cdb31c5ecc5a 100644
--- a/src/components/challenge/CompleteChallengePopUp.vue
+++ b/src/components/popups/CompleteChallengePopUp.vue
@@ -31,7 +31,8 @@ onMounted(async () => {
})
const fetchAllMilestones = async () =>{
try{
- milestones.value = await getAllMilestones(token)
+ const result = await getAllMilestones(token, 0,10)
+ milestones.value = result.content;
chosenMilestone.value = milestones.value[0].milestoneId;
} catch (error){
@@ -77,7 +78,7 @@ const completeThisChallenge = async () => {
<button class="option-button" id="cancel-button" @click="cancelCompleteThisChallenge()">
<h2 class="option-button-title">Avbryt</h2>
</button>
- <button class="option-button" id="complete-button" @click="completeThisChallenge()">
+ <button class="option-button" id="delete-button" @click="completeThisChallenge()">
<h2 class="option-button-title">Fullfør</h2>
</button>
</div>
@@ -151,14 +152,14 @@ const completeThisChallenge = async () => {
background-color: var(--color-cancel-button-click);
}
-#complete-button{
+#delete-button{
background-color: var(--color-confirm-button);
}
-#complete-button:active{
+#delete-button:active{
background-color: var(--color-confirm-button-click);
}
-#complete-button:hover, #cancel-button:hover{
+#delete-button:hover, #cancel-button:hover{
transform: scale(1.02);
}
diff --git a/src/components/popups/DeleteChallengePopUp.vue b/src/components/popups/DeleteChallengePopUp.vue
new file mode 100644
index 0000000000000000000000000000000000000000..55397cb14a994793c8e14fbc275b03aa460f47ea
--- /dev/null
+++ b/src/components/popups/DeleteChallengePopUp.vue
@@ -0,0 +1,134 @@
+<script setup lang="ts">
+
+import { onMounted, ref } from 'vue'
+import { useTokenStore } from '@/stores/token'
+import { getAllMilestones } from '@/utils/MilestoneUtils'
+import { completeChallenge, deleteChallenge } from '@/utils/challengeutils'
+
+interface Milestone{
+ 'milestoneId': number,
+ 'milestoneTitle': string
+}
+
+const props = defineProps({
+ challengeId: Number,
+});
+
+const token:string = useTokenStore().jwtToken;
+const emit = defineEmits(['closeDeletePopUp', 'challengeDeleted']);
+
+const cancelCompleteThisChallenge = () => {
+ emit('closeDeletePopUp');
+}
+
+const deleteThisChallenge = async () => {
+ if(props.challengeId){
+ try{
+ await deleteChallenge(token, props.challengeId);
+ emit('challengeDeleted');
+
+ }catch (error){
+ console.log(error)
+ }
+ }
+}
+
+</script>
+
+<template>
+ <div class="popup-content">
+ <!-- Pop-up content goes here -->
+ <h2>Er du sikker på at du vil slette utfordringen?</h2>
+
+ <div class="content">
+ <img class="sad-pig-img" src="/src/assets/png/sad-pig.png" alt="sad-pig" >
+ <h3> Husk! Dagens små sparinger kan føre til morgendagens store drømmer.</h3>
+
+ </div>
+
+ <div class="option-buttons">
+ <button class="option-button" id="cancel-button" @click="cancelCompleteThisChallenge()">
+ <h2 class="option-button-title">Avbryt</h2>
+ </button>
+ <button class="option-button" id="delete-button" @click="deleteThisChallenge()">
+ <h2 class="option-button-title">Slett</h2>
+ </button>
+ </div>
+ </div>
+
+</template>
+
+<style scoped>
+.popup-content {
+ display: flex;
+ flex-direction: column;
+
+ width: 50%;
+ height: 50%;
+ background-color: var(--color-background);
+
+ padding: 20px;
+ border-radius: 10px;
+ border: 2px solid var(--color-border);
+
+ place-content: space-between;
+
+}
+
+.content{
+ display: flex;
+ flex-direction: row;
+ place-items: center;
+}
+
+.sad-pig-img{
+ width:30%;
+}
+
+
+.option-buttons{
+ display: flex;
+ flex-direction: row;
+
+ width: 100%;
+ place-content: space-between;
+}
+
+.option-button{
+ border: none;
+ border-radius: 20px;
+ width: 35%;
+
+}
+
+.option-button-title{
+ color: var(--color-headerText);
+ font-weight: bold;
+}
+
+#cancel-button{
+ background-color: var(--color-cancel-button);
+}
+#cancel-button:active{
+ background-color: var(--color-cancel-button-click);
+}
+
+#delete-button{
+ background-color: var(--color-confirm-button);
+}
+#delete-button:active{
+ background-color: var(--color-confirm-button-click);
+}
+
+#delete-button:hover, #cancel-button:hover{
+ transform: scale(1.02);
+}
+
+@media only screen and (max-width: 1000px){
+ .popup-content {
+ width: 90%;
+ height: 60%;
+ }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/popups/help/ChallengeHelpPopUp.vue b/src/components/popups/help/ChallengeHelpPopUp.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2f30e278f213125fd3a89754422facb3ec1514e4
--- /dev/null
+++ b/src/components/popups/help/ChallengeHelpPopUp.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+
+const emit = defineEmits(['closePopUp']);
+
+const closePopUp = () => {
+ emit('closePopUp');
+}
+</script>
+
+<template>
+ <div class="popup-content">
+ <div class="header">
+ <img src="/src/components/icons/navigation/lightbulb-on.svg" alt="pop-up-icon" class="img">
+ <h2>Utfordringer</h2>
+ </div>
+ <h3>
+ Hei! Du befinner deg for øyeblikket på utfordring-siden til sparesti.
+ På denne siden finner du en oversikt over alle dine aktive utfordringer. Dersom du har fullført en
+ av utfordringene, klikk "Fullfør" for å fullføre utfordringen. Klikk på en utfordring for å se
+ flere detaljer om utfordrignen. Har du ingen aktive utfordringer? Aksepter noen av våre tilpassede
+ forslag eller lag din helt egne utfordring!
+ </h3>
+
+ <div class="option-buttons">
+ <button class="option-button" id="delete-button" @click="closePopUp()">
+ <h2 class="option-button-title">Ok</h2>
+ </button>
+ </div>
+ </div>
+
+</template>
+
+<style scoped>
+.popup-content {
+ display: flex;
+ flex-direction: column;
+
+ width: 50%;
+ height: 50%;
+
+ background-color: var(--color-background);
+
+ padding: 20px;
+ border-radius: 10px;
+ border: 2px solid var(--color-border);
+
+ place-content: space-between;
+ align-items: start;
+
+ overflow-y: scroll;
+ gap: 2.5%;
+}
+
+.header{
+ display: flex;
+ flex-direction: row;
+ place-content: start;
+ width: 100%;
+ height: 10%;
+ gap: 1.5%;
+}
+
+.img{
+ height: 100%;
+}
+
+.option-buttons{
+ display: flex;
+ flex-direction: row;
+
+ width: 100%;
+ place-content: center;
+}
+
+.option-button{
+ border: none;
+ border-radius: 20px;
+ width: 35%;
+
+}
+
+.option-button-title{
+ color: var(--color-headerText);
+ font-weight: bold;
+}
+
+#delete-button{
+ background-color: var(--color-confirm-button);
+}
+#delete-button:active{
+ background-color: var(--color-confirm-button-click);
+}
+
+#delete-button:hover{
+ transform: scale(1.02);
+}
+
+@media only screen and (max-width: 1000px){
+ .popup-content {
+ width: 90%;
+ height: 60%;
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ .img{
+ filter: invert(1);
+ }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/popups/help/DicoverHelpPopUp.vue b/src/components/popups/help/DicoverHelpPopUp.vue
new file mode 100644
index 0000000000000000000000000000000000000000..62e5ba02c5a4fbdd2e818dde412fe36ece41eace
--- /dev/null
+++ b/src/components/popups/help/DicoverHelpPopUp.vue
@@ -0,0 +1,109 @@
+<script setup lang="ts">
+
+const emit = defineEmits(['closePopUp']);
+
+const closePopUp = () => {
+ emit('closePopUp');
+}
+</script>
+
+<template>
+ <div class="popup-content">
+ <div class="header">
+ <img src="/src/components/icons/navigation/lightbulb-on.svg" alt="pop-up-icon" class="img">
+ <h2>Sparetips</h2>
+ </div>
+ <h3>
+ Hei! Du befinner deg for øyeblikket på sparetips-siden til sparesti.
+ På denne siden finner du de nyeste økonomi og spare artiklene fra E24. Trykk på en artikkel
+ for å lese hele artikkelen hos E24.
+ </h3>
+
+ <div class="option-buttons">
+ <button class="option-button" id="delete-button" @click="closePopUp()">
+ <h2 class="option-button-title">Ok</h2>
+ </button>
+ </div>
+ </div>
+
+</template>
+
+<style scoped>
+.popup-content {
+ display: flex;
+ flex-direction: column;
+
+ width: 50%;
+ height: 50%;
+
+ background-color: var(--color-background);
+
+ padding: 20px;
+ border-radius: 10px;
+ border: 2px solid var(--color-border);
+
+ place-content: space-between;
+ align-items: start;
+
+ overflow-y: scroll;
+ gap: 2.5%;
+}
+
+.header{
+ display: flex;
+ flex-direction: row;
+ place-content: start;
+ width: 100%;
+ height: 10%;
+ gap: 1.5%;
+}
+
+.img{
+ height: 100%;
+}
+
+.option-buttons{
+ display: flex;
+ flex-direction: row;
+
+ width: 100%;
+ place-content: center;
+}
+
+.option-button{
+ border: none;
+ border-radius: 20px;
+ width: 35%;
+
+}
+
+.option-button-title{
+ color: var(--color-headerText);
+ font-weight: bold;
+}
+
+#delete-button{
+ background-color: var(--color-confirm-button);
+}
+#delete-button:active{
+ background-color: var(--color-confirm-button-click);
+}
+
+#delete-button:hover{
+ transform: scale(1.02);
+}
+
+@media only screen and (max-width: 1000px){
+ .popup-content {
+ width: 90%;
+ height: 60%;
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ .img{
+ filter: invert(1);
+ }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/popups/help/EconomyHelpPopUp.vue b/src/components/popups/help/EconomyHelpPopUp.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d679e5ff0266a9c9c95db73623f7c7764fbc5555
--- /dev/null
+++ b/src/components/popups/help/EconomyHelpPopUp.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+
+const emit = defineEmits(['closePopUp']);
+
+const closePopUp = () => {
+ emit('closePopUp');
+}
+</script>
+
+<template>
+ <div class="popup-content">
+ <div class="header">
+ <img src="/src/components/icons/navigation/lightbulb-on.svg" alt="pop-up-icon" class="img">
+ <h2>Transaksjoner</h2>
+ </div>
+ <h3>
+ Hei! Du befinner deg for øyeblikket på transaksjon-siden til sparesti.
+ PÃ¥ denne siden finner du en oversikt over dine nyligste transaksjoner.
+ </h3>
+
+ <div class="option-buttons">
+ <button class="option-button" id="delete-button" @click="closePopUp()">
+ <h2 class="option-button-title">Ok</h2>
+ </button>
+ </div>
+ </div>
+
+</template>
+
+<style scoped>
+.popup-content {
+ display: flex;
+ flex-direction: column;
+
+ width: 50%;
+ height: 50%;
+
+ background-color: var(--color-background);
+
+ padding: 20px;
+ border-radius: 10px;
+ border: 2px solid var(--color-border);
+
+ place-content: space-between;
+ align-items: start;
+
+ overflow-y: scroll;
+ gap: 2.5%;
+}
+
+.header{
+ display: flex;
+ flex-direction: row;
+ place-content: start;
+ width: 100%;
+ height: 10%;
+ gap: 1.5%;
+}
+
+.img{
+ height: 100%;
+}
+
+.option-buttons{
+ display: flex;
+ flex-direction: row;
+
+ width: 100%;
+ place-content: center;
+}
+
+.option-button{
+ border: none;
+ border-radius: 20px;
+ width: 35%;
+
+}
+
+.option-button-title{
+ color: var(--color-headerText);
+ font-weight: bold;
+}
+
+#delete-button{
+ background-color: var(--color-confirm-button);
+}
+#delete-button:active{
+ background-color: var(--color-confirm-button-click);
+}
+
+#delete-button:hover{
+ transform: scale(1.02);
+}
+
+@media only screen and (max-width: 1000px){
+ .popup-content {
+ width: 90%;
+ height: 60%;
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ .img{
+ filter: invert(1);
+ }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/popups/help/HomeHelpPopUp.vue b/src/components/popups/help/HomeHelpPopUp.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0fb79e7e4f92da4a454517343a2be2add65db515
--- /dev/null
+++ b/src/components/popups/help/HomeHelpPopUp.vue
@@ -0,0 +1,109 @@
+<script setup lang="ts">
+
+const emit = defineEmits(['closePopUp']);
+
+const closePopUp = () => {
+ emit('closePopUp');
+}
+
+</script>
+
+<template>
+ <div class="popup-content">
+ <div class="header">
+ <img src="/src/components/icons/navigation/lightbulb-on.svg" alt="pop-up-icon" class="img">
+ <h2>Hjem</h2>
+ </div>
+ <h3>
+ Hei! Du befinner deg for øyeblikket på hjem-siden til sparesti.
+ På denne siden finner du en oversikt over alle dine sparemål og aktive utfordringer.
+ Dersom du er ny anbefaler vi at du klikker på den store grønne knappen "Ny til Sparesti? Klikk hær!"
+ </h3>
+
+ <div class="option-buttons">
+ <button class="option-button" id="delete-button" @click="closePopUp()">
+ <h2 class="option-button-title">Ok</h2>
+ </button>
+ </div>
+ </div>
+
+</template>
+
+<style scoped>
+.popup-content {
+ display: flex;
+ flex-direction: column;
+
+ width: 50%;
+ height: 50%;
+ background-color: var(--color-background);
+
+ padding: 20px;
+ border-radius: 10px;
+ border: 2px solid var(--color-border);
+
+ place-content: space-between;
+ align-items: start;
+
+ overflow-y: scroll;
+ gap: 2.5%;
+}
+
+.header{
+ display: flex;
+ flex-direction: row;
+ place-content: start;
+ width: 100%;
+ height: 10%;
+ gap: 1.5%;
+}
+
+.img{
+ height: 100%;
+}
+
+.option-buttons{
+ display: flex;
+ flex-direction: row;
+
+ width: 100%;
+ place-content: center;
+}
+
+.option-button{
+ border: none;
+ border-radius: 20px;
+ width: 35%;
+
+}
+
+.option-button-title{
+ color: var(--color-headerText);
+ font-weight: bold;
+}
+
+#delete-button{
+ background-color: var(--color-confirm-button);
+}
+#delete-button:active{
+ background-color: var(--color-confirm-button-click);
+}
+
+#delete-button:hover{
+ transform: scale(1.02);
+}
+
+@media only screen and (max-width: 1000px){
+ .popup-content {
+ width: 90%;
+ height: 60%;
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ .img{
+ filter: invert(1);
+ }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/popups/help/MilestoneHelpPopUp.vue b/src/components/popups/help/MilestoneHelpPopUp.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2b3c407329c53f63338ab7008c8b748f6cad44df
--- /dev/null
+++ b/src/components/popups/help/MilestoneHelpPopUp.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+
+const emit = defineEmits(['closePopUp']);
+
+const closePopUp = () => {
+ emit('closePopUp');
+}
+</script>
+
+<template>
+ <div class="popup-content">
+ <div class="header">
+ <img src="/src/components/icons/navigation/lightbulb-on.svg" alt="pop-up-icon" class="img">
+ <h2>Sparemål</h2>
+ </div>
+ <h3>
+ Hei! Du befinner deg for øyeblikket på sparemål-siden til sparesti.
+ På denne siden finner du en oversikt over alle dine nåværende sparemål. Klikk på sparemålene
+ for å se flere detaljer. Er det noe du sparer til? Klikk på den store grønne knappen "Lag nytt sparemål + "
+ for å opprette et nytt sparemål. Du finner også en oversikt over dine tidligere sparemål til venstre på siden.
+
+ </h3>
+
+ <div class="option-buttons">
+ <button class="option-button" id="delete-button" @click="closePopUp()">
+ <h2 class="option-button-title">Ok</h2>
+ </button>
+ </div>
+ </div>
+
+</template>
+
+<style scoped>
+.popup-content {
+ display: flex;
+ flex-direction: column;
+
+ width: 50%;
+ height: 50%;
+
+ background-color: var(--color-background);
+
+ padding: 20px;
+ border-radius: 10px;
+ border: 2px solid var(--color-border);
+
+ place-content: space-between;
+ align-items: start;
+
+ overflow-y: scroll;
+ gap: 2.5%;
+}
+
+.header{
+ display: flex;
+ flex-direction: row;
+ place-content: start;
+ width: 100%;
+ height: 10%;
+ gap: 1.5%;
+}
+
+.img{
+ height: 100%;
+}
+
+.option-buttons{
+ display: flex;
+ flex-direction: row;
+
+ width: 100%;
+ place-content: center;
+}
+
+.option-button{
+ border: none;
+ border-radius: 20px;
+ width: 35%;
+
+}
+
+.option-button-title{
+ color: var(--color-headerText);
+ font-weight: bold;
+}
+
+#delete-button{
+ background-color: var(--color-confirm-button);
+}
+#delete-button:active{
+ background-color: var(--color-confirm-button-click);
+}
+
+#delete-button:hover{
+ transform: scale(1.02);
+}
+
+@media only screen and (max-width: 1000px){
+ .popup-content {
+ width: 90%;
+ height: 60%;
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ .img{
+ filter: invert(1);
+ }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/popups/help/PathHelpPopUp.vue b/src/components/popups/help/PathHelpPopUp.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cd1c76a06aeba1a68a7b06c77ca08fed00aeebc4
--- /dev/null
+++ b/src/components/popups/help/PathHelpPopUp.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+
+const emit = defineEmits(['closePopUpp']);
+
+const closePopUp = () => {
+ emit('closePopUpp');
+}
+</script>
+
+<template>
+ <div class="popup-content">
+ <div class="header">
+ <img src="/src/components/icons/navigation/lightbulb-on.svg" alt="pop-up-icon" class="img">
+ <h2>Sparemål</h2>
+ </div>
+ <h3>
+ Hei! Du befinner deg for øyeblikket på sparesti-siden til sparesti.
+ På denne siden finner du en visuell representasjon av sparestien til sparemålet ditt!
+ Siden viser også en oversikt over viktig informasjon knyttet til sparemålet.
+ Du kan også velge å redigere sparemålet dersom noe ikke stemmer!
+ </h3>
+
+ <div class="option-buttons">
+ <button class="option-button" id="delete-button" @click="closePopUp()">
+ <h2 class="option-button-title">Ok</h2>
+ </button>
+ </div>
+ </div>
+
+</template>
+
+<style scoped>
+.popup-content {
+ display: flex;
+ flex-direction: column;
+
+ width: 50%;
+ height: 50%;
+
+ background-color: var(--color-background);
+
+ padding: 20px;
+ border-radius: 10px;
+ border: 2px solid var(--color-border);
+
+ place-content: space-between;
+ align-items: start;
+
+ overflow-y: scroll;
+ gap: 2.5%;
+}
+
+.header{
+ display: flex;
+ flex-direction: row;
+ place-content: start;
+ width: 100%;
+ height: 10%;
+ gap: 1.5%;
+}
+
+.img{
+ height: 100%;
+}
+
+.option-buttons{
+ display: flex;
+ flex-direction: row;
+
+ width: 100%;
+ place-content: center;
+}
+
+.option-button{
+ border: none;
+ border-radius: 20px;
+ width: 35%;
+
+}
+
+.option-button-title{
+ color: var(--color-headerText);
+ font-weight: bold;
+}
+
+#delete-button{
+ background-color: var(--color-confirm-button);
+}
+#delete-button:active{
+ background-color: var(--color-confirm-button-click);
+}
+
+#delete-button:hover{
+ transform: scale(1.02);
+}
+
+@media only screen and (max-width: 1000px){
+ .popup-content {
+ width: 90%;
+ height: 60%;
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ .img{
+ filter: invert(1);
+ }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/service/eventBus.d.ts b/src/components/service/eventBus.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..97985bdd8970c8b53ce6e45676831289619ba3ff
--- /dev/null
+++ b/src/components/service/eventBus.d.ts
@@ -0,0 +1,5 @@
+declare module '@/components/service/eventBus.js' {
+ import mitt from 'mitt';
+ const eventBus: mitt.Emitter;
+ export default eventBus;
+}
\ No newline at end of file
diff --git a/src/components/service/eventBus.js b/src/components/service/eventBus.js
new file mode 100644
index 0000000000000000000000000000000000000000..412b57bb0e1397120d092ce4da8941cee154b58f
--- /dev/null
+++ b/src/components/service/eventBus.js
@@ -0,0 +1,8 @@
+
+import mitt from 'mitt';
+
+// Create a new event bus instance
+const eventBus = mitt();
+
+// Export the event bus instance
+export default eventBus;
\ No newline at end of file
diff --git a/src/utils/MilestoneUtils.ts b/src/utils/MilestoneUtils.ts
index 8897b5f3d0c5445d09300aefaf06d5a3e722a536..880f88c2a8015a5389a0f07293f7982676504706 100644
--- a/src/utils/MilestoneUtils.ts
+++ b/src/utils/MilestoneUtils.ts
@@ -1,25 +1,33 @@
import axios from 'axios';
-export const getAllMilestones = async(token: string) => {
+export const getAllMilestones = async(token: string, page:number, size:number) => {
const config = {
headers: {
"Content-Type": "application/json",
Authorization: "Bearer " + token
+ },
+ params: {
+ 'page': page,
+ 'size': size
}
};
try {
const response = await axios.get("http://localhost:8080/milestone/user", config)
- return response.data
+ return response.data;
} catch (error) {
console.log(error)
}
}
-export const getAllMilestoneLogs = async(token: string) => {
+export const getAllMilestoneLogs = async(token: string, page:number, size:number) => {
const config = {
headers: {
"Content-Type": "application/json",
Authorization: "Bearer " + token
+ },
+ params: {
+ 'page': page,
+ 'size': size
}
};
try {
diff --git a/src/views/HomePage/ChallengeView.vue b/src/views/HomePage/ChallengeView.vue
index 9f2345318c5e63e423c29606c83863d47652d08b..4f50bdc0ce1ecc2c8dd82942fc152a3ed0fbe697 100644
--- a/src/views/HomePage/ChallengeView.vue
+++ b/src/views/HomePage/ChallengeView.vue
@@ -1,143 +1,14 @@
<script setup lang="ts">
-
-import PotentialChallengeDisplay from '@/components/challenge/PotentialChallengeDisplay.vue'
-import { onMounted, ref, watch } from 'vue'
-import ActiveChallengeDisplay from '@/components/challenge/ActiveChallengeDisplay.vue'
+import {ref} from 'vue'
+import ActiveChallengesList from '@/components/challenge/ActiveChallengesList.vue'
+import InactiveChallengeList from '@/components/challenge/InactiveChallengeList.vue'
import router from '@/router'
-import { useTokenStore } from '@/stores/token'
-import { getActiveChallenges, getInactiveChallenges } from '@/utils/challengeutils'
-import CompleteChallengePopUp from '@/components/challenge/CompleteChallengePopUp.vue'
-
-import JSConfetti from 'js-confetti'
-
-const jsConfetti = new JSConfetti()
-
-interface Challenge{
- challengeId: number,
- challengeTitle: string,
- challengeDescription: string,
- goalSum:number,
- expirationDate:string
-}
-
-const token:string = useTokenStore().jwtToken;
-
-const activeChallenges = ref<Challenge[]>([])
-const inactiveChallenges = ref<Challenge[]>([])
-
-const SIZE = 4
-
-const pages = ref<number>(1)
-const currentPage = ref<number>(0)
+import MilestoneHelpPopUp from '@/components/popups/help/MilestoneHelpPopUp.vue'
+import ChallengeHelpPopUp from '@/components/popups/help/ChallengeHelpPopUp.vue'
const displayType = ref<boolean>(true);
+const displayHelpPopUp = ref<boolean>(false)
-const displayPopUp = ref<boolean>(false);
-const completedChallenge = ref<number|any>(null)
-
-
-onMounted(async () => {
- try {
- currentPage.value = 0;
-
- await fetchInactiveChallenges();
- await fetchActiveChallenges();
- } catch (error) {
- console.error('Error fetching user info:', error);
- }
-})
-
-const fetchInactiveChallenges = async () => {
- try {
- const { content } = await getInactiveChallenges(token)
-
- inactiveChallenges.value = []
-
- for (let i = 0; i < content.length; i++) {
-
- const date = new Date(content[i].expirationDate);
-
- const formattedDate = date.toLocaleDateString('en-GB', {
- day: '2-digit',
- month: '2-digit',
- year: 'numeric'
- });
-
- inactiveChallenges.value.push({
- challengeId: content[i].challengeId,
- challengeTitle: content[i].challengeTitle,
- challengeDescription: content[i].challengeDescription,
- goalSum: content[i].goalSum,
- expirationDate: formattedDate
- })
- }
- console.log(inactiveChallenges.value)
- } catch (error) {
- console.error('Error fetching active challenges:', error);
- }
-}
-
-const fetchActiveChallenges = async () => {
- try{
- const { content, totalPages, number } =
- await getActiveChallenges(token, currentPage.value,SIZE)
-
- pages.value = totalPages;
- currentPage.value = number;
-
- activeChallenges.value = [];
-
- for(let i = 0; i < content.length; i ++){
- console.log(content.data)
-
- const date = new Date(content[i].expirationDate);
-
- const formattedDate = date.toLocaleDateString('en-US', {
- day: '2-digit',
- month: '2-digit',
- year: 'numeric'
- });
-
- activeChallenges.value.push({
- challengeId:content[i].challengeId,
- challengeTitle:content[i].challengeTitle,
- challengeDescription:content[i].challengeDescription,
- goalSum:content[i].goalSum,
- expirationDate:formattedDate
- })
- }
- console.log(activeChallenges.value)
- } catch (error){
- console.error('Error fetching inactive challenges:', error);
- }
-}
-
-// Function to handle the emitted challengeAccepted event
-const handleChallengeAccepted = async () => {
- console.log('handling it')
- await fetchActiveChallenges();
- await fetchInactiveChallenges();
-}
-
-// Function to handle the emitted challengeDeclined event
-const handleChallengeDeclined = async () => {
- await fetchInactiveChallenges();
-}
-
-const handleRequestToCompleteChallenge = (challengeId: number) => {
- displayPopUp.value = true;
- completedChallenge.value = challengeId;
-}
-
-const handleChallengeCompleted = async () => {
- await closePopUp();
- await jsConfetti.addConfetti();
-}
-
-const closePopUp = async () => {
- displayPopUp.value = false;
- await fetchActiveChallenges();
-}
const displayNewChallenges = () => {
displayType.value = false;
@@ -145,121 +16,91 @@ const displayNewChallenges = () => {
const displayActiveChallenges = () => {
displayType.value = true;
-
}
-
const navigateTo = (path: string) => {
router.push(path)
}
-const previousPage = () => {
- currentPage.value --
-}
-const goToPage = (pageNumber:number) => {
- currentPage.value = pageNumber;
-}
-const nextPage = () =>{
- currentPage.value ++;
+const openHelpPopUp = () => {
+ displayHelpPopUp.value = true;
+}
+const closeHelpPopUp = async () => {
+ displayHelpPopUp.value = false;
}
-
-watch(currentPage, fetchActiveChallenges);
-
</script>
<template>
- <div class="challenge-view" :aria-disabled="displayPopUp">
-
- <div v-if="displayPopUp" class="popup-container">
- <CompleteChallengePopUp
- :challenge-id="completedChallenge"
- @closePopUp="closePopUp"
- @challengeCompleted="handleChallengeCompleted"
- ></CompleteChallengePopUp>
+ <div class="home-view">
+ <div class="header">
+ <h2 class="title">Dine utfordringer!</h2>
+ <img
+ src="/src/components/icons/navigation/help.svg"
+ alt="hjelp"
+ @click="openHelpPopUp"
+ class="help-icon">
+ <div v-if="displayHelpPopUp" class="popup-container">
+ <ChallengeHelpPopUp
+ @closePopUp="closeHelpPopUp"
+ ></ChallengeHelpPopUp>
+ </div>
</div>
-
-
- <h2 class="title">Dine utfordringer</h2>
<div class="toggle-buttons">
<button class="toggle-button" @click="displayActiveChallenges" :class="{ 'active-button': displayType}">
<h3 class="toggle-button-title">Nye utfordringer</h3>
</button>
-
<button class="toggle-button" @click="displayNewChallenges" :class="{ 'active-button': !displayType}">
<h3 class="toggle-button-title">Aktive utfordringer</h3>
</button>
-
</div>
<div class="main">
<div class="left" :class="{ 'mobile-hide': !displayType }">
-
<button class="create-challenge-button" @click="navigateTo('/homepage/create-challenge')">
- <h2 class="create-challenge-button-title">Ny personlig utfordring + </h2>
+ <h2 class="display-help-button">Ny personlig utfordring + </h2>
</button>
- <div class="challenge-recommendations">
- <PotentialChallengeDisplay
- class="potential-challenge"
- v-for="(potentialChallenge, index) in inactiveChallenges"
- :key="index"
- :challenge="potentialChallenge"
- @challengeAccepted="handleChallengeAccepted"
- @challengeDeclined="handleChallengeDeclined"
- ></PotentialChallengeDisplay>
-
- <h4 class="challenge-placeholder" v-if="inactiveChallenges.length == 0">
- Ojda, her gikk det unna.<br>
- Vi har for øyeblikket ingen flere forslag til utfordringer. <br>
- Lag din egen personlige utfordring eller kom tilbake senere! <br>
- Nye utfordringer blir generert med gjevne mellomrom.
- </h4>
- </div>
-
+ <InactiveChallengeList></InactiveChallengeList>
</div>
-
<div class="right" :class="{ 'mobile-hide': displayType }">
<h2 class="active-challenges-title">Aktive utfordringer</h2>
- <div class="active-challenge-box">
- <div class="active-challenges">
- <ActiveChallengeDisplay
- class="active-challenge"
- v-for="(activeChallenge, index) in activeChallenges"
- :key="index"
- :challenge="activeChallenge"
- @challengeCompleted="handleRequestToCompleteChallenge(activeChallenge.challengeId)"
- ></ActiveChallengeDisplay>
- <h4 class="challenge-placeholder" id="active-challenge-placeholder" v-if="activeChallenges.length == 0">
- Du har ingen aktive utfordringer.<br>
- Lag din egen utfordring eller aksepter våre tilpassede forslag!
- Aktive utfordringer vil vises i denne boksen.
- </h4>
- </div>
- <div class="pagination">
- <button @click="previousPage" :disabled="currentPage === 0">Forige side</button>
- <div v-if="pages>0" class="page-numbers">
- <button
- v-for="pageNumber in pages"
- :key="pageNumber-2"
- :class="{ chosen: pageNumber-1 === currentPage }"
- @click="goToPage(pageNumber-1)"
- >{{ pageNumber}}</button>
- </div>
- <button @click="nextPage" :disabled="currentPage === pages - 1 || pages === 0">Neste side</button>
- </div>
- </div>
+ <ActiveChallengesList></ActiveChallengesList>
</div>
</div>
</div>
-
</template>
<style scoped>
-.challenge-view{
+.home-view{
display: flex;
flex-direction: column;
+ height: 100%;
+ width: 100%;
+
gap: 2.5%;
+}
- height: 100%;
+.header{
+ display: flex;
+ flex-direction: row;
+ place-content: space-between;
+ max-height: 6.5%;
+}
+
+.help-icon:hover{
+ transform: scale(1.05);
+}
+
+.popup-container {
+ position: fixed; /* Change to fixed to cover the entire viewport */
+ top: 0;
+ left: 0;
width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ background-color: rgba(64, 64, 64, 0.5);
+
+ align-items: center;
+ z-index: 1000; /* Adjust z-index as needed */
}
.title{
@@ -273,9 +114,9 @@ watch(currentPage, fetchActiveChallenges);
.main{
display: flex;
flex-direction: row;
-
- min-height: 100%;
width: 100%;
+ min-height: 115%;
+ padding-bottom: 1.5%;
gap: 2.5%;
}
@@ -283,8 +124,10 @@ watch(currentPage, fetchActiveChallenges);
display: flex;
flex-direction: column;
width: 60%;
+ min-height: 100%;
gap: 2.5%;
}
+
.create-challenge-button{
border-radius: 20px;
background-color: var(--color-confirm-button);
@@ -301,48 +144,20 @@ watch(currentPage, fetchActiveChallenges);
transform: scale(1.02);
}
-.create-challenge-button-title{
+.display-help-button{
font-weight: bold;
}
-.challenge-recommendations{
- display: flex;
- flex-direction: column;
-
- height: 100%;
- width: 100%;
- gap: 2.5%;
-}
-
-.challenge-placeholder{
- text-align: center;
-}
-
-#active-challenge-placeholder{
- color: var(--color-headerText);
-}
-.potential-challenge{
- border-radius: 20px;
- border: 2px solid var(--color-border);
- box-shadow: 0 4px 4px var(--color-shadow);
-
- height: calc(100%/3);
- width: 100%;
-}
-
-.potential-challenge:hover{
- transform: scale(1.02);
-}
-
.right{
display: flex;
flex-direction: column;
- place-content: space-evenly;
+ place-content: space-between;
- border: 2px solid var(--color-border);
border-radius: 20px;
+ border: 2px solid var(--color-border);
box-shadow: 0 4px 4px var(--color-shadow);
background-color: var(--color-heading);
+
height: 100%;
width: 40%;
}
@@ -353,118 +168,13 @@ watch(currentPage, fetchActiveChallenges);
font-weight: bold;
}
-.active-challenge-box{
- display: flex;
- flex-direction: column;
-
- height: 100%;
- width: 100%;
-
- padding: 5.0%;
-
- place-content: space-between;
-}
-
-.active-challenges{
- display: flex;
- flex-direction: column;
- height: 100%;
- width: 100%;
- gap:2.5%
-}
-
-.active-challenge{
- border-radius: 20px;
- border: 2px solid var(--color-border);
- background-color: var(--color-background-white);
-
- min-height: calc(calc(100% - 2.5*4%)/4);
- width: 100%;
-}
-
-.active-challenge:hover{
- transform: scale(1.05);
-}
-
-.pagination {
- display: flex;
- justify-content: center;
- align-items: center;
- width: 100%;
- flex: 1;
-}
-
-.pagination button {
- padding: 5px 10px;
- margin: 0 5px;
- border: none;
- border-radius: 5px;
- background-color: var(--color-pageination-button);
-}
-
-.pagination button:hover {
- transform: scale(1.05);
-}
-
-.pagination button:active{
- background-color: var(--color-pageination-button-click);
-}
-
-.pagination button:disabled {
- color: var(--color-inactive-button-text);
- cursor: not-allowed;
- transform: none;
- background-color: var(--color-pageination-button) ;
-}
-
-.page-numbers {
- display: flex;
-}
-
-.page-numbers button {
- border: 1px solid var(--color-border);
- border-radius: 5px;
- background-color: var(--color-pageination-button);
-}
-
-.page-numbers button:hover {
- transform: scale(1.05);
-}
-
-.page-numbers button:active {
- background-color: var(--color-pageination-button-click);
-}
-
-.chosen{
- color: var(--color-heading);
- font-weight: bold;
-}
-
-.popup-container {
- position: fixed; /* Change to fixed to cover the entire viewport */
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- display: flex;
- justify-content: center;
- background-color: rgba(64, 64, 64, 0.5);
-
- align-items: center;
- z-index: 1000; /* Adjust z-index as needed */
-}
-
-
@media only screen and (max-width: 1000px){
.main{
display: flex;
flex-direction: column;
- min-height: 100%;
+ min-height: 150%;
width: 100%;
-
- padding-top: 1.0%;
- padding-bottom: 1.0%;
}
.toggle-buttons{
@@ -509,10 +219,12 @@ watch(currentPage, fetchActiveChallenges);
width: 100%;
}
- .challenge-recommendations{
- min-height: 100%;
- }
+}
+@media (prefers-color-scheme: dark) {
+ .help-icon{
+ filter: invert(1);
+ }
}
</style>
\ No newline at end of file
diff --git a/src/views/HomePage/DiscoverView.vue b/src/views/HomePage/DiscoverView.vue
index 2f62e358365cdfa26810df1173ae14dd8cc8d214..dc6da0a6f4c954e62180df02d57c427ca2dd5274 100644
--- a/src/views/HomePage/DiscoverView.vue
+++ b/src/views/HomePage/DiscoverView.vue
@@ -1,5 +1,6 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue';
+import DicoverHelpPopUp from '@/components/popups/help/DicoverHelpPopUp.vue'
type Article = {
source: {
@@ -15,6 +16,17 @@ type Article = {
content: string | null;
};
+const displayHelpPopUp = ref<boolean>(false)
+
+
+const openHelpPopUp = () => {
+ displayHelpPopUp.value = true;
+}
+const closeHelpPopUp = async () => {
+ displayHelpPopUp.value = false;
+}
+
+
const articles = ref<Article[]>([]);
onMounted(async () => {
@@ -30,22 +42,34 @@ onMounted(async () => {
<template>
<div class="discover-view">
- <h2 id="view-title">Utforsk økonomi og sparenyheter fra E24</h2>
- <p id="view-description">Her kan du se de nyeste artiklene fra E24 anngående
- sparing og bank. Klikk på en artikkel som virker interessant.</p>
- <ul class="discover-items">
- <li v-for="(article, index) in articles" :key="index" class="article-item">
+ <div class="header">
+ <h2 id="view-title">Sparetips og økonomi fra E24!</h2>
+ <img
+ src="/src/components/icons/navigation/help.svg"
+ alt="hjelp"
+ @click="openHelpPopUp"
+ class="help-icon">
+ <div v-if="displayHelpPopUp" class="popup-container">
+ <DicoverHelpPopUp
+ @closePopUp="closeHelpPopUp"
+ ></DicoverHelpPopUp>
+ </div>
+ </div>
+
+ <div class="discover-items">
+ <div v-for="(article, index) in articles" :key="index" class="article-item">
<a :href="article.url" target="_blank" class="article-link">
<div class="article-content">
- <div class="article-title">{{ article.title }}</div>
- <div class="article-description">{{ article.description }}</div>
+ <h3 class="article-title">{{ article.title }}</h3>
+ <h4 class="article-description">{{ article.description }}</h4>
<div class="image-div">
<img :src="article.urlToImage" alt="Article Thumbnail" class="image">
</div>
</div>
</a>
- </li>
- </ul>
+ </div>
+ </div>
+
</div>
</template>
@@ -56,6 +80,10 @@ onMounted(async () => {
.article-content {
background-color: var(--vt-c-black-mute);
}
+
+ .help-icon{
+ filter: invert(1);
+ }
}
/* Light mode media query */
@@ -65,14 +93,33 @@ onMounted(async () => {
}
}
-#view-title {
- color: var(--color-heading);
- padding-left: 15px;
+.header{
+ display: flex;
+ flex-direction: row;
+ place-content: space-between;
+ max-height: 6.5%;
}
-#view-description {
- color: var(--color-text);
- padding-left: 15px;
+.help-icon:hover{
+ transform: scale(1.05);
+}
+
+.popup-container {
+ position: fixed; /* Change to fixed to cover the entire viewport */
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ background-color: rgba(64, 64, 64, 0.5);
+
+ align-items: center;
+ z-index: 1000; /* Adjust z-index as needed */
+}
+
+#view-title {
+ color: var(--color-heading);
}
.discover-view {
@@ -80,74 +127,63 @@ onMounted(async () => {
flex-direction: column;
width: 100%;
height: 100%;
- min-height: 650px;
- gap: 2.5%;
}
.discover-items {
- list-style-type: none;
- padding: 0;
display: flex;
flex-wrap: wrap;
- align-items: center;
+ width: 100%;
+ row-gap: 0.2%;
+ column-gap: 1.5%;
}
.article-item {
- width: calc(33.33% - 10px);
- padding: 10px;
- height: 400px;
- padding-top: 0;
+ width: calc(calc(100% - 2 * 1.5%) / 3);
+ height: 7.0%;
}
.article-content {
display: flex;
flex-direction: column;
- border-radius: 10px;
- padding: 10px;
- overflow: hidden;
+ padding: 5.0%;
+ border-radius: 20px;
height: 100%;
- justify-content: space-around;
- align-content: center;
- object-fit: contain;
+ width: 100%;
+ justify-content: space-between;
+ align-content: start;
}
.article-title {
- font-size: 130%;
font-weight: bold;
- margin-bottom: 5px;
- line-height: 20px;
-}
-
-.article-description {
- font-size: 110%;
- font-weight: normal;
- line-height: initial;
}
.image {
- margin-top: 5px;
- max-width: 100%;
- max-height: 100%;
- object-fit: contain;
- border-radius: 10px;
+ width: 100%;
+ border-radius: 20px;
}
.image-div {
display: flex;
justify-content: center;
- align-items: center;
+ align-items: end;
height: 50%;
+ overflow: hidden;
+ border-radius: 20px;
}
-@media screen and (max-width: 1200px) {
+
+@media screen and (max-width: 900px) {
.article-item {
- width: calc(50% - 10px);
+ width: calc(calc(98.5%) / 2);
+ height: 5.5%;
}
}
-@media screen and (max-width: 480px) {
+@media screen and (max-width: 600px) {
+
.article-item {
- width: calc(100% - 10px);
+ width: 100%;
+ aspect-ratio: 1/0.5;
}
}
@@ -155,6 +191,5 @@ onMounted(async () => {
text-decoration: none;
color: inherit;
transition: none;
- padding: 0;
}
</style>
\ No newline at end of file
diff --git a/src/views/HomePage/EconomyView.vue b/src/views/HomePage/EconomyView.vue
index af02ae6d1bf0d1e1283759aad5a56763ec6f90ec..e27f83bf841ae066a811371a11b8e98020f02327 100644
--- a/src/views/HomePage/EconomyView.vue
+++ b/src/views/HomePage/EconomyView.vue
@@ -6,6 +6,8 @@ import TransactionComponent from '@/components/economy/TransactionComponent.vue'
import ToggleButton from '@/components/economy/ToggleButton.vue'
import { getTransactions } from '@/utils/TransactionUtils'
import { useTokenStore } from '@/stores/token'
+import MilestoneHelpPopUp from '@/components/popups/help/MilestoneHelpPopUp.vue'
+import EconomyHelpPopUp from '@/components/popups/help/EconomyHelpPopUp.vue'
ChartJS.register(ArcElement,Tooltip,Legend, Colors)
@@ -22,9 +24,26 @@ const token:string = useTokenStore().jwtToken;
const selectedOption = ref<string | null>("")
-//let page = 0;
-let pages = 0;
-let currentPage = 0;
+const displayHelpPopUp = ref<boolean>(false)
+
+
+
+const pages = ref<number>(0);
+const currentPage = ref<number>(0);
+
+const previousPage = () => {
+ currentPage.value --
+ fetchTransactions();
+}
+const goToPage = (pageNumber:number) => {
+ currentPage.value = pageNumber;
+ fetchTransactions();
+}
+
+const nextPage = () =>{
+ currentPage.value ++;
+ fetchTransactions();
+}
const transactions = ref<Transaction[]>([])
const fetchTransactions = async() => {
@@ -41,14 +60,25 @@ onMounted(() => {
fetchTransactions()
})
+const displayType = ref<boolean>(false)
+const displayNewChallenges = () => {
+ displayType.value = false;
+ console.log(displayType.value)
+}
+const displayActiveChallenges = () => {
+ displayType.value = true;
+ console.log(displayType.value)
+}
-const chartVisible = ref(false)
-
-const toggleChart = (value: boolean) => {
- chartVisible.value = value
- console.log(chartVisible.value)
+const openHelpPopUp = () => {
+ displayHelpPopUp.value = true;
}
+const closeHelpPopUp = () => {
+ displayHelpPopUp.value = false;
+ console.log(displayHelpPopUp);
+}
+
const handleSelectionChange = (value: string | null) => {
selectedOption.value = value
}
@@ -69,7 +99,6 @@ const dropdownOptions = computed(() => {
const filteredTransactions = computed(() => {
if (selectedOption.value === 'Alle' || !selectedOption.value) {
- console.log(transactions.value)
return transactions.value
} else {
return transactions.value.filter(transaction => transaction.transactionCategory === selectedOption.value)
@@ -118,118 +147,129 @@ const getRandomColor = () => {
return color
}
-//
-// const transactions1 = ref([
-// { id: 1,
-// title: 'Rema 1000',
-// date: '2022-05-10',
-// amount: 100,
-// category: 'Dagligvare'
-// },
-// { id: 2,
-// title: 'Trondheim Kino',
-// date: '2022-05-15',
-// amount: 500,
-// category: 'Underholdning'
-// },
-// { id: 3,
-// title: 'SIT',
-// date: '2022-05-15',
-// amount: 4450,
-// category: 'regninger'
-// },
-// { id: 4,
-// title: 'Superhero Burger',
-// date: '2022-05-15',
-// amount: 1500,
-// category: 'Mat & Restaurant'
-// },
-// { id: 6,
-// title: 'Kiwi',
-// date: '2022-05-20',
-// amount: 100,
-// category: 'Dagligvare'
-// },
-// ])
</script>
<template>
- <div class="economy-ui">
-
- <h2>Ditt forbruk</h2>
+ <div class="economy-view">
+
+ <div class="header">
+ <h2 class="title">Dine transaksjoner!</h2>
+ <img
+ src="/src/components/icons/navigation/help.svg"
+ alt="hjelp"
+ @click="openHelpPopUp"
+ class="help-icon">
+ <div v-if="displayHelpPopUp" class="popup-container">
+ <EconomyHelpPopUp
+ @closePopUp="closeHelpPopUp"
+ ></EconomyHelpPopUp>
+ </div>
+ </div>
- <div class="container">
- <div class="toggle-button-container">
- <ToggleButton @toggle-chart="toggleChart" />
- <span> Vis graf </span>
+ <div class="toggle-buttons">
+ <button class="toggle-button" @click="displayNewChallenges" :class="{ 'active-button': !displayType}">
+ <h3 class="toggle-button-title">Transaksjoner</h3>
+ </button>
+ <button class="toggle-button" @click="displayActiveChallenges" :class="{ 'active-button': displayType}">
+ <h3 class="toggle-button-title">Diagram</h3>
+ </button>
</div>
- <div class="box" :class="{ 'mobile-hide': chartVisible }">
- <div class="custom-dropdown-container">
- <select class="custom-dropdown" v-model="selectedOption" @change="handleSelectionChange(selectedOption)">
- <option disabled value="" selected>Velg kategori</option>
- <option v-for="option in dropdownOptions" :key="option" :value="option">{{ option }}</option>
- </select>
- </div>
- <div class="component-container" v-if="filteredTransactions">
- <transaction-component
- v-for="transaction in filteredTransactions"
- :key="transaction.transactionId"
- :title="transaction.transactionTitle"
- :category="transaction.transactionCategory"
- :amount="transaction.amount"
- :date="transaction.date"
- ></transaction-component>
- </div>
- <div class="pagination">
- <button :disabled="currentPage === 0">Previous</button>
- <div v-if="pages>0" class="page-numbers">
- <button
- v-for="pageNumber in pages"
- :key="pageNumber-2"
- :class="{ active: pageNumber-1 === currentPage }"
- >{{ pageNumber}}</button>
+
+ <div class="container">
+
+ <div class="box" :class="{'hide': displayType }">
+ <div class="custom-dropdown-container">
+ <select class="custom-dropdown" v-model="selectedOption" @change="handleSelectionChange(selectedOption)">
+ <option disabled value="" selected>Kategori</option>
+ <option v-for="option in dropdownOptions" :key="option" :value="option">{{ option }}</option>
+ </select>
+ </div>
+
+ <div class="component-container" v-if="filteredTransactions">
+ <transaction-component
+ v-for="transaction in filteredTransactions"
+ :key="transaction.transactionId"
+ :title="transaction.transactionTitle"
+ :category="transaction.transactionCategory"
+ :amount="transaction.amount"
+ :date="transaction.date"
+ ></transaction-component>
+ </div>
+
+ <div class="pagination">
+ <button @click="previousPage" :disabled="currentPage === 0">Forige side</button>
+ <div v-if="pages>0" class="page-numbers">
+ <button
+ v-for="pageNumber in pages"
+ :key="pageNumber-2"
+ :class="{ chosen: pageNumber-1 === currentPage }"
+ @click="goToPage(pageNumber-1)"
+ >{{ pageNumber}}</button>
+ </div>
+ <button @click="nextPage" :disabled="currentPage === pages - 1 || pages === 0">Neste side</button>
</div>
- <button :disabled="currentPage === pages - 1 || pages === 0">Next</button>
</div>
- </div>
- <div id="pie-box" :class="{ 'mobile-show': chartVisible }">
- <Pie :data="chartData" :options="{ maintainAspectRatio: false }"></Pie>
+
+ <div class="pie-box" :class="{ 'hide': !displayType}">
+ <Pie :data="chartData" :options="{ maintainAspectRatio: false }"></Pie>
</div>
+
</div>
+
</div>
</template>
-
-
-
<style scoped>
-
-.economy-ui {
+.economy-view {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
+ gap: 2.5%;
}
-h2 {
- color: #6AB40A;
- font-style: normal;
- font-weight: 500;
- line-height: normal;
- padding-bottom: 1%;
-}
-
-.custom-dropdown-container {
+.popup-container {
+ position: fixed; /* Change to fixed to cover the entire viewport */
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
display: flex;
- flex-direction: column;
justify-content: center;
+ background-color: rgba(64, 64, 64, 0.5);
+
align-items: center;
+ z-index: 1000; /* Adjust z-index as needed */
+}
+
+.header{
+ display: flex;
+ flex-direction: row;
+ place-content: space-between;
+ max-height: 6.5%;
+}
+
+.help-icon:hover{
+ transform: scale(1.05);
+}
+
+.title{
+ color: var(--color-heading);
+}
+
+.toggle-buttons{
+ display: none;
}
.container {
display: flex;
+ flex-direction: row;
height: 100%;
+ width: 100%;
+ gap: 2.5%;
+ padding-bottom: 2.5%;
+ place-content: space-between;
}
.component-container {
@@ -237,58 +277,81 @@ h2 {
flex-direction: column;
justify-content: center;
align-items: center;
- padding-top: 1.25%;
+
+ width: 100%;
+ height: 100%;
+
+ overflow-y: hidden;
+
}
-#pie-box,
-.box {
+
+.pie-box, .box{
+ display: flex;
+ flex-direction: column;
+
border-radius: 20px;
border: 1px solid var(--color-border);
- width:100%;
- max-width: 600px; /* Limit maximum width */
- min-height: 510px;
- height: auto;
+
+ width:50%;
+ height: 100%;
+
+ padding: 1.5%;
+
box-shadow: 0 4px 4px 0 var(--color-shadow);
- transition: transform 0.3s ease-in-out;
background-color: var(--color-background);
- margin-right: 1%;
+ transition: transform 0.3s ease-in-out;
}
+.box{
+ place-content: space-between;
+ gap: 2.5%;
+}
+.custom-dropdown-container {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 8.0%;
+}
.custom-dropdown {
- width: 80%;
- height: 7%;
+ width: 100%;
+ height: 100%;
padding: 8px;
- margin-top: 2%;
- margin-bottom: 2%;
border-radius: 20px;
}
-
-
.pagination {
display: flex;
justify-content: center;
align-items: center;
+ width: 100%;
}
.pagination button {
padding: 5px 10px;
margin: 0 5px;
- border: 1px var(--color-border);
- border-radius: 3px;
- background-color: transparent;
- cursor: pointer;
+ border: 1px solid var(--color-border);
+ border-radius: 5px;
+ background-color: var(--color-pageination-button);
}
.pagination button:hover {
- background-color: #f0f0f0;
+ transform: scale(1.05);
+}
+
+.pagination button:active{
+ background-color: var(--color-pageination-button-click);
}
.pagination button:disabled {
- color: #ccc;
+ color: var(--color-inactive-button-text);
cursor: not-allowed;
+ transform: none;
+ background-color: var(--color-pageination-button) ;
}
.page-numbers {
@@ -296,82 +359,73 @@ h2 {
}
.page-numbers button {
- padding: 5px 10px;
- margin: 0 2px;
- border: 1px solid #ccc;
- border-radius: 3px;
- background-color: transparent;
- cursor: pointer;
-}
-
-.page-numbers button.active {
- background-color: #5E5CE5;
- color: white;
+ border: 1px solid var(--color-border);
+ border-radius: 5px;
+ background-color: var(--color-pageination-button);
}
.page-numbers button:hover {
- background-color: #f0f0f0;
+ transform: scale(1.05);
}
-.page-numbers button:disabled {
- color: #ccc;
- cursor: not-allowed;
+.page-numbers button:active {
+ background-color: var(--color-pageination-button-click);
}
-.toggle-button-container{
- display: none;
+.chosen{
+ color: var(--color-heading);
+ font-weight: bold;
}
+@media screen and (max-width: 1000px) {
-@media screen and (max-width: 1300px) {
- .box {
- width: 100%;
- min-height: 580px;
- margin:10px /* Adjust margin for smaller screens */
+ .hide{
+ display: none;
}
- .container {
- flex-direction: column; /* Change flex direction for smaller screens */
- align-content: center;
- height: 100%;
+ .toggle-buttons{
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ min-height: 7.5%;
+ place-content: space-between;
}
- h2 {
- font-size: 3em; /* Adjust font size for smaller screens */
- }
- span {
- font-size: 1.9em;
- }
- .toggle-button-container {
- display:block;
- margin-left: 6%;
- justify-content: center;
+ .toggle-button{
+ width: 49.5%;
+ border-radius: 20px;
+ border: none;
+ background-color: var(--color-confirm-button);
}
- .custom-dropdown{
- font-size: 1.8em;
+ .toggle-button:hover{
+ transform: scale(1.02);
}
+ .toggle-button-title{
+ font-weight: bold;
+ color: var(--color-headerText);
+ }
- #pie-box {
- display: none; /* Show the graph container on mobile by default */
- height: 650px;
+ .active-button{
+ background-color: var(--color-confirm-button-click);
}
- /* Show the graph container only when chartVisible is true */
- .mobile-show {
- display: block !important;
+ .pie-box {
+ width: 100%;
+ height: 100%;
}
- /* Hide the transactions box when chartVisible is true */
- .box.mobile-hide {
- display: none;
+ .box{
+ width: 100%;
+ height: 100%;
}
-}
-@media (prefers-color-scheme: dark){
- h2{
- color: var(--vt-c-kellyGreen-Light);
+ .container {
+ flex-direction: column; /* Change flex direction for smaller screens */
+ align-content: center;
+ height: 100%;
}
}
+
</style>
diff --git a/src/views/HomePage/HomeView.vue b/src/views/HomePage/HomeView.vue
index 947f8c8b5bca7d76f43fc10f8f035ccec1fed964..f23384ef929f0ce8fdaac33cb72eb206f66a83f9 100644
--- a/src/views/HomePage/HomeView.vue
+++ b/src/views/HomePage/HomeView.vue
@@ -1,38 +1,32 @@
<script setup lang="ts">
-
-import { getAllMilestones } from '@/utils/MilestoneUtils'
-import { useTokenStore } from '@/stores/token'
-import { getActiveChallenges } from '@/utils/challengeutils'
+import {ref} from 'vue'
+import ActiveChallengesList from '@/components/challenge/ActiveChallengesList.vue'
+import router from '@/router'
import ActiveMilestonesList from '@/components/milestone/ActiveMilestonesList.vue'
-import TotalSavings from '@/components/HomeComponents/TotalSavings.vue'
-import { ref } from 'vue'
import { getUserTotalSavings } from '@/utils/HomePageUtils'
-console.log(getAllMilestones(useTokenStore().getJwtToken));
-console.log(getActiveChallenges(useTokenStore().getJwtToken, 0, 5))
+import HomeHelpPopUp from '@/components/popups/help/HomeHelpPopUp.vue'
-const showMilestones = ref(true)
-const showChallenges = ref(false)
+const displayType = ref<boolean>(true);
+const displayHelpPopUp = ref<boolean>(false);
-function checkScreenWidth() {
- if(window.innerWidth >= 1000){
- showMilestones.value = true;
- showChallenges.value = true;
- }
+const displayNewChallenges = () => {
+ displayType.value = false;
}
-function showMilestonesView(){
- showMilestones.value = true
- showChallenges.value = false
+const displayActiveChallenges = () => {
+ displayType.value = true;
}
-
-function showChallengesView(){
- showChallenges.value = true
- showMilestones.value = false
+const navigateTo = (path: string) => {
+ router.push(path)
}
-checkScreenWidth()
-
+const openHelpPopUp = () => {
+ displayHelpPopUp.value = true;
+}
+const closeHelpPopUp = async () => {
+ displayHelpPopUp.value = false;
+}
const saved = ref(0)
@@ -44,92 +38,203 @@ userSavings()
</script>
<template>
- <div id = TopInfo>
- <h2 id ="Welcome">Velkommen!</h2>
- <TotalSavings id = TotalSavings :total-saved="saved"/>
- </div>
- <div id = MobileButtons>
- <button class = mobileButton @click="showMilestonesView()">Sparemål</button>
- <button class = mobileButton @click="showChallengesView()">Utfordringer</button>
- </div>
- <div id = HomeViewComponents>
- <div class = ActiveMilestones v-show="showMilestones">
- <ActiveMilestonesList/>
+ <div class="home-view">
+ <div class="header">
+ <h2 class="title">Velkommen til Sparesti!</h2>
+ <img
+ src="/src/components/icons/navigation/help.svg"
+ alt="hjelp"
+ @click="openHelpPopUp"
+ class="help-icon">
+ <div v-if="displayHelpPopUp" class="popup-container">
+ <HomeHelpPopUp
+ @closePopUp="closeHelpPopUp"
+ ></HomeHelpPopUp>
+ </div>
</div>
- <div class = ActiveChallenges v-show="showChallenges">
- <h3>Placeholder</h3>
+
+ <div class="toggle-buttons">
+ <button class="toggle-button" @click="displayActiveChallenges" :class="{ 'active-button': displayType}">
+ <h3 class="toggle-button-title">Nye utfordringer</h3>
+ </button>
+ <button class="toggle-button" @click="displayNewChallenges" :class="{ 'active-button': !displayType}">
+ <h3 class="toggle-button-title">Aktive utfordringer</h3>
+ </button>
+ </div>
+ <div class="main">
+ <div class="left" :class="{ 'mobile-hide': !displayType }">
+ <button class="create-challenge-button" @click="navigateTo('/homepage/create-challenge')">
+ <h2 class="display-help-button">
+ Ny til Sparesti? Klikk her!
+ </h2>
+ </button>
+ <ActiveMilestonesList></ActiveMilestonesList>
+ </div>
+ <div class="right" :class="{ 'mobile-hide': displayType }">
+ <h2 class="active-challenges-title">Aktive utfordringer</h2>
+ <ActiveChallengesList></ActiveChallengesList>
+ </div>
</div>
</div>
</template>
<style scoped>
+.home-view{
+ display: flex;
+ flex-direction: column;
- #TopInfo{
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
+ height: 100%;
+ width: 100%;
+
+ gap: 2.5%;
+}
+
+.header{
+ display: flex;
+ flex-direction: row;
+ place-content: space-between;
+ max-height: 6.5%;
+}
+
+.help-icon:hover{
+ transform: scale(1.05);
+}
+
+.popup-container {
+ position: fixed; /* Change to fixed to cover the entire viewport */
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ background-color: rgba(64, 64, 64, 0.5);
+
+ align-items: center;
+ z-index: 1000; /* Adjust z-index as needed */
+}
+
+.title{
+ color: var(--color-heading);
+}
+.toggle-buttons {
+ display: none;
+}
- #HomeViewComponents{
+.main{
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ min-height: 120%;
+ padding-bottom: 1.5%;
+ gap: 2.5%;
+}
+
+.left{
+ display: flex;
+ flex-direction: column;
+ width: 60%;
+ min-height: 100%;
+ gap: 2.5%;
+}
+
+.create-challenge-button{
+ border-radius: 20px;
+ background-color: var(--color-confirm-button);
+ border: 2px solid var(--color-border);
+ color: var(--color-button-text);
+ min-height: 12%;
+}
+
+.create-challenge-button:active{
+ background-color: var(--color-confirm-button-click);
+}
+
+.create-challenge-button:hover{
+ transform: scale(1.02);
+}
+
+.display-help-button{
+ font-weight: bold;
+}
+
+.right{
+ display: flex;
+ flex-direction: column;
+ place-content: space-between;
+
+ border-radius: 20px;
+ border: 2px solid var(--color-border);
+ box-shadow: 0 4px 4px var(--color-shadow);
+ background-color: var(--color-heading);
+
+ height: 100%;
+ width: 40%;
+}
+
+.active-challenges-title{
+ color: var(--color-headerText);
+ text-align: center;
+ font-weight: bold;
+}
+
+@media only screen and (max-width: 1000px){
+ .main{
display: flex;
- }
+ flex-direction: column;
- #MobileButtons{
+ min-height: 150%;
width: 100%;
- display: none;
- justify-content: space-evenly;
- height: 10%;
}
- .mobileButton{
- width: 45%;
- background-color: var(--color-confirm-button);
- color: var(--color-buttonText);
- border: 0;
- font-size: 2em;
- border-radius: 20px;
+ .toggle-buttons{
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ min-height: 7.5%;
+ place-content: space-between;
}
- .ActiveMilestones, .ActiveChallenges{
- margin: 2%;
+ .toggle-button{
+ width: 49.5%;
border-radius: 20px;
+ border: none;
+ background-color: var(--color-confirm-button);
}
- .ActiveMilestones{
- width: 60%;
+ .toggle-button:hover{
+ transform: scale(1.02);
}
- .ActiveChallenges{
- width: 40%;
- box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
-
+ .toggle-button-title{
+ font-weight: bold;
+ color: var(--color-headerText);
}
- @media only screen and (max-width: 1000px) {
- #TopInfo{
- flex-direction: column;
- }
-
- #TotalSavings{
- width: 100%;
- }
+ .active-button{
+ background-color: var(--color-confirm-button-click);
+ }
- #TotalSavings{
- margin: 3%;
- }
+ .mobile-hide{
+ display: none;
+ }
- .ActiveMilestones{
- width: 100%;
- }
+ .left{
+ width: 100%;
+ height: 100%;
+ }
- .ActiveChallenges{
- width: 100%;
- }
+ .right{
+ min-height: 110%;
+ width: 100%;
+ }
+}
- #MobileButtons{
- display: flex;
- }
+@media (prefers-color-scheme: dark) {
+ .help-icon{
+ filter: invert(1);
}
+}
</style>
\ No newline at end of file
diff --git a/src/views/HomePage/MilestonePathView.vue b/src/views/HomePage/MilestonePathView.vue
index 0c3660f9313260007fb923bf0f833d4a5387d175..2033209fed76ee493b44a4ac820e99e04c3a8e4e 100644
--- a/src/views/HomePage/MilestonePathView.vue
+++ b/src/views/HomePage/MilestonePathView.vue
@@ -7,6 +7,11 @@ import MilestoneDescription from '@/components/MilestonePath/MilestoneDescriptio
import MilestonePath from '@/components/MilestonePath/MilestonePath.vue'
import { getMilestoneDetails } from '@/utils/MilestonePathUtils'
import { useMilestoneStore } from '@/stores/currentMilestone'
+import PathHelpPopUp from '@/components/popups/help/PathHelpPopUp.vue'
+import HomeHelpPopUp from '@/components/popups/help/HomeHelpPopUp.vue'
+
+const displayType = ref<boolean>(false)
+const displayHelpPopUp = ref<boolean>(false)
const pathName = ref("PathNameHere")
const pathDescription = ref("PathDescriptionHere")
@@ -14,30 +19,16 @@ const pathDescription = ref("PathDescriptionHere")
const totalToSave = ref(3000)
const totalSaved = ref(0)
-const showPath = ref(true);
-const showInfo = ref(false);
-
const milestonePathKey = ref(0);
-function checkScreenWidth() {
- if(window.innerWidth >= 1000){
- showInfo.value = true;
- showPath.value = true;
- }
+const displayNewChallenges = () => {
+ displayType.value = false;
}
-function showInfoFields(){
- showInfo.value = true;
- showPath.value = false;
+const displayActiveChallenges = () => {
+ displayType.value = true;
}
-function showPathField(){
- showInfo.value = false
- showPath.value = true
-}
-
-checkScreenWidth()
-
onMounted( async () =>{
const milestoneId = useMilestoneStore().milestoneId;
console.log(milestoneId)
@@ -54,30 +45,57 @@ function updateTotalSaved(value: number) {
totalSaved.value += value;
milestonePathKey.value++;
}
+
+const openHelpPopUp = () => {
+ displayHelpPopUp.value = true;
+}
+const closeHelpPopUp = async () => {
+ displayHelpPopUp.value = false;
+}
</script>
<template>
<div id = milestonePathView>
- <h1 id = title>{{pathName}}</h1>
- <div id = mobileButtons>
- <button class = mobileButton @click="showPathField()">Sti</button>
- <button class = mobileButton @click="showInfoFields()">Oversikt</button>
+ <div class="header">
+ <h2 class="title">Sparemål: {{pathName}}</h2>
+ <img
+ src="/src/components/icons/navigation/help.svg"
+ alt="hjelp"
+ @click="openHelpPopUp"
+ class="help-icon">
+ <div v-if="displayHelpPopUp" class="popup-container">
+ <PathHelpPopUp
+ @closePopUpp="closeHelpPopUp"
+ ></PathHelpPopUp>
+ </div>
+ </div>
+
+ <div class="toggle-buttons">
+ <button class="toggle-button" @click="displayActiveChallenges" :class="{ 'active-button': displayType}">
+ <h3 class="toggle-button-title">Informasjon</h3>
+ </button>
+ <button class="toggle-button" @click="displayNewChallenges" :class="{ 'active-button': !displayType}">
+ <h3 class="toggle-button-title">Sparesti</h3>
+ </button>
</div>
<div id = MilestonePath>
- <div id = Path v-show="showPath">
+
+ <div id = Path :class="{'mobile-hide': displayType}">
<MilestonePath :total-to-save="totalToSave" :total-saved="totalSaved" :key="milestonePathKey"/>
</div>
- <div id = Info v-show="showInfo">
+
+ <div id = Info :class="{'mobile-hide': !displayType}">
<div id = Progress>
<MilestoneProgress :total-to-save="totalToSave" :total-saved="totalSaved"/>
</div>
- <div id = Transfer>
- <DirectTransfer @transfer-value="updateTotalSaved"/>
- </div>
<div id = Description>
<MilestoneDescription :path-description="pathDescription"/>
</div>
+ <div id = Transfer>
+ <DirectTransfer @transfer-value="updateTotalSaved"/>
+ </div>
</div>
+
</div>
</div>
@@ -88,29 +106,60 @@ function updateTotalSaved(value: number) {
<style scoped>
#milestonePathView{
+ display: flex;
+ flex-direction: column;
height: 100%;
width: 100%;
+ gap: 2.5%;
}
- #title{
- margin-left: 9%;
+ .header{
+ display: flex;
+ flex-direction: row;
+ place-content: space-between;
+ max-height: 6.5%;
}
- #MilestonePath{
+ .title{
+ color: var(--color-heading);
+ }
+
+ .help-icon:hover{
+ transform: scale(1.05);
+ }
+
+ .popup-container {
+ position: fixed; /* Change to fixed to cover the entire viewport */
+ top: 0;
+ left: 0;
width: 100%;
- height: 80%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ background-color: rgba(64, 64, 64, 0.5);
+
+ align-items: center;
+ z-index: 1000; /* Adjust z-index as needed */
+ }
+
+ .toggle-buttons{
+ display: none;
+ }
+
+ #MilestonePath{
display: flex;
+ width: 100%;
+ height: 100%;
}
#Path{
width: 60%;
- height: 70vh;
+ height: 100%;
}
#Info{
width: 40%;
height: 100%;
- display: block;
}
#Progress{
@@ -123,12 +172,7 @@ function updateTotalSaved(value: number) {
@media only screen and (max-width: 1000px) {
#Path{
- height: 60vh;
- }
-
- #title{
- margin: 0;
- text-align: center;
+ height: 100%;
}
#Path{
@@ -139,32 +183,37 @@ function updateTotalSaved(value: number) {
width: 100%;
}
- #mobileButtons{
- width: 100%;
- height: 8%;
- margin-bottom: 5%;
+ .toggle-buttons{
display: flex;
- justify-content: space-evenly;
- align-items: center;
+ flex-direction: row;
+ width: 100%;
+ min-height: 7.5%;
+ place-content: space-between;
}
- .mobileButton{
- width: 40%;
- height: 100%;
- background-color: var(--color-confirm-button);
- color: var(--color-buttonText);
- border: 0;
+ .toggle-button{
+ width: 49.5%;
border-radius: 20px;
- padding: 1%;
- min-width: 30%;
- font-size: 250%;
+ border: none;
+ background-color: var(--color-confirm-button);
}
- }
+ .toggle-button:hover{
+ transform: scale(1.02);
+ }
+
+ .toggle-button-title{
+ font-weight: bold;
+ color: var(--color-headerText);
+ }
- @media only screen and (min-width: 900px){
- #mobileButtons{
+ .active-button{
+ background-color: var(--color-confirm-button-click);
+ }
+
+ .mobile-hide{
display: none;
}
}
+
</style>
\ No newline at end of file
diff --git a/src/views/HomePage/MilestoneView.vue b/src/views/HomePage/MilestoneView.vue
index fd3fcb72363703ba8bf374ebea48d00b5769bf89..9c2f496c43a77436590f1e2e260ba5b8a1d4b84c 100644
--- a/src/views/HomePage/MilestoneView.vue
+++ b/src/views/HomePage/MilestoneView.vue
@@ -1,118 +1,121 @@
<script setup lang="ts">
-
-import {onMounted, ref} from "vue";
import router from "@/router";
-import CompletedMilestoneDisplay from '@/components/milestone/CompletedMilestoneDisplay.vue'
-import ActiveMilestoneDisplay from '@/components/milestone/ActiveMilestoneDisplay.vue'
-import {getAllMilestoneLogs, getAllMilestones} from "@/utils/MilestoneUtils";
-import {useTokenStore} from "@/stores/token";
import ActiveMilestonesList from '@/components/milestone/ActiveMilestonesList.vue'
+import MilestoneLogList from '@/components/milestone/MilestoneLogList.vue'
+import { ref } from 'vue'
+import HomeHelpPopUp from '@/components/popups/help/HomeHelpPopUp.vue'
+import MilestoneHelpPopUp from '@/components/popups/help/MilestoneHelpPopUp.vue'
-const activeMilestones = ref(<Milestone[]>[])
-const completedMilestones = ref<Milestone[]>([])
+const displayType = ref<boolean>(true)
+const displayHelpPopUp = ref<boolean>(false)
-onMounted(async () => {
- const token = useTokenStore().$state.jwtToken
- activeMilestones.value = await getAllMilestones(token);
- completedMilestones.value = await getAllMilestoneLogs(token);
- console.log(completedMilestones.value);
-})
+const displayNewChallenges = () => {
+ displayType.value = false;
+}
-const pages = ref<number>(1)
-const currentPage = ref<number>(0)
+const displayActiveChallenges = () => {
+ displayType.value = true;
+}
const navigateTo = (path: string) => {
router.push(path)
}
-const previousPage = () => {}
-const goToPage = (pageNumber:number) => {}
-
-const nextPage = () =>{}
-
-interface Milestone{
- milestoneId: number;
- milestoneTitle: string;
- milestoneDescription: string
- milestoneGoalSum: number;
- milestoneCurrentSum: number;
- deadlineDate: Date;
- startDate: Date;
- milestoneImage: string;
- username: string;
+const openHelpPopUp = () => {
+ displayHelpPopUp.value = true;
+}
+const closeHelpPopUp = () => {
+ displayHelpPopUp.value = false;
+ console.log(displayHelpPopUp);
}
</script>
<template>
<div class="milestone-view">
- <h2 class="title">Dine Sparemål</h2>
+ <div class="header">
+ <h2 class="title">Dine sparemål!</h2>
+ <img
+ src="/src/components/icons/navigation/help.svg"
+ alt="hjelp"
+ @click="openHelpPopUp"
+ class="help-icon">
+ <div v-if="displayHelpPopUp" class="popup-container">
+ <MilestoneHelpPopUp
+ @closePopUp="closeHelpPopUp"
+ ></MilestoneHelpPopUp>
+ </div>
+ </div>
+ <div class="toggle-buttons">
+ <button class="toggle-button" @click="displayActiveChallenges" :class="{ 'active-button': displayType}">
+ <h3 class="toggle-button-title">Aktive sparemål</h3>
+ </button>
+ <button class="toggle-button" @click="displayNewChallenges" :class="{ 'active-button': !displayType}">
+ <h3 class="toggle-button-title">Fullførte sparemål</h3>
+ </button>
+ </div>
<div class="main">
- <div class="left">
+ <div class="left" :class="{ 'mobile-hide': !displayType }">
<button class="create-milestone-button" @click="navigateTo('/homepage/create-milestone')">
<h2 class="create-milestone-button-title">Lag nytt sparemål + </h2>
</button>
- <ActiveMilestonesList/>
+ <ActiveMilestonesList class="active-milestones"></ActiveMilestonesList>
</div>
-
- <div class="right">
-
+ <div class="right" :class="{ 'mobile-hide': displayType }">
<h2 class="completed-milestones-title">Sparemål historikk</h2>
- <div class="completed-milestones">
- <template v-if="activeMilestones.length === 0">
- <h4>Du har ingen fullførte sparemål<br>Avsluttede sparemål ender opp her sånn at du får full oversikt.</h4>
- </template>
- <template v-else>
- <CompletedMilestoneDisplay
- class="completed-milestone"
- v-for="(completedMilestone, index) in completedMilestones"
- :key="index"
- :id="completedMilestone.milestoneId"
- :title="completedMilestone.milestoneTitle"
- :description="completedMilestone.milestoneDescription"
- :current-sum="completedMilestone.milestoneCurrentSum"
- :goal-sum="completedMilestone.milestoneGoalSum"
- :deadline="completedMilestone.deadlineDate"
- :start-date="completedMilestone.startDate"
- :image="completedMilestone.milestoneImage"
- ></CompletedMilestoneDisplay>
- <div class="pagination">
- <button @click="previousPage" :disabled="currentPage === 0">Forige side</button>
- <div v-if="pages>0" class="page-numbers">
- <button
- v-for="pageNumber in pages"
- :key="pageNumber-2"
- @click="goToPage(pageNumber-1)"
- :class="{ chosen: pageNumber-1 === currentPage }"
- >{{ pageNumber}}</button>
- </div>
- <button @click="nextPage" :disabled="currentPage === pages - 1 || pages === 0">Neste side</button>
- </div>
- </template>
- </div>
-
+ <MilestoneLogList></MilestoneLogList>
+ </div>
</div>
-</div>
-</div>
+ </div>
</template>
<style scoped>
.milestone-view{
-display: flex;
-flex-direction: column;
+ display: flex;
+ flex-direction: column;
height: 100%;
width: 100%;
+
+ gap: 2.5%;
+}
+.header{
+ display: flex;
+ flex-direction: row;
+ place-content: space-between;
+ max-height: 6.5%;
+}
+
+.help-icon:hover{
+ transform: scale(1.05);
+}
+
+.popup-container {
+ position: fixed; /* Change to fixed to cover the entire viewport */
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ background-color: rgba(64, 64, 64, 0.5);
+
+ align-items: center;
+ z-index: 1000; /* Adjust z-index as needed */
}
.title{
color: var(--color-heading);
}
+.toggle-buttons{
+ display: none;
+}
+
.main{
display: flex;
flex-direction: row;
-
- height: 100%;
width: 100%;
+ min-height: 120%;
+ padding-bottom: 1.5%;
gap: 2.5%;
}
@@ -120,6 +123,7 @@ flex-direction: column;
display: flex;
flex-direction: column;
width: 60%;
+ min-height: 100%;
gap: 2.5%;
}
@@ -146,10 +150,13 @@ flex-direction: column;
.right{
display: flex;
flex-direction: column;
- border: 2px solid var(--color-border);
+ place-content: space-between;
+
border-radius: 20px;
+ border: 2px solid var(--color-border);
box-shadow: 0 4px 4px var(--color-shadow);
background-color: var(--color-heading);
+
height: 100%;
width: 40%;
}
@@ -159,86 +166,66 @@ flex-direction: column;
text-align: center;
font-weight: bold;
}
+@media only screen and (max-width: 1000px){
+ .main{
+ display: flex;
+ flex-direction: column;
-.completed-milestones{
- display: flex;
- flex-direction: column;
- text-align: center;
- height: 100%;
- width: 100%;
- padding: 5.0%;
- gap: 2.5%;
-}
+ min-height: 150%;
+ width: 100%;
-.completed-milestone{
- border-radius: 20px;
- border: 2px solid var(--color-border);
- background-color: var(--color-background-white);
+ padding-top: 1.0%;
+ padding-bottom: 1.0%;
+ }
- min-height: calc(100%/4.8);
- width: 100%;
-}
+ .toggle-buttons{
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ min-height: 7.5%;
+ place-content: space-between;
+ }
-.completed-milestone:hover{
- transform: scale(1.05);
- transition: 0.3s;
-}
+ .toggle-button{
+ width: 49.5%;
+ border-radius: 20px;
+ border: none;
+ background-color: var(--color-confirm-button);
+ }
-.pagination {
- display: flex;
- justify-content: center;
- align-items: center;
- width: 100%;
- flex: 1;
-}
+ .toggle-button:hover{
+ transform: scale(1.02);
+ }
-.pagination button {
- padding: 5px 10px;
- margin: 0 5px;
- border: none;
- border-radius: 5px;
- background-color: var(--color-pageination-button);
-}
+ .toggle-button-title{
+ font-weight: bold;
+ color: var(--color-headerText);
+ }
-.pagination button:hover {
- transition: 0.3s;
- transform: scale(1.05);
-}
+ .active-button{
+ background-color: var(--color-confirm-button-click);
+ }
-.pagination button:active{
- background-color: var(--color-pageination-button-click);
-}
+ .mobile-hide{
+ display: none;
+ }
-.pagination button:disabled {
- color: var( --color-inactive-button-text);
- cursor: not-allowed;
- transform: none;
- background-color: var(--color-pageination-button) ;
-}
+ .left{
+ width: 100%;
+ height: 100%;
+ }
-.page-numbers {
- display: flex;
-}
-
-.page-numbers button {
- border: 1px solid var(--color-border);
- border-radius: 5px;
- background-color: var(--color-pageination-button);
-}
-
-.page-numbers button:hover {
- transition: 0.3s;
- transform: scale(1.05);
-}
+ .right{
+ min-height: 110%;
+ width: 100%;
+ }
-.page-numbers button:active {
- background-color: var(--color-pageination-button-click);
}
-.chosen{
- background-color: black;
+@media (prefers-color-scheme: dark) {
+ .help-icon{
+ filter: invert(1);
+ }
}
-
-
</style>
\ No newline at end of file
diff --git a/src/views/HomePage/ProfileView.vue b/src/views/HomePage/ProfileView.vue
index a8a8abd770597595862f2eadbec57b6aae6f6a87..2995a2dc7bdb499e35f3ddea70478be50036a682 100644
--- a/src/views/HomePage/ProfileView.vue
+++ b/src/views/HomePage/ProfileView.vue
@@ -11,7 +11,7 @@ import { useTokenStore } from '@/stores/token'
const token:string = useTokenStore().jwtToken;
-const firstName = ref<string>('');
+const firstName = ref<string>('Profile');
const lastName = ref<string>('');
onMounted(async () => {