Disabled service worker, enhanced management console.
This commit is contained in:
parent
2397ddcd4c
commit
4f39030ed4
30
LICENSE.txt
Normal file
30
LICENSE.txt
Normal file
@ -0,0 +1,30 @@
|
||||
|
||||
Permissions Conditions Limitations
|
||||
Commercial use
|
||||
Distribution
|
||||
Modification
|
||||
Private use
|
||||
License and copyright notice
|
||||
Liability
|
||||
Warranty
|
||||
MIT License
|
||||
|
||||
Copyright (c) [2024] [Michael Mainguy]
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
@ -24,7 +24,10 @@
|
||||
<body>
|
||||
|
||||
<script>
|
||||
if (typeof navigator.serviceWorker !== 'undefined') {
|
||||
|
||||
/* if (typeof navigator.serviceWorker !== 'undefined') {
|
||||
|
||||
|
||||
if (localStorage.getItem('serviceWorkerVersion') !== '11') {
|
||||
caches.keys().then(cacheNames => {
|
||||
cacheNames.forEach(cacheName => {
|
||||
@ -35,6 +38,8 @@
|
||||
}
|
||||
navigator.serviceWorker.register('/sw.js', {updateViaCache: 'none'});
|
||||
}
|
||||
|
||||
*/
|
||||
</script>
|
||||
<div class="webApp" id="webApp">
|
||||
|
||||
|
||||
97
package-lock.json
generated
97
package-lock.json
generated
@ -45,6 +45,7 @@
|
||||
"rfc4648": "^1.5.3",
|
||||
"round": "^2.0.1",
|
||||
"uint8-to-b64": "^1.0.2",
|
||||
"use-pouchdb": "^2.0.2",
|
||||
"uuid": "^9.0.1",
|
||||
"websocket": "^1.0.34",
|
||||
"websocket-ts": "^2.1.5"
|
||||
@ -1297,6 +1298,14 @@
|
||||
"react": ">= 16"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/debug": {
|
||||
"version": "4.1.12",
|
||||
"resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
|
||||
"integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==",
|
||||
"dependencies": {
|
||||
"@types/ms": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/dom-to-image": {
|
||||
"version": "2.6.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/dom-to-image/-/dom-to-image-2.6.7.tgz",
|
||||
@ -1314,6 +1323,11 @@
|
||||
"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/ms": {
|
||||
"version": "0.7.34",
|
||||
"resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.34.tgz",
|
||||
"integrity": "sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g=="
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "18.19.46",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.46.tgz",
|
||||
@ -1327,6 +1341,31 @@
|
||||
"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
|
||||
"integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw=="
|
||||
},
|
||||
"node_modules/@types/pouchdb-core": {
|
||||
"version": "7.0.15",
|
||||
"resolved": "https://registry.npmjs.org/@types/pouchdb-core/-/pouchdb-core-7.0.15.tgz",
|
||||
"integrity": "sha512-gq1Qbqn9nCaAKRRv6fRHZ4/ER+QYEwSXBZlDQcxwdbPrtZO8EhIn2Bct0AlguaSEdFcABfbaxxyQwFINkNQ9dQ==",
|
||||
"dependencies": {
|
||||
"@types/debug": "*",
|
||||
"@types/pouchdb-find": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/pouchdb-find": {
|
||||
"version": "7.3.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/pouchdb-find/-/pouchdb-find-7.3.3.tgz",
|
||||
"integrity": "sha512-U7zXk67s9Ar+9Pwj5kSbuMnn8zif0AOOIPy4KRFeJ/S/Tk+mNS90soj+3OV21H8xyB7WTxjvS1JLablZC6C6ow==",
|
||||
"dependencies": {
|
||||
"@types/pouchdb-core": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/pouchdb-mapreduce": {
|
||||
"version": "6.1.10",
|
||||
"resolved": "https://registry.npmjs.org/@types/pouchdb-mapreduce/-/pouchdb-mapreduce-6.1.10.tgz",
|
||||
"integrity": "sha512-AgYVqCnaA5D7cWkWyzZVuk0137N4yZsmIQTD/i3DmuMxYYoFrtWUoQu0tbA52SpTRGdL8ubQ7JFQXzA13fA6IQ==",
|
||||
"dependencies": {
|
||||
"@types/pouchdb-core": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/prop-types": {
|
||||
"version": "15.7.12",
|
||||
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
|
||||
@ -3180,6 +3219,16 @@
|
||||
"buffer-from": "1.1.2"
|
||||
}
|
||||
},
|
||||
"node_modules/pouchdb-changes-filter": {
|
||||
"version": "8.0.1",
|
||||
"resolved": "https://registry.npmjs.org/pouchdb-changes-filter/-/pouchdb-changes-filter-8.0.1.tgz",
|
||||
"integrity": "sha512-UKgH6YRA9PnvIGHb0FuDEEqeTewgHugbbBt5vpVo0QmbWKxNiau/JiTC9mY5Hj9l7ghaIUpO0TFG95a6RXWsQA==",
|
||||
"dependencies": {
|
||||
"pouchdb-errors": "8.0.1",
|
||||
"pouchdb-selector-core": "8.0.1",
|
||||
"pouchdb-utils": "8.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/pouchdb-collate": {
|
||||
"version": "8.0.1",
|
||||
"resolved": "https://registry.npmjs.org/pouchdb-collate/-/pouchdb-collate-8.0.1.tgz",
|
||||
@ -3190,6 +3239,28 @@
|
||||
"resolved": "https://registry.npmjs.org/pouchdb-collections/-/pouchdb-collections-8.0.1.tgz",
|
||||
"integrity": "sha512-TlkQ2GGHJApJgL0b7bJMQcwX6eMfVenLeoK9mqHfC2fJssui+HWJJ5LYKHOWan11SeB90BQVFbO6rHN6CJQeDg=="
|
||||
},
|
||||
"node_modules/pouchdb-core": {
|
||||
"version": "8.0.1",
|
||||
"resolved": "https://registry.npmjs.org/pouchdb-core/-/pouchdb-core-8.0.1.tgz",
|
||||
"integrity": "sha512-Qkcmh3eoMHiKUma5Y/rH0Z7kjxXrr6p54j/WOH+TZ/RlJAchmdVY1TRfqay5CoK+8Ka0m8eibP+wD1DKZKJbDg==",
|
||||
"dependencies": {
|
||||
"pouchdb-changes-filter": "8.0.1",
|
||||
"pouchdb-collections": "8.0.1",
|
||||
"pouchdb-errors": "8.0.1",
|
||||
"pouchdb-fetch": "8.0.1",
|
||||
"pouchdb-merge": "8.0.1",
|
||||
"pouchdb-utils": "8.0.1",
|
||||
"uuid": "8.3.2"
|
||||
}
|
||||
},
|
||||
"node_modules/pouchdb-core/node_modules/uuid": {
|
||||
"version": "8.3.2",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
|
||||
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
|
||||
"bin": {
|
||||
"uuid": "dist/bin/uuid"
|
||||
}
|
||||
},
|
||||
"node_modules/pouchdb-errors": {
|
||||
"version": "8.0.1",
|
||||
"resolved": "https://registry.npmjs.org/pouchdb-errors/-/pouchdb-errors-8.0.1.tgz",
|
||||
@ -3237,6 +3308,14 @@
|
||||
"spark-md5": "3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/pouchdb-merge": {
|
||||
"version": "8.0.1",
|
||||
"resolved": "https://registry.npmjs.org/pouchdb-merge/-/pouchdb-merge-8.0.1.tgz",
|
||||
"integrity": "sha512-79dw6+K7js2+/kt9u4hKOkGCnz+ov0+yft2k21n6M+ylFEQyMKuWHEZRoFWr72o1vxwjhIXhUM1PB2PIdxIh0Q==",
|
||||
"dependencies": {
|
||||
"pouchdb-utils": "8.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/pouchdb-selector-core": {
|
||||
"version": "8.0.1",
|
||||
"resolved": "https://registry.npmjs.org/pouchdb-selector-core/-/pouchdb-selector-core-8.0.1.tgz",
|
||||
@ -4115,6 +4194,24 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/use-pouchdb": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/use-pouchdb/-/use-pouchdb-2.0.2.tgz",
|
||||
"integrity": "sha512-V1zfglhosqJCQZ1EXpBXrgcix5IAur0MItceN9DV1bW8xztebEmS1BkJUA9ogr1DgKA/XKwVC8mS2vSWewaUZw==",
|
||||
"dependencies": {
|
||||
"@types/pouchdb-core": "^7.0.11",
|
||||
"@types/pouchdb-find": "^7.3.0",
|
||||
"@types/pouchdb-mapreduce": "^6.1.6",
|
||||
"@types/react": "^18.0.14",
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"pouchdb-core": "^8.0.1",
|
||||
"pouchdb-errors": "^8.0.1",
|
||||
"pouchdb-utils": "^8.0.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8"
|
||||
}
|
||||
},
|
||||
"node_modules/use-sidecar": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
"private": true,
|
||||
"version": "0.0.8-17",
|
||||
"type": "module",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=18.0.0"
|
||||
},
|
||||
@ -45,6 +46,7 @@
|
||||
"loglevel": "^1.9.1",
|
||||
"meaningful-string": "^1.4.0",
|
||||
"peer-lite": "2.0.2",
|
||||
"use-pouchdb": "^2.0.2",
|
||||
"pouchdb": "^8.0.1",
|
||||
"pouchdb-find": "^8.0.1",
|
||||
"query-string": "^8.1.0",
|
||||
|
||||
13
public/sw.js
13
public/sw.js
@ -1,5 +1,5 @@
|
||||
importScripts('https://storage.googleapis.com/workbox-cdn/releases/7.1.0/workbox-sw.js');
|
||||
const VERSION = '0.0.8-18';
|
||||
const VERSION = '0.0.8-19';
|
||||
const CACHE = "deepdiagram";
|
||||
const IMAGEDELIVERY_CACHE = "deepdiagram-images";
|
||||
const MAPTILE_CACHE = 'maptiler';
|
||||
@ -66,32 +66,35 @@ workbox.routing.registerRoute(
|
||||
})
|
||||
);
|
||||
|
||||
workbox.routing.registerRoute(
|
||||
/*workbox.routing.registerRoute(
|
||||
new RegExp('/assets/.*'),
|
||||
new workbox.strategies.StaleWhileRevalidate({
|
||||
cacheName: CACHE
|
||||
})
|
||||
);
|
||||
*/
|
||||
|
||||
|
||||
workbox.routing.registerRoute(
|
||||
/*workbox.routing.registerRoute(
|
||||
new RegExp('/db/.*'),
|
||||
new workbox.strategies.StaleWhileRevalidate({
|
||||
cacheName: CACHE
|
||||
})
|
||||
);
|
||||
|
||||
*/
|
||||
|
||||
workbox.routing.registerRoute(
|
||||
new RegExp('/.*\\.glb'),
|
||||
new workbox.strategies.StaleWhileRevalidate({
|
||||
cacheName: CACHE
|
||||
})
|
||||
);
|
||||
/*
|
||||
workbox.routing.registerRoute(
|
||||
new RegExp('/.*\\.css'),
|
||||
new workbox.strategies.StaleWhileRevalidate({
|
||||
cacheName: CACHE
|
||||
})
|
||||
);
|
||||
|
||||
*/
|
||||
|
||||
|
||||
@ -263,12 +263,11 @@ export class PouchdbPersistenceManager {
|
||||
let sync = false;
|
||||
let current = getPath();
|
||||
if (current && current != 'localdb') {
|
||||
sync = true;
|
||||
//sync = true;
|
||||
} else {
|
||||
current = 'localdb';
|
||||
}
|
||||
this.db = new PouchDB(current, {auto_compaction: true});
|
||||
//await this.db.compact();
|
||||
if (sync) {
|
||||
if (await this.setupMetadata(current)) {
|
||||
await this.beginSync(current);
|
||||
|
||||
@ -45,8 +45,11 @@ export async function syncDoc(info: any, onDBRemoveObservable: Observable<Diagra
|
||||
template: doc.template
|
||||
}, DiagramEventObserverMask.FROM_DB);
|
||||
} else {
|
||||
if (doc.template) {
|
||||
onDBUpdateObservable.notifyObservers(doc, DiagramEventObserverMask.FROM_DB);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import {Anchor, AppShell, Button, Group, Image} from "@mantine/core";
|
||||
import {Anchor, AppShell, Burger, Button, Group, Image} from "@mantine/core";
|
||||
import React from "react";
|
||||
import {Link} from "react-router-dom";
|
||||
|
||||
@ -12,7 +12,7 @@ export default function PageHeader() {
|
||||
<Group justify="space-between">
|
||||
<Image w={64} src="/assets/ddd.svg"/>
|
||||
<Group justify="flex-end">
|
||||
<Button key="signup">Sign up for Free</Button>
|
||||
|
||||
<Group visibleFrom="sm">
|
||||
<Anchor component={Link} key="examples" to="/examples" p={5} c="myColor" bg="none"
|
||||
underline="hover">Examples</Anchor>
|
||||
@ -25,7 +25,8 @@ export default function PageHeader() {
|
||||
<Anchor component={Link} key="vrexperience" to="/db/local" p={5} c="myColor" bg="none"
|
||||
underline="hover">VR Experience</Anchor>
|
||||
</Group>
|
||||
|
||||
<Burger hiddenFrom="sm"/>
|
||||
<Button key="signup">Sign up for Free</Button>
|
||||
<Button>Login</Button>
|
||||
</Group>
|
||||
</Group>
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
import {AppShell} from "@mantine/core";
|
||||
import {AppShell, MantineProvider} from "@mantine/core";
|
||||
import PageHeader from "./pageHeader";
|
||||
import React from "react";
|
||||
import {theme} from "./theme";
|
||||
|
||||
export default function PageTemplate(props: { children: React.ReactNode }) {
|
||||
return (
|
||||
<MantineProvider defaultColorScheme="dark" theme={theme}>
|
||||
<AppShell
|
||||
header={{height: 64}}>
|
||||
<PageHeader/>
|
||||
@ -11,5 +13,6 @@ export default function PageTemplate(props: { children: React.ReactNode }) {
|
||||
{props.children}
|
||||
</AppShell.Main>
|
||||
</AppShell>
|
||||
</MantineProvider>
|
||||
)
|
||||
}
|
||||
@ -1,37 +1,96 @@
|
||||
import {Anchor, Button, Checkbox, Group, Modal, Pill, Stack, Textarea, TextInput} from "@mantine/core";
|
||||
import {usePouch} from "use-pouchdb";
|
||||
import {useState} from "react";
|
||||
import {v4} from "uuid";
|
||||
|
||||
export default function CreateDiagramModal({createOpened, setCreateOpened}) {
|
||||
|
||||
const createDiagram = () => {
|
||||
setCreateOpened(false);
|
||||
export default function CreateDiagramModal({createOpened, closeCreate}) {
|
||||
const db = usePouch();
|
||||
const [diagram, setDiagram] = useState({
|
||||
name: '',
|
||||
description: '',
|
||||
private: false,
|
||||
encrypted: false,
|
||||
invite: false
|
||||
});
|
||||
const createDiagram = async () => {
|
||||
let doc = null;
|
||||
try {
|
||||
doc = await db.get('directory')
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
const id = 'diagram-' + v4();
|
||||
const newDiagram = {...diagram, _id: id}
|
||||
if (!doc) {
|
||||
await db.put({_id: 'directory', diagrams: [newDiagram]});
|
||||
} else {
|
||||
if (doc.diagrams) {
|
||||
doc.diagrams.push(newDiagram);
|
||||
} else {
|
||||
doc.diagrams = [newDiagram];
|
||||
}
|
||||
console.log(doc);
|
||||
await db.put(doc);
|
||||
}
|
||||
closeCreate();
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal opened={createOpened} onClose={() => {
|
||||
setCreateOpened(false)
|
||||
}}>
|
||||
<Modal opened={createOpened} onClose={closeCreate}>
|
||||
<Stack>
|
||||
|
||||
|
||||
<TextInput key="name" label="Name" placeholder="Enter diagram name" required/>
|
||||
<Textarea key="description" label="Description" placeholder="Enter diagram description"/>
|
||||
<TextInput key="name"
|
||||
label="Name"
|
||||
placeholder="Enter diagram name"
|
||||
value={diagram.name}
|
||||
onChange={(e) => {
|
||||
setDiagram({...diagram, name: e.currentTarget.value})
|
||||
}}
|
||||
required/>
|
||||
<Textarea key="description"
|
||||
label="Description"
|
||||
value={diagram.description}
|
||||
onChange={(e) => {
|
||||
setDiagram({...diagram, description: e.currentTarget.value})
|
||||
}}
|
||||
placeholder="Enter diagram description"/>
|
||||
<Group>
|
||||
<Checkbox w={250} key="private" label="Private" disabled={true}/>
|
||||
<Checkbox w={250}
|
||||
key="private"
|
||||
label="Private"
|
||||
checked={diagram.private}
|
||||
onChange={(e) => {
|
||||
setDiagram({...diagram, private: e.currentTarget.checked})
|
||||
}}
|
||||
disabled={true}/>
|
||||
<Pill>Basic</Pill>
|
||||
</Group>
|
||||
<Group>
|
||||
<Checkbox w={250} key="encrypted" label="Encrypted" disabled={true}/>
|
||||
<Checkbox w={250}
|
||||
key="encrypted"
|
||||
label="Encrypted"
|
||||
checked={diagram.encrypted}
|
||||
onChange={(e) => {
|
||||
setDiagram({...diagram, encrypted: e.currentTarget.checked})
|
||||
}}
|
||||
disabled={true}/>
|
||||
<Pill>Pro</Pill>
|
||||
</Group>
|
||||
<Group>
|
||||
<Checkbox w={250} key="invite" label="Invite Collaborators" disabled={true}/>
|
||||
<Checkbox w={250}
|
||||
key="invite"
|
||||
label="Invite Collaborators"
|
||||
checked={diagram.invite}
|
||||
onChange={(e) => {
|
||||
setDiagram({...diagram, invite: e.currentTarget.checked})
|
||||
}}
|
||||
disabled={true}/>
|
||||
<Pill>Pro</Pill>
|
||||
</Group>
|
||||
<Group>
|
||||
<Button key="create" onClick={createDiagram}>Create</Button>
|
||||
<Anchor p={5} size="sm" key="cancel" onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setCreateOpened(false)
|
||||
closeCreate()
|
||||
}}>Cancel</Anchor>
|
||||
</Group>
|
||||
</Stack>
|
||||
|
||||
@ -1,36 +1,56 @@
|
||||
import {Button, Card, Modal, Paper, SimpleGrid, Stack} from "@mantine/core";
|
||||
import {Button, Card, Container, Group, Modal, Paper, SimpleGrid, Stack} from "@mantine/core";
|
||||
import React from "react";
|
||||
import {useDoc, usePouch} from "use-pouchdb";
|
||||
import {IconPencilBolt, IconTrash} from "@tabler/icons-react";
|
||||
|
||||
export default function ManageDiagramsModal({manageOpened, setManageOpened}) {
|
||||
const diagrams = [
|
||||
{name: "Diagram 1", description: "Description 1"},
|
||||
{name: "Diagram 1", description: "Description 1"},
|
||||
{name: "Diagram 1", description: "Description 1"},
|
||||
{name: "Diagram 1", description: "Description 1"},
|
||||
{name: "Diagram 1", description: "Description 1"},
|
||||
{name: "Diagram 1", description: "Description 1"},
|
||||
]
|
||||
|
||||
export default function ManageDiagramsModal({openCreate, manageOpened, closeManage}) {
|
||||
const {doc: diagram, error} = useDoc('directory', {}, {_id: 'directory', diagrams: []});
|
||||
const [selected, setSelected] = React.useState(null);
|
||||
const db = usePouch();
|
||||
if (error) {
|
||||
console.error('Error getting diagram document');
|
||||
if (error.status === 404) {
|
||||
console.log('Creating new diagram document');
|
||||
db.put({_id: 'directory', diagrams: []});
|
||||
}
|
||||
return <></>;
|
||||
}
|
||||
const diagrams = diagram.diagrams || [];
|
||||
console.log(diagrams);
|
||||
const cards = diagrams.map((diagram) => {
|
||||
return (<Card><h1>{diagram.name}</h1></Card>)
|
||||
return (
|
||||
<Card key={diagram._id}>
|
||||
<Card.Section>
|
||||
<Container w={512} h={64}>{diagram.name}</Container>
|
||||
</Card.Section>
|
||||
<Card.Section>
|
||||
<Container w={512} h={128}>
|
||||
{diagram.description}
|
||||
</Container>
|
||||
</Card.Section>
|
||||
<Card.Section>
|
||||
<Group justify="space-evenly">
|
||||
<Button leftSection={<IconPencilBolt size={16}/>} size="xs">Select</Button>
|
||||
<Button bg="red" size="xs"><IconTrash size={16}/></Button>
|
||||
</Group>
|
||||
</Card.Section>
|
||||
</Card>
|
||||
)
|
||||
});
|
||||
|
||||
const buildCreateButton = () => {
|
||||
if (diagrams.length < 6) {
|
||||
return <Button size="lg" disabled={false}>Create</Button>
|
||||
return <Button size="lg" onClick={openCreate} disabled={false}>Create</Button>
|
||||
} else {
|
||||
return (<Stack>
|
||||
<Button size="lg" disabled={true}>Create</Button>
|
||||
<Paper>You've reached the max number of diagrams for this Tier.</Paper>
|
||||
<Button size="xl">Upgrade To Pro</Button>
|
||||
<Button key="create" size="lg" disabled={true}>Create</Button>
|
||||
<Paper key="upgrademessage">You've reached the max number of diagrams for this Tier.</Paper>
|
||||
<Button key="upgradebutton" size="xl">Upgrade To Pro</Button>
|
||||
</Stack>)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal opened={manageOpened} size="lg" onClose={() => {
|
||||
setManageOpened(false)
|
||||
}}>
|
||||
<Modal opened={manageOpened} size="lg" onClose={closeManage}>
|
||||
<h1>Select a Diagram</h1>
|
||||
<SimpleGrid cols={3}>
|
||||
{cards}
|
||||
|
||||
@ -1,24 +1,33 @@
|
||||
import VrApp from '../../vrApp';
|
||||
import {useEffect, useState} from "react";
|
||||
import {Affix, Burger, Group, Menu, useMantineTheme} from "@mantine/core";
|
||||
//import VrApp from '../../vrApp';
|
||||
import React, {useEffect, useState} from "react";
|
||||
import {Affix, Burger, Group, Menu} from "@mantine/core";
|
||||
import VrTemplate from "../vrTemplate";
|
||||
import {IconStar} from "@tabler/icons-react";
|
||||
import VrMenuItem from "../components/vrMenuItem";
|
||||
import CreateDiagramModal from "./createDiagramModal";
|
||||
import ManageDiagramsModal from "./manageDiagramsModal";
|
||||
|
||||
import {useNavigate} from "react-router-dom";
|
||||
import {useDisclosure} from "@mantine/hooks";
|
||||
|
||||
export default function VrExperience() {
|
||||
const theme = useMantineTheme();
|
||||
const [createDiagram, setCreateDiagram] = useState(false);
|
||||
const [manageDiagrams, setManageDiagrams] = useState(false);
|
||||
const [immersiveDisabled, setImmersiveDisabled] = useState(true);
|
||||
const [createOpened, {open: openCreate, close: closeCreate}] = useDisclosure(false);
|
||||
const [manageOpened, {open: openManage, close: closeManage}] = useDisclosure(false);
|
||||
useEffect(() => {
|
||||
const vrApp = new VrApp(document.querySelector('#gameCanvas')); // code to run after render goes here
|
||||
}, []);
|
||||
const data = window.localStorage.getItem('createOpened');
|
||||
if (data === 'true') {
|
||||
openCreate();
|
||||
}
|
||||
navigator.xr.isSessionSupported('immersive-vr').then((supported) => {
|
||||
setImmersiveDisabled(!supported);
|
||||
});
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
console.log('Create Opened: ', createOpened);
|
||||
window.localStorage.setItem('createOpened', createOpened ? 'true' : 'false');
|
||||
}, [createOpened])
|
||||
|
||||
const [immersiveDisabled, setImmersiveDisabled] = useState(true);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const availableInFree = () => {
|
||||
return null
|
||||
@ -36,14 +45,40 @@ export default function VrExperience() {
|
||||
const event = new CustomEvent('enterXr', {bubbles: true});
|
||||
window.dispatchEvent(event);
|
||||
}
|
||||
const createModal = () => {
|
||||
if (createOpened) {
|
||||
return <CreateDiagramModal createOpened={createOpened} closeCreate={closeCreate}/>
|
||||
} else {
|
||||
return <></>
|
||||
}
|
||||
}
|
||||
const manageModal = () => {
|
||||
if (manageOpened) {
|
||||
return <ManageDiagramsModal openCreate={openCreate}
|
||||
manageOpened={manageOpened} closeManage={closeManage}/>
|
||||
} else {
|
||||
return <></>
|
||||
}
|
||||
}
|
||||
console.log('VrExperience');
|
||||
return (
|
||||
<React.StrictMode>
|
||||
<VrTemplate>
|
||||
{createModal()}
|
||||
{manageModal()}
|
||||
<Affix position={{top: 30, left: 60}}>
|
||||
<Menu trigger="hover" openDelay={50} closeDelay={400}>
|
||||
<Menu.Target>
|
||||
<Burger size="xl"/>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown>
|
||||
<VrMenuItem
|
||||
tip={"Exit modeling environment and go back to main site"}
|
||||
onClick={() => {
|
||||
navigate("/")
|
||||
}}
|
||||
label="Home"
|
||||
availableIcon={availableInFree()}/>
|
||||
<VrMenuItem
|
||||
tip={immersiveDisabled ? "Browser does not support WebXR. Immersive experience best viewed with Meta Quest headset" : "Enter Immersive Mode"}
|
||||
onClick={enterImmersive}
|
||||
@ -66,9 +101,7 @@ export default function VrExperience() {
|
||||
<VrMenuItem
|
||||
tip="Create a new diagram from scratch"
|
||||
label="Create"
|
||||
onClick={() => {
|
||||
setCreateDiagram(!createDiagram)
|
||||
}}
|
||||
onClick={openCreate}
|
||||
availableIcon={availableInFree()}/>
|
||||
<VrMenuItem
|
||||
tip="Create a new diagram from predefined template"
|
||||
@ -78,9 +111,7 @@ export default function VrExperience() {
|
||||
<VrMenuItem
|
||||
tip="Manage Diagrams"
|
||||
label="Manage"
|
||||
onClick={() => {
|
||||
setManageDiagrams(!manageDiagrams)
|
||||
}}
|
||||
onClick={openManage}
|
||||
availableIcon={availableInFree()}/>
|
||||
<Menu.Divider/>
|
||||
<VrMenuItem
|
||||
@ -92,8 +123,9 @@ export default function VrExperience() {
|
||||
</Menu>
|
||||
</Affix>
|
||||
<canvas id="gameCanvas" style={{width: '100%', height: '100vh'}}/>
|
||||
<CreateDiagramModal createOpened={createDiagram} setCreateOpened={setCreateDiagram}/>
|
||||
<ManageDiagramsModal manageOpened={manageDiagrams} setManageOpened={setManageDiagrams}/>
|
||||
|
||||
|
||||
</VrTemplate>
|
||||
</React.StrictMode>
|
||||
)
|
||||
}
|
||||
@ -18,7 +18,7 @@ export const theme = createTheme({
|
||||
},
|
||||
breakpoints: {
|
||||
xs: '30em',
|
||||
sm: '45em',
|
||||
sm: '54em',
|
||||
md: '64em',
|
||||
lg: '74em',
|
||||
xl: '90em',
|
||||
|
||||
@ -1,11 +1,20 @@
|
||||
import {Container} from "@mantine/core";
|
||||
import {Container, MantineProvider} from "@mantine/core";
|
||||
|
||||
import React from "react";
|
||||
import {theme} from "./theme";
|
||||
import {Provider} from "use-pouchdb";
|
||||
import PouchDB from 'pouchdb';
|
||||
|
||||
const db = new PouchDB('mydb');
|
||||
export default function VrTemplate(props: { children: React.ReactNode }) {
|
||||
return (
|
||||
<Provider pouchdb={db}>
|
||||
<MantineProvider defaultColorScheme="dark" theme={theme}>
|
||||
|
||||
<Container fluid={true}>
|
||||
{props.children}
|
||||
</Container>
|
||||
</MantineProvider>
|
||||
</Provider>
|
||||
)
|
||||
}
|
||||
|
||||
@ -3,8 +3,6 @@ import '@mantine/core/styles.css';
|
||||
import React from "react";
|
||||
import {RouterProvider} from "react-router-dom";
|
||||
import {webRouter} from "./webRouter";
|
||||
import {theme} from "./theme";
|
||||
import {MantineProvider} from "@mantine/core";
|
||||
|
||||
export default function WebApp() {
|
||||
document.addEventListener('promptpassword', () => {
|
||||
@ -14,8 +12,7 @@ export default function WebApp() {
|
||||
}
|
||||
});
|
||||
|
||||
return (<MantineProvider defaultColorScheme="dark" theme={theme}>
|
||||
return (
|
||||
<RouterProvider router={webRouter}/>
|
||||
</MantineProvider>
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user