Merge branch 'savings-target-creation' into 'main'

Savings target creation

See merge request !14

src/components/NewsComponents/NewsComponent.vue

 <script lang="ts">
+interface news {
+  urlToImage: string;
+  title: string;
+  description: string;
+  url: string;
+}
 export default {
   data() {
     return {
-      articles: []
+      articles: [] as news[]
     };
   },
   mounted() {

src/components/SavingGoalComponents/SavingGoal.vue

+<script lang="ts">
+import SavingGoalList from "@/components/SavingGoalComponents/SavingGoalList.vue";
+import SavingGoalRoadmap from "@/components/SavingGoalComponents/SavingGoalRoadmap.vue";
+import SavingGoalCreate from "@/components/SavingGoalComponents/SavingGoalCreate.vue";
+export default {
+  components: {SavingGoalCreate, SavingGoalRoadmap, SavingGoalList},
+  data() {
+    return {
+      bluePanelMaxHeight: 'auto' as string,
+      createClicked: false as boolean,
+    };
+  },
+  mounted() {
+    this.calculateBluePanelMaxHeight();
+  },
+  methods: {
+    calculateBluePanelMaxHeight() {
+      // Query the timeline element
+      const timelineElement = document.querySelector('.timeline');
+      if (timelineElement instanceof HTMLElement) {
+        // Calculate the max-height based on the height of the timeline
+        const timelineHeight = timelineElement.offsetHeight;
+        this.bluePanelMaxHeight = `${timelineHeight*1.25}px`;
+      } else {
+        this.bluePanelMaxHeight = '700px';
+      }
+    },
+    createGoal() {
+      this.createClicked = true;
+    },
+    goToSavingGoal() {
+      this.createClicked = false;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="container">
+    <div class="row">
+      <div class="col-lg-4 blue-background overflow-auto" :style="{ 'max-height': bluePanelMaxHeight }">
+        <h3 style="color: white; margin-bottom: 16px">Your saving goals</h3>
+        <div>
+          <button class="btn btn-light" style="font-weight: 600; margin-bottom: 20px" @click="createGoal">Create new saving goal</button>
+        </div>
+        <saving-goal-list @goToSavingGoal="goToSavingGoal"></saving-goal-list>
+      </div>
+      <div class="spacer"/>
+      <saving-goal-create v-if="createClicked"></saving-goal-create>
+      <saving-goal-roadmap v-else></saving-goal-roadmap>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.container {
+  margin: 0;
+  width: 100%;
+  box-sizing: unset;
+}
+
+.blue-background {
+  background-color: #0A58CA;
+  width: 27%;
+}
+
+.spacer {
+  width: 10%;
+  background-color: transparent;
+}
+</style>
\ No newline at end of file

src/components/SavingGoalComponents/SavingGoalCreate.vue

+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="col-lg-8">
+    <h1>Create a new saving goal!</h1>
+    <br>
+    <p>Create a name for this saving goal: </p>
+    <div class="input-group mb-3">
+      <span class="input-group-text" id="basic-addon1">Name:</span>
+      <input type="text" class="form-control" placeholder="Name of Saving Goal" aria-label="Username" aria-describedby="basic-addon1">
+    </div>
+
+    <p>Add a description to this saving goal: </p>
+    <div class="input-group mb-3">
+      <span class="input-group-text" id="basic-addon2">Description:</span>
+      <textarea class="form-control" aria-label="With textarea"></textarea>
+    </div>
+
+    <!--Change this to date picker?-->
+    <p>How long should this saving goal last: </p>
+    <div class="input-group mb-3">
+      <input type="text" class="form-control" aria-label="Amount of days" placeholder="Amount of days (as number)">
+      <span class="input-group-text">Days</span>
+    </div>
+
+    <p>How much do you want to save during this saving goal: </p>
+    <div class="input-group">
+      <input type="text" class="form-control" aria-label="" placeholder="NOK (as number)">
+      <span class="input-group-text">NOK</span>
+    </div>
+
+    <br>
+    <button class="btn btn-primary btn-lg">Create goal!</button>
+  </div>
+</template>
+
+<style scoped>
+.col-lg-8 {
+  width: 63%;
+  margin-top: 50px;
+}
+</style>
\ No newline at end of file

src/components/SavingGoalComponents/SavingGoalList.vue

+<script setup lang="ts">
+import {ref} from "vue";
+
+const savingGoalList = ref([
+  { title: 'Spain trip', MoneyTarget: '200kr', description: 'You wanted to save 200kr on a spain trip' },
+  { title: 'Italy Escapade', MoneyTarget: '200kr', description: 'Experience the magic of Italy with us! Our goal is to save 200kr for an amazing trip to Italy.' },
+  { title: 'French Getaway', MoneyTarget: '200kr', description: 'Join us as we plan to save 200kr for a delightful trip to France!' },
+  { title: 'Exploring Greece', MoneyTarget: '200kr', description: 'Dreaming of Greece? Lets work together to save 200kr for that unforgettable trip!' },
+  { title: 'German Adventure', MoneyTarget: '200kr', description: 'Discover the charm of Germany with us! We are aiming to save 200kr for this exciting adventure.' },
+  { title: 'German Adventure', MoneyTarget: '200kr', description: 'Discover the charm of Germany with us! We are aiming to save 200kr for this exciting adventure.' },
+  { title: 'German Adventure', MoneyTarget: '200kr', description: 'Discover the charm of Germany with us! We are aiming to save 200kr for this exciting adventure.' },
+  { title: 'German Adventure', MoneyTarget: '200kr', description: 'Discover the charm of Germany with us! We are aiming to save 200kr for this exciting adventure.' }
+])
+
+const emits = defineEmits(['goToSavingGoal']);
+
+const goToSavingGoal = () => {
+  emits('goToSavingGoal');
+};
+</script>
+
+<template>
+  <div v-for="(savingGoal, index) in savingGoalList" :key="index" class="card bg-primary">
+    <div class="card-header">
+      Saving goal {{ index + 1 }}
+    </div>
+    <div class="card-body">
+      <h5 class="card-title">{{ savingGoal.title }}</h5>
+      <p class="card-text">{{ savingGoal.description }}</p>
+      <a href="#" class="btn btn-light" @click="goToSavingGoal">Go to saving goal</a>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.card-header, .card-text, .card-title {
+  color: white;
+}
+
+* {
+  font-weight: 600;
+}
+
+.card {
+  margin-bottom: 20px;
+}
+</style>
\ No newline at end of file

src/components/SavingGoalComponents/SavingGoalRoadmap.vue

 <script lang="ts">
 interface Step {
-  image: string;
   title: string;
   showPanel: boolean;
   description: string;
@@ -9,34 +8,38 @@ interface Step {
 export default {
   data() {
     return {
+      image: 'https://th.bing.com/th/id/OIG3.NMbdxmKYKVnxYGLOa0Z0?w=1024&h=1024&rs=1&pid=ImgDetMain' as string,
+      altImage: 'https://th.bing.com/th/id/OIG4.gVWUC.rwCb8faTNx31yU?w=1024&h=1024&rs=1&pid=ImgDetMain' as string,
+      title: 'Spain trip' as string,
       //This will be changed to info gathered from backend
       steps: [
-        { image: 'https://th.bing.com/th/id/OIG4.GHQvXMljb6YONcnYvfuE?pid=ImgGn', altImage: 'https://th.bing.com/th/id/OIG2.dzSCGYTFEglaUPj1maja?pid=ImgGn', title: 'Challenge 1', showPanel: false, description: 'Save 50kr on coffee in 3 days', percentFinished: 22 },
-        { image: 'https://th.bing.com/th/id/OIG4.GHQvXMljb6YONcnYvfuE?pid=ImgGn', altImage: 'https://th.bing.com/th/id/OIG2.dzSCGYTFEglaUPj1maja?pid=ImgGn', title: 'Challenge 2', showPanel: false, description: 'Save 500kr on food in 7 days', percentFinished: 73 },
-        { image: 'https://th.bing.com/th/id/OIG4.GHQvXMljb6YONcnYvfuE?pid=ImgGn', altImage: 'https://th.bing.com/th/id/OIG2.dzSCGYTFEglaUPj1maja?pid=ImgGn', title: 'Challenge 3', showPanel: false, description: 'Save 350kr on clothes in 5 days', percentFinished: 50 },
-        { image: 'https://th.bing.com/th/id/OIG4.GHQvXMljb6YONcnYvfuE?pid=ImgGn', altImage: 'https://th.bing.com/th/id/OIG2.dzSCGYTFEglaUPj1maja?pid=ImgGn', title: 'Challenge 4', showPanel: false, description: 'Save 150kr on coffee in 4 days', percentFinished: 10 },
-        { image: 'https://th.bing.com/th/id/OIG4.GHQvXMljb6YONcnYvfuE?pid=ImgGn', altImage: 'https://th.bing.com/th/id/OIG2.dzSCGYTFEglaUPj1maja?pid=ImgGn', title: 'Challenge 5', showPanel: false, description: 'Save 50kr on coffee in 3 days', percentFinished: 90 }
+        { title: 'Challenge 1', showPanel: false, description: 'Save 50kr on coffee in 3 days', percentFinished: 22 },
+        { title: 'Challenge 2', showPanel: false, description: 'Save 500kr on food in 7 days', percentFinished: 73 },
+        { title: 'Challenge 3', showPanel: false, description: 'Save 350kr on clothes in 5 days', percentFinished: 50 },
+        { title: 'Challenge 4', showPanel: false, description: 'Save 150kr on coffee in 4 days', percentFinished: 10 },
+        { title: 'Challenge 5', showPanel: false, description: 'Save 50kr on coffee in 3 days', percentFinished: 90 }
       ]
+      ,
+      bluePanelMaxHeight: 'auto' as string
     };
   },
   methods: {
     togglePanel(step: Step) {
       step.showPanel = !step.showPanel;
-    }
-  }
+    },
+  },
 };
 </script>
 
 <template>
-  <div class="container">
-    <div class="row">
-      <div class="col-lg-12">
+  <div class="col-lg-8">
+    <div class="SavingGoalTitle text-center">{{title}}</div>
     <ul class="timeline">
       <li v-for="(step, index) in steps" :key="index" :class="{ 'timeline-inverted': index % 2 !== 0 }">
-            <div class="timeline-image" @click="togglePanel(step)">
-              <img class="circular-image" :src="step.showPanel ? step.altImage : step.image" alt="">
+        <div class="timeline-image z-1" @click="togglePanel(step)">
+          <img class="circular-image" :src="step.showPanel ? altImage : image" alt="">
         </div>
-            <div class="timeline-panel" v-show="step.showPanel">
+        <div class="timeline-panel z-3" v-show="step.showPanel">
           <div class="timeline-heading">
             <h4>{{ step.title }}</h4>
             <h4 class="subheading">{{step.description}}</h4>
@@ -48,7 +51,7 @@ export default {
             </p>
             <br>
             <div class="progress">
-                  <div class="progress-bar bg-success" role="progressbar" :style="{ width: step.percentFinished + '%' }" :aria-valuenow="step.percentFinished" aria-valuemin="0" aria-valuemax="100"></div>
+              <div class="progress-bar" role="progressbar" :style="{ width: step.percentFinished + '%' }" :aria-valuenow="step.percentFinished" aria-valuemin="0" aria-valuemax="100"></div>
             </div>
             <br>
             <div class="form-check form-check-inline">
@@ -65,15 +68,24 @@ export default {
       </li>
     </ul>
   </div>
-    </div>
-  </div>
 </template>
 
 <style scoped>
-.container {
+.col-lg-8 {
+  width: 63%;
   margin-bottom: 20px;
 }
 
+.SavingGoalTitle {
+  font-weight: 600;
+  font-size: 45px;
+  margin-bottom:40px;
+  padding-bottom: 10px;
+  color: white;
+  border-radius: 0 0 1em 1em;
+  background-color: #0A58CA;
+}
+
 .timeline {
   position: relative;
   padding:4px 0 0 0;
@@ -112,7 +124,7 @@ export default {
   width: 41%;
   padding: 0 20px 20px 30px;
   text-align: right;
-  background-color: #32CD32;
+  background-color: #0A58CA;
   border-radius: 1em;
 }
 
@@ -134,13 +146,13 @@ export default {
   z-index: 100;
   position: absolute;
   left: 50%;
-  border: 7px solid #006400;
+  border: 7px solid #001664;
   border-radius: 100%;
-  background-color: #00FF7F;
-  box-shadow: 0 0 5px #00FF00;
-  width: 200px;
-  height: 200px;
-  margin-left: -100px;
+  background-color: #00ffff;
+  box-shadow: 0 0 5px #00e1ff;
+  width: 100px;
+  height: 100px;
+  margin-left: -50px;
   cursor:pointer;
 }
 
@@ -199,36 +211,42 @@ export default {
 .timeline>li:nth-child(odd) .line:before {
   content: "";
   position: absolute;
-  top: 60px;
+  top: 30px;
   bottom: 0;
-  left: 730px;
-  width: 45px;
-  height:340px;
+  left: 700px;
+  width: 30px;
+  height:320px;
   background-color: grey;
   -ms-transform: rotate(-44deg); /* IE 9 */
   -webkit-transform: rotate(-44deg); /* Safari */
   transform: rotate(-44deg);
   border: dotted white 3px;
   /**box-shadow: 0 0 5px #00FF00;**/
+  display:none;
 }
 /*Style for odd div.line*/
 .timeline>li:nth-child(even) .line:before  {
   content: "";
   position: absolute;
-  top: 60px;
+  top: 30px;
   bottom: 0;
-  left: 520px;
-  width: 45px;
-  height:340px;
+  left: 480px;
+  width: 30px;
+  height:320px;
   background-color: grey;
   -ms-transform: rotate(44deg); /* IE 9 */
   -webkit-transform: rotate(44deg); /* Safari */
   transform: rotate(44deg);
   border: dotted white 3px;
   /*box-shadow: 0 0 5px #00FF00;*/
+  display:none;
 }
 /* Medium Devices, .visible-md-* */
 @media (min-width: 992px) and (max-width: 1199px) {
+  .col-lg-8 {
+    width: 100%;
+  }
+
   .timeline > li:nth-child(even) {
     margin-bottom: 0;
     min-height: 0;

src/views/SavingGoalView/RoadmapView.vue

 <script setup lang="ts">
-import SavingGoalRoadmap2 from "@/components/SavingGoalComponents/SavingGoalRoadmap.vue";
+import SavingGoal from "@/components/SavingGoalComponents/SavingGoal.vue";
 </script>
 
 <template>
-<saving-goal-roadmap2></saving-goal-roadmap2>
+<saving-goal></saving-goal>
 </template>
\ No newline at end of file