Implement only-vsize and only-weight directives

frontend/src/app/shared/components/weight-directives/weight-directives.ts

@@ -0,0 +1,45 @@
+import { Directive, OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { StateService } from '../../../services/state.service';
+
+function createRateUnitDirective(checkFn: (rateUnit: string) => boolean): any {
+  @Directive()
+  class RateUnitDirective implements OnDestroy {
+    private subscription: Subscription;
+    private enabled: boolean;
+    private hasView: boolean = false;
+
+    constructor(
+      private templateRef: TemplateRef<any>,
+      private viewContainer: ViewContainerRef,
+      private stateService: StateService
+    ) {
+      this.subscription = this.stateService.rateUnits$.subscribe(rateUnit => {
+        this.enabled = checkFn(rateUnit);
+        this.updateView();
+      });
+    }
+
+    updateView(): void {
+      if (this.enabled && !this.hasView) {
+        this.viewContainer.createEmbeddedView(this.templateRef);
+        this.hasView = true;
+      } else if (!this.enabled && this.hasView) {
+        this.viewContainer.clear();
+        this.hasView = false;
+      }
+    }
+
+    ngOnDestroy(): void {
+      this.subscription.unsubscribe();
+    }
+  }
+
+  return RateUnitDirective;
+}
+
+@Directive({ selector: '[only-vsize]' })
+export class OnlyVsizeDirective extends createRateUnitDirective(rateUnit => rateUnit !== 'wu') {}
+
+@Directive({ selector: '[only-weight]' })
+export class OnlyWeightDirective extends createRateUnitDirective(rateUnit => rateUnit === 'wu') {}

frontend/src/app/shared/shared.module.ts

@@ -98,6 +98,8 @@ import { ClockchainComponent } from '../components/clockchain/clockchain.compone
 import { ClockFaceComponent } from '../components/clock-face/clock-face.component';
 import { ClockComponent } from '../components/clock/clock.component';
 
+import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-directives/weight-directives';
+
 @NgModule({
   declarations: [
     ClipboardComponent,
@@ -188,6 +190,9 @@ import { ClockComponent } from '../components/clock/clock.component';
     ClockchainComponent,
     ClockComponent,
     ClockFaceComponent,
+
+    OnlyVsizeDirective,
+    OnlyWeightDirective
   ],
   imports: [
     CommonModule,
@@ -303,6 +308,9 @@ import { ClockComponent } from '../components/clock/clock.component';
     ClockchainComponent,
     ClockComponent,
     ClockFaceComponent,
+
+    OnlyVsizeDirective,
+    OnlyWeightDirective
   ]
 })
 export class SharedModule {