mirror of
https://github.com/Tzahi12345/YoutubeDL-Material.git
synced 2026-03-17 02:00:56 +03:00
Added UI for managing tasks
Added ability to schedule tasks based on timestamp Fixed mismatched types between frontend and openapi yaml Simplified imports for several backend components
This commit is contained in:
Isaac Abadi
@@ -0,0 +1,53 @@
|
||||
<h4 mat-dialog-title><ng-container i18n="Update task schedule">Update task schedule</ng-container></h4>
|
||||
|
||||
<mat-dialog-content>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12 mt-3">
|
||||
<mat-checkbox [(ngModel)]="enabled"><ng-container i18n="Enabled">Enabled</ng-container></mat-checkbox>
|
||||
</div>
|
||||
<div class="col-12 mt-2">
|
||||
<mat-checkbox [(ngModel)]="recurring" [disabled]="!enabled"><ng-container i18n="Recurring">Recurring</ng-container></mat-checkbox>
|
||||
</div>
|
||||
<div class="col-12 mt-2" *ngIf="recurring">
|
||||
<mat-form-field>
|
||||
<mat-select placeholder="Interval" [(ngModel)]="interval" [disabled]="!enabled">
|
||||
<mat-option value="weekly">Weekly</mat-option>
|
||||
<mat-option value="daily">Daily</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div *ngIf="!recurring" class="col-12 mt-2">
|
||||
<mat-form-field>
|
||||
<mat-label>Choose a date</mat-label>
|
||||
<input [(ngModel)]="date" [min]="today" matInput [matDatepicker]="picker" [disabled]="!enabled">
|
||||
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #picker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div *ngIf="recurring && interval === 'weekly'" class="col-12 mt-2">
|
||||
<mat-button-toggle-group [(ngModel)]="days_of_week" [multiple]="true" [disabled]="!enabled" aria-label="Week day">
|
||||
<!-- TODO: support translation -->
|
||||
<mat-button-toggle [value]="0">M</mat-button-toggle>
|
||||
<mat-button-toggle [value]="1">T</mat-button-toggle>
|
||||
<mat-button-toggle [value]="2">W</mat-button-toggle>
|
||||
<mat-button-toggle [value]="3">T</mat-button-toggle>
|
||||
<mat-button-toggle [value]="4">F</mat-button-toggle>
|
||||
<mat-button-toggle [value]="5">S</mat-button-toggle>
|
||||
<mat-button-toggle [value]="6">S</mat-button-toggle>
|
||||
</mat-button-toggle-group>
|
||||
</div>
|
||||
<div class="col-12 mt-2">
|
||||
<mat-form-field>
|
||||
<mat-label>Time</mat-label>
|
||||
<input type="time" matInput [(ngModel)]="time" [disabled]="!enabled">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-dialog-content>
|
||||
|
||||
<mat-dialog-actions>
|
||||
<button mat-button mat-dialog-close><ng-container i18n="Update task schedule cancel button">Cancel</ng-container></button>
|
||||
<button mat-button (click)="updateTaskSchedule()"><ng-container i18n="Update button">Update</ng-container></button>
|
||||
</mat-dialog-actions>
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { UpdateTaskScheduleDialogComponent } from './update-task-schedule-dialog.component';
|
||||
|
||||
describe('UpdateTaskScheduleDialogComponent', () => {
|
||||
let component: UpdateTaskScheduleDialogComponent;
|
||||
let fixture: ComponentFixture<UpdateTaskScheduleDialogComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ UpdateTaskScheduleDialogComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(UpdateTaskScheduleDialogComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,83 @@
|
||||
import { Component, Inject, OnInit } from '@angular/core';
|
||||
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
|
||||
import { Schedule } from 'api-types';
|
||||
import { PostsService } from 'app/posts.services';
|
||||
|
||||
@Component({
|
||||
selector: 'app-update-task-schedule-dialog',
|
||||
templateUrl: './update-task-schedule-dialog.component.html',
|
||||
styleUrls: ['./update-task-schedule-dialog.component.scss']
|
||||
})
|
||||
export class UpdateTaskScheduleDialogComponent implements OnInit {
|
||||
|
||||
enabled = true;
|
||||
recurring = false;
|
||||
days_of_week = [];
|
||||
interval = 'daily';
|
||||
time = null;
|
||||
date = null;
|
||||
today = new Date();
|
||||
|
||||
constructor(@Inject(MAT_DIALOG_DATA) public data: any, private dialogRef: MatDialogRef<UpdateTaskScheduleDialogComponent>, private postsService: PostsService) {
|
||||
this.processTask(this.data.task);
|
||||
this.postsService.getTask(this.data.task.key).subscribe(res => {
|
||||
this.processTask(res['task']);
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
processTask(task) {
|
||||
if (!task['schedule']) {
|
||||
this.enabled = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const schedule: Schedule = task['schedule'];
|
||||
|
||||
this.recurring = schedule['type'] === Schedule.type.RECURRING;
|
||||
|
||||
if (this.recurring) {
|
||||
this.time = `${schedule['data']['hour']}:${schedule['data']['minute']}`;
|
||||
|
||||
if (schedule['data']['dayOfWeek']) {
|
||||
this.days_of_week = schedule['data']['dayOfWeek'];
|
||||
this.interval = 'weekly';
|
||||
} else {
|
||||
this.interval = 'daily';
|
||||
}
|
||||
} else {
|
||||
const schedule_date = new Date(schedule['data']['timestamp']);
|
||||
this.time = `${schedule_date.getHours()}:${schedule_date.getMinutes()}`
|
||||
this.date = schedule_date;
|
||||
}
|
||||
}
|
||||
|
||||
updateTaskSchedule(): void {
|
||||
if (!this.enabled) {
|
||||
this.dialogRef.close(null);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.time) {
|
||||
// needs time!
|
||||
}
|
||||
|
||||
const hours = parseInt(this.time.split(':')[0]);
|
||||
const minutes = parseInt(this.time.split(':')[1]);
|
||||
|
||||
const schedule: Schedule = {type: this.recurring ? Schedule.type.RECURRING : Schedule.type.TIMESTAMP, data: null};
|
||||
if (this.recurring) {
|
||||
schedule['data'] = {hour: hours, minute: minutes};
|
||||
if (this.interval === 'weekly') {
|
||||
schedule['data']['dayOfWeek'] = this.days_of_week;
|
||||
}
|
||||
} else {
|
||||
this.date.setHours(hours, minutes);
|
||||
console.log(this.date);
|
||||
schedule['data'] = {timestamp: this.date.getTime()};
|
||||
}
|
||||
this.dialogRef.close(schedule);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user