feat:map cache

Author: jgarnierGit

README.md

@@ -8,6 +8,8 @@ Just pick a country and let the music play !
 
 (Also edit your music library to add geolocalisation link ;) )
 
+Incompatible with Chrome, <audio> balise is not displayed, but the song is playing.
+
 ## What it is
 
 - An Audio manager and player. Currently supporting MP3, OGG & WAV as I simply use <audio> html element. Sorry for all FLAC lovers.
@@ -41,6 +43,11 @@ Release :
 
 ## Features 
 
+play music and define next songs to play from
+ - your filesystem (image)
+ - artists view (image)
+ - country location (image)
+
 - Music library accessing in readonly mode to your local library
   - Musics from your fileSystem are saved in the database on the first reach.
 - Database persistency with metadata exposition
@@ -85,7 +92,8 @@ edit .env example before first launch :
 
 ## Start up
 
-`docker compose up`
+full dockerized environment :
+`docker compose --profile full up`
 
 - frontend (`http://localhost:3000`)
 - backend (`http://localhost:8000`)
@@ -99,11 +107,23 @@ edit .env example before first launch :
 
 ### Notes
 
+config update :
+
+If you want to update .env file configuration to add your email or link an other folder, don't forget to run the following command to apply changes:
+ - `docker compose stop backend`
+ - `docker compose up backend --build`
+
+`backend` container may fail to start with error `exec /app/run_dev.sh: no such file or directory`.
+ - run `dos2unix ./run_dev.sh` then `docker compose restart backend`
+
 `backend` may fails to connect to database as it doesn't wait enough for the first db init :
 
  - Wait for the db container log line `LOG:  database system is ready to accept connections`. It may take a while and you may see database stopping and restarting in the process.
  - Then run `docker compose restart backend`.
 
+`frontend` may fails to bind adress with the error `listen EADDRINUSE: address already in use`.
+ - run `docker compose up frontend --force-recreate`
+
 ## dev Notes
 
 front end dev, set this variable to disable API calls if you do not plan to work with the server launched

docker-compose.yml

@@ -67,4 +67,4 @@ services:
     ports:
       - 3000:3000
     profiles:
-      - front
+      - full

services/frontend/src/components/InteractiveMap.vue

@@ -1,6 +1,7 @@
 <template>
     <v-card>
-        <NavigatorToolbar title="Geolocalizer" :countLoaded="-1" :countRefreshCallback="refreshArtistGeoms" />
+        <NavigatorToolbar title="Geolocalizer" :countLoaded="countLoadedData"
+            :countRefreshCallback="refreshArtistGeoms" />
         <v-sheet height="70vh" max-height="90vh" rounded="lg">
             <div id="musicMap" class="mapContainer">
             </div>
@@ -19,15 +20,28 @@ import L from 'leaflet';
 import "leaflet.markercluster";
 import type { GeomData } from '~/commons/interfaces';
 import { COUNTRY_FIELD_NAME, FRONT_PUBLIC_URL, PLAYLIST_TYPES } from '~/commons/constants';
-import { getAPI, writeErrorLogs } from '~/commons/restAPI';
+import { getAPI, writeErrorLogs, writeInfoLogs } from '~/commons/restAPI';
 import PlaylistActions from './PlaylistActions.vue';
 import { createGeomData } from '~/commons/utils';
 
-const countriesLayerBuffers = await useAsyncData('countries', () => loadCountries());
 const activeCountryPopup = ref("");
+const countLoadedData = ref(0);
 const mapStore = useSpatialMapStore();
 const playlist = usePlaylistStore();
-const { editionId, editorContext, geomLayerData, countriesLayer } = storeToRefs(mapStore);
+const { editionId, editorContext, geomLayerData, countriesFeatures, countriesLayer } = storeToRefs(mapStore);
+const style = {
+    hilight: {
+        dashArray: '',
+        fillColor: 'white',
+        fillOpacity: 0.85
+    },
+    default: {
+        fillOpacity: 0, weight: 1,
+        color: 'black',
+    }
+}
+
+await useAsyncData('countries', () => loadCountries());
 const mapPlayerButton = ref();
 const layersCountValues = ref();
 const clusterPopupPlayer = ref();
@@ -60,16 +74,33 @@ watch(geomLayerData, (newVal, oldVal) => {
             all[value.name] = (all[value.name] ?? 0) + 1;
             return all;
         }, {});
-
+        countLoadedData.value = newVal.length;
         createReadMarkers(newVal);
     }
 })
 
+watch([countriesFeatures, leafletMap], ([newValLayer, newValMap]) => {
+    if (newValLayer && newValMap) {
+        const cLayer = L.geoJSON(newValLayer, {
+            style: style.default,
+            onEachFeature: onEachFeature
+        });
+        cLayer.addTo(newValMap);
+        mapStore.setCountriesLayer(cLayer);
+        L.Icon.Default.prototype.options.className = "mapMarker";
+        if (geomLayerData.value) {
+            createReadMarkers(geomLayerData.value)
+        }
+    }
+},
+    { immediate: true });
+
 async function refreshArtistGeoms() {
     const res = await getAPI(`/api/map/getGeometries`, 'fetch artist geoms');
     if (!res) {
         return "No data";
     }
+    countLoadedData.value = res.result.length;
     mapStore.updateLayerData(createGeomData(res.result));
     return res.result.length;
 }
@@ -200,10 +231,6 @@ function resetCountryStyleReadMarker(a: any) {
 
 onMounted(() => {
     initLeafletMap();
-    L.Icon.Default.prototype.options.className = "mapMarker";
-    if (geomLayerData.value) {
-        createReadMarkers(geomLayerData.value)
-    }
 })
 
 function initLeafletMap() {
@@ -213,44 +240,16 @@ function initLeafletMap() {
         maxZoom: 10,
         attribution: '&copy; <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</a> &copy; <a href="https://stamen.com/" target="_blank">Stamen Design</a> &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>',
     }).addTo(leafletMap.value);
-    createCountriesLayer();
 }
 
 
 async function loadCountries() {
-    try {
-        return await shp(`${FRONT_PUBLIC_URL}/geodata/ne_110m_admin_0_countries`);
-    } catch (err) {
-        writeErrorLogs(`couldn't load shp, ${JSON.stringify(err)}`);
-    }
-
-}
-
-async function createCountriesLayer() {
-    // for some reason I can't make it work with destructuration and a watcher...
-    if (countriesLayerBuffers.status.value === "error") {
-        console.error(countriesLayerBuffers.error.value)
+    if (countriesLayer.value) {
+        writeInfoLogs("Skip countries shp loading");
         return
     }
-    else if (countriesLayerBuffers.status.value === "pending" || countriesLayerBuffers.status.value === "idle") {
-        console.log("countries layers loading still pending");
-        return
-    }
-    const res = countriesLayerBuffers.data.value;
-
-    if (!res) {
-        console.error("no result for countries layer");
-        return
-    }
-    if (!leafletMap.value) {
-        console.error("no map instanciated");
-        return;
-    }
-    const cLayer = L.geoJSON(res, {
-        style: style.default,
-        onEachFeature: onEachFeature
-    }).addTo(leafletMap.value);
-    mapStore.setCountriesLayer(cLayer);
+    const shpRes = await shp(`${FRONT_PUBLIC_URL}/geodata/ne_110m_admin_0_countries`);
+    mapStore.setCountriesFeatures(shpRes);
 }
 
 function onEachFeature(feature: any, layer: any) {
@@ -261,18 +260,6 @@ function onEachFeature(feature: any, layer: any) {
     })
 }
 
-const style = {
-    hilight: {
-        dashArray: '',
-        fillColor: 'white',
-        fillOpacity: 0.85
-    },
-    default: {
-        fillOpacity: 0, weight: 1,
-        color: 'black',
-    }
-}
-
 function highlightFeature(e: any) {
     let layer = e.target;
     layer.setStyle(style.hilight);

services/frontend/src/components/artist/ArtistsCards.vue

@@ -16,15 +16,15 @@
                 Server log: "{{ dataError }}"
             </v-alert>
         </v-container>
-        <v-infinite-scroll v-else :height="300" :items="artistsData.artists" :onLoad="load">
+        <v-infinite-scroll v-else :height="300" :onLoad="load">
             <v-container fluid>
                 <v-row dense justify="start">
                     <v-col cols="3" v-for="artist in artistsData.artists" :key="artist.id">
                         <v-card max-width="20vw">
                             <v-img src="/default_artist.png" gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)" cover>
-
+                                <v-card-title class="text-white text-h6" v-text="artist.name"></v-card-title>
                                 <v-toolbar color="transparent">
-                                    <v-toolbar-title class="text-white" v-text="artist.name"></v-toolbar-title>
+
                                     <template v-slot:append>
                                         <PlaylistActions :type="PLAYLIST_TYPES.ARTIST" :value="artist.id" />
                                     </template>

services/frontend/src/components/artist/ArtistsGeolocalizer.vue

@@ -16,7 +16,7 @@
         Server log: "{{ dataError }}"
       </v-alert>
     </v-container>
-    <v-infinite-scroll v-else height="80vh" item-height="48" :items="artistsData.artists" @load="load">
+    <v-infinite-scroll v-else height="80vh" item-height="48" @load="load">
       <template v-for="(artist, index) in artistsData.artists" :key="artist.id">
         <v-list-item :subtitle="`${artist.country_name ?? 'NO DATA'}`" :title="`${artist.name}`">
           <template v-slot:prepend>

services/frontend/src/layouts/default.vue

@@ -3,7 +3,7 @@
         <MusicMenu />
         <v-main v-show="!isFocused">
             <v-container class="background-over-milkdrop">
-                <slot />
+                <slot></slot>
             </v-container>
         </v-main>
         <v-footer app height="50" center class="background-over-milkdrop">

services/frontend/src/pages/index.vue

@@ -16,7 +16,7 @@
         </v-col>
       </v-row>
     </v-col>
-    <v-col cols="4" class="opacity-100">
+    <v-col cols="7" class="opacity-100">
       <InteractiveMap />
     </v-col>
 

services/frontend/src/stores/spatialmap.ts

@@ -7,7 +7,8 @@ import L from 'leaflet';
 export const useSpatialMapStore = defineStore('spatialMap', () => {
     const editionId = ref<string>();
     const editorContext = ref<ArtistMapEditorContext>();
-    const countriesLayer = ref();
+    const countriesLayer = ref<any>();
+    const countriesFeatures = ref();
     const geomLayerData = ref<GeomData[]>()
 
     function openEditionForId(id: string, context: ArtistMapEditorContext) {
@@ -44,6 +45,10 @@ export const useSpatialMapStore = defineStore('spatialMap', () => {
         }
     }
 
+    function setCountriesFeatures(countryFeatures: any) {
+        countriesFeatures.value = countryFeatures;
+    }
+
     function setCountriesLayer(countryLayer: L.GeoJSON) {
         countriesLayer.value = countryLayer;
     }
@@ -61,5 +66,5 @@ export const useSpatialMapStore = defineStore('spatialMap', () => {
         return geom;
     }
 
-    return { editionId, editorContext, geomLayerData, countriesLayer, openEditionForId, closeEditionId, updateLayerData, getGeomFromLabel, setCountriesLayer };
+    return { editionId, editorContext, geomLayerData, countriesLayer, countriesFeatures, openEditionForId, closeEditionId, updateLayerData, getGeomFromLabel, setCountriesLayer, setCountriesFeatures };
 });