add wysiwyg

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",

src/apis/upload.php

@@ -0,0 +1,16 @@
+<?php
+@include 'conn.conn';
+$GLOBALS['conn'];
+$conn=@mysqli_connect($DATAhst,$DATAusr,$DATApwd,$DATAdtb)or die("CONNECTION ERROR");
+
+$content = null;
+$content->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);
+
+?>

src/app/admin/admin.component.html

@@ -32,11 +32,11 @@
         <form class="form row">
           <div class="col-6">
             <span class="label">Title</span>
-            <input type="text" class="input-text" name="title">
+            <input type="text" class="input-text" name="title" [(ngModel)]="title">
           </div>
           <div class="col-6">
             <span class="label">Type</span>
-            <select class="input-select" name="type">
+            <select class="input-select" name="type" [(ngModel)]="type">
               <option value="entertainment">Entertainment</option>
               <option value="installation">Installation</option>
               <option value="performances">Performances</option>
@@ -45,15 +45,15 @@
           </div>
           <div class="col-12">
             <span class="label">Content</span>
-            <textarea type="text" class="input-textarea" name="content"></textarea>
+            <angular-editor [placeholder]="'Enter text here...'" [config]="editorConfig" name="content" [(ngModel)]="content"></angular-editor>
           </div>
           <div class="col-6">
             <span class="label">Tags</span>
-            <input type="text" class="input-text" name="tags">
+            <input type="text" class="input-text" name="tags" [(ngModel)]="tags">
           </div>
           <div class="col-6">
             <span class="label">Main image</span>
-            <input type="file" class="input-file" name="mainImage">
+            <input type="file" class="input-file" name="mainImage" [(ngModel)]="mainImage">
           </div>
           <div class="col-6">
             <span class="label">Exhibitions</span>

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

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: [],

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)
   }
 }

src/app/services/auth.service.spec.ts_

@@ -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();
-  });
-});

src/app/services/auth.service.ts_

@@ -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<any> {
-    let urlApi = `${this.restApi}auth.php`
-    return this.http.post<any>(urlApi, body).pipe(
-      catchError(this.handleError)
-    )
-  }
-
-
-}

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%;
 }

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'
+    ]
+  ]
+}

src/environments/environment.prod.ts

@@ -1,5 +1,4 @@
 export const environment = {
   production: true,
-
   API_URL: `https://apis.dslak.it/`
 }

src/environments/environment.ts

@@ -1,5 +1,4 @@
 export const environment = {
   production: false,
-
   API_URL: `http://dslakng.local/apis/`
 }