-
Notifications
You must be signed in to change notification settings - Fork 25
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feature/refactor general info (#106)
* move global transfer info to the side for larger displays * misc updates * update how data is rendered for transfer info, WIP * endpoint to toggle alt rate limits * UI to toggle alt rate limit * show refresh interval in side-nav & other refactoring * move global transfer info files, create modal for updating global limits * endpoints for updating global limits * set limit via UI * more responsive styles & update sample data * forgot to include endpoints in prod json... * POST body should be empty instead of empty object * also show rate limit if its globally set * should use kibibits
- Loading branch information
1 parent
8dbaebc
commit c8380a4
Showing
23 changed files
with
439 additions
and
216 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
67 changes: 67 additions & 0 deletions
67
src/app/global-transfer-info/global-transfer-info.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| <div [ngClass]="{'dark-theme': isDarkTheme | async}" class="global-transfer-info-container mat-app-background"> | ||
| <mat-card class="mat-elevation-z3 data-container"> | ||
| <section id="disk_summary"> | ||
| <mat-spinner diameter=30 *ngIf="isLoading()"></mat-spinner> | ||
|
|
||
| <div *ngIf="!isLoading()" id="summaryContent"> | ||
| <mat-chip-list> | ||
| <mat-chip color="default" disableRipple selected> | ||
| <mat-icon color="primary">refresh</mat-icon> | ||
| <h4>Refresh Interval: {{refreshInterval / 1000}}s</h4> | ||
| </mat-chip> | ||
|
|
||
| <mat-chip color="default" disableRipple selected> | ||
| <mat-icon color="primary">storage</mat-icon> | ||
| <h4>Free space: {{getFreeSpaceOnDisk()}}</h4> | ||
| </mat-chip> | ||
| </mat-chip-list> | ||
| </div> | ||
| </section> | ||
|
|
||
| <br class="hide-small"/> | ||
| <mat-divider class="hide-small" [inset]="true"></mat-divider> | ||
| <br/> | ||
|
|
||
| <section id="global_transfer"> | ||
| <mat-spinner diameter=30 *ngIf="isLoading()"></mat-spinner> | ||
| <div *ngIf="!isLoading()" id="summaryContent"> | ||
| <mat-chip-list> | ||
| <mat-chip color="primary" (click)="handleDownloadLimitSelect()" disableRipple selected matTooltip="Click to set download limit" matTooltipPosition="above"> | ||
| <mat-icon>arrow_downward</mat-icon> | ||
| <h4>{{getDownloadSpeedString()}} {{getDownLimitString()}}</h4> | ||
| </mat-chip> | ||
|
|
||
| <mat-chip disableRipple> | ||
| <mat-icon>vertical_align_bottom</mat-icon> | ||
| <h4>Downloaded: {{getDownloadedString()}}</h4> | ||
| </mat-chip> | ||
|
|
||
| <br/> | ||
| <mat-chip color="accent" (click)="handleUploadLimitSelect()" disableRipple selected matTooltip="Click to set upload limit" matTooltipPosition="below"> | ||
| <mat-icon>arrow_upward</mat-icon> | ||
| <h4>{{getUploadSpeedString()}} {{getUpLimitString()}}</h4> | ||
| </mat-chip> | ||
|
|
||
| <mat-chip disableRipple> | ||
| <mat-icon>vertical_align_top</mat-icon> | ||
| <h4>Uploaded: {{getUploadedString()}}</h4> | ||
| </mat-chip> | ||
| </mat-chip-list> | ||
| </div> | ||
| </section> | ||
|
|
||
| <div class="hide-small"> | ||
| <br/> | ||
| <mat-divider [inset]="true"></mat-divider> | ||
| <br/> | ||
| </div> | ||
|
|
||
| <section class="hide-small" id="bottom_actions"> | ||
| <div class="row"> | ||
| <mat-slide-toggle labelPosition="before" id="useAltLimits" (toggleChange)="toggleAltSpeedLimits()" [checked]="isAltSpeedEnabled" color="primary" matTooltip="Use alt speed limits" matTooltipPosition="above"> | ||
| <mat-icon style="margin-top: 8px;">speed</mat-icon> | ||
| </mat-slide-toggle> | ||
| </div> | ||
| </section> | ||
| </mat-card> | ||
| </div> |
69 changes: 69 additions & 0 deletions
69
src/app/global-transfer-info/global-transfer-info.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| .global-transfer-info-container { | ||
| height: 100%; | ||
| padding-top: 56px; | ||
|
|
||
| .data-container { | ||
| height: 100%; | ||
|
|
||
| display: flex; | ||
| flex-direction: column; | ||
|
|
||
| section h2 { | ||
| font-weight: 400; | ||
| } | ||
|
|
||
| #disk_summary, #global_transfer { | ||
| display: flex; | ||
| flex-direction: column; | ||
|
|
||
| width: 100%; | ||
| } | ||
|
|
||
| #global_transfer { | ||
| flex-grow: 1; | ||
| } | ||
|
|
||
| #bottom_actions { | ||
| width: 100%; | ||
|
|
||
| #useAltLimits > label > span { | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .row { | ||
| display: flex; | ||
| flex-direction: row; | ||
|
|
||
| margin: 5px 0; | ||
| } | ||
|
|
||
| h3 { | ||
| font-size: 11pt; | ||
| margin: 0; | ||
| } | ||
|
|
||
| #summaryContent h4 { | ||
| font-size: 10pt; | ||
| margin: 0 5px 0 5px; | ||
| } | ||
|
|
||
| mat-chip { | ||
| border-radius: 0; | ||
| width: 100%; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| /** For small screens */ | ||
| @media only screen and (max-width: 1550px) { | ||
| .global-transfer-info-container { | ||
| padding-top: 0; | ||
|
|
||
| .hide-small { | ||
| display: none; | ||
| } | ||
| } | ||
| } |
112 changes: 112 additions & 0 deletions
112
src/app/global-transfer-info/global-transfer-info.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,112 @@ | ||
| import { Component, OnInit } from '@angular/core'; | ||
| import { MatDialogRef, MatDialog } from '@angular/material/dialog'; | ||
| import { TorrentDataStoreService } from 'src/app/services/torrent-management/torrent-data-store.service'; | ||
| import { GlobalTransferInfo, MainData } from 'src/utils/Interfaces'; | ||
| import { UnitsHelperService } from 'src/app/services/units-helper.service'; | ||
| import { ThemeService } from 'src/app/services/theme.service'; | ||
| import { Observable } from 'rxjs'; | ||
| import { NetworkConnectionInformationService } from 'src/app/services/network/network-connection-information.service'; | ||
| import { RateLimitsDialogComponent } from '../modals/rate-limits-dialog/rate-limits-dialog.component'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-global-transfer-info', | ||
| templateUrl: './global-transfer-info.component.html', | ||
| styleUrls: ['./global-transfer-info.component.scss'] | ||
| }) | ||
| export class GlobalTransferInfoComponent implements OnInit { | ||
|
|
||
| public data: GlobalTransferInfo = null; | ||
| public isAltSpeedEnabled: boolean; | ||
|
|
||
| public refreshInterval = -1; | ||
|
|
||
| public isDarkTheme: Observable<boolean>; | ||
|
|
||
| private rateLimitDiaglogRef: MatDialogRef<RateLimitsDialogComponent>; | ||
|
|
||
| constructor(private data_store: TorrentDataStoreService, private networkInfo: NetworkConnectionInformationService, private units_helper: | ||
| UnitsHelperService, private rateLimitDialog: MatDialog, private theme: ThemeService) { } | ||
|
|
||
| ngOnInit(): void { | ||
| this.isDarkTheme = this.theme.getThemeSubscription(); | ||
| // Subscribe to any changes with data store | ||
| this.data_store.GetTorrentDataSubscription().subscribe((res: MainData) => { | ||
| if(res) { | ||
| this.handleDataChange(res.server_state); | ||
| } | ||
| }); | ||
|
|
||
| // Store refresh interval & subscribe to any changes | ||
| this.refreshInterval = this.networkInfo.getRefreshInterval(); | ||
| this.networkInfo.get_network_change_subscription() | ||
| .subscribe(newInterval => { | ||
| this.refreshInterval = this.networkInfo.getRefreshInterval(); | ||
| }) | ||
| } | ||
|
|
||
| handleDataChange(newData: GlobalTransferInfo): void { | ||
| this.data = newData; | ||
| this.isAltSpeedEnabled = this.data.use_alt_speed_limits; | ||
| } | ||
|
|
||
| handleDownloadLimitSelect() { | ||
| this.rateLimitDiaglogRef = this.rateLimitDialog.open(RateLimitsDialogComponent, { | ||
| autoFocus: false, | ||
| data: { | ||
| for: 'Download', | ||
| currentLimit: this.data.dl_rate_limit | ||
| }, | ||
| panelClass: "generic-dialog" | ||
| }); | ||
| } | ||
|
|
||
| handleUploadLimitSelect() { | ||
| this.rateLimitDiaglogRef = this.rateLimitDialog.open(RateLimitsDialogComponent, { | ||
| autoFocus: false, | ||
| data: { | ||
| for: 'Upload', | ||
| currentLimit: this.data.dl_rate_limit | ||
| }, | ||
| panelClass: "generic-dialog" | ||
| }); | ||
| } | ||
|
|
||
| async toggleAltSpeedLimits() { | ||
| console.log('toggled alt limits') | ||
| this.isAltSpeedEnabled = !this.isAltSpeedEnabled | ||
| await this.data_store.ToggleAltSpeedLimits(); | ||
| } | ||
|
|
||
| getDownloadSpeedString() { | ||
| return `${this.units_helper.GetFileSizeString(this.data.dl_info_speed)}/s`; | ||
| } | ||
|
|
||
| getDownloadedString() { | ||
| return `${this.units_helper.GetFileSizeString(this.data.dl_info_data)}`; | ||
| } | ||
|
|
||
| getUploadSpeedString() { | ||
| return `${this.units_helper.GetFileSizeString(this.data.up_info_speed)}/s`; | ||
| } | ||
|
|
||
| getUploadedString() { | ||
| return `${this.units_helper.GetFileSizeString(this.data.up_info_data)}`; | ||
| } | ||
|
|
||
| getDownLimitString() { | ||
| return (this.isAltSpeedEnabled || this.data.dl_rate_limit > 0) ? `[${this.units_helper.GetFileSizeString(this.data.dl_rate_limit)}/s]` : ''; | ||
| } | ||
|
|
||
| getUpLimitString() { | ||
| return (this.isAltSpeedEnabled || this.data.up_rate_limit > 0) ? `[${this.units_helper.GetFileSizeString(this.data.up_rate_limit)}/s]` : ''; | ||
| } | ||
|
|
||
| getFreeSpaceOnDisk() { | ||
| return `${this.units_helper.GetFileSizeString(this.data.free_space_on_disk)}`; | ||
| } | ||
|
|
||
| isLoading(): boolean { | ||
| return !this.data; | ||
| } | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Empty file.
Oops, something went wrong.