diff --git a/src/client/ClientListView.js b/src/client/ClientListView.js index 162c298..9a3af9e 100644 --- a/src/client/ClientListView.js +++ b/src/client/ClientListView.js @@ -31,10 +31,23 @@ export class ClientListView extends TemplateView { class AllClientsView extends TemplateView { render(t, vm) { - const clients = vm.clientList.map(clientViewModel => t.view(new ClientView(clientViewModel))); return t.div({className: "ClientListView"}, [ t.h2("Choose an app to continue"), - t.div({className: "list"}, clients) + t.mapView(vm => vm.clientList, () => { + return new TemplateView(vm, t => { + return t.div({className: "list"}, vm.clientList.map(clientViewModel => { + return t.view(new ClientView(clientViewModel)); + })); + }); + }), + t.div(t.label([ + t.input({type: "checkbox", checked: vm.showUnsupportedPlatforms, onChange: evt => vm.showUnsupportedPlatforms = evt.target.checked}), + "Show apps not available on my platform" + ])), + t.div(t.label([ + t.input({type: "checkbox", checked: vm.showExperimental, onChange: evt => vm.showExperimental = evt.target.checked}), + "Show experimental apps" + ])), ]); } } diff --git a/src/client/ClientListViewModel.js b/src/client/ClientListViewModel.js index ebf1cc0..04a8efe 100644 --- a/src/client/ClientListViewModel.js +++ b/src/client/ClientListViewModel.js @@ -26,8 +26,8 @@ export class ClientListViewModel extends ViewModel { this._clients = clients; this._link = link; this.clientList = null; - this._showExperimental = true; - this._showUnsupportedPlatform = true; + this._showExperimental = false; + this._showUnsupportedPlatforms = false; this._filterClients(); this.clientViewModel = null; if (client) { @@ -35,12 +35,32 @@ export class ClientListViewModel extends ViewModel { } } + get showUnsupportedPlatforms() { + return this._showUnsupportedPlatforms; + } + + get showExperimental() { + return this._showExperimental; + } + + set showUnsupportedPlatforms(enabled) { + this._showUnsupportedPlatforms = enabled; + this._filterClients(); + } + + set showExperimental(enabled) { + this._showExperimental = enabled; + this._filterClients(); + } + _filterClients() { this.clientList = this._clients.filter(client => { - if (!this._showExperimental && !this.platforms.map(p => client.getMaturity(p)).includes(Maturity.Stable)) { + const isStable = this.platforms.map(p => client.getMaturity(p)).includes(Maturity.Stable); + const isSupported = client.platforms.some(p => this.platforms.includes(p)); + if (!this._showExperimental && !isStable) { return false; } - if (!this._showUnsupportedPlatform && !client.platforms.some(p => this.platforms.includes(p))) { + if (!this._showUnsupportedPlatforms && !isSupported) { return false; } return true;