UserProfileForeignLayout.vue

<script setup lang="ts">
// A more limited view of a users profile
import Menu from "@/components/BaseComponents/Menu.vue";
import Footer from "@/components/BaseComponents/Footer.vue";
import {useRoute, useRouter} from "vue-router";
import {useUserInfoStore} from "../../stores/UserStore";
import {UserControllerService} from "@/api";
import {onMounted, ref} from "vue";

let numberOfHistory = 6;



let cardTitles = ["Spain tour", "Food waste", "Coffee", "Concert", "New book", "Pretty clothes"]

let points = 0;
let streak = 0;

let username = ref()


let id = ref()

//Get the id from the url. viktor har eksempel

let user = useRoute()
id.value = user.params
console.log(id.value.id)


let route = useRouter()

function toRoadmap(){
  route.push('/roadmap')
}
//todo Make a store of a friend-instance
onMounted(async () => {
  try {
    let response = await UserControllerService.getProfile({
      userId: id.value.id
    })
    username.value = response.firstName
    console.log(username)
  } catch (error) {
    console.error("Something went wrong getting the profile: ", error)
  }
})




function toUpdateUserSettings(){
  route.push('/update-user')
}
</script>

<template>
    <div class="container text-center">
    <div class="row">
      <div class="col">
        <img src="/src/assets/userprofile.png" class="img-fluid">
        <p class="h2">{{username}}</p>
      </div>
    </div>
      <div class="row">
        <div class="col">
          <img src="/src/assets/icons/fire.png" class="img-fluid" style="width: 30px; height: 30px" alt="dollar">
          <p>Streak: 10</p>
        </div>
      </div>
      <div class="row">
      <div class="col-12">
        <img src="/src/assets/icons/dollar.png" class="img-fluid" style="width: 30px; height: 30px" alt="dollar">
        <p class="">Points: 2000 </p>
      </div>
      </div>

    <div class="row">
      <div class="col">
        total points earned
      </div>
      <div class="col">
        total badges earned
      </div>
    </div>
    <div class="row">
      <div class="col">
        <!-- Here is the badges of the user -->
        <div class="container-fluid">
          <h1 class="mt-5 text-start badges-text">Badges</h1>
          <div class="scrolling-wrapper-badges row flex-row flex-nowrap mt-4 pb-4 pt-2">

            <div class="col-5">
              <div class="card badges-block card-1"></div>
            </div>
            <div class="col-5">
              <div class="card badges-block card-2"></div>
            </div>
            <div class="col-5">
              <div class="card badges-block card-3"></div>
            </div>
            <div class="col-5">
              <div class="card badges-block card-4"></div>
            </div>
            <div class="col-5">
              <div class="card badges-block card-5"></div>
            </div>
            <div class="col-5">
              <div class="card badges-block card-6"></div>
            </div>
            <div class="col-5">
              <div class="card badges-block card-7"></div>
            </div>
            <div class="col-5">
              <div class="card badges-block card-8"></div>
            </div>
            <div class="col-5">
              <div class="card badges-block card-9"></div>
            </div>
            <div class="col-5">
              <div class="card badges-block card-10"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <!-- Here is the history of saving target -->
        <div class="container-fluid mb-5">
          <h1 class="mt-5 text-start history-text">History</h1>
          <div class="row scrolling-wrapper-history">
            <div v-for="index in numberOfHistory" :key="index" class="col-md-4 col-sm-4 col-lg-4 col-xs-4 col-xl-4 control-label">
              <div class="card history-block" >
                <div class="card mb-3" style="max-width: 540px;">
                  <div class="row g-0">
                    <div class="col-md-4">
                      <img src="/src/assets/icons/piggybank.svg" class="img-fluid rounded-start h-40 mx-auto d-none d-md-block" alt="...">
                    </div>
                    <div class="col-md-8">
                      <div class="card-body">
                        <h5 class="card-title">{{cardTitles[index-1]}}</h5>
                        <p class="card-text">Money saved: 200 <br/>You are one challenge: 21</p>
                        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                        <a href="#" class="btn  stretched-link" @click="toRoadmap"></a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.scrolling-wrapper-badges{
  overflow-x: auto;
}

.scrolling-wrapper-history{
  max-height: 300px;
  overflow: auto;
}



.badges-text{
  font-weight: 500;
  font-size: 2.0em;
}

.history-text{
  font-weight: 500;
  font-size: 2.0em;
}

.badges-block{
  height: 200px;
  background-color: #fff;
  border: none;
  background-position: center;
  background-size: cover;
  transition: all 0.2s ease-in-out !important;
  border-radius: 24px;
  &:hover{
    transform: translateY(-5px);
    box-shadow: none;
    opacity: 0.9;
  }
}

.history-block{
  height: 200px;

  background-color: #fff;
  border: none;
  background-position: center;
  background-size: cover;
  transition: all 0.2s ease-in-out !important;
  border-radius: 24px;
  margin: 20px;
  &:hover{
    transform: translateY(-5px);
    box-shadow: none;
    opacity: 0.9;
  }
}

.card-1{
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}

.card-2{
  background-color: #0093E9;
  background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}

.card-3{
  background-color: #00DBDE;
  background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);
}

.card-4{
  background-color: #FBAB7E;
  background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
}

.card-5{
  background-color: #85FFBD;
  background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
}

.card-6{
  background-color: #FA8BFF;
  background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
}

.card-7{
  background-color: #FA8BFF;
  background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
}

.card-8{
  background-color: #FBDA61;
  background-image: linear-gradient(45deg, #FBDA61 0%, #FF5ACD 100%);
}

.card-9{
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}

.card-10{
  background-color: #FF3CAC;
  background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);

}
</style>