From 9ed405b98240c0fcd9eef2a6be186733be59ffd7 Mon Sep 17 00:00:00 2001
From: Jonathan Bourdon <lowrad000@gmail.com>
Date: Thu, 13 Feb 2025 03:19:28 -0500
Subject: [PATCH] Better CreatorHome

---
 frontend/src/views/creators/CreatorHome.vue | 492 ++++++++++----------
 1 file changed, 246 insertions(+), 246 deletions(-)

diff --git a/frontend/src/views/creators/CreatorHome.vue b/frontend/src/views/creators/CreatorHome.vue
index 8c077b0..0fad539 100644
--- a/frontend/src/views/creators/CreatorHome.vue
+++ b/frontend/src/views/creators/CreatorHome.vue
@@ -1,288 +1,288 @@
 <template>
-  <div class="bg-slate-700 p-4">
-  <div v-if="creatorProfileStore.creator?.id === brandingStore.value.id"
-       class="flex justify-end">
+  <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"
-    >
-      {{ isEditMode ? 'Enregistrer' : 'Éditer la page' }}
-    </button>
+      <!-- Bouton principal : Éditer ou Enregistrer -->
+      <button
+          v-if="isLoggedIn"
+          class="primary"
+          @click="isEditMode ? saveChanges() : toggleEditMode()"
+      >
+        {{ isEditMode ? 'Enregistrer' : 'Éditer la page' }}
+      </button>
 
-    <button
-        v-if="isEditMode && isLoggedIn"
-        @click="cancelEdit"
-        class="secondary"
-    >
-      Annuler
-    </button>
-  </div>
+      <button
+          v-if="isEditMode && isLoggedIn"
+          class="secondary"
+          @click="cancelEdit"
+      >
+        Annuler
+      </button>
+    </div>
 
-  <!-- MainPage -->
-    <div class="flex flex-col mx-auto mt-4">
+    <!-- MainPage -->
+    <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>
 
-    <div>
-      <!-- Main image  Bloc D'information-->
-      <div class="py-4">
-
-        <div v-if="!isEditMode">
-          <p v-if="mainImageText" class="text-lg text-justify">
-            {{ mainImageText }}
-          </p>
-        </div>
-        <v-textarea v-if="isEditMode" label="Description" variant="outlined" v-model="editableMainImageText"
-                    class="w-full p-2 py-6 "></v-textarea>
-
-        <div class="flex flex-row items-center space-x-4">
-          <!--          image principale-->
-          <div v-if="!isEditMode" class="flex justify-center items-center w-1/2">
-            <img
-                v-if="mainImageUrl"
-                :src="mainImageUrl"
-                alt="Image principale"
-                class="max-w-full h-auto cursor-pointer"/>
-          </div>
-          <div v-if="isEditMode" class="relative flex justify-center">
-            <label>
-              <input type="file" @change="updateImage('mainImageUrl', $event)" class="hidden"/>
-              <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">
-              X
-            </button>
-          </div>
-
-          <div class="w-1/2 flex flex-col justify-center">
-            <h2 v-if="videoSubtitleMain" class="text-xl font-semibold text-center">
-              Pourquoi nous supporter
-            </h2>
-
-            <div v-if="!isEditMode">
-              <p v-if="mainVideoText" class="text-lg text-justify">
-                {{ mainVideoText }}
-              </p>
-            </div>
-
-            <div v-if="isEditMode">
-              <v-textarea
-                  label="Description"
-                  v-model="editableMainVideoText"
-                  class="p-2 rounded-md mt-4"
-                  variant="outlined"
-                  rows="10"
-              ></v-textarea>
-            </div>
-          </div>
-        </div>
-
-        <div>
-          <div v-if="!isEditMode" class="py-5 text-lg font-bold">
-            {{ videoSubtitle }}
-          </div>
-          <div v-if="isEditMode">
-            <v-text-field
-                label="Titre"
-                variant="outlined"
-                v-model="editableVideoSubtitle"
-                class="w-full p-2"
-            ></v-text-field>
-          </div>
-
-          <v-textarea v-if="isEditMode"
-                      v-model="editableImagesText"
-                      class="w-full p-2 border rounded-md"
-                      rows="10"
-                      variant="outlined">
-          </v-textarea>
+      <div>
+        <!-- Main image  Bloc D'information-->
+        <div class="py-4">
 
           <div v-if="!isEditMode">
-            <p v-if="imagesText" class="text-lg text-justify">
-              {{ imagesText }}
+            <p v-if="mainImageText" class="text-lg text-justify">
+              {{ mainImageText }}
             </p>
           </div>
+          <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-->
+            <div v-if="!isEditMode" class="flex justify-center items-center w-1/2">
+              <img
+                  v-if="mainImageUrl"
+                  :src="mainImageUrl"
+                  alt="Image principale"
+                  class="max-w-full h-auto cursor-pointer"/>
+            </div>
+            <div v-if="isEditMode" class="relative flex justify-center">
+              <label>
+                <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"
+                      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>
+
+            <div class="w-1/2 flex flex-col justify-center">
+              <h2 v-if="videoSubtitleMain" class="text-xl font-semibold text-center">
+                Pourquoi nous supporter
+              </h2>
+
+              <div v-if="!isEditMode">
+                <p v-if="mainVideoText" class="text-lg text-justify">
+                  {{ mainVideoText }}
+                </p>
+              </div>
+
+              <div v-if="isEditMode">
+                <v-textarea
+                    v-model="editableMainVideoText"
+                    class="p-2 rounded-md mt-4"
+                    label="Description"
+                    rows="10"
+                    variant="outlined"
+                ></v-textarea>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <div v-if="!isEditMode" class="py-5 text-lg font-bold">
+              {{ videoSubtitle }}
+            </div>
+            <div v-if="isEditMode">
+              <v-text-field
+                  v-model="editableVideoSubtitle"
+                  class="w-full p-2"
+                  label="Titre"
+                  variant="outlined"
+              ></v-text-field>
+            </div>
+
+            <v-textarea v-if="isEditMode"
+                        v-model="editableImagesText"
+                        class="w-full p-2 border rounded-md"
+                        rows="10"
+                        variant="outlined">
+            </v-textarea>
+
+            <div v-if="!isEditMode">
+              <p v-if="imagesText" class="text-lg text-justify">
+                {{ imagesText }}
+              </p>
+            </div>
+          </div>
         </div>
-      </div>
 
-      <!--      media-->
-      <div v-if="!isEditMode">
-        <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">
-          </iframe>
+        <!--      media-->
+        <div v-if="!isEditMode">
+          <div v-if="videoUrlMain" class="video-container">
+            <iframe
+                :src="videoUrlMain"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowfullscreen
+                class="video-frame"
+                title="YouTube video player">
+            </iframe>
+          </div>
         </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"
-        />
-      </div>
+        <div v-if="isEditMode">
+          <v-text-field
+              v-if="isEditMode"
+              v-model="editableVideoUrlMain"
+              class="w-full p-2 rounded-md"
+              label="URL Video"
+              type="text"
+              variant="outlined"
+          />
+        </div>
 
-      <!-- Images  -->
+        <!-- Images  -->
 
-      <div v-if="!isEditMode">
-        <div v-if="imagesSubtitle || image1Url || image2Url || image3Url || image4Url || imagesText ">
-          <!--        images-->
-          <div class="py-2">
-            <div>
-              <!-- Affichage des images -->
-              <div class="flex  gap-2">
-                <!-- Première image -->
-                <div v-if="image1Url" class="relative w-full sm:flex-1 ">
-                  <img :src="image1Url"
-                       alt="Image 1"
-                       class="rounded-md max-w-full h-auto cursor-pointer"/>
-                </div>
+        <div v-if="!isEditMode">
+          <div v-if="imagesSubtitle || image1Url || image2Url || image3Url || image4Url || imagesText ">
+            <!--        images-->
+            <div class="py-2">
+              <div>
+                <!-- Affichage des images -->
+                <div class="flex  gap-2">
+                  <!-- Première image -->
+                  <div v-if="image1Url" class="relative w-full sm:flex-1 ">
+                    <img :src="image1Url"
+                         alt="Image 1"
+                         class="rounded-md max-w-full h-auto cursor-pointer"/>
+                  </div>
 
-                <!-- Deuxième image -->
-                <div v-if="image2Url" class="relative w-full sm:flex-1 ">
-                  <img :src="image2Url"
-                       alt="Image 2"
-                       class="rounded-md max-w-full h-auto cursor-pointer"/>
-                </div>
+                  <!-- Deuxième image -->
+                  <div v-if="image2Url" class="relative w-full sm:flex-1 ">
+                    <img :src="image2Url"
+                         alt="Image 2"
+                         class="rounded-md max-w-full h-auto cursor-pointer"/>
+                  </div>
 
-                <!-- Troisième image -->
-                <div v-if="image3Url" class="relative w-full sm:flex-1 ">
-                  <img :src="image3Url"
-                       alt="Image 3"
-                       class="rounded-md max-w-full h-auto cursor-pointer"/>
-                </div>
+                  <!-- Troisième image -->
+                  <div v-if="image3Url" class="relative w-full sm:flex-1 ">
+                    <img :src="image3Url"
+                         alt="Image 3"
+                         class="rounded-md max-w-full h-auto cursor-pointer"/>
+                  </div>
 
-                <!-- Quatrième image -->
-                <div v-if="image4Url" class="relative w-full sm:flex-1 ">
-                  <img :src="image4Url"
-                       alt="Image 4"
-                       class="rounded-md max-w-full h-auto cursor-pointer"/>
+                  <!-- Quatrième image -->
+                  <div v-if="image4Url" class="relative w-full sm:flex-1 ">
+                    <img :src="image4Url"
+                         alt="Image 4"
+                         class="rounded-md max-w-full h-auto cursor-pointer"/>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
 
-      <div v-if="isEditMode" class="rounded-2xl">
-        <!--images-->
-        <div class=" text-2xl pa-2">Images</div>
-        <div class="pa-2 grid grid-cols-1 gap-4 md:grid-cols-4">
-          <!-- Première image -->
-          <div class="relative">
-            <label>
-              <input type="file" @change="updateImage('image1Url', $event)" class="hidden"/>
-              <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">
-              X
-            </button>
+        <div v-if="isEditMode" class="rounded-2xl">
+          <!--images-->
+          <div class=" text-2xl pa-2">Images</div>
+          <div class="pa-2 grid grid-cols-1 gap-4 md:grid-cols-4">
+            <!-- Première image -->
+            <div class="relative">
+              <label>
+                <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 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>
+
+            <!-- Deuxième image -->
+            <div class="relative">
+              <label>
+                <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 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>
+
+            <!-- Troisième image -->
+            <div class="relative">
+              <label>
+                <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 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>
+
+            <!-- Quatrième image -->
+            <div class="relative">
+              <label>
+                <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 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>
           </div>
 
-          <!-- Deuxième image -->
-          <div class="relative">
-            <label>
-              <input type="file" @change="updateImage('image2Url', $event)" class="hidden"/>
-              <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">
-              X
-            </button>
-          </div>
-
-          <!-- Troisième image -->
-          <div class="relative">
-            <label>
-              <input type="file" @change="updateImage('image3Url', $event)" class="hidden"/>
-              <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">
-              X
-            </button>
-          </div>
-
-          <!-- Quatrième image -->
-          <div class="relative">
-            <label>
-              <input type="file" @change="updateImage('image4Url', $event)" class="hidden"/>
-              <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">
-              X
-            </button>
-          </div>
+          <!-- Description-->
+          <div class="text-2xl pa-2"> Description</div>
         </div>
 
-        <!-- Description-->
-        <div class="text-2xl pa-2"> Description</div>
-      </div>
+        <!--Edit-->
+        <div v-if="isEditMode">
+          <v-text-field
+              v-model="editablePhoneNumber"
+              class="w-full p-2"
+              label="Numéro de Téléphone"
+              variant="outlined"
+          ></v-text-field>
 
-      <!--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"
-        ></v-text-field>
+          <v-text-field
+              v-model="editableEmail"
+              class="w-full p-2"
+              label="Adresse Email"
+              variant="outlined"
+          ></v-text-field>
+        </div>
 
-        <v-text-field
-            label="Adresse Email"
-            variant="outlined"
-            v-model="editableEmail"
-            class="w-full p-2"
-        ></v-text-field>
-      </div>
+        <!-- Contact Info-->
+        <div v-if="!isEditMode && phoneNumber || email">
 
-      <!-- Contact Info-->
-      <div v-if="!isEditMode && phoneNumber || email">
+          <div class="my-10 flex flex-row">
 
-        <div class="my-10 flex flex-row">
+            <div v-if="phoneNumber" class="flex items-center space-x-2 w-1/2 justify-center">
+              <i class="mdi mdi-phone-outline text-2xl"></i>
+              <span>{{ phoneNumber }}</span>
+            </div>
+
+            <!-- Affichage de l'email -->
+            <div v-if="email" class="flex items-center space-x-2 w-1/2 justify-center">
+              <i class="mdi mdi-email-outline text-2xl"></i>
+              <a :href="`mailto:${email}`" class="no-underline text-current">
+                {{ email }}
+              </a>
+            </div>
 
-          <div v-if="phoneNumber" class="flex items-center space-x-2 w-1/2 justify-center">
-            <i class="mdi mdi-phone-outline text-2xl"></i>
-            <span>{{ phoneNumber }}</span>
           </div>
-
-          <!-- Affichage de l'email -->
-          <div v-if="email" class="flex items-center space-x-2 w-1/2 justify-center">
-            <i class="mdi mdi-email-outline text-2xl"></i>
-            <a :href="`mailto:${email}`" class="no-underline text-current">
-              {{ email }}
-            </a>
-          </div>
-
         </div>
       </div>
     </div>
   </div>
-  </div>
 </template>
 
 <script setup>