Update-Current-User WIP

src/views/main/ProfileBanner.vue

@@ -67,105 +67,82 @@
   </div>
 </template>
 
-<script>
-import {ref} from 'vue';
+<script setup>
+  import { ref, defineProps } from 'vue';
+  import MyUserModel from "@/models/myUserModel.js";
 
-export default {
-  props: {
-    initialTopColor: {type: String, default: '#6B0065'},
-    initialBottomColor: {type: String, default: '#A30E79'},
-    initialAccentColor: {type: String, default: '#282286'},
-    initialAccent2Color: {type: String, default: '#A526B6'},
-    initialBannerImageUrl: {type: String, default: '/images/usersmedia/HutopyProfile/banners/banner01.png'},
-    initialProfilePictureUrl: {
-      type: String,
-      default: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png'
-    },
-  },
-  setup(props) {
-    const topColor = ref(props.initialTopColor);
-    const bottomColor = ref(props.initialBottomColor);
-    const accentColor = ref(props.initialAccentColor);
-    const accent2Color = ref(props.initialAccent2Color);
+  const props = defineProps({
+  initialTopColor: { type: String, default: '#6B0065' },
+  initialBottomColor: { type: String, default: '#A30E79' },
+  initialAccentColor: { type: String, default: '#282286' },
+  initialAccent2Color: { type: String, default: '#A526B6' },
+  initialBannerImageUrl: { type: String, default: '/images/usersmedia/HutopyProfile/banners/banner01.png' },
+  initialProfilePictureUrl: { type: String, default: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png' },
+  user: { type: MyUserModel },
+});
 
-    const bannerImageUrl = ref(props.initialBannerImageUrl);
-    const profilePictureUrl = ref(props.initialProfilePictureUrl);
+  const topColor = ref(props.initialTopColor);
+  const bottomColor = ref(props.initialBottomColor);
+  const accentColor = ref(props.initialAccentColor);
+  const accent2Color = ref(props.initialAccent2Color);
 
-    const bannerImage = ref(null);
-    const profilePicture = ref(null);
+  const bannerImageUrl = ref(props.initialBannerImageUrl);
+  const profilePictureUrl = ref(props.initialProfilePictureUrl);
 
-    const showColorPicker = ref(false);
-    const selectedColor = ref('#F4F4F4');
-    const colorTarget = ref('');
+  const bannerImage = ref(null);
+  const profilePicture = ref(null);
 
-    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 showColorPicker = ref(false);
+  const selectedColor = ref('#F4F4F4');
+  const colorTarget = ref('');
 
-    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 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 openColorPicker = (target) => {
-      colorTarget.value = target;
-      showColorPicker.value = true;
-    };
+  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 applyColor = () => {
-      if (colorTarget.value === 'top') {
-        topColor.value = selectedColor.value;
-      } else if (colorTarget.value === 'bottom') {
-        bottomColor.value = selectedColor.value;
-      } else if (colorTarget.value === 'accent') {
-        accentColor.value = selectedColor.value;
-      } else if (colorTarget.value === 'accent2') {
-        accent2Color.value = selectedColor.value; // Appliquer la nouvelle couleur
-      }
-      showColorPicker.value = false;
-    };
+  const openColorPicker = (target) => {
+  colorTarget.value = target;
+  showColorPicker.value = true;
+};
 
-    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 applyColor = () => {
+  if (colorTarget.value === 'top') {
+  topColor.value = selectedColor.value;
+} else if (colorTarget.value === 'bottom') {
+  bottomColor.value = selectedColor.value;
+} else if (colorTarget.value === 'accent') {
+  accentColor.value = selectedColor.value;
+} else if (colorTarget.value === 'accent2') {
+  accent2Color.value = selectedColor.value;
+}
+  showColorPicker.value = false;
+};
 
-    return {
-      topColor,
-      bottomColor,
-      accentColor,
-      accent2Color,
-      bannerImageUrl,
-      profilePictureUrl,
-      bannerImage,
-      profilePicture,
-      showColorPicker,
-      selectedColor,
-      colorTarget,
-      onBannerFileChange,
-      onProfileFileChange,
-      openColorPicker,
-      applyColor,
-      getTextColor,
-    };
-  },
+  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';
 };
 </script>