Update file mapAndViewer.ts

Improve Dockerfile

See merge request geovisio/website!83

.gitignore

@@ -91,4 +91,5 @@ sw.*
 
 # Cypress generated screen and videos files
 cypress/screenshot/
-cypress/videos/
+cypress/videos/
+*.cy.ts.mp4

CHANGELOG.md

@@ -2,22 +2,37 @@
 
 All notable changes to this project will be documented in this file.
 
-Before _0.1.0_ Changelog didn't exist.
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+Before _0.1.0_, website development was on rolling release, meaning there are no version tags.
+
+## [Unreleased]
+
+### Changed
+- GeoVisio web viewer upgraded to 2.1.3, [with alls its changes embedded](https://gitlab.com/geovisio/web-viewer/-/blob/develop/CHANGELOG.md?ref_type=heads#213-2023-08-30).
+- Dockerfile creates smaller and faster containers, using pre-built website and Nginx for HTTP serving.
+
 
 ## [2.1.0] - 2023-08-29
 
 ### Added
 
-- A new page `/telecharger` to upload picture with an interface ([#13](https://gitlab.com/geovisio/website/-/issues/13)) :
+- A new page `/envoyer` to upload picture with an interface ([#13](https://gitlab.com/geovisio/website/-/issues/13)) :
   - the user can upload multiples pictures with the interface
   - the pictures are sorted by name
   - the user can see all the pictures uploaded and all the errors
 
+### Changed
+
+- Website releases now follow the synced `MAJOR.MINOR` API version rule, meaning that any version >= 2.1 of the website will be compatible with corresponding [GeoVisio API](https://gitlab.com/geovisio/api) version.
+
 ### Fixed
 
 - fix a bug in the header hidden sub menu when authentication is not with keycloak
 
-## [0.1.0] -
+
+## [0.1.0] - 2023-07-04
 
 ### Added
 
@@ -37,4 +52,7 @@ Before _0.1.0_ Changelog didn't exist.
 - 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
 
-### Fixed
+
+[Unreleased]: https://gitlab.com/geovisio/website/-/compare/2.1.0...develop
+[2.1.0]: https://gitlab.com/geovisio/website/-/compare/0.1.0...2.1.0
+[0.1.0]: https://gitlab.com/geovisio/website/-/commits/0.1.0

Dockerfile

@@ -1,4 +1,8 @@
-FROM node:18.16.0-alpine
+#--------------------------------------------------------------
+#- Build image
+#-
+
+FROM node:18.16.0-alpine AS build
 
 WORKDIR /opt/geovisio
 
@@ -6,21 +10,44 @@ WORKDIR /opt/geovisio
 COPY package.json yarn.lock ./
 
 # Install NodeJS dependencies
-RUN yarn install
+RUN yarn install --frozen-lockfile
 
 # Import source code
 COPY static ./static
 COPY src ./src
 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_API_URL=DOCKER_VITE_API_URL
+ENV VITE_TILES=DOCKER_VITE_TILES
+
 # Build code
-RUN yarn build
-
-# Environment variables
 ENV PORT=3000
-ENV VITE_INSTANCE_NAME="GeoVisio/Docker"
-ENV VITE_API_URL="https://panoramax.ign.fr/"
+RUN yarn deploy
 
-# Expose
+
+#--------------------------------------------------------------
+#- Final image
+#-
+
+FROM nginx:1-alpine
+RUN apk add bash
+
+# Retrieve files from build
+COPY --from=build /opt/geovisio/dist /usr/share/nginx/html
+
+# Add Docker scripts and Nginx conf
+COPY docker/nginx.conf /etc/nginx/nginx.conf
+COPY docker/docker-entrypoint.sh /etc/nginx/docker-entrypoint.sh
+RUN chmod +x /etc/nginx/docker-entrypoint.sh
+
+# Define env variables defaults
+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"
+
+# Start Nginx
 EXPOSE 3000
-CMD ["yarn", "start"]
+ENTRYPOINT ["/etc/nginx/docker-entrypoint.sh"]
+CMD ["nginx", "-g", "daemon off;"]

docker/docker-entrypoint.sh

@@ -0,0 +1,16 @@
+#!/bin/bash
+
+ROOT_DIR=/usr/share/nginx/html
+DOCKER_VARS=(VITE_INSTANCE_NAME VITE_API_URL VITE_TILES)
+
+echo "Setting env variables in web files"
+for file in $ROOT_DIR/assets/*.js $ROOT_DIR/index.html; do
+	echo "Processing $file...";
+
+	for i in ${!DOCKER_VARS[@]}; do
+		sed -i "s|DOCKER_${DOCKER_VARS[i]}|${!DOCKER_VARS[i]}|g" $file
+	done
+done
+
+echo "GeoVisio website is now ready !"
+exec "$@"

docker/nginx.conf

@@ -0,0 +1,22 @@
+events {
+    worker_connections 1024;
+}
+
+http {
+    include mime.types;
+    sendfile on;
+
+    server {
+        listen 3000;
+        listen [::]:3000;
+
+        resolver 127.0.0.11;
+        autoindex off;
+
+        server_name _;
+        server_tokens off;
+
+        root /usr/share/nginx/html;
+        gzip_static on;
+    }
+}

docs/02_Setup.md

@@ -60,6 +60,8 @@ You can use the provided __Docker Hub__ `geovisio/website:latest` image directly
 ```bash
 docker run \
 	-e VITE_API_URL="https://your.geovisio.api/" \
+	-e VITE_INSTANCE_NAME="My Own GeoVisio" \
+	-e VITE_TILES="https://your.geovisio.api/vector/tiles/style.json" \
 	-p 3000:3000 \
 	--name geovisio-website \
 	-d \

docs/90_Releases.md

@@ -12,7 +12,7 @@ git checkout develop
 vim package.json	# Change version
 npm run doc
 
-vim CHANGELOG.md	# Replace unreleased to version number
+vim CHANGELOG.md	# Replace unreleased to version number and update versions links (at bottom)
 
 git add *
 git commit -m "Release x.x.x"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "geovisio-website",
-  "version": "1.0.0",
+  "version": "2.1.0",
   "engines": {
     "node": "18.16.0"
   },
@@ -25,7 +25,7 @@
     "axios": "^1.2.3",
     "bootstrap": "^5.2.3",
     "bootstrap-icons": "^1.10.3",
-    "geovisio": "2.1.2",
+    "geovisio": "2.1.3",
     "moment": "^2.29.4",
     "pinia": "^2.1.4",
     "vue": "^3.2.45",

src/components/Button.vue

@@ -69,14 +69,14 @@ defineProps({
 }
 
 .button--transparent {
-  border: toRem(1) solid var(--white);
+  border: toRem(0.1) solid var(--white);
   background-color: var(--black);
   color: var(--white);
 }
 .button--red {
   color: var(--red);
   background-color: var(--white);
-  border: toRem(1) solid var(--red);
+  border: toRem(0.1) solid var(--red);
   .icon {
     margin-right: 0;
     font-size: toRem(1.4);
@@ -89,7 +89,7 @@ defineProps({
 .button--white {
   color: var(--black);
   background-color: var(--white);
-  border: toRem(1) solid var(--black);
+  border: toRem(0.1) solid var(--black);
   .icon {
     font-size: toRem(1.4);
     color: var(--black);

src/components/ImageItem.vue

@@ -163,6 +163,7 @@ defineProps({
 }
 
 .info {
+  @include text(xs-r-regular);
   padding: toRem(0.5) toRem(0.8);
   background-color: var(--white);
   border-radius: toRem(0.5);

src/components/InputCheckbox.vue

@@ -77,6 +77,5 @@ function updateValue(value: boolean): void {
 .label {
   cursor: pointer;
   margin-left: toRem(0.5);
-  @include text(s-regular);
 }
 </style>

src/components/upload/PictureItem.vue

@@ -43,7 +43,7 @@ const itemUploadedText = computed<string | null>(
 }
 .error {
   background-color: var(--white);
-  border: toRem(1) solid var(--red-pale);
+  border: toRem(0.1) solid var(--red-pale);
   color: var(--red);
 }
 .uploaded-information {

src/locales/fr.json

@@ -33,9 +33,9 @@
       "setting_tooltip": "Afficher ou masquer le token"
     },
     "sequence": {
-      "sequence_published": "Séquence publiée",
+      "sequence_published": "Publiée",
       "sequence_waiting": "En cours de publication",
-      "sequence_hidden": "Séquence masquée",
+      "sequence_hidden": "Masquée",
       "hide_sequence_tooltip": "Masque la séquence sur la carte",
       "delete_sequence_tooltip": "Supprime définitivement la séquence",
       "hide_photo_tooltip": "Masque les photos sur la carte",

src/router/index.ts

@@ -43,7 +43,7 @@ const routes: Array<RouteRecordRaw> = [
     component: SharePicturesView
   },
   {
-    path: '/telecharger',
+    path: '/envoyer',
     name: 'upload-pictures',
     component: UploadPicturesView
   }

src/utils/mapAndViewer.ts

@@ -10,7 +10,6 @@ async function fetchMapAndViewer(params?: OptionalViewerMapInterface) {
   let paramsGeovisio: ViewerMapInterface = {
     map: {
       startWide: true,
-      maxZoom: 19
     }
   }
   if (tiles) {

src/views/MySequenceView.vue

@@ -17,38 +17,42 @@
             class="button-collapse"
             @click="toggleMenu"
           >
-            <span :class="[sequence.status, 'sequence-status']">{{
-              sequenceStatus
-            }}</span>
-            <h1 class="title">
-              {{ sequence.title }}
-            </h1>
+            <div class="wrapper-title">
+              <span :class="[sequence.status, 'sequence-status']">{{
+                sequenceStatus
+              }}</span>
+              <h1 class="title desktop">
+                {{ sequence.title }}
+              </h1>
+            </div>
             <i :class="headerPanelIsOpen ? 'bi bi-dash' : 'bi bi-plus'"></i>
           </button>
-          <div class="wrapper-button">
-            <div class="disable-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"
-                :icon="
-                  sequence.status === 'ready' ? 'bi bi-eye-slash' : 'bi bi-eye'
-                "
-                @trigger="patchCollection"
-              />
-            </div>
-            <Button
-              :tooltip="$t('pages.sequence.delete_sequence_tooltip')"
-              :text="$t('pages.sequence.button_delete')"
-              look="button--red"
-              icon="bi bi-trash"
-              @trigger="deleteCollection"
-            />
-          </div>
+          <h1 class="title responsive">
+            {{ sequence.title }}
+          </h1>
+        </div>
+        <div 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"
+            :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"
+            icon="bi bi-trash"
+            @trigger="deleteCollection"
+          />
         </div>
         <div
           :class="[sequence.status, 'collapse py-2 show']"
@@ -544,6 +548,9 @@ async function patchOrDeleteCollectionItems(
 </script>
 
 <style lang="scss" scoped>
+.responsive {
+  display: none;
+}
 .entry-page {
   display: flex;
 }
@@ -564,6 +571,10 @@ async function patchOrDeleteCollectionItems(
   justify-content: center;
   align-items: center;
 }
+.wrapper-title {
+  display: flex;
+  align-items: center;
+}
 .wrapper-button {
   display: flex;
   align-items: center;
@@ -601,9 +612,10 @@ async function patchOrDeleteCollectionItems(
   }
 }
 .title {
-  @include text(h2);
+  @include text(h4);
   color: var(--grey-dark);
   margin-right: toRem(1);
+  margin-bottom: 0;
 }
 .button-close {
   display: none;
@@ -620,9 +632,10 @@ async function patchOrDeleteCollectionItems(
   justify-content: space-between;
 }
 .sequence-status {
+  @include text(xs-r-regular);
   border-radius: toRem(3);
   padding: toRem(0.5) toRem(1);
-  margin-right: toRem(2);
+  margin-right: toRem(1);
   color: var(--white);
   &.ready {
     background-color: var(--orange);
@@ -643,6 +656,9 @@ async function patchOrDeleteCollectionItems(
   padding: 0;
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  margin-bottom: toRem(1);
 }
 .bi-plus,
 .bi-dash {
@@ -651,7 +667,7 @@ async function patchOrDeleteCollectionItems(
 }
 
 .photos-wrapper {
-  padding: toRem(1) 0rem toRem(2) toRem(1);
+  padding: toRem(1) 0 toRem(2) toRem(1);
   height: calc(100vh - v-bind(menuHeight));
 }
 .delete-all {
@@ -661,6 +677,7 @@ async function patchOrDeleteCollectionItems(
   margin-left: toRem(1);
   margin-right: toRem(2);
   margin-bottom: toRem(1);
+  @include text(xs-r-regular);
 }
 .wrapper-select {
   display: flex;
@@ -677,9 +694,6 @@ async function patchOrDeleteCollectionItems(
   margin-right: toRem(1);
   margin-left: toRem(1);
 }
-.delete-all-text {
-  @include text(xs-r-regular);
-}
 .action-buttons {
   display: flex;
   align-items: center;
@@ -715,7 +729,6 @@ async function patchOrDeleteCollectionItems(
   .header-menu {
     flex-direction: column;
     align-items: flex-start;
-    margin-bottom: toRem(1);
   }
   .block-collapse {
     flex-direction: column;
@@ -736,6 +749,29 @@ async function patchOrDeleteCollectionItems(
   }
 }
 @media (max-width: toRem(76.8)) {
+  .desktop {
+    display: none;
+  }
+  .responsive {
+    display: initial;
+  }
+  .title {
+    margin-right: 0;
+    margin-bottom: toRem(1);
+  }
+  .wrapper-button {
+    flex-direction: column;
+    align-items: initial;
+  }
+  .disable-button {
+    margin-right: 0;
+    margin-bottom: toRem(1);
+  }
+  .button-collapse {
+    width: 100%;
+    justify-content: space-between;
+    margin-bottom: 0;
+  }
   .photo-item {
     width: 100%;
     margin-right: 0;
@@ -793,13 +829,17 @@ async function patchOrDeleteCollectionItems(
     right: 0;
     top: toRem(22);
     z-index: 3;
-    background-color: var(--black);
     height: toRem(5);
     display: flex;
     align-items: center;
     justify-content: center;
     border-top-left-radius: toRem(0.5);
     border-bottom-left-radius: toRem(0.5);
+    background-color: var(--white);
+    border: toRem(0.1) solid var(--black);
+  }
+  .menu-top {
+    padding: toRem(1);
   }
   .menu-is-open {
     .menu-right {

yarn.lock

@@ -3148,10 +3148,10 @@ geojson-vt@^3.2.1:
   resolved "https://registry.yarnpkg.com/geojson-vt/-/geojson-vt-3.2.1.tgz#f8adb614d2c1d3f6ee7c4265cad4bbf3ad60c8b7"
   integrity sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg==
 
-geovisio@2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/geovisio/-/geovisio-2.1.2.tgz#558675ffb6a7e337620f1b885ea30d373d3a7551"
-  integrity sha512-uYJeqyrEMG2iiluf6IDADdJL4GlUOIirp9TgQa1WWXPwvjO22D2dNx0rkgPsYMJXuum7Cx/BzWma4UkCuA2+Iw==
+geovisio@2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/geovisio/-/geovisio-2.1.3.tgz#60bb05bb850a7c37cf9082bf43ca9cde3bcaab67"
+  integrity sha512-6OEWCoors2UYYnh6R4ImSgQ0TAgOQshIJEFnwxIXshrkdn4s0NXusuEA8RVFhueV4VThSmbZR53KKVgWJXT9wA==
   dependencies:
     "@fortawesome/fontawesome-svg-core" "^6.4.0"
     "@fortawesome/free-solid-svg-icons" "^6.4.0"