wip
This commit is contained in:
Magnus Åhall
parent
04c101982f
commit
13d0b15fd9
@ -1,6 +1,6 @@
|
||||
<mxfile host="app.diagrams.net" agent="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36" version="24.7.8">
|
||||
<mxfile host="app.diagrams.net" agent="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36" version="25.0.1">
|
||||
<diagram name="Page-1" id="G2-a1oUG1H-bwT7ce2_Y">
|
||||
<mxGraphModel dx="986" dy="620" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
|
||||
<mxGraphModel dx="698" dy="423" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
|
||||
<root>
|
||||
<mxCell id="0" />
|
||||
<mxCell id="1" style="" parent="0" />
|
||||
@ -10,33 +10,36 @@
|
||||
<mxCell id="rRo1dadeA1uCrzt-e38k-27" value="<b>Backend</b><div>PostgreSQL</div>" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" parent="1" vertex="1">
|
||||
<mxGeometry x="680" y="40" width="100" height="40" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="rRo1dadeA1uCrzt-e38k-28" value="<b>Frontend</b><div>notes2.mjs</div>" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" parent="1" vertex="1">
|
||||
<mxGeometry x="40" y="40" width="100" height="40" as="geometry" />
|
||||
<mxCell id="_PY1-sNXTUqCv9qV1nWE-2" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;endArrow=classic;endFill=1;" edge="1" parent="1" source="rRo1dadeA1uCrzt-e38k-28" target="_PY1-sNXTUqCv9qV1nWE-1">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="rRo1dadeA1uCrzt-e38k-28" value="<b>Notes2 Component</b>" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" parent="1" vertex="1">
|
||||
<mxGeometry x="1200" y="40" width="150" height="40" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="rRo1dadeA1uCrzt-e38k-29" value="<b>NodeStore</b>" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" parent="1" vertex="1">
|
||||
<mxGeometry x="200" y="40" width="100" height="40" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="rRo1dadeA1uCrzt-e38k-30" value="" style="endArrow=none;html=1;rounded=0;strokeColor=#B3B3B3;" parent="1" edge="1">
|
||||
<mxGeometry width="50" height="50" relative="1" as="geometry">
|
||||
<mxPoint x="89.5" y="780" as="sourcePoint" />
|
||||
<mxPoint x="90" y="480" as="sourcePoint" />
|
||||
<mxPoint x="89.5" y="80" as="targetPoint" />
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
<mxCell id="rRo1dadeA1uCrzt-e38k-31" value="" style="endArrow=none;html=1;rounded=0;strokeColor=#B3B3B3;" parent="1" edge="1">
|
||||
<mxGeometry width="50" height="50" relative="1" as="geometry">
|
||||
<mxPoint x="249.5" y="780" as="sourcePoint" />
|
||||
<mxPoint x="250" y="480" as="sourcePoint" />
|
||||
<mxPoint x="249.5" y="80" as="targetPoint" />
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
<mxCell id="rRo1dadeA1uCrzt-e38k-32" value="" style="endArrow=none;html=1;rounded=0;strokeColor=#B3B3B3;" parent="1" edge="1">
|
||||
<mxGeometry width="50" height="50" relative="1" as="geometry">
|
||||
<mxPoint x="570" y="780" as="sourcePoint" />
|
||||
<mxPoint x="570" y="480" as="sourcePoint" />
|
||||
<mxPoint x="570" y="80" as="targetPoint" />
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
<mxCell id="rRo1dadeA1uCrzt-e38k-33" value="" style="endArrow=none;html=1;rounded=0;strokeColor=#B3B3B3;" parent="1" edge="1">
|
||||
<mxGeometry width="50" height="50" relative="1" as="geometry">
|
||||
<mxPoint x="729.5" y="780" as="sourcePoint" />
|
||||
<mxPoint x="730" y="480" as="sourcePoint" />
|
||||
<mxPoint x="729.5" y="80" as="targetPoint" />
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
@ -45,10 +48,50 @@
|
||||
</mxCell>
|
||||
<mxCell id="rRo1dadeA1uCrzt-e38k-59" value="" style="endArrow=none;html=1;rounded=0;strokeColor=#B3B3B3;" parent="1" edge="1">
|
||||
<mxGeometry width="50" height="50" relative="1" as="geometry">
|
||||
<mxPoint x="409.5" y="780" as="sourcePoint" />
|
||||
<mxPoint x="410" y="480" as="sourcePoint" />
|
||||
<mxPoint x="409.5" y="80" as="targetPoint" />
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
<mxCell id="_PY1-sNXTUqCv9qV1nWE-4" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;startArrow=classic;startFill=1;" edge="1" parent="1" source="_PY1-sNXTUqCv9qV1nWE-1" target="_PY1-sNXTUqCv9qV1nWE-3">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="_PY1-sNXTUqCv9qV1nWE-7" value="&nbsp;nodeStore.getTreeNodes()&nbsp;<div>First level of tree nodes</div>" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="_PY1-sNXTUqCv9qV1nWE-4">
|
||||
<mxGeometry x="-0.0383" y="-3" relative="1" as="geometry">
|
||||
<mxPoint x="8" y="-28" as="offset" />
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
<mxCell id="_PY1-sNXTUqCv9qV1nWE-11" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="_PY1-sNXTUqCv9qV1nWE-1" target="_PY1-sNXTUqCv9qV1nWE-10">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="_PY1-sNXTUqCv9qV1nWE-1" value="<b>Tree Component</b>" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="1">
|
||||
<mxGeometry x="1215" y="150" width="120" height="50" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="_PY1-sNXTUqCv9qV1nWE-3" value="<b>NodeStore</b>" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
|
||||
<mxGeometry x="1620" y="150" width="90" height="50" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="_PY1-sNXTUqCv9qV1nWE-9" value="[]Nodes" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" vertex="1" parent="1">
|
||||
<mxGeometry x="1450" y="178" width="60" height="30" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="_PY1-sNXTUqCv9qV1nWE-13" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="_PY1-sNXTUqCv9qV1nWE-10" target="_PY1-sNXTUqCv9qV1nWE-12">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="_PY1-sNXTUqCv9qV1nWE-10" value="<b>TreeNode Component</b>" style="whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;rounded=1;" vertex="1" parent="1">
|
||||
<mxGeometry x="1215" y="270" width="120" height="60" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="_PY1-sNXTUqCv9qV1nWE-16" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;" edge="1" parent="1" source="_PY1-sNXTUqCv9qV1nWE-12" target="_PY1-sNXTUqCv9qV1nWE-3">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="_PY1-sNXTUqCv9qV1nWE-17" value="getTreeNodes()<div>for children of node</div>" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="_PY1-sNXTUqCv9qV1nWE-16">
|
||||
<mxGeometry x="0.0125" y="1" relative="1" as="geometry">
|
||||
<mxPoint as="offset" />
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
<mxCell id="_PY1-sNXTUqCv9qV1nWE-12" value="<b>Node</b>" style="whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;rounded=1;" vertex="1" parent="1">
|
||||
<mxGeometry x="1605" y="270" width="120" height="60" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="_PY1-sNXTUqCv9qV1nWE-15" value="When rendered, and parent is expanded,<div>fetchChildren()</div>" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" vertex="1" parent="1">
|
||||
<mxGeometry x="1340" y="263" width="240" height="40" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="rRo1dadeA1uCrzt-e38k-44" value="Floats" style="" parent="0" />
|
||||
<mxCell id="rRo1dadeA1uCrzt-e38k-54" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" parent="rRo1dadeA1uCrzt-e38k-44" vertex="1">
|
||||
<mxGeometry x="240" y="120" width="20" height="140" as="geometry" />
|
||||
|
||||
6
file.go
6
file.go
@ -44,20 +44,20 @@ func AddFile(userID int, file *File) (err error) { // {{{
|
||||
err = rows.Scan(&file.ID)
|
||||
return
|
||||
} // }}}
|
||||
func Files(userID, nodeID, fileID int) (files []File, err error) { // {{{
|
||||
func Files(userID int, nodeUUID string, fileID int) (files []File, err error) { // {{{
|
||||
var rows *sqlx.Rows
|
||||
rows, err = db.Queryx(
|
||||
`SELECT *
|
||||
FROM file
|
||||
WHERE
|
||||
user_id = $1 AND
|
||||
node_id = $2 AND
|
||||
node_uuid = $2 AND
|
||||
CASE $3::int
|
||||
WHEN 0 THEN true
|
||||
ELSE id = $3
|
||||
END`,
|
||||
userID,
|
||||
nodeID,
|
||||
nodeUUID,
|
||||
fileID,
|
||||
)
|
||||
if err != nil {
|
||||
|
||||
21
main.go
21
main.go
@ -26,6 +26,7 @@ const VERSION = "v1"
|
||||
const CONTEXT_USER = 1
|
||||
|
||||
var (
|
||||
FlagGenerate bool
|
||||
FlagDev bool
|
||||
FlagConfig string
|
||||
FlagCreateUser string
|
||||
@ -56,6 +57,7 @@ func init() { // {{{
|
||||
|
||||
flag.StringVar(&FlagConfig, "config", cfgFilename, "Configuration file")
|
||||
flag.BoolVar(&FlagDev, "dev", false, "Use local files instead of embedded files")
|
||||
flag.BoolVar(&FlagGenerate, "generate", false, "Generate test data")
|
||||
flag.StringVar(&FlagCreateUser, "create-user", "", "Username for creating a new user")
|
||||
flag.StringVar(&FlagChangePassword, "change-password", "", "Change the password for the given username")
|
||||
flag.Parse()
|
||||
@ -85,6 +87,16 @@ func main() { // {{{
|
||||
// The session manager contains authentication, authorization and session settings.
|
||||
AuthManager, err = authentication.NewManager(db, Log, config.JWT.Secret, config.JWT.ExpireDays)
|
||||
|
||||
// Generate test data?
|
||||
if FlagGenerate {
|
||||
err := TestData()
|
||||
if err != nil {
|
||||
fmt.Printf("%s\n", err)
|
||||
return
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
// A new user?
|
||||
if FlagCreateUser != "" {
|
||||
createNewUser(FlagCreateUser)
|
||||
@ -111,7 +123,7 @@ func main() { // {{{
|
||||
http.HandleFunc("/user/authenticate", AuthManager.AuthenticationHandler)
|
||||
|
||||
http.HandleFunc("/node/tree/{timestamp}/{offset}", authenticated(actionNodeTree))
|
||||
http.HandleFunc("/node/retrieve/{id}", authenticated(actionNodeRetrieve))
|
||||
http.HandleFunc("/node/retrieve/{uuid}", authenticated(actionNodeRetrieve))
|
||||
|
||||
http.HandleFunc("/service_worker.js", pageServiceWorker)
|
||||
|
||||
@ -241,17 +253,14 @@ func actionNodeTree(w http.ResponseWriter, r *http.Request) { // {{{
|
||||
MaxSeq uint64
|
||||
Continue bool
|
||||
}{true, nodes, maxSeq, moreRowsExist})
|
||||
Log.Debug("tree", "nodes", nodes)
|
||||
w.Write(j)
|
||||
} // }}}
|
||||
func actionNodeRetrieve(w http.ResponseWriter, r *http.Request) { // {{{
|
||||
user := getUser(r)
|
||||
var err error
|
||||
|
||||
idStr := r.PathValue("id")
|
||||
id, _ := strconv.Atoi(idStr)
|
||||
|
||||
node, err := RetrieveNode(user.ID, id)
|
||||
uuid := r.PathValue("uuid")
|
||||
node, err := RetrieveNode(user.ID, uuid)
|
||||
if err != nil {
|
||||
responseError(w, err)
|
||||
return
|
||||
|
||||
306
node.go
306
node.go
@ -38,15 +38,13 @@ type TreeNode struct {
|
||||
}
|
||||
|
||||
type Node struct {
|
||||
ID int
|
||||
UserID int `db:"user_id"`
|
||||
ParentID int `db:"parent_id"`
|
||||
CryptoKeyID int `db:"crypto_key_id"`
|
||||
UUID string
|
||||
UserID int `db:"user_id"`
|
||||
ParentUUID string `db:"parent_uuid"`
|
||||
CryptoKeyID int `db:"crypto_key_id"`
|
||||
Name string
|
||||
Content string
|
||||
Updated time.Time
|
||||
Children []Node
|
||||
Crumbs []Node
|
||||
Files []File
|
||||
Complete bool
|
||||
Level int
|
||||
@ -58,7 +56,7 @@ type Node struct {
|
||||
}
|
||||
|
||||
func NodeTree(userID, offset int, synced uint64) (nodes []TreeNode, maxSeq uint64, moreRowsExist bool, err error) { // {{{
|
||||
const LIMIT = 8
|
||||
const LIMIT = 100
|
||||
var rows *sqlx.Rows
|
||||
rows, err = db.Queryx(`
|
||||
SELECT
|
||||
@ -84,7 +82,7 @@ func NodeTree(userID, offset int, synced uint64) (nodes []TreeNode, maxSeq uint6
|
||||
LIMIT $2 OFFSET $3
|
||||
`,
|
||||
userID,
|
||||
LIMIT + 1,
|
||||
LIMIT+1,
|
||||
offset,
|
||||
synced,
|
||||
)
|
||||
@ -122,244 +120,58 @@ func NodeTree(userID, offset int, synced uint64) (nodes []TreeNode, maxSeq uint6
|
||||
|
||||
return
|
||||
} // }}}
|
||||
func RetrieveNode(userID, nodeID int) (node Node, err error) { // {{{
|
||||
if nodeID == 0 {
|
||||
return RootNode(userID)
|
||||
}
|
||||
|
||||
var rows *sqlx.Rows
|
||||
rows, err = db.Queryx(`
|
||||
WITH RECURSIVE recurse AS (
|
||||
SELECT
|
||||
id,
|
||||
user_id,
|
||||
COALESCE(parent_id, 0) AS parent_id,
|
||||
COALESCE(crypto_key_id, 0) AS crypto_key_id,
|
||||
name,
|
||||
content,
|
||||
content_encrypted,
|
||||
markdown,
|
||||
0 AS level
|
||||
FROM node
|
||||
WHERE
|
||||
user_id = $1 AND
|
||||
id = $2
|
||||
|
||||
UNION
|
||||
|
||||
SELECT
|
||||
n.id,
|
||||
n.user_id,
|
||||
n.parent_id,
|
||||
COALESCE(n.crypto_key_id, 0) AS crypto_key_id,
|
||||
n.name,
|
||||
'' AS content,
|
||||
'' AS content_encrypted,
|
||||
false AS markdown,
|
||||
r.level + 1 AS level
|
||||
FROM node n
|
||||
INNER JOIN recurse r ON n.parent_id = r.id AND r.level = 0
|
||||
WHERE
|
||||
n.user_id = $1
|
||||
)
|
||||
|
||||
SELECT * FROM recurse ORDER BY level ASC
|
||||
`,
|
||||
userID,
|
||||
nodeID,
|
||||
)
|
||||
if err != nil {
|
||||
return
|
||||
}
|
||||
defer rows.Close()
|
||||
|
||||
type resultRow struct {
|
||||
Node
|
||||
Level int
|
||||
}
|
||||
|
||||
node = Node{}
|
||||
node.Children = []Node{}
|
||||
for rows.Next() {
|
||||
row := resultRow{}
|
||||
if err = rows.StructScan(&row); err != nil {
|
||||
return
|
||||
}
|
||||
|
||||
if row.Level == 0 {
|
||||
node.ID = row.ID
|
||||
node.UserID = row.UserID
|
||||
node.ParentID = row.ParentID
|
||||
node.CryptoKeyID = row.CryptoKeyID
|
||||
node.Name = row.Name
|
||||
node.Complete = true
|
||||
node.Markdown = row.Markdown
|
||||
|
||||
if node.CryptoKeyID > 0 {
|
||||
node.Content = row.ContentEncrypted
|
||||
} else {
|
||||
node.Content = row.Content
|
||||
}
|
||||
|
||||
node.retrieveChecklist()
|
||||
}
|
||||
|
||||
if row.Level == 1 {
|
||||
node.Children = append(node.Children, Node{
|
||||
ID: row.ID,
|
||||
UserID: row.UserID,
|
||||
ParentID: row.ParentID,
|
||||
CryptoKeyID: row.CryptoKeyID,
|
||||
Name: row.Name,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
node.Crumbs, err = NodeCrumbs(node.ID)
|
||||
node.Files, err = Files(userID, node.ID, 0)
|
||||
|
||||
return
|
||||
} // }}}
|
||||
func RootNode(userID int) (node Node, err error) { // {{{
|
||||
var rows *sqlx.Rows
|
||||
rows, err = db.Queryx(`
|
||||
SELECT
|
||||
id,
|
||||
user_id,
|
||||
0 AS parent_id,
|
||||
name
|
||||
FROM node
|
||||
WHERE
|
||||
user_id = $1 AND
|
||||
parent_id IS NULL
|
||||
`,
|
||||
userID,
|
||||
)
|
||||
if err != nil {
|
||||
return
|
||||
}
|
||||
defer rows.Close()
|
||||
|
||||
node.Name = "Start"
|
||||
node.UserID = userID
|
||||
node.Complete = true
|
||||
node.Children = []Node{}
|
||||
node.Crumbs = []Node{}
|
||||
node.Files = []File{}
|
||||
for rows.Next() {
|
||||
row := Node{}
|
||||
if err = rows.StructScan(&row); err != nil {
|
||||
return
|
||||
}
|
||||
|
||||
node.Children = append(node.Children, Node{
|
||||
ID: row.ID,
|
||||
UserID: row.UserID,
|
||||
ParentID: row.ParentID,
|
||||
Name: row.Name,
|
||||
})
|
||||
}
|
||||
|
||||
return
|
||||
} // }}}
|
||||
func (node *Node) retrieveChecklist() (err error) { // {{{
|
||||
var rows *sqlx.Rows
|
||||
rows, err = db.Queryx(`
|
||||
func RetrieveNode(userID int, nodeUUID string) (node Node, err error) { // {{{
|
||||
var rows *sqlx.Row
|
||||
rows = db.QueryRowx(`
|
||||
SELECT
|
||||
g.id AS group_id,
|
||||
g.order AS group_order,
|
||||
g.label AS group_label,
|
||||
|
||||
COALESCE(i.id, 0) AS item_id,
|
||||
COALESCE(i.order, 0) AS item_order,
|
||||
COALESCE(i.label, '') AS item_label,
|
||||
COALESCE(i.checked, false) AS checked
|
||||
|
||||
FROM public.checklist_group g
|
||||
LEFT JOIN public.checklist_item i ON i.checklist_group_id = g.id
|
||||
uuid,
|
||||
user_id,
|
||||
COALESCE(parent_uuid, '') AS parent_uuid,
|
||||
/*COALESCE(crypto_key_id, 0) AS crypto_key_id,*/
|
||||
name,
|
||||
content,
|
||||
content_encrypted,
|
||||
markdown,
|
||||
0 AS level
|
||||
FROM node
|
||||
WHERE
|
||||
g.node_id = $1
|
||||
ORDER BY
|
||||
g.order DESC,
|
||||
i.order DESC
|
||||
`, node.ID)
|
||||
if err != nil {
|
||||
user_id = $1 AND
|
||||
uuid = $2
|
||||
|
||||
`,
|
||||
userID,
|
||||
nodeUUID,
|
||||
)
|
||||
node = Node{}
|
||||
if err = rows.StructScan(&node); err != nil {
|
||||
return
|
||||
}
|
||||
defer rows.Close()
|
||||
|
||||
groups := make(map[int]*ChecklistGroup)
|
||||
var found bool
|
||||
var group *ChecklistGroup
|
||||
var item ChecklistItem
|
||||
for rows.Next() {
|
||||
row := struct {
|
||||
GroupID int `db:"group_id"`
|
||||
GroupOrder int `db:"group_order"`
|
||||
GroupLabel string `db:"group_label"`
|
||||
|
||||
ItemID int `db:"item_id"`
|
||||
ItemOrder int `db:"item_order"`
|
||||
ItemLabel string `db:"item_label"`
|
||||
Checked bool
|
||||
}{}
|
||||
err = rows.StructScan(&row)
|
||||
if err != nil {
|
||||
return
|
||||
}
|
||||
|
||||
if group, found = groups[row.GroupID]; !found {
|
||||
group = new(ChecklistGroup)
|
||||
group.ID = row.GroupID
|
||||
group.NodeID = node.ID
|
||||
group.Order = row.GroupOrder
|
||||
group.Label = row.GroupLabel
|
||||
group.Items = []ChecklistItem{}
|
||||
groups[group.ID] = group
|
||||
}
|
||||
|
||||
item = ChecklistItem{}
|
||||
item.ID = row.ItemID
|
||||
item.GroupID = row.GroupID
|
||||
item.Order = row.ItemOrder
|
||||
item.Label = row.ItemLabel
|
||||
item.Checked = row.Checked
|
||||
|
||||
if item.ID > 0 {
|
||||
group.Items = append(group.Items, item)
|
||||
}
|
||||
}
|
||||
|
||||
node.ChecklistGroups = []ChecklistGroup{}
|
||||
for _, group := range groups {
|
||||
node.ChecklistGroups = append(node.ChecklistGroups, *group)
|
||||
}
|
||||
|
||||
return
|
||||
} // }}}
|
||||
func NodeCrumbs(nodeID int) (nodes []Node, err error) { // {{{
|
||||
func NodeCrumbs(nodeUUID string) (nodes []Node, err error) { // {{{
|
||||
var rows *sqlx.Rows
|
||||
rows, err = db.Queryx(`
|
||||
WITH RECURSIVE nodes AS (
|
||||
SELECT
|
||||
id,
|
||||
COALESCE(parent_id, 0) AS parent_id,
|
||||
uuid,
|
||||
COALESCE(parent_uuid, '') AS parent_uuid,
|
||||
name
|
||||
FROM node
|
||||
WHERE
|
||||
id = $1
|
||||
uuid = $1
|
||||
|
||||
UNION
|
||||
|
||||
SELECT
|
||||
n.id,
|
||||
COALESCE(n.parent_id, 0) AS parent_id,
|
||||
n.uuid,
|
||||
COALESCE(n.parent_uuid, 0) AS parent_uuid,
|
||||
n.name
|
||||
FROM node n
|
||||
INNER JOIN nodes nr ON n.id = nr.parent_id
|
||||
INNER JOIN nodes nr ON n.uuid = nr.parent_uuid
|
||||
)
|
||||
SELECT * FROM nodes
|
||||
`, nodeID)
|
||||
`, nodeUUID)
|
||||
if err != nil {
|
||||
return
|
||||
}
|
||||
@ -375,3 +187,49 @@ func NodeCrumbs(nodeID int) (nodes []Node, err error) { // {{{
|
||||
}
|
||||
return
|
||||
} // }}}
|
||||
|
||||
func TestData() (err error) {
|
||||
for range 10 {
|
||||
hash1, name1, _ := generateOneTestNode("", "G")
|
||||
for range 10 {
|
||||
hash2, name2, _ := generateOneTestNode(hash1, name1)
|
||||
for range 10 {
|
||||
hash3, name3, _ := generateOneTestNode(hash2, name2)
|
||||
for range 10 {
|
||||
generateOneTestNode(hash3, name3)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
func generateOneTestNode(parentUUID, parentPath string) (hash, name string, err error) {
|
||||
var sqlParentUUID sql.NullString
|
||||
if parentUUID != "" {
|
||||
sqlParentUUID.String = parentUUID
|
||||
sqlParentUUID.Valid = true
|
||||
}
|
||||
query := `
|
||||
INSERT INTO node(user_id, parent_uuid, name)
|
||||
VALUES(
|
||||
1,
|
||||
$1,
|
||||
CONCAT(
|
||||
$2::text,
|
||||
'-',
|
||||
LPAD(nextval('test_data')::text, 4, '0')
|
||||
)
|
||||
)
|
||||
RETURNING uuid, name`
|
||||
|
||||
var row *sql.Row
|
||||
row = db.QueryRow(query, sqlParentUUID, parentPath)
|
||||
err = row.Scan(&hash, &name)
|
||||
if err != nil {
|
||||
return
|
||||
}
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
@ -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
9
static/js/lib/node_modules/.package-lock.json
generated
vendored
@ -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
12
static/js/lib/package-lock.json
generated
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
{
|
||||
"dependencies": {
|
||||
"marked": "^11.1.1"
|
||||
"marked": "^11.1.1",
|
||||
"preact": "^10.25.1"
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -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
|
||||
|
||||
@ -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
|
||||
@ -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))
|
||||
*/
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -10,7 +10,7 @@ import 'preact/debug'
|
||||
import 'preact/devtools'
|
||||
{{- end }}
|
||||
import { NodeStore } from 'node_store'
|
||||
import { Notes2 } from "/js/{{ .VERSION }}/app.mjs"
|
||||
import { Notes2 } from "/js/{{ .VERSION }}/notes2.mjs"
|
||||
import { API } from 'api'
|
||||
|
||||
if (!API.hasAuthenticationToken()) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user