ns-ngrx-debugger/src/debugger.html

A minimal nativescript debugger for ngrx-store & ngrx-effects

<ng-container *ngIf="hidden == false">
  <AbsoluteLayout *ngIf="actions$ | async">

    <ng-container *ngIf="position$ | async as position">
      <Button (pan)="pan$.next({ top: $event.deltaY, left: $event.deltaX })" class="toggle" [top]="position.top" [left]="position.left" (tap)="toggle = !toggle" text="!"></Button>
    </ng-container>

    <ScrollView width="100%" height="100%" padding="10 0" *ngIf="states$ | async as states">
      <StackLayout class="container" *ngIf="toggle">
        <ListView [items]="states" class="panel">
          <ng-template let-item="item">
            <GridLayout class="state" columns="*, auto, auto">
              <Label [text]="item"></Label>
              <Button col="1" (tap)="onExpand(item)" text="expand"></Button>
              <Button col="2" (tap)="onDump(item)" text="dump"></Button>
            </GridLayout>
          </ng-template>
        </ListView>

        <ListView [items]="expanded" class="panel expanded">
          <ng-template let-item="item">
            <GridLayout class="state" columns="*, auto">
              <Label [text]="item"></Label>
              <Button col="1" (tap)="onDump(item)" text="dump"></Button>
            </GridLayout>
          </ng-template>
        </ListView>
      </StackLayout>
    </ScrollView>

  </AbsoluteLayout>
</ng-container>