remove index.css

Update geovisio to 2.5

See merge request geovisio/website!128

.gitignore

@@ -90,6 +90,7 @@ sw.*
 *.swp
 
 # Cypress generated screen and videos files
+cypress/downloads/*
 cypress/screenshot/
 cypress/videos/
 *.cy.ts.mp4

.gitlab-ci.yml

@@ -8,9 +8,10 @@ variables:
   DOCKER_BUILDKIT: 1 # use buildkit for better performance
   DOCKER_DRIVER: overlay2 # better docker driver to avoid copying too many files on each run
   GITLAB_REGISTRY: registry.gitlab.com # We use docker.io for official images and gitlab's registry to store temporary images
-  IMAGE_NAME: geovisio/api
+  IMAGE_NAME: geovisio/website
   CI_IMAGE_CACHE: $GITLAB_REGISTRY/$IMAGE_NAME:build_cache
-  DOCKER_TLS_CERTDIR: ""
+  DOCKER_TLS_CERTDIR: ''
+  DOCKER_HOST: tcp://docker:2375
 
 before_script:
   ## chmod is unfortunately currently mandatory : https://github.com/nodejs/docker-node/issues/661
@@ -22,28 +23,29 @@ cache:
 
 install:
   stage: Install
-  image: node:18.16.0
+  image: node:18.16.1
   script:
     - yarn install
     - ls node_modules/.bin/cypress
 
 test:unit:
   stage: Test
-  image: node:18.16.0
+  image: node:18.16.1
   script:
     - yarn test:unit
   coverage: /All files[^|]*\|[^|]*\s+([\d\.]+)/
 
 test:e2e:
   stage: Test
-  image: cypress/browsers:node-18.16.0-chrome-113.0.5672.92-1-ff-113.0-edge-113.0.1774.35-1
+  image: node:18.16.1-alpine
+  services:
+    - docker:dind
   script:
-    - yarn install
-    - ./node_modules/.bin/cypress install
-    - echo "VITE_API_URL=https://geovisio-proxy-dev.osc-fr1.scalingo.io/" > .env
-    - echo "VITE_ENV=dev" >> .env
-    - PORT=5173 yarn start &
-    - yarn test:e2e
+    - apk add --update --no-cache docker-cli docker-cli-compose git
+    - PROJECT_DIR=$PWD docker compose -f cypress/docker-compose-geovisio.yml -f cypress/docker-compose-gitlab-override.yml run --rm e2e
+  after_script:
+    - PROJECT_DIR=$PWD docker compose -f cypress/docker-compose-geovisio.yml -f cypress/docker-compose-gitlab-override.yml logs web || true
+    - PROJECT_DIR=$PWD docker compose -f cypress/docker-compose-geovisio.yml -f cypress/docker-compose-gitlab-override.yml down || true
   coverage: /All files[^|]*\|[^|]*\s+([\d\.]+)/
   artifacts:
     when: always
@@ -54,7 +56,7 @@ test:e2e:
 
 deploy:
   stage: Deploy
-  image: node:18.16.0
+  image: node:18.16.1
   cache:
     paths:
       - node_modules
@@ -74,7 +76,7 @@ deploy:develop:
   stage: Deploy
   image: docker:latest
   services:
-      - docker:dind
+    - docker:dind
   before_script:
     # login to the gitlab docker registry to use the cache and to publish
     - echo $CI_DEPLOY_PASSWORD | docker login -u $CI_DEPLOY_USER --password-stdin $GITLAB_REGISTRY
@@ -106,7 +108,7 @@ deploy:latest:
   stage: Deploy
   image: docker:latest
   services:
-      - docker:dind
+    - docker:dind
   before_script:
     # login to the gitlab docker registry to use the cache and to publish
     - echo $CI_DEPLOY_PASSWORD | docker login -u $CI_DEPLOY_USER --password-stdin $GITLAB_REGISTRY

CHANGELOG.md

@@ -7,6 +7,72 @@ 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.5.0] - 2024-03-11
+
+### Changed
+
+- GeoVisio web viewer updated to [2.5.0](https://gitlab.com/geovisio/web-viewer/-/compare/2.4.0...2.5.0) to reduce tiles size.
+
+## [2.4.1] - 2024-02-01
+
+### Fixed
+
+- Fix geovisio version yarn.lock
+
+## [2.4.0] - 2024-01-31
+
+### Added
+
+- Possibility to edit a sequence title in the sequence page
+
+### Changed
+
+- GeoVisio web viewer updated to [2.4.0](https://gitlab.com/geovisio/web-viewer/-/compare/2.3.1...2.4.0) to manage sequence by user
+
+### Fixed
+
+- Fix filter reset button to include bbox filter
+- Fix fullscreen button added by the widget viewer
+- Some UI and UX fixes before user tests
+
+## [2.3.1] - 2024-01-29
+
+### Added
+
+- Add the possibility to fullscreen the viewer in the homepage : https://gitlab.com/geovisio/website/-/issues/60
+- In the sequence list page add a filter by bbox in the map : https://gitlab.com/geovisio/website/-/issues/61
+- In the sequence list page add a filter by date in the list : https://gitlab.com/geovisio/website/-/issues/57
+- Add a cancel button to when a sequence is uploading to cancel the upload
+
+### Changed
+
+- GeoVisio web viewer updated to [2.3.1](https://gitlab.com/geovisio/web-viewer/-/compare/2.3.0...2.3.1)
+
+### Fixed
+
+- Some UI and UX fixes before user tests
+
+## [2.3.0] - 2023-12-06
+
+### Added
+
+- Add the possibility to an user to select a sequence in the list using the map : https://gitlab.com/geovisio/website/-/merge_requests/100
+- For a selected sequence in the list, if the sequence is not displayed in the map, fly to the sequence on the map : https://gitlab.com/geovisio/website/-/merge_requests/108
+- Add the pagination to the sequence with sort with API routes : https://gitlab.com/geovisio/website/-/merge_requests/107
+- Add Hungarian translation : https://gitlab.com/geovisio/website/-/merge_requests/105
+- Add the possibility to hide/delete a sequence in the sequence list : https://gitlab.com/geovisio/website/-/merge_requests/101
+- Add the possibility for the user to change the title of the sequence before upload the pictures : https://gitlab.com/geovisio/website/-/merge_requests/101
+- Add the possibility to resize the sequence page by dragging the blocs : https://gitlab.com/geovisio/website/-/merge_requests/101
+
+### Changed
+
+- GeoVisio web viewer updated to [2.3.0](https://gitlab.com/geovisio/web-viewer/-/compare/2.2.1...2.3.0)
+
+### Fixed
+
+- Nginx server in Docker container was not recognizing routes other than `/` on first loading.
+- Fix the cookie bug by decoding flask cookie : https://gitlab.com/geovisio/website/-/merge_requests/102
+
 ## [2.2.3] - 2023-11-03
 
 ### Added
@@ -16,6 +82,7 @@ Before _0.1.0_, website development was on rolling release, meaning there are no
 ### 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
@@ -125,9 +192,14 @@ 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
-[2.2.1]: https://gitlab.com/geovisio/website/-/compare/2.2.1...2.2.2
+[unreleased]: https://gitlab.com/geovisio/website/-/compare/2.5.0...develop
+[2.5.0]: https://gitlab.com/geovisio/website/-/compare/2.4.1...2.5.0
+[2.4.1]: https://gitlab.com/geovisio/website/-/compare/2.4.0...2.4.1
+[2.4.0]: https://gitlab.com/geovisio/website/-/compare/2.3.1...2.4.0
+[2.3.1]: https://gitlab.com/geovisio/website/-/compare/2.3.0...2.3.1
+[2.3.0]: https://gitlab.com/geovisio/website/-/compare/2.2.3...2.3.0
+[2.2.3]: https://gitlab.com/geovisio/website/-/compare/2.2.2...2.2.3
+[2.2.2]: 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
 [2.1.3]: https://gitlab.com/geovisio/website/-/compare/2.1.2...2.1.3

Dockerfile

@@ -2,7 +2,7 @@
 #- Build image
 #-
 
-FROM node:18.16.0-alpine AS build
+FROM node:18.16.1-alpine AS build
 
 WORKDIR /opt/geovisio
 
@@ -19,6 +19,7 @@ COPY *.json *.js *.ts *.html ./
 
 # Replace env variables by placeholder for dynamic change on container start
 ENV VITE_INSTANCE_NAME=DOCKER_VITE_INSTANCE_NAME
+ENV VITE_RASTER_TILE=DOCKER_VITE_RASTER_TILE
 ENV VITE_API_URL=DOCKER_VITE_API_URL
 ENV VITE_TILES=DOCKER_VITE_TILES
 ENV VITE_MAX_ZOOM=DOCKER_VITE_MAX_ZOOM
@@ -50,6 +51,7 @@ ENV VITE_INSTANCE_NAME="GeoVisio/Docker"
 ENV VITE_API_URL="https://panoramax.openstreetmap.fr"
 ENV VITE_TILES="https://tile-vect.openstreetmap.fr/styles/basic/style.json"
 ENV VITE_MAX_ZOOM=""
+ENV VITE_RASTER_TILE=""
 ENV VITE_ZOOM=""
 ENV VITE_CENTER=""
 

cypress.config.ts

@@ -12,6 +12,6 @@ export default defineConfig({
     setupNodeEvents(on, config) {
       // implement node event listeners here
     },
-    baseUrl: 'http://localhost:5173'
+    baseUrl: 'http://localhost:5173/'
   }
 })

cypress.env.json

@@ -0,0 +1,3 @@
+{
+  "api_url": "http://localhost:5000/"
+}

cypress/docker-compose-geovisio.yml

@@ -0,0 +1,79 @@
+services:
+  api:
+    image: geovisio/api:develop
+    command: api
+    restart: always
+    ports:
+      - 5000:5000
+    depends_on:
+      db:
+        condition: service_healthy
+      auth:
+        condition: service_healthy
+    environment:
+      DB_URL: postgres://gvs:gvspwd@db/geovisio
+      PICTURE_PROCESS_THREADS_LIMIT: 2
+      PICTURE_PROCESS_DERIVATES_STRATEGY: ON_DEMAND
+      API_FORCE_AUTH_ON_UPLOAD: 'true'
+      OAUTH_CLIENT_ID: geovisio
+      OAUTH_CLIENT_SECRET: what_a_secret
+      OAUTH_OIDC_URL: http://localhost:8183/realms/geovisio
+      OAUTH_PROVIDER: oidc
+      FLASK_SECRET_KEY: a_very_secret_key_never_to_be_used_in_production
+    healthcheck:
+      test: python -c "import requests; requests.get('http://localhost:5000/api').raise_for_status()"
+      interval: 5s
+      timeout: 5s
+      retries: 10
+    extra_hosts:
+      - 'localhost:host-gateway'
+
+    networks:
+      db: {}
+      geovisio:
+        aliases:
+          - api.localtest.me
+
+  db:
+    image: postgis/postgis:13-3.2
+    environment:
+      - POSTGRES_USER=gvs
+      - POSTGRES_PASSWORD=gvspwd
+      - POSTGRES_DB=geovisio
+    healthcheck:
+      test: pg_isready -q -d $$POSTGRES_DB -U $$POSTGRES_USER
+      interval: 5s
+      timeout: 5s
+      retries: 5
+    networks:
+      db: {}
+
+  auth:
+    command: start-dev --import-realm
+    environment:
+      GEOVISIO_BASE_URL: http://localhost:5000
+      GEOVISIO_CLIENT_SECRET: what_a_secret
+      KEYCLOAK_ADMIN: admin
+      KEYCLOAK_ADMIN_PASSWORD: password
+      KEYCLOAK_FRONTEND_URL: http://localhost:5000/api/auth/login
+      KC_HTTP_PORT: 8183
+    ports:
+      - '8183:8183'
+    healthcheck:
+      test: curl --fail http://localhost:8183/realms/geovisio
+      timeout: 5s
+      interval: 2s
+      retries: 20
+      start_period: 15s
+    image: quay.io/keycloak/keycloak:20.0.1
+    volumes:
+      - ./keycloak-realm.json:/opt/keycloak/data/import/geovisio_realm.json
+
+    networks:
+      geovisio:
+        aliases:
+          - keycloak.localtest.me
+
+networks:
+  db: {}
+  geovisio: {}

cypress/docker-compose-gitlab-override.yml

@@ -0,0 +1,55 @@
+# Docker-compose used in gitlab-ci to run a container having access to all the other containers
+services:
+  web:
+    image: node:18.16.1-alpine
+    volumes:
+      - $PROJECT_DIR:/src
+    working_dir: /src
+    command: >
+      sh -c "apk add --update --no-cache curl && yarn install && yarn start"
+    environment:
+      PORT: 5173
+      VITE_API_URL: http://api.localtest.me:5000
+      VITE_ENV: dev
+    depends_on:
+      api:
+        condition: service_healthy
+      auth:
+        condition: service_healthy
+    ports:
+      - 5173:5173
+    healthcheck:
+      test: curl --fail http://0.0.0.0:5173
+      timeout: 10s
+      interval: 3s
+      retries: 20
+      start_period: 15s
+    networks:
+      geovisio:
+        aliases:
+          - front.localtest.me
+  e2e:
+    image: cypress/included:cypress-12.17.3-node-18.16.1-chrome-114.0.5735.133-1-ff-114.0.2-edge-114.0.1823.51-1
+    volumes:
+      - $PROJECT_DIR:/src
+    working_dir: /src
+    environment:
+      - CYPRESS_baseUrl=http://front.localtest.me:5173/
+      - CYPRESS_api_url=http://api.localtest.me:5000/
+      - LANG=fr
+    command: sleep 2 && yarn add --dev cypress && ./node_modules/.bin/cypress install && yarn test:e2e
+    depends_on:
+      web:
+        condition: service_healthy
+    networks:
+      geovisio: {}
+
+  api:
+    environment:
+      OAUTH_OIDC_URL: http://keycloak.localtest.me:8183/realms/geovisio
+      FLASK_SESSION_COOKIE_DOMAIN: localtest.me
+
+  auth:
+    environment:
+      GEOVISIO_BASE_URL: http://api.localtest.me:5000
+      KEYCLOAK_FRONTEND_URL: http://api.localtest.me:5000/api/auth/login

cypress/e2e/contribute.cy.ts

@@ -0,0 +1,29 @@
+describe('In the contribute page', () => {
+  it('go to the login page', () => {
+    cy.visit('/pourquoi-contribuer')
+    cy.get('.upload-text').scrollIntoView()
+    cy.fixture('contribute').then((contributeData: contributeInterface) => {
+      cy.contains(contributeData.textButtonContribute).click()
+    })
+  })
+  it('go to the doc pages', () => {
+    cy.visit('pourquoi-contribuer')
+    cy.fixture('contribute').then((contributeData: contributeInterface) => {
+      cy.get('.upload-text').scrollIntoView()
+      cy.contains(contributeData.textButtonDocPython).click()
+      cy.contains(contributeData.textButtonCli).click()
+      cy.contains(contributeData.textButtonDocCli).click()
+      cy.contains(contributeData.textButtonTiles).click()
+      cy.contains(contributeData.textButtonDoc).click()
+    })
+  })
+})
+interface contributeInterface {
+  textButtonContribute: string
+  textButtonDocPython: string
+  textButtonCli: string
+  textButtonDocCli: string
+  textButtonTiles: string
+  textButtonDoc: string
+}
+export {}

cypress/e2e/home.cy.ts

@@ -0,0 +1,16 @@
+describe('In the home page', () => {
+  it('click on the link in the footer to go to Panoramax.fr', () => {
+    cy.visit('/')
+    cy.fixture('home').then((homeData) => {
+      cy.contains(homeData.textLinkPanoramax).click()
+    })
+  })
+  it('click on the link in the footer to go to Gitlab', () => {
+    cy.visit('/')
+    cy.fixture('home').then((homeData) => {
+      cy.contains(homeData.textLinkGitlab).click()
+    })
+  })
+})
+
+export {}

cypress/e2e/login.cy.ts

@@ -1,7 +1,24 @@
 describe('In the login page', () => {
   it('type in the form to login', () => {
-    cy.visit('https://geovisio-proxy-dev.osc-fr1.scalingo.io/api/auth/login')
-    cy.get('#password').type('coucouc')
+    cy.visit(`${Cypress.env('api_url')}api/auth/login`)
+    cy.get('#username').type('Elysee')
+    cy.get('#password').type('my password')
+    cy.contains('Sign In').click()
+    cy.visit('/')
+  })
+  it('go to the register form and create an account', () => {
+    cy.visit(`${Cypress.env('api_url')}api/auth/login`)
+    cy.fixture('login').then((loginData) => {
+      cy.contains(loginData.textLinkRegister).click()
+      cy.get('#firstName').type('Tom')
+      cy.get('#lastName').type('Tom')
+      cy.get('#email').type('test@test123.com')
+      cy.get('#username').type('Elysee12445')
+      cy.get('#password').type('my password1')
+      cy.get('#password-confirm').type('my password1')
+      cy.get('form').submit()
+      cy.visit('/')
+    })
   })
 })
 

cypress/e2e/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "types": ["reflect-metadata", "jest", "cypress"],
+    "module": "commonjs",
+    "target": "es5",
+    "sourceMap": true
+  },
+  "exclude": ["node_modules"]
+}

cypress/e2e/upload.cy.ts

@@ -0,0 +1,32 @@
+describe('In the login page', () => {
+  it('login and go to the upload page to upload images', () => {
+    cy.visit(`${Cypress.env('api_url')}api/auth/login`)
+    cy.get('#username').type('Elysee')
+    cy.get('#password').type('my password')
+    cy.fixture('upload').then((uploadData: uploadInterface) => {
+      cy.contains(uploadData.textLinkLogin).click()
+      cy.visit('/envoyer')
+      cy.get('.edit-button').click()
+      cy.get('#upload-title').clear()
+      cy.get('#upload-title').type(uploadData.textTitle)
+      cy.contains(uploadData.textButtonTitle).click()
+      cy.contains(uploadData.textButtonUpload).click()
+    })
+    cy.get('.input-file').selectFile(
+      [
+        '/src/cypress/fixtures/images/image1.jpg',
+        '/src/cypress/fixtures/images/image2.jpg',
+        '/src/cypress/fixtures/images/image3.jpg'
+      ],
+      { force: true }
+    )
+  })
+})
+interface uploadInterface {
+  textLinkLogin: string
+  textLinkUpload: string
+  textButtonUpload: string
+  textTitle: string
+  textButtonTitle: string
+}
+export {}

cypress/fixtures/contribute.json

@@ -0,0 +1,8 @@
+{
+  "textButtonContribute": "Partager des images",
+  "textButtonDocCli": "Voir la documentation",
+  "textButtonDoc": "Retrouvez sa documentation ici",
+  "textButtonDocPython": "de python (au moins la version 3.8)",
+  "textButtonCli": "L'outil en ligne de commande",
+  "textButtonTiles": "de tuiles vectorielles"
+}

cypress/fixtures/home.json

@@ -0,0 +1,5 @@
+{
+  "textLinkContribute": "Pourquoi contribuer ?",
+  "textLinkPanoramax": "Découvrir Panoramax",
+  "textLinkGitlab": "Voir le code"
+}

cypress/fixtures/login.json

@@ -0,0 +1,4 @@
+{
+  "textLinkRegister": "Register",
+  "textLinkLogin": "Sign In"
+}

cypress/fixtures/upload.json

@@ -0,0 +1,7 @@
+{
+  "textLinkLogin": "Sign In",
+  "textLinkUpload": "Mes photos",
+  "textTitle": "My title",
+  "textButtonTitle": "Valider",
+  "textButtonUpload": "Glissez vos images ici ou cliquez sur"
+}

docker/nginx.conf

@@ -18,5 +18,10 @@ http {
 
         root /usr/share/nginx/html;
         gzip_static on;
+
+        location / {
+            root /usr/share/nginx/html;
+            try_files $uri /index.html;
+        }
     }
 }

docs/03_Settings.md

@@ -14,6 +14,7 @@ Available parameters are:
 - `VITE_MAX_ZOOM`: the max zoom to use on the map (defaults to 24).
 - `VITE_ZOOM`: the zoom to use at the initialization of the map (defaults to 0).
 - `VITE_CENTER`: the center position to use at the initialization of the map (defaults to 0).
+- `VITE_RASTER_TILE`: the raster tile. Example : `https://maplibre.org/maplibre-style-spec/sources/#raster`.
 - Settings for the work environment:
   - `NPM_CONFIG_PRODUCTION`: is it production environment (`true`, `false`)
   - `YARN_PRODUCTION`: same as below, but if you use Yarn instead of NPM

index.html

@@ -4,6 +4,31 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" href="/static/favicon.ico" />
+    <title>
+      Panoramax <%- instanceName %> : photo-cartographier les territoires
+    </title>
+    <meta
+      name="description"
+      content="L'instance Panoramax <%- instanceName %> permet la publication de photo de terrain pour cartographier le territoire. Panoramax favorise la réutilisation des photos pour de nombreux cas d'usages."
+    />
+    <meta
+      name="twitter:title"
+      content="Panoramax <%- instanceName %> : photo-cartographier les territoires"
+    />
+    <meta
+      name="og:title"
+      content="Panoramax <%- instanceName %> : photo-cartographier les territoires"
+    />
+    <meta
+      name="twitter:description"
+      content="L'instance Panoramax <%- instanceName %> permet la publication de photo de terrain pour cartographier le territoire. Panoramax favorise la réutilisation des photos pour de nombreux cas d'usages."
+    />
+    <meta
+      name="og:description"
+      content="L'instance Panoramax <%- instanceName %> permet la publication de photo de terrain pour cartographier le territoire. Panoramax favorise la réutilisation des photos pour de nombreux cas d'usages."
+    />
+    <meta name="og:image" content="<%- frontUrl %>/static/meta-img.jpg" />
+    <meta name="twitter:image" content="<%- frontUrl %>/static/meta-img.jpg" />
   </head>
   <body>
     <div id="app"></div>

package.json

@@ -1,8 +1,8 @@
 {
   "name": "geovisio-website",
-  "version": "2.2.3",
+  "version": "2.5.0",
   "engines": {
-    "node": "18.16.0"
+    "node": "18.16.1"
   },
   "private": true,
   "scripts": {
@@ -25,14 +25,17 @@
     "axios": "^1.2.3",
     "bootstrap": "^5.2.3",
     "bootstrap-icons": "^1.10.3",
-    "geovisio": "2.2.1",
+    "geovisio": "2.5.0",
     "moment": "^2.29.4",
+    "pako": "^2.1.0",
     "pinia": "^2.1.4",
+    "v-calendar": "^3.1.2",
     "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",
+    "vue-matomo": "^4.2.0",
     "vue-router": "^4.1.6",
     "vue3-cookies": "^1.0.6",
     "vue3-smooth-scroll": "^0.8.1"
@@ -40,6 +43,7 @@
   "devDependencies": {
     "@pinia/testing": "^0.1.2",
     "@rushstack/eslint-patch": "^1.1.4",
+    "@types/jest": "^29.5.4",
     "@types/jsdom": "^20.0.1",
     "@types/node": "^18.11.18",
     "@typescript-eslint/eslint-plugin": "^5.46.0",
@@ -50,19 +54,23 @@
     "@vue/eslint-config-typescript": "^11.0.0",
     "@vue/test-utils": "^2.2.4",
     "@vue/tsconfig": "^0.1.3",
-    "cypress": "^12.12.0",
+    "cypress": "^13.1.0",
     "eslint": "^8.29.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-import-resolver-typescript": "^3.5.5",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-vue": "^9.8.0",
+    "jest": "^29.6.4",
     "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",
     "typescript": "~4.7.4",
     "vite": "^3.2.4",
     "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-html": "^3.2.2",
     "vitest": "^0.25.3",
     "vue-tsc": "^1.0.9"
   },

pako.d.ts

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

src/App.vue

@@ -3,33 +3,21 @@ import { ref, computed } from 'vue'
 import Header from '@/components/Header.vue'
 import Footer from '@/components/Footer.vue'
 import { RouterView } from 'vue-router'
-import { useMeta } from 'vue-meta'
 import { useI18n } from 'vue-i18n'
-import { useCookies } from 'vue3-cookies'
-import { title } from '@/utils/index'
+import { hasASessionCookieDecoded } from '@/utils/auth'
 import authConfig from './composables/auth'
 const { authConf } = authConfig()
 const { t } = useI18n()
-const { cookies } = useCookies()
 
 let focusMap = ref<string>('focus-map')
 
-useMeta({
-  title: title(t('general.title')),
-  og: {
-    title: title(t('general.meta.title')),
-    description: title(t('general.meta.description'))
-  },
-  twitter: {
-    title: title(t('general.meta.title')),
-    description: title(t('general.meta.description'))
-  }
-})
-
 function setFocusMap(value: string) {
   focusMap.value = value
 }
-const getUserId = computed<string>(() => cookies.get('user_id'))
+const isLogged = computed((): boolean => {
+  const cookie = hasASessionCookieDecoded()
+  return !!(cookie && cookie.account)
+})
 </script>
 
 <template>
@@ -51,7 +39,7 @@ const getUserId = computed<string>(() => cookies.get('user_id'))
         : ''
     "
   />
-  <RouterView @trigger="setFocusMap" :class="{ logged: getUserId }" />
-  <Footer v-if="!getUserId" />
+  <RouterView @trigger="setFocusMap" :class="{ logged: isLogged }" />
+  <Footer v-if="!isLogged" />
 </template>
 <style scoped></style>

src/components-viewer/reportLink.ts

@@ -1,3 +1,45 @@
 export function createLink(href: string, text: string): string {
-  return `<a href='mailto:signalement.ign@panoramax.fr${href}' target='_blank' title='${text}' class='gvs-btn gvs-widget-bg gvs-btn-large' style='font-size: 1.6em;display: block'><i class="bi bi-exclamation-triangle"></i></a>`
+  return `<a href='mailto:signalement.ign@panoramax.fr${href}' target='_blank' title='${text}' class='gvs-btn gvs-widget-bg gvs-btn-large' style='font-size: 1.6em;display: block; margin-top: 0.5em;'><i class="bi bi-exclamation-triangle"></i></a>`
+}
+export function createSequenceLink(href: string, title: string): string {
+  return `<a href='${href}' title='${title}' class='gvs-btn gvs-widget-bg gvs-btn-large' style='font-size: 1.6em;display: block; position: relative; margin-top: 0.5em;'>
+            <i class="bi bi-images"></i>
+          </a>`
+}
+export function createFullScreenButton(): string {
+  return `<button type='button' onClick="
+                                  const header = document.getElementById('navHeader')
+                                  const footer = document.getElementById('navFooter')
+                                  const icon = document.getElementById('iconScreen')
+                                  const home = document.getElementById('homePage')
+                                  if (header) {
+                                    const isHiddenHeader = header.classList.contains('hidden')
+                                    if (isHiddenHeader) header.classList.remove('hidden')
+                                    else header.classList.add('hidden')
+                                  }
+                                  if (footer) {
+                                    const isHiddenHeader = footer.classList.contains('hidden')
+                                    if (isHiddenHeader) footer.classList.remove('hidden')
+                                    else footer.classList.add('hidden')
+                                  }
+                                  if (icon) {
+                                    const isIconNotFull = icon.classList.contains('bi-fullscreen')
+                                    if(isIconNotFull) {
+                                      icon.classList.remove('bi-fullscreen')
+                                      icon.classList.add('bi-fullscreen-exit') 
+                                    } else {
+                                      icon.classList.remove('bi-fullscreen-exit')
+                                      icon.classList.add('bi-fullscreen')
+                                    }
+                                  }
+                                  if (home) {
+                                    const isHomeFull = home.classList.contains('full-viewer')
+                                    if(isHomeFull) home.classList.remove('full-viewer')
+                                    else home.classList.add('full-viewer')
+                                  }
+                                  "
+                                  class='gvs-btn gvs-widget-bg gvs-btn-large'
+          >
+            <i id='iconScreen' class="bi bi-fullscreen"></i>
+          </button>`
 }

src/components/Button.vue

@@ -35,7 +35,7 @@ defineProps({
   }
 }
 .default {
-  height: toRem(3.5);
+  height: toRem(3);
   min-width: toRem(3.5);
   @include text(s-regular);
   display: flex;
@@ -46,7 +46,8 @@ defineProps({
   position: relative;
   z-index: 1;
   border-radius: toRem(1);
-  padding: toRem(1.3) toRem(2) toRem(1.3);
+  padding: toRem(1.3);
+
   .icon {
     font-size: toRem(2);
   }
@@ -54,10 +55,30 @@ defineProps({
     visibility: visible;
   }
 }
+.row-reverse {
+  flex-direction: row-reverse;
+  justify-content: flex-start;
+  width: 100%;
+  padding: 0;
+  font-size: toRem(1.2);
+  .icon {
+    margin-left: toRem(0.5);
+    margin-right: 0;
+  }
+}
 .button--black {
   color: var(--white);
   background-color: var(--black);
 }
+.button-border--black {
+  font-size: toRem(1.4);
+  background-color: var(--white);
+  border: toRem(0.1) solid var(--black);
+  .icon {
+    font-size: toRem(1.4);
+    color: var(--black);
+  }
+}
 .button--blue {
   color: var(--white);
   background-color: var(--blue);
@@ -74,28 +95,37 @@ defineProps({
   color: var(--white);
 }
 .button--red {
-  color: var(--red);
-  background-color: transparent;
-  border: toRem(0.1) solid var(--red);
+  color: var(--white);
+  background-color: var(--red-pale);
+  border: toRem(0.1) solid var(--red-pale);
   .icon {
     margin-right: 0;
     font-size: toRem(1.4);
-    color: var(--red);
+    color: var(--white);
   }
   .text {
     margin-left: toRem(1);
   }
+  &.background-white {
+    color: var(--red-pale);
+    .icon {
+      color: var(--red-pale);
+    }
+    &.disabled {
+      .icon {
+        color: var(--grey-pale);
+      }
+    }
+  }
 }
 .button--white {
   color: var(--blue);
+  background-color: var(--white);
   border: toRem(0.1) solid var(--blue);
   .icon {
     font-size: toRem(1.4);
     color: var(--blue);
-    margin-right: 0;
-  }
-  .text {
-    margin-left: toRem(1);
+    margin-right: toRem(1);
   }
 }
 .no-text {
@@ -103,14 +133,35 @@ defineProps({
   width: toRem(3);
   padding: 0;
   .icon {
-    color: var(---black);
     font-size: toRem(1.8);
     margin-right: 0;
   }
 }
+.no-text-white .icon {
+  color: var(--white);
+  margin-right: 0;
+}
+.no-text-blue-dark .icon {
+  color: var(--blue-dark);
+  margin-right: 0;
+  font-size: toRem(1.4);
+}
+.no-text-green .icon {
+  color: var(--blue);
+  margin-right: 0;
+  font-size: toRem(1.6);
+}
 .background-white {
   background-color: var(--white);
 }
+.link--blue {
+  color: var(--blue);
+  text-decoration: underline;
+  .icon {
+    font-size: toRem(1.4);
+    color: var(--blue);
+  }
+}
 .link--grey {
   color: var(--grey-semi-dark);
   .icon {
@@ -118,12 +169,19 @@ defineProps({
     color: var(--grey-semi-dark);
   }
 }
-.link--red {
-  color: var(--red);
-  background-color: var(--white);
+.link--black {
+  color: var(--black);
   .icon {
     font-size: toRem(1.4);
-    color: var(--red);
+    color: var(--black);
+  }
+}
+.link--red {
+  color: var(--red-pale);
+  text-decoration: underline;
+  .icon {
+    font-size: toRem(1.4);
+    color: var(--red-pale);
   }
 }
 
@@ -138,8 +196,10 @@ defineProps({
   align-items: center;
   border-radius: 50%;
   padding: 0;
-  height: toRem(2.5);
-  width: toRem(2.5);
+  height: toRem(4);
+  width: toRem(4);
+  background-color: var(--white);
+  border: toRem(0.1) solid var(--grey-pale);
   .icon {
     color: var(---black);
     font-size: toRem(1.8);
@@ -155,8 +215,9 @@ defineProps({
   position: absolute;
   bottom: -100%;
   visibility: hidden;
-  width: toRem(18);
+  width: toRem(20);
   right: 0;
+  z-index: 9;
   @include text(xss-regular);
 }
 

src/components/EditText.vue

@@ -0,0 +1,158 @@
+<template>
+  <div :class="['entry-edit', { 'edit-mode': isEditTitle }]">
+    <span v-if="isEditTitle && formTitle" class="form-title">{{
+      formTitle
+    }}</span>
+    <div class="entry-form">
+      <form
+        v-if="isEditTitle && !isDisabled"
+        @submit.prevent="isEditTitle = false"
+        class="edit-form"
+      >
+        <div class="wrapper-input">
+          <Input
+            id="upload-title"
+            :text="text || ''"
+            :placeholder="$t('pages.upload.edit_placeholder_input')"
+            @input="changeTextValue"
+          />
+        </div>
+        <Button
+          id="valid-button"
+          :text="$t('pages.upload.ok_button')"
+          type="submit"
+          look="button--white"
+          @trigger="validNewName"
+        />
+        <div class="close-button">
+          <Button
+            id="close-button"
+            look="no-text-white"
+            icon="bi bi-x"
+            @trigger="closeEdition"
+          />
+        </div>
+      </form>
+      <span v-else class="title">{{ text }}</span>
+      <div v-if="!isEditTitle" class="edit-button">
+        <Button
+          look="no-text-blue-dark"
+          icon="bi bi-pen"
+          :tooltip="$t('pages.upload.edit_title_tooltip')"
+          :disabled="isDisabled"
+          @trigger="goToEditMode"
+        />
+      </div>
+    </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 },
+  isLoading: { type: Boolean, default: false },
+  isLoaded: { type: Boolean, default: false },
+  formTitle: { 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
+})
+
+const isDisabled = computed<boolean>(() => props.isLoading && !props.isLoaded)
+</script>
+
+<style scoped lang="scss">
+.title {
+  color: var(--blue-dark);
+  text-align: left;
+}
+.form-title {
+  text-align: left;
+  width: 100%;
+  @include text(xs-r-regular);
+  margin-bottom: toRem(0.3);
+}
+.entry-edit {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+.entry-form {
+  display: flex;
+  align-items: center;
+}
+.edit-mode {
+  background-color: var(--blue-pale);
+  padding: toRem(1);
+  border-radius: toRem(0.4);
+}
+.wrapper-edit {
+  display: flex;
+  align-items: center;
+  margin-bottom: toRem(1);
+  width: 100%;
+}
+.edit-button {
+  background-color: var(--grey);
+  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);
+  z-index: 2;
+}
+.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

@@ -1,5 +1,5 @@
 <template>
-  <footer class="footer">
+  <footer id="navFooter" class="footer">
     <ul class="link-list">
       <li class="link-item">
         <div class="link">
@@ -62,6 +62,9 @@ ul {
   padding: toRem(1.5) toRem(3);
   border-top: toRem(0.1) solid var(--grey);
 }
+.hidden {
+  display: none;
+}
 .link-list {
   display: flex;
   justify-content: center;

src/components/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <header class="header">
+  <header id="navHeader" class="header">
     <div class="responsive entry-instance">
       <InstanceName />
     </div>
@@ -107,16 +107,13 @@
 <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 } from '@/utils/auth'
+import { getAuthRoute, hasASessionCookieDecoded } 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({
@@ -128,26 +125,31 @@ let menuIsClosed = ref<boolean>(true)
 
 onClickOutside(list, () => closeModal())
 
-function closeModal() {
+function closeModal(): void {
   menuIsClosed.value = true
 }
-
 function toggleMenu(): void {
   menuIsClosed.value = !menuIsClosed.value
 }
-const isLogged = computed((): boolean => !!cookies.get('user_id'))
+const isLogged = computed((): boolean => {
+  const cookie = hasASessionCookieDecoded()
+  return !!(cookie && cookie.account)
+})
 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 =>
-  cookies!
-    .get('user_name')
-    .match(/\b(\w)/g)!
-    .join('')
-    .toUpperCase()
-)
+const userName = computed((): string => {
+  const cookie = hasASessionCookieDecoded()
+  if (cookie && cookie.account) {
+    return cookie.account.name
+      .match(/\b(\w)/g)!
+      .join('')
+      .toUpperCase()
+  }
+  return ''
+})
 </script>
 
 <style lang="scss" scoped>
@@ -158,6 +160,9 @@ const userName = computed((): string =>
   background-color: var(--white);
   border-bottom: toRem(0.1) solid var(--grey-pale);
 }
+.hidden {
+  display: none;
+}
 .nav {
   width: 100%;
   display: flex;

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,7 +141,6 @@ defineProps({
 }
 .waiting-info {
   text-align: center;
-  width: 100%;
   color: var(--black);
   width: fit-content;
 }

src/components/Input.vue

@@ -0,0 +1,34 @@
+<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 }>()
+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(0.5) toRem(1);
+  border-radius: toRem(0.5);
+  border: toRem(0.1) solid var(--blue-dark);
+  color: var(--blue-dark);
+  width: 100%;
+  @include text(s-r-regular);
+}
+</style>

src/components/InputUpload.vue

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

src/components/Link.vue

@@ -55,7 +55,7 @@ const props = defineProps({
 })
 
 const titleImg = computed<string>(() =>
-  props.disabled ? t('general.header.contribute_text') : ''
+  props.disabled ? t('general.header.about_text') : ''
 )
 function triggerButton() {
   if (props.disabled) return
@@ -117,6 +117,12 @@ function triggerButton() {
   color: var(--grey-semi-dark);
   text-decoration: underline;
   font-weight: inherit;
+  font-size: toRem(1.4);
+  .icon {
+    color: var(--grey-semi-dark);
+    font-size: toRem(1.4);
+    margin-right: toRem(0.5);
+  }
 }
 .link--blue-dark {
   color: var(--blue-dark);

src/components/Modal.vue

@@ -13,15 +13,10 @@
           <i class="bi bi-x-circle-fill"></i>
         </button>
         <div class="modal-header">
-          <h5>{{ $t('pages.upload.modal_error_title') }}</h5>
+          <h5>{{ title }}</h5>
         </div>
         <div class="modal-body">
-          <ul>
-            <li v-for="item in uploadErrors" class="error-item">
-              <span>{{ item.name }} - </span>
-              <span>{{ item.message }}</span>
-            </li>
-          </ul>
+          <slot name="body"></slot>
         </div>
       </div>
     </div>
@@ -30,15 +25,13 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import type { PropType } from 'vue'
 import { Modal } from 'bootstrap'
 let bsModal = ref()
-import type { uploadErrorInterface } from '@/views/interfaces/UploadPicturesView'
 
 defineProps({
-  uploadErrors: {
-    type: Array as PropType<uploadErrorInterface[]>,
-    default: []
+  title: {
+    type: String,
+    default: ''
   }
 })
 
@@ -62,12 +55,6 @@ ul {
 .modal {
   background: rgba(10, 31, 105, 0.6);
 }
-.error-item {
-  padding: toRem(1);
-  &:nth-child(odd) {
-    background-color: var(--grey);
-  }
-}
 .modal-content {
   border-radius: toRem(1.5);
 }

src/components/Viewer.vue

@@ -3,13 +3,21 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from 'vue'
-import type { ViewerInterface, MapInterface } from '@/views/interfaces/common'
-import { getIgnTiles } from '@/utils/mapAndViewer'
+import axios from 'axios'
+import { onMounted, onUnmounted, ref, computed } from 'vue'
+import { useSequenceStore } from '@/store/sequence'
 import { Viewer, StandaloneMap } from 'geovisio'
+import { getIgnTiles } from '@/utils/mapAndViewer'
 import { createUrlLink } from '@/utils'
-import { createLink } from '@/components-viewer/reportLink'
+import {
+  createLink,
+  createSequenceLink,
+  createFullScreenButton
+} from '@/components-viewer/reportLink'
 import { useI18n } from 'vue-i18n'
+import { hasASessionCookieDecoded } from '@/utils/auth'
+import type { ViewerInterface, MapInterface } from '@/views/interfaces/common'
+const sequenceStore = useSequenceStore()
 const { t } = useI18n()
 let mapIsLoaded = ref<boolean>(false)
 let viewer = ref()
@@ -20,113 +28,170 @@ const props = defineProps({
   bbox: { type: Array, default: null },
   userId: { type: String, default: '' }
 })
+const isLogged = computed((): boolean => {
+  const cookie = hasASessionCookieDecoded()
+  return !!(cookie && cookie.account)
+})
+const userName = computed((): string => {
+  const cookie = hasASessionCookieDecoded()
+  if (cookie && cookie.account) return cookie.account.name
+  return ''
+})
 defineExpose({
   viewer
 })
-onMounted(async () => {
-  const tiles = import.meta.env.VITE_TILES
+async function getSequenceId(imgId: string): Promise<{
+  sequenceId: string
+  username: string
+}> {
+  const { data } = await axios.get(`api/search?ids=${imgId}`)
+  return {
+    sequenceId: data.features[0].collection,
+    username: data.features[0].properties['geovisio:producer']
+  }
+}
+function createViewerButton(link: HTMLDivElement): void {
+  link.innerHTML = `<div>${createFullScreenButton()}</div>`
+  viewer.value.addEventListener(
+    'picture-loaded',
+    async (e: { detail: { picId: string } }): Promise<void> => {
+      const sequenceInformation = await getSequenceId(e.detail.picId)
+      let href: string
+      if (isLogged.value && sequenceInformation.username === userName.value) {
+        href = `${window.location.origin}/sequence/${sequenceInformation.sequenceId}?currentPic=${e.detail.picId}`
+        link.innerHTML = `<div>
+                           ${createFullScreenButton()}
+                           ${createSequenceLink(
+                             href,
+                             t('pages.home.sequence_title')
+                           )}
+                          </div>`
+        sequenceStore.addSequence(e.detail.picId)
+      } else {
+        href = t('pages.home.report_mail', {
+          picId: e.detail.picId,
+          link: createUrlLink(e.detail.picId)
+        })
+        link.innerHTML = `<div>
+                           ${createFullScreenButton()}
+                           ${createLink(
+                             href,
+                             t('pages.home.report_button_text')
+                           )}
+                          </div>`
+      }
+    }
+  )
+}
+async function setupViewerMap(tiles: string): Promise<void> {
   const maxZoom = import.meta.env.VITE_MAX_ZOOM
   const zoom = import.meta.env.VITE_ZOOM
   const center = import.meta.env.VITE_CENTER
-  let paramsViewer: ViewerInterface
-  let paramsMap: MapInterface
-
-  try {
-    if (props.geovisioViewer) {
-      paramsViewer = { map: { startWide: true } }
-      if (center && center !== '') {
-        const centerMap = center.split(',').map((el: string) => parseInt(el))
-        paramsViewer = {
-          map: {
-            ...paramsViewer.map,
-            center: centerMap
-          }
-        }
+  const raster = import.meta.env.VITE_RASTER_TILE
+  let paramsViewer: ViewerInterface = { map: { startWide: true } }
+  if (raster && raster !== '') {
+    paramsViewer = {
+      map: {
+        ...paramsViewer.map,
+        raster: JSON.parse(raster)
       }
-      if (zoom && zoom !== '') {
-        paramsViewer = {
-          map: {
-            ...paramsViewer.map,
-            zoom: parseFloat(zoom)
-          }
-        }
-      }
-      if (maxZoom && maxZoom !== '') {
-        paramsViewer = {
-          map: {
-            ...paramsViewer.map,
-            maxZoom: parseInt(maxZoom)
-          }
-        }
-      }
-      if (tiles) {
-        const style = tiles.includes('wxs.ign.fr') ? await getIgnTiles() : tiles
-        paramsViewer = {
-          map: {
-            ...paramsViewer.map,
-            style
-          }
-        }
-      }
-      if (props.fetchOptions) {
-        paramsViewer = {
-          ...paramsViewer,
-          ...props.fetchOptions
-        }
-      }
-      const reportLink = document.createElement('div')
-      reportLink.className = 'gvs-group gvs-group-large gvs-group-btnpanel'
-      viewer.value = new Viewer(
-        'viewer', // Div ID
-        `${import.meta.env.VITE_API_URL}/api/search`,
-        {
-          ...paramsViewer,
-          widgets: { customWidget: reportLink }
-        }
-      )
-      if (viewer.value && viewer.value.addEventListener) {
-        viewer.value.addEventListener(
-          'picture-loaded',
-          async (e: { detail: { picId: string } }): Promise<void> => {
-            const href = t('pages.home.report_mail', {
-              picId: e.detail.picId,
-              link: createUrlLink(e.detail.picId)
-            })
-            reportLink.innerHTML = createLink(
-              href,
-              t('pages.home.report_button_text')
-            )
-          }
-        )
-      }
-    } else {
-      paramsMap = { minZoom: 7 }
-      if (tiles) {
-        const style = tiles.includes('wxs.ign.fr') ? await getIgnTiles() : tiles
-        paramsMap = {
-          ...paramsMap,
-          style
-        }
-      }
-      viewer.value = new StandaloneMap(
-        '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
-        }
-      )
-      viewer.value.addEventListener('ready', () => {
-        viewer.value.setFilters({ user: props.userId }, true)
-      })
     }
-    mapIsLoaded.value = true
+  }
+  if (center && center !== '') {
+    const centerMap = center.split(',').map((el: string) => parseInt(el))
+    paramsViewer = {
+      map: {
+        ...paramsViewer.map,
+        center: centerMap
+      }
+    }
+  }
+  if (zoom && zoom.length) {
+    paramsViewer = {
+      map: {
+        ...paramsViewer.map,
+        zoom: parseFloat(zoom)
+      }
+    }
+  }
+  if (maxZoom && maxZoom.length) {
+    paramsViewer = {
+      map: {
+        ...paramsViewer.map,
+        maxZoom: parseInt(maxZoom)
+      }
+    }
+  }
+  if (tiles && tiles.length) {
+    const style = tiles.includes('wxs.ign.fr') ? await getIgnTiles() : tiles
+    paramsViewer = {
+      map: {
+        ...paramsViewer.map,
+        style
+      }
+    }
+  }
+  if (props.fetchOptions) {
+    paramsViewer = {
+      ...paramsViewer,
+      ...props.fetchOptions
+    }
+  }
+  const reportLink = document.createElement('div')
+  reportLink.className = 'gvs-group gvs-group-large gvs-group-btnpanel'
+  viewer.value = new Viewer(
+    'viewer', // Div ID
+    `${import.meta.env.VITE_API_URL}/api/search`,
+    {
+      ...paramsViewer,
+      widgets: { customWidget: reportLink }
+    }
+  )
+  if (viewer.value && viewer.value.addEventListener) {
+    createViewerButton(reportLink)
+  }
+  mapIsLoaded.value = true
+}
+async function setupMap(tiles: string): Promise<void> {
+  let paramsMap: MapInterface
+  paramsMap = { users: [props.userId], minZoom: 7 }
+  if (tiles && tiles.length) {
+    const style = tiles.includes('wxs.ign.fr') ? await getIgnTiles() : tiles
+    paramsMap = {
+      ...paramsMap,
+      style
+    }
+  }
+  const bbox = [props.bbox[0], props.bbox[1], props.bbox[2], props.bbox[3]]
+  viewer.value = new StandaloneMap(
+    'viewer', // Div ID
+    `${import.meta.env.VITE_API_URL}/api/search`,
+    {
+      ...paramsMap,
+      bounds: bbox,
+      zoom: 14
+    }
+  )
+  viewer.value.addEventListener('ready', () => {
+    viewer.value.fitBounds(bbox, {
+      padding: { top: 70, bottom: 70, left: 70, right: 70 },
+      maxZoom: 14,
+      speed: 10
+    })
+  })
+  mapIsLoaded.value = true
+}
+onMounted(async (): Promise<void> => {
+  const tiles = import.meta.env.VITE_TILES
+  try {
+    if (props.geovisioViewer) return await setupViewerMap(tiles)
+    return await setupMap(tiles)
   } catch (err) {
+    mapIsLoaded.value = true
     console.log(err)
   }
 })
-onUnmounted(() => {
+onUnmounted((): void => {
   if (viewer.value && props.geovisioViewer) viewer.value.destroy()
 })
 </script>

src/components/filters/CalendarFilter.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="wrapper-calendar">
+    <div class="inputs-wrapper">
+      <div class="input-wrapper">
+        <i class="bi bi-calendar-plus"></i>
+        <input
+          :value="
+            range && range.start
+              ? formatDate(new Date(range.start), 'YYYY-MM-DD')
+              : null
+          "
+          :placeholder="$t('pages.sequences.radio_date_placeholder')"
+          @input="setStartValue"
+          class="input"
+        />
+      </div>
+      <i class="bi bi-arrow-right"></i>
+      <div class="input-wrapper">
+        <i class="bi bi-calendar-plus"></i>
+        <input
+          :value="
+            range && range.end
+              ? formatDate(new Date(range.end), 'YYYY-MM-DD')
+              : null
+          "
+          :placeholder="$t('pages.sequences.radio_date_placeholder')"
+          @input="setEndValue"
+          class="input"
+        />
+      </div>
+    </div>
+  </div>
+  <v-date-picker
+    ref="datePicker"
+    v-model="range"
+    mode="date"
+    :masks="{
+      input: 'YYYY-MM-DD'
+    }"
+    is-range
+    expanded
+    :max-date="new Date()"
+  />
+  <div class="footer-modal">
+    <Button
+      :text="$t('pages.sequences.filter_date_close_button')"
+      look="button--transparent"
+      @trigger="$emit('triggerCloseModal')"
+    />
+    <Button
+      v-if="range && (range.start || range.end)"
+      :text="$t('pages.sequences.filter_date_reset_button')"
+      icon="bi bi-trash"
+      look="button--red"
+      @trigger="resetCalendar"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import moment from 'moment'
+import { ref, watch } from 'vue'
+import type { PropType } from 'vue'
+import { formatDate } from '@/utils/dates'
+import Button from '@/components/Button.vue'
+interface CalendarDateInterface {
+  start: Date | string | null
+  end: Date | string | null
+  type: string
+}
+const emit = defineEmits(['triggerDate', 'triggerCloseModal'])
+const props = defineProps({
+  type: { type: String, default: '' },
+  rangeSelected: {
+    type: Object as PropType<CalendarDateInterface>,
+    default: { start: null, end: null, type: '' }
+  }
+})
+let range = ref<CalendarDateInterface>({
+  start: props.rangeSelected.start,
+  end: props.rangeSelected.end,
+  type: props.rangeSelected.type
+})
+const datePicker = ref()
+function checkValidityDate(dateToValid: string): boolean {
+  const date = moment(dateToValid, 'YYYY-MM-DD', true)
+  return date.isValid() && date.format('YYYY-MM-DD') === dateToValid
+}
+function setStartValue(event: Event): void {
+  const value = (event.target as HTMLInputElement).value
+  if (checkValidityDate(value)) {
+    range.value.start = new Date(value)
+    const startDate = `${formatDate(new Date(value), 'YYYY-MM-DD')} 12:00 AM`
+    if (range && range.value.end && range.value.start) {
+      range.value = {
+        start: new Date(startDate),
+        end: range.value.end,
+        type: props.type
+      }
+      datePicker.value.updateValue(range.value)
+    }
+  }
+}
+function setEndValue(event: Event): void {
+  const value = (event.target as HTMLInputElement).value
+  if (checkValidityDate(value)) {
+    range.value.end = new Date(value)
+    const endDate = `${formatDate(new Date(value), 'YYYY-MM-DD')} 11:59 PM`
+    if (range && range.value.end && range.value.start) {
+      range.value = {
+        end: new Date(endDate),
+        start: range.value.start,
+        type: props.type
+      }
+      datePicker.value.updateValue(range.value)
+    }
+  }
+}
+function resetCalendar(): void {
+  range.value = { start: null, end: null, type: '' }
+  emit('triggerDate', { start: null, end: null, type: props.type })
+}
+watch(range, (range) => {
+  if (range && range.start && range.end) {
+    const startDate = `${formatDate(range.start, 'YYYY-MM-DD')} 12:00 AM`
+    const endDate = `${formatDate(range.end, 'YYYY-MM-DD')} 11:59 PM`
+    range.type = props.type
+    emit('triggerDate', { start: startDate, end: endDate, type: props.type })
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.wrapper-calendar {
+  margin-bottom: toRem(2);
+}
+.inputs-wrapper {
+  display: flex;
+  align-items: center;
+  @include text(xs-r-regular);
+}
+.input-wrapper {
+  position: relative;
+  width: 100%;
+}
+.footer-modal {
+  margin-top: toRem(2);
+  display: flex;
+  justify-content: space-between;
+}
+.bi-arrow-right {
+  margin-right: toRem(1);
+  margin-left: toRem(1);
+}
+.bi-calendar-plus {
+  position: absolute;
+  left: 5%;
+  top: 20%;
+}
+.input {
+  padding: toRem(0.5) toRem(0.5) toRem(0.5) toRem(2.5);
+  border-radius: toRem(0.3);
+  border: toRem(0.1) solid var(--grey-pale);
+  width: 100%;
+}
+</style>

src/components/header/HeaderOpen.vue

@@ -110,7 +110,7 @@ ul {
   width: toRem(25);
   top: toRem(8);
   right: 0;
-  z-index: 2;
+  z-index: 3;
   background-color: var(--white);
   box-shadow: 0 toRem(0.2) toRem(0.4) rgb(0 0 0 / 10%);
   border-radius: toRem(1);
@@ -157,6 +157,7 @@ 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: fit-content;
+  width: toRem(22);
 }
 .text-information {
   @include text(s-r-regular);
@@ -167,7 +167,6 @@ defineProps({
     margin-bottom: toRem(2);
   }
 }
-
 @media (max-width: toRem(102.4)) {
   .loader-title {
     flex-direction: column;

src/locales/en.json

@@ -37,7 +37,10 @@
   "pages": {
     "home": {
       "report_mail": "?subject=⚠️ Report on picture {picId}&body=HEllo, %0D%0A%0D%0A Problem on image (keep type of problem reported) : %0D%0A%0D%0A %0D%0A%0D%0A inappropriate content / lack of blurring on an element to be anonymized or blurred for security reasons / overblurring (too much blurring) %0D%0A%0D%0A Link to affected photo : {link} %0D%0A%0D%0A Details of affected elements (especially for blurring problems - what should be blurred or unblurred?) :",
-      "report_button_text": "Report this picture"
+      "report_button_text": "Report this picture",
+      "sequence_title": "See the séquence",
+      "open_fullscreen": "Fullscreen mode",
+      "close_fullscreen": "Normal mode"
     },
     "settings": {
       "title": "My tokens",
@@ -47,7 +50,9 @@
       "sequence_published": "Published",
       "sequence_waiting": "Still processing",
       "sequence_hidden": "Hidden",
+      "sequence_form_title": "Edit the title",
       "hide_sequence_tooltip": "Hide this sequences",
+      "back_button": "Back to my sequence list",
       "delete_sequence_tooltip": "Permanently delete this sequence",
       "hide_photo_tooltip": "Hide selected pictures",
       "delete_photo_tooltip": "Permanently delete selected pictures",
@@ -75,10 +80,24 @@
     },
     "sequences": {
       "title": "My sequences",
+      "filter_date_upload_title": "Filter by upload date",
+      "filter_date_title": "Filter by shooting date :",
+      "radio_date_placeholder": "03/01/2024",
+      "radio_datetime_placeholder": "03/01/2024 12:00 AM",
+      "radio_date": "date",
+      "hide_button": "Hide",
+      "show_button": "Show",
+      "delete_button": "Delete",
+      "filter_date_reset_button": "Reset",
+      "filter_date_close_button": "Close",
+      "no_sequence_found": "No sequence found",
       "sequence_name": "Name",
       "sequence_photos": "Photos",
       "sequence_date": "Shot on",
       "sequence_creation": "Upload",
+      "sequence_creation_tooltip": "Filter by uploaded date",
+      "sequence_date_tooltip": "Filter by shooting date",
+      "filter_bbox_button": "Search on this area",
       "sequence_status": "Status",
       "sequence_published": "Published",
       "sequence_waiting": "Still processing",
@@ -133,9 +152,13 @@
       "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...",
+      "uploading_cancel": "Cancel sending photos",
+      "cancel_message": "⚠️ Please note, the download will be interrupted if you validate and the sequence will be deleted.",
       "sequence_title": "Sequence ",
       "import": "Uploads",
       "upload_pending": "Upload in progress...",
@@ -143,6 +166,9 @@
       "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

@@ -1,6 +1,7 @@
 {
   "general": {
-    "title": "Instance Panoramax",
+    "title": "DESC Panoramax {instanceName}: photo-cartographier les territoires",
+    "description": "DESC L'instance Panoramax {instanceName} permet la publication de photo de terrain pour cartographier le territoire. Panoramax favorise la réutilisation des photos pour de nombreux cas d'usages.",
     "meta": {
       "title": "Instance Panoramax",
       "description": "Panoramax, l’alternative libre pour photo-cartographier les territoires"
@@ -37,7 +38,10 @@
   "pages": {
     "home": {
       "report_mail": "?subject=⚠️ Signalement sur l`image {picId}&body=Bonjour, %0D%0A%0D%0A Problème sur l`image (garder le type de problème signalé) : %0D%0A%0D%0A contenu inapproprié / absence de floutage sur un élément à anonymiser ou flouter pour des raisons de sécurité /surfloutage (floutage en trop) %0D%0A%0D%0A Lien vers la photo concernée : {link} %0D%0A%0D%0A Précision sur les éléments concernés (en particulier pour les problèmes de floutage - que faut-il flouter ou déflouter?) :",
-      "report_button_text": "Signaler la photo"
+      "report_button_text": "Signaler la photo",
+      "sequence_title": "Voir la séquence",
+      "open_fullscreen": "Mode plein écran",
+      "close_fullscreen": "Mode normal"
     },
     "settings": {
       "title": "Mes Tokens",
@@ -47,7 +51,9 @@
       "sequence_published": "Publiée",
       "sequence_waiting": "En cours de publication",
       "sequence_hidden": "Masquée",
+      "sequence_form_title": "Modifier le titre",
       "hide_sequence_tooltip": "Masque la séquence sur la carte",
+      "back_button": "Retourner à la liste de mes séquences",
       "delete_sequence_tooltip": "Supprime définitivement la séquence",
       "hide_photo_tooltip": "Masque les photos sur la carte",
       "delete_photo_tooltip": "Supprime définitivement les photos",
@@ -75,10 +81,24 @@
     },
     "sequences": {
       "title": "Mes séquences de photos",
+      "filter_date_upload_title": "Filtrer par date de versement :",
+      "filter_date_title": "Filtrer par date de prise de vue :",
+      "radio_date_placeholder": "2024-01-03",
+      "radio_date": "date",
+      "hide_button": "Masquer",
+      "show_button": "Afficher",
+      "delete_button": "Supprimer",
+      "filter_date_reset_button": "Réinitialiser",
+      "filter_date_close_button": "Fermer",
+      "no_sequence_found": "Aucune séquence trouvée",
       "sequence_name": "Nom",
       "sequence_photos": "Photos",
       "sequence_date": "Prise de vue",
       "sequence_creation": "Versement",
+      "sequence_creation_tooltip": "Filtre par date de versement",
+      "sequence_date_tooltip": "Filtre par date de prise de vue",
+      "reset_filter_button": "Réinitialiser les filtres",
+      "filter_bbox_button": "Chercher dans cette zone",
       "sequence_status": "Statut",
       "sequence_published": "Publiée",
       "sequence_waiting": "En cours de publication",
@@ -133,9 +153,13 @@
       "import_word": "importer",
       "import_type": "Format JPEG uniquement",
       "subtitle_import": "Dépôt des images",
-      "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.",
+      "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.",
       "subtitle_process": "Traitements de l'import",
-      "uploading_process": "Téléchargement en cours...",
+      "uploading_process": "Envoi en cours...",
+      "uploading_cancel": "Annuler l'envoi des photos",
+      "cancel_message": "⚠️ Attention, le téléchargement sera interrompu si vous validez et la séquence sera supprimée.",
       "sequence_title": "Séquence du ",
       "import": "Imports",
       "upload_pending": "Transfert en cours...",
@@ -143,7 +167,10 @@
       "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",
-      "pictures_error": "{count} image n'a pas pu être chargée| {count} image n'ont pas pu être chargées",
+      "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} images 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.",
       "leave_message": "⚠️ Attention, le téléchargement sera interrompu si vous quittez la page avant la fin.",

src/locales/hu.json

@@ -0,0 +1,205 @@
+{
+  "general": {
+    "title": "Panoramax-példány",
+    "meta": {
+      "title": "Panoramax-példány",
+      "description": "Panoramax, szabad alternatíva a világ fotós feltérképezéséhez"
+    },
+    "header": {
+      "login_text": "Kapcsolódás",
+      "register_text": "Regisztráció",
+      "contribute_text": "Miért működjön közre?",
+      "my_account": "Saját fiók",
+      "upload_text": "+ Fényképek megosztása",
+      "sequences_text": "Saját fényképek",
+      "alt_logo": "A példány logója",
+      "alt_photos": "Képek ikon",
+      "alt_information": "Felhasználó ikon",
+      "alt_settings": "Paraméterek ikon",
+      "alt_logout": "Kijelentkezés ikon",
+      "title": "Panoramax",
+      "beta_text": "Béta verzió",
+      "logout_text": "Kijelentkezés",
+      "my_information_text": "Saját adatok",
+      "my_settings_text": "Saját beállítások",
+      "burger_menu_aria_label_open": "A menü megjelenítése",
+      "burger_menu_aria_label_closed": "A menü bezárása"
+    },
+    "footer": {
+      "panoramax_site": "A Panoramax felfedezése",
+      "information_gitlab": "Forráskód megjelenítése",
+      "gitlab_logo": "Gitlab logó",
+      "ay11_text": "Akadálymentesítés: nem felel meg"
+    },
+    "error_text": "Hiba történt",
+    "success_text": "Sikeres frissítés"
+  },
+  "pages": {
+    "home": {
+      "report_mail": "?subject=⚠️ Report on picture {picId}&body=Hello, %0D%0A%0D%0A Problem on image (keep type of problem reported) : %0D%0A%0D%0A %0D%0A%0D%0A inappropriate content / lack of blurring on an element to be anonymized or blurred for security reasons / overblurring (too much blurring) %0D%0A%0D%0A Link to affected photo : {link} %0D%0A%0D%0A Details of affected elements (especially for blurring problems - what should be blurred or unblurred?) :",
+      "report_button_text": "Fénykép jelentése",
+      "sequence_title": "lásd a sorrendet",
+      "open_fullscreen": "Teljes képernyős mód",
+      "close_fullscreen": "Normál mód"
+    },
+    "settings": {
+      "title": "Saját tokenek",
+      "setting_tooltip": "A token megjelenítése vagy elrejtése"
+    },
+    "sequence": {
+      "sequence_published": "Közzétéve",
+      "sequence_waiting": "Feldolgozás alatt",
+      "sequence_hidden": "Rejtett",
+      "sequence_form_title": "Szerkessze a címet",
+      "hide_sequence_tooltip": "A sorozat elrejtése",
+      "back_button": "Vissza a sorozatlistámhoz",
+      "delete_sequence_tooltip": "A sorozat végleges törlése",
+      "hide_photo_tooltip": "A kiválasztott fényképek elrejtése",
+      "delete_photo_tooltip": "A kiválasztottt fényképek végleges törlése",
+      "confirm_pictures_dialog": "⚠️ A kiválasztott fényképek véglegesen elvesznek",
+      "confirm_sequence_dialog": "⚠️ A kiválasztott sorozat véglegesen elvész",
+      "created": "Feltöltés ideje:",
+      "taken": "Elkészítés ideje:",
+      "duration": "Hossz:",
+      "duration_begin": "Kezdet:",
+      "duration_end": "Vég:",
+      "camera": "Kamera:",
+      "button_delete": "Törlés",
+      "button_disable": "Elrejtés",
+      "button_enable": "Megjeleníté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",
+      "seconds": "{count} másodperc| {count} másodperc",
+      "select_text": "Kiválasztás",
+      "unselect_text": "Kiválasztás törlése",
+      "select_shift_text": "Több elemet a Shift segítségével választhat ki",
+      "waiting_process": "A fénykép feldolgozás alatt áll",
+      "broken": "Fénykép-feldolgozási hiba",
+      "no_image": "Nincsenek fényképek ebben a sorozatban"
+    },
+    "sequences": {
+      "title": "Saját fényképsorozatok",
+      "filter_date_upload_title": "Szűrés feltöltés dátuma szerint :",
+      "filter_date_title": "Szűrés forgatás dátuma szerint :",
+      "radio_date_placeholder": "03/01/2024",
+      "radio_datetime_placeholder": "03/01/2024 12:00 AM",
+      "radio_date": "dátum",
+      "hide_button": "Elrejt",
+      "show_button": "Előadás",
+      "delete_button": "Töröl",
+      "filter_date_reset_button": "Visszaállítás",
+      "filter_date_close_button": "Bezárás",
+      "no_sequence_found": "Nem található felvétel",
+      "sequence_name": "Név",
+      "sequence_photos": "Fényképek",
+      "sequence_date": "Elkészítés ideje",
+      "sequence_creation": "Feltöltés ideje",
+      "sequence_creation_tooltip": "Szűrés feltöltés dátuma szerint",
+      "sequence_date_tooltip": "Szűrés forgatás dátuma szerint",
+      "filter_bbox_button": "Keresés ezen a területen",
+      "sequence_status": "Állapot",
+      "sequence_published": "Közzétéve",
+      "sequence_waiting": "Feldolgozás alatt",
+      "sequence_hidden": "Rejtett",
+      "no_sequences_text": "Még nincsenek közzétett fényképei \uD83D\uDE22",
+      "button_upload": "Fényképek feltöltése",
+      "sequence_deleted": "A sorozat törlésre került"
+    },
+    "share_pictures": {
+      "title": "Miért működjön közre a Panoramaxban?",
+      "description": "A Panoramaxban való közreműködés azt jelenti, hogy részt vesz egy közös, független, szabad és újrafelhasználható digitális erőforrás fejlesztésében. A Panoramaxon található minden georeferált fénykép bárki által használható, számos célra, például egy önkormányzat megtekintheti az utai állapotát, vagy egy távközlési vállalat felkészülhet a beavatkozásaira.\n\nMinden közreműködő beküldheti a saját képsorozatait, módosíthatja és megnézheti azokat, ahogyan ezt teheti a közösség más tagjai által feltöltött képekkel is. Az arcok és rendszámtáblák kötelező kitakarását maga a platform automatizálja.",
+      "alt_img_map": "Illusztráció egy nőről, aki egy térképet néz a földrajzi helymeghatározással rendelkező okostelefonján",
+      "card_photo1": "Közútról látható helyek",
+      "card_photo2": "Közzétett fényképek 360°-os vagy más formátumban",
+      "card_photo3": "Könnyen újrafelhasználható fényképek",
+      "card_photo4": "Képek gyors és egyszerű megosztása",
+      "card_alt_photo1": "Egy épületet tartalmazó kép",
+      "card_alt_photo2": "Egy 360°-ot megjelenítő kép",
+      "card_alt_photo3": "Egy kép egy térképről mutatóval",
+      "card_alt_photo4": "Egy mutatót ábrázoló kép",
+      "card_description1": "Minden közútról készült kép elfogadható, ha az georeferált és a földről készült.",
+      "card_description2": "A 360°-os képek nem kötelezők: az okostelefonnal készült képek is megfelelők. Az előfeltételek a dátum, a helyszín és a jpg formátum használata.",
+      "card_description3": "Minden fénykép fiók nélkül is könnyedén elérhető és felhasználható: a weboldalon vagy egy szabványos API-n keresztül (STAC szabvány).",
+      "card_description4": "Számos eszköz elérhető a közreműködések lehetővé tételéhez, köztük egy parancssoros és egy webes felület is.",
+      "upload_subtitle": "Töltse fel egyszerűen a fényképeit",
+      "upload_illustration_alt": "Online képfeltöltést ábrázoló illusztráció",
+      "upload_description": "A Panoramax webalkalmazása lehetővé teszi, hogy egy gombnyomással feltöltse az összes fényképét JPG formátumban. Programozói készségek nem szükségesek. Sok kép esetén viszont a parancssoros eszköz használatát javasoljuk.",
+      "upload_button": "+ Képek feltöltése",
+      "command_line_subtitle": "Parancssoros eszköz",
+      "comment_install": "A geovisio parancssoros eszköz telepítése",
+      "comment_upload": "A képfeltöltési parancs indítása a kiválasztott mappán",
+      "description_terminal": "<a href='https://gitlab.com/geovisio/cli' target='_blank' style='color:black'>A parancssor</a> lehetővé teszi, hogy nagy számú képet osszon meg. A folyamat egyszerű, és <a target='_blank' href='https://www.python.org/downloads/' style='color:black'>Pythont (3.8-as vagy újabb verzió)</a> igényli.\n\nAz importálás előtt az eszköz bekéri a bejelentkezési adatait. Amint a képek felöltésre kerültek, azok közzététele előtt feldolgozási idő szükséges.",
+      "terminal_install": "pip install geovisio_cli",
+      "terminal_text": "geovisio upload --api-url {webcím} <FÉNYKÉPMAPPA>",
+      "button_copy": "Másolás",
+      "information_subtitle": "Itt a fényképek mindenki számára elérhetők: ",
+      "information_text1": "Automatikusan kitakarva, a törvényi előírásoknak megfelelően.",
+      "information_text2": "A feltöltött képek a következő alatt lesznek közzétéve: {word}",
+      "information_text3": "Az eredeti formátumban és felbontásban, számos újrafeldolgozáshoz.",
+      "information_about_title": "Hozzá kell férnie a fényképeihez?",
+      "information_about_description": "Az API elérhető az összes metaadat és kép letöltéséhez. <a href='{docLink}' target='_blank' style='color:#0a1f69'>\nTudjon meg többet itt.</a>\nAz adatok <a href='{docTiles}' target='_blank' style='color:#0a1f69'>vektorcsempék</a> formájában is megjelennek.",
+      "doc_subtitle": "Segítségre van szüksége a Panoramaxban történő közreműködéshez?",
+      "doc_description": "A Panoramax dokumentációja elérhető tőlünk, oktatóanyagokat pedig a geo-commons fórumán találhat.",
+      "doc_button": "A dokumentáció megtekintése",
+      "doc_illustration_alt": "Illusztráció egy karakterről dokumentumokkal"
+    },
+    "upload": {
+      "title": "Közreműködés a Panoramax projektben",
+      "description": "Nagy számú fényképhez a parancssoros eszköz jobban megfelelő.",
+      "know_more_button": "További tudnivalók",
+      "input_label": "Húzza ide a képeket, vagy kattintson a",
+      "import_word": "feltöltésre",
+      "import_type": "Csak JPEG formátum",
+      "subtitle_import": "Képfeltöltés",
+      "title_sequence": "Sorozat címe",
+      "description_title_sequence": "Alapértelmezés szerint a sorozat cím a nap dátuma lesz. Ha akarja, itt szerkesztheti a címet.",
+      "text_import": "Ide töltse fel a JPG-fájljait. Minden kép vagy képsorozat egy „sorozatot” alkot. Megtalálhatja azokat a „saját fényképek” szakaszban, és elrejtheti, megjelenítheti vagy törölheti azokat.",
+      "subtitle_process": "Feltöltés feldolgozása",
+      "uploading_process": "Feltöltés folyamatban…",
+      "uploading_cancel": "Fényképek küldésének megszakítása",
+      "cancel_message": "⚠️ Felhívjuk figyelmét, hogy a letöltés megszakad, ha érvényesíti, és a sorozat törlődik.",
+      "sequence_title": "Sorozat ",
+      "import": "Feltöltések",
+      "upload_pending": "Feltöltés folyamatban…",
+      "images_count_text": "Feltöltött képek",
+      "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_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",
+      "sequence_loading_information": "Amint feltöltötte, a sorozat feldolgozásra, majd közzétételre került a Panoramaxon (általában néhány perc múlva).",
+      "sequence_loaded_information": "A sorozatok fel lettek töltve, és feldolgozás alatt vannak. Néhány perc múlva nyilvánosan elérhetőnek kellene lenniük a Panoramaxon.",
+      "leave_message": "⚠️ FIGYELMEZTETÉS, a feltöltés meg fog szakadni, ha a végezte előtt hagyja el a lapot.",
+      "error_button": "Hibák megjelenítése",
+      "modal_error_title": "A hibában érintett képek"
+    },
+    "ay11": {
+      "title": "Déclaration d’accessibilité",
+      "date": "Établie le 18 septembre 2023.",
+      "introduction": "IGN s’engage à rendre son service accessible, conformément à l’article 47 de la loi n° 2005-102 du 11 février 2005.\n Cette déclaration d’accessibilité s’applique à Panoramax Instance IGN : https://panoramax.ign.fr",
+      "subtitle_conformity": "État de conformité",
+      "conformity_text": "Panoramax Instance IGN est non conforme avec le ",
+      "conformity_text2": "Le site n’a encore pas été audité.",
+      "subtitle_conformity2": "Contenus non accessibles",
+      "subtitle_increase": "Amélioration et contact",
+      "increase_text": "Si vous n’arrivez pas à accéder à un contenu ou à un service, vous pouvez\n      contacter le responsable de Panoramax Instance IGN pour être orienté vers une alternative accessible ou obtenir le contenu sous une autre forme.",
+      "phone": "Téléphone : +33 14 398 84 61",
+      "email_text": "E-mail :",
+      "email": "signalement.ign@panoramax.fr",
+      "address": "Adresse : IGN, Saint-Mandé",
+      "increase_info": "Nous essayons de répondre dans les 5 jours ouvrés.",
+      "subtitle_to_do": "Voie de recours",
+      "to_do_text": "Cette procédure est à utiliser dans le cas suivant : vous avez signalé au responsable du site internet un défaut d’accessibilité qui vous\n      empêche d’accéder à un contenu ou à un des services du portail et vous n’avez pas obtenu de réponse satisfaisante. \n vous pouvez :",
+      "write_message": "Écrire un message au",
+      "defenseur_droits": "Défenseur des droits",
+      "contact": "Contacter",
+      "contact_text": "le délégué du Défenseur des droits dans votre région",
+      "send_letter": "Envoyer un courrier par la poste (gratuit, ne pas mettre de\n  timbre):\n Défenseur des droits\n Libre réponse 71120 75342 Paris CEDEX 07",
+      "end": "Cette déclaration d’accessibilité a été créé le\n 18 septembre 2023 grâce au",
+      "generator_betagouv": "Générateur de Déclaration d’Accessibilité de BetaGouv"
+    }
+  }
+}

src/main.ts

@@ -1,21 +1,33 @@
 import { createApp } from 'vue'
 import { createI18n } from 'vue-i18n'
+import VueMatomo from 'vue-matomo'
 import App from './App.vue'
 import router from './router'
 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 VCalendar from 'v-calendar'
+import 'v-calendar/style.css'
 import { pinia } from './store'
 import fr from './locales/fr.json'
 import en from './locales/en.json'
+import hu from './locales/hu.json'
 import './assets/main.scss'
 import 'bootstrap/dist/css/bootstrap.css'
 import 'bootstrap-icons/font/bootstrap-icons.css'
 import 'geovisio/build/index.css'
 
+declare global {
+  interface Window {
+    _paq: any[]
+  }
+}
+
 axios.defaults.baseURL = import.meta.env.VITE_API_URL
 axios.defaults.withCredentials = true
+const matomoHost = import.meta.env.VITE_MATOMO_HOST
+const matomoSiteId = import.meta.env.VITE_MATOMO_SITE_ID
+const matomoExist = matomoHost && matomoSiteId
 
 const i18n = createI18n({
   locale: navigator.language.split('-')[0],
@@ -25,19 +37,26 @@ const i18n = createI18n({
   legacy: false,
   messages: {
     fr,
-    en
+    en,
+    hu
   }
 })
-globalCookiesConfig({
-  expireTimes: '7d'
-})
 
 const app = createApp(App)
-
 app.use(pinia)
 app.use(i18n)
 app.use(router)
 app.use(VueAxios, axios)
 app.provide('axios', app.config.globalProperties.axios)
-app.use(createMetaManager())
+app.use(VueDraggableResizable)
+app.use(VCalendar)
+if (matomoExist) {
+  app.use(VueMatomo, {
+    host: matomoHost,
+    siteId: matomoExist
+  })
+}
 app.mount('#app')
+if (matomoExist) {
+  window._paq.push(['trackPageView']) // Pour suivre les visites sur vos pages
+}

src/router/index.ts

@@ -1,12 +1,11 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import { useCookies } from 'vue3-cookies'
 import type {
   RouteRecordRaw,
   NavigationGuardNext,
   RouteLocationNormalized
 } from 'vue-router'
 import axios from 'axios'
-import { getAuthRoute } from '@/utils/auth'
+import { getAuthRoute, hasASessionCookieDecoded } from '@/utils/auth'
 import HomeView from '../views/HomeView.vue'
 import MyInformationView from '../views/MyInformationView.vue'
 import MySettingsView from '../views/MySettingsView.vue'
@@ -15,7 +14,6 @@ import MySequenceView from '../views/MySequenceView.vue'
 import SharePicturesView from '../views/SharePicturesView.vue'
 import UploadPicturesView from '../views/UploadPicturesView.vue'
 import Ay11View from '../views/Ay11View.vue'
-const { cookies } = useCookies()
 let routes: Array<RouteRecordRaw> = [
   {
     path: '/',
@@ -77,8 +75,9 @@ 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 {
@@ -95,7 +94,8 @@ router.beforeResolve(
 )
 
 function isSiteLogged(): boolean {
-  return !!cookies.get('user_id')
+  const cookie = hasASessionCookieDecoded()
+  return !!(cookie && cookie.account)
 }
 
 async function isKeycloakLogout(): Promise<{ status: number }> {

src/store/sequence.ts

@@ -3,7 +3,8 @@ import { defineStore } from 'pinia'
 export const useSequenceStore = defineStore('sequence', {
   state: () => ({
     toastText: <string>'',
-    toastLook: <string>''
+    toastLook: <string>'',
+    picId: <string>''
   }),
   actions: {
     addToastText(text: string, look: string): void {
@@ -12,6 +13,9 @@ export const useSequenceStore = defineStore('sequence', {
       setTimeout(() => {
         this.toastText = ''
       }, 3000)
+    },
+    addSequence(id: string): void {
+      this.picId = id
     }
   }
 })

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

@@ -0,0 +1,88 @@
+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/Header.spec.js

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

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

@@ -0,0 +1,43 @@
+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/Link.spec.js

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

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

@@ -26,11 +26,10 @@ describe('Template', () => {
           }
         }
       })
-      expect(wrapper.vm.uploadErrors).toEqual([])
+      expect(wrapper.vm.title).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],
@@ -39,13 +38,12 @@ describe('Template', () => {
           }
         },
         props: {
-          uploadErrors
+          title: 'My title'
         }
       })
 
-      expect(wrapper.vm.uploadErrors).toEqual(uploadErrors)
-      expect(wrapper.html()).contains('my name - ')
-      expect(wrapper.html()).contains('my message')
+      expect(wrapper.vm.title).toEqual('My title')
+      expect(wrapper.html()).contains('My title')
     })
   })
 })

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

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

src/tests/unit/utils.spec.js

@@ -1,4 +1,4 @@
-import { it, describe, expect } from 'vitest'
+import { it, describe, expect, vi, beforeEach } from 'vitest'
 import {
   imageStatus,
   photoToDeleteOrPatchSelected,
@@ -6,10 +6,25 @@ import {
   formatPaginationItems
 } from '../../views/utils/sequence/index'
 import { sortByName } from '../../views/utils/upload/index'
-import { getAuthRoute } from '../../utils/auth'
+import {
+  getAuthRoute,
+  decodingFlaskCookie,
+  hasASessionCookieDecoded
+} 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'
@@ -126,6 +141,42 @@ 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'
@@ -133,19 +184,6 @@ describe('img', () => {
   })
 })
 
-describe('title', () => {
-  it('should return the formated title with instance name', () => {
-    import.meta.env.VITE_INSTANCE_NAME = 'my instance'
-    const myTitle = 'my title'
-    expect(title(myTitle)).toEqual('my title my instance')
-  })
-  it('should return the formated title without instance name', () => {
-    import.meta.env.VITE_INSTANCE_NAME = ''
-    const myTitle = 'my title'
-    expect(title(myTitle)).toEqual('my title')
-  })
-})
-
 describe('sortByName', () => {
   it('should return the the list sorted by name', () => {
     const list1 = [

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

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

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

@@ -7,6 +7,7 @@ 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, {
@@ -80,7 +81,7 @@ describe('Template', () => {
         spyPicture.mockReturnValue({ data: {} })
         const sequenceTitle = `Séquence du ${formatDate(
           new Date(),
-          'Do MMMM YYYY, hh:mm:ss'
+          'Do MMMM YYYY, HH:mm:ss'
         )}`
         const body = new FormData()
         body.append('position', '1')

src/utils/auth.ts

@@ -1,3 +1,7 @@
+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 `${
@@ -5,4 +9,25 @@ function getAuthRoute(authRoute: string, nextRoute: string): string {
   }api/${authRoute}?next_url=${encodeURIComponent(`${next}`)}`
 }
 
-export { getAuthRoute }
+// 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 }

src/utils/dates.ts

@@ -1,7 +1,7 @@
 import moment from 'moment'
 import 'moment/dist/locale/fr'
 
-function formatDate(date: Date, formatType: string): string {
+function formatDate(date: Date | null | string, formatType: string): string {
   const formatDate = moment(date)
   return formatDate.locale(window.navigator.language).format(formatType)
 }

src/utils/index.ts

@@ -1,9 +1,3 @@
-export function title(title: string): string {
-  const instanceName = import.meta.env.VITE_INSTANCE_NAME
-  if (instanceName) return `${title} ${instanceName}`
-  return title
-}
-
 export function createUrlLink(picId: string): string {
   return encodeURIComponent(`${window.location.origin}/#focus=pic&pic=${picId}`)
 }

src/utils/mapAndViewer.ts

@@ -1,21 +1,29 @@
 import axios from 'axios'
 
-async function getIgnTiles(): Promise<object> {
-  const { data } = await axios.get(
-    'https://wxs.ign.fr/essentiels/static/vectorTiles/styles/PLAN.IGN/attenue.json'
-  )
-  data.sources.plan_ign.scheme = 'xyz'
-  data.sources.plan_ign.attribution = 'Données cartographiques : © IGN'
-  const objIndex = data.layers.findIndex(
-    (el: any) => el.id === 'toponyme - parcellaire - adresse'
-  )
-  data.layers[objIndex].layout = {
-    ...data.layers[objIndex].layout,
-    'text-field': ['concat', ['get', 'numero'], ['get', 'indice_de_repetition']]
+async function getIgnTiles(): Promise<object | string> {
+  try {
+    const { data } = await axios.get(
+      'https://wxs.ign.fr/essentiels/static/vectorTiles/styles/PLAN.IGN/attenue.json'
+    )
+    data.sources.plan_ign.scheme = 'xyz'
+    data.sources.plan_ign.attribution = 'Données cartographiques : © IGN'
+    const objIndex = data.layers.findIndex(
+      (el: { id: string }) => el.id === 'toponyme - parcellaire - adresse'
+    )
+    data.layers[objIndex].layout = {
+      ...data.layers[objIndex].layout,
+      'text-field': [
+        'concat',
+        ['get', 'numero'],
+        ['get', 'indice_de_repetition']
+      ]
+    }
+    // Patch tms scheme to xyz to make it compatible for Maplibre GL JS / Mapbox GL JS
+    // Patch num_repetition
+    return data
+  } catch (error) {
+    return 'https://tile-vect.openstreetmap.fr/styles/basic/style.json'
   }
-  // Patch tms scheme to xyz to make it compatible for Maplibre GL JS / Mapbox GL JS
-  // Patch num_repetition
-  return data
 }
 
 export { getIgnTiles }

src/views/HomeView.vue

@@ -1,7 +1,7 @@
 <template>
-  <main class="entry-page">
+  <main id="homePage" class="entry-page">
     <section class="entry-section">
-      <Viewer ref="viewerRef" />
+      <Viewer ref="viewerRef"> </Viewer>
     </section>
   </main>
 </template>
@@ -9,8 +9,8 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import Viewer from '@/components/Viewer.vue'
-const emit = defineEmits<{ (e: 'trigger', value: string): void }>()
-const viewerRef = ref<unknown>(null)
+import type ViewerType from '@/components/Viewer.vue'
+const viewerRef = ref<InstanceType<typeof ViewerType>>()
 </script>
 <style scoped lang="scss">
 .entry-page {
@@ -20,10 +20,18 @@ const viewerRef = ref<unknown>(null)
   width: 100%;
   height: calc(100vh - #{toRem(13.2)});
 }
+.mobile {
+  display: none;
+}
 .focus-pic,
 .logged .entry-section {
   height: calc(100vh - #{toRem(8)});
 }
+.full-viewer {
+  .entry-section {
+    height: 100vh;
+  }
+}
 .gvs-focus-map .entry-report-button {
   display: none;
 }
@@ -35,5 +43,17 @@ const viewerRef = ref<unknown>(null)
   .entry-section {
     height: calc(100dvh - #{toRem(18)});
   }
+  .full-viewer {
+    height: 100vh;
+    padding-top: 0;
+  }
+}
+@media (max-width: toRem(50)) {
+  .mobile {
+    display: block;
+  }
+  .desktop {
+    display: none;
+  }
 }
 </style>

src/views/MySequenceView.vue

@@ -2,7 +2,7 @@
   <main :class="['entry-page', { 'menu-is-open': menuIsOpen }]">
     <div class="button-close">
       <Button
-        look="no-text"
+        look="no-text-blue-dark"
         :icon="menuIsOpen ? 'bi bi-chevron-right' : 'bi bi-chevron-left'"
         @trigger="menuIsOpen = !menuIsOpen"
       />
@@ -14,95 +14,107 @@
       />
     </section>
     <div v-if="sequence && !isLoading" class="menu-right">
-      <div class="menu-top" ref="collapseMenu">
-        <div class="header-menu">
-          <button
-            data-bs-target="#collapseTarget"
-            data-bs-toggle="collapse"
-            class="button-collapse"
-            @click="toggleMenu"
-          >
+      <div ref="collapseMenu">
+        <div class="back-button">
+          <Link
+            icon="bi bi-arrow-left"
+            :text="$t('pages.sequence.back_button')"
+            :route="{ name: 'my-sequences' }"
+            look="link--grey"
+          />
+        </div>
+        <div class="menu-top">
+          <div class="header-menu">
             <div class="wrapper-title">
               <span :class="[sequence.status, 'sequence-status']">{{
                 sequenceStatus
               }}</span>
-              <h1 class="title desktop">
-                {{ sequence.title }}
-              </h1>
+              <div @click.stop class="entry-edit-text">
+                <EditText
+                  :default-text="sequence.title"
+                  :is-loading="isLoadingTitle"
+                  :form-title="$t('pages.sequence.sequence_form_title')"
+                  @triggerNewText="setNewSequenceTitle"
+                />
+              </div>
             </div>
-            <i :class="headerPanelIsOpen ? 'bi bi-dash' : 'bi bi-plus'"></i>
-          </button>
-          <h1 class="title responsive">
-            {{ sequence.title }}
-          </h1>
-        </div>
-        <div v-if="isSequenceOwner" class="wrapper-button">
-          <Button
-            :tooltip="$t('pages.sequence.hide_sequence_tooltip')"
-            :text="
-              sequence.status === 'ready'
-                ? $t('pages.sequence.button_disable')
-                : $t('pages.sequence.button_enable')
-            "
-            look="button--white background-white"
-            :icon="
-              sequence.status === 'ready' ? 'bi bi-eye-slash' : 'bi bi-eye'
-            "
-            class="disable-button"
-            @trigger="patchCollection"
-          />
-          <Button
-            :tooltip="$t('pages.sequence.delete_sequence_tooltip')"
-            :text="$t('pages.sequence.button_delete')"
-            look="button--red background-white"
-            icon="bi bi-trash"
-            @trigger="deleteCollection"
-          />
-        </div>
-        <div
-          :class="[sequence.status, 'collapse py-2 show']"
-          id="collapseTarget"
-        >
-          <div class="block-collapse">
-            <div class="wrapper-info-top">
-              <span v-if="sequence.created"
-                >{{ $t('pages.sequence.created') }}
-                {{
-                  formatDate(new Date(sequence.created), 'Do MMMM YYYY')
-                }}</span
-              >
-              <span v-if="sequence.duration"
-                >{{ $t('pages.sequence.duration') }}
-                {{ sequence.duration }}</span
-              >
-              <span v-if="sequence.taken"
-                >{{ $t('pages.sequence.taken') }}
-                {{ formatDate(sequence.taken, 'Do MMMM YYYY') }}</span
-              >
-            </div>
-            <div class="wrapper-info-top">
-              <span v-if="sequence.extent.temporal.interval[0][0]"
-                >{{ $t('pages.sequence.duration_begin') }}
-                {{
-                  formatDate(
-                    sequence.extent.temporal.interval[0][0],
-                    'Do MMMM YYYY, HH:mm:ss'
-                  )
-                }}</span
-              >
-              <span v-if="sequence.extent.temporal.interval[0][1]"
-                >{{ $t('pages.sequence.duration_end') }}
-                {{
-                  formatDate(
-                    sequence.extent.temporal.interval[0][1],
-                    'Do MMMM YYYY, HH:mm:ss'
-                  )
-                }}</span
-              >
-              <span v-if="sequence.camera"
-                >{{ $t('pages.sequence.camera') }} {{ sequence.camera }} -
-                {{ sequence.cameraModel }}</span
-              >
+            <button
+              data-bs-target="#collapseTarget"
+              data-bs-toggle="collapse"
+              class="button-collapse"
+              @click="toggleMenu"
+            >
+              <i :class="headerPanelIsOpen ? 'bi bi-dash' : 'bi bi-plus'"></i>
+            </button>
+          </div>
+          <div v-if="isSequenceOwner" class="wrapper-button">
+            <Button
+              :tooltip="$t('pages.sequence.hide_sequence_tooltip')"
+              :text="
+                sequence.status === 'ready'
+                  ? $t('pages.sequence.button_disable')
+                  : $t('pages.sequence.button_enable')
+              "
+              look="button--white background-white"
+              :icon="
+                sequence.status === 'ready' ? 'bi bi-eye-slash' : 'bi bi-eye'
+              "
+              class="disable-button"
+              @trigger="patchCollection"
+            />
+            <Button
+              :tooltip="$t('pages.sequence.delete_sequence_tooltip')"
+              :text="$t('pages.sequence.button_delete')"
+              look="button--red background-white"
+              icon="bi bi-trash"
+              @trigger="deleteCollection"
+            />
+          </div>
+          <div
+            :class="[sequence.status, 'collapse py-2 show']"
+            id="collapseTarget"
+          >
+            <div class="block-collapse">
+              <div class="wrapper-info-top">
+                <span v-if="sequence.created"
+                  >{{ $t('pages.sequence.created') }}
+                  {{
+                    formatDate(new Date(sequence.created), 'Do MMMM YYYY')
+                  }}</span
+                >
+                <span v-if="sequence.duration"
+                  >{{ $t('pages.sequence.duration') }}
+                  {{ sequence.duration }}</span
+                >
+                <span v-if="sequence.taken"
+                  >{{ $t('pages.sequence.taken') }}
+                  {{ formatDate(sequence.taken, 'Do MMMM YYYY') }}</span
+                >
+              </div>
+              <div class="wrapper-info-top">
+                <span v-if="sequence.extent.temporal.interval[0][0]"
+                  >{{ $t('pages.sequence.duration_begin') }}
+                  {{
+                    formatDate(
+                      sequence.extent.temporal.interval[0][0],
+                      'Do MMMM YYYY, HH:mm:ss'
+                    )
+                  }}</span
+                >
+                <span v-if="sequence.extent.temporal.interval[0][1]"
+                  >{{ $t('pages.sequence.duration_end') }}
+                  {{
+                    formatDate(
+                      sequence.extent.temporal.interval[0][1],
+                      'Do MMMM YYYY, HH:mm:ss'
+                    )
+                  }}</span
+                >
+                <span v-if="sequence.camera"
+                  >{{ $t('pages.sequence.camera') }} {{ sequence.camera }} -
+                  {{ sequence.cameraModel }}</span
+                >
+              </div>
             </div>
           </div>
         </div>
@@ -125,7 +137,7 @@
           </div>
           <div class="action-buttons">
             <Button
-              look="button--white background-white"
+              look="button--white background-white no-text"
               :icon="
                 picturesToDeleteStatus === 'hidden' ||
                 imagesSelectedHaveDifferentStatus
@@ -140,7 +152,7 @@
             />
             <div class="button-hidde">
               <Button
-                look="button--red background-white"
+                look="button--red background-white no-text"
                 icon="bi bi-trash"
                 :tooltip="$t('pages.sequence.delete_photo_tooltip')"
                 :disabled="!picturesToDelete.length"
@@ -195,12 +207,15 @@ import { useSequenceStore } from '@/store/sequence'
 import { storeToRefs } from 'pinia'
 import { useCookies } from 'vue3-cookies'
 import Button from '@/components/Button.vue'
+import Link from '@/components/Link.vue'
 import Toast from '@/components/Toast.vue'
 import Pagination from '@/components/Pagination.vue'
 import InputCheckbox from '@/components/InputCheckbox.vue'
 import Loader from '@/components/Loader.vue'
 import ImageItem from '@/components/ImageItem.vue'
+import EditText from '@/components/EditText.vue'
 import Viewer from '@/components/Viewer.vue'
+import type ViewerType from '@/components/Viewer.vue'
 import { durationCalc, formatDate } from '@/utils/dates'
 import {
   deleteACollectionItem,
@@ -227,7 +242,6 @@ import type {
   ResponseUserSequenceInterface
 } from './interfaces/MySequenceView'
 const { cookies } = useCookies()
-
 const { t } = useI18n()
 const route = useRoute()
 const router = useRouter()
@@ -243,10 +257,11 @@ let headerPanelIsOpen = ref<boolean>(true)
 let isShiftPressed = ref<boolean>(false)
 let itemSelected = ref<string>('')
 let isLoading = ref<boolean>(false)
+let isLoadingTitle = ref<boolean>(false)
 const collapseMenu = ref<HTMLDivElement>()
 const deleteAll = ref<HTMLDivElement>()
 const menuHeight = ref<string>()
-const viewerRef = ref()
+const viewerRef = ref<InstanceType<typeof ViewerType>>()
 
 onMounted(async () => {
   try {
@@ -267,37 +282,62 @@ onMounted(async () => {
     )
     pictures.value = collectionItems
     setHeightValue()
-    if (itemSelected.value.length || !collectionItemsReady[0]) return
+    if (
+      itemSelected.value.length ||
+      !getCurrentPicId(collectionItemsReady[0].id)
+    ) {
+      return
+    }
+    if (!viewerRef.value) return
     viewerRef.value.viewer._api.onceReady().then(() => {
+      if (!viewerRef.value) return
       viewerRef.value.viewer.goToPicture(
-        collectionItemsReady[0].id,
+        getCurrentPicId(collectionItemsReady[0].id),
         sequence.value?.id
       )
     })
-    itemSelected.value = collectionItemsReady[0].id
-    scrollIntoSelected(collectionItemsReady[0].id, pictures.value)
+    itemSelected.value = getCurrentPicId(collectionItemsReady[0].id)
+    if (!pictureExistInList(getCurrentPicId(collectionItemsReady[0].id))) {
+      await goToTheGoodPage(getCurrentPicId(collectionItemsReady[0].id))
+    }
+    scrollIntoSelected(
+      itemSelected.value,
+      pictures.value.map((e) => e.id)
+    )
   } catch (err) {
     console.log(err)
   }
 })
 
 watchEffect(async () => {
-  if (!viewerExist(viewerRef)) return
+  if (!viewerRef || !viewerRef.value || !viewerRef.value.viewer) return
   viewerRef.value.viewer.addEventListener(
     'picture-loaded',
     async (e: { detail: { picId: string } }): Promise<void> => {
-      if (itemSelected.value === e.detail.picId) return
-      if (!pictureExistInList(e.detail.picId)) {
-        await goToTheGoodPage(e.detail.picId)
+      if (!pictureExistInList(getCurrentPicId(e.detail.picId))) {
+        await goToTheGoodPage(getCurrentPicId(e.detail.picId))
       }
-      itemSelected.value = e.detail.picId
-      scrollIntoSelected(e.detail.picId, pictures.value)
+      itemSelected.value = getCurrentPicId(e.detail.picId)
+      scrollIntoSelected(
+        getCurrentPicId(e.detail.picId),
+        pictures.value.map((e) => e.id)
+      )
     }
   )
 })
-
-function viewerExist(viewerRef: any): boolean {
-  return !!(viewerRef && viewerRef.value && viewerRef.value.viewer)
+async function setNewSequenceTitle(value: string | null): Promise<void> {
+  isLoadingTitle.value = true
+  if (value && value.length > 0) {
+    await patchACollection(route.params.id, { title: value })
+    const fetchCollectionInfo = await fetchCollection(route.params.id)
+    formatSequenceFetched(fetchCollectionInfo.data)
+    isLoadingTitle.value = false
+  }
+}
+function getCurrentPicId(id: string): string {
+  const parseParams = new URLSearchParams(window.location.search)
+  const pict = parseParams.get('currentPic')
+  return pict && pict.length ? pict : id
 }
 
 const isSequenceOwner = computed((): boolean => {
@@ -414,7 +454,7 @@ async function patchCollection(): Promise<void> {
   let visible
   if (sequence.value?.status === 'ready') visible = 'false'
   else visible = 'true'
-  await patchACollection(route.params.id, visible)
+  await patchACollection(route.params.id, { visible: visible })
   const fetchCollectionInfo = await fetchCollection(route.params.id)
   formatSequenceFetched(fetchCollectionInfo.data)
   if (visible === 'false') hiddeAllPictures()
@@ -422,7 +462,7 @@ async function patchCollection(): Promise<void> {
     const { data } = await fetchCollectionItems(route.params.id, '?limit=100')
     pictures.value = data.features
   }
-  viewerRef.value.viewer.reloadVectorTiles()
+  if (viewerRef.value) viewerRef.value.viewer.reloadVectorTiles()
   isLoading.value = false
 }
 
@@ -430,13 +470,16 @@ function fullImagesToDelete(): ResponseUserPhotoInterface[] {
   return pictures.value.filter((el) => picturesToDelete.value.includes(el.id))
 }
 
-async function goToNextPage(value: string) {
+async function goToNextPage(value: string): Promise<void> {
   isLoading.value = true
   const { data } = await fetchCollectionItemsWithFullUrl(value)
   selfLink.value = data.links.filter((el) => el.rel === 'self')
   paginationLinks.value = formatPaginationItems(data.links)
   pictures.value = data.features
-  scrollIntoSelected(pictures.value[0].id, pictures.value)
+  scrollIntoSelected(
+    pictures.value[0].id,
+    pictures.value.map((e) => e.id)
+  )
   picturesToDelete.value = []
   isLoading.value = false
   setHeightValue()
@@ -485,16 +528,26 @@ function selectPhotoToDeleteOrPatch(
 async function selectImageAndMove(
   item: ResponseUserPhotoInterface
 ): Promise<void> {
+  const parseParams = new URLSearchParams(window.location.search)
+  const pict = parseParams.get('currentPic')
+  if (pict && pict.length) {
+    await router.push({ name: 'sequence', params: { id: route.params.id } })
+  }
   selectPhotoToDeleteOrPatch(item)
   if (
     picturesToDelete.value.length < 2 &&
     item.properties['geovisio:status'] === 'ready'
   ) {
-    const viewerMap = await viewerRef.value.viewer
-    viewerMap.goToPicture(item.id, sequence.value?.id)
+    if (viewerRef.value) {
+      const viewerMap = await viewerRef.value.viewer
+      viewerMap.goToPicture(item.id, sequence.value?.id)
+    }
     itemSelected.value = item.id
     await goToTheGoodPage(item.id)
-    scrollIntoSelected(item.id, pictures.value)
+    scrollIntoSelected(
+      item.id,
+      pictures.value.map((e) => e.id)
+    )
   }
 }
 
@@ -554,9 +607,14 @@ async function patchOrDeleteCollectionItems(
     const { data } = await fetchCollectionItems(route.params.id, '?limit=100')
     pictures.value = data.features
     isLoading.value = false
-    viewerRef.value.viewer.reloadVectorTiles()
-    viewerRef.value.viewer.goToPicture(pictures.value[0].id, route.params.id)
-    scrollIntoSelected(picturesToDelete.value[0], pictures.value)
+    if (viewerRef.value) {
+      viewerRef.value.viewer.reloadVectorTiles()
+      viewerRef.value.viewer.goToPicture(pictures.value[0].id, route.params.id)
+    }
+    scrollIntoSelected(
+      picturesToDelete.value[0],
+      pictures.value.map((e) => e.id)
+    )
     picturesToDelete.value = []
     sequenceStore.addToastText(t('general.success_text'), 'success')
   } catch (e) {
@@ -582,7 +640,12 @@ async function patchOrDeleteCollectionItems(
 .menu-right {
   width: 50vw;
   height: calc(100vh - #{toRem(8)});
-  overflow: hidden;
+  overflow: auto;
+}
+.back-button {
+  width: fit-content;
+  margin-left: toRem(2);
+  margin-top: toRem(2);
 }
 .wrapper-loader {
   display: flex;
@@ -590,8 +653,7 @@ async function patchOrDeleteCollectionItems(
   align-items: center;
 }
 .wrapper-title {
-  display: flex;
-  align-items: center;
+  min-width: 60%;
 }
 .wrapper-button {
   display: flex;
@@ -631,6 +693,7 @@ async function patchOrDeleteCollectionItems(
 }
 .title {
   @include text(h4);
+  text-align: left;
   color: var(--grey-dark);
   margin-right: toRem(1);
   margin-bottom: 0;
@@ -639,8 +702,9 @@ async function patchOrDeleteCollectionItems(
   display: none;
 }
 .menu-top {
+  position: relative;
   margin: toRem(2) toRem(2) 0;
-  padding: toRem(1) toRem(2);
+  padding: toRem(2.5) toRem(2) toRem(1);
   border: toRem(0.1) solid var(--grey);
   border-radius: toRem(0.5);
   background-color: var(--blue-semi);
@@ -648,35 +712,37 @@ async function patchOrDeleteCollectionItems(
 .header-menu {
   display: flex;
   justify-content: space-between;
+  margin-bottom: toRem(1);
 }
 .sequence-status {
-  @include text(xs-r-regular);
-  border-radius: toRem(3);
-  padding: toRem(0.5) toRem(1);
-  margin-right: toRem(1);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  @include text(xss-regular);
+  border-radius: toRem(0.4);
+  padding: toRem(0.3) toRem(0.8);
   color: var(--white);
   &.ready {
-    background-color: var(--orange);
-    border: toRem(0.1) solid var(--orange);
+    background-color: var(--green);
+    border: toRem(0.1) solid var(--green);
   }
   &.waiting-for-process {
     background-color: var(--yellow);
     border: toRem(0.1) solid var(--yellow);
   }
   &.hidden {
-    background-color: var(--blue-geovisio);
-    border: toRem(0.1) solid var(--blue-geovisio);
+    background-color: var(--red-pale);
+    border: toRem(0.1) solid var(--red-pale);
   }
 }
 .button-collapse {
   border: none;
   background-color: transparent;
   padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  margin-bottom: toRem(1);
+  position: absolute;
+  top: 0;
+  right: toRem(2);
 }
 .bi-plus,
 .bi-dash {
@@ -744,9 +810,8 @@ async function patchOrDeleteCollectionItems(
   justify-content: center;
 }
 @media (max-width: toRem(102.4)) {
-  .header-menu {
-    flex-direction: column;
-    align-items: flex-start;
+  .wrapper-title {
+    width: 90%;
   }
   .block-collapse {
     flex-direction: column;
@@ -795,9 +860,10 @@ async function patchOrDeleteCollectionItems(
     margin-bottom: toRem(1);
   }
   .button-collapse {
-    width: 100%;
     justify-content: space-between;
     margin-bottom: 0;
+    top: toRem(-1);
+    right: 0;
   }
   .photo-item {
     width: 100%;
@@ -854,6 +920,7 @@ async function patchOrDeleteCollectionItems(
   }
   .menu-top {
     width: 0vw;
+    padding: toRem(2.5) toRem(1);
   }
   .button-close {
     position: absolute;
@@ -869,9 +936,6 @@ async function patchOrDeleteCollectionItems(
     background-color: var(--white);
     border: toRem(0.1) solid var(--black);
   }
-  .menu-top {
-    padding: toRem(1);
-  }
   .menu-is-open {
     .menu-right {
       z-index: 3;

src/views/MySequencesView.vue

@@ -1,78 +1,129 @@
 <template>
   <main class="entry-page">
-    <section class="section-viewer">
-      <Viewer
-        v-if="collectionBbox.length"
-        :fetch-options="{
-          fetchOptions: {
-            credentials: 'include'
-          }
-        }"
-        :geovisio-viewer="false"
-        :user-id="getUserId"
-        :bbox="collectionBbox"
-        ref="viewerRef"
-      />
+    <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"
+        />
+        <div v-else class="no-map">
+          <img
+            src="@/assets/images/how-to-share-map.png"
+            :alt="$t('pages.share_pictures.alt_img_map')"
+            class="no-map-img"
+          />
+        </div>
+      </vue-draggable-resizable>
+      <div class="bbox-filter-button">
+        <Button
+          look="button--white background-white"
+          icon="bi bi-search"
+          :text="$t('pages.sequences.filter_bbox_button')"
+          @trigger="triggerBboxFilter"
+        />
+        <div class="reset-bbox">
+          <Button
+            v-if="filterBbox"
+            look="no-text-blue-dark"
+            icon="bi bi-x-circle-fill"
+            @trigger="triggerResetBbox"
+          />
+        </div>
+      </div>
     </section>
-    <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">
-          <div class="sequence-header-item"></div>
-          <div class="sequence-header-item">
+    <section
+      :style="{ width: `${listWidth}px` }"
+      class="section-sequence"
+      @scroll="handleScroll"
+    >
+      <div class="header-title">
+        <h1 id="sequenceTitle" class="sequences-title">
+          {{ $t('pages.sequences.title') }}
+        </h1>
+        <Button
+          v-if="
+            filterDate.start || filterDate.end || sortDate.sortBy || filterBbox
+          "
+          look="button-border--black"
+          :text="$t('pages.sequences.reset_filter_button')"
+          @trigger="resetAllFilter"
+        />
+      </div>
+      <div
+        ref="headerList"
+        :class="['sequence-item sequence-item-head', headerListClass]"
+        :style="{ width: `${listWidth}px`, borderRadius: '0px' }"
+      >
+        <div class="sequence-header-item"></div>
+        <div class="sequence-header-item">
+          <span>{{ $t('pages.sequences.sequence_name') }}</span>
+        </div>
+        <div class="sequence-header-item">
+          <span>{{ $t('pages.sequences.sequence_photos') }}</span>
+        </div>
+        <div class="sequence-header-item">
+          <Button
+            look="link--black no-text"
+            :icon="iconButtonSort('datetime')"
+            data-test="button-sort-date"
+            @trigger="sortList('datetime')"
+          />
+          <span class="title">{{ $t('pages.sequences.sequence_date') }}</span>
+          <div class="button-filter">
             <Button
-              :text="$t('pages.sequences.sequence_name')"
-              look="link--grey"
-              icon="bi bi-arrow-down-up"
-              data-test="button-sort-title"
-              @trigger="sortAlpha('title')"
+              :look="filterClass"
+              :icon="iconButtonFilter('datetime')"
+              :tooltip="$t('pages.sequences.sequence_date_tooltip')"
+              @trigger="displayModal('datetime')"
             />
           </div>
-          <div class="sequence-header-item">
+        </div>
+        <div class="sequence-header-item">
+          <Button
+            look="link--black no-text"
+            :icon="iconButtonSort('created')"
+            data-test="button-sort-date"
+            @trigger="sortList('created')"
+          />
+          <span class="title">{{
+            $t('pages.sequences.sequence_creation')
+          }}</span>
+          <div class="button-filter">
             <Button
-              :text="$t('pages.sequences.sequence_photos')"
-              look="link--grey"
-              icon="bi bi-arrow-down-up"
-              data-test="button-sort-number"
-              @trigger="sortNum('num')"
+              :look="filterClass"
+              :icon="iconButtonFilter('created')"
+              :tooltip="$t('pages.sequences.sequence_creation_tooltip')"
+              @trigger="displayModal('created')"
             />
           </div>
-          <div class="sequence-header-item">
-            <Button
-              :text="$t('pages.sequences.sequence_date')"
-              look="link--grey"
-              icon="bi bi-arrow-down-up"
-              data-test="button-sort-date"
-              @trigger="sortNum('date')"
-            />
-          </div>
-          <div class="sequence-header-item">
-            <Button
-              :text="$t('pages.sequences.sequence_creation')"
-              look="link--grey"
-              icon="bi bi-arrow-down-up"
-              data-test="button-sort-date"
-              @trigger="sortNum('date', 'created')"
-            />
-          </div>
-          <div class="sequence-header-item">
-            <Button
-              :text="$t('pages.sequences.sequence_status')"
-              look="link--grey"
-              icon="bi bi-arrow-down-up"
-              data-test="button-sort-date"
-              @trigger="sortAlpha('geovisio:status')"
-            />
-          </div>
-        </li>
+        </div>
+        <div class="sequence-header-item">
+          <span>{{ $t('pages.sequences.sequence_status') }}</span>
+        </div>
+      </div>
+      <ul v-if="!isLoading" ref="list" class="sequence-list">
         <li
           v-if="userSequences.length"
-          v-for="(item, i) in userSequences"
-          :id="`el-list${i}`"
-          :class="[
-            'sequence-item',
-            item.id === seqId ? 'button-item-hover' : ''
-          ]"
+          v-for="item in userSequences"
+          :class="['sequence-item', { 'sequence-selected': item.id === seqId }]"
           @mouseover="goToSequence(item)"
         >
           <router-link
@@ -81,27 +132,26 @@
               name: 'sequence',
               params: { id: item.id }
             }"
-            @mouseover.stop
           >
             <div class="wrapper-thumb">
               <img
                 v-if="item['stats:items'].count > 0"
-                :src="`${item.href}/thumb.jpg`"
                 loading="lazy"
+                :src="`${item.href}/thumb.jpg`"
                 alt=""
                 class="thumb"
               />
               <div class="wrapper-thumb-hover">
                 <img
                   v-if="item['stats:items'].count > 0"
-                  :src="`${item.href}/thumb.jpg`"
                   loading="lazy"
+                  :src="`${item.href}/thumb.jpg`"
                   alt=""
                   class="thumb-hover"
                 />
               </div>
             </div>
-            <div>
+            <div class="sequence-title">
               <span>
                 {{ item.title }}
               </span>
@@ -117,14 +167,14 @@
                 {{
                   formatDate(
                     item.extent.temporal.interval[0][0],
-                    'Do MMMM YYYY HH:mm:ss'
+                    'Do MMM YYYY HH:mm:ss'
                   )
                 }}
               </span>
             </div>
             <div>
               <span>
-                {{ formatDate(item.created, 'Do MMMM YYYY HH:mm:ss') }}
+                {{ formatDate(item.created, 'Do MMM YYYY HH:mm:ss') }}
               </span>
             </div>
             <div>
@@ -133,7 +183,31 @@
               }}</span>
             </div>
           </router-link>
+          <div class="wrapper-button">
+            <Button
+              :text="sequenceButtonText(item['geovisio:status'])"
+              look="link--blue row-reverse"
+              :icon="
+                item['geovisio:status'] === 'ready'
+                  ? 'bi bi-eye-slash'
+                  : 'bi bi-eye'
+              "
+              class="disable-button"
+              @trigger="patchCollection(item)"
+            />
+            <Button
+              :text="$t('pages.sequences.delete_button')"
+              look="link--red row-reverse"
+              icon="bi bi-trash"
+              @trigger="deleteCollection(item)"
+            />
+          </div>
         </li>
+        <div v-else-if="!userSequences.length && noSequencesFound">
+          <p class="no-sequence-found">
+            {{ $t('pages.sequences.no_sequence_found') }}
+          </p>
+        </div>
         <div v-else class="no-sequence">
           <p class="no-sequence-text">
             {{ $t('pages.sequences.no_sequences_text') }}
@@ -148,146 +222,446 @@
       <div v-else class="loader">
         <Loader look="sm" :is-loaded="false" />
       </div>
+      <div class="entry-pagination">
+        <Pagination
+          v-for="item in paginationLinks"
+          :type="item.rel"
+          :href="item.href"
+          :self-link="selfLink[0]"
+          @trigger="goToNextPage"
+        />
+      </div>
+      <Toast :text="toastText" :look="toastLook" @trigger="toastText = ''" />
     </section>
-    <Toast :text="toastText" :look="toastLook" @trigger="toastText = ''" />
+    <Modal ref="modal" :title="modalTitle">
+      <template v-slot:body>
+        <CalendarFilter
+          v-if="calendarType === filterDate.type"
+          :type="calendarType"
+          :range-selected="{
+            start: filterDate.start,
+            end: filterDate.end,
+            type: filterDate.type
+          }"
+          @triggerCloseModal="closeModal"
+          @triggerDate="updateFilters"
+        />
+        <CalendarFilter
+          v-else
+          :type="calendarType"
+          :range-selected="{ start: null, end: null, type: '' }"
+          @triggerCloseModal="closeModal"
+          @triggerDate="updateFilters"
+        />
+      </template>
+    </Modal>
   </main>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, watchEffect, computed } from 'vue'
+import { onMounted, ref, watchEffect, computed, nextTick } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useSequenceStore } from '@/store/sequence'
 import { storeToRefs } from 'pinia'
-import { scrollIntoSelected } from '@/views/utils/sequence/index'
+import {
+  scrollIntoSelected,
+  formatPaginationItems
+} from '@/views/utils/sequence/index'
 import { useCookies } from 'vue3-cookies'
 import axios from 'axios'
 import Viewer from '@/components/Viewer.vue'
+import type ViewerType from '@/components/Viewer.vue'
 import Button from '@/components/Button.vue'
 import Link from '@/components/Link.vue'
 import Toast from '@/components/Toast.vue'
 import Loader from '@/components/Loader.vue'
-import type {
-  SequenceLinkInterface,
-  ExtentSequenceLinkInterface
-} from './interfaces/MySequencesView'
+import Modal from '@/components/Modal.vue'
+import CalendarFilter from '@/components/filters/CalendarFilter.vue'
+import Pagination from '@/components/Pagination.vue'
+import type { SequenceLinkInterface } from './interfaces/MySequencesView'
+import type { ResponseUserPhotoLinksInterface } from './interfaces/MySequenceView'
 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)
-
+interface PositionInterface {
+  bottom: number
+  top: number
+  right: number
+  left: number
+  y: number
+  x: number
+}
 let userSequences = ref<SequenceLinkInterface[]>([])
+let paginationLinks = ref<ResponseUserPhotoLinksInterface[] | []>([])
+let selfLink = ref<ResponseUserPhotoLinksInterface[] | []>([])
 let collectionBbox = ref<number[]>([])
-let isSorted = ref<boolean>(false)
 let isLoading = ref<boolean>(false)
+let sortedBy = ref<string>('')
+let isSorted = ref<boolean>(false)
+let noSequencesFound = ref<boolean>(false)
 let seqId = ref<string>('')
-const viewerRef = ref<any>(null)
+let calendarType = ref<string>('')
+let width = ref<number>(0)
+let mapWidth = ref<number>(window.innerWidth / 3)
+let listWidth = ref<number>(window.innerWidth / 1.5)
+let filterDate = ref<{
+  end: string | null
+  start: string | null
+  type: string
+}>({
+  start: null,
+  end: null,
+  type: ''
+})
+let filterBbox = ref<number[] | null>(null)
+let sortDate = ref<{ sortBy: string | null }>({ sortBy: null })
+let uri = ref<string>('api/users/me/collection?limit=50')
+let modal = ref()
+const windowWidth = ref<number>(window.innerWidth)
+const windowHeight = ref<number>(window.innerHeight - 80)
+const viewerRef = ref<InstanceType<typeof ViewerType>>()
+const headerList = ref<HTMLDivElement | null>(null)
+const list = ref<HTMLDListElement | null>(null)
+const listPos = ref<PositionInterface | null>(null)
+const headerLisPos = ref<PositionInterface | null>(null)
 
+async function resetAllFilter(): Promise<void> {
+  filterDate.value = { start: null, end: null, type: '' }
+  sortDate.value = { sortBy: null }
+  filterBbox.value = null
+  formatUri()
+  await updateSequence(uri.value)
+}
+async function triggerResetBbox(): Promise<void> {
+  filterBbox.value = null
+  formatUri()
+  await updateSequence(uri.value)
+}
+function triggerBboxFilter(): void {
+  if (viewerRef.value) {
+    isLoading.value = true
+    const currentBbox = [
+      viewerRef.value.viewer._map.getBounds()._ne.lng,
+      viewerRef.value.viewer._map.getBounds()._ne.lat,
+      viewerRef.value.viewer._map.getBounds()._sw.lng,
+      viewerRef.value.viewer._map.getBounds()._sw.lat
+    ]
+    filterBbox.value = currentBbox
+    formatUri()
+    updateSequence(uri.value)
+  }
+}
+function displayModal(type: string): void {
+  calendarType.value = type
+  if (modal.value) modal.value.show()
+}
+function closeModal(): void {
+  if (modal.value) modal.value.close()
+}
+function iconButtonSort(type: string): string {
+  if (isSorted.value && sortedBy.value === type) return 'bi bi-sort-numeric-up'
+  return 'bi bi-sort-numeric-down'
+}
+function iconButtonFilter(type: string): string {
+  if (
+    filterDate.value.start &&
+    filterDate.value.end &&
+    filterDate.value.type === type
+  ) {
+    return 'bi bi-funnel-fill'
+  }
+  return 'bi bi-funnel'
+}
+async function fetchAndFormatSequence(): Promise<void> {
+  const { data } = await axios.get('api/users/me/collection?limit=50')
+  collectionBbox.value = data.extent.spatial.bbox[0]
+  userSequences.value = getLinkByRel(data.links, 'child')
+}
+
+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: visible })
+  await fetchAndFormatSequence()
+  if (viewerRef.value) 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()
+    if (viewerRef.value) 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')
   return t('pages.sequences.sequence_waiting')
 }
-function sortAlpha<TKey extends keyof SequenceLinkInterface>(key: TKey): void {
-  const sorted = userSequences.value.sort(
-    (
-      a: { [K in TKey]: SequenceLinkInterface[TKey] },
-      b: { [K in TKey]: SequenceLinkInterface[TKey] }
-    ) => {
-      if (a[key] < b[key]) return !isSorted.value ? -1 : 1
-      if (a[key] > b[key]) return !isSorted.value ? 1 : -1
-      return 0
-    }
-  )
-  isSorted.value = !isSorted.value
-  userSequences.value = sorted
+function sequenceButtonText(status: string): string {
+  if (status === 'hidden') return t('pages.sequences.show_button')
+  return t('pages.sequences.hide_button')
 }
-function sortNum(type: string, dateToSort?: string): void {
-  let aa, bb: number
-  const sorted = userSequences.value.sort(
-    (a: ExtentSequenceLinkInterface, b: ExtentSequenceLinkInterface) => {
-      aa = new Date(a.extent.temporal.interval[0][0]).getTime()
-      bb = new Date(b.extent.temporal.interval[0][0]).getTime()
-      if (dateToSort === 'created') {
-        aa = new Date(a.created).getTime()
-        bb = new Date(b.created).getTime()
-      }
-      if (type === 'num') {
-        aa = Number(a['stats:items'].count)
-        bb = Number(b['stats:items'].count)
-      }
-      if (aa < bb) return !isSorted.value ? -1 : 1
-      if (aa > bb) return !isSorted.value ? 1 : -1
-      return 0
-    }
-  )
-  isSorted.value = !isSorted.value
-  userSequences.value = sorted
+function onResizeMap(width: any): void {
+  if (width && collectionBbox.value.length) {
+    width.value = width
+    mapWidth.value = width.value.width
+    listWidth.value = window.innerWidth - width.value.width
+  }
 }
-function goToSequence(sequence: SequenceLinkInterface) {
+const handleScroll = async () => {
+  await nextTick()
+  if (headerList.value && headerList.value.getBoundingClientRect()) {
+    headerLisPos.value = headerList.value.getBoundingClientRect()
+  }
+  if (list.value && list.value.getBoundingClientRect()) {
+    listPos.value = list.value.getBoundingClientRect()
+  }
+}
+async function updateSequence(uri: string) {
+  try {
+    const { data } = await axios.get(uri)
+    selfLink.value = getLinkByRel(data.links, 'self')
+    paginationLinks.value = formatPaginationItems(data.links)
+    userSequences.value = getLinkByRel(data.links, 'child')
+    scrollToElement()
+    isLoading.value = false
+    if (!userSequences.value.length) noSequencesFound.value = true
+  } catch (e) {
+    userSequences.value = []
+    noSequencesFound.value = true
+    isLoading.value = false
+  }
+}
+async function sortList(dateToSort: string): Promise<void> {
+  isLoading.value = true
+  sortedBy.value = dateToSort
+  let sortBy = `+${dateToSort}`
+  if (isSorted.value) sortBy = `-${dateToSort}`
+  sortDate.value.sortBy = encodeURIComponent(sortBy)
+  formatUri()
+  await updateSequence(uri.value)
+  isSorted.value = !isSorted.value
+}
+
+function bboxIsInsideOther(mainBbox: number[], bboxInside: number[]): boolean {
+  return (
+    bboxInside[0] <= mainBbox[0] &&
+    bboxInside[1] <= mainBbox[1] &&
+    bboxInside[2] >= mainBbox[2] &&
+    bboxInside[3] >= mainBbox[3]
+  )
+}
+function goToSequence(sequence: SequenceLinkInterface): void {
+  if (!viewerRef.value) return
+  const currentBbox = [
+    viewerRef.value.viewer._map.getBounds()._ne.lng,
+    viewerRef.value.viewer._map.getBounds()._ne.lat,
+    viewerRef.value.viewer._map.getBounds()._sw.lng,
+    viewerRef.value.viewer._map.getBounds()._sw.lat
+  ]
+  if (
+    seqId.value === sequence.id &&
+    bboxIsInsideOther(currentBbox, sequence.extent.spatial.bbox[0])
+  ) {
+    return
+  }
   seqId.value = sequence.id
   viewerRef.value.viewer.select(seqId.value)
+  viewerRef.value.viewer._map.flyTo({
+    center: [
+      sequence.extent.spatial.bbox[0][0],
+      sequence.extent.spatial.bbox[0][1]
+    ],
+    duration: 0
+  })
 }
-function getRelChild(sequences: SequenceLinkInterface[]) {
-  return sequences.filter((el: SequenceLinkInterface) => el.rel === 'child')
+function getLinkByRel(
+  sequences: SequenceLinkInterface[],
+  rel: string
+): SequenceLinkInterface[] {
+  return sequences.filter((el: SequenceLinkInterface) => el.rel === rel)
 }
-const getUserId = computed<string>(() => cookies.get('user_id'))
+function scrollToElement(): void {
+  const elementTarget = document.querySelector('#sequenceTitle')
+  if (elementTarget) elementTarget.scrollIntoView({ behavior: 'smooth' })
+}
+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')
+  }
+  return t('pages.sequences.filter_date_upload_title')
+})
+const getUserId = computed<string>((): string => cookies.get('user_id'))
+const headerListClass = computed<string>((): string => {
+  if (headerLisPos.value && listPos.value) {
+    const classCondition = headerLisPos.value.y != 0 && listPos.value.top < 174
+    return classCondition ? 'item-head-fixed' : ''
+  }
+  return ''
+})
 onMounted(async () => {
   isLoading.value = true
   try {
-    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]
-    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
+    const { data } = await axios.get('api/users/me/collection?limit=50')
+    selfLink.value = getLinkByRel(data.links, 'self')
+    paginationLinks.value = formatPaginationItems(data.links)
+    userSequences.value = getLinkByRel(data.links, 'child')
+    if (userSequences.value[0]) {
+      collectionBbox.value = [
+        userSequences.value[0].extent.spatial.bbox[0][0],
+        userSequences.value[0].extent.spatial.bbox[0][1],
+        userSequences.value[0].extent.spatial.bbox[0][2],
+        userSequences.value[0].extent.spatial.bbox[0][3]
+      ]
+    }
     isLoading.value = false
   } catch (err) {
     isLoading.value = false
     console.log(err)
   }
 })
+function formatUri(): void {
+  let params: string[] = []
+  if (filterBbox && filterBbox.value) {
+    const bboxFilter = `${filterBbox.value[0]},${filterBbox.value[1]},${filterBbox.value[2]},${filterBbox.value[3]}`
+    params = [...params, `&bbox=${bboxFilter}`]
+  }
+  if (filterDate.value.start && filterDate.value.end) {
+    const rangeFilter = encodeURIComponent(
+      `${filterDate.value.type} BETWEEN '${filterDate.value.start}' AND '${filterDate.value.end}'`
+    )
+    params = [...params, `&filter=${rangeFilter}`]
+  }
+  if (sortDate.value.sortBy) {
+    params = [...params, `&sortby=${sortDate.value.sortBy}`]
+  }
+  if (params.length) {
+    const constructParams = params.join('')
+    uri.value = `api/users/me/collection?limit=50${constructParams}`
+  } else uri.value = 'api/users/me/collection?limit=50'
+}
+async function updateFilters(value: {
+  start: null
+  end: null
+  type: ''
+}): Promise<void> {
+  isLoading.value = true
+  noSequencesFound.value = false
+  filterDate.value = { start: value.start, end: value.end, type: value.type }
+  formatUri()
+  await updateSequence(uri.value)
+}
 watchEffect(() => {
   if (viewerRef.value && viewerRef.value.viewer) {
     viewerRef.value.viewer.addEventListener(
-      'hover',
+      'select',
       (e: { detail: { seqId: string } }) => {
+        if (seqId.value === e.detail.seqId) return
         seqId.value = e.detail.seqId
-        scrollIntoSelected(e.detail.seqId, userSequences.value)
-        viewerRef.value.viewer.select(e.detail.seqId)
+        scrollIntoSelected(
+          e.detail.seqId,
+          userSequences.value.map((e) => e.id)
+        )
+        if (viewerRef.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;
+}
+.bbox-filter-button {
+  padding: toRem(2);
+  width: fit-content;
+  height: fit-content;
+  position: relative;
+}
+.reset-bbox {
+  position: absolute;
+  right: 0;
+  top: toRem(0.5);
+}
+.no-map {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  background-color: var(--blue-pale);
 }
 .section-sequence {
   overflow-y: auto;
-  width: 60%;
+  overflow-x: hidden;
   height: 100%;
+  position: relative;
+}
+.header-title {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  position: relative;
+  margin: toRem(3);
 }
 .sequences-title {
   @include text(h1);
   color: var(--blue-dark);
-  margin-bottom: toRem(5);
-  margin-top: toRem(3);
-  margin-left: toRem(3);
+}
+.date-filter-title {
+  @include text(s-r-regular);
+}
+.wrapper-date-filter-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 .sequence-list {
   box-shadow: 0px 2px 30px 0px #0000000f;
@@ -295,37 +669,51 @@ 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);
-    border-bottom: toRem(0.1) solid var(--grey);
-    border-radius: toRem(2) toRem(2) 0rem 0rem;
-    background-color: var(--white);
-  }
+  padding-right: toRem(2);
+  padding-left: toRem(2);
   &:nth-child(2n) {
     background-color: var(--white);
   }
+  &:hover,
+  &.sequence-selected {
+    background-color: var(--blue-semi);
+  }
 }
-.button-item-hover {
-  background-color: var(--blue);
-  &:nth-child(2n) {
-    background-color: var(--blue);
-  }
-  .button-item {
-    & > *,
-    & > :nth-child(2) {
-      color: var(--white);
-    }
+.wrapper-button {
+  position: absolute;
+  right: toRem(1);
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+  .button--white:first-child {
+    margin-bottom: toRem(1);
   }
 }
+.item-head-fixed {
+  position: fixed;
+  top: toRem(8);
+  width: 100%;
+  z-index: 2;
+}
+.sequence-item-head {
+  margin-bottom: toRem(1);
+  padding: toRem(1) toRem(2);
+  border-bottom: toRem(0.1) solid var(--grey);
+  border-radius: toRem(2) toRem(2) 0rem 0rem;
+  background-color: var(--white);
+}
 .sequence-item-head:hover {
-  background-color: initial;
+  background-color: var(--white);
   color: initial;
 }
 .wrapper-title {
@@ -344,6 +732,9 @@ watchEffect(() => {
   height: toRem(15);
   z-index: 1;
 }
+.sequence-title {
+  text-decoration: underline;
+}
 .ready {
   color: var(--green);
 }
@@ -400,8 +791,10 @@ watchEffect(() => {
   margin-right: toRem(0.5);
 }
 .sequence-header-item {
+  display: flex;
+  align-items: center;
   width: calc(31% - #{toRem(4.75)});
-  margin-left: toRem(-1);
+  color: var(--grey-semi-dark);
   &:first-child {
     margin-right: toRem(2);
   }
@@ -411,6 +804,15 @@ watchEffect(() => {
   &:nth-child(3) {
     width: toRem(13);
   }
+  .title {
+    color: var(--black);
+  }
+}
+.button-filter {
+  margin-left: toRem(-1);
+  .icon {
+    font-size: toRem(1);
+  }
 }
 .no-sequence {
   padding-top: toRem(2);
@@ -426,18 +828,28 @@ watchEffect(() => {
 .no-sequence-text {
   margin-bottom: toRem(4);
 }
+.no-sequence-found {
+  text-align: center;
+  padding: toRem(2);
+}
 .loader {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
-  margin-top: toRem(20);
 }
 .ay11-link {
   padding: toRem(2);
   margin-left: auto;
   width: fit-content;
 }
+.entry-pagination {
+  margin-top: toRem(4);
+  margin-bottom: toRem(4);
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
 @media (max-width: toRem(102.4)) {
   .section-viewer {
     width: 30%;
@@ -457,18 +869,29 @@ watchEffect(() => {
     display: none;
   }
   .section-sequence {
-    width: 100%;
+    width: 100% !important;
   }
-  .button-item,
-  .sequence-item:first-child {
-    padding-right: toRem(1);
-    padding-left: toRem(1);
+  .sequence-item-head {
+    width: 100% !important;
+    flex-direction: row !important;
+    padding-right: 0;
+    padding-left: 0;
+  }
+  .sequence-header-item {
+    width: 50%;
+    justify-content: center;
+    &:first-child,
+    &:last-child,
+    &:nth-child(2),
+    &:nth-child(3) {
+      display: none;
+    }
   }
-}
-@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%;
@@ -477,12 +900,23 @@ 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 {
+    flex-direction: row;
+    position: relative;
+    right: 0;
+    bottom: 0;
+    justify-content: center;
+    margin-top: toRem(1);
+    margin-bottom: 0;
+    .button--white:first-child {
+      margin-right: toRem(1);
+      margin-bottom: 0;
+    }
   }
 }
 </style>

src/views/UploadPicturesView.vue

@@ -9,7 +9,7 @@
         <template v-slot:cross>
           <Button
             icon="bi bi-x-lg"
-            look="no-text"
+            look="no-text-blue-dark"
             @trigger="informationCardDisplayed = false"
           />
         </template>
@@ -35,6 +35,18 @@
           :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>
+        <div class="wrapper-edit-text">
+          <EditText
+            :default-text="newSequenceTitle || sequenceTitle"
+            :is-loading="isLoading"
+            :is-loaded="isLoaded"
+            @triggerNewText="setNewSequenceTitle"
+          />
+        </div>
         <form>
           <div class="wrapper-form">
             <InputUpload
@@ -53,6 +65,13 @@
                 class="uploading-img"
               />
               <span>{{ $t('pages.upload.uploading_process') }}</span>
+              <div class="cancel-button">
+                <Button
+                  :text="$t('pages.upload.uploading_cancel')"
+                  look="button--red"
+                  @trigger="cancelUpload"
+                />
+              </div>
               <span class="loader-text-warning">{{
                 $t('pages.upload.leave_message')
               }}</span>
@@ -80,16 +99,31 @@
       v-if="uploadedSequence && uploadedSequence.picturesOnError"
       ref="modal"
       :upload-errors="uploadedSequence.picturesOnError"
-    />
+      :title="$t('pages.upload.modal_error_title')"
+    >
+      <template v-slot:body>
+        <ul>
+          <li
+            v-for="item in uploadedSequence.picturesOnError"
+            class="error-item"
+          >
+            <span>{{ item.name }} - </span>
+            <span>{{ item.details.error }}</span>
+          </li>
+        </ul>
+      </template>
+    </Modal>
   </main>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, watch, onUnmounted } from 'vue'
+import { ref, computed, watch, onUnmounted, onMounted } 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'
@@ -102,7 +136,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'
+import { deleteACollection } from '@/views/utils/sequence/request'
 
 const { authConf } = authConfig()
 const { t } = useI18n()
@@ -115,6 +149,8 @@ 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, () => {
@@ -128,11 +164,16 @@ watch(isLoading, () => {
     window.onbeforeunload = null
   }
 })
+onMounted(() => {
+  setInterval(() => {
+    sequenceTitle.value = formatSequenceTitle()
+  }, 1000)
+})
 onUnmounted(() => {
   window.onbeforeunload = null
 })
 onBeforeRouteLeave((to, from, next) => {
-  if (isLoading.value) {
+  if (!isLoaded.value && isLoading.value) {
     const answer = window.confirm(t('pages.upload.leave_message'))
     if (answer) return next()
     return next(false)
@@ -145,7 +186,15 @@ 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++) {
@@ -174,6 +223,16 @@ function addPictures(value: FileList): void {
   loadPercentage.value = '0%'
   uploadPicture()
 }
+async function cancelUpload(): Promise<void> {
+  const answer = window.confirm(t('pages.upload.cancel_message'))
+  if (answer) {
+    pictures.value = []
+    isLoading.value = false
+    if (uploadedSequence.value) {
+      await deleteACollection(uploadedSequence.value.id)
+    }
+  }
+}
 async function uploadPicture(): Promise<void> {
   if (!pictures.value || !pictures.value.length) {
     return
@@ -183,14 +242,12 @@ async function uploadPicture(): Promise<void> {
   picturesToUploadSizeText()
   uploadedSequence.value = null
   const picturesToUpload = [...pictures.value]
-
-  const sequenceTitle = `${t('pages.upload.sequence_title')}${formatDate(
-    new Date(),
-    'Do MMMM YYYY, hh:mm:ss'
-  )}`
-  const { data } = await createASequence(sequenceTitle)
+  const title = newSequenceTitle.value
+    ? newSequenceTitle.value
+    : sequenceTitle.value
+  const { data } = await createASequence(title)
   uploadedSequence.value = {
-    title: sequenceTitle,
+    title: title,
     id: data.id,
     pictures: [],
     picturesOnError: [],
@@ -199,13 +256,16 @@ async function uploadPicture(): Promise<void> {
   }
   let i = 0
   for (let el of picturesToUpload) {
+    if (pictures.value.length === 0) {
+      break
+    }
     const body = new FormData()
     i++
     body.append('position', i.toString())
     body.append('picture', el)
     try {
       const pictureUploaded = await createAPictureToASequence(data.id, body)
-      const pictures = { ...pictureUploaded.data, name: el.name }
+      const pictures = { ...pictureUploaded, name: el.name }
       picturesUploadingSize.value = picturesUploadingSize.value + el.size
       uploadedSequence.value.pictures = [
         ...uploadedSequence.value.pictures,
@@ -216,6 +276,7 @@ async function uploadPicture(): Promise<void> {
       picturesUploadingSize.value = picturesUploadingSize.value + el.size
       const picturesOnError = {
         message: err.response.data.message,
+        details: { error: err.response.data.details.error },
         name: el.name
       }
       uploadedSequence.value.picturesOnError = [
@@ -228,6 +289,8 @@ async function uploadPicture(): Promise<void> {
   isLoaded.value = true
   pictures.value = []
   picturesCount.value = 0
+  newSequenceTitle.value = null
+  sequenceTitle.value = formatSequenceTitle()
 }
 </script>
 
@@ -240,7 +303,6 @@ h3 {
 .entry-page {
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
   min-height: calc(100vh - #{toRem(13.82)});
   background-color: var(--grey);
@@ -248,7 +310,7 @@ h3 {
   color: var(--grey-dark);
 }
 .logged {
-  height: calc(100vh - #{toRem(8)});
+  min-height: calc(100vh - #{toRem(8)});
 }
 .section {
   width: 100%;
@@ -273,6 +335,12 @@ h3 {
     margin-right: toRem(2);
   }
 }
+.error-item {
+  padding: toRem(1);
+  &:nth-child(odd) {
+    background-color: var(--grey);
+  }
+}
 .subtitle {
   @include text(h3);
   color: var(--blue-dark);
@@ -280,6 +348,9 @@ h3 {
 .import-text {
   @include text(m-r-regular);
 }
+.wrapper-edit-text {
+  margin-bottom: toRem(2);
+}
 .entry-license {
   margin-bottom: toRem(1);
 }
@@ -298,10 +369,13 @@ h3 {
 .uploading-img {
   height: toRem(20);
 }
+.cancel-button {
+  margin-top: toRem(1);
+}
 .loader-text-warning {
   text-align: center;
   @include text(s-r-regular);
-  color: var(--orange);
+  color: var(--red-pale);
   margin-top: toRem(1);
   width: toRem(31);
 }
@@ -313,6 +387,9 @@ h3 {
   align-items: center;
 }
 @media (max-width: toRem(76.8)) {
+  .section {
+    display: none;
+  }
   .entry-page {
     padding-top: toRem(15);
   }

src/views/interfaces/HomeView.ts

@@ -0,0 +1,5 @@
+export interface ExtendedHtmlEl extends HTMLElement {
+  mozRequestFullScreen?: () => void
+  webkitRequestFullScreen?: () => void
+  msRequestFullscreen?: () => void
+}

src/views/interfaces/MySequenceView.ts

@@ -39,5 +39,5 @@ export interface ResponseUserSequenceInterface extends UserSequenceInterface {
 
 export interface CheckboxInterface {
   isChecked: boolean
-  isIndeterminate: boolean
+  isIndeterminate?: boolean
 }

src/views/interfaces/MySequencesView.ts

@@ -5,14 +5,7 @@ export interface SequenceLinkInterface {
   title: string
   type: string
   created: Date
-  extent: { temporal: { interval: [Date[]] } }
+  extent: { temporal: { interval: [Date[]] }; spatial: { bbox: [number[]] } }
   ['stats:items']: { count: number }
   ['geovisio:status']: string
 }
-
-export interface ExtentSequenceLinkInterface {
-  extent: { temporal: { interval: [Date[]] } }
-  ['stats:items']: { count: number }
-  title: string
-  created: Date
-}

src/views/interfaces/UploadPicturesView.ts

@@ -8,5 +8,6 @@ export interface SequenceInterface {
 }
 export interface uploadErrorInterface {
   message: string
+  details: { error: string }
   name: string
 }

src/views/interfaces/common/index.ts

@@ -1,11 +1,18 @@
 export interface MapInterface {
   startWide?: boolean
+  users?: string[]
   maxZoom?: number
   minZoom?: number
   style?: object | string
   zoom?: number
   center?: number[]
   bounds?: number[]
+  raster?: {
+    type: string
+    tiles: string[]
+    attribution: string
+    tileSize: number
+  }
 }
 
 export interface ViewerInterface {

src/views/utils/home/index.ts

@@ -0,0 +1,43 @@
+import type { ExtendedHtmlEl } from '@/views/interfaces/HomeView'
+interface ExtendedDocument extends Document {
+  webkitFullscreenElement?: Element
+  mozFullScreenElement?: Element
+  msFullscreenElement?: Element
+  mozCancelFullScreen?: () => void
+  webkitExitFullscreen?: () => void
+  msExitFullscreen?: () => void
+}
+export function toggleFullscreen(element: ExtendedHtmlEl) {
+  const documentWithExtensions = document as ExtendedDocument
+  const isInFullScreen =
+    (documentWithExtensions.fullscreenElement &&
+      documentWithExtensions.fullscreenElement !== null) ||
+    (documentWithExtensions.webkitFullscreenElement &&
+      documentWithExtensions.webkitFullscreenElement !== null) ||
+    (documentWithExtensions.mozFullScreenElement &&
+      documentWithExtensions.mozFullScreenElement !== null) ||
+    (documentWithExtensions.msFullscreenElement &&
+      documentWithExtensions.msFullscreenElement !== null)
+
+  if (!isInFullScreen) {
+    if (element.requestFullscreen) {
+      element.requestFullscreen()
+    } else if (element.mozRequestFullScreen) {
+      element.mozRequestFullScreen()
+    } else if (element.webkitRequestFullScreen) {
+      element.webkitRequestFullScreen()
+    } else if (element.msRequestFullscreen) {
+      element.msRequestFullscreen()
+    }
+  } else {
+    if (documentWithExtensions.exitFullscreen) {
+      documentWithExtensions.exitFullscreen()
+    } else if (documentWithExtensions.webkitExitFullscreen) {
+      documentWithExtensions.webkitExitFullscreen()
+    } else if (documentWithExtensions.mozCancelFullScreen) {
+      documentWithExtensions.mozCancelFullScreen()
+    } else if (documentWithExtensions.msExitFullscreen) {
+      documentWithExtensions.msExitFullscreen()
+    }
+  }
+}

src/views/utils/sequence/index.ts

@@ -7,9 +7,8 @@ function imageStatus(imageStatus: string, sequenceStatus: string): string {
   if (sequenceStatus === 'hidden') return sequenceStatus
   return imageStatus
 }
-//TODO REMOVE ANY
-function scrollIntoSelected(id: string, userPhotos: any): void {
-  const itemPosition = userPhotos.map((el: any) => el.id).indexOf(id)
+function scrollIntoSelected(id: string, userPhotos: string[]): void {
+  const itemPosition = userPhotos.map((el: string) => el).indexOf(id)
   const elementTarget = document.querySelector(`#el-list${itemPosition}`)
   if (elementTarget) elementTarget.scrollIntoView({ behavior: 'smooth' })
 }

src/views/utils/sequence/request.ts

@@ -11,9 +11,9 @@ function deleteACollection(collectionId: string | string[]): Promise<unknown> {
 
 function patchACollection(
   collectionId: string | string[],
-  visible: string
+  fieldObject: object
 ): Promise<unknown> {
-  return axios.patch(`api/collections/${collectionId}`, { visible: visible })
+  return axios.patch(`api/collections/${collectionId}`, fieldObject)
 }
 
 function deleteACollectionItem(

src/views/utils/upload/request.ts

@@ -19,12 +19,32 @@ interface SequenceCreatedInterface {
   }
 }
 
+interface PictureCreatedInterface {
+  data: {
+    assets: object
+    bbox: number[]
+    collection: string
+    geometry: object
+    id: string
+    links: object[]
+    properties: object
+    providers: object[]
+    stac_extensions: string[]
+    stac_version: string
+    type: string
+  }
+}
+
 function createASequence(title: string): Promise<SequenceCreatedInterface> {
   return axios.post('api/collections', { title: title })
 }
 
-async function createAPictureToASequence(id: string, body: any): Promise<any> {
-  return await axios.post(`api/collections/${id}/items`, body)
+async function createAPictureToASequence(
+  id: string,
+  body: FormData
+): Promise<PictureCreatedInterface> {
+  const { data } = await axios.post(`api/collections/${id}/items`, body)
+  return data
 }
 
 export { createASequence, createAPictureToASequence }

v-calendar.d.ts

@@ -0,0 +1 @@
+declare module 'v-calendar'

vite.config.js

@@ -1,33 +1,51 @@
 import { fileURLToPath, URL } from 'node:url'
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import eslintPlugin from 'vite-plugin-eslint'
-
+import { createHtmlPlugin } from 'vite-plugin-html'
 // https://vitejs.dev/config/
-export default defineConfig({
-  server: {
-    host: true,
-    port: 5173,
-    strictPort: true,
-    hmr: {
-      clientPort: 5173,
-      overlay: false
-    }
-  },
-  base: '/',
-  plugins: [vue(), eslintPlugin()],
-  css: {
-    preprocessorOptions: {
-      scss: {
-        additionalData:
-          '@import "@/assets/font-size.scss"; @import "@/assets/rem-calc.scss";'
+export default ({ mode }) => {
+  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) }
+  return defineConfig({
+    server: {
+      host: true,
+      port: 5173,
+      strictPort: true,
+      hmr: {
+        clientPort: 5173,
+        overlay: false
+      }
+    },
+    base: '/',
+    plugins: [
+      vue(),
+      eslintPlugin(),
+      createHtmlPlugin({
+        minify: true,
+        /**
+         * Data that needs to be injected into the index.html ejs template
+         */
+        inject: {
+          data: {
+            instanceName: process.env.VITE_INSTANCE_NAME,
+            frontUrl: process.env.VITE_FRONT_URL
+          }
+        }
+      })
+    ],
+    css: {
+      preprocessorOptions: {
+        scss: {
+          additionalData:
+            '@import "@/assets/font-size.scss"; @import "@/assets/rem-calc.scss";'
+        }
+      }
+    },
+    resolve: {
+      alias: {
+        '@': fileURLToPath(new URL('./src', import.meta.url)),
+        'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'
       }
     }
-  },
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url)),
-      'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'
-    }
-  }
-})
+  })
+}

vue-draggable-resizable-vue3.d.ts

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

vue-matomo.d.ts

@@ -0,0 +1 @@
+declare module 'vue-matomo'