dslak_website/src/app/admin/admin.component.html

<div class="component-admin">
  <div class="row no-gutters" *ngIf="!authCheck">
    <div class="col-12 col-md-6 mx-auto">
      <form class="login-form-container" (submit)="login()">
        <div class="m-2">
          <span class="login-label">Username</span>
          <input type="text" class="input-text" name="userName" [(ngModel)]="userName">
        </div>
        <div class="m-2">
          <span class="login-label">Password</span>
          <input type="password" class="input-text" name="password" [(ngModel)]="password">
        </div>
        <div class="m-2 pt-4">
          <button type="submit" class="button">Sign-in</button>
        </div>
      </form>
    </div>
  </div>

  <div class="row no-gutters" *ngIf="authCheck">
    <div class="col-12 col-md-3 col-lg-2">
      <div class="menu">
        <span class="section-title">Works</span>
        <button class="action" [ngClass]="{'active': activeEditor == 'works-add'}" (click)="showEditor('works-add')">Add</button>
        <button class="action" [ngClass]="{'active': activeEditor == 'works-modify'}" (click)="showEditor('works-modify')">Modify</button>
        <button class="action" [ngClass]="{'active': activeEditor == 'works-delete'}" (click)="showEditor('works-delete')">Delete</button>

        <span class="section-title">Exhibitions</span>
        <button class="action" [ngClass]="{'active': activeEditor == 'exhibitions-add'}" (click)="showEditor('exhibitions-add')">Add</button>
        <button class="action" [ngClass]="{'active': activeEditor == 'exhibitions-modify'}" (click)="showEditor('exhibitions-modify')">Modify</button>
        <button class="action" [ngClass]="{'active': activeEditor == 'exhibitions-delete'}" (click)="showEditor('exhibitions-delete')">Delete</button>
      </div>
    </div>
    <div class="col px-5 py-4">
      <div class="edit-container">
        <span class="title">{{sectionTitle}}</span>
        <form class="form row" *ngIf="activeEditor == 'works-modify' || activeEditor == 'works-delete'">
          <div class="col-12">
            <select class="input-select" (change)="selectWork($event.target.value)">
              <option value="">- Select work from list -</option>
              <option value="{{work.id}}" *ngFor="let work of works">
                {{work.type}} | {{work.title}}
              </option>
            </select>
          </div>
        </form>
        <form class="form row" *ngIf="activeEditor == 'exhibitions-modify' || activeEditor == 'exhibitions-delete'">
          <div class="col-12">
            <select class="input-select" (change)="selectExhibition($event.target.value)">
              <option value="">- Select exhibition from list -</option>
              <option value="{{exhibition.id}}" *ngFor="let exhibition of exhibitions">
                {{exhibition.date_from | date}} | {{exhibition.title}}
              </option>
            </select>
          </div>
        </form>
        <form class="form row" (submit)="saveData()"
              *ngIf="activeEditor == 'works-add' || (activeEditor == 'works-modify' && activeModify) ||
                    activeEditor == 'exhibitions-add' || (activeEditor == 'exhibitions-modify' && activeModify)">
          <div [ngClass]="{'col-8': activeEditor == 'works-add' || activeEditor == 'works-modify',
                           'col-6': activeEditor == 'exhibitions-add' || activeEditor == 'exhibitions-modify'}">
            <span class="label">Title</span>
            <input type="text" class="input-text" name="title" [(ngModel)]="title">
          </div>
          <div class="col-4" *ngIf="activeEditor == 'works-add' || activeEditor == 'works-modify'">
            <span class="label">Type</span>
            <select class="input-select" name="type" [(ngModel)]="type">
              <option [value]="sec.section" *ngFor="let sec of workSections">{{sec.title}}</option>
            </select>
          </div>
          <div class="col-3" *ngIf="activeEditor == 'exhibitions-add' || activeEditor == 'exhibitions-modify'">
            <span class="label">Date from</span>
            <input type="date" class="input-text w-100" name="dateFrom" [(ngModel)]="dateFrom">
          </div>
          <div class="col-3" *ngIf="activeEditor == 'exhibitions-add' || activeEditor == 'exhibitions-modify'">
            <span class="label">Date to</span>
            <input type="date" class="input-text w-100" name="dateTo" [(ngModel)]="dateTo">
          </div>
          <div class="col-12">
            <span class="label">Content</span>
            <angular-editor [placeholder]="'Enter text here...'" [config]="editorConfig" name="content" [(ngModel)]="content"></angular-editor>
          </div>
          <div class="col-12">
            <span class="label">Tags</span>
            <input type="text" class="input-text" name="tags" [(ngModel)]="tags">
          </div>
          <div class="col-12">
            <span class="label">Gallery</span>
            <div class="gallery-container">

              <label class="image-add" for="image-add">
                <input type="file" id="image-add" (change)="onFileChanged($event)">
              </label>

              <div class="image-box" [ngClass]="{'main': image.main}" *ngFor="let image of selectedGallery">
                <img class="image" [src]="basePath+image.url">
                <button type="button" class="remove" (click)="galleryRemove(image.url)"><span class="icon-trash-2"></span></button>
                <button type="button" class="set-main" (click)="gallerySetMain(image.url)" *ngIf="!image.main"><span class="icon-check"></span></button>
              </div>
            </div>
          </div>

          <div class="col-6" *ngIf="activeEditor == 'works-add' || activeEditor == 'works-modify'">
            <span class="label">Exhibitions</span>
            <select class="input-select" name="exhibitions" (change)="exhibitionAdd($event.target.value)">
              <option value=""></option>
              <option value="{{exhibition.id}}" *ngFor="let exhibition of exhibitions">
                {{exhibition.date_from | date}} | {{exhibition.title}}
              </option>
            </select>

            <span class="label font-12 pt-2">Selected exhibitions</span>
            <span class="selected-exhibition" *ngFor="let se of selectedExhibitions" (click)="exhibitionRemove(se.id)">
              {{se.date_from | date}} | {{se.title}}
            </span>
          </div>

          <div class="col-6" *ngIf="activeEditor == 'exhibitions-add' || activeEditor == 'exhibitions-modify'">
            <span class="label">Works</span>
            <select class="input-select" name="works" (change)="workAdd($event.target.value)">
              <option value=""></option>
              <option value="{{work.id}}" *ngFor="let work of works">
                {{work.type}} | {{work.title}}
              </option>
            </select>

            <span class="label font-12 pt-2">Selected works</span>
            <span class="selected-work" *ngFor="let sw of selectedWorks" (click)="workRemove(sw.id)">
              {{sw.type}} | {{sw.title}}
            </span>

          </div>

          <div class="col-6">
            <span class="label">Video</span>
            <div class="w-30 d-inline-block pr-2">
              <select class="input-select" name="videoType" [(ngModel)]="videoType">
                <option value="youtube">YouTube</option>
                <option value="vimeo">Vimeo</option>
                <option value="embed">Embed</option>
              </select>
            </div>
            <div class="w-60 d-inline-block pr-2">
              <input type="text" class="input-text" name="videoURL" [(ngModel)]="videoURL">
            </div>
            <div class="w-10 d-inline-block">
              <span class="button button-transparent icon-plus-square px-0 w-100" (click)="videoAdd()"></span>
            </div>

            <span class="label font-12 pt-2">Selected Videos</span>
            <span class="selected-video" *ngFor="let sv of selectedVideos" (click)="videoRemove(sv.url)">
              {{sv.type}} | {{sv.url}}
            </span>
          </div>
          <div class="col-12 pt-5">
            <button class="button w-100" type="submit">Save</button>
          </div>
        </form>


        <form class="form row" (submit)="deleteData(modifyId)"
              *ngIf="(activeEditor == 'works-delete' || activeEditor == 'exhibitions-delete') && modifyId">
          <div class="col-12">
            <span class="label">Title</span>
            <div class="preview-box" *ngIf="activeEditor == 'works-delete'">{{type}} | {{title}}</div>
            <div class="preview-box" *ngIf="activeEditor == 'exhibitions-delete'">{{dateFrom}} | {{title}}</div>
          </div>
          <div class="col-12">
            <span class="label">Content</span>
            <div class="preview-box" [innerHTML]="content"></div>
          </div>

          <div class="col-12">
            <span class="label">Gallery</span>
            <div class="gallery-container">
              <div class="image-box" [ngClass]="{'main': image.main}" *ngFor="let image of selectedGallery">
                <img class="image" [src]="basePath+image.url">
                <button type="button" class="remove" (click)="galleryRemove(image.url)"><span class="icon-trash-2"></span></button>
              </div>
            </div>
          </div>

          <div class="col-12 pt-5">
            <button class="button w-100" type="submit">Delete</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>