wip
This commit is contained in:
Magnus Åhall
parent
1d6ba99a36
commit
42b66714aa
@ -2,25 +2,27 @@ import { h, Component, createRef } from 'preact'
|
||||
import { signal } from 'preact/signals'
|
||||
import htm from 'htm'
|
||||
import { API } from 'api'
|
||||
import { Node } from 'node'
|
||||
import { Node, NodeUI } from 'node'
|
||||
const html = htm.bind(h)
|
||||
|
||||
export class Notes2 {
|
||||
constructor() {//{{{
|
||||
this.startNode = null
|
||||
this.tree = createRef()
|
||||
this.nodeUI = createRef()
|
||||
this.setStartNode()
|
||||
}//}}}
|
||||
render() {//{{{
|
||||
return html`
|
||||
<button onclick=${() => API.logout()}>Log out</button>
|
||||
<${Tree} ref=${this.tree} app=${this} />
|
||||
<${NodeUI} app=${this} ref=${this.nodeUI} />
|
||||
`
|
||||
}//}}}
|
||||
setStartNode() {//{{{
|
||||
let urlParams = new URLSearchParams(window.location.search)
|
||||
let nodeID = urlParams.get('node')
|
||||
this.startNode = new Node(this, nodeID ? parseInt(nodeID) : 0)
|
||||
const urlParams = new URLSearchParams(window.location.search)
|
||||
const nodeID = urlParams.get('node')
|
||||
this.startNode = new Node(this, nodeID ? Number.parseInt(nodeID) : 0)
|
||||
}//}}}
|
||||
|
||||
treeGet() {//{{{
|
||||
@ -45,9 +47,9 @@ class Tree extends Component {
|
||||
this.retrieve()
|
||||
}//}}}
|
||||
render({ app }) {//{{{
|
||||
let renderedTreeTrunk = this.treeTrunk.map(node => {
|
||||
const renderedTreeTrunk = this.treeTrunk.map(node => {
|
||||
this.treeNodeComponents[node.ID] = createRef()
|
||||
return html`<${TreeNode} key=${"treenode_" + node.ID} tree=${this} node=${node} ref=${this.treeNodeComponents[node.ID]} selected=${node.ID == app.startNode.ID} />`
|
||||
return html`<${TreeNode} key=${`treenode_${node.ID}`} tree=${this} node=${node} ref=${this.treeNodeComponents[node.ID]} selected=${node.ID === app.startNode.ID} />`
|
||||
})
|
||||
return html`<div id="tree">${renderedTreeTrunk}</div>`
|
||||
}//}}}
|
||||
@ -64,8 +66,8 @@ class Tree extends Component {
|
||||
// returned from the server to be sorted in such a way that
|
||||
// a parent node always appears before a child node.
|
||||
// The server uses a recursive SQL query delivering this.
|
||||
res.forEach(nodeData => {
|
||||
let node = new Node(
|
||||
for (const nodeData of res) {
|
||||
const node = new Node(
|
||||
this,
|
||||
nodeData.ID,
|
||||
)
|
||||
@ -80,11 +82,11 @@ class Tree extends Component {
|
||||
|
||||
this.treeNodes[node.ID] = node
|
||||
|
||||
if (node.ParentID == 0)
|
||||
if (node.ParentID === 0)
|
||||
this.treeTrunk.push(node)
|
||||
else if (this.treeNodes[node.ParentID] !== undefined)
|
||||
this.treeNodes[node.ParentID].Children.push(node)
|
||||
})
|
||||
}
|
||||
// When starting with an explicit node value, expanding all nodes
|
||||
// on its path gives the user a sense of location. Not necessarily working
|
||||
// as the start node isn't guaranteed to have returned data yet.
|
||||
@ -107,17 +109,17 @@ class Tree extends Component {
|
||||
this.expandToTrunk(node.ID)
|
||||
}//}}}
|
||||
crumbsUpdateNodes(node) {//{{{
|
||||
this.props.app.startNode.Crumbs.forEach(crumb => {
|
||||
for (const crumb in this.props.app.startNode.Crumbs) {
|
||||
// Start node is loaded before the tree.
|
||||
let node = this.treeNodes[crumb.ID]
|
||||
const node = this.treeNodes[crumb.ID]
|
||||
if (node)
|
||||
node._expanded = true
|
||||
|
||||
// Tree is done before the start node.
|
||||
let component = this.treeNodeComponents[crumb.ID]
|
||||
if (component && component.current)
|
||||
const component = this.treeNodeComponents[crumb.ID]
|
||||
if (component?.component.current)
|
||||
component.current.expanded.value = true
|
||||
})
|
||||
}
|
||||
|
||||
// Will be undefined when called from tree initialization
|
||||
// (as tree nodes aren't rendered yet)
|
||||
@ -145,13 +147,13 @@ class TreeNode extends Component {
|
||||
}//}}}
|
||||
render({ tree, node }) {//{{{
|
||||
|
||||
let children = node.Children.map(node => {
|
||||
const children = node.Children.map(node => {
|
||||
tree.treeNodeComponents[node.ID] = createRef()
|
||||
return html`<${TreeNode} key=${"treenode_" + node.ID} tree=${tree} node=${node} ref=${tree.treeNodeComponents[node.ID]} selected=${node.ID == tree.props.app.startNode.ID} />`
|
||||
return html`<${TreeNode} key=${`treenode_${node.ID}`} tree=${tree} node=${node} ref=${tree.treeNodeComponents[node.ID]} selected=${node.ID === tree.props.app.startNode.ID} />`
|
||||
})
|
||||
|
||||
let expandImg = ''
|
||||
if (node.Children.length == 0)
|
||||
if (node.Children.length === 0)
|
||||
expandImg = html`<img src="/images/${window._VERSION}/leaf.svg" />`
|
||||
else {
|
||||
if (this.expanded.value)
|
||||
@ -161,13 +163,15 @@ class TreeNode extends Component {
|
||||
}
|
||||
|
||||
|
||||
let selected = (this.selected.value ? 'selected' : '')
|
||||
const selected = (this.selected.value ? 'selected' : '')
|
||||
|
||||
return html`
|
||||
<div class="node">
|
||||
<div class="expand-toggle" onclick=${() => this.expanded.value ^= true}>${expandImg}</div>
|
||||
<div class="name ${selected}" onclick=${() => window._app.current.nodeUI.current.goToNode(node.ID)}>${node.Name}</div>
|
||||
<div class="expand-toggle" onclick=${() => { this.expanded.value ^= true }}>${expandImg}</div>
|
||||
<div class="name ${selected}" onclick=${() => window._notes2.current.nodeUI.current.goToNode(node.ID)}>${node.Name}</div>
|
||||
<div class="children ${node.Children.length > 0 && this.expanded.value ? 'expanded' : 'collapsed'}">${children}</div>
|
||||
</div>`
|
||||
}//}}}
|
||||
}
|
||||
|
||||
// vim: foldmethod=marker
|
||||
|
||||
@ -16,7 +16,7 @@ export class NodeUI extends Component {
|
||||
this.keys = signal([])
|
||||
this.page = signal('node')
|
||||
window.addEventListener('popstate', evt => {
|
||||
if (evt.state && evt.state.hasOwnProperty('nodeID'))
|
||||
if (evt.state?.hasOwnProperty('nodeID'))
|
||||
this.goToNode(evt.state.nodeID, true)
|
||||
else
|
||||
this.goToNode(0, true)
|
||||
@ -28,7 +28,7 @@ export class NodeUI extends Component {
|
||||
if (this.node.value === null)
|
||||
return
|
||||
|
||||
let node = this.node.value
|
||||
const node = this.node.value
|
||||
document.title = `N: ${node.Name}`
|
||||
|
||||
let crumbs = [
|
||||
@ -39,7 +39,7 @@ export class NodeUI extends Component {
|
||||
html`<div class="crumb" onclick=${() => this.goToNode(node.ID)}>${node.Name}</div>`
|
||||
).reverse())
|
||||
|
||||
let children = node.Children.sort((a, b) => {
|
||||
const children = node.Children.sort((a, b) => {
|
||||
if (a.Name.toLowerCase() > b.Name.toLowerCase()) return 1
|
||||
if (a.Name.toLowerCase() < b.Name.toLowerCase()) return -1
|
||||
return 0
|
||||
@ -56,9 +56,9 @@ export class NodeUI extends Component {
|
||||
let page = ''
|
||||
switch (this.page.value) {
|
||||
case 'node':
|
||||
if (node.ID == 0) {
|
||||
if (node.ID === 0) {
|
||||
page = html`
|
||||
<div style="cursor: pointer; color: #000; text-align: center;" onclick=${() => this.page.value = 'schedule-events'}>Schedule events</div>
|
||||
<div style="cursor: pointer; color: #000; text-align: center;" onclick=${() => { this.page.value = 'schedule-events' }}>Schedule events</div>
|
||||
${children.length > 0 ? html`<div class="child-nodes">${children}</div><div id="notes-version">Notes version ${window._VERSION}</div>` : html``}
|
||||
`
|
||||
} else {
|
||||
@ -104,8 +104,8 @@ export class NodeUI extends Component {
|
||||
break
|
||||
}
|
||||
|
||||
let menu = () => (this.menu.value ? html`<${Menu} nodeui=${this} />` : null)
|
||||
let checklist = () =>
|
||||
const menu = () => (this.menu.value ? html`<${Menu} nodeui=${this} />` : null)
|
||||
const checklist = () =>
|
||||
html`
|
||||
<div class="checklist" onclick=${evt => { evt.stopPropagation(); this.toggleChecklist() }}>
|
||||
<img src="/images/${window._VERSION}/${this.showChecklist() ? 'checklist-on.svg' : 'checklist-off.svg'}" />
|
||||
@ -209,17 +209,19 @@ export class NodeUI extends Component {
|
||||
}//}}}
|
||||
|
||||
goToNode(nodeID, dontPush) {//{{{
|
||||
/* TODO - implement modified values
|
||||
if (this.props.app.nodeModified.value) {
|
||||
if (!confirm("Changes not saved. Do you want to discard changes?"))
|
||||
return
|
||||
}
|
||||
*/
|
||||
|
||||
if (!dontPush)
|
||||
history.pushState({ nodeID }, '', `/?node=${nodeID}`)
|
||||
|
||||
// New node is fetched in order to retrieve content and files.
|
||||
// Such data is unnecessary to transfer for tree/navigational purposes.
|
||||
let node = new Node(this.props.app, nodeID)
|
||||
const node = new Node(this.props.app, nodeID)
|
||||
node.retrieve(node => {
|
||||
this.props.app.nodeModified.value = false
|
||||
this.node.value = node
|
||||
@ -278,12 +280,14 @@ export class NodeUI extends Component {
|
||||
|
||||
async retrieveKeys() {//{{{
|
||||
return new Promise((resolve, reject) => {
|
||||
/* TODO - implement keys in IndexedDB
|
||||
this.props.app.request('/key/retrieve', {})
|
||||
.then(res => {
|
||||
this.keys.value = res.Keys.map(keyData => new Key(keyData, this.keyCounter))
|
||||
resolve(this.keys.value)
|
||||
})
|
||||
.catch(reject)
|
||||
*/
|
||||
})
|
||||
}//}}}
|
||||
keyCounter() {//{{{
|
||||
|
||||
@ -1,24 +1,24 @@
|
||||
import { API } from 'api'
|
||||
|
||||
export class NodeStore {
|
||||
constructor() {
|
||||
constructor() {//{{{
|
||||
if (!('indexedDB' in window)) {
|
||||
throw 'Missing IndexedDB'
|
||||
}
|
||||
|
||||
this.db = null
|
||||
}
|
||||
async initializeDB() {
|
||||
}//}}}
|
||||
async initializeDB() {//{{{
|
||||
return new Promise((resolve, reject) => {
|
||||
let req = indexedDB.open('notes', 2)
|
||||
const req = indexedDB.open('notes', 2)
|
||||
|
||||
|
||||
// Schema upgrades for IndexedDB.
|
||||
// These can start from different points depending on updates to Notes2 since a device was online.
|
||||
req.onupgradeneeded = (event) => {
|
||||
var store
|
||||
let db = event.target.result
|
||||
let trx = event.target.transaction
|
||||
let store
|
||||
const db = event.target.result
|
||||
const trx = event.target.transaction
|
||||
|
||||
for (let i = event.oldVersion + 1; i <= event.newVersion; i++) {
|
||||
console.log(`Upgrade to schema ${i}`)
|
||||
@ -45,13 +45,13 @@ export class NodeStore {
|
||||
reject(event.target.error)
|
||||
}
|
||||
})
|
||||
}
|
||||
}//}}}
|
||||
|
||||
async add(records) {
|
||||
async add(records) {//{{{
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
let t = this.db.transaction('nodes', 'readwrite')
|
||||
let nodeStore = t.objectStore('nodes')
|
||||
const t = this.db.transaction('nodes', 'readwrite')
|
||||
const nodeStore = t.objectStore('nodes')
|
||||
t.onerror = (event) => {
|
||||
console.log('transaction error', event.target.error)
|
||||
reject(event.target.error)
|
||||
@ -60,22 +60,22 @@ export class NodeStore {
|
||||
resolve()
|
||||
}
|
||||
|
||||
records.forEach(record => {
|
||||
let addReq = nodeStore.put(record)
|
||||
addReq.onsuccess = (event) => {
|
||||
for (const record in records) {
|
||||
const addReq = nodeStore.put(record)
|
||||
addReq.onsuccess = () => {
|
||||
console.log('OK!', record.ID, record.Name)
|
||||
}
|
||||
addReq.onerror = (event) => {
|
||||
console.log('Error!', event.target.error, record.ID)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
})
|
||||
}
|
||||
async get(id) {
|
||||
}//}}}
|
||||
async get(id) {//{{{
|
||||
return new Promise((resolve, reject) => {
|
||||
// Node is always returned from IndexedDB if existing there.
|
||||
// Otherwise an attempt to get it from backend is executed.
|
||||
@ -103,14 +103,16 @@ export class NodeStore {
|
||||
.catch(e => reject(e))
|
||||
}
|
||||
})
|
||||
}
|
||||
async getTreeNodes() {
|
||||
}//}}}
|
||||
async getTreeNodes() {//{{{
|
||||
return new Promise((resolve, reject) => {
|
||||
let trx = this.db.transaction('nodes', 'readonly')
|
||||
let nodeStore = trx.objectStore('nodes')
|
||||
let req = nodeStore.getAll()
|
||||
const trx = this.db.transaction('nodes', 'readonly')
|
||||
const nodeStore = trx.objectStore('nodes')
|
||||
const req = nodeStore.getAll()
|
||||
req.onsuccess = (event) => resolve(event.target.result)
|
||||
req.onerror = (event) => reject(event.target.error)
|
||||
})
|
||||
}
|
||||
}//}}}
|
||||
}
|
||||
|
||||
// vim: foldmethod=marker
|
||||
|
||||
Loading…
Reference in New Issue
Block a user