Show recent maps; name maps

load-app.js

@@ -146,33 +146,55 @@ async function init_app() {
     }
 
     const params = (new URL(window.location)).searchParams;
-    console.log(params);
+    
+    let data = {
+      name: '',
+      markers: []
+    }
+
     let map_id = params.get('map') || '';
     if(!map_id) {
       map_id = Math.floor(Math.random()*Number.MAX_SAFE_INTEGER).toString(16).padStart(8,'0').slice(0,8);
     }
-
-    let markers = [];
+    map_id = map_id.slice(0,20).replace(/\W/g,'');
+    data.name = map_id;
 
     try {
-      markers = await (await fetch(`data/markers-${map_id}.json`)).json();
-
+      data = await (await fetch(`data/markers-${map_id}.json`)).json();
     } catch(e) {
       try {
         const fh = await opfs.getFileHandle(`markers-${map_id}.json`);
         const f = await fh.getFile();
-        markers = JSON.parse(await f.text())
+        data = JSON.parse(await f.text())
       } catch(e) {
       }
     
     }
 
+    let map_ids = [];
+    try {
+      for await(const [f,fh] of opfs.entries()) {
+        const m = f.match(/^markers-(.*).json/);
+
+        const data = JSON.parse(await (await fh.getFile()).text());
+        const name = data.name;
+
+        const id = m[1];
+        
+        if(m) {
+          map_ids.push({name,id});
+        }
+      }
+    } catch(e) {
+      console.error(e);
+    }
+
 
     const emoji = await (await fetch('emoji_metadata.json')).json();
     
     const app = Elm.App.init({
       node: document.body, 
-      flags: {emoji, markers, map_id}
+      flags: {emoji, data, map_id, map_ids}
     });
     
     navigator.geolocation.watchPosition(
@@ -184,18 +206,19 @@ async function init_app() {
     );
 
     const send_value_handlers = {
-      save: async ({markers}) => {
+      save: async ({data}) => {
+        const content = JSON.stringify(data);
         try {
           const f = await opfs.getFileHandle(`markers-${map_id}.json`, {create:true});
           const w = await f.createWritable();
-          await w.write(JSON.stringify(markers));
+          await w.write(content);
           await w.close();
         } catch(e) {
           
         }
 
         const fd = new FormData();
-        fd.set('content', JSON.stringify(markers));
+        fd.set('content', content);
         fd.set('map_id', map_id);
         fetch('cgi-bin/save_data.py', {
           method: 'POST',