You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
111 lines
4.4 KiB
111 lines
4.4 KiB
<div class="h-100 d-flex flex-column">
|
|
<div class="buttons m-2">
|
|
<button mat-raised-button color="primary" (click)="save()">Save plan</button>
|
|
<button mat-raised-button color="primary" (click)="openPlan()">Open plan for editing</button>
|
|
<button mat-raised-button color="primary" (click)="loadBasePlan()">Load base plan preset</button>
|
|
</div>
|
|
|
|
<div class="d-flex flex-column overflow-hidden p-4 grow">
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<div class="row">
|
|
<mat-form-field color="accent">
|
|
<mat-label>Area filter</mat-label>
|
|
<input matInput type="text" [(ngModel)]="areaSearchString">
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="row">
|
|
<mat-form-field>
|
|
<mat-label>Act filter</mat-label>
|
|
<mat-select [(value)]="filterAct">
|
|
<mat-option *ngFor="let item of acts" [value]="item">{{item.name}}</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-6">
|
|
<div class="row">
|
|
<mat-form-field>
|
|
<mat-label>Area filter</mat-label>
|
|
<input matInput type="text" [ngModel]="planSearchString" (ngModelChange)="planSearchStringChange($event)">
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="row">
|
|
<mat-form-field>
|
|
<mat-label>Act filter</mat-label>
|
|
<mat-select [value]="planFilterAct" (valueChange)="planFilterActChange($event)">
|
|
<mat-option *ngFor="let item of acts" [value]="item">{{item.name}}</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<mat-slide-toggle class="col-5" color="accent" [(ngModel)]="autoScrollToEnd">
|
|
Auto scroll to latest
|
|
</mat-slide-toggle>
|
|
|
|
<mat-slide-toggle class="col-4" color="accent" [ngModel]="reverseDisplay"
|
|
(ngModelChange)="reverseDisplayChange($event)">
|
|
Reverse display
|
|
</mat-slide-toggle>
|
|
<div class="col-3 d-flex justify-content-end ">
|
|
<button class="" mat-stroked-button color="warn" (click)="clearPlan()">Clear</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div cdkDropListGroup class="row h-100 overflow-hidden">
|
|
|
|
|
|
<div class="col-6 d-flex flex-column h-100 grow">
|
|
<h2>Campaign zones</h2>
|
|
|
|
<div cdkDropList [cdkDropListData]="filterAreas()" class="list h-100 areas" cdkDropListSortingDisabled
|
|
(cdkDropListDropped)="dropHandler($event)">
|
|
<div class="box" *ngFor="let item of filterAreas(); index as boxindex" cdkDrag
|
|
(dblclick)="doubleClickArea(item)">
|
|
<div class="zone-name">{{item.name}}</div>
|
|
<div class="act">Act {{item.act}}</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-6 d-flex flex-column h-100 grow">
|
|
<h2>Plan</h2>
|
|
|
|
<div appendOnly #planListElement cdkDropList [cdkDropListData]="(this.latestList | async)!" class="list h-100"
|
|
(cdkDropListDropped)="dropHandler($event)" [cdkDropListDisabled]="disabledPlanDD"
|
|
[cdkDropListEnterPredicate]="canDrop" [cdkDropListSortPredicate]="sortPredicate.bind(this)">
|
|
|
|
<div class="box" *ngFor="let item of latestList | async; index as boxIndex" cdkDrag
|
|
[cdkDragDisabled]="(!!this.planFilterAct.value) && boxIndex == 0" (contextmenu)="addNote($event, item)">
|
|
<div class="content">
|
|
<div class="content-left">
|
|
<div class="zone-name">{{areasMap?.get(item.area_key)?.name}}</div>
|
|
<div class="act">Act {{areasMap?.get(item.area_key)?.act}}
|
|
<mat-slide-toggle class="" color="accent" [(ngModel)]="item.checkpoint">
|
|
Checkpoint zone
|
|
</mat-slide-toggle>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div *ngIf="item.notes" class="notes">(Note)</div>
|
|
<div class="index">#{{planIndexOf(item)}}</div>
|
|
<div class="delete" (click)="remove(item)">+</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div cdkDropList [cdkDropListData]="(this.latestList | async) !" class="list end"
|
|
style="position: relative;display: flex; flex-direction: column; justify-content: center;"
|
|
(cdkDropListDropped)="dropEndHandler($event)">
|
|
<span style="position: absolute; ">Place at end of list</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |