Added API to update subscription

Edit subscription component now works

backend/app.js

@@ -2310,6 +2310,16 @@ app.post('/api/downloadVideosForSubscription', optionalJwt, async (req, res) =>
     });
 });
 
+app.post('/api/updateSubscription', optionalJwt, async (req, res) => {
+    let updated_sub = req.body.subscription;
+    let user_uid = req.isAuthenticated() ? req.user.uid : null;
+
+    let success = subscriptions_api.updateSubscription(updated_sub, user_uid);
+    res.send({
+        success: success
+    });
+});
+
 app.post('/api/getAllSubscriptions', optionalJwt, async (req, res) => {
     let user_uid = req.isAuthenticated() ? req.user.uid : null;
 

backend/subscriptions.js

@@ -430,6 +430,15 @@ function getSubscription(subID, user_uid = null) {
         return db.get('subscriptions').find({id: subID}).value();
 }
 
+function updateSubscription(sub, user_uid = null) {
+    if (user_uid) {
+        users_db.get('users').find({uid: user_uid}).get('subscriptions').find({id: sub.id}).assign(sub).write();
+    } else {
+        db.get('subscriptions').find({id: sub.id}).assign(sub).write();
+    }
+    return true;
+}
+
 function subExists(subID, user_uid = null) {
     if (user_uid)
         return !!users_db.get('users').find({uid: user_uid}).get('subscriptions').find({id: subID}).value();
@@ -489,6 +498,7 @@ function removeIDFromArchive(archive_path, id) {
 module.exports = {
     getSubscription        : getSubscription,
     getAllSubscriptions    : getAllSubscriptions,
+    updateSubscription     : updateSubscription,
     subscribe              : subscribe,
     unsubscribe            : unsubscribe,
     deleteSubscriptionFile : deleteSubscriptionFile,

src/app/dialogs/edit-subscription-dialog/edit-subscription-dialog.component.html

@@ -4,32 +4,34 @@
     <div class="container-fluid">
         <div class="row">
             <div class="col-12 mt-3">
-                <mat-checkbox [(ngModel)]="download_all"><ng-container i18n="Download all uploads subscription setting">Download all uploads</ng-container></mat-checkbox>
+                <mat-checkbox (change)="downloadAllToggled()" [(ngModel)]="download_all"><ng-container i18n="Download all uploads subscription setting">Download all uploads</ng-container></mat-checkbox>
             </div>
-            <div class="col-12" *ngIf="!download_all">
+            <div class="col-12" *ngIf="!download_all && editor_initialized">
                 <ng-container i18n="Download time range prefix">Download videos uploaded in the last</ng-container>
-                <mat-form-field color="accent" style="width: 50px; text-align: center">
+                <mat-form-field color="accent" style="width: 50px; text-align: center; margin-left: 10px;">
                     <input type="number" matInput [(ngModel)]="timerange_amount" (ngModelChange)="timerangeChanged($event, false)">
                 </mat-form-field>
-                <mat-select color="accent" class="unit-select" [(ngModel)]="timerange_unit" (ngModelChange)="timerangeChanged($event, true)">
+                <mat-form-field class="unit-select">
+                    <mat-select color="accent" [(ngModel)]="timerange_unit" (ngModelChange)="timerangeChanged($event, true)">
                         <mat-option *ngFor="let time_unit of time_units" [value]="time_unit + (timerange_amount === 1 ? '' : 's')">
                             {{time_unit + (timerange_amount === 1 ? '' : 's')}}
                         </mat-option>
                     </mat-select>
+                </mat-form-field>
             </div>
             <div class="col-12">
                 <div>
-                    <mat-checkbox [(ngModel)]="audioOnlyMode"><ng-container i18n="Streaming-only mode">Audio-only mode</ng-container></mat-checkbox>
+                    <mat-checkbox [disabled]="true" [(ngModel)]="audioOnlyMode"><ng-container i18n="Streaming-only mode">Audio-only mode</ng-container></mat-checkbox>
                 </div>
             </div>
             <div class="col-12">
                 <div>
-                    <mat-checkbox [disabled]="audioOnlyMode" [(ngModel)]="sub.streamingOnly"><ng-container i18n="Streaming-only mode">Streaming-only mode</ng-container></mat-checkbox>
+                    <mat-checkbox [disabled]="new_sub.type === 'audio'" [(ngModel)]="new_sub.streamingOnly"><ng-container i18n="Streaming-only mode">Streaming-only mode</ng-container></mat-checkbox>
                 </div>
             </div>
             <div class="col-12 mb-3">
                 <mat-form-field color="accent">
-                    <input [(ngModel)]="sub.custom_args" matInput placeholder="Custom args" i18n-placeholder="Subscription custom args placeholder">
+                    <input [(ngModel)]="new_sub.custom_args" matInput placeholder="Custom args" i18n-placeholder="Subscription custom args placeholder">
                     <button class="args-edit-button" (click)="openArgsModifierDialog()" mat-icon-button><mat-icon>edit</mat-icon></button>
                     <mat-hint>
                         <ng-container i18n="Custom args hint">These are added after the standard args.</ng-container>
@@ -38,7 +40,7 @@
             </div>
             <div class="col-12">
                 <mat-form-field color="accent">
-                    <input [(ngModel)]="sub.custom_output" matInput placeholder="Custom file output" i18n-placeholder="Subscription custom file output placeholder">
+                    <input [(ngModel)]="new_sub.custom_output" matInput placeholder="Custom file output" i18n-placeholder="Subscription custom file output placeholder">
                     <mat-hint>
                         <a target="_blank" href="https://github.com/ytdl-org/youtube-dl/blob/master/README.md#output-template">
                         <ng-container i18n="Custom output template documentation link">Documentation</ng-container></a>.

src/app/dialogs/edit-subscription-dialog/edit-subscription-dialog.component.scss

@@ -0,0 +1,9 @@
+.args-edit-button {
+    position: absolute;
+    margin-left: 10px;
+}
+
+.unit-select {
+    width: 75px;
+    margin-left: 20px;
+}

src/app/dialogs/edit-subscription-dialog/edit-subscription-dialog.component.ts

@@ -1,6 +1,7 @@
-import { Component, OnInit, Inject } from '@angular/core';
+import { Component, OnInit, Inject, ChangeDetectorRef } from '@angular/core';
-import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
 import { PostsService } from 'app/posts.services';
+import { ArgModifierDialogComponent } from '../arg-modifier-dialog/arg-modifier-dialog.component';
 
 @Component({
   selector: 'app-edit-subscription-dialog',
@@ -9,11 +10,18 @@ import { PostsService } from 'app/posts.services';
 })
 export class EditSubscriptionDialogComponent implements OnInit {
 
+  updating = false;
+
   sub = null;
   new_sub = null;
 
-  timerange_amount: string;
+  editor_initialized = false;
+
+  timerange_amount: number;
   timerange_unit = 'days';
+  audioOnlyMode = null;
+  download_all = null;
+
 
   time_units = [
     'day',
@@ -22,17 +30,49 @@ export class EditSubscriptionDialogComponent implements OnInit {
     'year'
   ];
 
-  constructor(@Inject(MAT_DIALOG_DATA) public data: any, private postsService: PostsService) {
+  constructor(@Inject(MAT_DIALOG_DATA) public data: any, private dialog: MatDialog, private postsService: PostsService) {
     this.sub = this.data.sub;
     this.new_sub = JSON.parse(JSON.stringify(this.sub));
+
+    this.audioOnlyMode = this.sub.type === 'audio';
+    this.download_all = !this.sub.timerange;
+
+    if (this.sub.timerange) {
+      const timerange_str = this.sub.timerange.split('-')[1];
+      console.log(timerange_str);
+      const number = timerange_str.replace(/\D/g,'');
+      let units = timerange_str.replace(/[0-9]/g, '');
+
+      console.log(units);
+
+      // // remove plural on units
+      // if (units[units.length-1] === 's') {
+      //   units = units.substring(0, units.length-1);
+      // }
+
+      this.timerange_amount = parseInt(number);
+      this.timerange_unit = units;
+      this.editor_initialized = true;
+    } else {
+      this.editor_initialized = true
+    }
   }
 
   ngOnInit(): void {
   }
 
+  downloadAllToggled() {
+    if (this.download_all) {
+      this.new_sub.timerange = null;
+    } else {
+      console.log('checking');
+      this.timerangeChanged(null, null);
+    }
+  }
+
   saveSubscription() {
     this.postsService.updateSubscription(this.sub).subscribe(res => {
-      this.sub = res['subscription'];
+      this.sub = this.new_sub;
       this.new_sub = JSON.parse(JSON.stringify(this.sub));
     })
   }
@@ -45,9 +85,40 @@ export class EditSubscriptionDialogComponent implements OnInit {
   }
 
   timerangeChanged(value, select_changed) {
-    console.log(value);
     console.log(this.timerange_amount);
     console.log(this.timerange_unit);
+
+    if (this.timerange_amount && this.timerange_unit && !this.download_all) {
+      this.new_sub.timerange = 'now-' + this.timerange_amount.toString() + this.timerange_unit;
+      console.log(this.new_sub.timerange);
+    } else {
+      this.new_sub.timerange = null;
+    }
+  }
+
+  saveClicked() {
+    this.saveSubscription();
+  }
+
+  // modify custom args
+  openArgsModifierDialog() {
+    if (!this.new_sub.custom_args) {
+      this.new_sub.custom_args = '';
+    }
+    const dialogRef = this.dialog.open(ArgModifierDialogComponent, {
+      data: {
+       initial_args: this.new_sub.custom_args
+      }
+    });
+    dialogRef.afterClosed().subscribe(new_args => {
+      if (new_args !== null && new_args !== undefined) {
+        this.new_sub.custom_args = new_args;
+      }
+    });
+  }
+
+  subChanged() {
+    return JSON.stringify(this.new_sub) !== JSON.stringify(this.sub);
   }
 
 }