chrome fixes

src/app/admin/admin.component.html

@@ -36,9 +36,9 @@
         <span class="title">{{sectionTitle}}</span>
         <form class="form row" *ngIf="activeEditor == 'works-modify' || activeEditor == 'works-delete'">
           <div class="col-12">
-            <select class="input-select">
+            <select class="input-select" (change)="selectWork($event.target.value)">
               <option value="">- Select work from list -</option>
-              <option value="{{work.title}}" *ngFor="let work of works" (click)="selectWork(work.id)">
+              <option value="{{work.id}}" *ngFor="let work of works">
                 {{work.type}} | {{work.title}}
               </option>
             </select>
@@ -46,9 +46,9 @@
         </form>
         <form class="form row" *ngIf="activeEditor == 'exhibitions-modify' || activeEditor == 'exhibitions-delete'">
           <div class="col-12">
-            <select class="input-select">
+            <select class="input-select" (change)="selectExhibition($event.target.value)">
               <option value="">- Select exhibition from list -</option>
-              <option value="{{exhibition.title}}" *ngFor="let exhibition of exhibitions" (click)="selectExhibition(exhibition.id)">
+              <option value="{{exhibition.id}}" *ngFor="let exhibition of exhibitions">
                 {{exhibition.date_from | date}} | {{exhibition.title}}
               </option>
             </select>
@@ -58,7 +58,7 @@
               *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-7': activeEditor == 'exhibitions-add' || activeEditor == 'exhibitions-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>
@@ -68,11 +68,11 @@
               <option [value]="sec.section" *ngFor="let sec of workSections">{{sec.title}}</option>
             </select>
           </div>
-          <div class="col" *ngIf="activeEditor == 'exhibitions-add' || activeEditor == 'exhibitions-modify'">
+          <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" *ngIf="activeEditor == 'exhibitions-add' || activeEditor == 'exhibitions-modify'">
+          <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>
@@ -102,9 +102,9 @@
 
           <div class="col-6" *ngIf="activeEditor == 'works-add' || activeEditor == 'works-modify'">
             <span class="label">Exhibitions</span>
-            <select class="input-select" name="exhibitions">
+            <select class="input-select" name="exhibitions" (change)="exhibitionAdd($event.target.value)">
               <option value=""></option>
-              <option value="{{exhibition.title}}" *ngFor="let exhibition of exhibitions" (click)="exhibitionAdd(exhibition.id)">
+              <option value="{{exhibition.id}}" *ngFor="let exhibition of exhibitions">
                 {{exhibition.date_from | date}} | {{exhibition.title}}
               </option>
             </select>
@@ -117,9 +117,9 @@
 
           <div class="col-6" *ngIf="activeEditor == 'exhibitions-add' || activeEditor == 'exhibitions-modify'">
             <span class="label">Works</span>
-            <select class="input-select" name="works">
+            <select class="input-select" name="works" (change)="workAdd($event.target.value)">
               <option value=""></option>
-              <option value="{{work.title}}" *ngFor="let work of works" (click)="workAdd(work.id)">
+              <option value="{{work.id}}" *ngFor="let work of works">
                 {{work.type}} | {{work.title}}
               </option>
             </select>

src/app/admin/admin.component.ts

@@ -61,37 +61,25 @@ export class AdminComponent implements OnInit {
       this.authCheck = response.status && response.status == 200
 
       if(this.authCheck) {
-        this.apisService.getPortfolio('exhibitions').toPromise().then((response) => {
-          this.exhibitions = response.items
-        },(error) => {
-          console.error('getPortfolio ERROR', error)
-        }).catch((e) => {
-          console.error('getPortfolio CATCH', e)
-        })
-
-        this.apisService.getPortfolio('portfolio').toPromise().then((response) => {
-          this.works = response.items
-        },(error) => {
-          console.error('getPortfolio ERROR', error)
-        }).catch((e) => {
-          console.error('getPortfolio CATCH', e)
-        })
+        this.loadData()
       }
+
     },(error) => {
       this.authCheck = false
-      console.error('Auth ERROR', error)
+      console.error('Auth ERROR INIT', error)
     }).catch((e) => {
       this.authCheck = false
-      console.error('Auth CATCH', e)
+      console.error('Auth CATCH INIT', e)
     })
   }
 
   login(): void {
     const body = { usr: this.userName, pwd: this.password }
     this.authService.login(body).toPromise().then((response) => {
-      this.authCheck = response.status == 200
+      this.authCheck = response.status && response.status == 200
       if(this.authCheck) {
         window.sessionStorage.setItem('authToken', response.authToken)
+        this.loadData()
       }
     },(error) => {
       console.error('Auth ERROR', error)
@@ -100,6 +88,24 @@ export class AdminComponent implements OnInit {
     })
   }
 
+  loadData(): void {
+    this.apisService.getPortfolio('exhibitions').toPromise().then((response) => {
+      this.exhibitions = response.items
+    },(error) => {
+      console.error('getPortfolio ERROR', error)
+    }).catch((e) => {
+      console.error('getPortfolio CATCH', e)
+    })
+
+    this.apisService.getPortfolio('portfolio').toPromise().then((response) => {
+      this.works = response.items
+    },(error) => {
+      console.error('getPortfolio ERROR', error)
+    }).catch((e) => {
+      console.error('getPortfolio CATCH', e)
+    })
+  }
+
   showEditor(section): void {
     switch(section) {
       case 'works-add':
@@ -210,6 +216,7 @@ export class AdminComponent implements OnInit {
   }
 
   selectWork(id): void {
+    console.log('selectWork')
 
     this.activeModify = true
     this.modifyId = id

src/app/app-layout/app-layout.component.ts

@@ -96,6 +96,7 @@ export class AppLayoutComponent implements OnInit {
 
   ngOnInit(): void {
     this.page = this.router.url
+    this.particlesEnabled = this.page != '/admin'
   }
 
 

src/app/detail/detail.component.html

@@ -12,7 +12,7 @@
                           'col-md-3': details.gallery.length >= 3}">
           <div class="gallery-container">
             <span class="gallery-title">{{image.title}}</span>
-            <img class="image" [src]="image.url" (click)="openGallery(i)">
+            <img class="image" [src]="basePath+image.url" (click)="openGallery(i)">
           </div>
         </div>
       </div>

src/app/detail/detail.component.ts

@@ -4,6 +4,7 @@ import { DomSanitizer } from '@angular/platform-browser'
 import { Location } from '@angular/common'
 import { NgxImageGalleryComponent, GALLERY_IMAGE, GALLERY_CONF } from "ngx-image-gallery"
 import { ApisService } from '../services/apis.service'
+import { environment } from '../../environments/environment'
 
 @Component({
   selector: 'app-detail',
@@ -12,6 +13,8 @@ import { ApisService } from '../services/apis.service'
 })
 export class DetailComponent implements OnInit {
 
+  public basePath = `${environment.BASE_PATH}`
+
   @ViewChild(NgxImageGalleryComponent) ngxImageGallery: NgxImageGalleryComponent
 
   public details: any = {}

src/app/portfolio/portfolio.component.scss

@@ -6,7 +6,7 @@
   .box {
     position: relative;
     display: flex;
-    //background: $black-alpha;
+    background: $black-alpha;
     border-radius: 10px;
     overflow: hidden;
     margin: 10px 0;
@@ -23,10 +23,10 @@
       height: 100%;
       width: 100%;
       object-fit: cover;
-      transform: translate(-50%, -50%) scale(1.2);
-      opacity: .5;
-      filter: grayscale(100%) invert(100%);
-      transition: transform .4s, opacity .4s, filter .4s;
+      transform: translate(-50%, -50%);
+      opacity: .9;
+      filter: grayscale(100%) brightness(.4);
+      transition: opacity .4s, filter .4s;
       -webkit-backface-visibility: hidden;
       z-index: 0;
     }
@@ -36,8 +36,8 @@
       margin: auto;
       text-align: center;
       transform: translate(0%, 0%);
-      color: $black;
-      transition: color .4s;
+      color: $yellow;
+      //transition: color .4s;
       -webkit-backface-visibility: hidden;
       z-index: 1;
 
@@ -99,21 +99,19 @@
       background: $black;
       z-index: 50;
 
-      //animation-play-state: paused;
-
       @each $angle in 0,1,2,3,4,5,6 {
         &.skew-#{$angle} {
-          transform: scale(1.4) rotate(2deg) skew(#{3 - $angle}deg, #{3 - $angle}deg);
+          //transform: scale(1.4) rotate(2deg) skew(#{3 - $angle}deg, #{3 - $angle}deg);
+          transform: scale(1.4) rotate(0deg) skew(0deg, 0deg);
         }
       }
 
       .image {
-        filter: grayscale(100%) invert(0%) brightness(.5);
-        opacity: .9;
-        transform: translate(-50%, -50%) scale(1.6);
+        filter: grayscale(0%) brightness(1);
+        opacity: .5;
       }
       .text {
-        color: $yellow;
+        //color: $yellow;
       }
     }
   }

src/app/workshops/workshops.component.html

@@ -1 +0,0 @@
-<p>workshops works!</p>

src/app/workshops/workshops.component.spec.ts

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { WorkshopsComponent } from './workshops.component';
-
-describe('WorkshopsComponent', () => {
-  let component: WorkshopsComponent;
-  let fixture: ComponentFixture<WorkshopsComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ WorkshopsComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(WorkshopsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/workshops/workshops.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-workshops',
-  templateUrl: './workshops.component.html',
-  styleUrls: ['./workshops.component.scss']
-})
-export class WorkshopsComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}