Tags
diff --git a/src/app/admin/admin.component.scss b/src/app/admin/admin.component.scss
index 5f1231e..01f960e 100644
--- a/src/app/admin/admin.component.scss
+++ b/src/app/admin/admin.component.scss
@@ -34,6 +34,91 @@
padding: 20px 0 5px 0;
}
+
+ .gallery-container {
+ display: flex;
+ background: $white;
+ border-radius: 4px;
+ width: 100%;
+ padding: 5px;
+
+ .image-add {
+ appearance: none;
+ display: inline-block;
+ position: relative;
+ border: 2px solid $light-gray;
+ border-radius: 4px;
+ height: 100px;
+ width: 100px;
+ margin: 5px;
+ cursor: pointer;
+
+ &:before {
+ content: '\e90a';
+ font-family: $font-icon;
+ font-size: $font-30;
+ color: $light-gray;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+
+ input {
+ visibility: hidden;
+ }
+ }
+
+ .image-box {
+ display: inline-block;
+ position: relative;
+ border: 2px solid $light-gray;
+ height: 100px;
+ width: 120px;
+ margin: 5px;
+ border-radius: 4px;
+ overflow: hidden;
+
+ .image {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ object-fit: cover;
+ z-index: 0;
+ }
+
+ .remove,
+ .set-main {
+ position: absolute;
+ top: 4px;
+ right: 4px;
+ border: 0;
+ border-radius: 2px;
+ color: $black;
+ height: 20px;
+ width: 20px;
+ background: $white-alpha;
+ padding: 0;
+ margin: 0;
+ cursor: pointer;
+ font-size: $font-12;
+ z-index: 10;
+ }
+
+ .remove {
+ color: $red;
+ }
+ .set-main {
+ color: $green;
+ right: 30px;
+ }
+
+ &.main {
+ border: 2px solid $yellow;
+ }
+ }
+ }
+
.selected-exhibition,
.selected-video {
display: block;
diff --git a/src/app/admin/admin.component.ts b/src/app/admin/admin.component.ts
index 64fd02a..ed9b305 100644
--- a/src/app/admin/admin.component.ts
+++ b/src/app/admin/admin.component.ts
@@ -22,13 +22,14 @@ export class AdminComponent implements OnInit {
public selectedExhibitions: any = []
public selectedVideos: any = []
+ public selectedGallery: any = []
// ngModels
public title: string = ''
public type: string = ''
public content: string = ''
public tags: string = ''
- public mainImage: string = ''
+ public mainImage: any = null
public videoType: string = ''
public videoURL: string = ''
@@ -40,6 +41,19 @@ export class AdminComponent implements OnInit {
) { }
ngOnInit(): void {
+
+ this.selectedGallery = [
+ {
+ main: true,
+ title: '',
+ url: 'http://unsplash.it/800/600'
+ },
+ {
+ title: '',
+ url: 'http://unsplash.it/800/700'
+ }
+ ]
+
const body = { token: window.sessionStorage.getItem('authToken') }
this.authService.authCheck(body).toPromise().then((response) => {
this.authCheck = response.status == 200
@@ -58,7 +72,6 @@ export class AdminComponent implements OnInit {
})
}
-
login(): void {
const body = { usr: this.userName, pwd: this.password }
this.authService.login(body).toPromise().then((response) => {
@@ -102,4 +115,40 @@ export class AdminComponent implements OnInit {
videoRemove(url): void {
this.selectedVideos = this.selectedVideos.filter(item => item.url != url)
}
+
+ onFileChanged(e) {
+ const file = (
e.target).files[0]
+ const uploadData = new FormData()
+ uploadData.append('file', file, file.name)
+ this.apisService.uploadImage(uploadData).toPromise().then((response) => {
+ this.selectedGallery.push({
+ title: response.title || '',
+ url: response.imageUrl
+ })
+ },(error) => {
+ console.error(error)
+ }).catch((e) => {
+ console.error(e)
+ })
+ }
+
+ gallerySetMain(url): void {
+ this.selectedGallery.forEach((e) => {
+ if(e.url == url) {
+ e.main = true
+ } else {
+ delete e.main
+ }
+ })
+ }
+
+ galleryRemove(url): void {
+ this.apisService.removeImage(url).toPromise().then((response) => {
+ this.selectedGallery = this.selectedGallery.filter(item => item.url != url)
+ },(error) => {
+ console.error(error)
+ }).catch((e) => {
+ console.error(e)
+ })
+ }
}
diff --git a/src/app/services/apis.service.ts b/src/app/services/apis.service.ts
index 3e02ae0..106aab6 100644
--- a/src/app/services/apis.service.ts
+++ b/src/app/services/apis.service.ts
@@ -30,5 +30,20 @@ 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(url): Observable {
+ let urlApi = `${this.restApi}remove.php?url=${url}`
+ return this.http.get(urlApi).pipe(
+ catchError(this.handleError)
+ )
+ }
+
}
diff --git a/src/assets/scss/variables.scss b/src/assets/scss/variables.scss
index 13cbf0a..d4bcaab 100644
--- a/src/assets/scss/variables.scss
+++ b/src/assets/scss/variables.scss
@@ -26,6 +26,8 @@ $black: #000;
$gray: #999;
$light-gray: #eee;
$dark-gray: #333;
+$red: #d00;
+$green: #0c0;
$yellow: #a2dc02;
diff --git a/src/config/config.ts b/src/config/config.ts
index 888fbfa..4210776 100644
--- a/src/config/config.ts
+++ b/src/config/config.ts
@@ -1,18 +1,18 @@
-
+import { environment } from '../environments/environment'
import { AngularEditorConfig } from '@kolkov/angular-editor'
export const editorConfig: AngularEditorConfig = {
editable: true,
spellcheck: true,
- height: '200px',
+ height: '300px',
translate: 'no',
enableToolbar: true,
showToolbar: true,
placeholder: 'Enter text here...',
- defaultParagraphSeparator: '',
- defaultFontName: 'Abel',
+ defaultParagraphSeparator: 'p',
+ defaultFontName: '',
defaultFontSize: '',
- uploadUrl: 'http://dslakng.local/apis/upload.php',
+ uploadUrl: `${environment.API_URL}upload.php`,
uploadWithCredentials: false,
sanitize: true,
toolbarPosition: 'top',