aiden
/
YoutubeDL-Material
mirror of https://github.com/Tzahi12345/YoutubeDL-Material
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Notifications style improvements

Browse Source
pull/809/head
Isaac Abadi 3 years ago
parent 992947fba5
commit cc2be46ad8
11 changed files with 75 additions and 51 deletions
Show Stats Download Patch File Download Diff File

5
backend/app.js
Unescape Escape View File

@ -2009,10 +2009,9 @@ app.post('/api/getNotifications', optionalJwt, async (req, res) => {
// set notifications to read
app.post('/api/setNotificationsToRead', optionalJwt, async (req, res) => {
const uids = req.body.uids;
const uuid = req.user.uid;
// TODO: do a bulk update
const success = true; // await db_api.updateRecords('notifications', {user_uid: uuid});
const success = await db_api.updateRecords('notifications', {user_uid: uuid}, {read: true});
res.send({success: success});
});

4
backend/db.js
Unescape Escape View File

@ -354,7 +354,7 @@ exports.addMetadataPropertyToDB = async (property_key) => {
}
}
return await exports.bulkUpdateRecords('files', 'uid', update_obj);
return await exports.bulkUpdateRecordsByKey('files', 'uid', update_obj);
} catch(err) {
logger.error(err);
return false;
@ -681,7 +681,7 @@ exports.updateRecords = async (table, filter_obj, update_obj) => {
return !!(output['result']['ok']);
}
exports.bulkUpdateRecords = async (table, key_label, update_obj) => {
exports.bulkUpdateRecordsByKey = async (table, key_label, update_obj) => {
// local db override
if (using_local_db) {
local_db.get(table).each((record) => {

2
backend/test/tests.js
Unescape Escape View File

@ -212,7 +212,7 @@ describe('Database', async function() {
const received_records = await db_api.getRecords('test');
assert(received_records && received_records.length === NUM_RECORDS_TO_ADD);
success = await db_api.bulkUpdateRecords('test', 'uid', update_obj);
success = await db_api.bulkUpdateRecordsByKey('test', 'uid', update_obj);
assert(success);
const received_updated_records = await db_api.getRecords('test');

4
src/app/app.component.html
Unescape Escape View File

@ -7,11 +7,11 @@
<div style="display: flex; align-items: center;">
<button #hamburgerMenu style="outline: none" *ngIf="router.url.split(';')[0] !== '/player'" mat-icon-button aria-label="Toggle side navigation" (click)="toggleSidenav()"><mat-icon>menu</mat-icon></button>
<button (click)="goBack()" *ngIf="router.url.split(';')[0] === '/player'" mat-icon-button><mat-icon>arrow_back</mat-icon></button>
<div style="margin-left: 8px; display: inline-block;"><a routerLink='/home'><img style="width: 32px;" src="assets/images/logo_128px.png"></a></div>
<div style="margin-left: 8px; display: inline-block;"><button mat-icon-button routerLink='/home'><img style="width: 32px;" src="assets/images/logo_128px.png"></button></div>
</div>
</div>
<div class="col-6" style="text-align: right; align-items: flex-end; display: inline-block">
<button [matMenuTriggerFor]="notificationsMenu" mat-icon-button><mat-icon [matBadge]="notification_count" matBadgeColor="warn" matBadgeSize="small" *ngIf="notification_count > 0">notifications</mat-icon><mat-icon *ngIf="notification_count === 0">notifications_none</mat-icon></button>
<button [matMenuTriggerFor]="notificationsMenu" (menuOpened)="notificationMenuOpened()" mat-icon-button><mat-icon [matBadge]="notification_count" matBadgeColor="warn" matBadgeSize="small" *ngIf="notification_count > 0">notifications</mat-icon><mat-icon *ngIf="notification_count === 0">notifications_none</mat-icon></button>
<mat-menu (close)="notificationMenuClosed()" #notificationsMenu="matMenu">
<app-notifications #notifications (notificationCount)="notificationCountUpdate($event)" (click)="$event.stopPropagation()"></app-notifications>
</mat-menu>

4
src/app/app.component.ts
Unescape Escape View File

@ -211,6 +211,10 @@ export class AppComponent implements OnInit, AfterViewInit {
this.notification_count = new_count;
}
notificationMenuOpened(): void {
this.notifications.getNotifications();
}
notificationMenuClosed(): void {
this.notifications.setNotificationsToRead();
}

43
src/app/components/notifications-list/notifications-list.component.html
Unescape Escape View File

@ -1,17 +1,28 @@
<div *ngFor="let notification of notifications; let i = index;">
<mat-divider class="notification-divider"></mat-divider>
<div class="notification-text">
<ng-container *ngIf="NOTIFICATION_PREFIX[notification.type]">
{{NOTIFICATION_PREFIX[notification.type]}}&nbsp;
</ng-container>
<ng-container *ngIf="NOTIFICATION_SUFFIX_KEY[notification.type]">
{{notification['data'][NOTIFICATION_SUFFIX_KEY[notification.type]]}}
</ng-container>
</div>
<div *ngIf="notification.actions?.length > 0">
<button matTooltip="Remove" i18n-matTooltip="Remove" (click)="emitDeleteNotification(notification.uid)" mat-icon-button><mat-icon>close</mat-icon></button>
<span *ngFor="let action of notification.actions">
<button [matTooltip]="NOTIFICATION_ACTION_TO_STRING[action]" (click)="emitNotificationAction(notification, action)" mat-icon-button><mat-icon>{{NOTIFICATION_ICON[action]}}</mat-icon></button>
</span>
</div>
<div class="card-radius mat-elevation-z2" *ngFor="let notification of notifications; let i = index;">
<mat-card class="notification-card card-radius">
<mat-card-header>
<mat-card-subtitle>
<div>
<span class="notification-timestamp">{{notification.timestamp * 1000 | date:'short'}}</span>
</div>
</mat-card-subtitle>
<mat-card-title>
<ng-container *ngIf="NOTIFICATION_PREFIX[notification.type]">
{{NOTIFICATION_PREFIX[notification.type]}}&nbsp;
</ng-container>
</mat-card-title>
</mat-card-header>
<mat-card-content>
<ng-container *ngIf="NOTIFICATION_SUFFIX_KEY[notification.type]">
{{notification['data'][NOTIFICATION_SUFFIX_KEY[notification.type]]}}
</ng-container>
</mat-card-content>
<mat-card-actions *ngIf="notification.actions?.length > 0">
<button matTooltip="Remove" i18n-matTooltip="Remove" (click)="emitDeleteNotification(notification.uid)" mat-icon-button><mat-icon>close</mat-icon></button>
<span *ngFor="let action of notification.actions">
<button [matTooltip]="NOTIFICATION_ACTION_TO_STRING[action]" (click)="emitNotificationAction(notification, action)" mat-icon-button><mat-icon>{{NOTIFICATION_ICON[action]}}</mat-icon></button>
</span>
</mat-card-actions>
<span *ngIf="!notification.read" class="dot"></span>
</mat-card>
</div>

25
src/app/components/notifications-list/notifications-list.component.scss
Unescape Escape View File

@ -7,4 +7,27 @@
margin-left: 10px;
margin-right: 10px;
display: inline-block;
}
}
.notification-timestamp {
font-size: 14px;
}
.notification-card {
margin-top: 5px;
}
.card-radius {
border-radius: 12px;
}
.dot {
height: 8px;
width: 8px;
background-color: red;
border-radius: 50%;
display: inline-block;
position: absolute;
right: 8px;
top: 8px;
}

4
src/app/components/notifications-list/notifications-list.component.ts
Unescape Escape View File

@ -14,8 +14,8 @@ export class NotificationsListComponent {
@Output() notificationAction = new EventEmitter<{notification: Notification, action: NotificationAction}>();
NOTIFICATION_PREFIX: { [key in NotificationType]: string } = {
download_complete: $localize`Finished downloading:`,
download_error: $localize`Download failed:`
download_complete: $localize`Finished downloading`,
download_error: $localize`Download failed`
}
// Attaches string to the end of the notification text

9
src/app/components/notifications/notifications.component.html
Unescape Escape View File

@ -1,10 +1,5 @@
<strong *ngIf="notifications !== null && notifications.length === 0 && read_notifications.length === 0" style="text-align: center; margin: 10px; position: relative; top: 8px;" i18n="No notifications available">No notifications available</strong>
<div *ngIf="notifications !== null && notifications.length === 0" style="text-align: center; margin: 10px;" i18n="No notifications available">No notifications available</div>
<div style="margin: 10px;" *ngIf="notifications?.length > 0">
<strong class="notification-title" i18n="New notifications">New notifications</strong>
<app-notifications-list (notificationAction)="notificationAction($event)" (deleteNotification)="deleteNotification($event)" [notifications]="notifications"></app-notifications-list>
<button style="margin-top: 15px;" *ngIf="notifications?.length > 0" color="warn" (click)="deleteAllNotifications()" mat-stroked-button>Remove all</button>
</div>
<div style="margin: 10px;" *ngIf="read_notifications?.length > 0">
<strong class="notification-title" i18n="Old notifications">Old notifications</strong>
<app-notifications-list (notificationAction)="notificationAction($event)" (deleteNotification)="deleteNotification($event)" [notifications]="read_notifications"></app-notifications-list>
</div>

24
src/app/components/notifications/notifications.component.ts
Unescape Escape View File

@ -11,8 +11,7 @@ import { NotificationAction } from 'api-types/models/NotificationAction';
})
export class NotificationsComponent implements OnInit {
notifications = null;
read_notifications = null;
notifications: Notification[] = null;
@Output() notificationCount = new EventEmitter<number>();
@ -33,9 +32,8 @@ export class NotificationsComponent implements OnInit {
getNotifications(): void {
this.postsService.getNotifications().subscribe(res => {
this.notifications = res['notifications'].filter(notification => !notification.read);
this.read_notifications = res['notifications'].filter(notification => notification.read);
this.notificationCount.emit(this.notifications.length);
this.notifications = res['notifications'];
this.notificationCount.emit(this.notifications.filter(notification => !notification.read).length);
});
}
@ -48,7 +46,10 @@ export class NotificationsComponent implements OnInit {
this.router.navigate(['downloads']);
break;
case NotificationAction.RETRY_DOWNLOAD:
this.postsService.restartDownload(action_info['notification']['data']['download_uid'])
this.postsService.restartDownload(action_info['notification']['data']['download_uid']).subscribe(res => {
this.postsService.openSnackBar($localize`Download restarted!`);
this.deleteNotification(action_info['notification']['uid']);
});
break;
default:
console.error(`Notification action ${action_info['action']} does not exist!`);
@ -59,7 +60,6 @@ export class NotificationsComponent implements OnInit {
deleteNotification(uid: string): void {
this.postsService.deleteNotification(uid).subscribe(res => {
this.notifications.filter(notification => notification['uid'] !== uid);
this.read_notifications.filter(read_notification => read_notification['uid'] !== uid);
this.notificationCount.emit(this.notifications.length);
this.getNotifications();
});
@ -67,9 +67,7 @@ export class NotificationsComponent implements OnInit {
deleteAllNotifications(): void {
this.postsService.deleteAllNotifications().subscribe(res => {
console.log(res);
this.notifications = [];
this.read_notifications = [];
this.getNotifications();
});
this.notificationCount.emit(0);
@ -78,15 +76,9 @@ export class NotificationsComponent implements OnInit {
setNotificationsToRead(): void {
const uids = this.notifications.map(notification => notification.uid);
this.postsService.setNotificationsToRead(uids).subscribe(res => {
console.log(res);
this.getNotifications();
});
this.notificationCount.emit(0);
}
notificationMenuClosed(): void {
if (this.notifications.length > 0) {
this.setNotificationsToRead();
}
}
}

2
src/app/posts.services.ts
Unescape Escape View File

@ -868,7 +868,7 @@ export class PostsService implements CanActivate {
}
deleteAllNotifications(): Observable<SuccessObject> {
return this.http.post<SuccessObject>(this.path + 'deleteNotifications', {},
return this.http.post<SuccessObject>(this.path + 'deleteAllNotifications', {},
this.httpOptions);
}

Write Preview
Loading…
Cancel
Save