forked from SolidOS/solid-panes
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy patheditProfile.view.ts
More file actions
147 lines (118 loc) · 4.72 KB
/
Copy patheditProfile.view.ts
File metadata and controls
147 lines (118 loc) · 4.72 KB
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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
/**
* Profile Editing App Pane
*
* Unlike view panes, this is available any place whatever the real subject,
* and allows the user to edit their own profile.
*
* Usage: paneRegistry.register('profile/profilePane')
* or standalone script adding onto existing mashlib.
*/
import { authn, icons, ns, style, widgets } from 'solid-ui'
import { NamedNode, parse, sym, Store } from 'rdflib'
import profileFormText from './profileFormText.ttl'
import { PaneDefinition } from 'pane-registry'
import { paneDiv } from './profile.dom'
const highlightColor = style.highlightColor || '#7C4DFF'
const editProfileView: PaneDefinition = {
global: true,
icon: icons.iconBase + 'noun_492246.svg',
name: 'editProfile',
label: () => null,
render: function (subject, context) {
const dom = context.dom
const store = context.session.store as Store
function complainIfBad (ok: Boolean, mess: any) {
if (ok) return
div.appendChild(widgets.errorMessageBlock(dom, mess, '#fee'))
}
function renderProfileForm (div: HTMLElement, subject: NamedNode) {
const preferencesForm = sym('https://solid.github.io/solid-panes/dashboard/profileStyle.ttl#this')
const preferencesFormDoc = preferencesForm.doc()
if (!store.holds(undefined, undefined, undefined, preferencesFormDoc)) {
// If not loaded already
parse(profileFormText, store, preferencesFormDoc.uri, 'text/turtle', () => null) // Load form directly
}
widgets.appendForm(
dom,
div,
{},
subject,
preferencesForm,
editableProfile,
complainIfBad
)
} // renderProfileForm
const div = dom.createElement('div')
let editableProfile: NamedNode | null
div.setAttribute('style', `border: 0.3em solid ${highlightColor}; border-radius: 0.5em; padding: 0.7em; margin-top:0.7em;`)
const table = div.appendChild(dom.createElement('table'))
// const top = table.appendChild(dom.createElement('tr'))
const main = table.appendChild(dom.createElement('tr'))
const bottom = table.appendChild(dom.createElement('tr'))
const statusArea = bottom.appendChild(dom.createElement('div'))
statusArea.setAttribute('style', 'padding: 0.7em;')
function comment (str: string) {
const p = main.appendChild(dom.createElement('p'))
p.setAttribute('style', 'padding: 1em;')
p.textContent = str
return p
}
function heading (str: string) {
const h = main.appendChild(dom.createElement('h3'))
h.setAttribute('style', 'color:' + highlightColor + ';')
h.textContent = str
return h
}
const profileContext = {
dom: dom,
div: main,
statusArea: statusArea,
me: null
}
authn.logInLoadProfile(profileContext)
.then(loggedInContext => {
const me = loggedInContext.me!
heading('Edit your public profile')
const profile = me.doc()
if (!store.updater) {
throw new Error('Store has no updater')
}
if (store.any(me, ns.solid('editableProfile'))) {
editableProfile = store.any(me as any, ns.solid('editableProfile')) as NamedNode
} else if (store.updater.editable(profile.uri, store)) {
editableProfile = profile
} else {
statusArea.appendChild(widgets.errorMessageBlock(dom, `⚠️ Your profile ${profile} is not editable, so we cannot do much here.`, 'straw'))
return
}
comment(`Everything you put here will be public.
There will be other places to record private things.`)
heading('Your contact information')
main.appendChild(paneDiv(context, me, 'contact'))
heading('People you know who have WebIDs')
comment(`This is your public social network.
Only put people here to whom you are happy to be publicly connected.
(You can always keep private track of friends and family in your contacts.)`)
// TODO: would be useful to explain what it means to "drag people"
// what is it that is being dragged?
// is there a way to search for people (or things to drag) on this page?
if (editableProfile) {
comment('Drag people onto the target below to add people.')
}
widgets.attachmentList(dom, me, main, {
doc: profile,
modify: !!editableProfile,
predicate: ns.foaf('knows'),
noun: 'friend'
})
// heading('The style of your public profile') headings are in form now
renderProfileForm(main, me)
heading('Thank you for filling your profile.')
})
.catch(error => {
statusArea.appendChild(widgets.errorMessageBlock(dom, error, '#fee'))
})
return div
}
}
export default editProfileView