social-media/src/views/main/ProfileBanner.vue

<template>
  <div>
    <div>
      <div class="px-5 py-2 bg-fuchsia-800 text-white" :style="{ backgroundColor: user.profileColors.menu }" >
        <div class="flex justify-center text-2xl">Photo de couverture</div>
      </div>
      <div>
        <div :style="{ backgroundColor: user.profileColors.bannerTop }" class="flex h-4"></div>
        <img :src="bannerImageUrl" alt="Banner Image" @error="handleBannerImageError" class="w-full object-cover">
        <div :style="{ backgroundColor: user.profileColors.bannerBottom }" class="h-4">

        </div>
        <div>
          <div class="space-x-4 flex justify-center py-2">
            <v-btn @click="openColorPicker('top')"
                   :style="{ backgroundColor: user.profileColors.bannerTop, color: getTextColor(user.profileColors.bannerTop) }">Haut
            </v-btn>
            <v-btn @click="openColorPicker('bottom')"
                   :style="{ backgroundColor: user.profileColors.bannerBottom, color: getTextColor(user.profileColors.bannerBottom) }">Bas
            </v-btn>
            <v-btn @click="openColorPicker('accent')"
                   :style="{ backgroundColor: user.profileColors.accent, color: getTextColor(user.profileColors.accent) }">Accent1
            </v-btn>
            <v-btn @click="openColorPicker('menu')"
                   :style="{ backgroundColor: user.profileColors.menu, color: getTextColor(user.profileColors.menu) }">Menu
            </v-btn>
          </div>
        </div>
      </div>
    </div>

    <div class="px-3 py-3">
      <v-file-input
          ref="bannerImageInput"
          v-model="bannerImage" 
          label="Téléverser une nouvelle bannière"
          @change="onBannerFileChange">
      </v-file-input>
    </div>

    <!-- Profile -->
    <div>
      <div class="border-t-4 items-center px-5 py-4">
        <div class="flex justify-center text-2xl ">Photo de profil</div>
      </div>
      <div class="flex justify-center  py-4">
        <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
            ref="profileImageInput"
            v-model="profilePicture" 
            label="Téléverser une nouvelle photo de profil"
            @change="onProfileFileChange">
        </v-file-input>
      </div>
    </div>

    <!-- Color Picker Dialog -->
    <v-dialog v-model="showColorPicker" max-width="400px" class="d-flex justify-center align-center">
      <v-card>
        <v-card-title class="justify-center text-center">Choisir une couleur</v-card-title>
        <v-card-text class="d-flex justify-center">
          <v-color-picker v-model="selectedColor"></v-color-picker>
        </v-card-text>
        <v-card-actions class="justify-center">
          <v-spacer></v-spacer>
          <v-btn color="primary" @click="applyColor">OK</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script setup>
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({
    user: { type: MyUserModel },
  });
  
  const bannerImageUrl = ref(props.user.storedDataUrls.bannerPictureUrl);
  const profilePictureUrl = ref(props.user.storedDataUrls.profilePictureUrl);

  const bannerImage = ref(null);
  const profilePicture = ref(null);

  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);
    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);
    emit('updateProfilePicture', file);
  }
    
};

  const openColorPicker = (target) => {
  colorTarget.value = target;
  showColorPicker.value = true;
};

  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;
  };

  /// Simple function to determine if the text should be white or black based on the background color
  const getTextColor = (bgColor) => {
    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>