Merge pull request #142 from GeoGuess/fix/fileIcon

BilelJegham · web-flow · commit 0752bbd6ccba · 2021-03-19T23:18:09.000+01:00
fix: fileIcon Manifest.json
diff --git a/public/manifest.json b/public/manifest.json
@@ -79,13 +79,25 @@
           "accept": {
             "application/vnd.geo+json": [".geojson",".json"],
             "application/json": [".geojson"]
-          }
+          },
+          "icons": [
+            {
+              "src": "./img/fileIcons/geojson.png",
+              "sizes": "144x144"
+            }
+          ] 
         },
         {
           "action": "/history",
           "accept": {
             "application/json": [".geosave"]
-          }
+          },
+          "icons": [
+            {
+              "src": "./img/fileIcons/geosave.png",
+              "sizes": "144x144"
+            }
+          ] 
         }
     ],
     "start_url": "/?utm_source=pwa",
diff --git a/src/components/home/DialogCustomMap.vue b/src/components/home/DialogCustomMap.vue
@@ -15,35 +15,45 @@
             <v-card-text>
                 <v-row no-gutters class="dialog-customs__row">
                     <v-col md="5" sm="12" class="mr-6">
-                        <v-alert
-                            type="error"
-                            v-if="isValidGeoJson === false"
-                            transition="out-in"
-                        >
-                            {{ $t('DialogCustomMap.invalid') }}
-                        </v-alert>
+                        <v-skeleton-loader
+                            v-if="loading"
+                            class="mx-auto"
+                            height="500"
+                            type="image"
+                        ></v-skeleton-loader>
+                        <div v-else>
+                            <v-alert
+                                type="error"
+                                v-if="isValidGeoJson === false"
+                                transition="out-in"
+                            >
+                                {{ $t('DialogCustomMap.invalid') }}
+                            </v-alert>
 
-                        <GmapMap
-                            :center="{ lat: 10, lng: 10 }"
-                            :zoom="1"
-                            ref="mapRef"
-                            map-type-id="roadmap"
-                            style="width: 100%; height: 500px"
-                            :options="{
-                                gestureHandling: 'greedy',
-                            }"
-                        >
-                        </GmapMap>
-                        <v-row>
-                            <v-btn
-                                class="mt-6 mr-auto ml-auto"
-                                @click="saveGeoJson"
-                                color="secondary"
+                            <GmapMap
+                                :center="{ lat: 10, lng: 10 }"
+                                :zoom="1"
+                                ref="mapRef"
+                                map-type-id="roadmap"
+                                style="width: 100%; height: 500px"
+                                :options="{
+                                    gestureHandling: 'greedy',
+                                }"
                             >
-                                <v-icon left dark> mdi-cloud-download </v-icon>
-                                {{ $t('DialogCustomMap.download') }}
-                            </v-btn>
-                        </v-row>
+                            </GmapMap>
+                            <v-row>
+                                <v-btn
+                                    class="mt-6 mr-auto ml-auto"
+                                    @click="saveGeoJson"
+                                    color="secondary"
+                                >
+                                    <v-icon left dark>
+                                        mdi-cloud-download
+                                    </v-icon>
+                                    {{ $t('DialogCustomMap.download') }}
+                                </v-btn>
+                            </v-row>
+                        </div>
                     </v-col>
 
                     <v-col>
@@ -90,6 +100,7 @@
                             rows="21"
                             filled
                             clearable
+                            :loading="loading"
                         >
                         </v-textarea>
                     </v-col>
@@ -115,17 +126,22 @@ export default {
     props: ['visibility'],
     data() {
         return {
-            placeholderGeoJson: geoJsonExample,
             rulesUrl: [(value) => validURL(value)],
             rulesTextArea: [(value) => this.checkIfStringGeoJsonValid(value)],
             type: 'text',
             file: null,
             url: '',
             initMap: false,
             editMap: false,
+            loading: false,
         };
     },
-    computed: { ...mapGetters(['geoJsonString', 'isValidGeoJson', 'geoJson']) },
+    computed: {
+        ...mapGetters(['geoJsonString', 'isValidGeoJson', 'geoJson']),
+        placeholderGeoJson() {
+            return this.loading ? '' : geoJsonExample;
+        },
+    },
     methods: {
         ...mapActions(['loadGeoJsonFromUrl', 'setGeoJson', 'setGeoJsonString']),
         checkIfStringGeoJsonValid(string) {
@@ -165,7 +181,15 @@ export default {
                     return;
                 }
                 launchParams.files[0].getFile().then((f) => {
-                    this.file = f;
+                    this.loading = true;
+                    this.$emit('change-visibility');
+                    f.text()
+                        .then((content) => {
+                            return this.setGeoJsonString(content);
+                        })
+                        .then(() => {
+                            this.loading = false;
+                        });
                 });
             });
         }
