diff --git a/src/domain/SessionPickerViewModel.js b/src/domain/SessionPickerViewModel.js index 56cd3571..c07a608a 100644 --- a/src/domain/SessionPickerViewModel.js +++ b/src/domain/SessionPickerViewModel.js @@ -9,6 +9,7 @@ class SessionItemViewModel extends EventEmitter { this._isDeleting = false; this._isClearing = false; this._error = null; + this._showJSON = false; } get error() { @@ -32,8 +33,8 @@ class SessionItemViewModel extends EventEmitter { async clear() { this._isClearing = true; - alert(JSON.stringify(this._sessionInfo, undefined, 2)); - this.emit("change", "isClearing"); + this._showJSON = true; + this.emit("change"); try { await this._pickerVM.clear(this.id); } catch(err) { @@ -65,6 +66,13 @@ class SessionItemViewModel extends EventEmitter { get sessionInfo() { return this._sessionInfo; } + + get json() { + if (this._showJSON) { + return JSON.stringify(this._sessionInfo, undefined, 2); + } + return null; + } } export default class SessionPickerViewModel { diff --git a/src/ui/web/css/main.css b/src/ui/web/css/main.css index da9f5e23..354e7aea 100644 --- a/src/ui/web/css/main.css +++ b/src/ui/web/css/main.css @@ -41,6 +41,9 @@ body { font-size: 1.2em; background-color: grey; padding: 0.5em; +} + +.SessionPickerView .sessionInfo { cursor: pointer; display: flex; } diff --git a/src/ui/web/login/SessionPickerView.js b/src/ui/web/login/SessionPickerView.js index 044392e4..2d2f81c2 100644 --- a/src/ui/web/login/SessionPickerView.js +++ b/src/ui/web/login/SessionPickerView.js @@ -31,9 +31,14 @@ class SessionPickerItem extends TemplateView { disabled: vm => vm.isClearing, onClick: this._onClearClick, }, "Clear"); + + const json = t.if(vm => vm.json, t => { + return t.div(t.pre(vm => vm.json)); + }); + const userName = t.span({className: "userId"}, vm => vm.userId); const errorMessage = t.if(vm => vm.error, t => t.span({className: "error"}, vm => vm.error)); - return t.li([userName, errorMessage, clearButton, deleteButton]); + return t.li([t.div({className: "sessionInfo"}, [userName, errorMessage, clearButton, deleteButton]), json]); } } @@ -41,8 +46,10 @@ export default class SessionPickerView extends TemplateView { mount() { this._sessionList = new ListView({ list: this.viewModel.sessions, - onItemClick: (item) => { - this.viewModel.pick(item.viewModel.id); + onItemClick: (item, event) => { + if (event.target.closest(".sessionInfo")) { + this.viewModel.pick(item.viewModel.id); + } }, }, sessionInfo => { return new SessionPickerItem(sessionInfo);