Prompt user if they need to grant access

src/App.vue

@@ -32,8 +32,10 @@ const i18n = {
 import maplibregl from 'maplibre-gl'
 import Buefy from 'buefy'
 import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+import { get, set, clear } from 'idb-keyval'
 
 import globalStore from '@/store'
+import fileSystems, { addLocalFilesystem } from '@/fileSystemConfig'
 
 import { ColorScheme, MAPBOX_TOKEN, MAP_STYLES_OFFLINE } from '@/Globals'
 import LoginPanel from '@/components/LoginPanel.vue'
@@ -44,11 +46,13 @@ import LoginPanel from '@/components/LoginPanel.vue'
 const writableMapBox: any = maplibregl
 writableMapBox.accessToken = MAPBOX_TOKEN
 
+let doThisOnceForLocalFiles = true
+
 @Component({ i18n, components: { LoginPanel } })
 class App extends Vue {
   private state = globalStore.state
 
-  private mounted() {
+  private async mounted() {
     // theme
     const theme = localStorage.getItem('colorscheme')
       ? localStorage.getItem('colorscheme')
@@ -61,6 +65,22 @@ class App extends Vue {
 
     this.toggleFullScreen(true)
     this.setOnlineOrOfflineMode()
+
+    // local files
+    if (doThisOnceForLocalFiles) await this.setupLocalFiles()
+  }
+
+  // ------ Find Chrome Local File System roots ----
+  private async setupLocalFiles() {
+    console.log(12341235125)
+    if (globalStore.state.localFileHandles.length) return
+
+    const lfsh = (await get('fs')) as { key: string; handle: any }[]
+    if (lfsh && lfsh.length) {
+      for (const entry of lfsh) {
+        addLocalFilesystem(entry.handle, entry.key)
+      }
+    }
   }
 
   /**

src/Globals.ts

@@ -208,6 +208,7 @@ export interface FileSystemAPIHandle {
   name: string
   values: any // returns { kind: string; name: string; getFile: any }[]
   getFile: any
+  requestPermission: any
 }
 
 export const LIGHT_MODE: ColorSet = {

src/fileSystemConfig.ts

@@ -25,6 +25,7 @@ export function addLocalFilesystem(handle: FileSystemAPIHandle, key: string | nu
   // console.log(globalStore.state.localFileHandles)
 
   // write it out to indexed-db so we have it on next startup
+  console.log('WRITING ALL FILE HANDLES')
   set('fs', globalStore.state.localFileHandles)
   return system.slug
 }

src/views/SplashPage.vue

@@ -64,21 +64,6 @@ import FileSystemProjects from '@/components/FileSystemProjects.vue'
 import InfoBottom from '@/assets/info-bottom.md'
 import fileSystems, { addLocalFilesystem } from '@/fileSystemConfig'
 
-const doThisOnce = async () => {
-  // clear()
-  console.log(12341235125)
-  if (globalStore.state.localFileHandles.length) return
-
-  const lfsh = (await get('fs')) as { key: string; handle: any }[]
-  if (lfsh && lfsh.length) {
-    for (const entry of lfsh) {
-      addLocalFilesystem(entry.handle, entry.key)
-    }
-  }
-}
-
-doThisOnce()
-
 @Component({
   i18n,
   components: { FileSystemProjects, InfoBottom },

src/views/TabbedDashboardView.vue

@@ -34,7 +34,7 @@
     @navigate="onNavigate"
   )
 
-  p.load-error: b {{ loadErrorMessage }}
+  p.load-error(@click="authorizeAfterError"): b {{ loadErrorMessage }}
 
 </template>
 
@@ -127,7 +127,11 @@ export default class VueComponent extends Vue {
     } catch (e) {
       // Bad things happened! Tell user
       console.warn({ eeee: e })
-      this.loadErrorMessage = this.fileSystemConfig.baseURL + ': Could not load'
+      if (this.fileSystemConfig.handle) {
+        this.loadErrorMessage = `Click to grant access to folder "${this.fileSystemConfig.handle.name}"`
+      } else {
+        this.loadErrorMessage = this.fileSystemConfig.baseURL + ': Could not load'
+      }
     }
   }
 
@@ -177,6 +181,7 @@ export default class VueComponent extends Vue {
 
     if (svnProject.length === 0) {
       console.warn('no such project')
+      this.loadErrorMessage = `Can't locate "${name}": please check running services and browser version.`
       return null
     }
 
@@ -201,6 +206,18 @@ export default class VueComponent extends Vue {
       this.onNavigate({ component: 'TabbedDashboardView', props })
     }
   }
+
+  private async authorizeAfterError() {
+    try {
+      const handle = this.fileSystemConfig.handle
+      if (handle) {
+        const status = await handle.requestPermission({ mode: 'read' })
+        if (status === 'granted') this.updateRoute()
+      }
+    } catch (e) {
+      // meh
+    }
+  }
 }
 </script>
 
@@ -292,8 +309,20 @@ li.is-not-active b a {
 }
 
 .load-error {
-  margin-top: 2rem;
+  margin: 3rem auto;
+  padding: 1rem 0;
+  border-radius: 5px;
   text-align: center;
+  font-size: 1.2rem;
+  color: var(--link);
+  background-color: var(--bgPanel2);
+  max-width: 40rem;
+}
+
+.load-error:hover {
+  cursor: pointer;
+  color: var(--linkHover);
+  background-color: var(--bgPanel3);
 }
 
 @media only screen and (max-width: 50em) {