From 5f54b69e00fe7042c0489a08e5a7ceb16c58519f Mon Sep 17 00:00:00 2001
From: Dominic Villemure <doumvil@hotmail.com>
Date: Sun, 30 Jun 2024 23:39:56 -0400
Subject: [PATCH] Added images

---
 src/models/myUserModel.js        |   4 +-
 src/stores/user.js               |  20 +++++-
 src/views/main/Header.vue        |  26 ++++---
 src/views/main/Profile.vue       |  24 +++++--
 src/views/main/ProfileBanner.vue | 112 ++++++++++++++++++-------------
 src/views/main/SocialLinks.vue   |  51 +++++++++-----
 src/views/main/Wallet.vue        |   5 --
 7 files changed, 160 insertions(+), 82 deletions(-)

diff --git a/src/models/myUserModel.js b/src/models/myUserModel.js
index e454999..c2bb63e 100644
--- a/src/models/myUserModel.js
+++ b/src/models/myUserModel.js
@@ -20,7 +20,7 @@ export default class MyUserModel
     description = "";
     socialNetworks = new SocialNetworksModel();
     profileColors = new ProfileColorsModel();
-    storedDataUrlsModel = new StoredDataUrlsModel();
+    storedDataUrls = new StoredDataUrlsModel();
     totalBalance = "";
     userTransactions = [];
 
@@ -39,7 +39,7 @@ export default class MyUserModel
     
     static getDefaultUser(){
         const defaultUser = new MyUserModel();
-        defaultUser.userName = "Anonymous"
+        defaultUser.userName = "Anonyme"
         
         return defaultUser;
     }
diff --git a/src/stores/user.js b/src/stores/user.js
index c5f7f34..1512730 100644
--- a/src/stores/user.js
+++ b/src/stores/user.js
@@ -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;
         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 }
diff --git a/src/views/main/Header.vue b/src/views/main/Header.vue
index cac07fe..7e5b01c 100644
--- a/src/views/main/Header.vue
+++ b/src/views/main/Header.vue
@@ -55,13 +55,16 @@
                  <span class="normal-case max-w-xs  hidden md:block">
                  {{ currentUserName }}
                  </span>
-              <img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png" alt="Profile Image"
-                   class="ml-2 rounded-full" style="width: 32px; height: 32px;">
+              <img 
+                  :src="currentUser.storedDataUrls.profilePictureUrl" 
+                  alt="Profile Image"
+                  @error="handleProfilePictureError"
+                  class="ml-2 rounded-full" style="width: 32px; height: 32px;">
             </v-btn>
           </template>
 
           <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-title>
                   <v-btn to="/login" class="w-100 " variant="plain">Connexion</v-btn>
@@ -69,7 +72,7 @@
               </v-list-item>
             </div>
 
-            <div v-if="currentUser">
+            <div v-if="currentUser.userName !== 'Anonyme'">
               <v-list-item class="nav-button">
                 <router-link :to="`/${currentUserName}`">
                   <v-btn class="w-100 " variant="plain"> {{ currentUserName }}</v-btn>
@@ -101,7 +104,7 @@
 </template>
 
 <script setup>
-import {ref, onMounted, onBeforeUnmount} from "vue";
+import {ref, onMounted, onBeforeUnmount, onBeforeMount} from "vue";
 import {eventBus} from '@/eventBus.js';
 import {useRouter} from 'vue-router';
 import {useUserStore} from "@/stores/user.js";
@@ -110,8 +113,13 @@ const router = useRouter();
 const currentUserName = ref("Anonyme");
 const searchQuery = ref("");
 const showSearch = ref(false);
-let currentUser = null;
+const currentUser = ref(null);
 const userStore = useUserStore();
+const backupProfilePictureUrl = "/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
+
+const handleProfilePictureError = (event) => {
+  event.target.src = backupProfilePictureUrl;
+}
 
 const toggleSidebar = () => {
   eventBus.value.toggleSidebar();
@@ -150,9 +158,9 @@ const logout = () => {
   window.location.reload();
 };
 
-onMounted( () => {
-  currentUser = userStore.getCurrentUser();
-  currentUserName.value = currentUser.userName;
+onBeforeMount( () => {
+  currentUser.value = userStore.getCurrentUser();
+  currentUserName.value = currentUser.value.userName;
 
   document.addEventListener('click', handleClickOutside);
 });
diff --git a/src/views/main/Profile.vue b/src/views/main/Profile.vue
index 757fd19..1628ac0 100644
--- a/src/views/main/Profile.vue
+++ b/src/views/main/Profile.vue
@@ -6,9 +6,9 @@
         Personnaliser votre profil
       </h1>
       
-      <ProfileBanner :user="currentUser"></ProfileBanner>
+      <ProfileBanner @updateProfilePicture="updateProfilePicture" @updateBannerPicture="updateBannerPicture" :user="currentUser"></ProfileBanner>
       <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="flex space-x-2">
@@ -46,7 +46,7 @@ import {useClient} from "@/plugins/api.js";
 const userStore = useUserStore();
 const client = useClient();
 
-const currentUser = ref(MyUserModel)
+const currentUser = ref(MyUserModel);
 const snackbar = ref(false);
 
 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(){
   snackbar.value = true;
-  await userStore.updateCurrentUser(client, currentUser.value);
+  await userStore.updateCurrentUser(client, currentUser.value, profilePicture.value, bannerPicture.value, websiteIcon.value);
 }
 
 </script>
diff --git a/src/views/main/ProfileBanner.vue b/src/views/main/ProfileBanner.vue
index 775b361..ccbb3c2 100644
--- a/src/views/main/ProfileBanner.vue
+++ b/src/views/main/ProfileBanner.vue
@@ -6,7 +6,7 @@
       </div>
       <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>
@@ -30,8 +30,12 @@
     </div>
 
     <div class="px-3 py-3">
-      <v-file-input v-model="bannerImage" label="Téléverser une nouvelle bannière"
-                    @change="onBannerFileChange"></v-file-input>
+      <v-file-input
+          ref="bannerImageInput"
+          v-model="bannerImage" 
+          label="Téléverser une nouvelle bannière"
+          @change="onBannerFileChange">
+      </v-file-input>
     </div>
 
     <!-- Profile -->
@@ -43,11 +47,16 @@
         <img :src="profilePictureUrl"
              :style="{ borderColor: user.profileColors.accent, borderWidth: '3px', borderStyle: 'solid' }"
              class="rounded-full max-w-48 max-w-48"
+             @error="handleProfileImageError"
              alt="Profile Image">
       </div>
       <div class="px-3">
-        <v-file-input v-model="profilePicture" label="Téléverser une nouvelle photo de profil"
-                      @change="onProfileFileChange"></v-file-input>
+        <v-file-input
+            ref="profileImageInput"
+            v-model="profilePicture" 
+            label="Téléverser une nouvelle photo de profil"
+            @change="onProfileFileChange">
+        </v-file-input>
       </div>
     </div>
 
@@ -68,17 +77,19 @@
 </template>
 
 <script setup>
-  import { ref, defineProps } from 'vue';
+import {ref, defineProps, onMounted} from 'vue';
   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({
-  initialBannerImageUrl: { type: String, default: '/images/usersmedia/HutopyProfile/banners/banner01.png' },
-  initialProfilePictureUrl: { type: String, default: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png' },
-  user: { type: MyUserModel },
-});
+    user: { type: MyUserModel },
+  });
   
-  const bannerImageUrl = ref(props.initialBannerImageUrl);
-  const profilePictureUrl = ref(props.initialProfilePictureUrl);
+  const bannerImageUrl = ref(props.user.storedDataUrls.bannerPictureUrl);
+  const profilePictureUrl = ref(props.user.storedDataUrls.profilePictureUrl);
 
   const bannerImage = ref(null);
   const profilePicture = ref(null);
@@ -86,27 +97,38 @@
   const showColorPicker = ref(false);
   const selectedColor = ref('#F4F4F4');
   const colorTarget = ref('');
+  
+  const handleProfileImageError = (event) => {
+    event.target.src = fallbackProfilePictureUrl;
+  }
+
+  const handleBannerImageError = (event) => {
+    event.target.src = fallbackBannerPictureUrl;
+  }
 
   const onBannerFileChange = (event) => {
-  const file = event.target.files[0];
-  if (file) {
-  const reader = new FileReader();
-  reader.onload = (e) => {
-  bannerImageUrl.value = e.target.result;
-};
-  reader.readAsDataURL(file);
-}
+    const file = event.target.files[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+      bannerImageUrl.value = e.target.result;
+    };
+    reader.readAsDataURL(file);
+    emit('updateBannerPicture', file);
+    }
 };
 
   const onProfileFileChange = (event) => {
-  const file = event.target.files[0];
-  if (file) {
-  const reader = new FileReader();
-  reader.onload = (e) => {
-  profilePictureUrl.value = e.target.result;
-};
-  reader.readAsDataURL(file);
-}
+    const file = event.target.files[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+      profilePictureUrl.value = e.target.result;
+    };
+    reader.readAsDataURL(file);
+    emit('updateProfilePicture', file);
+  }
+    
 };
 
   const openColorPicker = (target) => {
@@ -117,23 +139,23 @@
   const applyColor = () => {
   if (colorTarget.value === 'top') {
     props.user.profileColors.bannerTop = selectedColor.value;
-} else if (colorTarget.value === 'bottom') {
-    props.user.profileColors.bannerBottom = selectedColor.value;
-} else if (colorTarget.value === 'accent') {
-    props.user.profileColors.accent = selectedColor.value;
-} else if (colorTarget.value === 'menu') {
-    props.user.profileColors.menu = selectedColor.value;
-}
-  showColorPicker.value = false;
-};
+  } else if (colorTarget.value === 'bottom') {
+      props.user.profileColors.bannerBottom = selectedColor.value;
+  } else if (colorTarget.value === 'accent') {
+      props.user.profileColors.accent = selectedColor.value;
+  } else if (colorTarget.value === 'menu') {
+      props.user.profileColors.menu = selectedColor.value;
+  }
+    showColorPicker.value = false;
+  };
 
+  /// Simple function to determine if the text should be white or black based on the background color
   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 r = parseInt(color.substr(0, 2), 16);
-  const g = parseInt(color.substr(2, 2), 16);
-  const b = parseInt(color.substr(4, 2), 16);
-  const brightness = (r * 299 + g * 587 + b * 114) / 1000;
-  return brightness > 155 ? '#000' : '#fff';
-};
+    const color = bgColor.replace('#', '');
+    const r = parseInt(color.substr(0, 2), 16);
+    const g = parseInt(color.substr(2, 2), 16);
+    const b = parseInt(color.substr(4, 2), 16);
+    const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+    return brightness > 155 ? '#000' : '#fff';
+  };
 </script>
diff --git a/src/views/main/SocialLinks.vue b/src/views/main/SocialLinks.vue
index a429abf..6b472e5 100644
--- a/src/views/main/SocialLinks.vue
+++ b/src/views/main/SocialLinks.vue
@@ -2,12 +2,36 @@
   <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="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">
-          <label class="text-lg">{{ network.label }}</label>
-        </div>
-        <v-text-field v-model="network.value" :label="network.label" variant="outlined"></v-text-field>
+      <div class="flex justify-between items-center mb-2">
+        <label class="text-lg">Instagram</label>
       </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 items-center mb-2">
           <label class="text-lg mr-4">Icône pour votre site web *svg</label>
@@ -22,22 +46,16 @@
 </template>
 
 <script setup>
-import {defineProps, ref} from 'vue';
+import { defineProps, ref } from 'vue';
+import MyUserModel from "@/models/myUserModel.js";
 
 const props = defineProps({
-  socialNetworks: { type: Object },
+  user: { type: MyUserModel },
 });
 
-const socialNetworks = ref([
-  { 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 emit = defineEmits(["updateWebsiteIcon"]);
 
-const iconUrl = ref('');
+const iconUrl = ref(props.user.storedDataUrls.websiteIconUrl);
 const iconFile = ref(null);
 
 const onFileChange = (event) => {
@@ -48,6 +66,7 @@ const onFileChange = (event) => {
       iconUrl.value = e.target.result;
     };
     reader.readAsDataURL(file);
+    emit("updateWebsiteIcon", file)
   }
 };
 </script>
diff --git a/src/views/main/Wallet.vue b/src/views/main/Wallet.vue
index f600fca..98131be 100644
--- a/src/views/main/Wallet.vue
+++ b/src/views/main/Wallet.vue
@@ -78,11 +78,6 @@ onBeforeMount( () => {
 
     userTransactions.value = myUser.userTransactions;
     totalBalance.value = myUser.totalBalance;
-    
-    console.log(userTransactions.value);
-    console.log(totalBalance.value);
-    console.log(formattedTransactions);
-    console.log(formattedBalance);
   } catch (error) {
     navigateToHome();
   }