English translation (except accessibility part)

CHANGELOG.md

@@ -7,24 +7,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 Before _0.1.0_, website development was on rolling release, meaning there are no version tags.
 
-## [2.2.3] - 2023-11-03
-
-### Added
-
-- Add translation based on the browser language (only trad for FR and EN for now)
-
-### Changed
-
-- Page My Sequences, add the possibility to select a sequence in the list with the map :
-  - the user can only see his sequences on the list
-  - display the selected sequence in blue in the map
-  - display a thumbnail the hovered sequence
-  - hover the sequence selected in the map on the list
-
-- add some test e2e
-- maj viewer Geovisio version to 2.2.1
-- fix some CSS
-
 ## [2.2.2] - 2023-10-16
 
 ### Changed
@@ -125,8 +107,7 @@ Before _0.1.0_, website development was on rolling release, meaning there are no
 - Header have now a new entry `Mes photos` when the user is logged to access to the sequence list
 - The router guard for logged pages has been changed to not call the api to check the token
 
-[unreleased]: https://gitlab.com/geovisio/website/-/compare/2.2.3...develop
-[2.2.1]: https://gitlab.com/geovisio/website/-/compare/2.2.2...2.2.3
+[unreleased]: https://gitlab.com/geovisio/website/-/compare/2.2.2...develop
 [2.2.1]: https://gitlab.com/geovisio/website/-/compare/2.2.1...2.2.2
 [2.2.1]: https://gitlab.com/geovisio/website/-/compare/2.2.0...2.2.1
 [2.2.0]: https://gitlab.com/geovisio/website/-/compare/2.1.3...2.2.0

cypress/e2e/login.cy.ts

@@ -1,6 +1,7 @@
 describe('In the login page', () => {
   it('type in the form to login', () => {
-    cy.visit('/')
+    cy.visit('https://geovisio-proxy-dev.osc-fr1.scalingo.io/api/auth/login')
+    cy.get('#password').type('coucouc')
   })
 })
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "geovisio-website",
-  "version": "2.2.3",
+  "version": "2.2.2",
   "engines": {
     "node": "18.16.0"
   },
@@ -25,13 +25,11 @@
     "axios": "^1.2.3",
     "bootstrap": "^5.2.3",
     "bootstrap-icons": "^1.10.3",
-    "geovisio": "2.2.1-develop-acb9989e",
+    "geovisio": "2.2.0",
     "moment": "^2.29.4",
-    "pako": "^2.1.0",
     "pinia": "^2.1.4",
     "vue": "^3.2.45",
     "vue-axios": "^3.5.2",
-    "vue-draggable-resizable-vue3": "^2.3.1-beta.13",
     "vue-eslint-parser": "^9.1.0",
     "vue-i18n": "9.2.2",
     "vue-meta": "^3.0.0-alpha.10",
@@ -59,8 +57,6 @@
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-vue": "^9.8.0",
     "jsdom": "^20.0.3",
-    "less": "^4.2.0",
-    "less-loader": "^11.1.3",
     "npm-run-all": "^4.1.5",
     "prettier": "2.8.1",
     "sass": "^1.62.0",

pako.d.ts

@@ -1 +0,0 @@
-declare module 'pako'

src/App.vue

@@ -5,13 +5,14 @@ import Footer from '@/components/Footer.vue'
 import { RouterView } from 'vue-router'
 import { useMeta } from 'vue-meta'
 import { useI18n } from 'vue-i18n'
-import { hasASessionCookieDecoded } from '@/utils/auth'
+import { useRoute } from 'vue-router'
 import { useCookies } from 'vue3-cookies'
 import { title } from '@/utils/index'
 import authConfig from './composables/auth'
 const { authConf } = authConfig()
 const { t } = useI18n()
 const { cookies } = useCookies()
+const route = useRoute()
 
 let focusMap = ref<string>('focus-map')
 
@@ -30,10 +31,7 @@ useMeta({
 function setFocusMap(value: string) {
   focusMap.value = value
 }
-const isLogged = computed((): boolean => {
-  const cookie = hasASessionCookieDecoded()
-  return !!(cookie && cookie.account)
-})
+const getUserId = computed<string>(() => cookies.get('user_id'))
 </script>
 
 <template>
@@ -55,7 +53,7 @@ const isLogged = computed((): boolean => {
         : ''
     "
   />
-  <RouterView @trigger="setFocusMap" :class="{ logged: isLogged }" />
-  <Footer v-if="!isLogged" />
+  <RouterView @trigger="setFocusMap" :class="{ logged: getUserId }" />
+  <Footer v-if="!getUserId" />
 </template>
 <style scoped></style>

src/assets/main.scss

@@ -36,9 +36,9 @@ h5 {
   --grey-dark: #3e3e3e;
   --blue: #2954e9;
   --blue-dark: #0a1f69;
+  --blue-geovisio: #34495e;
   --blue-semi: #d7dffc;
   --blue-pale: #f2f5ff;
-  --blue-geovisio: #34495e;
   --beige: #f5f3ec;
   --yellow: #fec868;
   --orange: #ff6f00;

src/components/Button.vue

@@ -46,8 +46,7 @@ defineProps({
   position: relative;
   z-index: 1;
   border-radius: toRem(1);
-  padding: toRem(1.3);
-
+  padding: toRem(1.3) toRem(2) toRem(1.3);
   .icon {
     font-size: toRem(2);
   }
@@ -104,15 +103,11 @@ defineProps({
   width: toRem(3);
   padding: 0;
   .icon {
-    color: var(--black);
+    color: var(---black);
     font-size: toRem(1.8);
     margin-right: 0;
   }
 }
-.no-text-white .icon {
-  color: var(--white);
-  margin-right: 0;
-}
 .background-white {
   background-color: var(--white);
 }
@@ -160,7 +155,7 @@ defineProps({
   position: absolute;
   bottom: -100%;
   visibility: hidden;
-  width: toRem(20);
+  width: toRem(18);
   right: 0;
   @include text(xss-regular);
 }

src/components/EditText.vue

@@ -1,131 +0,0 @@
-<template>
-  <div class="entry-edit">
-    <form
-      v-if="isEditTitle"
-      @submit.prevent="isEditTitle = false"
-      class="edit-form"
-    >
-      <div class="wrapper-input">
-        <Input
-          :text="text || ''"
-          :placeholder="$t('pages.upload.edit_placeholder_input')"
-          @input="changeTextValue"
-        />
-        <div class="close-button">
-          <Button
-            id="close-button"
-            look="no-text-white"
-            icon="bi bi-x"
-            @trigger="closeEdition"
-          />
-        </div>
-      </div>
-      <Button
-        id="valid-button"
-        :text="$t('pages.upload.ok_button')"
-        type="submit"
-        look="button button--blue"
-        @trigger="validNewName"
-      />
-    </form>
-    <span v-else class="title">{{ text }}</span>
-    <div v-if="!isEditTitle" class="edit-button">
-      <Button
-        look="no-text"
-        icon="bi bi-pen"
-        :tooltip="$t('pages.upload.edit_title_tooltip')"
-        @trigger="goToEditMode"
-      />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, computed } from 'vue'
-import Button from '@/components/Button.vue'
-import Input from '@/components/Input.vue'
-
-const emit = defineEmits<{
-  (e: 'triggerNewText', value: string | null): void
-}>()
-const props = defineProps({
-  defaultText: { type: String, default: null }
-})
-let titleToEdit = ref<string | null>(null)
-let isEditTitle = ref<boolean>(false)
-
-function changeTextValue(value: string): void {
-  titleToEdit.value = value
-}
-function closeEdition(): void {
-  isEditTitle.value = false
-  titleToEdit.value = null
-}
-function validNewName(): void {
-  emit('triggerNewText', titleToEdit.value)
-  isEditTitle.value = false
-}
-function goToEditMode(): void {
-  isEditTitle.value = true
-  titleToEdit.value = props.defaultText
-}
-
-const text = computed<string | null>(() => {
-  if (isEditTitle.value) return titleToEdit.value
-  if (props.defaultText) return props.defaultText
-  return null
-})
-</script>
-
-<style scoped lang="scss">
-.title {
-  color: var(--blue-dark);
-}
-.entry-edit {
-  display: flex;
-  align-items: center;
-  margin-bottom: toRem(2);
-  width: 100%;
-  height: toRem(4.7);
-}
-.wrapper-edit {
-  display: flex;
-  align-items: center;
-  margin-bottom: toRem(1);
-  width: 100%;
-}
-.edit-button {
-  background-color: var(--grey);
-  border-radius: 50%;
-  height: toRem(3.5);
-  width: toRem(3.5);
-  padding: toRem(1);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-left: toRem(1.5);
-}
-.wrapper-input {
-  position: relative;
-  margin-right: toRem(1.5);
-  width: 100%;
-}
-.edit-form {
-  width: 100%;
-  display: flex;
-  align-items: center;
-}
-.close-button {
-  position: absolute;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: toRem(2);
-  width: toRem(2);
-  top: toRem(-1);
-  right: toRem(-1);
-  background-color: var(--blue-dark);
-  color: var(--white);
-  border-radius: 50%;
-}
-</style>

src/components/Footer.vue

@@ -89,31 +89,12 @@ ul {
   margin-right: toRem(2);
   height: toRem(2);
 }
-@media (max-width: toRem(76.8)) {
-  .footer {
-    padding: toRem(1);
-    height: toRem(6.5);
-  }
-  .link-list {
-    flex-wrap: wrap;
-    align-items: center;
-    height: 100%;
-  }
-  .logo {
-    margin-right: toRem(0.5);
-    height: toRem(1.5);
-  }
-  .link-item {
-    margin-right: toRem(1);
-    margin-bottom: toRem(1);
-  }
-  .link {
-    height: toRem(1.5);
-  }
-}
 @media (max-width: toRem(50)) {
   .title {
     margin-bottom: 0;
   }
+  .footer {
+    padding: toRem(2);
+  }
 }
 </style>

src/components/Header.vue

@@ -107,13 +107,16 @@
 <script lang="ts" setup>
 import { ref, computed } from 'vue'
 import { onClickOutside } from '@vueuse/core'
+import { useCookies } from 'vue3-cookies'
 import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import { getAuthRoute, hasASessionCookieDecoded } from '@/utils/auth'
+import { getAuthRoute } from '@/utils/auth'
 import Link from '@/components/Link.vue'
 import InstanceName from '@/components/InstanceName.vue'
 import HeaderOpen from '@/components/header/HeaderOpen.vue'
 import AccountButton from '@/components/header/AccountButton.vue'
+
+const { cookies } = useCookies()
 const { t } = useI18n()
 const route = useRoute()
 defineProps({
@@ -125,32 +128,26 @@ let menuIsClosed = ref<boolean>(true)
 
 onClickOutside(list, () => closeModal())
 
-function closeModal(): void {
+function closeModal() {
   menuIsClosed.value = true
 }
 
 function toggleMenu(): void {
   menuIsClosed.value = !menuIsClosed.value
 }
-const isLogged = computed((): boolean => {
-  const cookie = hasASessionCookieDecoded()
-  return !!(cookie && cookie.account)
-})
+const isLogged = computed((): boolean => !!cookies.get('user_id'))
 const ariaLabel = computed((): string =>
   menuIsClosed.value
     ? t('general.header.burger_menu_aria_label_open')
     : t('general.header.burger_menu_aria_label_closed')
 )
-const userName = computed((): string => {
-  const cookie = hasASessionCookieDecoded()
-  if (cookie && cookie.account) {
-    return cookie.account.name
-      .match(/\b(\w)/g)!
-      .join('')
-      .toUpperCase()
-  }
-  return ''
-})
+const userName = computed((): string =>
+  cookies!
+    .get('user_name')
+    .match(/\b(\w)/g)!
+    .join('')
+    .toUpperCase()
+)
 </script>
 
 <style lang="scss" scoped>

src/components/ImageItem.vue

@@ -14,9 +14,9 @@
           <i v-if="status === 'hidden'" class="bi bi-eye-slash icon-hidden"></i>
           <img
             v-if="href"
-            loading="lazy"
             :src="href"
             alt=""
+            loading="lazy"
             class="photo-img"
           />
         </div>
@@ -141,6 +141,7 @@ defineProps({
 }
 .waiting-info {
   text-align: center;
+  width: 100%;
   color: var(--black);
   width: fit-content;
 }

src/components/Input.vue

@@ -1,33 +0,0 @@
-<template>
-  <input
-    :value="text"
-    :required="true"
-    :placeholder="placeholder"
-    class="input"
-    type="text"
-    @input="emitValue"
-  />
-</template>
-
-<script lang="ts" setup>
-const emit = defineEmits<{ (e: 'input', value: string): void }>()
-const props = defineProps({
-  text: { type: String, default: null },
-  placeholder: { type: String, default: '' }
-})
-
-function emitValue(event: Event): void {
-  const inputValue = (event.target as HTMLInputElement).value
-  emit('input', inputValue)
-}
-</script>
-
-<style scoped lang="scss">
-.input {
-  padding: toRem(1);
-  border-radius: toRem(0.5);
-  border: toRem(0.1) solid var(--blue-dark);
-  color: var(--blue-dark);
-  width: 100%;
-}
-</style>

src/components/InputUpload.vue

@@ -10,8 +10,8 @@
       type="file"
       multiple
       :accept="accept"
-      @change="changeFile"
       class="input-file"
+      @change="changeFile"
     />
     <i class="bi bi-cloud-upload-fill"></i>
     <span v-if="text" class="input-text">

src/components/Link.vue

@@ -80,6 +80,16 @@ function triggerButton() {
     opacity: 0.8;
   }
 }
+.icon {
+  color: var(--black);
+  font-size: toRem(2.4);
+  margin-right: toRem(1);
+}
+.logo {
+  height: inherit;
+  border-radius: toRem(0.5);
+  margin-right: toRem(1);
+}
 .button {
   height: toRem(4);
   border-radius: toRem(1);
@@ -95,16 +105,6 @@ function triggerButton() {
     opacity: 0.5;
   }
 }
-.icon {
-  color: var(--black);
-  font-size: toRem(2.4);
-  margin-right: toRem(1);
-}
-.logo {
-  height: inherit;
-  border-radius: toRem(0.5);
-  margin-right: toRem(1);
-}
 .text {
   width: 100%;
   white-space: break-spaces;
@@ -200,6 +200,10 @@ function triggerButton() {
   }
 }
 @media (max-width: toRem(50)) {
+  .default {
+    min-height: toRem(4);
+    min-width: toRem(4);
+  }
   .icon {
     margin-right: toRem(0.5);
   }

src/components/Viewer.vue

@@ -4,7 +4,7 @@
 
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from 'vue'
-import type { ViewerInterface, MapInterface } from '@/views/interfaces/common'
+import type { ViewerInterface } from '@/views/interfaces/common'
 import { getIgnTiles } from '@/utils/mapAndViewer'
 import { Viewer, StandaloneMap } from 'geovisio'
 import { createUrlLink } from '@/utils'
@@ -17,8 +17,7 @@ let viewer = ref()
 const props = defineProps({
   fetchOptions: { type: Object, default: {} },
   geovisioViewer: { type: Boolean, default: true },
-  bbox: { type: Array, default: null },
-  userId: { type: String, default: '' }
+  bbox: { type: Array, default: null }
 })
 defineExpose({
   viewer
@@ -29,7 +28,6 @@ onMounted(async () => {
   const zoom = import.meta.env.VITE_ZOOM
   const center = import.meta.env.VITE_CENTER
   let paramsViewer: ViewerInterface
-  let paramsMap: MapInterface
 
   try {
     if (props.geovisioViewer) {
@@ -100,7 +98,7 @@ onMounted(async () => {
         )
       }
     } else {
-      paramsMap = { minZoom: 7 }
+      let paramsMap = {}
       if (tiles) {
         const style = tiles.includes('wxs.ign.fr') ? await getIgnTiles() : tiles
         paramsMap = {
@@ -112,14 +110,9 @@ onMounted(async () => {
         'viewer', // Div ID
         `${import.meta.env.VITE_API_URL}/api/search`,
         {
-          ...paramsMap,
-          bounds: [props.bbox[0], props.bbox[1], props.bbox[2], props.bbox[3]],
-          zoom: 9
+          ...paramsMap
         }
       )
-      viewer.value.addEventListener('ready', () => {
-        viewer.value.setFilters({ user: props.userId }, true)
-      })
     }
     mapIsLoaded.value = true
   } catch (err) {

src/components/header/HeaderOpen.vue

@@ -157,7 +157,6 @@ ul {
   }
   .logged-link {
     padding: toRem(0);
-    margin-bottom: toRem(2);
   }
 }
 </style>

src/components/upload/UploadLoader.vue

@@ -121,7 +121,7 @@ defineProps({
   margin-bottom: toRem(1);
 }
 .sequence-button {
-  width: toRem(22);
+  width: fit-content;
 }
 .text-information {
   @include text(s-r-regular);
@@ -167,6 +167,7 @@ defineProps({
     margin-bottom: toRem(2);
   }
 }
+
 @media (max-width: toRem(102.4)) {
   .loader-title {
     flex-direction: column;

src/locales/en.json

@@ -8,7 +8,7 @@
     "header": {
       "login_text": "Connect",
       "register_text": "Register",
-      "contribute_text": "Why contribute ?",
+      "contribute_text": "PouWhyrquoi contribute ?",
       "my_account": "My account",
       "upload_text": "+  Share pictures",
       "sequences_text": "My pictures",
@@ -26,7 +26,7 @@
       "burger_menu_aria_label_closed": "Hide menu"
     },
     "footer": {
-      "panoramax_site": "Discover Panoramax",
+      "panoramax_site": "Dicover Panoramax",
       "information_gitlab": "Show source code",
       "gitlab_logo": "Gitlab logo",
       "ay11_text": "Accessibility: not compliant"
@@ -88,7 +88,7 @@
       "sequence_deleted": "The sequence has been deleted"
     },
     "share_pictures": {
-      "title": "Why contribute to Panoramax?",
+      "title": "Why contribute to the Panoramax project ?",
       "description": "Contributing to Panoramax means participating in the development of a geo-common, a sovereign, free and reusable digital resource. Each geolocalized photo published on Panoramax can be used by anyone for a variety of purposes, for example by a local authority needing to observe the status of its roads, or by a telecoms operator to prepare an intervention.\n\nEach contributor can send his or her image sequences, modify them and consult them, as well as all the views - 360° or not - contributed by the community. The compulsory blurring of faces and license plates is automated on the platform.",
       "alt_img_map": "Illustration of a woman looking at a map with her geolocated smartphone",
       "card_photo1": "Places visible from the public highway",
@@ -133,8 +133,6 @@
       "import_word": "upload",
       "import_type": "JPEG format only",
       "subtitle_import": "Picture upload",
-      "title_sequence": "Séquence title",
-      "description_title_sequence": "By default, the sequence title will be the date of the day. You can, if you want, edit the title here.",
       "text_import": "Upload your jpg files here. Each picture or series of pictures constitutes a \"sequence\". You can then find them in the \"my pictures\" section and choose to hide, show or delete them.",
       "subtitle_process": "Upload processing",
       "uploading_process": "Upload in progress...",
@@ -145,9 +143,6 @@
       "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_placeholder_input": "Edit the sequence's title",
-      "ok_button": "OK",
       "pictures_error": "{count} picture could not be uploaded| {count} pictures could not be uploaded",
       "sequence_loading_information": "Once uploaded, the sequence will be processed then published on Panoramax (usually within a couple of minutes).",
       "sequence_loaded_information": "The sequences has been uploaded and is under processing. It should be publicly available on Panoramax within a couple of minutes.",

src/locales/fr.json

@@ -133,9 +133,7 @@
       "import_word": "importer",
       "import_type": "Format JPEG uniquement",
       "subtitle_import": "Dépôt des images",
-      "title_sequence": "Titre de ma séquence",
-      "description_title_sequence": "Le titre d'une séquence est par défaut la date du jour. Vous pouvez, si vous le souhaitez le modifier ci-dessous.",
-      "text_import": "Déposez ici vos fichiers jpg. Chaque image ou série d’images constitue une « séquence ». Vous pourrez ensuite les retrouver dans la section « mes images » et choisir de les masquer, les afficher ou les supprimer.",
+      "text_import": "Déposez ici vos fichiers jpg. Chaque image ou série d’images constitue une “séquence”. Vous pourrez ensuite les retrouver dans la section « mes images » et choisir de les masquer, les afficher ou les supprimer.",
       "subtitle_process": "Traitements de l'import",
       "uploading_process": "Téléchargement en cours...",
       "sequence_title": "Séquence du ",
@@ -145,9 +143,6 @@
       "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_placeholder_input": "Modifier le titre de la séquence",
-      "ok_button": "Valider",
       "pictures_error": "{count} image n'a pas pu être chargée| {count} image n'ont pas pu être chargées",
       "sequence_loading_information": "Une fois chargée, la séquence sera en traitement et accessible sur Panoramax dans les prochaines minutes.",
       "sequence_loaded_information": "La séquence est chargée et est en cours de traitement. Elle sera accessible sur Panoramax dans quelques minutes.",

src/main.ts

@@ -6,10 +6,8 @@ import axios from 'axios'
 import VueAxios from 'vue-axios'
 import { globalCookiesConfig } from 'vue3-cookies'
 import { createMetaManager } from 'vue-meta'
-import { VueDraggableResizable } from 'vue-draggable-resizable-vue3'
 import { pinia } from './store'
 import fr from './locales/fr.json'
-import en from './locales/en.json'
 import './assets/main.scss'
 import 'bootstrap/dist/css/bootstrap.css'
 import 'bootstrap-icons/font/bootstrap-icons.css'
@@ -19,14 +17,13 @@ axios.defaults.baseURL = import.meta.env.VITE_API_URL
 axios.defaults.withCredentials = true
 
 const i18n = createI18n({
-  locale: navigator.language.split('-')[0],
+  locale: 'fr',
   fallbackLocale: 'fr',
   warnHtmlMessage: false,
   globalInjection: true,
   legacy: false,
   messages: {
-    fr,
-    en
+    fr
   }
 })
 globalCookiesConfig({
@@ -41,5 +38,4 @@ app.use(router)
 app.use(VueAxios, axios)
 app.provide('axios', app.config.globalProperties.axios)
 app.use(createMetaManager())
-app.use(VueDraggableResizable)
 app.mount('#app')

src/router/index.ts

@@ -6,7 +6,7 @@ import type {
   RouteLocationNormalized
 } from 'vue-router'
 import axios from 'axios'
-import { getAuthRoute, hasASessionCookieDecoded } from '@/utils/auth'
+import { getAuthRoute } from '@/utils/auth'
 import HomeView from '../views/HomeView.vue'
 import MyInformationView from '../views/MyInformationView.vue'
 import MySettingsView from '../views/MySettingsView.vue'
@@ -77,9 +77,8 @@ router.beforeResolve(
       to.name === 'upload-pictures'
 
     if (siteLoggedRoutes) {
-      if (!isSiteLogged()) {
-        goToLoginPage(to.path)
-      } else return next()
+      if (!isSiteLogged()) goToLoginPage(to.path)
+      else return next()
     }
     if (to.name === 'my-information') {
       try {
@@ -96,8 +95,7 @@ router.beforeResolve(
 )
 
 function isSiteLogged(): boolean {
-  const cookie = hasASessionCookieDecoded()
-  return !!(cookie && cookie.account)
+  return !!cookies.get('user_id')
 }
 
 async function isKeycloakLogout(): Promise<{ status: number }> {

src/tests/unit/components/BetaText.spec.js

@@ -1,6 +1,6 @@
 import { it, describe, expect } from 'vitest'
 import { shallowMount } from '@vue/test-utils'
-import InstanceName from '../../../components/InstanceName.vue'
+import BetaText from '../../../components/InstanceName.vue'
 import { createI18n } from 'vue-i18n'
 import fr from '../../../locales/fr.json'
 
@@ -16,7 +16,7 @@ const i18n = createI18n({
 
 describe('Template', () => {
   it('should render the component with good wording keys', async () => {
-    const wrapper = shallowMount(InstanceName, {
+    const wrapper = shallowMount(BetaText, {
       global: {
         plugins: [i18n],
         mocks: {

src/tests/unit/components/EditText.spec.js

@@ -1,88 +0,0 @@
-import { test, describe, expect, vi } from 'vitest'
-import { shallowMount } from '@vue/test-utils'
-import EditText from '../../../components/EditText.vue'
-import Button from '../../../components/Button.vue'
-import i18n from '../config'
-describe('Template', () => {
-  describe('Props', () => {
-    test('should have default props', () => {
-      const wrapper = shallowMount(EditText, {
-        global: {
-          plugins: [i18n]
-        }
-      })
-      expect(wrapper.vm.defaultText).toBe(null)
-    })
-  })
-  describe('When the props are filled', () => {
-    test('should render the component with the defaultText', () => {
-      const wrapper = shallowMount(EditText, {
-        global: {
-          plugins: [i18n]
-        },
-        props: {
-          defaultText: 'My default text'
-        }
-      })
-      expect(wrapper.html()).contains('class="title">My default text</span>')
-      expect(wrapper.html()).contains('icon="bi bi-pen"')
-    })
-  })
-  describe('When the component is in editable mode', () => {
-    test('should render the component with the element to edit the title', async () => {
-      const wrapper = shallowMount(EditText, {
-        global: {
-          plugins: [i18n]
-        }
-      })
-      wrapper.vm.isEditTitle = true
-      wrapper.vm.titleToEdit = 'title to edit'
-      await wrapper.vm.$nextTick()
-
-      expect(wrapper.html()).contains('text="title to edit"')
-      expect(wrapper.html()).contains('icon="bi bi-x"')
-      expect(wrapper.html()).contains('text="Valider"')
-    })
-    test('should valid the name and emit', async () => {
-      const wrapper = shallowMount(EditText, {
-        global: {
-          plugins: [i18n],
-          components: {
-            Button
-          }
-        }
-      })
-      wrapper.vm.isEditTitle = true
-      wrapper.vm.titleToEdit = 'title to edit'
-      await wrapper.vm.$nextTick()
-
-      const validationButton = wrapper.findComponent('#valid-button')
-      await validationButton.vm.$emit('trigger')
-
-      expect(wrapper.emitted()).toHaveProperty('triggerNewText')
-      expect(wrapper.emitted().triggerNewText[0][0]).toEqual(
-        wrapper.vm.titleToEdit
-      )
-    })
-    test('should close the edit mode', async () => {
-      const wrapper = shallowMount(EditText, {
-        global: {
-          plugins: [i18n],
-          components: {
-            Button
-          }
-        }
-      })
-      wrapper.vm.isEditTitle = true
-      wrapper.vm.titleToEdit = 'title to edit'
-      await wrapper.vm.$nextTick()
-
-      const closeButton = wrapper.findComponent('#close-button')
-      await closeButton.vm.$emit('trigger')
-      await wrapper.vm.$nextTick()
-
-      expect(wrapper.vm.isEditTitle).toEqual(false)
-      expect(wrapper.vm.titleToEdit).toEqual(null)
-    })
-  })
-})

src/tests/unit/components/Footer.spec.js

@@ -1,39 +0,0 @@
-import { test, describe, expect } from 'vitest'
-import { shallowMount } from '@vue/test-utils'
-import Footer from '../../../components/Footer.vue'
-import Link from '../../../components/Link.vue'
-import i18n from '../config'
-describe('Template', () => {
-  test('should have the links without the ay11 link', () => {
-    const wrapper = shallowMount(Footer, {
-      global: {
-        stubs: { Link },
-        plugins: [i18n]
-      }
-    })
-    expect(wrapper.html()).contains('href="https://panoramax.fr/"')
-    expect(wrapper.html()).contains('logo.jpeg')
-    expect(wrapper.html()).contains('Découvrir Panoramax')
-
-    expect(wrapper.html()).contains('href="https://gitlab.com/geovisio"')
-    expect(wrapper.html()).contains('gitlab-logo.svg')
-    expect(wrapper.html()).contains('Voir le code')
-  })
-  test('should have the ay11 link', () => {
-    Object.create(window)
-    const url = 'http://test.ign.fr'
-    Object.defineProperty(window, 'location', {
-      value: {
-        href: url
-      },
-      writable: true // possibility to override
-    })
-    const wrapper = shallowMount(Footer, {
-      global: {
-        stubs: { Link },
-        plugins: [i18n]
-      }
-    })
-    expect(wrapper.html()).contains('Accessibilité : non conforme')
-  })
-})

src/tests/unit/components/Header.spec.js

@@ -28,7 +28,7 @@ const i18n = createI18n({
 
 const router = createRouter({
   history: createWebHistory(),
-  routes: [{ path: '/', component: { template: '<div></div>' } }]
+  routes: []
 })
 
 describe('Template', () => {
@@ -96,9 +96,7 @@ describe('Template', () => {
   })
   describe('When the user is logged', () => {
     it('should render the component with good wording keys', async () => {
-      vi.spyOn(useCookies().cookies, 'get').mockReturnValue(
-        '.eJw9y0EKgzAQQNG7zLoDJpmYxMuUySRDra0pooUi3r3SRZcf_tuBRdo2rzDsMBYYgFxRytljkeyQrK0YVT16m6OhUlIihgvM_Kznfa88n9V4W2_XnzcuiqgmDBQMUtYec00WO3XqAndd7OUvXkt7j6Uup5vqRx6NJziOL8SPLNU.ZVy19Q.4DkVxu-LSF11uREkn6YIwHbn_0U'
-      )
+      vi.spyOn(useCookies().cookies, 'get').mockReturnValue('user_id=id')
 
       import.meta.env.VITE_API_URL = 'api-url/'
       const wrapper = shallowMount(Header, {
@@ -118,7 +116,7 @@ describe('Template', () => {
       expect(wrapper.html()).contains('general.header.upload_text')
       expect(wrapper.html()).contains('data-test="link-logged-upload"')
       expect(wrapper.html()).contains('<account-button')
-      expect(wrapper.html()).contains('username="J"')
+      expect(wrapper.html()).contains('username="UI"')
     })
   })
 })

src/tests/unit/components/InformationCard.spec.js

@@ -1,33 +0,0 @@
-import { test, describe, expect } from 'vitest'
-import { shallowMount } from '@vue/test-utils'
-import InformationCard from '../../../components/InformationCard.vue'
-import i18n from '../config'
-describe('Template', () => {
-  describe('Props', () => {
-    test('should have default props', () => {
-      const wrapper = shallowMount(InformationCard, {
-        global: {
-          plugins: [i18n]
-        }
-      })
-      expect(wrapper.vm.text).toBe(null)
-      expect(wrapper.vm.title).toBe(null)
-      expect(wrapper.vm.look).toBe('')
-    })
-    test('should have all the props filled', () => {
-      const wrapper = shallowMount(InformationCard, {
-        global: {
-          plugins: [i18n]
-        },
-        props: {
-          text: 'my text',
-          title: 'my title',
-          look: 'my-look'
-        }
-      })
-      expect(wrapper.html()).contains('my title</h3>')
-      expect(wrapper.html()).contains('my text</p>')
-      expect(wrapper.html()).contains('class="information-block my-look"')
-    })
-  })
-})

src/tests/unit/components/Input.spec.js

@@ -1,43 +0,0 @@
-import { test, describe, expect } from 'vitest'
-import { shallowMount } from '@vue/test-utils'
-import Input from '../../../components/Input.vue'
-import i18n from '../config'
-describe('Template', () => {
-  describe('Props', () => {
-    test('should have default props', () => {
-      const wrapper = shallowMount(Input, {
-        global: {
-          plugins: [i18n]
-        }
-      })
-      expect(wrapper.vm.text).toBe(null)
-      expect(wrapper.vm.placeholder).toBe('')
-    })
-  })
-  describe('When the props are filled', () => {
-    test('should render the button with the placeholder', () => {
-      const wrapper = shallowMount(Input, {
-        global: {
-          plugins: [i18n]
-        },
-        props: {
-          placeholder: 'My placeholder'
-        }
-      })
-      expect(wrapper.html()).contains('placeholder="My placeholder"')
-    })
-    test('should emit an input event with the prop value', async () => {
-      const wrapper = shallowMount(Input, {
-        global: {
-          plugins: [i18n]
-        },
-        props: {
-          text: 'My text'
-        }
-      })
-      await wrapper.trigger('input')
-      expect(wrapper.emitted()).toHaveProperty('input')
-      expect(wrapper.emitted().input[0][0]).toEqual(wrapper.vm.text)
-    })
-  })
-})

src/tests/unit/components/InputUpload.spec.js

@@ -1,80 +0,0 @@
-import { test, describe, expect } from 'vitest'
-import { shallowMount } from '@vue/test-utils'
-import InputUpload from '../../../components/InputUpload.vue'
-import i18n from '../config'
-describe('Template', () => {
-  describe('Props', () => {
-    test('should have default props', () => {
-      const wrapper = shallowMount(InputUpload, {
-        global: {
-          plugins: [i18n]
-        }
-      })
-      expect(wrapper.vm.text).toBe(null)
-      expect(wrapper.vm.textPictureType).toBe(null)
-      expect(wrapper.vm.textSecondPart).toBe(null)
-      expect(wrapper.vm.accept).toBe('')
-    })
-    test('should have all the props filled', () => {
-      const wrapper = shallowMount(InputUpload, {
-        global: {
-          plugins: [i18n]
-        },
-        props: {
-          text: 'my text',
-          textPictureType: 'my textPictureType',
-          textSecondPart: 'my textSecondPart',
-          accept: 'accept'
-        }
-      })
-      expect(wrapper.html()).contains('accept="accept"')
-      expect(wrapper.html()).contains('my text')
-      expect(wrapper.html()).contains('my textSecondPart')
-      expect(wrapper.html()).contains('my textPictureType')
-    })
-  })
-  describe('When the input is dragover', () => {
-    test('should set the component dragging state', async () => {
-      const wrapper = shallowMount(InputUpload, {
-        global: {
-          plugins: [i18n]
-        }
-      })
-      await wrapper.find('label').trigger('dragover')
-      expect(wrapper.vm.isDragging).toBe(true)
-      expect(wrapper.html()).contains('class="file-upload dragging"')
-    })
-  })
-  describe('When the input is dragleave', () => {
-    test('should set the component dragging state', async () => {
-      const wrapper = shallowMount(InputUpload, {
-        global: {
-          plugins: [i18n]
-        }
-      })
-      await wrapper.find('label').trigger('dragover')
-      await wrapper.find('label').trigger('dragleave')
-
-      expect(wrapper.vm.isDragging).toBe(false)
-      expect(wrapper.html()).contains('class="file-upload"')
-    })
-  })
-  describe('When the input is dropped', () => {
-    test('should emit with value', async () => {
-      const wrapper = shallowMount(InputUpload, {
-        global: {
-          plugins: [i18n]
-        }
-      })
-      const dataTransfer = {
-        files: [{ type: 'image/jpeg' }]
-      }
-      const label = await wrapper.find('label')
-      await label.trigger('drop', { dataTransfer })
-
-      expect(wrapper.emitted()).toHaveProperty('trigger')
-      expect(wrapper.emitted().trigger[0][0]).toEqual(dataTransfer.files)
-    })
-  })
-  // TODO TEST -> When the input is changed should emit with value
-})

src/tests/unit/components/Link.spec.js

@@ -17,7 +17,7 @@ const i18n = createI18n({
 })
 const router = createRouter({
   history: createWebHistory(),
-  routes: [{ path: '/', component: { template: '<div></div>' } }]
+  routes: []
 })
 const stubs = {
   'router-link': {

src/tests/unit/components/Modal.spec.js

@@ -1,51 +0,0 @@
-import { it, describe, expect } from 'vitest'
-import { shallowMount } from '@vue/test-utils'
-import Modal from '../../../components/Modal.vue'
-import { createI18n } from 'vue-i18n'
-import fr from '../../../locales/fr.json'
-
-const i18n = createI18n({
-  locale: 'fr',
-  fallbackLocale: 'fr',
-  globalInjection: true,
-  legacy: false,
-  messages: {
-    fr
-  }
-})
-
-describe('Template', () => {
-  describe('Props', () => {
-    it('should render the default props', async () => {
-      document.body.innerHTML = '<div id="bs-modal"></div>'
-      const wrapper = shallowMount(Modal, {
-        global: {
-          plugins: [i18n],
-          mocks: {
-            $t: (msg) => msg
-          }
-        }
-      })
-      expect(wrapper.vm.uploadErrors).toEqual([])
-    })
-    it('should render the props filled', async () => {
-      document.body.innerHTML = '<div id="bs-modal"></div>'
-      const uploadErrors = [{ message: 'my message', name: 'my name' }]
-      const wrapper = shallowMount(Modal, {
-        global: {
-          plugins: [i18n],
-          mocks: {
-            $t: (msg) => msg
-          }
-        },
-        props: {
-          uploadErrors
-        }
-      })
-
-      expect(wrapper.vm.uploadErrors).toEqual(uploadErrors)
-      expect(wrapper.html()).contains('my name - ')
-      expect(wrapper.html()).contains('my message')
-    })
-  })
-})

src/tests/unit/components/header/HeaderOpen.spec.js

@@ -7,7 +7,7 @@ vi.mock('vue-router')
 
 const router = createRouter({
   history: createWebHistory(),
-  routes: [{ path: '/', component: { template: '<div></div>' } }]
+  routes: []
 })
 describe('Template', () => {
   describe('Props', () => {

src/tests/unit/components/share-pictures/Card.spec.js

@@ -1,36 +0,0 @@
-import { test, describe, expect } from 'vitest'
-import { shallowMount } from '@vue/test-utils'
-import Card from '../../../../components/share-pictures/Card.vue'
-import i18n from '../../config'
-describe('Template', () => {
-  describe('Props', () => {
-    test('should have default props', () => {
-      const wrapper = shallowMount(Card, {
-        global: {
-          plugins: [i18n]
-        }
-      })
-      expect(wrapper.vm.title).toBe(null)
-      expect(wrapper.vm.description).toBe(null)
-      expect(wrapper.vm.imgSrc).toBe(null)
-      expect(wrapper.vm.imgAlt).toBe(null)
-    })
-    test('should have all the props filled', () => {
-      const wrapper = shallowMount(Card, {
-        global: {
-          plugins: [i18n]
-        },
-        props: {
-          title: 'my title',
-          description: 'my description',
-          imgSrc: 'my-imgSrc.jpg',
-          imgAlt: 'my imgAlt'
-        }
-      })
-      expect(wrapper.html()).contains('my title</h2>')
-      expect(wrapper.html()).contains('my description</p>')
-      expect(wrapper.html()).contains('/my-imgSrc.jpg')
-      expect(wrapper.html()).contains('alt="my imgAlt"')
-    })
-  })
-})

src/tests/unit/utils.spec.js

@@ -1,4 +1,4 @@
-import { it, describe, expect, vi, beforeEach } from 'vitest'
+import { it, describe, expect } from 'vitest'
 import {
   imageStatus,
   photoToDeleteOrPatchSelected,
@@ -6,26 +6,10 @@ import {
   formatPaginationItems
 } from '../../views/utils/sequence/index'
 import { sortByName } from '../../views/utils/upload/index'
-import {
-  getAuthRoute,
-  decodingFlaskCookie,
-  hasASessionCookieDecoded
-} from '../../utils/auth'
+import { getAuthRoute } from '../../utils/auth'
 import { img } from '../../utils/image'
 import { title } from '../../utils/index'
-import { useCookies } from 'vue3-cookies'
-vi.mock('vue3-cookies', () => {
-  const mockCookies = {
-    get: vi.fn(),
-    remove: vi.fn(),
-    keys: vi.fn()
-  }
-  return {
-    useCookies: () => ({
-      cookies: mockCookies
-    })
-  }
-})
+
 describe('imageStatus', () => {
   it('should render the "status" value', () => {
     const sequenceStatus = 'hidden'
@@ -142,42 +126,6 @@ describe('getAuthRoute', () => {
   })
 })
 
-describe('decodingFlaskCookie', () => {
-  it('should return a decoded cookie', () => {
-    const cookie =
-      '.eJw9y0EKgzAQQNG7zLoDJpmYxMuUySRDra0pooUi3r3SRZcf_tuBRdo2rzDsMBYYgFxRytljkeyQrK0YVT16m6OhUlIihgvM_Kznfa88n9V4W2_XnzcuiqgmDBQMUtYec00WO3XqAndd7OUvXkt7j6Uup5vqRx6NJziOL8SPLNU.ZVy19Q.4DkVxu-LSF11uREkn6YIwHbn_0U'
-    expect(decodingFlaskCookie(cookie)).toEqual(
-      JSON.stringify({
-        account: {
-          id: '43df4bb5-dcb3-422e-8ff5-52b814dd994a',
-          name: 'jean',
-          oauth_id: '138ccff9-7471-4bf6-be92-0f3f37a0086c',
-          oauth_provider: 'keycloak'
-        }
-      })
-    )
-  })
-})
-describe('hasASessionCookieDecoded', () => {
-  it('should return a cookie parsed', () => {
-    vi.spyOn(useCookies().cookies, 'get').mockReturnValue(
-      '.eJw9y0EKgzAQQNG7zLoDJpmYxMuUySRDra0pooUi3r3SRZcf_tuBRdo2rzDsMBYYgFxRytljkeyQrK0YVT16m6OhUlIihgvM_Kznfa88n9V4W2_XnzcuiqgmDBQMUtYec00WO3XqAndd7OUvXkt7j6Uup5vqRx6NJziOL8SPLNU.ZVy19Q.4DkVxu-LSF11uREkn6YIwHbn_0U'
-    )
-    expect(hasASessionCookieDecoded()).toEqual({
-      account: {
-        id: '43df4bb5-dcb3-422e-8ff5-52b814dd994a',
-        name: 'jean',
-        oauth_id: '138ccff9-7471-4bf6-be92-0f3f37a0086c',
-        oauth_provider: 'keycloak'
-      }
-    })
-  })
-  it('should return null', () => {
-    vi.spyOn(useCookies().cookies, 'get').mockReturnValue(null)
-    expect(hasASessionCookieDecoded()).toBe(null)
-  })
-})
-
 describe('img', () => {
   it('should render the formated img path', () => {
     const name = 'my-img'

src/tests/unit/views/SharePicturesView.spec.js

@@ -6,7 +6,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 
 const router = createRouter({
   history: createWebHistory(),
-  routes: [{ path: '/', component: { template: '<div></div>' } }]
+  routes: []
 })
 describe('Template', () => {
   it('should render the view with the button link', async () => {

src/tests/unit/views/UploadPicturesView.spec.js

@@ -7,7 +7,6 @@ import * as createAPictureToASequence from '@/views/utils/upload/request'
 import * as createASequence from '@/views/utils/upload/request'
 import { formatDate } from '../../../utils/dates'
 import * as sortByName from '../../../views/utils/upload/index'
-
 describe('Template', () => {
   it('should render the view with the input upload and the good wordings', () => {
     const wrapper = shallowMount(UploadPicturesView, {

src/utils/auth.ts

@@ -1,7 +1,3 @@
-import pako from 'pako'
-import { useCookies } from 'vue3-cookies'
-const { cookies } = useCookies()
-
 function getAuthRoute(authRoute: string, nextRoute: string): string {
   const next = `${location.protocol}//${location.host}${nextRoute}`
   return `${
@@ -9,25 +5,4 @@ function getAuthRoute(authRoute: string, nextRoute: string): string {
   }api/${authRoute}?next_url=${encodeURIComponent(`${next}`)}`
 }
 
-// This function to decode the flask cookie and have the user information like username
-function decodingFlaskCookie(cookie: string): string {
-  const cookieFormatted = cookie
-    .split('.')[1]
-    .replace(/_/g, '/')
-    .replace(/-/g, '+')
-  const binaryString = atob(cookieFormatted)
-  const bytes = new Uint8Array(binaryString.length)
-  for (let i = 0; i < binaryString.length; i++) {
-    bytes[i] = binaryString.charCodeAt(i)
-  }
-  return pako.inflate(bytes.buffer, { to: 'string' })
-}
-
-function hasASessionCookieDecoded(): { account: { name: string } } | null {
-  if (cookies.get('session')) {
-    return JSON.parse(decodingFlaskCookie(cookies.get('session')))
-  }
-  return null
-}
-
-export { getAuthRoute, hasASessionCookieDecoded, decodingFlaskCookie }
+export { getAuthRoute }

src/views/HomeView.vue

@@ -9,8 +9,8 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import Viewer from '@/components/Viewer.vue'
-
-const viewerRef = ref<unknown>(null)
+const emit = defineEmits<{ (e: 'trigger', value: string): void }>()
+const viewerRef = ref<any>(null)
 </script>
 <style scoped lang="scss">
 .entry-page {
@@ -29,11 +29,11 @@ const viewerRef = ref<unknown>(null)
 }
 @media (max-width: toRem(76.8)) {
   .entry-page {
-    padding-top: toRem(11.5);
+    padding-top: toRem(11);
     overflow: hidden;
   }
   .entry-section {
-    height: calc(100dvh - #{toRem(18)});
+    height: calc(100vh - #{toRem(11)});
   }
 }
 </style>

src/views/MySequenceView.vue

@@ -227,6 +227,7 @@ import type {
   ResponseUserSequenceInterface
 } from './interfaces/MySequenceView'
 const { cookies } = useCookies()
+
 const { t } = useI18n()
 const route = useRoute()
 const router = useRouter()

src/views/MySequencesView.vue

@@ -1,35 +1,21 @@
 <template>
   <main class="entry-page">
-    <section :style="{ width: `${mapWidth}px` }" class="section-viewer">
-      <vue-draggable-resizable
-        :style="{ width: `${mapWidth}px` }"
-        :w="mapWidth"
-        :h="windowHeight"
-        :max-width="windowWidth"
-        :handles="['mr']"
-        :draggable="false"
-        class-name-active="resize-active-map"
-        class-name-handle="resize-handle-map"
-        @resizing="onResizeMap"
-      >
-        <Viewer
-          v-if="collectionBbox.length"
-          :fetch-options="{
-            fetchOptions: {
-              credentials: 'include'
-            }
-          }"
-          :geovisio-viewer="false"
-          :user-id="getUserId"
-          :bbox="collectionBbox"
-          ref="viewerRef"
-        />
-      </vue-draggable-resizable>
+    <section class="section-viewer">
+      <Viewer
+        :fetch-options="{
+          fetchOptions: {
+            credentials: 'include'
+          }
+        }"
+        :sequence-id="seqId"
+        :geovisio-viewer="false"
+        ref="viewerRef"
+      />
     </section>
-    <section :style="{ width: `${listWidth}px` }" class="section-sequence">
+    <section class="section-sequence">
       <h1 class="sequences-title">{{ $t('pages.sequences.title') }}</h1>
       <ul v-if="!isLoading" class="sequence-list">
-        <li class="sequence-item sequence-item-head">
+        <li class="sequence-item">
           <div class="sequence-header-item"></div>
           <div class="sequence-header-item">
             <Button
@@ -81,33 +67,32 @@
           v-if="userSequences.length"
           v-for="(item, i) in userSequences"
           :id="`el-list${i}`"
-          :class="[
-            'sequence-item',
-            item.id === seqId ? 'button-item-hover' : ''
-          ]"
+          class="sequence-item"
           @mouseover="goToSequence(item)"
         >
           <router-link
-            class="button-item"
+            :class="[
+              'button-item',
+              item.id === seqId ? 'button-item-hover' : ''
+            ]"
             :to="{
               name: 'sequence',
               params: { id: item.id }
             }"
-            @mouseover.stop
           >
             <div class="wrapper-thumb">
               <img
                 v-if="item['stats:items'].count > 0"
-                loading="lazy"
                 :src="`${item.href}/thumb.jpg`"
+                loading="lazy"
                 alt=""
                 class="thumb"
               />
               <div class="wrapper-thumb-hover">
                 <img
                   v-if="item['stats:items'].count > 0"
-                  loading="lazy"
                   :src="`${item.href}/thumb.jpg`"
+                  loading="lazy"
                   alt=""
                   class="thumb-hover"
                 />
@@ -145,25 +130,6 @@
               }}</span>
             </div>
           </router-link>
-          <div class="wrapper-button">
-            <Button
-              :tooltip="$t('pages.sequence.hide_sequence_tooltip')"
-              look="button--white background-white"
-              :icon="
-                item['geovisio:status'] === 'ready'
-                  ? 'bi bi-eye-slash'
-                  : 'bi bi-eye'
-              "
-              class="disable-button"
-              @trigger="patchCollection(item)"
-            />
-            <Button
-              :tooltip="$t('pages.sequence.delete_sequence_tooltip')"
-              look="button--red background-white"
-              icon="bi bi-trash"
-              @trigger="deleteCollection(item)"
-            />
-          </div>
         </li>
         <div v-else class="no-sequence">
           <p class="no-sequence-text">
@@ -179,8 +145,8 @@
       <div v-else class="loader">
         <Loader look="sm" :is-loaded="false" />
       </div>
-      <Toast :text="toastText" :look="toastLook" @trigger="toastText = ''" />
     </section>
+    <Toast :text="toastText" :look="toastLook" @trigger="toastText = ''" />
   </main>
 </template>
 
@@ -190,7 +156,6 @@ import { useI18n } from 'vue-i18n'
 import { useSequenceStore } from '@/store/sequence'
 import { storeToRefs } from 'pinia'
 import { scrollIntoSelected } from '@/views/utils/sequence/index'
-import { useCookies } from 'vue3-cookies'
 import axios from 'axios'
 import Viewer from '@/components/Viewer.vue'
 import Button from '@/components/Button.vue'
@@ -202,53 +167,17 @@ import type {
   ExtentSequenceLinkInterface
 } from './interfaces/MySequencesView'
 import { formatDate } from '@/utils/dates'
-import {
-  deleteACollection,
-  patchACollection
-} from '@/views/utils/sequence/request'
 const { t } = useI18n()
-const { cookies } = useCookies()
 const sequenceStore = useSequenceStore()
 const { toastText, toastLook } = storeToRefs(sequenceStore)
+
 let userSequences = ref<SequenceLinkInterface[]>([])
 let collectionBbox = ref<number[]>([])
 let isSorted = ref<boolean>(false)
 let isLoading = ref<boolean>(false)
 let seqId = ref<string>('')
-let width = ref<number>(0)
-let mapWidth = ref<number>(window.innerWidth / 3)
-let listWidth = ref<number>(window.innerWidth / 1.5)
-const windowWidth = ref<number>(window.innerWidth)
-const windowHeight = ref<number>(window.innerHeight - 80)
 const viewerRef = ref<any>(null)
 
-async function fetchAndFormatSequence(): Promise<void> {
-  const { data } = await axios.get('api/users/me/collection')
-  collectionBbox.value = data.extent.spatial.bbox[0]
-  userSequences.value = getRelChild(data.links)
-}
-
-async function patchCollection(sequence: SequenceLinkInterface): Promise<void> {
-  isLoading.value = true
-  let visible
-  if (sequence['geovisio:status'] === 'ready') visible = 'false'
-  else visible = 'true'
-  await patchACollection(sequence.id, visible)
-  await fetchAndFormatSequence()
-  viewerRef.value.viewer.reloadVectorTiles()
-  isLoading.value = false
-}
-async function deleteCollection(
-  sequence: SequenceLinkInterface
-): Promise<void> {
-  isLoading.value = true
-  if (confirm(t('pages.sequence.confirm_sequence_dialog'))) {
-    await deleteACollection(sequence.id)
-    await fetchAndFormatSequence()
-    viewerRef.value.viewer.reloadVectorTiles()
-  }
-  isLoading.value = false
-}
 function sequenceStatus(status: string): string {
   if (status === 'ready') return t('pages.sequences.sequence_published')
   if (status === 'hidden') return t('pages.sequences.sequence_hidden')
@@ -268,13 +197,6 @@ function sortAlpha<TKey extends keyof SequenceLinkInterface>(key: TKey): void {
   isSorted.value = !isSorted.value
   userSequences.value = sorted
 }
-function onResizeMap(width: any) {
-  if (width) {
-    width.value = width
-    mapWidth.value = width.value.width
-    listWidth.value = window.innerWidth - width.value.width
-  }
-}
 function sortNum(type: string, dateToSort?: string): void {
   let aa, bb: number
   const sorted = userSequences.value.sort(
@@ -304,13 +226,23 @@ function goToSequence(sequence: SequenceLinkInterface) {
 function getRelChild(sequences: SequenceLinkInterface[]) {
   return sequences.filter((el: SequenceLinkInterface) => el.rel === 'child')
 }
-const getUserId = computed<string>(() => cookies.get('user_id'))
+
 onMounted(async () => {
   isLoading.value = true
   try {
-    const { data } = await axios.get('api/users/me/collection')
-    collectionBbox.value = data.extent.spatial.bbox[0]
-    userSequences.value = getRelChild(data.links)
+    const { data } = await axios.get('api/users/me/catalog')
+    const collectionData = await axios.get('api/users/me/collection')
+    collectionBbox.value = collectionData.data.extent.spatial.bbox[0]
+    viewerRef.value.viewer.fitBounds(collectionBbox.value)
+    const sequences = getRelChild(data.links)
+    const sequencesCollection = getRelChild(collectionData.data.links)
+    sequencesCollection.map((el: SequenceLinkInterface) => {
+      let index = sequences.findIndex(
+        (elem: SequenceLinkInterface) => elem.id === el.id
+      )
+      sequences[index] = el
+    })
+    userSequences.value = sequencesCollection
     isLoading.value = false
   } catch (err) {
     isLoading.value = false
@@ -324,47 +256,26 @@ watchEffect(() => {
       (e: { detail: { seqId: string } }) => {
         seqId.value = e.detail.seqId
         scrollIntoSelected(e.detail.seqId, userSequences.value)
-        viewerRef.value.viewer.select(e.detail.seqId)
       }
     )
   }
 })
 </script>
-<style lang="scss">
-.resize-handle-map-mr {
-  top: 0;
-  right: toRem(0);
-  cursor: e-resize;
-  background-color: var(--black);
-  display: block !important;
-}
-.resize-handle-map {
-  z-index: 999999;
-  box-sizing: border-box;
-  position: absolute;
-  height: 100%;
-  width: toRem(0.5);
-  &:hover {
-    cursor: col-resize;
-  }
-}
-</style>
+
 <style lang="scss" scoped>
 .entry-page {
   display: flex;
   height: calc(100vh - #{toRem(8)});
   overflow: hidden;
-  position: relative;
 }
 .section-viewer {
+  width: 40%;
   height: 100%;
-  position: relative;
 }
 .section-sequence {
   overflow-y: auto;
-  overflow-x: hidden;
+  width: 60%;
   height: 100%;
-  position: relative;
 }
 .sequences-title {
   @include text(h1);
@@ -379,14 +290,11 @@ watchEffect(() => {
 }
 .sequence-item {
   @include text(s-regular);
-  position: relative;
   border: none;
   display: flex;
   justify-content: center;
-  align-items: center;
   margin: auto;
   background-color: var(--blue-pale);
-  padding: toRem(2);
   &:first-child {
     margin-bottom: toRem(1);
     padding: toRem(1) toRem(2);
@@ -398,32 +306,6 @@ watchEffect(() => {
     background-color: var(--white);
   }
 }
-.wrapper-button {
-  position: absolute;
-  right: toRem(2);
-  bottom: toRem(2);
-  display: flex;
-  align-items: center;
-  .button--white:first-child {
-    margin-right: toRem(1);
-  }
-}
-.button-item-hover {
-  background-color: var(--blue);
-  &:nth-child(2n) {
-    background-color: var(--blue);
-  }
-  .button-item {
-    & > *,
-    & > :nth-child(2) {
-      color: var(--white);
-    }
-  }
-}
-.sequence-item-head:hover {
-  background-color: initial;
-  color: initial;
-}
 .wrapper-title {
   display: flex;
   align-items: center;
@@ -468,6 +350,7 @@ watchEffect(() => {
   display: flex;
   align-items: center;
   width: 100%;
+  padding: toRem(2);
   background-color: transparent;
   border: none;
   text-decoration: none;
@@ -491,6 +374,19 @@ watchEffect(() => {
   & > :nth-child(2) {
     color: var(--blue-dark);
   }
+  &:hover {
+    background-color: var(--blue);
+    & > * {
+      color: var(--white);
+    }
+  }
+}
+.button-item-hover {
+  background-color: var(--blue);
+  & > *,
+  & > :nth-child(2) {
+    color: var(--white);
+  }
 }
 .bi-images {
   margin-right: toRem(0.5);
@@ -527,6 +423,7 @@ watchEffect(() => {
   justify-content: center;
   align-items: center;
   height: 100%;
+  margin-top: toRem(20);
 }
 .ay11-link {
   padding: toRem(2);
@@ -552,16 +449,18 @@ watchEffect(() => {
     display: none;
   }
   .section-sequence {
-    width: 100% !important;
+    width: 100%;
   }
+  .button-item,
   .sequence-item:first-child {
-    display: none;
+    padding-right: toRem(1);
+    padding-left: toRem(1);
   }
+}
+@media (max-width: toRem(50)) {
   .button-item {
     flex-direction: column;
     align-items: center;
-    padding-right: toRem(1);
-    padding-left: toRem(1);
     & > * {
       text-align: center;
       width: 100%;
@@ -570,17 +469,12 @@ watchEffect(() => {
       margin-right: 0;
     }
   }
+  .sequence-item:first-child {
+    display: none;
+  }
   .sequence-item {
     border-top-right-radius: toRem(1);
     border-top-left-radius: toRem(1);
-    flex-direction: column;
-  }
-  .wrapper-button {
-    position: relative;
-    right: 0;
-    bottom: 0;
-    justify-content: center;
-    margin-top: toRem(1);
   }
 }
 </style>

src/views/UploadPicturesView.vue

@@ -35,14 +35,6 @@
           :text="authConf.license.id"
           class="entry-license"
         />
-        <h2 class="subtitle">{{ $t('pages.upload.title_sequence') }}</h2>
-        <p class="import-text">
-          {{ $t('pages.upload.description_title_sequence') }}
-        </p>
-        <EditText
-          :default-text="newSequenceTitle || sequenceTitle"
-          @triggerNewText="setNewSequenceTitle"
-        />
         <form>
           <div class="wrapper-form">
             <InputUpload
@@ -93,13 +85,11 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, watch, onUnmounted, onMounted } from 'vue'
+import { ref, computed, watch, onUnmounted } from 'vue'
 import { onBeforeRouteLeave } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import InputUpload from '@/components/InputUpload.vue'
 import Button from '@/components/Button.vue'
-import Link from '@/components/Link.vue'
-import EditText from '@/components/EditText.vue'
 import Modal from '@/components/Modal.vue'
 import InformationCard from '@/components/InformationCard.vue'
 import UploadLoader from '@/components/upload/UploadLoader.vue'
@@ -112,6 +102,7 @@ import {
 } from '@/views/utils/upload/request'
 import { sortByName } from '@/views/utils/upload/index'
 import authConfig from '../composables/auth'
+import Link from '@/components/Link.vue'
 
 const { authConf } = authConfig()
 const { t } = useI18n()
@@ -124,8 +115,6 @@ let uploadedSequence = ref<SequenceInterface | null>(null)
 let picturesUploadingSize = ref<number>(0)
 let picturesToUploadSize = ref<number>(0)
 let loadPercentage = ref<string>('0%')
-let sequenceTitle = ref<string>(formatSequenceTitle())
-let newSequenceTitle = ref<string | null>(null)
 let modal = ref()
 
 watch(isLoading, () => {
@@ -139,11 +128,6 @@ watch(isLoading, () => {
     window.onbeforeunload = null
   }
 })
-onMounted(() => {
-  setInterval(() => {
-    sequenceTitle.value = formatSequenceTitle()
-  }, 1000)
-})
 onUnmounted(() => {
   window.onbeforeunload = null
 })
@@ -161,15 +145,7 @@ const inputIsDisplayed = computed<boolean | null>(
     isLoaded.value ||
     (uploadedSequence.value && !uploadedSequence.value.pictures)
 )
-function setNewSequenceTitle(value: string | null): void {
-  newSequenceTitle.value = value
-}
-function formatSequenceTitle(): string {
-  return `${t('pages.upload.sequence_title')}${formatDate(
-    new Date(),
-    'Do MMMM YYYY, hh:mm:ss'
-  )}`
-}
+
 function picturesToUploadSizeText(): void {
   let fullSize = 0
   for (let i = 0; i < pictures.value.length; i++) {
@@ -207,12 +183,14 @@ async function uploadPicture(): Promise<void> {
   picturesToUploadSizeText()
   uploadedSequence.value = null
   const picturesToUpload = [...pictures.value]
-  const title = newSequenceTitle.value
-    ? newSequenceTitle.value
-    : sequenceTitle.value
-  const { data } = await createASequence(title)
+
+  const sequenceTitle = `${t('pages.upload.sequence_title')}${formatDate(
+    new Date(),
+    'Do MMMM YYYY, hh:mm:ss'
+  )}`
+  const { data } = await createASequence(sequenceTitle)
   uploadedSequence.value = {
-    title: title,
+    title: sequenceTitle,
     id: data.id,
     pictures: [],
     picturesOnError: [],
@@ -250,8 +228,6 @@ async function uploadPicture(): Promise<void> {
   isLoaded.value = true
   pictures.value = []
   picturesCount.value = 0
-  newSequenceTitle.value = null
-  sequenceTitle.value = formatSequenceTitle()
 }
 </script>
 
@@ -271,9 +247,6 @@ h3 {
   padding: toRem(2) toRem(5) toRem(5);
   color: var(--grey-dark);
 }
-.logged {
-  min-height: calc(100vh - #{toRem(8)});
-}
 .section {
   width: 100%;
 }

src/views/interfaces/common/index.ts

@@ -1,21 +1,20 @@
-export interface MapInterface {
-  startWide?: boolean
-  maxZoom?: number
-  minZoom?: number
-  style?: object | string
-  zoom?: number
-  center?: number[]
-  bounds?: number[]
-}
-
-export interface ViewerInterface {
+export interface OptionalViewerInterface {
   fetchOptions?: {
     credentials: string
   }
-  hash?: boolean
   picId?: string
   widgets?: {
     customWidget: HTMLAnchorElement
   }
-  map: MapInterface
+}
+
+export interface ViewerInterface extends OptionalViewerInterface {
+  map: {
+    startWide: boolean
+    style?: object | string
+    maxZoom?: number
+    zoom?: number
+    center?: number[]
+  }
+  bounds?: number[]
 }

src/views/utils/upload/request.ts

@@ -1,25 +1,6 @@
 import axios from 'axios'
 
-interface SequenceCreatedInterface {
-  data: {
-    created: string
-    description: string
-    extent: { spatial: object; temporal: object }
-    ['geovisio:status']: string
-    id: string
-    keywords: string[]
-    license: string
-    links: object[]
-    providers: object[]
-    stac_extensions: string[]
-    stac_version: string
-    ['stats:items']: { count: number }
-    title: string
-    type: string
-  }
-}
-
-function createASequence(title: string): Promise<SequenceCreatedInterface> {
+function createASequence(title: string): Promise<any> {
   return axios.post('api/collections', { title: title })
 }
 

vue-draggable-resizable-vue3.d.ts

@@ -1 +0,0 @@
-declare module 'vue-draggable-resizable-vue3'