mirrors/metube
1
0
Fork 0
mirror of https://github.com/alexta69/metube.git synced 2025-04-04 20:57:45 +03:00
Code Issues Projects Releases Packages Wiki Activity

add "completed" panel

Browse source
This commit is contained in:
Alex 2019-12-03 22:32:07 +02:00
parent 6f5c56595f
commit 9a959f9326
9 changed files with 266 additions and 109 deletions
Download patch file Download diff file Expand all files Collapse all files

2
.vscode/launch.json vendored
View file

@ -5,7 +5,7 @@
"version": "0.2.0", "version": "0.2.0",
"configurations": [ "configurations": [
{ {
"name": "Python: Youtube-dealer", "name": "Python: MeTube",
"type": "python", "type": "python",
"request": "launch", "request": "launch",
"program": "${workspaceFolder}/app/main.py", "program": "${workspaceFolder}/app/main.py",

24
app/main.py
View file

@ -43,8 +43,14 @@ class Notifier(DownloadQueueNotifier):
async def updated(self, dl): async def updated(self, dl):
await sio.emit('updated', serializer.encode(dl)) await sio.emit('updated', serializer.encode(dl))
async def deleted(self, id): async def completed(self, dl):
await sio.emit('deleted', serializer.encode(id)) await sio.emit('completed', serializer.encode(dl))
async def canceled(self, id):
await sio.emit('canceled', serializer.encode(id))
async def cleared(self, id):
await sio.emit('cleared', serializer.encode(id))
dqueue = DownloadQueue(config, Notifier()) dqueue = DownloadQueue(config, Notifier())
@ -61,21 +67,15 @@ async def add(request):
async def delete(request): async def delete(request):
post = await request.json() post = await request.json()
ids = post.get('ids') ids = post.get('ids')
if not ids: where = post.get('where')
if not ids or where not in ['queue', 'done']:
raise web.HTTPBadRequest() raise web.HTTPBadRequest()
status = await dqueue.delete(ids) status = await (dqueue.cancel(ids) if where == 'queue' else dqueue.clear(ids))
return web.Response(text=serializer.encode(status)) return web.Response(text=serializer.encode(status))
@routes.get('/queue')
def queue(request):
ret = dqueue.get()
return web.Response(text=serializer.encode(ret))
@sio.event @sio.event
async def connect(sid, environ): async def connect(sid, environ):
ret = dqueue.get() await sio.emit('all', serializer.encode(dqueue.get()), to=sid)
#ret = [["XeNTV0kyHaU", {"id": "XeNTV0kyHaU", "title": "2020 Mercedes ACTROS \u2013 Digital Side Mirrors, Electronic Stability, Auto Braking, Side Guard Safety", "url": "XeNTV0kyHaU", "status": None, "percentage": 0}], ["76wlIusQe9U", {"id": "76wlIusQe9U", "title": "Toyota HIACE 2020 \u2013 Toyota Wagon / Toyota HIACE 2019 and 2020", "url": "76wlIusQe9U", "status": None, "percentage": 0}], ["n_d5LPwflMM", {"id": "n_d5LPwflMM", "title": "2020 Toyota GRANVIA \u2013 Toyota 8 Seater LUXURY VAN / ALL-NEW Toyota GRANVIA 2020", "url": "n_d5LPwflMM", "status": None, "percentage": 0}], ["Dv4ZFhCpF1M", {"id": "Dv4ZFhCpF1M", "title": "Toyota SIENNA 2019 vs Honda ODYSSEY 2019", "url": "Dv4ZFhCpF1M", "status": None, "percentage": 0}], ["GjHJFb3Mgqw", {"id": "GjHJFb3Mgqw", "title": "How It's Made (Buses) \u2013 How Buses are made? SETRA BUS Production", "url": "GjHJFb3Mgqw", "status": None, "percentage": 0}]]
await sio.emit('queue', serializer.encode(ret), to=sid)
@routes.get('/') @routes.get('/')
def index(request): def index(request):

49
app/ytdl.py
View file

@ -78,7 +78,13 @@ class DownloadQueueNotifier:
async def updated(self, dl): async def updated(self, dl):
raise NotImplementedError raise NotImplementedError
async def deleted(self, id): async def completed(self, dl):
raise NotImplementedError
async def canceled(self, id):
raise NotImplementedError
async def cleared(self, id):
raise NotImplementedError raise NotImplementedError
class DownloadQueue: class DownloadQueue:
@ -86,6 +92,7 @@ class DownloadQueue:
self.config = config self.config = config
self.notifier = notifier self.notifier = notifier
self.queue = OrderedDict() self.queue = OrderedDict()
self.done = OrderedDict()
self.event = asyncio.Event() self.event = asyncio.Event()
asyncio.ensure_future(self.__download()) asyncio.ensure_future(self.__download())
@ -116,20 +123,28 @@ class DownloadQueue:
self.event.set() self.event.set()
return {'status': 'ok'} return {'status': 'ok'}
async def delete(self, ids): async def cancel(self, ids):
for id in ids: for id in ids:
if id not in self.queue: if id not in self.queue:
log.warn(f'requested cancel for non-existent download {id}')
continue
self.queue[id].cancel()
del self.queue[id]
await self.notifier.canceled(id)
return {'status': 'ok'}
async def clear(self, ids):
for id in ids:
if id not in self.done:
log.warn(f'requested delete for non-existent download {id}') log.warn(f'requested delete for non-existent download {id}')
continue continue
if self.queue[id].info.status is not None: del self.done[id]
self.queue[id].cancel() await self.notifier.cleared(id)
else:
del self.queue[id]
await self.notifier.deleted(id)
return {'status': 'ok'} return {'status': 'ok'}
def get(self): def get(self):
return list((k, v.info) for k, v in self.queue.items()) return(list((k, v.info) for k, v in self.queue.items()),
list((k, v.info) for k, v in self.done.items()))
async def __download(self): async def __download(self):
while True: while True:
@ -144,11 +159,15 @@ class DownloadQueue:
async def updated_cb(): await self.notifier.updated(entry.info) async def updated_cb(): await self.notifier.updated(entry.info)
asyncio.ensure_future(entry.update_status(updated_cb)) asyncio.ensure_future(entry.update_status(updated_cb))
await start_aw await start_aw
if entry.info.status != 'finished' and entry.tmpfilename and os.path.isfile(entry.tmpfilename): if entry.info.status != 'finished':
try: if entry.tmpfilename and os.path.isfile(entry.tmpfilename):
os.remove(entry.tmpfilename) try:
except: os.remove(entry.tmpfilename)
pass except:
pass
entry.info.status = 'error'
entry.close() entry.close()
del self.queue[id] if id in self.queue:
await self.notifier.deleted(id) del self.queue[id]
self.done[id] = entry
await self.notifier.completed(entry.info)

74
ui/src/app/app.component.html
View file

@ -1,10 +1,9 @@
<nav class="navbar navbar-expand-md navbar-dark bg-dark"> <nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#">MeTube</a> <a class="navbar-brand" href="#">MeTube</a>
<!--
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsDefault" aria-controls="navbarsDefault" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsDefault" aria-controls="navbarsDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<!--
<div class="collapse navbar-collapse" id="navbarsDefault"> <div class="collapse navbar-collapse" id="navbarsDefault">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto">
<li class="nav-item active"> <li class="nav-item active">
@ -29,47 +28,66 @@
</form> </form>
<p *ngIf="downloads.loading">Loading...</p> <p *ngIf="downloads.loading">Loading...</p>
<div *ngIf="!downloads.loading"> <div class="metube-section-header">Downloading</div>
<div *ngIf="downloads.empty()" class="jumbotron jumbotron-fluid px-4"> <table class="table">
<div class="container text-center"> <thead>
<h1 class="display-4">Welcome to MeTube!</h1>
<p class="lead">Please add some downloads via the URL box above.</p>
</div>
</div>
<table *ngIf="!downloads.empty()" class="table">
<thead>
<tr> <tr>
<th scope="col" style="width: 1rem; vertical-align: middle;"> <th scope="col" style="width: 1rem;">
<div class="custom-control custom-checkbox"> <app-master-checkbox #queueMasterCheckbox [id]="'queue'" [list]="downloads.queue" (changed)="queueSelectionChanged($event)"></app-master-checkbox>
<input type="checkbox" class="custom-control-input" id="select-all" #masterCheckbox [(ngModel)]="masterSelected" (change)="checkUncheckAll()">
<label class="custom-control-label" for="select-all"></label>
</div>
</th> </th>
<th scope="col"> <th scope="col">
<button type="button" class="btn btn-link px-0" disabled #delSelected (click)="delSelectedDownloads()"><fa-icon [icon]="faTrashAlt"></fa-icon>&nbsp; Clear selected</button> <button type="button" class="btn btn-link px-0 mr-4" disabled #queueDelSelected (click)="delSelectedDownloads('queue')"><fa-icon [icon]="faTrashAlt"></fa-icon>&nbsp; Cancel selected</button>
</th> </th>
<th scope="col" style="width: 14rem;"></th> <th scope="col" style="width: 14rem;"></th>
<th scope="col" style="width: 8rem;">Speed</th> <th scope="col" style="width: 8rem;">Speed</th>
<th scope="col" style="width: 7rem;">ETA</th> <th scope="col" style="width: 7rem;">ETA</th>
<th scope="col" style="width: 2rem;"></th> <th scope="col" style="width: 2rem;"></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let download of downloads.downloads | keyvalue: asIsOrder" [class.disabled]='download.value.deleting'> <tr *ngFor="let download of downloads.queue | keyvalue: asIsOrder" [class.disabled]='download.value.deleting'>
<td> <td>
<div class="custom-control custom-checkbox"> <app-slave-checkbox [id]="download.key" [master]="queueMasterCheckbox" [checkable]="download.value"></app-slave-checkbox>
<input type="checkbox" class="custom-control-input" id="select-{{download.key}}" [(ngModel)]="download.value.checked" (change)="selectionChanged()">
<label class="custom-control-label" for="select-{{download.key}}"></label>
</div>
</td> </td>
<td>{{ download.value.title }}</td> <td>{{ download.value.title }}</td>
<td><ngb-progressbar height="1.5rem" [showValue]="download.value.status != 'preparing'" [striped]="download.value.status == 'preparing'" [animated]="download.value.status == 'preparing'" type="success" [value]="download.value.status == 'preparing' ? 100 : download.value.percent | number:'1.0-0'"></ngb-progressbar></td> <td><ngb-progressbar height="1.5rem" [showValue]="download.value.status != 'preparing'" [striped]="download.value.status == 'preparing'" [animated]="download.value.status == 'preparing'" type="success" [value]="download.value.status == 'preparing' ? 100 : download.value.percent | number:'1.0-0'"></ngb-progressbar></td>
<td>{{ download.value.speed | speed }}</td> <td>{{ download.value.speed | speed }}</td>
<td>{{ download.value.eta | eta }}</td> <td>{{ download.value.eta | eta }}</td>
<td><button type="button" class="btn btn-link" (click)="delDownload(download.key)"><fa-icon [icon]="faTrashAlt"></fa-icon></button></td> <td><button type="button" class="btn btn-link" (click)="delDownload('queue', download.key)"><fa-icon [icon]="faTrashAlt"></fa-icon></button></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
<div class="metube-section-header">Completed</div>
<table class="table">
<thead>
<tr>
<th scope="col" style="width: 1rem;">
<app-master-checkbox #doneMasterCheckbox [id]="'done'" [list]="downloads.done" (changed)="doneSelectionChanged($event)"></app-master-checkbox>
</th>
<th scope="col">
<button type="button" class="btn btn-link px-0 mr-4" disabled #doneDelSelected (click)="delSelectedDownloads('done')"><fa-icon [icon]="faTrashAlt"></fa-icon>&nbsp; Clear selected</button>
<button type="button" class="btn btn-link px-0 mr-4" disabled #doneClearCompleted (click)="clearCompletedDownloads()"><fa-icon [icon]="faCheckCircle"></fa-icon>&nbsp; Clear completed</button>
<button type="button" class="btn btn-link px-0 mr-4" disabled #doneClearFailed (click)="clearFailedDownloads()"><fa-icon [icon]="faTimesCircle"></fa-icon>&nbsp; Clear failed</button>
</th>
<th scope="col" style="width: 2rem;"></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let download of downloads.done | keyvalue: asIsOrder" [class.disabled]='download.value.deleting'>
<td>
<app-slave-checkbox [id]="download.key" [master]="doneMasterCheckbox" [checkable]="download.value"></app-slave-checkbox>
</td>
<td>
<div style="display: inline-block; width: 1.3rem;">
<fa-icon *ngIf="download.value.status == 'finished'" [icon]="faCheckCircle" style="color: green;"></fa-icon>
<fa-icon *ngIf="download.value.status == 'error'" [icon]="faTimesCircle" style="color: red;"></fa-icon>
</div>
{{ download.value.title }}
</td>
<td><button type="button" class="btn btn-link" (click)="delDownload('done', download.key)"><fa-icon [icon]="faTrashAlt"></fa-icon></button></td>
</tr>
</tbody>
</table>
</main><!-- /.container --> </main><!-- /.container -->

34
ui/src/app/app.component.sass
View file

@ -1,15 +1,37 @@
.add-url-box .add-url-box
padding: 5rem 0
max-width: 720px max-width: 720px
margin: auto margin: 4rem auto
.rounded-box $metube-section-color-bg: rgba(0,0,0,.07)
border: 1px solid rgba(0,0,0,.125)
border-radius: .25rem .metube-section-header
font-size: 1.8rem
font-weight: 300
position: relative
background: $metube-section-color-bg
padding: 0.5rem 0
margin-top: 3.5rem
.metube-section-header:before
content: ""
position: absolute
top: 0
bottom: 0
left: -9999px
right: 0
border-left: 9999px solid $metube-section-color-bg
box-shadow: 9999px 0 0 $metube-section-color-bg
button:hover
text-decoration: none
th th
border-top: 0 border-top: 0
border-bottom: 3px solid #dee2e6 !important border-bottom-width: 3px !important
vertical-align: middle !important
td
vertical-align: middle
.disabled .disabled
opacity: 0.5 opacity: 0.5

72
ui/src/app/app.component.ts
View file

@ -1,23 +1,48 @@
import { Component, ViewChild, ElementRef } from '@angular/core'; import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { faTrashAlt } from '@fortawesome/free-regular-svg-icons'; import { faTrashAlt, faCheckCircle, faTimesCircle } from '@fortawesome/free-regular-svg-icons';
import { DownloadsService, Status } from './downloads.service'; import { DownloadsService, Status } from './downloads.service';
import { MasterCheckboxComponent } from './master-checkbox.component';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
templateUrl: './app.component.html', templateUrl: './app.component.html',
styleUrls: ['./app.component.sass'] styleUrls: ['./app.component.sass']
}) })
export class AppComponent { export class AppComponent implements AfterViewInit {
addUrl: string; addUrl: string;
addInProgress = false; addInProgress = false;
@ViewChild('queueMasterCheckbox', {static: false}) queueMasterCheckbox: MasterCheckboxComponent;
@ViewChild('queueDelSelected', {static: false}) queueDelSelected: ElementRef;
@ViewChild('doneMasterCheckbox', {static: false}) doneMasterCheckbox: MasterCheckboxComponent;
@ViewChild('doneDelSelected', {static: false}) doneDelSelected: ElementRef;
@ViewChild('doneClearCompleted', {static: false}) doneClearCompleted: ElementRef;
@ViewChild('doneClearFailed', {static: false}) doneClearFailed: ElementRef;
faTrashAlt = faTrashAlt; faTrashAlt = faTrashAlt;
masterSelected: boolean; faCheckCircle = faCheckCircle;
@ViewChild('masterCheckbox', {static: false}) masterCheckbox: ElementRef; faTimesCircle = faTimesCircle;
@ViewChild('delSelected', {static: false}) delSelected: ElementRef;
constructor(public downloads: DownloadsService) { constructor(public downloads: DownloadsService) {
this.downloads.dlChanges.subscribe(() => this.selectionChanged()); }
ngAfterViewInit() {
this.downloads.queueChanged.subscribe(() => {
this.queueMasterCheckbox.selectionChanged();
});
this.downloads.doneChanged.subscribe(() => {
this.doneMasterCheckbox.selectionChanged();
let completed: number = 0, failed: number = 0;
this.downloads.done.forEach(dl => {
if (dl.status === 'finished')
completed++;
else if (dl.status === 'error')
failed++;
});
this.doneClearCompleted.nativeElement.disabled = completed === 0;
this.doneClearFailed.nativeElement.disabled = failed === 0;
});
} }
// workaround to allow fetching of Map values in the order they were inserted // workaround to allow fetching of Map values in the order they were inserted
@ -26,19 +51,12 @@ export class AppComponent {
return 1; return 1;
} }
checkUncheckAll() { queueSelectionChanged(checked: number) {
this.downloads.downloads.forEach(dl => dl.checked = this.masterSelected); this.queueDelSelected.nativeElement.disabled = checked == 0;
this.selectionChanged();
} }
selectionChanged() { doneSelectionChanged(checked: number) {
if (!this.masterCheckbox) this.doneDelSelected.nativeElement.disabled = checked == 0;
return;
let checked: number = 0;
this.downloads.downloads.forEach(dl => { if(dl.checked) checked++ });
this.masterSelected = checked > 0 && checked == this.downloads.downloads.size;
this.masterCheckbox.nativeElement.indeterminate = checked > 0 && checked < this.downloads.downloads.size;
this.delSelected.nativeElement.disabled = checked == 0;
} }
addDownload() { addDownload() {
@ -53,13 +71,19 @@ export class AppComponent {
}); });
} }
delDownload(id: string) { delDownload(where: string, id: string) {
this.downloads.del([id]).subscribe(); this.downloads.delById(where, [id]).subscribe();
} }
delSelectedDownloads() { delSelectedDownloads(where: string) {
let ids: string[] = []; this.downloads.delByFilter(where, dl => dl.checked).subscribe();
this.downloads.downloads.forEach(dl => { if(dl.checked) ids.push(dl.id) }); }
this.downloads.del(ids).subscribe();
clearCompletedDownloads() {
this.downloads.delByFilter('done', dl => dl.status === 'finished').subscribe();
}
clearFailedDownloads() {
this.downloads.delByFilter('done', dl => dl.status === 'error').subscribe();
} }
} }

5
ui/src/app/app.module.ts
View file

@ -8,6 +8,7 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { EtaPipe, SpeedPipe } from './downloads.pipe'; import { EtaPipe, SpeedPipe } from './downloads.pipe';
import { MasterCheckboxComponent, SlaveCheckboxComponent } from './master-checkbox.component';
const config: SocketIoConfig = { url: '', options: {} }; const config: SocketIoConfig = { url: '', options: {} };
@ -15,7 +16,9 @@ const config: SocketIoConfig = { url: '', options: {} };
declarations: [ declarations: [
AppComponent, AppComponent,
EtaPipe, EtaPipe,
SpeedPipe SpeedPipe,
MasterCheckboxComponent,
SlaveCheckboxComponent
], ],
imports: [ imports: [
BrowserModule, BrowserModule,

62
ui/src/app/downloads.service.ts
View file

@ -26,39 +26,51 @@ interface Download {
}) })
export class DownloadsService { export class DownloadsService {
loading = true; loading = true;
downloads = new Map<string, Download>(); queue = new Map<string, Download>();
dlChanges = new Subject(); done = new Map<string, Download>();
queueChanged = new Subject();
doneChanged = new Subject();
constructor(private http: HttpClient, private socket: Socket) { constructor(private http: HttpClient, private socket: Socket) {
socket.fromEvent('queue').subscribe((strdata: string) => { socket.fromEvent('all').subscribe((strdata: string) => {
this.loading = false; this.loading = false;
this.downloads.clear(); let data: [[[string, Download]], [[string, Download]]] = JSON.parse(strdata);
let data: [[string, Download]] = JSON.parse(strdata); this.queue.clear();
data.forEach(entry => this.downloads.set(...entry)); data[0].forEach(entry => this.queue.set(...entry));
this.dlChanges.next(); this.done.clear();
data[1].forEach(entry => this.done.set(...entry));
this.queueChanged.next();
this.doneChanged.next();
}); });
socket.fromEvent('added').subscribe((strdata: string) => { socket.fromEvent('added').subscribe((strdata: string) => {
let data: Download = JSON.parse(strdata); let data: Download = JSON.parse(strdata);
this.downloads.set(data.id, data); this.queue.set(data.id, data);
this.dlChanges.next(); this.queueChanged.next();
}); });
socket.fromEvent('updated').subscribe((strdata: string) => { socket.fromEvent('updated').subscribe((strdata: string) => {
let data: Download = JSON.parse(strdata); let data: Download = JSON.parse(strdata);
let dl: Download = this.downloads.get(data.id); let dl: Download = this.queue.get(data.id);
data.checked = dl.checked; data.checked = dl.checked;
data.deleting = dl.deleting; data.deleting = dl.deleting;
this.downloads.set(data.id, data); this.queue.set(data.id, data);
this.dlChanges.next();
}); });
socket.fromEvent('deleted').subscribe((strdata: string) => { socket.fromEvent('completed').subscribe((strdata: string) => {
let data: Download = JSON.parse(strdata);
this.queue.delete(data.id);
this.done.set(data.id, data);
this.queueChanged.next();
this.doneChanged.next();
});
socket.fromEvent('canceled').subscribe((strdata: string) => {
let data: string = JSON.parse(strdata); let data: string = JSON.parse(strdata);
this.downloads.delete(data); this.queue.delete(data);
this.dlChanges.next(); this.queueChanged.next();
});
socket.fromEvent('cleared').subscribe((strdata: string) => {
let data: string = JSON.parse(strdata);
this.done.delete(data);
this.doneChanged.next();
}); });
}
empty() {
return this.downloads.size == 0;
} }
handleHTTPError(error: HttpErrorResponse) { handleHTTPError(error: HttpErrorResponse) {
@ -72,8 +84,14 @@ export class DownloadsService {
); );
} }
public del(ids: string[]) { public delById(where: string, ids: string[]) {
ids.forEach(id => this.downloads.get(id).deleting = true); ids.forEach(id => this[where].get(id).deleting = true);
return this.http.post('delete', {ids: ids}); return this.http.post('delete', {where: where, ids: ids});
}
public delByFilter(where: string, filter: (dl: Download) => boolean) {
let ids: string[] = [];
this[where].forEach((dl: Download) => { if (filter(dl)) ids.push(dl.id) });
return this.delById(where, ids);
} }
} }

53
ui/src/app/master-checkbox.component.ts Normal file
View file

@ -0,0 +1,53 @@
import { Component, Input, ViewChild, ElementRef, Output, EventEmitter } from '@angular/core';
interface Checkable {
checked: boolean;
}
@Component({
selector: 'app-master-checkbox',
template: `
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="{{id}}-select-all" #masterCheckbox [(ngModel)]="selected" (change)="clicked()">
<label class="custom-control-label" for="{{id}}-select-all"></label>
</div>
`
})
export class MasterCheckboxComponent {
@Input() id: string;
@Input() list: Map<String, Checkable>;
@Output() changed = new EventEmitter<number>();
@ViewChild('masterCheckbox', {static: false}) masterCheckbox: ElementRef;
selected: boolean;
clicked() {
this.list.forEach(item => item.checked = this.selected);
this.selectionChanged();
}
selectionChanged() {
if (!this.masterCheckbox)
return;
let checked: number = 0;
this.list.forEach(item => { if(item.checked) checked++ });
this.selected = checked > 0 && checked == this.list.size;
this.masterCheckbox.nativeElement.indeterminate = checked > 0 && checked < this.list.size;
this.changed.emit(checked);
}
}
@Component({
selector: 'app-slave-checkbox',
template: `
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="{{master.id}}-{{id}}-select" [(ngModel)]="checkable.checked" (change)="master.selectionChanged()">
<label class="custom-control-label" for="{{master.id}}-{{id}}-select"></label>
</div>
`
})
export class SlaveCheckboxComponent {
@Input() id: string;
@Input() master: MasterCheckboxComponent;
@Input() checkable: Checkable;
}