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.
81 lines
4.6 KiB
81 lines
4.6 KiB
<ng-container *ngIf="init">
|
|
<div #globalTopLeft style="position: fixed; top: 0; left: 0; z-index: -1;"></div>
|
|
<ng-container *ngIf="rect && planService.currentPlan">
|
|
<div class="target waypoint trial" [style.background-color]="backgroundColor ? backgroundColor : 'rgba(0, 0, 0, 0.1)'"
|
|
[style.transform]="transform()" [style.width]="rect.width + 'px'" [style.height]="rect.height + 'px'"
|
|
[class]="specialClasses()" (wheel)="onScroll($event)" #targetRef>
|
|
<ng-container *ngIf="planService.currentPlan">
|
|
<span hidden>{{planService.currentPlan.current}}</span>
|
|
<carousel [initIndex]="planService.currentPlan.current" [numVisible]="3"
|
|
[slides]="planService.currentPlan.plan" (afterInitSelf)="registerZoneSlides($event)">
|
|
<ng-template let-slide let-index="index">
|
|
<div class="zone-slide" [style.color]="configService.config.noteDefaultFg"
|
|
[style.border]="index == planService.currentPlan.current ? '1px white solid' : 'none'">
|
|
|
|
{{worldAreaMap!.get(slide.area_key)!.name}}
|
|
|
|
<div class="text-marker d-flex flex-row">
|
|
<div class="waypoint-text" *ngIf="hasWaypoint(slide.area_key)">(W)</div>
|
|
<div class="trial-text" *ngIf="hasTrial(slide.area_key)">(T)</div>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
</carousel>
|
|
<carousel [initIndex]="planService.currentPlan.current" [slides]="planService.currentPlan.plan"
|
|
(afterInitSelf)="registerCurrentSlides($event)">
|
|
<ng-template let-slide>
|
|
<scalable>
|
|
<notes class="p-1" [note]="slide.notes" [style.color]="configService.config.noteDefaultFg"
|
|
#noteSlide></notes>
|
|
</scalable>
|
|
</ng-template>
|
|
</carousel>
|
|
|
|
</ng-container>
|
|
<button mat-icon-button *ngIf="overlayService.interactable" class="settings-button"
|
|
(click)="settingsClick($event)" (mousedown)="$event.stopPropagation()"><img
|
|
src="assets/material-settings.svg"></button>
|
|
</div>
|
|
|
|
<ngx-moveable #moveable [target]="targetRef" [draggable]="draggable && overlayService.interactable"
|
|
[resizable]="true && overlayService.interactable" (drag)="onDrag($event)" (resize)="onResize($event)"
|
|
(dragEnd)="onDragEnd($event)" (resizeEnd)="onResizeEnd($event)" [bounds]="bounds" [snappable]="true"
|
|
[style.visibility]="overlayService.interactable ? 'visible' : 'hidden'"></ngx-moveable>
|
|
|
|
</ng-container>
|
|
|
|
<ng-template cdkConnectedOverlay
|
|
[cdkConnectedOverlayOpen]="(settingsOpen || !planService.currentPlan) && overlayService.interactable"
|
|
[cdkConnectedOverlayOrigin]="globalTopLeft" (detach)="settingsOpen = false">
|
|
<div class="overlay container-fluid vw-100">
|
|
<div class="row row-cols-2">
|
|
<div class="planChooser col-xs-6 col-sm-6 col-md-4 col-lg-3 col-xl-3">
|
|
<div class="d-flex justify-content-evenly">
|
|
<div class="col-xs-6">
|
|
<button class="" mat-raised-button color="accent" (click)="openDialog()">Browse
|
|
Plans
|
|
</button>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<button class="" mat-raised-button color="accent" (click)="loadBasePlan()">
|
|
Load base plan
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="enumerated">
|
|
<mat-list role="list">
|
|
<mat-list-item class="d-flex flex-column" role="listitem"
|
|
*ngFor="let plan of planService.planStore"><button
|
|
(click)="setPrevious(plan)">{{plan}}</button></mat-list-item>
|
|
</mat-list>
|
|
|
|
</div>
|
|
</div>
|
|
<settings class="col-xs-6 col-sm-6 offset-md-3 col-md-5 offset-lg-5 col-lg-4 offset-xl-5 col-xl-4">
|
|
</settings>
|
|
</div>
|
|
<button mat-icon-button class="exit" *ngIf="planService.currentPlan"
|
|
(click)="settingsOpen = false"><span>+</span></button>
|
|
</div>
|
|
</ng-template>
|
|
</ng-container> |