225 lines
7.0 KiB
Vue
225 lines
7.0 KiB
Vue
<template>
|
|
|
|
<body style="background-color: #f4f4f4;">
|
|
<!-- PC Version -->
|
|
<v-card style="z-index: 1000; background-color: #ffff;" class="hidden-sm-and-down" elevation="5">
|
|
<v-container style="z-index: 2000; margin-bottom: .8%; margin-top: -.3%; margin-right: 1%;">
|
|
<v-row justify="end" style="margin-top: .2%; margin-bottom: -1.2%;">
|
|
<v-menu>
|
|
<template v-slot:activator="{ props }">
|
|
<v-row>
|
|
<!-- Colonne de droite -->
|
|
<v-col class="text-right d-flex align-center justify-end">
|
|
<div class="d-flex align-center">
|
|
<img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
|
|
class="header-profile-icon mr-2" alt="Logo">
|
|
<v-btn flat style="min-width: 200px; font-size: 1.3rem;" dark v-bind="props" ref="walletActivator">
|
|
{{ currentUserName }}
|
|
</v-btn>
|
|
</div>
|
|
</v-col>
|
|
</v-row>
|
|
</template>
|
|
|
|
<!-- Dropdown Menu Profile/Connection -->
|
|
<v-list style="padding: 0;">
|
|
<v-list-item v-if="!currentUser">
|
|
<router-link :to="{ name: 'contact' }">
|
|
<v-btn class="full-width-btn" flat>Inscription</v-btn>
|
|
</router-link>
|
|
</v-list-item>
|
|
<v-list-item v-if="currentUser">
|
|
<v-btn @click="openWalletDialog" class="full-width-btn" flat>
|
|
<v-icon left class="mr-4">mdi-wallet</v-icon>
|
|
<p>Bourse</p>
|
|
</v-btn>
|
|
</v-list-item>
|
|
<v-list-item v-if="currentUser">
|
|
<v-btn @click="logout()" class="full-width-btn" flat>Déconnecter</v-btn>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-menu>
|
|
</v-row>
|
|
</v-container>
|
|
</v-card>
|
|
|
|
<!-- Mobile version -->
|
|
<v-card style="z-index: 2000; background-color: #f4f4f4;" class="hidden-md-and-up">
|
|
<v-app-bar app>
|
|
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
|
|
<v-row>
|
|
<v-col cols="11" class="d-flex align-center justify-center">
|
|
<!-- Logo Top bar -->
|
|
<img src="/images/hutopymedia/banners/hutopy.png" class="mobile-header" alt="Logo">
|
|
</v-col>
|
|
</v-row>
|
|
</v-app-bar>
|
|
|
|
<!-- Left-side Menu -->
|
|
<v-navigation-drawer v-model="drawer" temporary>
|
|
<v-list>
|
|
<v-list-item :title="currentUserName">
|
|
<template v-slot:prepend>
|
|
<img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
|
|
class="mobile-profile-picture mini-profile-picture" alt="Avatar">
|
|
</template>
|
|
</v-list-item>
|
|
</v-list>
|
|
|
|
<!-- Left-side Button -->
|
|
<v-divider></v-divider>
|
|
<v-list density="compact" nav>
|
|
<h1 class="h1-navigation">Navigation</h1>
|
|
<router-link :to="{ name: 'home' }">
|
|
<v-list-item prepend-icon="mdi-home" title="Accueil" value="home"></v-list-item>
|
|
</router-link>
|
|
<router-link :to="{ name: 'userbrowser' }">
|
|
<v-list-item prepend-icon="mdi-account-multiple" title="Membres" value="friends"></v-list-item>
|
|
</router-link>
|
|
|
|
<v-list-item v-if="currentUser" @click="openWalletDialog" prepend-icon="mdi-wallet" title="Bourse"
|
|
value="wallet"></v-list-item>
|
|
<v-list-item v-if="currentUser" @click="logout()" style="margin-top: 110%;" prepend-icon="mdi-logout"
|
|
title="Déconnecter" value="logout"></v-list-item>
|
|
</v-list>
|
|
</v-navigation-drawer>
|
|
</v-card>
|
|
|
|
<!-- Wallet Modal -->
|
|
<v-dialog v-model="walletDialog" transition="dialog-top-transition" width="auto">
|
|
<v-card style="border-radius: 30px;">
|
|
<div class="text-center" style="margin-top: 2%; margin-bottom: 2%;">
|
|
<v-icon left size="48">mdi-wallet</v-icon>
|
|
<v-toolbar title="Portefeuille"
|
|
style="color: white; width: 750px; background-color: #a30e79; margin-bottom: -6%;"></v-toolbar>
|
|
</div>
|
|
<v-card-text class="text-h1 pa-12">
|
|
<v-row>
|
|
<v-col>
|
|
<v-row>
|
|
<v-col cols="7">
|
|
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">Balance actuelle</h1>
|
|
</v-col>
|
|
<v-col>
|
|
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">{{ currentUser.totalBalance }}$</h1>
|
|
</v-col>
|
|
</v-row>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
|
|
<v-data-table-virtual fixed-header :headers="headers" :items="currentUser.userTransactions" height="250"
|
|
item-value="name">
|
|
</v-data-table-virtual>
|
|
|
|
<v-card-actions class="justify-center">
|
|
<v-btn @click="walletDialog = false" text="Fermer"></v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</body>
|
|
</template>
|
|
|
|
<script setup>
|
|
import MyUserModel from "@/models/myUserModel.js";
|
|
import { useClient } from "@/plugins/api.js";
|
|
import { onBeforeMount, ref } from 'vue';
|
|
const client = useClient();
|
|
|
|
const drawer = ref(false);
|
|
const currentUserName = ref("INVITÉ");
|
|
const walletDialog = ref(false);
|
|
let currentUser = null;
|
|
|
|
const headers = ref([
|
|
{ title: 'Montant', value: 'amount', width: '20%', key: "amount" },
|
|
{ title: 'Date', value: 'created', width: '20%', key: "created" },
|
|
{ title: 'Message', value: 'tipMessage', width: '60%' }
|
|
]);
|
|
|
|
onBeforeMount(async () => {
|
|
try {
|
|
const myUser = await client.get("/api/GetMyUser");
|
|
const currentUserModel = MyUserModel.createFromApiResult(myUser.data);
|
|
currentUser = currentUserModel;
|
|
currentUserName.value = currentUserModel.firstName + " " + currentUserModel.lastName;
|
|
} catch (error) {
|
|
console.log("User not logged");
|
|
}
|
|
});
|
|
|
|
function logout() {
|
|
localStorage.removeItem('jwt');
|
|
window.location.reload();
|
|
}
|
|
|
|
function openWalletDialog() {
|
|
walletDialog.value = true;
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.full-width-btn {
|
|
width: 100%;
|
|
text-align: left;
|
|
padding-left: 24px;
|
|
padding-right: 24px;
|
|
z-index: 1001;
|
|
}
|
|
|
|
.mini-profile-picture {
|
|
border-radius: 100px;
|
|
}
|
|
|
|
.header-profile-icon {
|
|
height: 60px;
|
|
width: 60px;
|
|
border-radius: 50px;
|
|
border: 2px solid #a30e79;
|
|
}
|
|
|
|
.mobile-profile-picture {
|
|
height: 40px;
|
|
border-radius: 50px;
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
|
|
border: 2px solid #a30e79;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.header-banner {
|
|
border-top: 5px solid rgba(107, 0, 101, 1);
|
|
margin-top: 15%;
|
|
}
|
|
|
|
.social-container {
|
|
background-color: #006d77;
|
|
margin-top: -20%;
|
|
font-size: 1.4rem;
|
|
font-weight: 800;
|
|
color: white;
|
|
}
|
|
|
|
.social-container2 {
|
|
background-color: #0baab2;
|
|
font-size: 1.4rem;
|
|
font-weight: 800;
|
|
color: white;
|
|
}
|
|
|
|
.mobile-header {
|
|
height: 50px;
|
|
width: auto;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.mobile-navigation-container {
|
|
background-color: #a30e79;
|
|
}
|
|
|
|
.h1-navigation {
|
|
padding-left: 20%;
|
|
font-size: 1.4rem;
|
|
font-weight: 800;
|
|
}
|
|
</style>
|