project save/load to browser

gui/src/app/pages/HomePage/BrowserProjectsInterface.ts

@@ -0,0 +1,108 @@
+export class BrowserProjectsInterface {
+  constructor(
+    private dbName: string = "stan-playground",
+    private storeName: string = "projects",
+  ) {}
+  async loadProject(title: string) {
+    const db = await this.openDatabase();
+    const transaction = db.transaction(this.storeName, "readonly");
+    const objectStore = transaction.objectStore(this.storeName);
+    const filename = `${title}.json`;
+    const content = await this.getTextFile(objectStore, filename);
+    if (!content) return null;
+    return JSON.parse(content);
+  }
+  async saveProject(title: string, fileManifest: { [name: string]: string }) {
+    const db = await this.openDatabase();
+    const transaction = db.transaction(this.storeName, "readwrite");
+    const objectStore = transaction.objectStore(this.storeName);
+    const filename = `${title}.json`;
+    return await this.setTextFile(
+      objectStore,
+      filename,
+      JSON.stringify(fileManifest, null, 2),
+    );
+  }
+  async listProjects(): Promise<string[]> {
+    const db = await this.openDatabase();
+    const transaction = db.transaction(this.storeName, "readonly");
+    const objectStore = transaction.objectStore(this.storeName);
+    return new Promise<string[]>((resolve, reject) => {
+      const request = objectStore.getAllKeys();
+      request.onsuccess = () => {
+        resolve(
+          request.result.map((key) => {
+            return key.toString().replace(/\.json$/, "");
+          }),
+        );
+      };
+      request.onerror = () => {
+        reject(request.error);
+      };
+    });
+  }
+  async deleteProject(title: string) {
+    const db = await this.openDatabase();
+    const transaction = db.transaction(this.storeName, "readwrite");
+    const objectStore = transaction.objectStore(this.storeName);
+    const filename = `${title}.json`;
+    await this.deleteTextFile(objectStore, filename);
+  }
+  private async openDatabase() {
+    return new Promise<IDBDatabase>((resolve, reject) => {
+      const request = indexedDB.open(this.dbName);
+      request.onupgradeneeded = () => {
+        const db = request.result;
+        if (!db.objectStoreNames.contains(this.storeName)) {
+          db.createObjectStore(this.storeName, { keyPath: "name" });
+        }
+      };
+      request.onsuccess = () => {
+        resolve(request.result);
+      };
+      request.onerror = () => {
+        reject(request.error);
+      };
+    });
+  }
+  private async getTextFile(objectStore: IDBObjectStore, filename: string) {
+    return new Promise<string | null>((resolve, reject) => {
+      const getRequest = objectStore.get(filename);
+      getRequest.onsuccess = () => {
+        resolve(getRequest.result?.content || null);
+      };
+      getRequest.onerror = () => {
+        reject(getRequest.error);
+      };
+    });
+  }
+  private async setTextFile(
+    objectStore: IDBObjectStore,
+    filename: string,
+    content: string,
+  ) {
+    return new Promise<void>((resolve, reject) => {
+      const file = { name: filename, content: content };
+      const putRequest = objectStore.put(file);
+      putRequest.onsuccess = () => {
+        resolve();
+      };
+      putRequest.onerror = () => {
+        reject(putRequest.error);
+      };
+    });
+  }
+  private async deleteTextFile(objectStore: IDBObjectStore, filename: string) {
+    return new Promise<void>((resolve, reject) => {
+      const deleteRequest = objectStore.delete(filename);
+      deleteRequest.onsuccess = () => {
+        resolve();
+      };
+      deleteRequest.onerror = () => {
+        reject(deleteRequest.error);
+      };
+    });
+  }
+}
+
+export default BrowserProjectsInterface;

gui/src/app/pages/HomePage/LoadProjectWindow.tsx

@@ -15,6 +15,9 @@ import {
   useEffect,
   useState,
 } from "react";
+import { Hyperlink, SmallIconButton } from "@fi-sci/misc";
+import BrowserProjectsInterface from "./BrowserProjectsInterface";
+import { Delete } from "@mui/icons-material";
 
 type LoadProjectWindowProps = {
   onClose: () => void;
@@ -103,9 +106,37 @@ const LoadProjectWindow: FunctionComponent<LoadProjectWindowProps> = ({
     }
   }, [filesUploaded, importUploadedFiles]);
 
+  const [browserProjectTitles, setBrowserProjectTitles] = useState<string[]>(
+    [],
+  );
+  useEffect(() => {
+    const bpi = new BrowserProjectsInterface();
+    bpi.listProjects().then((titles) => {
+      setBrowserProjectTitles(titles);
+    });
+  }, []);
+
+  const handleOpenBrowserProject = useCallback(
+    async (title: string) => {
+      const bpi = new BrowserProjectsInterface();
+      const fileManifest = await bpi.loadProject(title);
+      if (!fileManifest) {
+        alert("Failed to load project");
+        return;
+      }
+      update({
+        type: "loadFiles",
+        files: mapFileContentsToModel(fileManifest),
+        clearExisting: true,
+      });
+      onClose();
+    },
+    [update, onClose],
+  );
+
   return (
     <div>
-      <h3>Load project</h3>
+      <h3>Upload project</h3>
       <div>
         You can upload:
         <ul>
@@ -142,6 +173,43 @@ const LoadProjectWindow: FunctionComponent<LoadProjectWindowProps> = ({
           </Button>
         </div>
       )}
+      <h3>Load from browser</h3>
+      {browserProjectTitles.length > 0 ? (
+        <table>
+          <tbody>
+            {browserProjectTitles.map((title) => (
+              <tr key={title}>
+                <td>
+                  <SmallIconButton
+                    icon={<Delete />}
+                    onClick={async () => {
+                      const ok = window.confirm(
+                        `Delete project "${title}" from browser?`,
+                      );
+                      if (!ok) return;
+                      const bpi = new BrowserProjectsInterface();
+                      await bpi.deleteProject(title);
+                      const titles = await bpi.listProjects();
+                      setBrowserProjectTitles(titles);
+                    }}
+                  />
+                </td>
+                <td>
+                  <Hyperlink
+                    onClick={() => {
+                      handleOpenBrowserProject(title);
+                    }}
+                  >
+                    {title}
+                  </Hyperlink>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      ) : (
+        <div>No projects found in browser storage</div>
+      )}
     </div>
   );
 };

gui/src/app/pages/HomePage/SaveProjectWindow.tsx

@@ -6,6 +6,7 @@ import { ProjectContext } from "@SpCore/ProjectContextProvider";
 import saveAsGitHubGist from "@SpCore/gists/saveAsGitHubGist";
 import { triggerDownload } from "@SpUtil/triggerDownload";
 import Button from "@mui/material/Button";
+import BrowserProjectsInterface from "./BrowserProjectsInterface";
 
 type SaveProjectWindowProps = {
   onClose: () => void;
@@ -18,6 +19,7 @@ const SaveProjectWindow: FunctionComponent<SaveProjectWindowProps> = ({
   const fileManifest = mapModelToFileManifest(data);
 
   const [exportingToGist, setExportingToGist] = useState(false);
+  const [savingToBrowser, setSavingToBrowser] = useState(false);
 
   return (
     <div>
@@ -47,7 +49,7 @@ const SaveProjectWindow: FunctionComponent<SaveProjectWindowProps> = ({
         </tbody>
       </table>
       <div>&nbsp;</div>
-      {!exportingToGist && (
+      {!exportingToGist && !savingToBrowser && (
         <div>
           <Button
             onClick={async () => {
@@ -66,6 +68,14 @@ const SaveProjectWindow: FunctionComponent<SaveProjectWindowProps> = ({
           >
             Save to GitHub Gist
           </Button>
+          &nbsp;
+          <Button
+            onClick={() => {
+              setSavingToBrowser(true);
+            }}
+          >
+            Save to Browser
+          </Button>
         </div>
       )}
       {exportingToGist && (
@@ -75,6 +85,13 @@ const SaveProjectWindow: FunctionComponent<SaveProjectWindowProps> = ({
           onClose={onClose}
         />
       )}
+      {savingToBrowser && (
+        <SaveToBrowserView
+          fileManifest={fileManifest}
+          title={data.meta.title}
+          onClose={onClose}
+        />
+      )}
     </div>
   );
 };
@@ -211,4 +228,60 @@ const makeSPShareableLinkFromGistUrl = (gistUrl: string) => {
   return url;
 };
 
+type SaveToBrowserViewProps = {
+  fileManifest: Partial<FileRegistry>;
+  title: string;
+  onClose: () => void;
+};
+
+const SaveToBrowserView: FunctionComponent<SaveToBrowserViewProps> = ({
+  fileManifest,
+  title,
+  onClose,
+}) => {
+  // use IndexedDB to save the project
+  // https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB
+
+  const handleSave = useCallback(async () => {
+    try {
+      const bpi = new BrowserProjectsInterface();
+      const existingProject = await bpi.loadProject(title);
+      if (existingProject) {
+        const overwrite = window.confirm(
+          `A project with the title "${title}" already exists. Do you want to overwrite it?`,
+        );
+        if (!overwrite) {
+          return;
+        }
+      }
+      await bpi.saveProject(title, fileManifest);
+    } catch (err: any) {
+      alert(`Error saving to browser: ${err.message}`);
+    }
+    onClose();
+  }, [title, fileManifest, onClose]);
+
+  return (
+    <div className="SaveToBrowserView">
+      <h3>Save to Browser</h3>
+      <p>
+        This project will be saved to your browser as &quot;{title}&quot;.&nbsp;
+        It will be available to you on this device, but not on other devices or
+        browsers.
+      </p>
+      <div>
+        <Button
+          onClick={() => {
+            handleSave();
+          }}
+        >
+          Save to Browser
+        </Button>
+        &nbsp;
+        <Button onClick={onClose}>Cancel</Button>
+      </div>
+    </div>
+  );
+};
+
 export default SaveProjectWindow;