jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged PR 91: Added images

Browse Source 
Added images
This commit is contained in:
Dominic Villemure
2024-07-01 16:14:59 +00:00
parent 1e27e6e6d1 a91c412ea8
commit 308e96c26b
7 changed files with 160 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/models/myUserModel.js
View File

@@ -20,7 +20,7 @@ export default class MyUserModel
description = ""; description = "";
socialNetworks = new SocialNetworksModel(); socialNetworks = new SocialNetworksModel();
profileColors = new ProfileColorsModel(); profileColors = new ProfileColorsModel();
storedDataUrlsModel = new StoredDataUrlsModel(); storedDataUrls = new StoredDataUrlsModel();
totalBalance = ""; totalBalance = "";
userTransactions = []; userTransactions = [];
@@ -39,7 +39,7 @@ export default class MyUserModel
static getDefaultUser(){ static getDefaultUser(){
const defaultUser = new MyUserModel(); const defaultUser = new MyUserModel();
defaultUser.userName = "Anonymous" defaultUser.userName = "Anonyme"
return defaultUser; return defaultUser;
} }

20
src/stores/user.js
View File

@@ -18,9 +18,27 @@ export const useUserStore = defineStore('user', () => {
} }
} }
async function updateCurrentUser(client, myUserModel) { async function updateCurrentUser(client, myUserModel, profilePicture, bannerPicture, websiteIcon) {
this.user.value = myUserModel; this.user.value = myUserModel;
await client.patch("/api/UpdateMyUser/profile", myUserModel) await client.patch("/api/UpdateMyUser/profile", myUserModel)
this.user.value.storedDataUrls.profilePictureUrl = await client.post("/api/UpdateMyUser/profile-picture", profilePicture, {
headers: {
'Content-Type': 'application/octet-stream',
}
});
this.user.value.storedDataUrls.bannerPictureUrl = await client.post("/api/UpdateMyUser/banner-picture", bannerPicture, {
headers: {
'Content-Type': 'application/octet-stream',
}
});
this.user.value.storedDataUrls.websiteIconUrl = await client.post("/api/UpdateMyUser/website-icon", websiteIcon, {
headers: {
'Content-Type': 'application/octet-stream',
}
});
} }
return { user, getCurrentUser, setCurrentUser, updateCurrentUser } return { user, getCurrentUser, setCurrentUser, updateCurrentUser }

26
src/views/main/Header.vue
View File

@@ -55,13 +55,16 @@
<span class="normal-case max-w-xs hidden md:block"> <span class="normal-case max-w-xs hidden md:block">
{{ currentUserName }} {{ currentUserName }}
</span> </span>
<img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png" alt="Profile Image" <img
class="ml-2 rounded-full" style="width: 32px; height: 32px;"> :src="currentUser.storedDataUrls.profilePictureUrl"
alt="Profile Image"
@error="handleProfilePictureError"
class="ml-2 rounded-full" style="width: 32px; height: 32px;">
</v-btn> </v-btn>
</template> </template>
<v-list min-width="200px" class=" align-center mt-3 left-3"> <v-list min-width="200px" class=" align-center mt-3 left-3">
<div v-if="!currentUser"> <div v-if="currentUser.userName === 'Anonyme'">
<v-list-item class="nav-button"> <v-list-item class="nav-button">
<v-list-item-title> <v-list-item-title>
<v-btn to="/login" class="w-100 " variant="plain">Connexion</v-btn> <v-btn to="/login" class="w-100 " variant="plain">Connexion</v-btn>
@@ -69,7 +72,7 @@
</v-list-item> </v-list-item>
</div> </div>
<div v-if="currentUser"> <div v-if="currentUser.userName !== 'Anonyme'">
<v-list-item class="nav-button"> <v-list-item class="nav-button">
<router-link :to="`/${currentUserName}`"> <router-link :to="`/${currentUserName}`">
<v-btn class="w-100 " variant="plain"> {{ currentUserName }}</v-btn> <v-btn class="w-100 " variant="plain"> {{ currentUserName }}</v-btn>
@@ -101,7 +104,7 @@
</template> </template>
<script setup> <script setup>
import {ref, onMounted, onBeforeUnmount} from "vue"; import {ref, onMounted, onBeforeUnmount, onBeforeMount} from "vue";
import {eventBus} from '@/eventBus.js'; import {eventBus} from '@/eventBus.js';
import {useRouter} from 'vue-router'; import {useRouter} from 'vue-router';
import {useUserStore} from "@/stores/user.js"; import {useUserStore} from "@/stores/user.js";
@@ -110,8 +113,13 @@ const router = useRouter();
const currentUserName = ref("Anonyme"); const currentUserName = ref("Anonyme");
const searchQuery = ref(""); const searchQuery = ref("");
const showSearch = ref(false); const showSearch = ref(false);
let currentUser = null; const currentUser = ref(null);
const userStore = useUserStore(); const userStore = useUserStore();
const backupProfilePictureUrl = "/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
const handleProfilePictureError = (event) => {
event.target.src = backupProfilePictureUrl;
}
const toggleSidebar = () => { const toggleSidebar = () => {
eventBus.value.toggleSidebar(); eventBus.value.toggleSidebar();
@@ -150,9 +158,9 @@ const logout = () => {
window.location.reload(); window.location.reload();
}; };
onMounted( () => { onBeforeMount( () => {
currentUser = userStore.getCurrentUser(); currentUser.value = userStore.getCurrentUser();
currentUserName.value = currentUser.userName; currentUserName.value = currentUser.value.userName;
document.addEventListener('click', handleClickOutside); document.addEventListener('click', handleClickOutside);
}); });

24
src/views/main/Profile.vue
View File

@@ -6,9 +6,9 @@
Personnaliser votre profil Personnaliser votre profil
</h1> </h1>
<ProfileBanner :user="currentUser"></ProfileBanner> <ProfileBanner @updateProfilePicture="updateProfilePicture" @updateBannerPicture="updateBannerPicture" :user="currentUser"></ProfileBanner>
<AboutYou :user="currentUser"></AboutYou> <AboutYou :user="currentUser"></AboutYou>
<SocialLinks :social-networks="currentUser.socialNetworks"></SocialLinks> <SocialLinks :user="currentUser" @updateWebsiteIcon="updateWebsiteIcon"></SocialLinks>
<div class="sticky inset-x-0 bottom-0 flex justify-center px-4 pb-4"> <div class="sticky inset-x-0 bottom-0 flex justify-center px-4 pb-4">
<div class="flex space-x-2"> <div class="flex space-x-2">
@@ -46,7 +46,7 @@ import {useClient} from "@/plugins/api.js";
const userStore = useUserStore(); const userStore = useUserStore();
const client = useClient(); const client = useClient();
const currentUser = ref(MyUserModel) const currentUser = ref(MyUserModel);
const snackbar = ref(false); const snackbar = ref(false);
onBeforeMount( () => { onBeforeMount( () => {
@@ -57,9 +57,25 @@ onBeforeMount( () => {
} }
}) })
const profilePicture = ref(null);
const bannerPicture = ref(null);
const websiteIcon = ref(null);
const updateProfilePicture = (file) => {
profilePicture.value = file;
};
const updateBannerPicture = (file) => {
bannerPicture.value = file;
};
const updateWebsiteIcon = (file) => {
websiteIcon.value = file;
};
async function saveForm(){ async function saveForm(){
snackbar.value = true; snackbar.value = true;
await userStore.updateCurrentUser(client, currentUser.value); await userStore.updateCurrentUser(client, currentUser.value, profilePicture.value, bannerPicture.value, websiteIcon.value);
} }
</script> </script>

112
src/views/main/ProfileBanner.vue
View File

@@ -6,7 +6,7 @@
</div> </div>
<div> <div>
<div :style="{ backgroundColor: user.profileColors.bannerTop }" class="flex h-4"></div> <div :style="{ backgroundColor: user.profileColors.bannerTop }" class="flex h-4"></div>
<img :src="bannerImageUrl" alt="Banner Image" class="w-full object-cover"> <img :src="bannerImageUrl" alt="Banner Image" @error="handleBannerImageError" class="w-full object-cover">
<div :style="{ backgroundColor: user.profileColors.bannerBottom }" class="h-4"> <div :style="{ backgroundColor: user.profileColors.bannerBottom }" class="h-4">
</div> </div>
@@ -30,8 +30,12 @@
</div> </div>
<div class="px-3 py-3"> <div class="px-3 py-3">
<v-file-input v-model="bannerImage" label="Téléverser une nouvelle bannière" <v-file-input
@change="onBannerFileChange"></v-file-input> ref="bannerImageInput"
v-model="bannerImage"
label="Téléverser une nouvelle bannière"
@change="onBannerFileChange">
</v-file-input>
</div> </div>
<!-- Profile --> <!-- Profile -->
@@ -43,11 +47,16 @@
<img :src="profilePictureUrl" <img :src="profilePictureUrl"
:style="{ borderColor: user.profileColors.accent, borderWidth: '3px', borderStyle: 'solid' }" :style="{ borderColor: user.profileColors.accent, borderWidth: '3px', borderStyle: 'solid' }"
class="rounded-full max-w-48 max-w-48" class="rounded-full max-w-48 max-w-48"
@error="handleProfileImageError"
alt="Profile Image"> alt="Profile Image">
</div> </div>
<div class="px-3"> <div class="px-3">
<v-file-input v-model="profilePicture" label="Téléverser une nouvelle photo de profil" <v-file-input
@change="onProfileFileChange"></v-file-input> ref="profileImageInput"
v-model="profilePicture"
label="Téléverser une nouvelle photo de profil"
@change="onProfileFileChange">
</v-file-input>
</div> </div>
</div> </div>
@@ -68,17 +77,19 @@
</template> </template>
<script setup> <script setup>
import { ref, defineProps } from 'vue'; import {ref, defineProps, onMounted} from 'vue';
import MyUserModel from "@/models/myUserModel.js"; import MyUserModel from "@/models/myUserModel.js";
const emit = defineEmits(["updateProfilePicture", "updateBannerPicture"]);
const fallbackProfilePictureUrl = '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png';
const fallbackBannerPictureUrl = '/images/usersmedia/HutopyProfile/banners/banner01.png';
const props = defineProps({ const props = defineProps({
initialBannerImageUrl: { type: String, default: '/images/usersmedia/HutopyProfile/banners/banner01.png' }, user: { type: MyUserModel },
initialProfilePictureUrl: { type: String, default: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png' }, });
user: { type: MyUserModel },
});
const bannerImageUrl = ref(props.initialBannerImageUrl); const bannerImageUrl = ref(props.user.storedDataUrls.bannerPictureUrl);
const profilePictureUrl = ref(props.initialProfilePictureUrl); const profilePictureUrl = ref(props.user.storedDataUrls.profilePictureUrl);
const bannerImage = ref(null); const bannerImage = ref(null);
const profilePicture = ref(null); const profilePicture = ref(null);
@@ -86,27 +97,38 @@
const showColorPicker = ref(false); const showColorPicker = ref(false);
const selectedColor = ref('#F4F4F4'); const selectedColor = ref('#F4F4F4');
const colorTarget = ref(''); const colorTarget = ref('');
const handleProfileImageError = (event) => {
event.target.src = fallbackProfilePictureUrl;
}
const handleBannerImageError = (event) => {
event.target.src = fallbackBannerPictureUrl;
}
const onBannerFileChange = (event) => { const onBannerFileChange = (event) => {
const file = event.target.files[0]; const file = event.target.files[0];
if (file) { if (file) {
const reader = new FileReader(); const reader = new FileReader();
reader.onload = (e) => { reader.onload = (e) => {
bannerImageUrl.value = e.target.result; bannerImageUrl.value = e.target.result;
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
} emit('updateBannerPicture', file);
}
}; };
const onProfileFileChange = (event) => { const onProfileFileChange = (event) => {
const file = event.target.files[0]; const file = event.target.files[0];
if (file) { if (file) {
const reader = new FileReader(); const reader = new FileReader();
reader.onload = (e) => { reader.onload = (e) => {
profilePictureUrl.value = e.target.result; profilePictureUrl.value = e.target.result;
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
} emit('updateProfilePicture', file);
}
}; };
const openColorPicker = (target) => { const openColorPicker = (target) => {
@@ -117,23 +139,23 @@
const applyColor = () => { const applyColor = () => {
if (colorTarget.value === 'top') { if (colorTarget.value === 'top') {
props.user.profileColors.bannerTop = selectedColor.value; props.user.profileColors.bannerTop = selectedColor.value;
} else if (colorTarget.value === 'bottom') { } else if (colorTarget.value === 'bottom') {
props.user.profileColors.bannerBottom = selectedColor.value; props.user.profileColors.bannerBottom = selectedColor.value;
} else if (colorTarget.value === 'accent') { } else if (colorTarget.value === 'accent') {
props.user.profileColors.accent = selectedColor.value; props.user.profileColors.accent = selectedColor.value;
} else if (colorTarget.value === 'menu') { } else if (colorTarget.value === 'menu') {
props.user.profileColors.menu = selectedColor.value; props.user.profileColors.menu = selectedColor.value;
} }
showColorPicker.value = false; showColorPicker.value = false;
}; };
/// Simple function to determine if the text should be white or black based on the background color
const getTextColor = (bgColor) => { const getTextColor = (bgColor) => {
// Simple function to determine if the text should be white or black based on the background color const color = bgColor.replace('#', '');
const color = bgColor.replace('#', ''); const r = parseInt(color.substr(0, 2), 16);
const r = parseInt(color.substr(0, 2), 16); const g = parseInt(color.substr(2, 2), 16);
const g = parseInt(color.substr(2, 2), 16); const b = parseInt(color.substr(4, 2), 16);
const b = parseInt(color.substr(4, 2), 16); const brightness = (r * 299 + g * 587 + b * 114) / 1000;
const brightness = (r * 299 + g * 587 + b * 114) / 1000; return brightness > 155 ? '#000' : '#fff';
return brightness > 155 ? '#000' : '#fff'; };
};
</script> </script>

51
src/views/main/SocialLinks.vue
View File

@@ -2,12 +2,36 @@
<div ref="container"> <div ref="container">
<div class="text-center text-2xl py-4 border-t-4">Liens des réseaux sociaux et de votre site</div> <div class="text-center text-2xl py-4 border-t-4">Liens des réseaux sociaux et de votre site</div>
<div class="px-5 py-2 flex flex-col space-y-4"> <div class="px-5 py-2 flex flex-col space-y-4">
<div v-for="network in socialNetworks" :key="network.field"> <div class="flex justify-between items-center mb-2">
<div class="flex justify-between items-center mb-2"> <label class="text-lg">Instagram</label>
<label class="text-lg">{{ network.label }}</label>
</div>
<v-text-field v-model="network.value" :label="network.label" variant="outlined"></v-text-field>
</div> </div>
<v-text-field v-model="props.user.socialNetworks.instagramUrl" label="Instagram" variant="outlined"></v-text-field>
<div class="flex justify-between items-center mb-2">
<label class="text-lg">TikTok</label>
</div>
<v-text-field v-model="props.user.socialNetworks.tikTokUrl" label="TikTok" variant="outlined"></v-text-field>
<div class="flex justify-between items-center mb-2">
<label class="text-lg">Facebook</label>
</div>
<v-text-field v-model="props.user.socialNetworks.facebookUrl" label="Facebook" variant="outlined"></v-text-field>
<div class="flex justify-between items-center mb-2">
<label class="text-lg">X</label>
</div>
<v-text-field v-model="props.user.socialNetworks.xUrl" label="X" variant="outlined"></v-text-field>
<div class="flex justify-between items-center mb-2">
<label class="text-lg">LinkedIn</label>
</div>
<v-text-field v-model="props.user.socialNetworks.linkedInUrl" label="LinkedIn" variant="outlined"></v-text-field>
<div class="flex justify-between items-center mb-2">
<label class="text-lg">Site Web</label>
</div>
<v-text-field v-model="props.user.socialNetworks.yourWebsiteUrl" label="Site Web" variant="outlined"></v-text-field>
<div class="flex flex-col space-y-4"> <div class="flex flex-col space-y-4">
<div class="flex items-center mb-2"> <div class="flex items-center mb-2">
<label class="text-lg mr-4">Icône pour votre site web *svg</label> <label class="text-lg mr-4">Icône pour votre site web *svg</label>
@@ -22,22 +46,16 @@
</template> </template>
<script setup> <script setup>
import {defineProps, ref} from 'vue'; import { defineProps, ref } from 'vue';
import MyUserModel from "@/models/myUserModel.js";
const props = defineProps({ const props = defineProps({
socialNetworks: { type: Object }, user: { type: MyUserModel },
}); });
const socialNetworks = ref([ const emit = defineEmits(["updateWebsiteIcon"]);
{ label: 'Instagram', field: 'instagram', value: props.socialNetworks.instagramUrl },
{ label: 'TikTok', field: 'tiktok', value: props.socialNetworks.tikTokUrl },
{ label: 'Facebook', field: 'facebook', value: props.socialNetworks.facebookUrl },
{ label: 'X', field: 'X', value: props.socialNetworks.xUrl },
{ label: 'LinkedIn', field: 'linkedin', value: props.socialNetworks.linkedInUrl },
{ label: 'Site Web', field: 'website', value: props.socialNetworks.yourWebsiteUrl }
]);
const iconUrl = ref(''); const iconUrl = ref(props.user.storedDataUrls.websiteIconUrl);
const iconFile = ref(null); const iconFile = ref(null);
const onFileChange = (event) => { const onFileChange = (event) => {
@@ -48,6 +66,7 @@ const onFileChange = (event) => {
iconUrl.value = e.target.result; iconUrl.value = e.target.result;
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
emit("updateWebsiteIcon", file)
} }
}; };
</script> </script>

5
src/views/main/Wallet.vue
View File

@@ -78,11 +78,6 @@ onBeforeMount( () => {
userTransactions.value = myUser.userTransactions; userTransactions.value = myUser.userTransactions;
totalBalance.value = myUser.totalBalance; totalBalance.value = myUser.totalBalance;
console.log(userTransactions.value);
console.log(totalBalance.value);
console.log(formattedTransactions);
console.log(formattedBalance);
} catch (error) { } catch (error) {
navigateToHome(); navigateToHome();
} }