@sedoo/unidoo 0.1.71 → 0.1.72

package/src/components/unidoo-viewer/map-viewer/wmts-viewer.vue

@@ -1,12 +1,10 @@
 <template>
-  <v-col wmts-viewer style="padding: 0 12px;">
+  <v-col wmts-viewer style="padding: 0 12px">
     <v-row justify="center" style="position: relative; height: 100%">
-      
       <div :id="id" class="map"></div>
-    
+
       <v-col layers-list-container v-if="layers && layers.length > 0">
-        
-        <v-row justify="end" style="margin-right: 5px;">
+        <v-row justify="end" style="margin-right: 5px">
           <v-btn
             v-if="showItems"
             show-items
@@ -29,37 +27,35 @@
           </v-btn>
         </v-row>
         <v-col v-if="showItems" layers-list>
-
-          <layer-item v-for="(item, index) in layers"
+          <layer-item
+            v-for="(item, index) in layers"
             :key="index"
             :item="item"
             :initialOpacity="item.opacity"
             @change-opacity="changeOpacity"
           ></layer-item>
-
         </v-col>
       </v-col>
-
     </v-row>
     <span coordinates>EPSG:4326<span id="mouse-position"></span></span>
   </v-col>
 </template>
 
 <script>
-import layerItem from './layer-item';
-import 'ol/ol.css';
-import Map from 'ol/Map';
-import OSM from 'ol/source/OSM';
-import TileLayer from 'ol/layer/Tile';
-import View from 'ol/View';
-import WMTS from 'ol/source/WMTS';
-import { createStringXY } from 'ol/coordinate';
-import MousePosition from 'ol/control/MousePosition';
-import { defaults as defaultControls } from 'ol/control';
-import moment from 'moment';
+import layerItem from "./layer-item";
+import "ol/ol.css";
+import Map from "ol/Map";
+import OSM from "ol/source/OSM";
+import TileLayer from "ol/layer/Tile";
+import View from "ol/View";
+import WMTS from "ol/source/WMTS";
+import { createStringXY } from "ol/coordinate";
+import MousePosition from "ol/control/MousePosition";
+import { defaults as defaultControls } from "ol/control";
+import moment from "moment";
 
 export default {
-  name: 'wmts-viewer',
+  name: "wmts-viewer",
 
   components: {
     layerItem
@@ -76,7 +72,7 @@ export default {
     },
     title: {
       type: String,
-      default: () => ''
+      default: () => ""
     },
     date: {
       type: [String, Date],
@@ -92,67 +88,78 @@ export default {
     zoom: null
   }),
 
-  watch: { 
-    layers(val) { // tester si ca marche sans le deep avec watch layers(val)
-        if (!this.map) this.initMap();
+  watch: {
+    layers(val) {
+      // tester si ca marche sans le deep avec watch layers(val)
+      if (!this.map) this.initMap();
 
-        if (this.map && val) {
-          if (!this.mapEntryIndexSource) {
-            // initialier les layers et les inserer en concervant l'index=
-            this.mapEntryIndexSource = {};
-            this.mapLayers = {};
+      if (this.map && val) {
+        if (!this.mapEntryIndexSource) {
+          // initialier les layers et les inserer en concervant l'index=
+          this.mapEntryIndexSource = {};
+          this.mapLayers = {};
 
-            val.forEach(item => {
-              const option = item.option;
-              const opacity = item.opacity;
-              const index = item.index;
-              const source = new WMTS(option);
-              const loadFunction = function(imageTile, src) {
-                imageTile.getImage().src = src;
-              }
-              source.setTileLoadFunction(loadFunction);
-              const layer = new TileLayer({
-                preload: 0, // default value
-                opacity: opacity,
-                source: source,
-              });
-              
-              this.map.addLayer(layer);
-              this.mapLayers[index] = layer;
-              this.mapEntryIndexSource[index] = source;
-            });
-          } else {
-            // mettre a jour les sources à partir de l'index
-            val.forEach(item => {
-              const index = item.index;
-              const layer = this.mapLayers[index];
-              if (layer) {
-                const source = this.mapEntryIndexSource[index];
-                layer.setSource(source);
-              } else {
-                console.error("Error cannot find layer in map layers at index " + index);
-              }             
+          val.forEach((item) => {
+            const option = item.option;
+            const opacity = item.opacity;
+            const index = item.index;
+            const source = new WMTS(option);
+            const loadFunction = function (imageTile, src) {
+              imageTile.getImage().src = src;
+            };
+            source.setTileLoadFunction(loadFunction);
+            const layer = new TileLayer({
+              preload: 0, // default value
+              opacity: opacity,
+              source: source
             });
-          }
-          this.emitViewChange(this.map.getView().getZoom(), this.map.getView().calculateExtent(this.map.getSize()), Object.assign({}, this.mapEntryIndexSource));
+
+            this.map.addLayer(layer);
+            this.mapLayers[index] = layer;
+            this.mapEntryIndexSource[index] = source;
+          });
         } else {
-          console.error("map or layers undefined");
+          // mettre a jour les sources à partir de l'index
+          val.forEach((item) => {
+            const index = item.index;
+            const layer = this.mapLayers[index];
+            if (layer) {
+              const source = this.mapEntryIndexSource[index];
+              layer.setSource(source);
+            } else {
+              console.error(
+                "Error cannot find layer in map layers at index " + index
+              );
+            }
+          });
         }
+        this.emitViewChange(
+          this.map.getView().getZoom(),
+          this.map.getView().calculateExtent(this.map.getSize()),
+          Object.assign({}, this.mapEntryIndexSource)
+        );
+      } else {
+        console.error("map or layers undefined");
+      }
     },
 
     date(value) {
       if (value && this.layers) {
-        this.layers.forEach(item => {
+        this.layers.forEach((item) => {
           const index = item.index;
-          
+
           const layer = this.mapLayers[index];
           if (layer) {
             const source = this.mapEntryIndexSource[index];
-            source.updateDimensions(this.computeTimeDimension(value, item.dateField, item.dateFormat));
+            source.updateDimensions(
+              this.computeTimeDimension(value, item.dateField, item.dateFormat)
+            );
             source.refresh();
           } else {
-            console.error("Error cannot find layer in map layers at index " + index);
-          }             
+            console.error(
+              "Error cannot find layer in map layers at index " + index
+            );
+          }
         });
       }
     }
@@ -163,47 +170,52 @@ export default {
   },
 
   methods: {
-
     initMap() {
-      if (this.id) {
+      if (this.id && typeof document !== "undefined") {
         // coordonnées souris
         var mousePositionControl = new MousePosition({
           coordinateFormat: createStringXY(4),
-          projection: 'EPSG:4326',
-          className: 'custom-mouse-position',
-          target: document.getElementById('mouse-position'),
-          undefinedHTML: '&nbsp;',
+          projection: "EPSG:4326",
+          className: "custom-mouse-position",
+          target: document.getElementById("mouse-position"),
+          undefinedHTML: "&nbsp;"
         });
 
         // fond de carte
         const rasterSource = new OSM();
         this.rasterCoords = [];
         const self = this;
-        rasterSource.on('tileloadstart', function (event) {
+        rasterSource.on("tileloadstart", function (event) {
           self.rasterCoords.push(event.tile.tileCoord);
         });
         const raster = new TileLayer({
-                source: rasterSource,
-                opacity: 0.7
-              });        
+          source: rasterSource,
+          opacity: 0.7
+        });
         this.map = new Map({
-            layers: [raster],
-            controls: defaultControls().extend([mousePositionControl]),
-            target: this.id,
-            view: new View({
-              center: [0, 0],
-              zoom: 1,
-            }),
-          });
-       
-        if (this.box) { 
+          layers: [raster],
+          controls: defaultControls().extend([mousePositionControl]),
+          target: this.id,
+          view: new View({
+            center: [0, 0],
+            zoom: 1
+          })
+        });
+
+        if (this.box) {
           this.map.getView().fit(this.box, this.map.getSize());
         }
-        this.map.on('moveend', function(e) {
-          const newExtent = self.map.getView().calculateExtent(self.map.getSize());
+        this.map.on("moveend", function (e) {
+          const newExtent = self.map
+            .getView()
+            .calculateExtent(self.map.getSize());
           const newZoom = self.map.getView().getZoom();
           if (self.zoom !== newZoom) {
-            self.emitViewChange(newZoom, newExtent, Object.assign({}, self.mapEntryIndexSource));            
+            self.emitViewChange(
+              newZoom,
+              newExtent,
+              Object.assign({}, self.mapEntryIndexSource)
+            );
           }
         });
         this.zoom = this.map.getView().getZoom();
@@ -212,7 +224,11 @@ export default {
 
     emitViewChange(zoom, extent, sources) {
       // TODO ici recupérer les tileCoords courants et envoyer au player ?
-      this.$emit("update-zoom", { zoom: zoom, extent: extent, sources: sources });
+      this.$emit("update-zoom", {
+        zoom: zoom,
+        extent: extent,
+        sources: sources
+      });
     },
 
     changeOpacity(data) {
@@ -233,57 +249,61 @@ export default {
 
     create_UUID() {
       var dt = new Date().getTime();
-      var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      var uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
+        /[xy]/g,
+        function (c) {
           var r = (dt + Math.random() * 16) % 16 | 0;
           dt = Math.floor(dt / 16);
-          return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
-      });
+          return (c === "x" ? r : (r & 0x3) | 0x8).toString(16);
+        }
+      );
       return uuid;
-    },
+    }
   }
-}
+};
 </script>
 <style scoped>
-  [wmts-viewer]{
-    position: relative;
-  }
+[wmts-viewer] {
+  position: relative;
+}
 
-  [coordinates]{
-    position: absolute;
-    display: flex;
-    bottom: 0;
-    left: 0;
-    font-size: small;
-    opacity: 0.7;
-    letter-spacing: normal;
-  }
+[coordinates] {
+  position: absolute;
+  display: flex;
+  bottom: 0;
+  left: 0;
+  font-size: small;
+  opacity: 0.7;
+  letter-spacing: normal;
+}
 
-  #mouse-position{
-    margin-left: 10px;
-  }
+#mouse-position {
+  margin-left: 10px;
+}
 
-  .map {
-    width: 100%;
-    height: 100%;
-  }
+.map {
+  width: 100%;
+  height: 100%;
+}
 
-  [layers-list-container]{
-    position: absolute;
-    top: 0;
-    right: 0;
-    padding: 12px 0;
-    width: 200px;
-    max-height: 100%;
-    overflow-y: auto;
-  }
-  [layers-list]{
-    padding: 0;
-    width: 200px;
-  }
+[layers-list-container] {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 12px 0;
+  width: 200px;
+  max-height: 100%;
+  overflow-y: auto;
+}
+[layers-list] {
+  padding: 0;
+  width: 200px;
+}
 
-  [show-items]{
-    background: white;
-    border-radius: 10px;
-    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
-  }
+[show-items] {
+  background: white;
+  border-radius: 10px;
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+    0 1px 5px 0 rgba(0, 0, 0, 0.12);
+}
 </style>

package/src/components/unidoo-viewer/tree-viewer/tree-viewer.vue

@@ -235,7 +235,7 @@ export default {
     },
 
     openUrl(item) {
-      if (this.mapUrls && this.mapUrls[item]) {
+      if (this.mapUrls && this.mapUrls[item] && typeof window !== "undefined") {
         const entry = this.mapUrls[item];
 
         if (entry.url) {

package/src/components/unidoo-viewer/unidoo-viewer.vue

@@ -118,7 +118,7 @@ export default {
   },
 
   created() {
-    if (this.sync) {
+    if (this.sync && typeof document !== "undefined") {
       this.playerListener = this.showPlayButton.bind(this);
       document.addEventListener("show-play", this.playerListener);
       this.removePlayerListener = this.removePlayer.bind(this);
@@ -131,7 +131,7 @@ export default {
   },
 
   destroyed() {
-    if (this.sync) {
+    if (this.sync && typeof document !== "undefined") {
       document.removeEventListener("show-play", this.playerListener);
       this.playerListener = null;
       document.removeEventListener("remove-player", this.removePlayerListener);
@@ -157,10 +157,12 @@ export default {
     },
 
     playOrStop() {
-      this.isPlaying = !this.isPlaying;
-      document.dispatchEvent(
-        new CustomEvent("play-stop", { detail: { play: this.isPlaying } })
-      );
+      if (typeof document !== "undefined") {
+        this.isPlaying = !this.isPlaying;
+        document.dispatchEvent(
+          new CustomEvent("play-stop", { detail: { play: this.isPlaying } })
+        );
+      }
     }
   }
 };

package/src/components/unidoo-viewer/years-component/years-component.vue

@@ -2,20 +2,20 @@
   <div>
     <v-row year-list>
       <span
-         v-if="endYear && (years && !years.includes(endYear))"
-         :class="'clickable-year ' + focus(endYear)"
-         @click="$emit('input', endYear)"
-         style="padding: 0 10px"
+        v-if="endYear && years && !years.includes(endYear)"
+        :class="'clickable-year ' + focus(endYear)"
+        @click="$emit('input', endYear)"
+        style="padding: 0 10px"
       >
         <v-col>
           <v-row>{{ endYear }}</v-row>
         </v-col>
       </span>
       <span
-          v-if="years && !years.includes(currentYear)"
-          :class="'clickable-year ' + focus(currentYear)"
-          @click="$emit('input', currentYear)"
-          style="padding: 0 10px"
+        v-if="years && !years.includes(currentYear)"
+        :class="'clickable-year ' + focus(currentYear)"
+        @click="$emit('input', currentYear)"
+        style="padding: 0 10px"
       >
         <v-col>
           <v-row>{{ currentYear }}</v-row>
@@ -43,7 +43,6 @@ export default {
   name: "years-component",
 
   props: {
-
     // Value of the year : initialized in parent component campaign-product-block by v-model in <years-component v-model="year" ...> equivalent to <years-component :value="year" @input="year = $event" ...>
     value: {
       type: String,
@@ -69,14 +68,13 @@ export default {
       type: Boolean,
       required: true
     }
-
   },
 
   data: () => ({
     searchResult: [],
     hasData: false,
     positionLastAvailableDay: false,
-    endYear: '',
+    endYear: ""
   }),
 
   computed: {
@@ -84,7 +82,9 @@ export default {
       if (this.searchResult) {
         return this.searchResult.map((item) => {
           if (item.date) {
-            return dateToSpecificTimeZone(new Date(item.date)).getFullYear() + "";
+            return (
+              dateToSpecificTimeZone(new Date(item.date)).getFullYear() + ""
+            );
           }
           return null;
         });
@@ -97,24 +97,29 @@ export default {
   },
 
   created() {
-    this.initializeData();
+    if (typeof window !== "undefined") {
+      this.initializeData();
+    }
   },
 
   methods: {
-
     async initializeData() {
       // Start by setting hasData to false by default
       this.hasData = false;
       // If the user has chosen to position the last available day for all products (cf. component setting-available-data.vue), then we have to get the boolean value of attribut positionLastAvailableDay of the current product in database
       if (this.positionLastAvailableDayForAllProducts === false) {
         // Initialize positionLastAvailableDay with the awaited result of the async method
-        this.positionLastAvailableDay = await this.getPositionLastAvailableDay();
+        this.positionLastAvailableDay =
+          await this.getPositionLastAvailableDay();
       } else {
         this.positionLastAvailableDay = true; // If the user has chosen to position the last available day for all products, then we set positionLastAvailableDay to true
       }
 
       // Emit the positionLastAvailableDay value to the parent component
-      this.$emit("positionLastAvailableDayTriggered", this.positionLastAvailableDay);
+      this.$emit(
+        "positionLastAvailableDayTriggered",
+        this.positionLastAvailableDay
+      );
 
       // Call loadAvaiability to get the searchResult and compute hasData and emit it to the parent component through the 'hasDataTriggered' event internally
       this.loadAvaiability();
@@ -152,20 +157,24 @@ export default {
               // Now that searchResult is initialized, compute hasData
               self.hasData = self.computeHasData();
               // Emit the hasData value to the parent component
-              self.$emit('hasDataTriggered', self.hasData);
+              self.$emit("hasDataTriggered", self.hasData);
 
               if (!self.value) {
                 if (response.data.endYear) {
                   this.endYear = response.data.endYear.toString();
-                  this.positionLastAvailableDay && this.hasData ? self.goToLastYear() : self.goToCurrentYear();
+                  this.positionLastAvailableDay && this.hasData
+                    ? self.goToLastYear()
+                    : self.goToCurrentYear();
                 } else {
-                  this.positionLastAvailableDay && this.hasData ? self.goToLastYear() : self.goToCurrentYear();
+                  this.positionLastAvailableDay && this.hasData
+                    ? self.goToLastYear()
+                    : self.goToCurrentYear();
                 }
               }
             } else {
               self.searchResult = [];
               // Emit false since there's no data
-              self.$emit('hasDataTriggered', false);
+              self.$emit("hasDataTriggered", false);
               self.goToCurrentYear();
             }
           })
@@ -190,7 +199,9 @@ export default {
 
     goToYear(year) {
       if (this.isNumeric(year)) {
-        this.$emit("input", dateToSpecificTimeZone(new Date(year + "")).getFullYear() + ""
+        this.$emit(
+          "input",
+          dateToSpecificTimeZone(new Date(year + "")).getFullYear() + ""
         );
       } else {
         this.goToCurrentYear();
@@ -198,7 +209,10 @@ export default {
     },
 
     goToCurrentYear() {
-      this.$emit("input", dateToSpecificTimeZone(new Date()).getFullYear() + "");
+      this.$emit(
+        "input",
+        dateToSpecificTimeZone(new Date()).getFullYear() + ""
+      );
     },
 
     focus(n) {
@@ -247,10 +261,11 @@ export default {
      */
     async getPositionLastAvailableDay() {
       try {
-          const currentProduct = await this.loadProduct();
-          return currentProduct ? currentProduct.positionLastAvailableDay : false;
+        const currentProduct = await this.loadProduct();
+        return currentProduct ? currentProduct.positionLastAvailableDay : false;
       } catch (error) {
         // Handle error, e.g., by returning false or re-throwing the error
+        console.error(error);
         return false;
       }
     },
@@ -261,25 +276,30 @@ export default {
           this.loading = true;
           const self = this;
           this.axios
-              .get(process.env.VUE_APP_CAMPAIGNS_SERVICE + "/inputproduct/v1_0/get/" + this.campaign + "/" + this.product)
-              .then(function (response) {
-                const product = response.data;
-                resolve(product); // Resolve the promise with the product
-              })
-              .catch(function (error) {
-                console.error("Error loading product:", error);
-                reject(error); // Reject the promise if there's an error
-              })
-              .finally(function () {
-                self.loading = false;
-              });
+            .get(
+              process.env.VUE_APP_CAMPAIGNS_SERVICE +
+                "/inputproduct/v1_0/get/" +
+                this.campaign +
+                "/" +
+                this.product
+            )
+            .then(function (response) {
+              const product = response.data;
+              resolve(product); // Resolve the promise with the product
+            })
+            .catch(function (error) {
+              console.error("Error loading product:", error);
+              reject(error); // Reject the promise if there's an error
+            })
+            .finally(function () {
+              self.loading = false;
+            });
         } else {
           console.error("Error: campaign or product is not defined");
           reject(new Error("Campaign or product is not defined"));
         }
       });
-    },
-
+    }
   }
 };
 </script>

package/src/utils.js

@@ -1,9 +1,11 @@
 export function setThemeFromWordpress(vueInstance) {
-  const wpThemeColor = getComputedStyle(
-    document.documentElement
-  ).getPropertyValue("--theme-color");
-  const primaryColor = wpThemeColor || "#3f51b5";
-  vueInstance.$vuetify.theme.themes.light.primary = primaryColor;
+  if (typeof document !== "undefined") {
+    const wpThemeColor = getComputedStyle(
+      document.documentElement
+    ).getPropertyValue("--theme-color");
+    const primaryColor = wpThemeColor || "#3f51b5";
+    vueInstance.$vuetify.theme.themes.light.primary = primaryColor;
+  }
 }
 
 export function dateToSpecificTimeZone(date) {