workshops works!
diff --git a/src/app/workshops/workshops.component.scss b/src/app/workshops/workshops.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/workshops/workshops.component.ts b/src/app/workshops/workshops.component.ts deleted file mode 100644 index af08b35..0000000 --- a/src/app/workshops/workshops.component.ts +++ /dev/null @@ -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 { - } - -} diff --git a/src/assets/fonts/icomoon.eot b/src/assets/fonts/icomoon.eot index 80e12db..2f6e5ad 100644 Binary files a/src/assets/fonts/icomoon.eot and b/src/assets/fonts/icomoon.eot differ diff --git a/src/assets/fonts/icomoon.svg b/src/assets/fonts/icomoon.svg index 5aa57eb..eb5888b 100644 --- a/src/assets/fonts/icomoon.svg +++ b/src/assets/fonts/icomoon.svg @@ -8,6 +8,19 @@{{details.title}}
-
-
diff --git a/src/app/detail/detail.component.scss b/src/app/detail/detail.component.scss
index 5e764b1..246b883 100644
--- a/src/app/detail/detail.component.scss
+++ b/src/app/detail/detail.component.scss
@@ -27,9 +27,6 @@
.date-container {
display: inline-flex;
- position: absolute;
- top: 40px;
- right: 40px;
.date {
display: inline-flex;
@@ -76,17 +73,22 @@
}
.videos {
+ padding-bottom: 40px;
+
.video-title {
font-size: $font-18;
font-weight: bold;
padding-bottom: 5px;
}
- .youtube {
+ .youtube,
+ .vimeo,
+ .embed {
position: relative;
padding-bottom: 56.25%;
- .iframe{
+ iframe,
+ .iframe {
position: absolute;
top: 0;
left: 0;
@@ -139,6 +141,12 @@
.component-detail {
.content {
transform: rotate(2deg) skew(0deg, -6deg);
+
+ .date-container {
+ position: absolute;
+ top: 40px;
+ right: 40px;
+ }
}
}
}
diff --git a/src/app/detail/detail.component.ts b/src/app/detail/detail.component.ts
index 8a0eb7f..f2d3553 100644
--- a/src/app/detail/detail.component.ts
+++ b/src/app/detail/detail.component.ts
@@ -1,17 +1,21 @@
-import { Component, OnInit, ViewChild } from '@angular/core'
+import { Component, OnInit, ViewChild, ViewEncapsulation} from '@angular/core'
import { Router, NavigationEnd, NavigationStart, ActivatedRoute } from '@angular/router'
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',
templateUrl: './detail.component.html',
- styleUrls: ['./detail.component.scss']
+ styleUrls: ['./detail.component.scss'],
+ encapsulation: ViewEncapsulation.None,
})
export class DetailComponent implements OnInit {
+ public basePath = `${environment.BASE_PATH}`
+
@ViewChild(NgxImageGalleryComponent) ngxImageGallery: NgxImageGalleryComponent
public details: any = {}
@@ -26,6 +30,7 @@ export class DetailComponent implements OnInit {
}
public galleryImages: GALLERY_IMAGE[] = []
+ public loadedImages: boolean[] = []
constructor(
private apisService: ApisService,
@@ -42,6 +47,7 @@ export class DetailComponent implements OnInit {
}
showDetails(section, id): void {
+ this.galleryImages = []
this.apisService.getDetails(section, id).toPromise().then((response) => {
if(this.history[this.history.length - 1] != `/detail/${section}/${id}`) {
this.history.push(`/detail/${section}/${id}`)
@@ -51,17 +57,31 @@ export class DetailComponent implements OnInit {
detail.videos = detail.videos ? JSON.parse(detail.videos) : []
detail.videos.forEach((e) => {
e.code = e.url.split('/').pop()
- e.embed = this.sanitizer.bypassSecurityTrustResourceUrl(`https://www.youtube.com/embed/${e.code}`)
+ switch(e.type) {
+ case 'youtube':
+ e.embed = this.sanitizer.bypassSecurityTrustResourceUrl(`https://www.youtube.com/embed/${e.code}`)
+ break
+ case 'vimeo':
+ e.embed = this.sanitizer.bypassSecurityTrustResourceUrl(`https://player.vimeo.com/video/${e.code}`)
+ break
+ case 'embed':
+ e.embed = this.sanitizer.bypassSecurityTrustHtml(e.url)
+ break
+ }
})
+
detail.gallery = detail.gallery ? JSON.parse(detail.gallery) : []
detail.gallery.forEach((e) => {
- this.galleryImages.push({
- url: e.url,
- altText: e.title,
- title: e.title,
- thumbnailUrl: e.url
- })
+ if(!e.main) {
+ this.galleryImages.push({
+ url: `${this.basePath}${e.url}`,
+ altText: e.title,
+ title: e.title,
+ thumbnailUrl: `${this.basePath}${e.url}`
+ })
+ this.loadedImages.push(true)
+ }
})
this.details = detail
@@ -86,7 +106,9 @@ export class DetailComponent implements OnInit {
}
-
+ onLoad(index): void {
+ this.loadedImages[index] = false
+ }
@@ -100,27 +122,27 @@ export class DetailComponent implements OnInit {
openGallery(index: number = 0) {
- this.ngxImageGallery.open(index);
+ this.ngxImageGallery.open(index)
}
// close gallery
closeGallery() {
- this.ngxImageGallery.close();
+ this.ngxImageGallery.close()
}
// set new active(visible) image in gallery
newImage(index: number = 0) {
- this.ngxImageGallery.setActiveImage(index);
+ this.ngxImageGallery.setActiveImage(index)
}
// next image in gallery
nextImage(index: number = 0) {
- this.ngxImageGallery.next();
+ this.ngxImageGallery.next()
}
// prev image in gallery
prevImage(index: number = 0) {
- this.ngxImageGallery.prev();
+ this.ngxImageGallery.prev()
}
/**************************************************/
@@ -128,26 +150,26 @@ export class DetailComponent implements OnInit {
// EVENTS
// callback on gallery opened
galleryOpened(index) {
- console.info('Gallery opened at index ', index);
+ console.info('Gallery opened at index ', index)
}
// callback on gallery closed
galleryClosed() {
- console.info('Gallery closed.');
+ console.info('Gallery closed.')
}
// callback on gallery image clicked
galleryImageClicked(index) {
- console.info('Gallery image clicked with index ', index);
+ console.info('Gallery image clicked with index ', index)
}
// callback on gallery image changed
galleryImageChanged(index) {
- console.info('Gallery image changed to index ', index);
+ console.info('Gallery image changed to index ', index)
}
// callback on user clicked delete button
deleteImage(index) {
- console.info('Delete image at index ', index);
+ console.info('Delete image at index ', index)
}
}
diff --git a/src/app/portfolio/portfolio.component.html b/src/app/portfolio/portfolio.component.html
index 094f09d..f384422 100644
--- a/src/app/portfolio/portfolio.component.html
+++ b/src/app/portfolio/portfolio.component.html
@@ -1,9 +1,10 @@
+
+
@@ -33,11 +34,16 @@
'col-md-4': details.videos.length >= 3}">
{{video.title}}
{{image.title}}
- ![]()
+ 
+ ![]()
+
- {{video.code}}
+
+
+
+
+
-
+
- 
+
+ ![]()
+
{{item.title}}
{{item.type}}
diff --git a/src/app/portfolio/portfolio.component.scss b/src/app/portfolio/portfolio.component.scss
index d799a61..6a6f4ac 100644
--- a/src/app/portfolio/portfolio.component.scss
+++ b/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;
}
}
}
diff --git a/src/app/portfolio/portfolio.component.ts b/src/app/portfolio/portfolio.component.ts
index 1902028..cf63720 100644
--- a/src/app/portfolio/portfolio.component.ts
+++ b/src/app/portfolio/portfolio.component.ts
@@ -1,6 +1,7 @@
import { Component, OnInit } from '@angular/core'
import { Router, NavigationEnd } from '@angular/router'
import { ApisService } from '../services/apis.service'
+import { environment } from '../../environments/environment'
@Component({
selector: 'app-portfolio',
@@ -9,6 +10,8 @@ import { ApisService } from '../services/apis.service'
})
export class PortfolioComponent implements OnInit {
+ public basePath = `${environment.BASE_PATH}`
+
public portfolioItems: any = []
public section: string = ''
@@ -22,6 +25,45 @@ export class PortfolioComponent implements OnInit {
this.apisService.getPortfolio(this.section).toPromise().then((response) => {
this.portfolioItems = response.items
+
+ let cnt = 0
+ let width = 0
+ let tot = 0
+
+ this.portfolioItems.forEach((e) => {
+ e.loading = true
+
+ switch (cnt) {
+ case 0:
+ width = Math.floor(Math.random()*3)+3
+ tot = width
+ cnt++
+ break;
+ case 1:
+ width = Math.floor(Math.random()*3)+3
+ cnt++
+
+ if(tot + width > 9) {
+ width = 12 - tot
+ tot = 0
+ cnt = 0
+ } else {
+ tot = tot + width
+ }
+
+ break;
+ case 2:
+ width = 12 - tot
+ tot = 0
+ cnt = 0
+ break;
+ }
+
+ e.width = width
+
+ //((e.id % 5)+3)
+ //Math.floor((Math.random()*3)+1)+2
+ })
},(error) => {
console.error('getPortfolio ERROR', error)
}).catch((e) => {
@@ -34,4 +76,8 @@ export class PortfolioComponent implements OnInit {
this.router.navigate([`/detail/${section}/${id}`])
}
+ onLoad(id): void {
+ this.portfolioItems.filter(item => item.id == id)[0].loading = false
+ }
+
}
diff --git a/src/app/services/apis.service.ts b/src/app/services/apis.service.ts
index ce4e16d..31e6ab1 100644
--- a/src/app/services/apis.service.ts
+++ b/src/app/services/apis.service.ts
@@ -30,4 +30,48 @@ export class ApisService extends BaseService {
)
}
+ // ADMIN SERVICES
+ uploadImage(body): Observable {
+ let urlApi = `${this.restApi}upload.php`
+ return this.http.post(urlApi, body).pipe(
+ catchError(this.handleError)
+ )
+ }
+
+ removeImage(body): Observable {
+ let urlApi = `${this.restApi}remove.php`
+ return this.http.post(urlApi, JSON.stringify(body)).pipe(
+ catchError(this.handleError)
+ )
+ }
+
+ saveWork(body): Observable {
+ let urlApi = `${this.restApi}work.php?act=save`
+ return this.http.post(urlApi, JSON.stringify(body)).pipe(
+ catchError(this.handleError)
+ )
+ }
+
+ deleteWork(body): Observable {
+ let urlApi = `${this.restApi}work.php?act=delete`
+ return this.http.post(urlApi, JSON.stringify(body)).pipe(
+ catchError(this.handleError)
+ )
+ }
+
+ saveExhibition(body): Observable {
+ let urlApi = `${this.restApi}exhibition.php?act=save`
+ return this.http.post(urlApi, JSON.stringify(body)).pipe(
+ catchError(this.handleError)
+ )
+ }
+
+ deleteExhibition(body): Observable {
+ let urlApi = `${this.restApi}exhibition.php?act=delete`
+ return this.http.post(urlApi, JSON.stringify(body)).pipe(
+ catchError(this.handleError)
+ )
+ }
+
+
}
diff --git a/src/app/services/auth.service.spec.ts b/src/app/services/auth.service.spec.ts
new file mode 100644
index 0000000..f1251ca
--- /dev/null
+++ b/src/app/services/auth.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthService } from './auth.service';
+
+describe('AuthService', () => {
+ let service: AuthService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(AuthService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/src/app/services/auth.service.ts b/src/app/services/auth.service.ts
new file mode 100644
index 0000000..3ee8d3c
--- /dev/null
+++ b/src/app/services/auth.service.ts
@@ -0,0 +1,33 @@
+import { Injectable } from '@angular/core'
+import { HttpClient, HttpHeaders, HttpParams, HttpRequest } from '@angular/common/http'
+import { Observable, Subject, throwError } from 'rxjs'
+import { catchError } from 'rxjs/operators'
+import { BaseService } from './base-service'
+import { environment } from '../../environments/environment'
+
+@Injectable({
+ providedIn: 'root'
+})
+export class AuthService extends BaseService {
+
+ private restApi = `${environment.API_URL}`
+
+ constructor(private http: HttpClient) {
+ super()
+ }
+
+ login(body): Observable {
+ let urlApi = `${this.restApi}auth.php?act=login`
+ return this.http.post(urlApi, JSON.stringify(body)).pipe(
+ catchError(this.handleError)
+ )
+ }
+
+ authCheck(body): Observable {
+ let urlApi = `${this.restApi}auth.php?act=check`
+ return this.http.post(urlApi, JSON.stringify(body)).pipe(
+ catchError(this.handleError)
+ )
+ }
+
+}
diff --git a/src/app/workshops/workshops.component.html b/src/app/workshops/workshops.component.html
deleted file mode 100644
index d0e6442..0000000
--- a/src/app/workshops/workshops.component.html
+++ /dev/null
@@ -1 +0,0 @@
-