File priority for torrents (#140)

* refactor p-tag styles, also use it in torrent dialog * add more fields in general tab * get and render file priority information * keep track of file index * parent can control priority of children - add support for endpoint - more mock data * user-friendly names for file priorities * prevent new render while selecting priority * fix some styles * table styling tweaks * checkbox beside each file and folder * show number of files chosen in torrent contents * improved styling for tree explorer - everything is aligned properly - prevent overflow at the top-level
bill-ahmed · Oct 11, 2021 · 286bb0b · 286bb0b
1 parent a7f791d
commit 286bb0b
Show file tree

Hide file tree

Showing 24 changed files with 391 additions and 178 deletions.
diff --git a/mock_backend/index.js b/mock_backend/index.js
@@ -48,26 +48,43 @@ app.get('/api/v2/sync/maindata', function(req, res) {
     res.json(response);
 });
 
+const torrent_priorities = [0, 1, 6, 7];
+
 app.post('/api/v2/torrents/files', function(req, res) {
   let response = [{
       name: "Ubuntu LTS 18.04/something.iso",
       /** File size (bytes) */
       size: GetRandomInt(0, 900000000000),
       progress: Math.random(),
-      priority: 1,
+      priority: torrent_priorities[GetRandomInt(0, torrent_priorities.length)],
       is_seed: true,
       piece_range: [],
       availability: Math.random(),
-  }, {
+      index: 0,
+  },
+  {
     name: "Ubuntu LTS 20.20/another.iso",
     /** File size (bytes) */
     size: GetRandomInt(0, 900000000000),
     progress: Math.random(),
-    priority: 6,
+    priority: torrent_priorities[GetRandomInt(0, torrent_priorities.length)],
+    is_seed: false,
+    piece_range: [],
+    availability: Math.random(),
+    index: 1
+  },
+  {
+    name: "Ubuntu LTS 20.20/folder1/new.iso",
+    /** File size (bytes) */
+    size: GetRandomInt(0, 900000000000),
+    progress: Math.random(),
+    priority: 7,//torrent_priorities[GetRandomInt(0, torrent_priorities.length)],
     is_seed: false,
     piece_range: [],
     availability: Math.random(),
-  }];
+    index: 2
+  }
+];
   res.json(response);
 });
 

diff --git a/src/app/file-system-tree-explorer/file-system-tree-explorer.component.html b/src/app/file-system-tree-explorer/file-system-tree-explorer.component.html
@@ -4,13 +4,26 @@
     <!-- This is the tree node template for leaf nodes -->
     <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
       <li *ngIf="isParentRendered(node)" class="file-node mat-tree-node">
+        <mat-checkbox *ngIf="allowSetPriority" class="toggle_checkbox" (change)="handleCheckboxClick(node)" [checked]="node.priority !== 0"></mat-checkbox>
+
         <!-- use a disabled button to provide padding for tree leaf -->
         <button mat-icon-button disabled><mat-icon color="accent">file_copy</mat-icon></button>
         <div class="node-info">
-          <div id="node-title">
+          <div class="node-title">
             {{node.name}}
           </div>
 
+          <div class="priority_selection" *ngIf="allowSetPriority" style="padding: 10px 0;">
+            <mat-form-field>
+              <mat-label>Choose priority</mat-label>
+              <mat-select (selectionChange)="handleFilePriorityChange(node)" (openedChange)="handleFilePriorityToggled()" [(value)]="node.priority">
+                <mat-option *ngFor="let item of file_priorities" [value]="item">
+                  {{ file_priorities_mapping[item] }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+          </div>
+
           <div class="grow">
             <div id="progress" *ngIf="showProgress">
               Done: {{getNodeProgress(node)}}%
@@ -27,27 +40,42 @@
     <!-- This is the tree node template for expandable nodes -->
     <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
       <li *ngIf="isParentRendered(node)" class="directory-node">
-        <div (click)="toggleNode(node)" matRipple matTreeNodeToggle class="mat-tree-node">
-          <button mat-icon-button matTreeNodeToggle id="expand_folder_button"
-                  [attr.aria-label]="'toggle ' + node.name">
-            <mat-icon class="mat-icon-rtl-mirror">
-              {{isExpanded(node) ? 'expand_more' : 'chevron_right'}}
-            </mat-icon>
-          </button>
-          <div class="node-info">
-            <div id="node-title">
-              {{node.name}}
-            </div>
+        <div style="display: flex; flex-direction: row; align-items: center;">
+          <mat-checkbox *ngIf="allowSetPriority" class="toggle_checkbox" (change)="handleCheckboxClick(node)" [checked]="node.priority !== 0"></mat-checkbox>
 
-            <div class="grow">
-              <div id="progress" *ngIf="showProgress">
-                Done: {{getNodeProgress(node)}}%
+          <div (click)="toggleNode(node)" matRipple matTreeNodeToggle class="mat-tree-node">
+            <button mat-icon-button matTreeNodeToggle id="expand_folder_button"
+                    [attr.aria-label]="'toggle ' + node.name">
+              <mat-icon class="mat-icon-rtl-mirror">
+                {{isExpanded(node) ? 'expand_more' : 'chevron_right'}}
+              </mat-icon>
+            </button>
+            <div class="node-info">
+              <div class="node-title">
+                {{node.name}}
               </div>
 
-              <div id="fileSize">
-                {{getNodeSize(node)}}
+              <div class="priority_selection" *ngIf="allowSetPriority" (click)="$event.stopPropagation()">
+                <mat-form-field>
+                  <mat-label>Choose priority</mat-label>
+                  <mat-select (selectionChange)="handleFilePriorityChange(node)" (openedChange)="handleFilePriorityToggled()" [(value)]="node.priority">
+                    <mat-option *ngFor="let item of file_priorities" [value]="item">
+                      {{ file_priorities_mapping[item] }}
+                    </mat-option>
+                  </mat-select>
+                </mat-form-field>
               </div>
-          </div>
+
+              <div class="grow">
+                <div id="progress" *ngIf="showProgress">
+                  Done: {{getNodeProgress(node)}}%
+                </div>
+
+                <div id="fileSize">
+                  {{getNodeSize(node)}}
+                </div>
+              </div>
+            </div>
           </div>
         </div>
         <ul [class.tree-invisible]="!isExpanded(node)">

diff --git a/src/app/file-system-tree-explorer/file-system-tree-explorer.component.scss b/src/app/file-system-tree-explorer/file-system-tree-explorer.component.scss
@@ -18,25 +18,36 @@
     cursor: default;
   }
 
-  overflow-x: scroll;
+  word-wrap: break-word;
 }
 
 #expand_folder_button {
   pointer-events: none;
 }
 
+.toggle_checkbox {
+  margin: 0 10px 0 20px;
+}
+
 .node-info {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: space-between;
   align-items: center;
-  width: 90%;
 
-  #node-title {
-    flex-grow: 1;
-    width: 70%;
+  width: 100%;
+
+  padding: 0 10px;
+
+  .node-title {
     word-wrap: break-word;
+    width: 360px;
+  }
+
+  .priority_selection {
+    font-size: 10pt;
+    padding-top: 10px;
   }
 
   #progress, #fileSize {
@@ -50,7 +61,13 @@
   flex-direction: row;
   justify-content: space-evenly;
 
+  flex-grow: 0.1;
+
   #progress, #fileSize {
-    margin: 0 8px;
+    margin: 0 2px;
+    width: 80px;
+    text-align: end;
   }
+
+  #progress { width: 100px; }
 }
diff --git a/src/app/file-system-tree-explorer/file-system-tree-explorer.component.ts b/src/app/file-system-tree-explorer/file-system-tree-explorer.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, SimpleChanges, OnChanges } from '@angular/core';
+import { Component, OnInit, Input, SimpleChanges, OnChanges, Output, EventEmitter } from '@angular/core';
 import { NestedTreeControl } from '@angular/cdk/tree';
 import { MatTreeNestedDataSource } from '@angular/material/tree';
 import { FileSystemService, SerializedNode } from '../services/file-system/file-system.service';
@@ -14,13 +14,23 @@ import { ApplicationConfigService } from '../services/app/application-config.ser
 export class FileSystemTreeExplorerComponent implements OnChanges {
   @Input() directories: SerializedNode[];
   @Input() showProgress: boolean = false;
+  @Input() allowSetPriority: boolean = false;
+
+  /** When user changes the priority */
+  @Output() onPriorityChange = new EventEmitter<SerializedNode>();
+
+  /** When user toggles the drop-down menu in order to choose a priority */
+  @Output() onPriorityChangeToggled = new EventEmitter();
 
   public isLoading = true;
 
   /** Controls for tree components */
   public treeControl = new NestedTreeControl<SerializedNode>(node => node.children);
   public dataSource = new MatTreeNestedDataSource<SerializedNode>();
 
+  public file_priorities = ApplicationConfigService.FILE_PRIORITY_OPTS;
+  public file_priorities_mapping = ApplicationConfigService.FILE_PRIORITY_OPTS_MAPPING;
+
   private root: DirectoryNode;                           /** File System to keep track of the files in a torrent */
 
   private expanded_nodes: Set<string> = new Set<string>();
@@ -35,6 +45,8 @@ export class FileSystemTreeExplorerComponent implements OnChanges {
 
   ngOnInit(): void {
     this._updateData();
+
+    console.log('allow set priority?', this.allowSetPriority)
   }
 
   ngOnChanges(changes: SimpleChanges) {
@@ -43,10 +55,18 @@ export class FileSystemTreeExplorerComponent implements OnChanges {
       this._updateData();
     }
 
-    if(changes.showProgress) {
-      this.showProgress = changes.showProgress.currentValue;
-    }
+    if(changes.showProgress) { this.showProgress = changes.showProgress.currentValue; }
+    if(changes.allowSetPriority) { this.allowSetPriority = changes.allowSetPriority.currentValue }
+  }
+
+  handleCheckboxClick(node: SerializedNode) {
+    let o = node.progress;
+    node.progress = o === 0 ? 1 : 0
+
+    this.onPriorityChange.emit(node);
   }
+  handleFilePriorityChange(node: SerializedNode) { this.onPriorityChange.emit(node); }
+  handleFilePriorityToggled() { this.onPriorityChangeToggled.emit(''); }
 
   /** Refresh all filesystem data. This could potentially be an
    *  expensive operation.

diff --git a/src/app/modals/add-torrent-dialog/add-torrent-dialog.component.html b/src/app/modals/add-torrent-dialog/add-torrent-dialog.component.html
@@ -47,21 +47,18 @@ <h4 *ngIf="!show_torrent_contents">
       <br/>
 
       <h3>Save Location</h3>
-      <p>Pick a location to save the files. If none is chosen, the default shown will be used instead.</p>
 
       <div id="choose_save_location">
         <mat-form-field appearance="outline">
           <mat-label>Download To...</mat-label>
           <input value="{{filesDestination}}" name="savepath" type="text" id="savepath" (change)="updateFileDestination($event)" matInput >
-          <mat-icon matSuffix>folder_open</mat-icon>
         </mat-form-field>
 
-        <button id="trigger_file_explorer" color="primary" mat-raised-button (click)="openFileSystemExplorerDialog($event)">
+        <button id="trigger_file_explorer" color="accent" mat-raised-button (click)="openFileSystemExplorerDialog($event)">
           <mat-icon>folder</mat-icon>
           &nbsp; Choose Location
         </button>
       </div>
-      <br/>
     </mat-dialog-content>
 
     <mat-dialog-actions align="end">
@@ -72,10 +69,11 @@ <h3>Save Location</h3>
   </div>
 
   <div *ngIf="show_torrent_contents && hasUploadedFiles()" [ngClass]="isOnFileUploadTab() ? '' : 'hidden'" class="mat-app-background torrent_contents_container">
-    <h3> Torrent Contents </h3>
-    <mat-card-subtitle *ngIf="!hasUploadedFiles()">
-      <i> Try uploading some files first. </i>
-    </mat-card-subtitle>
+    <div class="torrent-contents-header">
+      <h3> Torrent Contents</h3>
+      <p>&nbsp; • &nbsp;</p>
+      <p> {{getFilesToUploadString()}} </p>
+    </div>
 
     <div class="files_in_torrents">
       <app-file-system-tree-explorer

diff --git a/src/app/modals/add-torrent-dialog/add-torrent-dialog.component.scss b/src/app/modals/add-torrent-dialog/add-torrent-dialog.component.scss
@@ -18,7 +18,7 @@
     max-height: unset;
 
     #choose_save_location {
-      width: 95%;
+      width: 85%;
       min-width: 300px;
 
       display: flex;
@@ -56,6 +56,12 @@
     width: 100%;
     overflow: scroll;
   }
+
+  .torrent-contents-header {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+  }
 }
 
 .mat-raised-button {

diff --git a/src/app/modals/file-system-dialog/file-system-dialog.component.scss b/src/app/modals/file-system-dialog/file-system-dialog.component.scss
@@ -24,9 +24,9 @@ $border-dark: #494949;
   flex-direction: row;
 
   .searchDirectoriesContainer {
-    height: 60px;
-    width: 60%;
-    min-width: 100px;
+    height: 50px;
+    width: 40%;
+    min-width: 300px;
 
     display: flex;
     flex-direction: row;

diff --git a/src/app/modals/torrent-info-dialog/torrent-info-dialog.component.css b/src/app/modals/torrent-info-dialog/torrent-info-dialog.component.css
@@ -7,19 +7,26 @@ app-file-system-tree-explorer {
 }
 
 .torrent-info-general-content, .torrent-info-content-content {
-    margin: 20px 10px 10px 10px;
-    min-height: 150px;
+    overflow-y: scroll;
+}
+
+.row {
+  margin: 10px;
 
-    display: flex;
-    flex-direction: row;
-    justify-content: space-around;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
 }
 
 mat-chip-list {
     align-self: flex-end;
 }
 
-.leftPanel, .rightPanel {
+.panel {
   /* flex-grow: 1; */
   padding: 5px;
 }
+
+.torrent_tags p-tag {
+  margin-right: 8px;
+}