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

wip

Browse source
This commit is contained in:
Magnus Åhall 2024-12-03 22:08:45 +01:00
parent 04c101982f
commit 13d0b15fd9
15 changed files with 507 additions and 1246 deletions
Download patch file Download diff file Expand all files Collapse all files

58
static/css/notes2.css
View file

@ -2,16 +2,43 @@ html {
background-color: #fff;
}
#notes2 {
display: grid;
grid-template-columns: min-content 1fr;
min-height: 100vh;
display: grid;
grid-template-areas: "tree crumbs" "tree name" "tree content" "tree checklist" "tree schedule" "tree files" "tree blank";
grid-template-columns: min-content 1fr;
grid-template-rows: min-content /* crumbs */ min-content /* name */ min-content /* content */ min-content /* checklist */ min-content /* schedule */ min-content /* files */ 1fr;
/* blank */
}
@media only screen and (max-width: 600px) {
#notes2 {
grid-template-areas: "crumbs" "name" "content" "checklist" "schedule" "files" "blank";
grid-template-columns: 1fr;
grid-template-rows: min-content /* crumbs */ min-content /* name */ min-content /* content */ min-content /* checklist */ min-content /* schedule */ min-content /* files */ 1fr;
/* blank */
}
#notes2 #tree {
display: none;
}
}
#tree {
grid-area: tree;
padding: 16px;
background-color: #333;
color: #ddd;
z-index: 100;
}
#tree #logo {
display: grid;
position: relative;
justify-items: center;
margin-bottom: 32px;
margin-left: 24px;
margin-right: 24px;
}
#tree #logo img {
width: 128px;
left: -20px;
}
#tree .node {
display: grid;
grid-template-columns: 24px min-content;
@ -44,6 +71,9 @@ html {
display: none;
}
#crumbs {
grid-area: crumbs;
display: grid;
justify-items: center;
margin: 16px;
}
.crumbs {
@ -52,7 +82,7 @@ html {
padding: 8px 16px;
background: #e4e4e4;
color: #333;
border-radius: 6px;
border-radius: 5px;
}
.crumbs .crumb {
margin-right: 8px;
@ -72,12 +102,21 @@ html {
content: '';
margin-left: 0px;
}
#name {
color: #666;
font-weight: bold;
text-align: center;
font-size: 1.15em;
margin-top: 32px;
margin-bottom: 16px;
}
/* ============================================================= *
* Textarea replicates the height of an element expanding height *
* ============================================================= */
.grow-wrap {
/* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
display: grid;
grid-area: content;
font-size: 1em;
}
.grow-wrap::after {
@ -109,16 +148,7 @@ html {
grid-area: 1 / 1 / 2 / 2;
}
/* ============================================================= */
.node-name {
background: #fff;
color: #000;
text-align: center;
font-weight: bold;
margin-top: 32px;
margin-bottom: 32px;
font-size: 1.5em;
}
.node-content {
#node-content {
justify-self: center;
word-wrap: break-word;
font-family: monospace;
@ -129,7 +159,7 @@ html {
border: none;
outline: none;
}
.node-content:invalid {
#node-content:invalid {
background: #f5f5f5;
padding-top: 16px;
}

9
static/js/lib/node_modules/.package-lock.json generated vendored
View file

@ -13,6 +13,15 @@
"engines": {
"node": ">= 18"
}
},
"node_modules/preact": {
"version": "10.25.1",
"resolved": "https://registry.npmjs.org/preact/-/preact-10.25.1.tgz",
"integrity": "sha512-frxeZV2vhQSohQwJ7FvlqC40ze89+8friponWUFeVEkaCfhC6Eu4V0iND5C9CXz8JLndV07QRDeXzH1+Anz5Og==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/preact"
}
}
}
}

12
static/js/lib/package-lock.json generated
View file

@ -5,7 +5,8 @@
"packages": {
"": {
"dependencies": {
"marked": "^11.1.1"
"marked": "^11.1.1",
"preact": "^10.25.1"
}
},
"node_modules/marked": {
@ -18,6 +19,15 @@
"engines": {
"node": ">= 18"
}
},
"node_modules/preact": {
"version": "10.25.1",
"resolved": "https://registry.npmjs.org/preact/-/preact-10.25.1.tgz",
"integrity": "sha512-frxeZV2vhQSohQwJ7FvlqC40ze89+8friponWUFeVEkaCfhC6Eu4V0iND5C9CXz8JLndV07QRDeXzH1+Anz5Og==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/preact"
}
}
}
}

3
static/js/lib/package.json
View file

@ -1,5 +1,6 @@
{
"dependencies": {
"marked": "^11.1.1"
"marked": "^11.1.1",
"preact": "^10.25.1"
}
}

923
static/js/node.mjs
View file

File diff suppressed because it is too large Load diff

77
static/js/node_store.mjs
View file

@ -1,4 +1,7 @@
import { API } from 'api'
import { Node } from 'node'
export const ROOT_NODE = '00000000-0000-0000-0000-000000000000'
export class NodeStore {
constructor() {//{{{
@ -47,7 +50,9 @@ export class NodeStore {
req.onsuccess = (event) => {
this.db = event.target.result
resolve()
this.initializeRootNode().then(() =>
resolve()
)
}
req.onerror = (event) => {
@ -55,6 +60,35 @@ export class NodeStore {
}
})
}//}}}
initializeRootNode() {//{{{
return new Promise((resolve, reject) => {
// The root node is a magical node which displays as the first node if none is specified.
// If not already existing, it will be created.
const trx = this.db.transaction('nodes', 'readwrite')
const nodes = trx.objectStore('nodes')
const getRequest = nodes.get(ROOT_NODE)
getRequest.onsuccess = (event) => {
// Root node exists - nice!
if (event.target.result !== undefined) {
resolve(event.target.result)
return
}
const putRequest = nodes.put({
UUID: ROOT_NODE,
Name: 'Notes2',
Content: 'Hello, World!',
})
putRequest.onsuccess = (event) => {
resolve(event.target.result)
}
putRequest.onerror = (event) => {
reject(event.target.error)
}
}
getRequest.onerror = (event) => reject(event.target.error)
})
}//}}}
async getAppState(key) {//{{{
return new Promise((resolve, reject) => {
@ -95,7 +129,7 @@ export class NodeStore {
})
}//}}}
async updateTreeRecords(records) {//{{{
async upsertTreeRecords(records) {//{{{
return new Promise((resolve, reject) => {
const t = this.db.transaction('treeNodes', 'readwrite')
const nodeStore = t.objectStore('treeNodes')
@ -131,6 +165,24 @@ export class NodeStore {
})
}//}}}
async getTreeNodes(parent, newLevel) {//{{{
return new Promise((resolve, reject) => {
const trx = this.db.transaction('treeNodes', 'readonly')
const nodeStore = trx.objectStore('treeNodes')
const index = nodeStore.index('parentIndex')
const req = index.getAll(parent)
req.onsuccess = (event) => {
const nodes = []
for (const i in event.target.result) {
const node = new Node(event.target.result[i], newLevel)
nodes.push(node)
}
resolve(nodes)
}
req.onerror = (event) => reject(event.target.error)
})
}//}}}
async add(records) {//{{{
return new Promise((resolve, reject) => {
try {
@ -161,27 +213,29 @@ export class NodeStore {
}
})
}//}}}
async get(id) {//{{{
async get(uuid) {//{{{
return new Promise((resolve, reject) => {
// Node is always returned from IndexedDB if existing there.
// Otherwise an attempt to get it from backend is executed.
const trx = this.db.transaction('nodes', 'readonly')
const nodeStore = trx.objectStore('nodes')
const getRequest = nodeStore.get(id)
const getRequest = nodeStore.get(uuid)
getRequest.onsuccess = (event) => {
// Node found in IndexedDB and returned.
if (event.target.result !== undefined) {
resolve(event.target.result)
const node = new Node(event.target.result, -1)
resolve(node)
return
}
// Node not found and a request to the backend is made.
API.query("POST", `/node/retrieve/${id}`, {})
API.query("POST", `/node/retrieve/${uuid}`, {})
.then(res => {
const trx = this.db.transaction('nodes', 'readwrite')
const nodeStore = trx.objectStore('nodes')
const putRequest = nodeStore.put(res.Node)
putRequest.onsuccess = () => resolve(res.Node)
const node = new Node(res.Node, -1)
putRequest.onsuccess = () => resolve(node)
putRequest.onerror = (event) => {
reject(event.target.error)
}
@ -190,15 +244,6 @@ export class NodeStore {
}
})
}//}}}
async getTreeNodes() {//{{{
return new Promise((resolve, reject) => {
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

143
static/js/app.mjs → static/js/notes2.mjs
View file

@ -1,46 +1,65 @@
import { h, Component, createRef } from 'preact'
import { signal } from 'preact/signals'
import htm from 'htm'
import { API } from 'api'
import { Node, NodeUI } from 'node'
import { ROOT_NODE } from 'node_store'
const html = htm.bind(h)
export class Notes2 {
export class Notes2 extends Component {
state = {
startNode: null,
}
constructor() {//{{{
this.startNode = null
this.tree = null
super()
this.tree = createRef()
this.nodeUI = createRef()
this.nodeModified = signal(false)
this.setStartNode()
this.getStartNode()
}//}}}
render() {//{{{
render({}, { startNode }) {//{{{
if (startNode === null)
return
return html`
<${Tree} ref=${this.tree} app=${this} />
<div class="nodeui">
<${NodeUI} app=${this} ref=${this.nodeUI} />
<${Tree} ref=${this.tree} app=${this} startNode=${startNode} />
<div id="nodeui">
<${NodeUI} app=${this} ref=${this.nodeUI} startNode=${startNode} />
</div>
`
}//}}}
setStartNode() {//{{{
/*
const urlParams = new URLSearchParams(window.location.search)
const nodeID = urlParams.get('node')
*/
getStartNode() {//{{{
let nodeUUID = ROOT_NODE
// Is a UUID provided on the URI as an anchor?
const parts = document.URL.split('#')
const nodeID = parts[1]
if (parts[1]?.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i))
nodeUUID = parts[1]
this.startNode = new Node(this, nodeID ? Number.parseInt(nodeID) : 0)
nodeStore.get(nodeUUID).then(node => {
this.setState({ startNode: node })
})
}//}}}
goToNode(nodeUUID, dontPush) {//{{{
// Don't switch notes until saved.
if (this.nodeUI.current.nodeModified.value) {
if (!confirm("Changes not saved. Do you want to discard changes?"))
return
}
treeGet() {//{{{
const req = {}
API.query('POST', '/node/tree', req)
.then(response => {
console.log(response.Nodes)
nodeStore.add(response.Nodes)
})
.catch(e => console.log(e.type, e.error))
if (!dontPush)
history.pushState({ nodeUUID }, '', `/notes2#${nodeUUID}`)
// New node is fetched in order to retrieve content and files.
// Such data is unnecessary to transfer for tree/navigational purposes.
nodeStore.get(nodeUUID).then(node => {
this.nodeUI.current.setNode(node)
//this.showPage('node')
})
}//}}}
logout() {//{{{
localStorage.removeItem('session.UUID')
location.href = '/'
}//}}}
}
@ -53,19 +72,25 @@ class Tree extends Component {
this.selectedTreeNode = null
this.props.app.tree = this
this.retrieve()
this.populateFirstLevel()
}//}}}
render({ app }) {//{{{
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} />`
this.treeNodeComponents[node.UUID] = createRef()
return html`<${TreeNode} key=${`treenode_${node.UUID}`} tree=${this} node=${node} ref=${this.treeNodeComponents[node.UUID]} selected=${node.UUID === app.startNode?.UUID} />`
})
return html`<div id="tree">${renderedTreeTrunk}</div>`
return html`
<div id="tree">
<div id="logo"><img src="/images/${_VERSION}/logo.svg" /></div>
${renderedTreeTrunk}
</div>`
}//}}}
retrieve(callback = null) {//{{{
nodeStore.getTreeNodes()
.then(res => {
populateFirstLevel(callback = null) {//{{{
nodeStore.getTreeNodes('', 0)
.then(async res => {
res.sort(Node.sort)
this.treeNodes = {}
this.treeNodeComponents = {}
this.treeTrunk = []
@ -75,26 +100,13 @@ 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.
for (const nodeData of res) {
const node = new Node(
this,
nodeData.ID,
)
node.Children = []
node.Crumbs = []
node.Files = []
node.Level = nodeData.Level
node.Name = nodeData.Name
node.ParentID = nodeData.ParentID
node.Updated = nodeData.Updated
node.UserID = nodeData.UserID
for (const node of res) {
this.treeNodes[node.UUID] = node
this.treeNodes[node.ID] = node
if (node.ParentID === 0)
if (node.ParentUUID === '')
this.treeTrunk.push(node)
else if (this.treeNodes[node.ParentID] !== undefined)
this.treeNodes[node.ParentID].Children.push(node)
else if (this.treeNodes[node.ParentUUD] !== undefined)
this.treeNodes[node.ParentUUID].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
@ -137,15 +149,15 @@ class Tree extends Component {
if (node !== undefined)
this.setSelected(node)
}//}}}
expandToTrunk(nodeID) {//{{{
let node = this.treeNodes[nodeID]
expandToTrunk(nodeUUID) {//{{{
let node = this.treeNodes[nodeUUID]
if (node === undefined)
return
node = this.treeNodes[node.ParentID]
node = this.treeNodes[node.ParentUUID]
while (node !== undefined) {
this.treeNodeComponents[node.ID].current.expanded.value = true
node = this.treeNodes[node.ParentID]
this.treeNodeComponents[node.UUID].current.expanded.value = true
node = this.treeNodes[node.ParentUUID]
}
}//}}}
}
@ -155,12 +167,19 @@ class TreeNode extends Component {
super(props)
this.selected = signal(props.selected)
this.expanded = signal(this.props.node._expanded)
this.children_populated = signal(false)
if (this.props.node.Level === 0)
this.fetchChildren()
}//}}}
render({ tree, node }) {//{{{
render({ tree, node, parent }) {//{{{
// Fetch the next level of children if the parent tree node is expanded and our children thus will be visible.
if (!this.children_populated.value && parent?.expanded.value)
this.fetchChildren()
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} />`
tree.treeNodeComponents[node.UUID] = createRef()
return html`<${TreeNode} key=${`treenode_${node.UUID}`} tree=${tree} node=${node} parent=${this} ref=${tree.treeNodeComponents[node.UUID]} selected=${node.UUID === tree.props.app.startNode?.UUID} />`
})
let expandImg = ''
@ -173,16 +192,20 @@ class TreeNode extends Component {
expandImg = html`<img src="/images/${window._VERSION}/collapsed.svg" />`
}
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._notes2.current.nodeUI.current.goToNode(node.ID)}>${node.Name}</div>
<div class="name ${selected}" onclick=${() => window._notes2.current.goToNode(node.UUID)}>${node.Name}</div>
<div class="children ${node.Children.length > 0 && this.expanded.value ? 'expanded' : 'collapsed'}">${children}</div>
</div>`
}//}}}
fetchChildren() {//{{{
this.props.node.fetchChildren().then(() => {
this.children_populated.value = true
})
}//}}}
}
// vim: foldmethod=marker

36
static/js/sync.mjs
View file

@ -1,10 +1,14 @@
import { API } from 'api'
export class Sync {
constructor() {
this.foo = ''
}
static async tree() {
try {
const state = await nodeStore.getAppState('latest_sync')
let oldMax = (state?.value ? state.value : 0)
const oldMax = (state?.value ? state.value : 0)
let newMax = 0
let offset = 0
@ -16,40 +20,12 @@ export class Sync {
res = await API.query('POST', `/node/tree/${oldMax}/${offset}`, {})
offset += res.Nodes.length
newMax = res.MaxSeq
await nodeStore.updateTreeRecords(res.Nodes)
await nodeStore.upsertTreeRecords(res.Nodes)
} while (res.Continue)
nodeStore.setAppState('latest_sync', Math.max(oldMax, newMax))
} catch (e) {
console.log('sync node tree', e)
}
/*
nodeStore.getAppState('latest_sync')
.then(state => {
if (state !== null) {
oldMax = state.value
return state.value
}
return 0
})
.then(async sequence => {
let offset = 0
let res = { Continue: false }
try {
do {
res = await API.query('POST', `/node/tree/${sequence}/${offset}`, {})
offset += res.Nodes.length
newMax = res.MaxSeq
await nodeStore.updateTreeRecords(res.Nodes)
} while (res.Continue)
} catch (e) {
return new Promise((_, reject) => reject(e))
}
})
.then(() => nodeStore.setAppState('latest_sync', Math.max(oldMax, newMax)))
.catch(e => console.log('sync', e))
*/
}
}

94
static/less/notes2.less
View file

@ -5,18 +5,75 @@ html {
}
#notes2 {
display: grid;
grid-template-columns: min-content 1fr;
min-height: 100vh;
display: grid;
grid-template-areas:
"tree crumbs"
"tree name"
"tree content"
"tree checklist"
"tree schedule"
"tree files"
"tree blank"
;
grid-template-columns: min-content 1fr;
grid-template-rows:
min-content /* crumbs */
min-content /* name */
min-content /* content */
min-content /* checklist */
min-content /* schedule */
min-content /* files */
1fr; /* blank */
@media only screen and (max-width: 600px) {
grid-template-areas:
"crumbs"
"name"
"content"
"checklist"
"schedule"
"files"
"blank"
;
grid-template-columns: 1fr;
grid-template-rows:
min-content /* crumbs */
min-content /* name */
min-content /* content */
min-content /* checklist */
min-content /* schedule */
min-content /* files */
1fr; /* blank */
#tree {
display: none;
}
}
}
#tree {
//grid-area: tree;
grid-area: tree;
padding: 16px;
background-color: #333;
color: #ddd;
z-index: 100; // Over crumbs shadow
#logo {
display: grid;
position: relative;
justify-items: center;
margin-bottom: 32px;
margin-left: 24px;
margin-right: 24px;
img {
width: 128px;
left: -20px;
}
}
.node {
display: grid;
grid-template-columns: 24px min-content;
@ -62,17 +119,20 @@ html {
}
#crumbs {
//grid-area: crumbs;
grid-area: crumbs;
display: grid;
justify-items: center;
margin: 16px;
}
.crumbs {
background: #e4e4e4;
display: flex;
flex-wrap: wrap;
padding: 8px 16px;
background: #e4e4e4;
color: #333;
border-radius: 6px;
border-radius: 5px;
.crumb {
margin-right: 8px;
@ -97,13 +157,22 @@ html {
}
#name {
color: @color3;
font-weight: bold;
text-align: center;
font-size: 1.15em;
margin-top: 32px;
margin-bottom: 16px;
}
/* ============================================================= *
* Textarea replicates the height of an element expanding height *
* ============================================================= */
.grow-wrap {
/* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
display: grid;
//grid-area: content;
grid-area: content;
font-size: 1.0em;
}
.grow-wrap::after {
@ -139,18 +208,8 @@ html {
grid-area: 1 / 1 / 2 / 2;
}
/* ============================================================= */
.node-name {
background: #fff;
color: #000;
text-align: center;
font-weight: bold;
margin-top: 32px;
margin-bottom: 32px;
font-size: 1.5em;
}
.node-content {
//grid-area: content;
#node-content {
justify-self: center;
word-wrap: break-word;
font-family: monospace;
@ -160,7 +219,6 @@ html {
resize: none;
border: none;
outline: none;
&:invalid {
background: #f5f5f5;

2
static/service_worker.js
View file

@ -15,7 +15,7 @@ const CACHED_ASSETS = [
'/js/{{ .VERSION }}/api.mjs',
'/js/{{ .VERSION }}/node_store.mjs',
'/js/{{ .VERSION }}/app.mjs',
'/js/{{ .VERSION }}/notes2.mjs',
'/js/{{ .VERSION }}/key.mjs',
'/js/{{ .VERSION }}/crypto.mjs',
'/js/{{ .VERSION }}/checklist.mjs',