Merge branch 'mr-bones' into dev

package.json

@@ -32,7 +32,9 @@
     "@material/image-list": "^3.1.0",
     "@ngneat/until-destroy": "^9.0.0",
     "@s-libs/ng-core": "^14.1.0",
+    "@types/byte-size": "^8.1.0",
     "array-flat-polyfill": "^1.0.1",
+    "byte-size": "^8.1.0",
     "file-saver": "^2.0.5",
     "git-rev-sync": "^3.0.1",
     "material-design-icons-iconfont": "^5.0.1",

src/app/about/about.component.html

@@ -17,6 +17,9 @@ <h2 class="mat-display-1">About</h2>
     <a mat-list-item role="listitem" (click)="updates.checkForUpdate()" *ngIf="this.updates.isEnabled">
       <div mat-line>Check for updates</div>
     </a>
+    <a mat-list-item role="listitem" (click)="boned()">
+      <div mat-line>How boned am I?</div>
+    </a>
     <mat-divider></mat-divider>
     <div mat-subheader>Debug</div>
     <a mat-list-item role="listitem" [href]="repoURL + '/commit/' + env.versionInfo.hash">

src/app/about/about.component.ts

@@ -3,6 +3,8 @@ import { Component, OnInit } from '@angular/core';
 import { SwUpdate } from '@angular/service-worker';
 import { HydrusFilesService } from '../hydrus-files.service';
 import { Platform } from '@angular/cdk/platform';
+import { MatDialog } from '@angular/material/dialog';
+import { MrBonesDialogComponent } from '../mr-bones-dialog/mr-bones-dialog.component';
 
 @Component({
   selector: 'app-about',
@@ -14,7 +16,8 @@ export class AboutComponent implements OnInit {
   constructor(
     public updates: SwUpdate,
     public filesService: HydrusFilesService,
-    public platform: Platform) { }
+    public platform: Platform,
+    private dialog: MatDialog) { }
 
   public doc = document;
 
@@ -34,4 +37,8 @@ export class AboutComponent implements OnInit {
     }
   }
 
+  boned() {
+    this.dialog.open(MrBonesDialogComponent);
+  }
+
 }

src/app/app.module.ts

@@ -41,6 +41,7 @@ import {MatDatepickerModule} from '@angular/material/datepicker';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
 import {MatSelectModule} from '@angular/material/select';
 import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatTableModule} from '@angular/material/table';
 
 import {PortalModule} from '@angular/cdk/portal';
 import {ScrollingModule} from '@angular/cdk/scrolling';
@@ -68,6 +69,8 @@ import { TagNamespaceClassPipe } from './utils/tag-utils';
 import { SystemPredicateDialogComponent } from './system-predicate-dialog/system-predicate-dialog.component';
 import { MatNativeDateModule } from '@angular/material/core';
 import { SortInputComponent } from './sort-input/sort-input.component';
+import { MrBonesDialogComponent } from './mr-bones-dialog/mr-bones-dialog.component';
+import { ByteSizePipe } from './byte-size.pipe';
 
 
 const MAT_MODULES = [
@@ -96,7 +99,8 @@ const MAT_MODULES = [
     MatDatepickerModule,
     MatButtonToggleModule,
     MatSelectModule,
-    MatTooltipModule
+    MatTooltipModule,
+    MatTableModule
 ];
 
 
@@ -119,7 +123,9 @@ const MAT_MODULES = [
         TagInputDialogComponent,
         TagNamespaceClassPipe,
         SystemPredicateDialogComponent,
-        SortInputComponent
+        SortInputComponent,
+        MrBonesDialogComponent,
+        ByteSizePipe
     ],
     imports: [
         BrowserModule,

src/app/byte-size.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { ByteSizePipe } from './byte-size.pipe';
+
+describe('ByteSizePipe', () => {
+  it('create an instance', () => {
+    const pipe = new ByteSizePipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/byte-size.pipe.ts

@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import byteSize, { ByteSizeOptions } from 'byte-size'
+
+@Pipe({
+  name: 'byteSize'
+})
+export class ByteSizePipe implements PipeTransform {
+
+  transform(value: number, options: ByteSizeOptions = {}): unknown {
+    return byteSize(value, options);
+  }
+
+}

src/app/file-info-sheet/file-info-sheet.component.html

@@ -38,7 +38,7 @@ <h2 mat-dialog-title class="sheet-title">File Info</h2>
     <mat-list-item role="listitem">
       <mat-icon mat-list-icon>{{file.fileIcon}}</mat-icon>
       <div mat-line>{{file.file_id}}</div>
-      <div mat-line class="metadata-line"><span>{{file.mime}}</span> <span *ngIf="file.width && file.height">{{file.width}}x{{file.height}}</span> <span>{{file.size | bytes: 2}}</span></div>
+      <div mat-line class="metadata-line"><span>{{file.mime}}</span> <span *ngIf="file.width && file.height">{{file.width}}x{{file.height}}</span> <span>{{file.size | byteSize: {units: 'iec', precision: 2} }}</span></div>
     </mat-list-item>
     <mat-list-item role="listitem">
       <mat-icon mat-list-icon>{{file.is_trashed ? "delete" : file.is_inbox ? "inbox" : "archive"}}</mat-icon>

src/app/hydrus-api.service.ts

@@ -6,6 +6,7 @@ import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
 import { HydrusSortType } from './hydrus-sort';
 import { HydrusBasicFileFromAPI, HydrusFileFromAPI } from './hydrus-file';
 import { HydrusSearchTags, TagDisplayType } from './hydrus-tags';
+import { HydrusBonedStats } from './hydrus-mr-bones';
 
 export interface HydrusKeyVerificationData {
   basic_permissions: number[];
@@ -337,4 +338,8 @@ export class HydrusApiService {
   }) {
     return this.apiPost<void>('add_files/unarchive_files', data);
   }
+
+  public mrBones() {
+    return this.apiGet<{boned_stats: HydrusBonedStats}>('manage_database/mr_bones');
+  }
 }

src/app/hydrus-mr-bones.ts

@@ -0,0 +1,13 @@
+export interface HydrusBonedStats {
+  num_inbox: number;
+  num_archive: number;
+  num_deleted: number;
+  size_inbox: number;
+  size_archive: number;
+  size_deleted: number;
+  earliest_import_time: number;
+  total_viewtime: number[];
+  total_alternate_files: number;
+  total_duplicate_files: number;
+  total_potential_pairs: number;
+}

src/app/mr-bones-dialog/mr-bones-dialog.component.html

@@ -0,0 +1,58 @@
+<h1 mat-dialog-title>Review your fate</h1>
+<div mat-dialog-content>
+  <div *ngIf="bones$ | async as bones; else loading">
+    <div *ngIf="bones.stats as stats; else nothing">
+      <div *ngIf="stats.boned; else notBoned">
+        <img src="/assets/boned.jpg" width="350" height="230">
+      </div>
+      <ng-template #notBoned>
+        <p class="centered-text">CONGRATULATIONS. YOU APPEAR TO BE UNBONED, BUT REMAIN EVER VIGILANT</p>
+      </ng-template>
+      <div class="table-container">
+        <table mat-table [dataSource]="stats.table">
+
+          <ng-container matColumnDef="label">
+            <th mat-header-cell *matHeaderCellDef></th>
+            <td mat-cell *matCellDef="let element">{{element.label}}:</td>
+          </ng-container>
+
+
+          <ng-container matColumnDef="num">
+            <th mat-header-cell *matHeaderCellDef>Files</th>
+            <td mat-cell *matCellDef="let element">{{element.num | number}}</td>
+          </ng-container>
+
+          <ng-container matColumnDef="numPercent">
+            <th mat-header-cell *matHeaderCellDef>%</th>
+            <td mat-cell *matCellDef="let element">{{element.numPercent | percent:'1.0-2'}}</td>
+          </ng-container>
+
+          <ng-container matColumnDef="size">
+            <th mat-header-cell *matHeaderCellDef>Size</th>
+            <td mat-cell *matCellDef="let element">{{element.size | byteSize: {units: 'iec', precision: 2} }}</td>
+          </ng-container>
+
+          <ng-container matColumnDef="sizePercent">
+            <th mat-header-cell *matHeaderCellDef>%</th>
+            <td mat-cell *matCellDef="let element">{{element.sizePercent | percent:'1.0-2'}}</td>
+          </ng-container>
+
+          <ng-container matColumnDef="averageFilesize">
+            <th mat-header-cell *matHeaderCellDef>Average</th>
+            <td mat-cell *matCellDef="let element">{{element.averageFilesize | byteSize: {units: 'iec', precision: 2} }}</td>
+          </ng-container>
+
+          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+        </table>
+      </div>
+      <p class="centered-text">Earliest file import: {{stats.earliestImport | date:'yyyy-MM-dd HH:mm:ss'}} ({{stats.earliestImport | timeAgo}})</p>
+    </div>
+    <ng-template #nothing>
+      <p>You have yet to board the ride.</p>
+    </ng-template>
+  </div>
+  <ng-template #loading>
+    <mat-spinner></mat-spinner>
+  </ng-template>
+</div>

src/app/mr-bones-dialog/mr-bones-dialog.component.scss

@@ -0,0 +1,41 @@
+.mat-spinner {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+table {
+  width: 100%;
+}
+
+.mat-column-num.mat-cell,
+.mat-column-numPercent.mat-cell,
+.mat-column-size.mat-cell,
+.mat-column-sizePercent.mat-cell,
+.mat-column-averageFilesize.mat-cell {
+  text-align: end;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
+}
+
+.mat-cell, .mat-header-cell {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.mat-header-cell {
+  text-align: center;
+}
+
+.table-container {
+  overflow-x: auto;
+}
+
+.centered-text {
+  text-align: center;
+}

src/app/mr-bones-dialog/mr-bones-dialog.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MrBonesDialogComponent } from './mr-bones-dialog.component';
+
+describe('MrBonesDialogComponent', () => {
+  let component: MrBonesDialogComponent;
+  let fixture: ComponentFixture<MrBonesDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MrBonesDialogComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MrBonesDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});