mmainguy/immersive2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tweak to allow localdb not to sync to cloud and generate unique IDs for databases.

Browse Source
This commit is contained in:
Michael Mainguy 2024-04-24 11:50:23 -05:00
parent f87190af86
commit 48c0535c8f
2 changed files with 18 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/integration/pouchdbPersistenceManager.ts
View File

@ -6,7 +6,6 @@ import {DiagramEventObserverMask, DiagramManager} from "../diagram/diagramManage
import log, {Logger} from "loglevel";
import {ascii_to_hex} from "./functions/hexFunctions";
import {getPath} from "../util/functions/getPath";
import {v4 as uuidv4} from 'uuid';
const logger: Logger = log.getLogger('PouchdbPersistenceManager');
export class PouchdbPersistenceManager {
@ -97,21 +96,17 @@ export class PouchdbPersistenceManager {
private async initLocal(): Promise<boolean> {
try {
let sync = false;
let current = getPath();
if (!current) {
const locallyStored = localStorage.getItem('currentDiagram');
if (!locallyStored) {
const newId = uuidv4().replaceAll('-', '_');
localStorage.setItem('currentDiagram', newId);
window.history.replaceState(null, null, '/db/' + newId);
current = newId;
if (current && current != 'localdb') {
sync = true;
} else {
current = locallyStored;
window.history.replaceState(null, null, '/db/' + current);
}
current = 'localdb';
}
this.db = new PouchDB(current);
if (sync) {
await this.beginSync(current);
}
return true;
} catch (err) {
logger.error(err);

14
src/react/webApp.tsx
View File

@ -16,8 +16,10 @@ function CreateMenu({display, toggleCreateMenu}) {
const onCreateClick = (evt) => {
evt.preventDefault();
const name = (document.querySelector('#createName') as HTMLInputElement).value;
const id = window.crypto.randomUUID().replace(/-/g, '_');
localStorage.setItem(id, name);
if (name && name.length > 4) {
document.location.href = '/db/' + name;
document.location.href = '/db/' + id;
} else {
window.alert('Name must be longer than 4 characters');
}
@ -26,7 +28,6 @@ function CreateMenu({display, toggleCreateMenu}) {
<div className="overlay" id="create" style={{'display': display}}>
<div>
<div><input id="createName" placeholder="Enter a name for your diagram" type="text"/></div>
<div><input id="createPassword" placeholder="Enter a password (optional)" type="text"/></div>
<div><a href="#" id="createActionLink" onClick={onCreateClick}>Create</a></div>
<div><a className="cancel" onClick={toggleCreateMenu} href="#" id="cancelCreateLink">Cancel</a></div>
</div>
@ -69,7 +70,12 @@ function DiagramList({display, onClick}) {
const data = await indexedDB.databases();
let i = 0;
setDbList(data.filter((item) => item.name.indexOf('_pouch_') > -1).map((item) => {
return {key: i++, name: item.name.replace('_pouch_', '')}
const dbid = item.name.replace('_pouch_', '');
let friendlyName = localStorage.getItem(dbid);
if (!friendlyName) {
friendlyName = dbid;
}
return {key: dbid, name: friendlyName}
}));
};
listDb();
@ -82,7 +88,7 @@ function DiagramList({display, onClick}) {
<div id="startCreate"><a href="#" id="startCreateLink" onClick={onClick}>New</a></div>
<div id="diagramListContent">
<ul>
{dbList.map((item) => <li key={item.key}><a href={`/db/${item.name}`}>{item.name}</a></li>)}
{dbList.map((item) => <li key={item.key}><a href={`/db/${item.key}`}>{item.name}</a></li>)}
</ul>
</div>
</div>