DNDTools/src/app/journal/journal-places/journal-places.component.html

<div class="places-list">
  <div class="title t-0">{{ "places.title" | translate }}</div>
  <divider appearance="gold-2" style="padding: 0 1rem"></divider>
  <!-- Add Button or temporary unsaved new Place -->
  @if (isNewPlace) {
    <div class="place active">
      <div class="place-title">
        @if (currentPlace.name !== "") {
          {{ currentPlace.name }}
        } @else {
          {{ "places.noName" | translate }}
        }
      </div>
      <div class="unsaved">{{ "places.unsaved" | translate }}</div>
    </div>
  } @else {
    <div class="place add-button" (click)="addPlace()">
      <img src="assets/icons/UIIcons/add.svg" />
    </div>
  }
  <!-- List of entries -->
  @for (place of places; let index = $index; track place) {
    <div
      class="place-wrapper"
      [ngClass]="{
        active: currentIndex === index,
        'edit-mode': isInEditMode
      }"
    >
      <div (click)="selectPlace(index)" class="place">
        <div class="place-title">
          @if (places[index].name !== "") {
            @if (isInEditMode && index === currentIndex) {
              {{ currentPlace.name }}
            } @else {
              {{ places[index].name }}
            }
          } @else {
            {{ "places.noName" | translate }}
          }
        </div>
        @if (isInEditMode && currentIndex === index) {
          <div class="unsaved">{{ "places.unsaved" | translate }}</div>
        }
      </div>
      <div class="control-button-wrapper">
        <icon-button [icon]="'edit-large'" (click)="editPlace()"></icon-button>
        <icon-button [icon]="'delete'" (click)="deletePlace()"></icon-button>
      </div>
    </div>
  }
</div>

@if (places.length > 0 || isNewPlace) {
  @if (isInEditMode) {
    <div class="write-container">
      <div>
        <label class="write-label">{{
          "places.namePlaceholder" | translate
        }}</label>
        <div>
          <mat-form-field class="name-write" appearance="outline">
            <input
              matInput
              [(ngModel)]="currentPlace.name"
              [placeholder]="'places.namePlaceholder' | translate"
            />
          </mat-form-field>
        </div>
      </div>
      <div class="t-2">
        <label class="write-label">{{
          "places.shortPlaceholder" | translate
        }}</label>
        <div class="NgxEditor__Wrapper">
          <ngx-editor-menu [editor]="shortEditor" [toolbar]="toolbar">
          </ngx-editor-menu>
          <ngx-editor
            class="short-editor"
            [editor]="shortEditor"
            [placeholder]="'places.shortPlaceholder' | translate"
            [(ngModel)]="currentPlace.shortDescription"
          ></ngx-editor>
        </div>
      </div>
      <div class="t-2">
        <label class="write-label">{{
          "places.longPlaceholder" | translate
        }}</label>
        <div class="NgxEditor__Wrapper">
          <ngx-editor-menu [editor]="longEditor" [toolbar]="toolbar">
          </ngx-editor-menu>
          <ngx-editor
            class="long-editor"
            [editor]="longEditor"
            [placeholder]="'places.longPlaceholder' | translate"
            [(ngModel)]="currentPlace.longDescription"
          ></ngx-editor>
        </div>
      </div>
      <div class="button-row">
        <ui-button width="w16" (click)="savePlace()">{{
          "places.save" | translate
        }}</ui-button>
        <ui-button width="w16" (click)="discardPlace()">{{
          "places.discard" | translate
        }}</ui-button>
      </div>
    </div>
  } @else {
    <div class="read-container">
      <div class="title-row">
        <div class="name-read">{{ currentPlace.name }}</div>
        <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
          <mat-button-toggle
            value="short"
            (click)="showShortDescription = true"
            >{{ "places.short" | translate }}</mat-button-toggle
          >
          <mat-button-toggle
            value="long"
            [class]="showShortDescription ? '' : 'mat-button-toggle-checked'"
            (click)="showShortDescription = false"
            >{{ "places.long" | translate }}</mat-button-toggle
          >
        </mat-button-toggle-group>
      </div>
      <divider [appearance]="'gold-2'" class="b-1 t-1"></divider>
      <div class="short-read">
        <div
          class="description"
          [innerHTML]="
            showShortDescription
              ? currentPlace.shortDescription
              : currentPlace.longDescription
          "
        ></div>
      </div>
    </div>
  }
} @else {
  <div class="empty-container">
    {{ "places.empty" | translate }}
  </div>
}