From a7194e0c7aeb7514c22e422b7aff60cc7688d945 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Sun, 8 Sep 2019 10:18:59 +0200 Subject: [PATCH] implement missing views --- src/ui/web/BrawlView.js | 64 +++++++++++++++++++++++++++ src/ui/web/login/SessionPickerView.js | 24 ++++++---- 2 files changed, 79 insertions(+), 9 deletions(-) create mode 100644 src/ui/web/BrawlView.js diff --git a/src/ui/web/BrawlView.js b/src/ui/web/BrawlView.js new file mode 100644 index 00000000..c5642e15 --- /dev/null +++ b/src/ui/web/BrawlView.js @@ -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), + ]); + } +} diff --git a/src/ui/web/login/SessionPickerView.js b/src/ui/web/login/SessionPickerView.js index 1b53fe31..b2030bd2 100644 --- a/src/ui/web/login/SessionPickerView.js +++ b/src/ui/web/login/SessionPickerView.js @@ -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() {