From be6d00c47a30d55fdeb5574afeb62e39b0bdb0a0 Mon Sep 17 00:00:00 2001 From: Dslak Date: Fri, 4 Dec 2020 12:42:46 +0100 Subject: [PATCH] add wysiwyg --- package.json | 1 + src/apis/upload.php | 16 ++++++++ src/app/admin/admin.component.html | 10 ++--- src/app/admin/admin.component.ts | 12 ++++++ src/app/app.module.ts | 4 +- src/app/detail/detail.component.ts | 20 +++++----- src/app/services/auth.service.spec.ts_ | 16 -------- src/app/services/auth.service.ts_ | 27 ------------- src/assets/scss/forms.scss | 5 ++- src/config/config.ts | 52 ++++++++++++++++++++++++++ src/environments/environment.prod.ts | 1 - src/environments/environment.ts | 1 - 12 files changed, 103 insertions(+), 62 deletions(-) create mode 100644 src/apis/upload.php delete mode 100644 src/app/services/auth.service.spec.ts_ delete mode 100644 src/app/services/auth.service.ts_ create mode 100644 src/config/config.ts diff --git a/package.json b/package.json index 948d16c..c8ae448 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "@angular/platform-browser": "~9.1.7", "@angular/platform-browser-dynamic": "~9.1.7", "@angular/router": "~9.1.7", + "@kolkov/angular-editor": "^1.1.4", "bootstrap": "^4.5.3", "ng-particles": "^2.1.11", "ngx-image-gallery": "^2.0.5", diff --git a/src/apis/upload.php b/src/apis/upload.php new file mode 100644 index 0000000..fcdbcc6 --- /dev/null +++ b/src/apis/upload.php @@ -0,0 +1,16 @@ +imageUrl = 'http://unsplash.it/800/600'; + +header("Access-Control-Allow-Origin: *"); +header("Content-Type: application/json; charset=UTF-8"); +header("Access-Control-Allow-Methods: POST"); +header("Access-Control-Max-Age: 3600"); + +echo json_encode($content); + +?> diff --git a/src/app/admin/admin.component.html b/src/app/admin/admin.component.html index 5901b5b..96f4a08 100644 --- a/src/app/admin/admin.component.html +++ b/src/app/admin/admin.component.html @@ -32,11 +32,11 @@
Title - +
Type - @@ -45,15 +45,15 @@
Content - +
Tags - +
Main image - +
Exhibitions diff --git a/src/app/admin/admin.component.ts b/src/app/admin/admin.component.ts index 50dcb7c..64fd02a 100644 --- a/src/app/admin/admin.component.ts +++ b/src/app/admin/admin.component.ts @@ -1,6 +1,9 @@ import { Component, OnInit } from '@angular/core' import { ApisService } from '../services/apis.service' import { AuthService } from '../services/auth.service' +import { AngularEditorConfig } from '@kolkov/angular-editor' +import { environment } from '../../environments/environment' +import { editorConfig } from '../../config/config' @Component({ selector: 'app-admin', @@ -9,6 +12,8 @@ import { AuthService } from '../services/auth.service' }) export class AdminComponent implements OnInit { + private restApi = `${environment.API_URL}` + public authCheck: boolean = false public userName: string = '' public password: string = '' @@ -19,9 +24,16 @@ export class AdminComponent implements OnInit { public selectedVideos: any = [] // ngModels + public title: string = '' + public type: string = '' + public content: string = '' + public tags: string = '' + public mainImage: string = '' public videoType: string = '' public videoURL: string = '' + editorConfig: AngularEditorConfig = editorConfig + constructor( private authService: AuthService, private apisService: ApisService diff --git a/src/app/app.module.ts b/src/app/app.module.ts index ac157ca..ae96ec7 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,7 +3,8 @@ import { NgModule } from '@angular/core'; import { HttpClientModule } from '@angular/common/http'; import { NgParticlesModule } from "ng-particles"; import { NgxImageGalleryModule } from 'ngx-image-gallery'; -import { FormsModule } from '@angular/forms' +import { FormsModule } from '@angular/forms'; +import { AngularEditorModule } from '@kolkov/angular-editor'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @@ -30,6 +31,7 @@ import { AdminComponent } from './admin/admin.component'; NgParticlesModule, NgxImageGalleryModule, FormsModule, + AngularEditorModule, HttpClientModule ], providers: [], diff --git a/src/app/detail/detail.component.ts b/src/app/detail/detail.component.ts index 8a0eb7f..34e5412 100644 --- a/src/app/detail/detail.component.ts +++ b/src/app/detail/detail.component.ts @@ -100,27 +100,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 +128,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/services/auth.service.spec.ts_ b/src/app/services/auth.service.spec.ts_ deleted file mode 100644 index f1251ca..0000000 --- a/src/app/services/auth.service.spec.ts_ +++ /dev/null @@ -1,16 +0,0 @@ -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_ deleted file mode 100644 index dd4e29d..0000000 --- a/src/app/services/auth.service.ts_ +++ /dev/null @@ -1,27 +0,0 @@ -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` - return this.http.post(urlApi, body).pipe( - catchError(this.handleError) - ) - } - - -} diff --git a/src/assets/scss/forms.scss b/src/assets/scss/forms.scss index 7c48b2d..8281026 100644 --- a/src/assets/scss/forms.scss +++ b/src/assets/scss/forms.scss @@ -40,7 +40,10 @@ select { padding: 6px 20px !important; } -.input-textarea { +.input-textarea, +.angular-editor { + border-radius: 4px; + background: $white; padding: 10px; width: 100%; } diff --git a/src/config/config.ts b/src/config/config.ts new file mode 100644 index 0000000..888fbfa --- /dev/null +++ b/src/config/config.ts @@ -0,0 +1,52 @@ + +import { AngularEditorConfig } from '@kolkov/angular-editor' + +export const editorConfig: AngularEditorConfig = { + editable: true, + spellcheck: true, + height: '200px', + translate: 'no', + enableToolbar: true, + showToolbar: true, + placeholder: 'Enter text here...', + defaultParagraphSeparator: '', + defaultFontName: 'Abel', + defaultFontSize: '', + uploadUrl: 'http://dslakng.local/apis/upload.php', + uploadWithCredentials: false, + sanitize: true, + toolbarPosition: 'top', + toolbarHiddenButtons: [ + [ + 'undo', + 'redo', + //'bold', + //'italic', + //'underline', + 'strikeThrough', + 'subscript', + 'superscript', + //'justifyLeft', + //'justifyCenter', + //'justifyRight', + //'justifyFull', + 'indent', + 'outdent', + 'insertUnorderedList', + 'insertOrderedList', + 'heading', + 'fontName', + 'fontSize', + 'textColor', + 'backgroundColor', + 'customClasses', + //'link', + 'unlink', + //'insertImage', + 'insertVideo', + 'insertHorizontalRule', + //'removeFormat', + //'toggleEditorMode' + ] + ] +} diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts index a646658..66a3c6b 100644 --- a/src/environments/environment.prod.ts +++ b/src/environments/environment.prod.ts @@ -1,5 +1,4 @@ export const environment = { production: true, - API_URL: `https://apis.dslak.it/` } diff --git a/src/environments/environment.ts b/src/environments/environment.ts index 4e9ecb9..2710fb4 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -1,5 +1,4 @@ export const environment = { production: false, - API_URL: `http://dslakng.local/apis/` }