magnus/Notes2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Rewrite

Browse source
This commit is contained in:
Magnus Åhall 2024-12-03 06:53:31 +01:00
parent 42b66714aa
commit ac8b334eee
35 changed files with 541 additions and 675 deletions
Download patch file Download diff file Expand all files Collapse all files

17
static/js/app.mjs
View file

@ -8,20 +8,28 @@ const html = htm.bind(h)
export class Notes2 {
constructor() {//{{{
this.startNode = null
this.tree = createRef()
this.tree = null
this.nodeUI = createRef()
this.nodeModified = signal(false)
this.setStartNode()
}//}}}
render() {//{{{
return html`
<button onclick=${() => API.logout()}>Log out</button>
<${Tree} ref=${this.tree} app=${this} />
<${NodeUI} app=${this} ref=${this.nodeUI} />
<div class="nodeui">
<${NodeUI} app=${this} ref=${this.nodeUI} />
</div>
`
}//}}}
setStartNode() {//{{{
/*
const urlParams = new URLSearchParams(window.location.search)
const nodeID = urlParams.get('node')
*/
const parts = document.URL.split('#')
const nodeID = parts[1]
this.startNode = new Node(this, nodeID ? Number.parseInt(nodeID) : 0)
}//}}}
@ -43,6 +51,7 @@ class Tree extends Component {
this.treeNodeComponents = {}
this.treeTrunk = []
this.selectedTreeNode = null
this.props.app.tree = this
this.retrieve()
}//}}}
@ -100,6 +109,7 @@ class Tree extends Component {
.catch(e => { console.log(e); console.log(e.type, e.error); alert(e.error) })
}//}}}
setSelected(node) {//{{{
return // TODO
if (this.selectedTreeNode)
this.selectedTreeNode.selected.value = false
@ -109,6 +119,7 @@ class Tree extends Component {
this.expandToTrunk(node.ID)
}//}}}
crumbsUpdateNodes(node) {//{{{
console.log('crumbs', this.props.app.startNode.Crumbs)
for (const crumb in this.props.app.startNode.Crumbs) {
// Start node is loaded before the tree.
const node = this.treeNodes[crumb.ID]

74
static/js/node.mjs
View file

@ -113,7 +113,7 @@ export class NodeUI extends Component {
return html`
<${menu} />
<header class="${modified}" onclick=${() => this.saveNode()}>
<!--header class="${modified}" onclick=${() => this.saveNode()}>
<div class="tree"><img src="/images/${window._VERSION}/tree.svg" onclick=${() => document.getElementById('app').classList.toggle('toggle-tree')} /></div>
<div class="name">Notes</div>
<div class="markdown" onclick=${evt => { evt.stopPropagation(); this.toggleMarkdown() }}><img src="/images/${window._VERSION}/${node.RenderMarkdown.value ? 'markdown.svg' : 'markdown-hollow.svg'}" /></div>
@ -122,10 +122,12 @@ export class NodeUI extends Component {
<div class="add" onclick=${evt => this.createNode(evt)}><img src="/images/${window._VERSION}/add.svg" /></div>
<div class="keys" onclick=${evt => { evt.stopPropagation(); this.showPage('keys') }}><img src="/images/${window._VERSION}/padlock.svg" /></div>
<div class="menu" onclick=${evt => this.showMenu(evt)}>☰</div>
</header>
</header-->
<div id="crumbs">
<div class="crumbs">${crumbs}</crumbs>
<div style="display: grid; justify-items: center;">
<div id="crumbs">
<div class="crumbs">${crumbs}</crumbs>
</div>
</div>
${page}
@ -134,7 +136,8 @@ export class NodeUI extends Component {
async componentDidMount() {//{{{
// When rendered and fetching the node, keys could be needed in order to
// decrypt the content.
await this.retrieveKeys()
/* TODO - implement keys.
await this.retrieveKeys() */
this.props.app.startNode.retrieve(node => {
this.node.value = node
@ -209,15 +212,13 @@ 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}`)
history.pushState({ nodeID }, '', `/notes2#${nodeID}`)
// New node is fetched in order to retrieve content and files.
// Such data is unnecessary to transfer for tree/navigational purposes.
@ -229,7 +230,7 @@ export class NodeUI extends Component {
// Tree needs to know another node is selected, in order to render any
// previously selected node not selected.
this.props.app.tree.setSelected(node)
//this.props.app.tree.setSelected(node)
// Hide tree toggle, as this would be the next natural action to do manually anyway.
// At least in mobile mode.
@ -335,7 +336,7 @@ class NodeContent extends Component {
`
}
var element
let element
if (node.RenderMarkdown.value)
element = html`<${MarkdownContent} key='markdown-content' content=${content} />`
else
@ -350,6 +351,17 @@ class NodeContent extends Component {
componentDidMount() {//{{{
this.resize()
window.addEventListener('resize', () => this.resize())
const contentResizeObserver = new ResizeObserver(entries => {
for (const idx in entries) {
const w = entries[idx].contentRect.width
document.getElementById('crumbs').style.width = `${w}px`
}
});
const nodeContent = document.getElementById('node-content')
contentResizeObserver.observe(nodeContent);
}//}}}
componentDidUpdate() {//{{{
this.resize()
@ -361,7 +373,7 @@ class NodeContent extends Component {
this.resize()
}//}}}
resize() {//{{{
let textarea = document.getElementById('node-content')
const textarea = document.getElementById('node-content')
if (textarea)
textarea.parentNode.dataset.replicatedValue = textarea.value
}//}}}
@ -467,27 +479,29 @@ export class Node {
// Used to expand the crumbs upon site loading.
}//}}}
retrieve(callback) {//{{{
nodeStore.get(this.ID).then(node => {
this.ParentID = node.ParentID
this.UserID = node.UserID
this.CryptoKeyID = node.CryptoKeyID
this.Name = node.Name
this._content = node.Content
this.Children = node.Children
this.Crumbs = node.Crumbs
this.Files = node.Files
this.Markdown = node.Markdown
//this.RenderMarkdown.value = this.Markdown
this.initChecklist(node.ChecklistGroups)
callback(this)
})
.catch(e => { console.log(e); alert(e) })
/* TODO - implement schedules
this.app.request('/schedule/list', { NodeID: this.ID })
.then(res => {
this.ScheduleEvents.value = res.ScheduleEvents
})
*/
this.app.request('/node/retrieve', { ID: this.ID })
.then(res => {
this.ParentID = res.Node.ParentID
this.UserID = res.Node.UserID
this.CryptoKeyID = res.Node.CryptoKeyID
this.Name = res.Node.Name
this._content = res.Node.Content
this.Children = res.Node.Children
this.Crumbs = res.Node.Crumbs
this.Files = res.Node.Files
this.Markdown = res.Node.Markdown
this.RenderMarkdown.value = this.Markdown
this.initChecklist(res.Node.ChecklistGroups)
callback(this)
})
.catch(this.app.responseError)
}//}}}
delete(callback) {//{{{
this.app.request('/node/delete', {
@ -1044,7 +1058,7 @@ class ScheduleEventListTab extends Component {
if (evt.RemindMinutes > 0)
return html`${evt.RemindMinutes} min`
}
const nodeLink = () => html`<a href="/?node=${evt.Node.ID}">${evt.Node.Name}</a>`
const nodeLink = () => html`<a href="/notes2#${evt.Node.ID}">${evt.Node.Name}</a>`
return html`
@ -1108,12 +1122,12 @@ class ScheduleCalendarTab extends Component {
return {
title: sch.Description,
start: sch.Time,
url: `/?node=${sch.Node.ID}`,
url: `/notes2#${sch.Node.ID}`,
}
})
successCallback(fullcalendarEvents)
})
.catch(err=>failureCallback(err))
.catch(err => failureCallback(err))
}
}

95
static/js/node_store.mjs
View file

@ -10,13 +10,15 @@ export class NodeStore {
}//}}}
async initializeDB() {//{{{
return new Promise((resolve, reject) => {
const req = indexedDB.open('notes', 2)
const req = indexedDB.open('notes', 3)
// Schema upgrades for IndexedDB.
// These can start from different points depending on updates to Notes2 since a device was online.
req.onupgradeneeded = (event) => {
let store
let treeNodes
let nodes
let appState
const db = event.target.result
const trx = event.target.transaction
@ -26,12 +28,19 @@ export class NodeStore {
// The schema transformations.
switch (i) {
case 1:
store = db.createObjectStore('nodes', { keyPath: 'ID' })
store.createIndex('nameIndex', 'Name', { unique: false })
treeNodes = db.createObjectStore('treeNodes', { keyPath: 'UUID' })
treeNodes.createIndex('nameIndex', 'Name', { unique: false })
nodes = db.createObjectStore('nodes', { keyPath: 'UUID' })
nodes.createIndex('nameIndex', 'Name', { unique: false })
break
case 2:
trx.objectStore('nodes').createIndex('parentIndex', 'ParentID', { unique: false })
trx.objectStore('treeNodes').createIndex('parentIndex', 'ParentUUID', { unique: false })
break
case 3:
appState = db.createObjectStore('appState', { keyPath: 'key' })
}
}
}
@ -47,6 +56,78 @@ export class NodeStore {
})
}//}}}
async getAppState(key) {//{{{
return new Promise((resolve, reject) => {
const trx = this.db.transaction('appState', 'readonly')
const appState = trx.objectStore('appState')
const getRequest = appState.get(key)
getRequest.onsuccess = (event) => {
if (event.target.result !== undefined) {
resolve(event.target.result)
} else {
resolve(null)
}
}
getRequest.onerror = (event) => reject(event.target.error)
})
}//}}}
async setAppState(key, value) {//{{{
return new Promise((resolve, reject) => {
try {
const t = this.db.transaction('appState', 'readwrite')
const appState = t.objectStore('appState')
t.onerror = (event) => {
console.log('transaction error', event.target.error)
reject(event.target.error)
}
t.oncomplete = () => {
resolve()
}
const record = { key, value }
const addReq = appState.put(record)
addReq.onerror = (event) => {
console.log('Error!', event.target.error, key, value)
}
} catch (e) {
reject(e)
}
})
}//}}}
async updateTreeRecords(records) {//{{{
return new Promise((resolve, reject) => {
try {
let max = 0
const t = this.db.transaction('treeNodes', 'readwrite')
const nodeStore = t.objectStore('treeNodes')
t.onerror = (event) => {
console.log('transaction error', event.target.error)
reject(event.target.error)
}
t.oncomplete = () => {
console.log(max)
resolve(max)
}
// records is an object, not an array.
for (const i in records) {
const record = records[i]
const addReq = nodeStore.put(record)
addReq.onsuccess = () => {
max = Math.max(max, record.CreatedSeq, record.UpdatedSeq, record.DeletedSeq.Int64)
console.log('OK!', record.UUID, record.Name)
}
addReq.onerror = (event) => {
console.log('Error!', event.target.error, record.UUID)
}
}
} catch (e) {
console.log(e)
}
})
}//}}}
async add(records) {//{{{
return new Promise((resolve, reject) => {
try {
@ -60,7 +141,9 @@ export class NodeStore {
resolve()
}
for (const record in records) {
// records is an object, not an array.
for (const recordIdx in records) {
const record = records[recordIdx]
const addReq = nodeStore.put(record)
addReq.onsuccess = () => {
console.log('OK!', record.ID, record.Name)

19
static/js/sync.mjs Normal file
View file

@ -0,0 +1,19 @@
import { API } from 'api'
export class Sync {
static async tree() {
let oldMax = 0
nodeStore.getAppState('latest_sync')
.then(state => {
if (state !== null) {
oldMax = state.value
return state.value
}
return 0
})
.then(sequence => API.query('POST', `/node/tree/${sequence}`, {}))
.then(res => nodeStore.updateTreeRecords(res.Nodes))
.then(newMax => nodeStore.setAppState('latest_sync', Math.max(oldMax, newMax)))
.catch(e => alert(e))
}
}