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