-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnote-app.html
125 lines (116 loc) · 4.33 KB
/
note-app.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<html>
<head>
<head>
<title>Notes: Demo app for solid-ui discovery</title>
<script src="https://timbl.com/timbl/Automation/Library/Mashup/mashlib.js">
</script>
<script>
document.addEventListener('DOMContentLoaded', event => {
// Render one note
function renderNote (note) {
const ele = dom.createElement('div') // @@ xml encode the text
const date = UI.widgets.shortDate(store.anyValue(note, ns.schema('dateCreated'))) // hmm textInputStyle or messageBodyStyle
ele.innerHTML = `<dl>
<dt style='color: 3888;'>${date}<//dt>
<dd style='${UI.style.textInputStyle}'>${store.anyValue(note, ns.schema('text'))}</dd>
</dl>`
return ele
}
/** Sync the UI to match the web data
*/
async function refreshList () {
const notes = store.each(null, ns.rdf('type'), ns.schema('TextDigitalDocument'), nodeListDocument)
var listToSort = notes.map(note => [ store.anyValue(note, ns.schema('dateCreated')), note ])
listToSort.sort()
// listToSort.reverse()
const sortedNotes = listToSort.map(pair => pair[1])
UI.utils.syncTableToArrayReOrdered(container, sortedNotes, renderNote)
}
async function loggedInStatusHandler(webIdUri) {
if (!webIdUri) {
console.log('User logged out')
return
}
context.me = $rdf.sym(webIdUri)
const klass = UI.ns.schema('TextDigitalDocument')
const isPublic = true
await UI.authn.findAppInstances(context, klass, isPublic)
if (context.instances.length === 0) {
console.log('No note list -- need to create one')
} else if (context.instances.length > 1) {
alert('Configuration error: More than on note list.')
} else {
nodeListDocument = context.instances[0]
console.log('nodeListDocument', nodeListDocument)
try {
await store.fetcher.load(nodeListDocument)
} catch (err) {
UI.widgets.complain(context, err)
return
}
await refreshList()
}
}
/** Create a new note on the web
*
* Like <#n123> a :TextDigitalDocument; :text "..."; :dateCreated "..." .
*/
async function createNewNote (text) {
const note = UI.widgets.newThing(nodeListDocument)
const newStatements = [
$rdf.st(note, ns.rdf('type'), ns.schema('TextDigitalDocument'), nodeListDocument),
$rdf.st(note, ns.schema('text'), text, nodeListDocument),
$rdf.st(note, ns.schema('dateCreated'), new Date(), nodeListDocument)
]
try {
await store.updater.update([], newStatements)
} catch (err) {
UI.widgets.complain(context, err)
return
}
refreshList() // Update the UI to reflect the web
}
const UI = panes.UI
const ns = UI.ns
const $rdf = UI.rdf
const dom = document
const store = UI.store
const statusArea = dom.getElementById('statusArea')
var context = {dom, statusArea}
var nodeListDocument
localStorage.clear() // @@ Prevemt issues with authn in its current state
const container = dom.getElementById('noteSpace')
dom.getElementById('logInBox').appendChild(
UI.authn.loginStatusBox(dom, loggedInStatusHandler))
const inputField = dom.getElementById('input')
inputField.style = UI.style.textInputStyle
inputField.addEventListener('keyup',
async function (e) {
if (e.keyCode === 13) {
await createNewNote(inputField.value)
inputField.value = ''
}
},
false
)
container.refresh = refreshList // Live update convention
} ) // on load
</script>
</head>
<body>
<div>
<header id='logInBox'>
</header>
<h2>Your public notes</h2>
<main id='noteSpace'>
</main>
<div>
<dl><dt>New Note</dt><dd id='inputContainer'>
<input id='input' type='text' style='width: 40em; backgroundColor: #eef; font-size: 100%;'></input>
</dd></dl>
</div>
<div id='statusArea'>
</div>
</div>
</body>
</html>