local browsing working on local branch

package.json

@@ -47,6 +47,7 @@
     "fflate": "^0.7.2",
     "font-awesome": "^4.7.0",
     "geojson": "^0.5.0",
+    "idb-keyval": "^6.1.0",
     "javascript-natural-sort": "^0.7.1",
     "js-coroutines": "^2.4.5",
     "maplibre-gl": ">=1.14.0",

src/components/FileSystemProjects.vue

@@ -23,7 +23,9 @@ export default class VueComponent extends Vue {
   private sources: FileSystemConfig[] = []
 
   private mounted() {
-    this.sources = globalStore.state.svnProjects.filter((source) => !source.hidden)
+    this.sources = globalStore.state.svnProjects.filter(
+      source => !source.hidden && !source.slug.startsWith('fs')
+    )
   }
 
   private openProjectPage(source: FileSystemConfig) {

src/fileSystemConfig.ts

@@ -1,20 +1,32 @@
+import { get, set, clear } from 'idb-keyval'
 import { FileSystemConfig, FileSystemAPIHandle } from '@/Globals'
+import globalStore from '@/store'
 
 // The URL contains the websiteLiveHost, calculated at runtime
 const loc = window.location
 const webLiveHostname = loc.hostname
 const websiteLiveHost = `${loc.protocol}//${webLiveHostname}`
 
-export function addLocalFilesystem(handle: FileSystemAPIHandle) {
+export function addLocalFilesystem(handle: FileSystemAPIHandle, key: string | null) {
+  const slug = key || 'fs' + (1 + Object.keys(globalStore.state.localFileHandles).length)
+
   const system: FileSystemConfig = {
     name: handle.name,
-    slug: 'fs',
-    description: 'Local folder: ' + handle.name,
+    slug: slug,
+    description: 'Local folder',
     handle: handle,
     baseURL: '',
   }
 
   fileSystems.unshift(system)
+
+  // commit to app state
+  globalStore.commit('addLocalFileSystem', { key: system.slug, handle: handle })
+  // console.log(globalStore.state.localFileHandles)
+
+  // write it out to indexed-db so we have it on next startup
+  set('fs', globalStore.state.localFileHandles)
+  return system.slug
 }
 
 const fileSystems: FileSystemConfig[] = [

src/store.ts

@@ -4,10 +4,8 @@ import Vuex, { Store } from 'vuex'
 Vue.use(Vuex)
 
 import { BreadCrumb, ColorScheme, FileSystemConfig, Status, VisualizationPlugin } from '@/Globals'
-import fileSystems from '@/fileSystemConfig'
 import { MAP_STYLES_ONLINE, MAP_STYLES_OFFLINE } from '@/Globals'
-import { debounce } from '@/js/util'
-import SVNFileSystem from './js/HTTPFileSystem'
+import fileSystems from '@/fileSystemConfig'
 
 // ----------------------------------------
 
@@ -38,6 +36,7 @@ interface GlobalState {
   isFullScreen: boolean
   isDarkMode: boolean
   locale: string
+  localFileHandles: any[]
   mapLoaded: boolean
   mapStyles: { light: string; dark: string }
   needLoginForUrl: string
@@ -77,6 +76,7 @@ export default new Vuex.Store({
     visualizationTypes: new Map() as Map<string, VisualizationPlugin>,
     colorScheme: ColorScheme.LightMode,
     locale: 'en',
+    localFileHandles: [] as any[],
     runFolders: {},
     runFolderCount: 0,
     resizeEvents: 0,
@@ -178,8 +178,13 @@ export default new Vuex.Store({
       state.locale = value.toLocaleLowerCase()
       localStorage.setItem('locale', state.locale)
     },
+    addLocalFileSystem(state: GlobalState, value: any) {
+      state.localFileHandles.unshift(value)
+    },
+    setLocalFileSystem(state: GlobalState, value: any) {
+      state.localFileHandles = value
+    },
   },
-
   actions: {},
   modules: {},
   getters: {

src/views/SplashPage.vue

@@ -16,8 +16,13 @@
         hr
 
         .is-chrome(v-if="isChrome")
-          h2 Chrome: Browse local files directly
-          button.button(@click="showChromeDirectory") Select folder...
+          h2: b Browse local files directly (Chrome only):
+
+          .localRow(v-for="row in localRows" @click="clickedLocalRow(row)")
+            p(style="flex: 1;") Local folder {{ row.key.substring(2) }}: {{ row.handle.name}}
+            i.fa.fa-times(@click.stop="clickedDelete(row)")
+
+          button.button.add-folder(@click="showChromeDirectory") Add folder...
           hr
 
         h2: b {{ $t('more-info') }}
@@ -52,11 +57,27 @@ const i18n = {
 }
 
 import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+import { get, set, clear } from 'idb-keyval'
 
 import globalStore from '@/store'
 import FileSystemProjects from '@/components/FileSystemProjects.vue'
 import InfoBottom from '@/assets/info-bottom.md'
-import { addLocalFilesystem } from '@/fileSystemConfig'
+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,
@@ -75,14 +96,48 @@ class MyComponent extends Vue {
 
     // save them!
     globalStore.commit('setBreadCrumbs', crumbs)
+
+    // this.figureOutLocalFileSystemHandles()
+  }
+
+  private async clickedLocalRow(row: { key: string; handle: any }) {
+    try {
+      const status = await row.handle.requestPermission({ mode: 'read' })
+      console.log(row.handle, status)
+
+      // if first time, add its key to the fileSystemConfig
+      const exists = fileSystems.find(f => f.slug == row.key)
+      if (!exists) addLocalFilesystem(row.handle, row.key)
+
+      const BASE = import.meta.env.BASE_URL
+      this.$router.push(`${BASE}${row.key}/`)
+    } catch (e) {
+      console.error('' + e)
+    }
+  }
+
+  private async clickedDelete(row: { key: string; handle: any }) {
+    const handles = this.$store.state.localFileHandles
+    // just filter out the key I guess?
+    const filtered = handles.filter((f: any) => f.key !== row.key)
+
+    // and save it everywhere
+    await set('fs', filtered)
+    this.$store.commit('setLocalFileSystem', filtered)
   }
 
   private onNavigate(event: any) {
     // pass it on up
     this.$emit('navigate', event)
   }
 
-  // Only Chrome supports the FileSystemAPI
+  private get localRows() {
+    return this.$store.state.localFileHandles.sort((a: any, b: any) =>
+      parseInt(a.key.substring(2)) < parseInt(b.key.substring(2)) ? -1 : 1
+    )
+  }
+
+  // Only Chrome supports the File System Access API
   private get isChrome() {
     return !!window.showDirectoryPicker
   }
@@ -91,18 +146,13 @@ class MyComponent extends Vue {
     try {
       const FileSystemDirectoryHandle = window.showDirectoryPicker()
       const dir = await FileSystemDirectoryHandle
-
-      // add our new local filesystem as root 'fs'
-      addLocalFilesystem(dir)
+      const slug = addLocalFilesystem(dir, null) // no key yet
       const BASE = import.meta.env.BASE_URL
-      this.$router.push(`${BASE}fs/`)
+      this.$router.push(`${BASE}${slug}/`)
     } catch (e) {
       // shrug
     }
   }
-
-  // private readme = readme
-  // private readmeBottom = bottom
 }
 export default MyComponent
 </script>
@@ -253,6 +303,39 @@ hr {
   background-color: #53ade1; // 8d4eeb
   margin: 4rem 0 -0.5rem 0;
 }
+
+.localRow {
+  color: var(--link);
+  font-size: 1.1rem;
+  padding: 0.1rem 0.25rem;
+  margin-bottom: 0.25rem;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: row;
+
+  p {
+    margin-bottom: 0;
+  }
+}
+
+.localRow:hover {
+  cursor: pointer;
+  color: white;
+  background-color: #ffffff30;
+}
+
+.add-folder {
+  margin-top: 1rem;
+}
+
+.fa-times {
+  margin: auto 0.5rem;
+}
+
+.fa-times:hover {
+  color: red;
+}
+
 @media only screen and (max-width: 640px) {
   .content {
     padding: 2rem 1rem 8rem 1rem;