implement missing views

This commit is contained in:
Bruno Windels 2019-09-08 10:18:59 +02:00
parent 1082233de4
commit a7194e0c7a
2 changed files with 79 additions and 9 deletions

64
src/ui/web/BrawlView.js Normal file
View 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),
]);
}
}

View file

@ -1,24 +1,30 @@
import * as h from "../general/html.js";
import ListView from "../general/ListView.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 { export default class SessionPickerView extends TemplateView {
mount() { 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); return new SessionPickerItem(sessionInfo);
}); });
super.mount(); return super.mount();
} }
render(t, vm) { render(t) {
this._root = h.div({className: "SessionPickerView"}, [ return t.div({className: "SessionPickerView"}, [
this._sessionList.mount(), this._sessionList.mount(),
h.button() t.button({onClick: () => this.viewModel.cancel()}, ["Cancel"])
]); ]);
} }
unmount() { unmount() {