Fix/port 5173

cypress/docker-compose-gitlab-override.yml

@@ -6,7 +6,7 @@ services:
       - $PROJECT_DIR:/src
     working_dir: /src
     command: >
-      sh -c "apk add --update --no-cache curl && yarn install && yarn start"
+      sh -c "apk add --update --no-cache curl && yarn install && yarn dev"
     environment:
       PORT: 5173
       VITE_API_URL: http://api.localtest.me:5000

package.json

@@ -7,7 +7,7 @@
   "private": true,
   "scripts": {
     "dev": "vite",
-    "start": "vite --port $PORT",
+    "start": "vite --mode production --port $PORT",
     "build": "run-p build-only",
     "preview": "vite preview",
     "test:unit": "vitest --environment jsdom --root src/",

src/components/Button.vue

@@ -148,7 +148,7 @@ defineProps({
   margin-right: 0;
   font-size: toRem(1.4);
 }
-.no-text-green .icon {
+.no-text-blue .icon {
   color: var(--blue);
   margin-right: 0;
   font-size: toRem(1.6);
@@ -173,6 +173,7 @@ defineProps({
 }
 .link--black {
   color: var(--black);
+  text-decoration: underline;
   .icon {
     font-size: toRem(1.4);
     color: var(--black);

src/components/EditText.vue

@@ -36,9 +36,9 @@
       <span v-else class="title">{{ text }}</span>
       <div v-if="!isEditTitle" class="edit-button">
         <Button
-          look="no-text-white"
+          :text="$t('pages.upload.edit_title')"
+          look="link--black row-reverse"
           icon="bi bi-pen"
-          :tooltip="$t('pages.upload.edit_title_tooltip')"
           :disabled="isDisabled"
           @trigger="goToEditMode"
         />
@@ -122,15 +122,7 @@ const isDisabled = computed<boolean>(() => props.isLoading && !props.isLoaded)
   width: 100%;
 }
 .edit-button {
-  background-color: var(--blue);
-  border-radius: 50%;
-  height: toRem(2.5);
-  width: toRem(2.5);
-  padding: toRem(1);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-left: toRem(1.5);
+  margin-left: toRem(1);
   z-index: 2;
 }
 .wrapper-input {

src/components/Header.vue

@@ -31,6 +31,15 @@
           @triggerClose="closeModal"
         />
         <div class="wrapper-right-entries">
+          <div>
+            <Link
+              :text="$t('general.header.viewer')"
+              :route="{ name: 'home' }"
+              look="link--blue"
+              class="desktop"
+              @click.native="closeModal"
+            />
+          </div>
           <div>
             <Link
               v-if="isLogged"
@@ -187,14 +196,9 @@ const userName = computed((): string => {
 .wrapper-right-entries {
   display: flex;
   align-items: center;
-  div:first-child {
+  div {
     margin-right: toRem(2);
   }
-  div:last-child {
-    .desktop {
-      margin-right: 0;
-    }
-  }
 }
 .link-upload {
   margin-right: toRem(2);

src/components/Viewer.vue

@@ -183,7 +183,7 @@ function setupStandAlone(tiles: string): void {
     }
   )
 }
-function setupEditor(tiles: string): void {
+async function setupEditor(tiles: string): void {
   const raster = import.meta.env.VITE_RASTER_TILE
   let paramsMap: MapInterface
   paramsMap = {
@@ -211,7 +211,7 @@ function setupEditor(tiles: string): void {
     }
   }
   try {
-    viewer.value = new Editor(
+    viewer.value = await new Editor(
       'viewer', // Div ID
       `${manageSlashUrl()}/api/search`,
       {

src/locales/en.json

@@ -9,6 +9,7 @@
       "login_text": "Connect",
       "register_text": "Register",
       "contribute_text": "Why contribute ?",
+      "viewer": "Visionneuse",
       "my_account": "My account",
       "upload_text": "+  Share pictures",
       "sequences_text": "My pictures",
@@ -83,9 +84,9 @@
       "duration_begin": "Start :",
       "duration_end": "End :",
       "camera": "Camera :",
-      "button_delete": "Delete",
-      "button_disable": "Hide",
-      "button_enable": "Show",
+      "button_delete": "Delete the sequence",
+      "button_disable": "Hide the sequence",
+      "button_enable": "Show the sequence",
       "picture_selected": "{count} picture selected| {count} pictures selected",
       "hours": "{count} hour| {count} hours",
       "minutes": "{count} minute| {count} minutes",
@@ -185,7 +186,7 @@
       "no_img_text": "no picture upload so far",
       "upload_done": "Sequence upload done",
       "sequence_link": "Show this sequence",
-      "edit_title_tooltip": "Edit the sequence's title",
+      "edit_title": "Edit the title",
       "edit_placeholder_input": "Edit the sequence's title",
       "ok_button": "OK",
       "pictures_error": "{count} picture could not be uploaded| {count} pictures could not be uploaded",

src/locales/fr.json

@@ -9,6 +9,7 @@
       "login_text": "Connexion",
       "register_text": "Inscription",
       "contribute_text": "Pourquoi contribuer ?",
+      "viewer": "Visionneuse",
       "my_account": "Mon compte",
       "upload_text": "+  Partager des photos",
       "sequences_text": "Mes photos",
@@ -83,9 +84,9 @@
       "duration_begin": "Début :",
       "duration_end": "Fin :",
       "camera": "Matériel :",
-      "button_delete": "Supprimer",
-      "button_disable": "Masquer",
-      "button_enable": "Afficher",
+      "button_delete": "Supprimer la séquence",
+      "button_disable": "Masquer la séquence",
+      "button_enable": "Afficher la séquence",
       "picture_selected": "{count} photo sélectionnée| {count} photos sélectionnées",
       "hours": "{count} heure| {count} heures",
       "minutes": "{count} minute| {count} minutes",
@@ -185,7 +186,7 @@
       "no_img_text": "aucune image chargée actuellement",
       "upload_done": "Le chargement de la séquence est terminé",
       "sequence_link": "Accéder à cette séquence",
-      "edit_title_tooltip": "Modifier le titre de la séquence",
+      "edit_title": "Modifier le titre",
       "edit_placeholder_input": "Modifier le titre de la séquence",
       "ok_button": "Valider",
       "pictures_error": "{count} image n'a pas pu être chargée| {count} images n'ont pas pu être chargées",

src/locales/hu.json

@@ -9,6 +9,7 @@
       "login_text": "Kapcsolódás",
       "register_text": "Regisztráció",
       "contribute_text": "Miért működjön közre?",
+      "viewer": "Néző",
       "my_account": "Saját fiók",
       "upload_text": "+ Fényképek megosztása",
       "sequences_text": "Saját fényképek",
@@ -83,9 +84,9 @@
       "duration_begin": "Kezdet:",
       "duration_end": "Vég:",
       "camera": "Kamera:",
-      "button_delete": "Törlés",
-      "button_disable": "Elrejtés",
-      "button_enable": "Megjelenítés",
+      "button_delete": "Törlés szekvenciás",
+      "button_disable": "Elrejtés szekvenciás",
+      "button_enable": "Megjelenítés szekvenciás",
       "picture_selected": "{count} fénykép kiválasztva| {count} fénykép kiválasztva",
       "hours": "{count} óra| {count} óra",
       "minutes": "{count} perc| {count} perc",
@@ -185,7 +186,7 @@
       "no_img_text": "még nem volt képfeltöltés",
       "upload_done": "A sorozat feltöltése elkészült",
       "sequence_link": "A sorozat megjelenítése",
-      "edit_title_tooltip": "A sorozat címének szerkesztése",
+      "edit_title": "A sorozat címének",
       "edit_placeholder_input": "A sorozat címének szerkesztése",
       "ok_button": "OK",
       "pictures_error": "{count} kép feltöltése nem sikerült| {count} kép feltöltése nem sikerült",

src/views/MySequenceView.vue

@@ -91,10 +91,7 @@
               @trigger="deleteCollection"
             />
           </div>
-          <div
-            :class="[sequence.status, 'collapse py-2 show']"
-            id="collapseTarget"
-          >
+          <div :class="[sequence.status, 'collapse show']" id="collapseTarget">
             <div class="block-collapse">
               <div class="wrapper-info-top">
                 <span v-if="sequence.created"
@@ -255,6 +252,7 @@ const menuHeight = ref<string>('0')
 const viewerRef = ref<InstanceType<typeof ViewerType> | null>(null)
 
 onMounted(async () => {
+  isLoading.value = true
   try {
     const fetchAllCollectionInfo = await Promise.all([
       fetchCollection(route.params.id),
@@ -280,38 +278,45 @@ onMounted(async () => {
     if (!viewerRef.value) return
     const viewerMap = viewerRef.value.viewer
     await viewerMap._api.onceReady()
-    if (sequence.value) viewerMap.select(sequence.value.id, itemSelected.value)
     await goToThePageAndScroll()
   } catch (err) {
     console.log(err)
   }
 })
 
-watchEffect(() => {
-  goToThePageAndScroll()
-})
 async function goToThePageAndScroll() {
-  if (!viewerRef || !viewerRef.value || !viewerRef.value.viewer) return
-  viewerRef.value.viewer.addEventListener(
+  if (!viewerRef.value || !viewerRef.value || !viewerRef.value.viewer) return
+  console.log('111111')
+  const viewerMap = viewerRef.value.viewer
+  viewerMap.addEventListener(
     'psv:picture-loaded',
     async (e: { detail: { picId: string } }): Promise<void> => {
+      console.log('222222')
       if (!pictureExistInList(getCurrentPicId(e.detail.picId))) {
+        console.log('333333')
         await goToTheGoodPage(getCurrentPicId(e.detail.picId))
       }
       itemSelected.value = getCurrentPicId(e.detail.picId)
+      if (!sequence.value) return
+      console.log('44444')
+      viewerMap.select(sequence.value.id, itemSelected.value)
       scrollIntoSelected(
         getCurrentPicId(e.detail.picId),
         pictures.value.map((e) => e.id)
       )
+      console.log('555555')
+      isLoading.value = false
     }
   )
 }
 function setPanelView(value: string): void {
+  isLoading.value = true
   panelView.value = value
   if (value === 'orientation') {
     viewerType.value = 'editor'
     setSeqDegrees()
   } else viewerType.value = 'viewer'
+  isLoading.value = false
 }
 function setSeqDegrees(): void {
   if (!viewerRef.value) return
@@ -643,7 +648,11 @@ async function patchOrDeleteCollectionItems(reqType: string): Promise<void> {
 }
 .wrapper-button {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
+  .default {
+    margin-bottom: toRem(1);
+  }
 }
 .disable-button {
   margin-right: toRem(1);
@@ -710,6 +719,7 @@ async function patchOrDeleteCollectionItems(reqType: string): Promise<void> {
   border-bottom-left-radius: 0;
 }
 .header-menu {
+  margin-top: toRem(2);
   display: flex;
   justify-content: space-between;
   margin-bottom: toRem(1);

src/views/MySequencesView.vue

@@ -95,7 +95,7 @@
           </div>
           <div class="sequence-header-item">
             <Button
-              look="link--black no-text"
+              look="no-text-blue-dark"
               :icon="iconButtonSort('datetime')"
               data-test="button-sort-date"
               @trigger="sortList('datetime')"
@@ -103,7 +103,7 @@
             <span class="title">{{ $t('pages.sequences.sequence_date') }}</span>
             <div class="button-filter">
               <Button
-                :look="filterClass"
+                look="no-text-blue-dark"
                 :icon="iconButtonFilter('datetime')"
                 :tooltip="$t('pages.sequences.sequence_date_tooltip')"
                 @trigger="displayModal('datetime')"
@@ -122,7 +122,7 @@
             }}</span>
             <div class="button-filter">
               <Button
-                :look="filterClass"
+                look="no-text-blue-dark"
                 :icon="iconButtonFilter('created')"
                 :tooltip="$t('pages.sequences.sequence_creation_tooltip')"
                 @trigger="displayModal('created')"
@@ -398,8 +398,8 @@ function iconButtonFilter(type: string): string {
     filterDate.value.start &&
     filterDate.value.end &&
     filterDate.value.type === type
-  if (isDateSelected) return 'bi bi-funnel-fill'
-  return 'bi bi-funnel'
+  if (isDateSelected) return 'bi bi-calendar-check-fill'
+  return 'bi bi-calendar'
 }
 async function fetchAndFormatSequence(): Promise<void> {
   const { data } = await axios.get('api/users/me/collection?limit=25')
@@ -525,9 +525,6 @@ async function goToNextPage(value: string): Promise<void> {
   isLoading.value = true
   await updateSequence(value)
 }
-const filterClass = computed<string>((): string => {
-  return 'no-text-green'
-})
 const modalTitle = computed<string>((): string => {
   if (calendarType.value === 'datetime') {
     return t('pages.sequences.filter_date_title')
@@ -849,11 +846,8 @@ watchEffect(() => {
     color: var(--black);
   }
 }
-.button-filter {
-  margin-left: toRem(-1);
-  .icon {
-    font-size: toRem(1);
-  }
+.button-filter .icon {
+  font-size: toRem(1);
 }
 .no-sequence {
   padding-top: toRem(2);

src/views/UploadPicturesView.vue

@@ -3,6 +3,7 @@
     <section class="section">
       <InformationCard
         v-if="informationCardDisplayed"
+        look="blue"
         :text="$t('pages.upload.description')"
       >
         <template v-slot:cross>

vite.config.js

@@ -11,10 +11,10 @@ export default ({ mode }) => {
       host: true,
       port: 5173,
       strictPort: true,
-      hmr: {
+      hmr: mode == "development" ? {
+        overlay: false,
         clientPort: 5173,
-        overlay: false
-      }
+      } : false,
     },
     base: '/',
     plugins: [