mirror of
https://github.com/vector-im/hydrogen-web.git
synced 2024-12-22 19:14:52 +01:00
implement missing views
This commit is contained in:
parent
1082233de4
commit
a7194e0c7a
64
src/ui/web/BrawlView.js
Normal file
64
src/ui/web/BrawlView.js
Normal file
@ -0,0 +1,64 @@
|
||||
import SessionView from "./session/SessionView.js";
|
||||
import LoginView from "./login/LoginView.js";
|
||||
import SessionPickerView from "./login/SessionPickerView.js";
|
||||
import TemplateView from "./general/TemplateView.js";
|
||||
import SwitchView from "./general/SwitchView.js";
|
||||
|
||||
export default class BrawlView {
|
||||
constructor(vm) {
|
||||
this._vm = vm;
|
||||
this._switcher = null;
|
||||
this._root = null;
|
||||
this._onViewModelChange = this._onViewModelChange.bind(this);
|
||||
}
|
||||
|
||||
_getView() {
|
||||
switch (this._vm.activeSection) {
|
||||
case "error":
|
||||
return new StatusView({header: "Something went wrong", message: this._vm.errorText});
|
||||
case "loading":
|
||||
return new StatusView({header: "Loading", message: this._vm.loadingText});
|
||||
case "session":
|
||||
return new SessionView(this._vm.sessionViewModel);
|
||||
case "login":
|
||||
return new LoginView(this._vm.loginViewModel);
|
||||
case "picker":
|
||||
return new SessionPickerView(this._vm.sessionPickerViewModel);
|
||||
default:
|
||||
throw new Error(`Unknown section: ${this._vm.activeSection}`);
|
||||
}
|
||||
}
|
||||
|
||||
_onViewModelChange(prop) {
|
||||
if (prop === "activeSection") {
|
||||
this._switcher.switch(this._getView());
|
||||
}
|
||||
}
|
||||
|
||||
mount() {
|
||||
this._switcher = new SwitchView(this._getView());
|
||||
this._root = this._switcher.mount();
|
||||
this._vm.on("change", this._onViewModelChange);
|
||||
return this._root;
|
||||
}
|
||||
|
||||
unmount() {
|
||||
this._vm.off("change", this._onViewModelChange);
|
||||
this._switcher.unmount();
|
||||
}
|
||||
|
||||
root() {
|
||||
return this._root;
|
||||
}
|
||||
|
||||
update() {}
|
||||
}
|
||||
|
||||
class StatusView extends TemplateView {
|
||||
render(t, vm) {
|
||||
return t.div({className: "StatusView"}, [
|
||||
t.h1(vm.header),
|
||||
t.p(vm.message),
|
||||
]);
|
||||
}
|
||||
}
|
@ -1,24 +1,30 @@
|
||||
import * as h from "../general/html.js";
|
||||
import ListView from "../general/ListView.js";
|
||||
import TemplateView from "../general/TemplateView.js";
|
||||
|
||||
class SessionPickerItem {
|
||||
|
||||
class SessionPickerItem extends TemplateView {
|
||||
render(t) {
|
||||
return t.li([vm => `${vm.userId}@${vm.homeServer}`]);
|
||||
}
|
||||
}
|
||||
|
||||
export default class SessionPickerView extends TemplateView {
|
||||
mount() {
|
||||
this._sessionList = new ListView({list: this._viewModel.sessions}, sessionInfo => {
|
||||
this._sessionList = new ListView({
|
||||
list: this.viewModel.sessions,
|
||||
onItemClick: (item) => {
|
||||
this.viewModel.pick(item.viewModel.id);
|
||||
},
|
||||
}, sessionInfo => {
|
||||
return new SessionPickerItem(sessionInfo);
|
||||
});
|
||||
super.mount();
|
||||
return super.mount();
|
||||
}
|
||||
|
||||
render(t, vm) {
|
||||
this._root = h.div({className: "SessionPickerView"}, [
|
||||
render(t) {
|
||||
return t.div({className: "SessionPickerView"}, [
|
||||
this._sessionList.mount(),
|
||||
h.button()
|
||||
t.button({onClick: () => this.viewModel.cancel()}, ["Cancel"])
|
||||
]);
|
||||
|
||||
}
|
||||
|
||||
unmount() {
|
||||
|
Loading…
Reference in New Issue
Block a user