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
|
import * as sfw from 'sfw';
const { Div, Img } = sfw.element.native;
import * as api from '../../api/index.js';
import Editable from '../../widgets/editable/index.js';
import PasswordDialog from '../../widgets/password-dialog/index.js';
import icons from '../../icons/index.js';
const css = await sfw.css(import.meta.url, './index.css');
export default class SettingsView extends sfw.element.Container {
#profile_image
#name
#birthday
#profile
#change_password
constructor() {
super({ css });
this.onlogout = () => {};
this.body.append(
Div.new({
id: 'container',
children: [
Div.new({
id: 'profile-image',
children: [
Div.new({
id: 'image-container',
children: [
this.#profile_image = Img.new(),
]
}),
Div.new({
id: 'edit',
children: [ icons.edit ],
onclick: async () => {
const uploader = await api.images.upload_to_profile(this.#profile.name);
uploader.ondone = async () => {
const blob = await fetch(
`/api/profile/image/load/${this.#profile.name}`,
{cache: 'reload', mode: 'no-cors'}
).then(r => r.blob());
this.#profile_image.src = URL.createObjectURL(blob);
};
uploader.send()
}
}),
]
}),
this.#name = Editable.new({
title: 'Name',
value: '',
onupdate: () => this.#update(),
}),
this.#birthday = Editable.new({
title: 'Birthday',
type: 'date',
value: '',
onupdate: () => this.#update(),
}),
Div.new({
id: 'change-password',
innerText: 'Change Password',
onclick: (e) => {
e.stopPropagation();
this.body.append(PasswordDialog.new());
}
}),
Div.new({
id: 'logout',
innerText: 'Logout',
onclick: () => this.onlogout(),
}),
Div.new({
id: 'info-box',
children: [
Div.new({ id: 'name', innerText: 'Memora' }),
Div.new({ id: 'version', innerText: '0.0.1-unstable' }),
]
}),
]
})
)
}
#update() {
api.profile.set(this.#name.value, this.#birthday.value);
}
set profile(profile) {
this.#profile = profile;
if (this.#profile) {
this.#profile_image.src = `/api/profile/image/load/${profile.name}`;
this.#profile_image.onerror = () => this.#profile_image.removeAttribute('src');
this.#name.value = profile.full_name;
this.#birthday.value = profile.birthday;
}
}
get profile() {
return this.#profile;
}
}
|
