File load closes issue #22

Closes issue #22 (closed).

src/pages/Index.vue

@@ -33,6 +33,9 @@
                 </q-item-section>
                 <q-item-section>
                   <q-slider v-model="store.state.mapSizeX" :min="1" :max="101" label color="secondary" :step="1" label-always/>
+                  <q-tooltip :disable="$q.platform.is.mobile">
+                      Size along the X-axis.
+                  </q-tooltip>
                 </q-item-section>
               </q-item>
 
@@ -42,6 +45,9 @@
                 </q-item-section>
                 <q-item-section>
                   <q-slider v-model="store.state.mapSizeY" :min="1" :max="101" label color="secondary" :step="1" label-always/>
+                  <q-tooltip :disable="$q.platform.is.mobile">
+                    Size along the Y-axis.
+                  </q-tooltip>
                 </q-item-section>
               </q-item>
 
@@ -61,6 +67,9 @@
                 <q-icon name="cancel" @click.stop="store.state.seed = null" class="cursor-pointer" />
                 <q-icon name="refresh" @click.stop="store.state.seed = store.seedGenerator.random_int31()" class="cursor-pointer" />
               </template>
+              <q-tooltip :disable="$q.platform.is.mobile">
+                Numbers only.
+              </q-tooltip>
             </q-input>
             <q-btn class="q-mr-xs" color="secondary" label="Generate Random Map" @click='createRandomMap()'>
                 <q-tooltip :disable="$q.platform.is.mobile">
@@ -79,7 +88,11 @@
               placeholder="Paste Map Data"
               type="textarea"
               input-class="pastCodeArea"
-            ></q-input>
+            >
+              <q-tooltip :disable="$q.platform.is.mobile">
+                Valid map-json only.
+              </q-tooltip>
+            </q-input>
             <q-btn class="q-mr-xs" color="secondary" label="Load Map From Filedata" @click='loadMapData()'>
               <q-tooltip :disable="$q.platform.is.mobile">
                 Load Map From Data
@@ -88,6 +101,32 @@
           </div>
         </q-card-section>
 
+        <q-card-section>
+          <div class="column">
+            <div class="text-h6 q-mb-md text-black">Load Map from File</div>
+            <q-file
+              v-model="file"
+              label="Pick one file"
+              filled
+              clearable
+              accept=".json, application/*"
+              max-file-size="800000"
+              style="max-width: 100%"
+              @rejected="onRejected"
+            >
+              <q-tooltip :disable="$q.platform.is.mobile">
+                Only one file of max 800Kb in size.
+              </q-tooltip>
+            </q-file>
+            <q-btn class="q-mr-xs" color="secondary" label="Load Map From Filedata" @click='loadMapFile()'>
+              <q-tooltip :disable="$q.platform.is.mobile">
+                Load Map From File
+              </q-tooltip>
+            </q-btn>
+          </div>
+        </q-card-section>
+
+
       </q-card>
     </div>
   </span>
@@ -97,16 +136,49 @@
 <script>
 import { defineComponent, inject, ref } from 'vue';
 import Tile from "../components/Tile.vue";
+import { useQuasar } from 'quasar';
 
 export default defineComponent({
     setup() {
 
       const store = inject('store');
 
+      const $q = useQuasar()
+
       var mapString = ref('');
 
+      const parseJsonFromString = function(mapString) {
+        let mapObject;
+        try {
+          mapObject = JSON.parse(mapString);
+        } catch (e) {
+            if (e instanceof SyntaxError) {
+              $q.notify({
+                type: 'negative',
+                message: 'Input is not a valid JSON'
+              })
+          } else {
+              $q.notify({
+                type: 'negative',
+                message: 'An unknown error occured'
+              })
+              console.log(e);
+          }
+          return;
+        }
+        this.file = null;
+        this.mapString = null;
+        store.methods.loadMap(mapObject);
+      }
+
       const loadMapData = function() {
-        store.methods.loadMap(JSON.parse(mapString.value));
+        this.parseJsonFromString(mapString.value);
+      };
+
+      const loadMapFile = function() {
+        const reader = new FileReader();
+        reader.onload = e => this.parseJsonFromString(e.target.result);
+        reader.readAsText(this.file);
       };
 
       const createMap = function() {
@@ -117,12 +189,23 @@ export default defineComponent({
         store.methods.generateRandomMap();
       };
 
+      const onRejected = function(rejectedEntries) {
+        $q.notify({
+          type: 'negative',
+          message: `${rejectedEntries[0].file.name}-file did not pass validation constraints. The file is either too big or not a valid JSON.`
+        });
+      };
+
       return {
+        parseJsonFromString,
+        file: ref(null),
         mapString,
         store,
         createMap,
         createRandomMap,
-        loadMapData
+        loadMapData,
+        loadMapFile,
+        onRejected
       }
     },