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

Better CreatorHome

Browse Source
This commit is contained in:
Jonathan Bourdon
2025-02-13 03:19:28 -05:00
parent 0b9ae62eda
commit 9ed405b982
1 changed files with 246 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
frontend/src/views/creators/CreatorHome.vue
View File

@@ -1,28 +1,28 @@
<template> <template>
<div class="bg-slate-700 p-4"> <div class="p-4">
<div v-if="creatorProfileStore.creator?.id === brandingStore.value.id" <div v-if="creatorProfileStore.creator?.id === brandingStore.value.id"
class="flex justify-end"> class="flex justify-end">
<!-- Bouton principal : Éditer ou Enregistrer --> <!-- Bouton principal : Éditer ou Enregistrer -->
<button <button
v-if="isLoggedIn" v-if="isLoggedIn"
@click="isEditMode ? saveChanges() : toggleEditMode()"
class="primary" class="primary"
@click="isEditMode ? saveChanges() : toggleEditMode()"
> >
{{ isEditMode ? 'Enregistrer' : 'Éditer la page' }} {{ isEditMode ? 'Enregistrer' : 'Éditer la page' }}
</button> </button>
<button <button
v-if="isEditMode && isLoggedIn" v-if="isEditMode && isLoggedIn"
@click="cancelEdit"
class="secondary" class="secondary"
@click="cancelEdit"
> >
Annuler Annuler
</button> </button>
</div> </div>
<!-- MainPage --> <!-- MainPage -->
<div class="flex flex-col mx-auto mt-4"> <div class="flex flex-col mt-4">
<h1 class="flex justify-start text-2xl font-bold text-center mb-4">Qui sommes-nous</h1> <h1 class="flex justify-start text-2xl font-bold text-center mb-4">Qui sommes-nous</h1>
@@ -35,8 +35,8 @@
{{ mainImageText }} {{ mainImageText }}
</p> </p>
</div> </div>
<v-textarea v-if="isEditMode" label="Description" variant="outlined" v-model="editableMainImageText" <v-textarea v-if="isEditMode" v-model="editableMainImageText" class="w-full p-2 py-6 " label="Description"
class="w-full p-2 py-6 "></v-textarea> variant="outlined"></v-textarea>
<div class="flex flex-row items-center space-x-4"> <div class="flex flex-row items-center space-x-4">
<!-- image principale--> <!-- image principale-->
@@ -49,14 +49,14 @@
</div> </div>
<div v-if="isEditMode" class="relative flex justify-center"> <div v-if="isEditMode" class="relative flex justify-center">
<label> <label>
<input type="file" @change="updateImage('mainImageUrl', $event)" class="hidden"/> <input class="hidden" type="file" @change="updateImage('mainImageUrl', $event)"/>
<img :src="mainImageUrl || fallbackImage" <img :src="mainImageUrl || fallbackImage"
alt="Image principale" alt="Image principale"
class=" max-w-full h-auto cursor-pointer max-h-96"/> class=" max-w-full h-auto cursor-pointer max-h-96"/>
</label> </label>
<button v-if="isEditMode" <button v-if="isEditMode"
@click="deleteImage('mainImageUrl')" class="absolute top-10 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600"
class="absolute top-10 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600"> @click="deleteImage('mainImageUrl')">
X X
</button> </button>
</div> </div>
@@ -74,11 +74,11 @@
<div v-if="isEditMode"> <div v-if="isEditMode">
<v-textarea <v-textarea
label="Description"
v-model="editableMainVideoText" v-model="editableMainVideoText"
class="p-2 rounded-md mt-4" class="p-2 rounded-md mt-4"
variant="outlined" label="Description"
rows="10" rows="10"
variant="outlined"
></v-textarea> ></v-textarea>
</div> </div>
</div> </div>
@@ -90,10 +90,10 @@
</div> </div>
<div v-if="isEditMode"> <div v-if="isEditMode">
<v-text-field <v-text-field
label="Titre"
variant="outlined"
v-model="editableVideoSubtitle" v-model="editableVideoSubtitle"
class="w-full p-2" class="w-full p-2"
label="Titre"
variant="outlined"
></v-text-field> ></v-text-field>
</div> </div>
@@ -117,22 +117,22 @@
<div v-if="videoUrlMain" class="video-container"> <div v-if="videoUrlMain" class="video-container">
<iframe <iframe
:src="videoUrlMain" :src="videoUrlMain"
title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen allowfullscreen
class="video-frame"> class="video-frame"
title="YouTube video player">
</iframe> </iframe>
</div> </div>
</div> </div>
<div v-if="isEditMode"> <div v-if="isEditMode">
<v-text-field <v-text-field
label="URL Video"
variant="outlined"
v-if="isEditMode" v-if="isEditMode"
type="text"
v-model="editableVideoUrlMain" v-model="editableVideoUrlMain"
class="w-full p-2 rounded-md" class="w-full p-2 rounded-md"
label="URL Video"
type="text"
variant="outlined"
/> />
</div> </div>
@@ -185,13 +185,13 @@
<!-- Première image --> <!-- Première image -->
<div class="relative"> <div class="relative">
<label> <label>
<input type="file" @change="updateImage('image1Url', $event)" class="hidden"/> <input class="hidden" type="file" @change="updateImage('image1Url', $event)"/>
<img :src="image1Url || fallbackImage" <img :src="image1Url || fallbackImage"
alt="Image 1" alt="Image 1"
class="rounded-md max-w-full h-auto cursor-pointer"/> class="rounded-md max-w-full h-auto cursor-pointer"/>
</label> </label>
<button @click="deleteImage('image1Url')" <button class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600"
class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600"> @click="deleteImage('image1Url')">
X X
</button> </button>
</div> </div>
@@ -199,13 +199,13 @@
<!-- Deuxième image --> <!-- Deuxième image -->
<div class="relative"> <div class="relative">
<label> <label>
<input type="file" @change="updateImage('image2Url', $event)" class="hidden"/> <input class="hidden" type="file" @change="updateImage('image2Url', $event)"/>
<img :src="image2Url || fallbackImage" <img :src="image2Url || fallbackImage"
alt="Image 2" alt="Image 2"
class="rounded-md max-w-full h-auto cursor-pointer"/> class="rounded-md max-w-full h-auto cursor-pointer"/>
</label> </label>
<button @click="deleteImage('image2Url')" <button class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600"
class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600"> @click="deleteImage('image2Url')">
X X
</button> </button>
</div> </div>
@@ -213,13 +213,13 @@
<!-- Troisième image --> <!-- Troisième image -->
<div class="relative"> <div class="relative">
<label> <label>
<input type="file" @change="updateImage('image3Url', $event)" class="hidden"/> <input class="hidden" type="file" @change="updateImage('image3Url', $event)"/>
<img :src="image3Url || fallbackImage" <img :src="image3Url || fallbackImage"
alt="Image 3" alt="Image 3"
class="rounded-md max-w-full h-auto cursor-pointer"/> class="rounded-md max-w-full h-auto cursor-pointer"/>
</label> </label>
<button @click="deleteImage('image3Url')" <button class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600"
class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600"> @click="deleteImage('image3Url')">
X X
</button> </button>
</div> </div>
@@ -227,13 +227,13 @@
<!-- Quatrième image --> <!-- Quatrième image -->
<div class="relative"> <div class="relative">
<label> <label>
<input type="file" @change="updateImage('image4Url', $event)" class="hidden"/> <input class="hidden" type="file" @change="updateImage('image4Url', $event)"/>
<img :src="image4Url || fallbackImage" <img :src="image4Url || fallbackImage"
alt="Image 4" alt="Image 4"
class="rounded-md max-w-full h-auto cursor-pointer"/> class="rounded-md max-w-full h-auto cursor-pointer"/>
</label> </label>
<button @click="deleteImage('image4Url')" <button class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600"
class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600"> @click="deleteImage('image4Url')">
X X
</button> </button>
</div> </div>
@@ -246,17 +246,17 @@
<!--Edit--> <!--Edit-->
<div v-if="isEditMode"> <div v-if="isEditMode">
<v-text-field <v-text-field
label="Numéro de Téléphone"
variant="outlined"
v-model="editablePhoneNumber" v-model="editablePhoneNumber"
class="w-full p-2" class="w-full p-2"
label="Numéro de Téléphone"
variant="outlined"
></v-text-field> ></v-text-field>
<v-text-field <v-text-field
label="Adresse Email"
variant="outlined"
v-model="editableEmail" v-model="editableEmail"
class="w-full p-2" class="w-full p-2"
label="Adresse Email"
variant="outlined"
></v-text-field> ></v-text-field>
</div> </div>