stryan/matrix.to
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add draft UI for client list filters

Browse Source
This commit is contained in:
Bruno Windels 2020-12-02 12:13:06 +01:00
parent 4f14b70f60
commit a646eb251a
2 changed files with 39 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/client/ClientListView.js
View File

@ -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"
])),
]);
}
}

28
src/client/ClientListViewModel.js
View File

@ -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;