242 lines
10 KiB
Vue
242 lines
10 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 fluid>
|
|
<v-row>
|
|
<v-menu>
|
|
<template v-slot:activator="{ props }">
|
|
<v-row align="center"> <!-- Utilisation de align="center" pour aligner verticalement le contenu -->
|
|
<v-col class="ml-4">
|
|
<router-link to="/">
|
|
<v-img src="/images/hutopymedia/icons/logohutopy.png" alt="Description de l'image"
|
|
style="height: 70px; width: 70px;" class="mr-2" :elevation="10"></v-img>
|
|
</router-link>
|
|
</v-col>
|
|
|
|
<v-col cols="auto" class="ml-auto"> <!-- Utilisation de ml-auto pour aligner à droite -->
|
|
<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">
|
|
<router-link :to="{ name: 'yourprofile' }">
|
|
<v-btn class="full-width-btn" flat>
|
|
<v-icon left class="mr-4">mdi-account-details</v-icon>
|
|
<p>Mon profil</p>
|
|
</v-btn>
|
|
</router-link>
|
|
</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="Créateurs" value="friends"></v-list-item>
|
|
</router-link>
|
|
<router-link :to="{ name: 'contact' }">
|
|
<v-list-item prepend-icon="mdi-handshake" title="Aidez-nous" value="friends"></v-list-item>
|
|
</router-link>
|
|
|
|
<router-link :to="{ name: 'yourprofile' }">
|
|
<v-list-item prepend-icon="mdi-account-details" title="Mon profil" 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 class="text-center">
|
|
<h1 style="margin-bottom: -4px; font-size: 1.3rem;">Balance actuelle</h1>
|
|
<h1 style=" margin-bottom: -45px; font-size: 3.5rem;">{{ 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-dialog activator="#activator-target" max-width="650">
|
|
<template v-slot:default="{ isActive }">
|
|
<v-card prepend-icon="mdi-file-document-edit" text="Découvrez Hutopy, l'endroit où la valorisation de votre travail atteint son apogée. Avec une commission réduite à seulement 9 %, notre engagement envers votre succès est palpable. Chaque pourcentage prélevé est réinvesti avec soin pour catalyser votre croissance : du développement de fonctionnalités innovantes à la maintenance d'une infrastructure technologique de pointe, en passant par un support utilisateur de premier ordre. Notre objectif ? Amplifier votre expansion et garantir une expérience utilisateur sans précédent.
|
|
Pour chaque transaction, un frais minime assure la sécurité et la fiabilité de vos paiements, grâce à un partenaire de confiance à la renommée mondiale. Ce dernier sécurise pour des milliards en transactionchaque année pour une diversité d'entreprises, allant des startups dynamiques aux conglomerats établis. Ce gage de sécurité est disponible pour une modique somme : 2,9 % plus 0,30 $ par transaction, une petite contribution pour la tranquillité d'esprit et la protection de vos revenus.
|
|
Notre modèle tarifaire a été pensé dans un esprit de simplicité et de transparence, avec l'ambition ultime d'optimiser vos gains. Chez Hutopy, la notion de partenariat prend tout son sens : votre épanouissement est au cœur de nos préoccupations. Bénéficiez d'une plateforme qui élargit votre horizon créatif et entrepreneurial, tout en vous assurant que vos intérêts sont précieusement gardés.
|
|
Hutopy est plus qu'une plateforme ; c'est une communauté où la transformation de la passion en profit devient réalité, grâce au soutien indéfectible d'une équipe dévouée à enrichir votre parcours. Nous vous invitons à nous rejoindre pour explorer ensemble les avenues de succès que nous pouvons emprunter ensemble, tout en vous garantissant une part conséquente de vos revenus. Embarquez dans une aventure où votre présence en ligne ne connaît pas de limites, soutenue par Hutopy, votre allié dans la quête du succès.
|
|
" title="Comission">
|
|
<template v-slot:actions>
|
|
<v-btn class="ml-auto" text="Close" @click="isActive.value = false"></v-btn>
|
|
</template>
|
|
</v-card>
|
|
</template>
|
|
</v-dialog>
|
|
|
|
<v-card-actions class="justify-center">
|
|
<v-row justify="center">
|
|
<v-btn id="activator-target">
|
|
Comisssion
|
|
</v-btn>
|
|
<v-btn @click="walletDialog = false" text="Fermer"></v-btn>
|
|
</v-row>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</body>
|
|
</template>
|
|
|
|
<script async setup>
|
|
import MyUserModel from "@/models/myUserModel.js";
|
|
import { useClient } from "@/plugins/api.js";
|
|
import { onBeforeMount, ref } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
|
|
const client = useClient();
|
|
const router = useRouter();
|
|
|
|
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');
|
|
currentUser = null;
|
|
currentUserName.value = "INVITÉ";
|
|
router.push('/');
|
|
}
|
|
|
|
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;
|
|
}
|
|
.mobile-header {
|
|
height: 50px;
|
|
width: auto;
|
|
border-radius: 10px;
|
|
}
|
|
.h1-navigation {
|
|
padding-left: 20%;
|
|
font-size: 1.4rem;
|
|
font-weight: 800;
|
|
}
|
|
</style> |