update angular version

2 years ago · 5c5b6ec5b8
15 changed files with 13601 additions and 106 deletions
--- a/.gitignore
+++ b/.gitignore
@ -6,3 +6,5 @@ package-lock\.json
 src/assets/images/contents/

 dist/
+
+.angular/
--- a/angular.json
+++ b/angular.json
@ -44,7 +44,6 @@
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
-              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
@ -125,5 +124,8 @@
        }
      }
    }},
-  "defaultProject": "dslak-website"
+  "defaultProject": "dslak-website",
+  "cli": {
+    "analytics": false
+  }
 }
--- a/package.json
+++ b/package.json
@ -1,12 +1,12 @@
 {
  "name": "dslak-website",
-  "version": "0.0.0",
+  "version": "2.0.1",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "dev": "ng serve",
    "build": "ng build",
-    "prod": "ng build --prod --configuration production",
+    "prod": "export NODE_OPTIONS=--openssl-legacy-provider && ng build --configuration production --base-href /",
    "deploy": "sh ./deploy.sh",
    "test": "ng test",
    "lint": "ng lint",
@ -14,41 +14,42 @@
  },
  "private": true,
  "dependencies": {
-    "@angular/animations": "~9.1.7",
-    "@angular/common": "~9.1.7",
-    "@angular/compiler": "~9.1.7",
-    "@angular/core": "~9.1.7",
-    "@angular/forms": "~9.1.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",
+    "@angular/animations": "^16.2.12",
+    "@angular/common": "^16.2.12",
+    "@angular/compiler": "^16.2.12",
+    "@angular/core": "^16.2.12",
+    "@angular/forms": "^16.2.12",
+    "@angular/platform-browser": "^16.2.12",
+    "@angular/platform-browser-dynamic": "^16.2.12",
+    "@angular/router": "^16.2.12",
+    "@kolkov/angular-editor": "^3.0.0-beta.0",
+    "@twogate/ngx-photo-gallery": "^1.6.0",
+    "bootstrap": "^5.3.2",
    "hammerjs": "^2.0.8",
-    "ng-particles": "^2.1.11",
-    "ngx-image-gallery": "^2.0.5",
-    "rxjs": "~6.5.4",
-    "tslib": "^1.10.0",
-    "zone.js": "~0.10.2"
+    "ng-particles": "^3.12.0",
+    "rxjs": "^7.8.1",
+    "tslib": "^2.6.2",
+    "tsparticles-engine": "^2.12.0",
+    "tsparticles-slim": "^2.12.0"
  },
  "devDependencies": {
-    "@angular-devkit/build-angular": "~0.901.6",
-    "@angular/cli": "~9.1.6",
-    "@angular/compiler-cli": "~9.1.7",
-    "@types/jasmine": "~3.5.0",
-    "@types/jasminewd2": "~2.0.3",
-    "@types/node": "^12.11.1",
-    "codelyzer": "^5.1.2",
-    "jasmine-core": "~3.5.0",
-    "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~5.0.0",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~2.1.0",
-    "karma-jasmine": "~3.0.1",
-    "karma-jasmine-html-reporter": "^1.4.2",
-    "protractor": "~5.4.3",
-    "ts-node": "~8.3.0",
-    "tslint": "~6.1.0",
-    "typescript": "~3.8.3"
+    "@angular-devkit/build-angular": "^16.2.9",
+    "@angular/cli": "^16.2.9",
+    "@angular/compiler-cli": "^16.2.12",
+    "@types/jasmine": "^5.1.1",
+    "@types/jasminewd2": "^2.0.12",
+    "@types/node": "^20.8.10",
+    "codelyzer": "^6.0.2",
+    "jasmine-core": "^5.1.1",
+    "jasmine-spec-reporter": "^7.0.0",
+    "karma": "^6.4.2",
+    "karma-chrome-launcher": "^3.2.0",
+    "karma-coverage-istanbul-reporter": "^3.0.3",
+    "karma-jasmine": "^5.1.0",
+    "karma-jasmine-html-reporter": "^2.1.0",
+    "protractor": "^7.0.0",
+    "ts-node": "^10.9.1",
+    "tslint": "^6.1.3",
+    "typescript": "5.1.6"
  }
 }
--- a/package.json_OK
+++ b/package.json_OK
@ -0,0 +1,54 @@
+{
+  "name": "dslak-website",
+  "version": "1.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "dev": "ng serve",
+    "build": "ng build",
+    "prod": "ng build --prod --configuration production",
+    "deploy": "sh ./deploy.sh",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "~9.1.7",
+    "@angular/common": "~9.1.7",
+    "@angular/compiler": "~9.1.7",
+    "@angular/core": "~9.1.7",
+    "@angular/forms": "~9.1.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",
+    "hammerjs": "^2.0.8",
+    "ng-particles": "^2.1.11",
+    "ngx-image-gallery": "^2.0.5",
+    "rxjs": "~6.5.4",
+    "tslib": "^1.10.0",
+    "zone.js": "~0.10.2"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~0.901.6",
+    "@angular/cli": "~9.1.6",
+    "@angular/compiler-cli": "~9.1.7",
+    "@types/jasmine": "~3.5.0",
+    "@types/jasminewd2": "~2.0.3",
+    "@types/node": "^12.11.1",
+    "codelyzer": "^5.1.2",
+    "jasmine-core": "~3.5.0",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~5.0.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage-istanbul-reporter": "~2.1.0",
+    "karma-jasmine": "~3.0.1",
+    "karma-jasmine-html-reporter": "^1.4.2",
+    "protractor": "~5.4.3",
+    "ts-node": "~8.3.0",
+    "tslint": "~6.1.0",
+    "typescript": "~3.8.3"
+  }
+}
--- a/src/apis/index.php
+++ b/src/apis/index.php
@ -1,13 +1,16 @@
 <?php
+ini_set('display_errors', 1);
+ini_set('display_startup_errors', 1);
+error_reporting(E_ALL);
+
@include 'conn.conn';
-$GLOBALS['conn'];
 $conn = @mysqli_connect($DATAhst,$DATAusr,$DATApwd,$DATAdtb)or die("CONNECTION ERROR");

-$content = null;
+$items = array();

 if(isset($_GET['query'])) {

-  $content->items = array();
+  $items = array();
  switch($_GET['query']) {
    case "portfolio":
    case "installations":
@ -18,58 +21,67 @@ if(isset($_GET['query'])) {
      if($_GET['random'] == 'true') {$order = 'ORDER BY RAND()';} else {$order = "ORDER BY id DESC";}
      $qe = mysqli_query($conn,"SELECT * FROM `works` $filter $order");
      if(mysqli_num_rows($qe) > 0) {
-        $content = null;
-        $content->items = array();
+        $content = array("items" => array(), "item" => array());
+        $items = array();
        while($re = mysqli_fetch_array($qe)) {
-          $item = null;
-          $item->id = $re['id'];
-          $item->title = $re['title'];
-          $item->type = $re['type'];
-          $item->tags = $re['tags'];
-          $item->image = $re['image'];
-          array_push($content->items, $item);
+          $item = json_decode(json_encode(array(
+            "id" => $re['id'],
+            "title" => $re['title'],
+            "type" => $re['type'],
+            "tags" => $re['tags'],
+            "image" => $re['image']
+          )));
+          array_push($items, $item);
        }
      }
      break;
    case "exhibitions":
      $qe = mysqli_query($conn,"SELECT * FROM `exhibitions` ORDER BY date_from DESC");
      if(mysqli_num_rows($qe) > 0) {
-        $content = null;
-        $content->items = array();
+        $items = array();
        while($re = mysqli_fetch_array($qe)) {
-          $item = null;
-          $item->id = $re['id'];
-          $item->title = $re['title'];
-          $item->date_from = $re['date_from'];
-          $item->date_to = $re['date_to'];
-          $item->tags = $re['tags'];
-          $item->image = $re['image'];
-          array_push($content->items, $item);
+          $item = json_decode(json_encode(array(
+            "id" => $re['id'],
+            "title" => $re['title'],
+            "date_from" => $re['date_from'],
+            "date_to" => $re['date_to'],
+            "tags" => $re['tags'],
+            "image" => $re['image']
+          )));
+          array_push($items, $item);
        }
      }
      break;
    case "detail":
      $qe = mysqli_query($conn,"SELECT * FROM `".$_GET['type']."` WHERE id=".$_GET['id']);
      if(mysqli_num_rows($qe)>0) {
-        $content = null;
+        $items = array();
        $re = mysqli_fetch_array($qe);
-        $item = null;
-        $item->id = $re['id'];
-        $item->title = $re['title'];
-        $item->content = $re['content'];
-        $item->tags = $re['tags'];
-        $item->image = $re['image'];
-        $item->videos = $re['videos'];
-        $item->gallery = $re['gallery'];
+        $item = json_decode(json_encode(array(
+          "id" => $re['id'],
+          "title" => $re['title'],
+          "content" => $re['content'],
+          "videos" => $re['videos'],
+          "gallery" => $re['gallery'],
+          "tags" => $re['tags'],
+          "image" => $re['image'],
+          "type" => null,
+          "date_from" => null,//$re['date_from'],
+          "date_to" => null,//$re['date_to'],
+          "exhibitions" => null,//$re['date_to'],
+          "works" => null//$re['date_to'],
+        )));
+
        if($_GET['type'] == 'exhibitions') {
          $item->date_from = $re['date_from'];
          $item->date_to = $re['date_to'];
          $item->works = array();
          $qx = mysqli_query($conn,"SELECT id,title FROM `works` WHERE id IN (".$re['works'].")");
          while($re = mysqli_fetch_array($qx)) {
-            $ex = null;
-            $ex->id = $re['id'];
-            $ex->title = $re['title'];
+            $ex = json_decode(json_encode(array(
+              "id" => $re['id'],
+              "title" => $re['title']
+            )));
            array_push($item->works, $ex);
          }
        } else if($_GET['type'] == 'works') {
@ -77,23 +89,36 @@ if(isset($_GET['query'])) {
          $item->exhibitions = array();
          $qx = mysqli_query($conn,"SELECT id,title FROM `exhibitions` WHERE id IN (".$re['exhibitions'].")");
          while($re = mysqli_fetch_array($qx)) {
-            $ex = null;
-            $ex->id = $re['id'];
-            $ex->title = $re['title'];
+            $ex = json_decode(json_encode(array(
+              "id" => $re['id'],
+              "title" => $re['title']
+            )));
            array_push($item->exhibitions, $ex);
          }
        }
-        $content->item = $item;
+        $items = array($item);
      }
      break;
  }
 }
+
 http_response_code(200);

 header("Access-Control-Allow-Origin: *");
 header("Content-Type: application/json; charset=UTF-8");
 header("Access-Control-Allow-Methods: GET");
 header("Access-Control-Max-Age: 3600");
-echo json_encode($content);
+
+if($_GET['query'] == "detail") {
+  echo json_encode(array(
+    "status" => 200,
+    "item" => $items[0]
+  ));
+} else {
+  echo json_encode(array(
+    "status" => 200,
+    "items" => $items
+  ));
+}

 ?>
--- a/src/app/admin/.admin.component.html.kate-swp
+++ b/src/app/admin/.admin.component.html.kate-swp
--- a/src/app/app-layout/app-layout.component.html
+++ b/src/app/app-layout/app-layout.component.html
@ -2,6 +2,7 @@
  <app-header *ngIf="page != '/admin'"></app-header>
  <router-outlet></router-outlet>

-  <Particles class="particles" *ngIf="particlesEnabled && page != '/admin'"
-            [id]="id" [options]="particlesOptions" (particlesLoaded)="particlesLoaded($event)"></Particles>
+  <ng-particles class="particles" *ngIf="particlesEnabled && page != '/admin'"
+            [id]="id" [options]="particlesOptions" (particlesLoaded)="particlesLoaded($event)"
+            [particlesInit]="particlesInit"></ng-particles>
 </main>
--- a/src/app/app-layout/app-layout.component.ts
+++ b/src/app/app-layout/app-layout.component.ts
@ -1,6 +1,11 @@
 import { Component, OnInit } from '@angular/core'
 import { Router } from '@angular/router'
-import type { Container } from 'tsparticles'
+//import type { Container } from 'tsparticles'
+import { MoveDirection, ClickMode, HoverMode, OutMode } from "tsparticles-engine"
+//import { loadFull } from "tsparticles"
+import { loadSlim } from "tsparticles-slim"
+
+import { tsParticles, Engine } from "tsparticles-engine"

@Component({
  selector: 'app-app-layout',
@ -100,7 +105,13 @@ export class AppLayoutComponent implements OnInit {
  }


-  particlesLoaded(container: Container): void {
+  particlesLoaded(container: any): void {
    //console.log('particlesLoaded', container)
  }
+
+  async particlesInit(engine: Engine): Promise<void> {
+    console.log(engine)
+    await loadSlim(engine)
+  }
+
 }
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@ -2,7 +2,7 @@ import { BrowserModule, Title } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
 import { NgParticlesModule } from "ng-particles";
-import { NgxImageGalleryModule } from 'ngx-image-gallery';
+import { PhotoGalleryModule } from '@twogate/ngx-photo-gallery'
 import { FormsModule } from '@angular/forms';
 import { AngularEditorModule } from '@kolkov/angular-editor';

@ -35,7 +35,7 @@ import { SitemapComponent } from './sitemap/sitemap.component';
    BrowserModule,
    AppRoutingModule,
    NgParticlesModule,
-    NgxImageGalleryModule,
+    PhotoGalleryModule,
    FormsModule,
    AngularEditorModule,
    HttpClientModule
--- a/src/app/detail/detail.component.html
+++ b/src/app/detail/detail.component.html
@ -12,14 +12,22 @@
      </div>

      <div class="row no-gutters gallery" *ngIf="galleryImages.length">
-        <div class="col-12" *ngFor="let image of galleryImages; let i = index"
+        <div class="col-12 px-1 py-1" *ngFor="let image of galleryImages; let i = index"
             [ngClass]="{'col-md-4': galleryImages.length < 4 && (galleryImages.length % 3) == 2,
                          'col-md-12': galleryImages.length < 4 && (galleryImages.length % 3) == 1,
-                          'col-md-3': galleryImages.length >= 3}">
+                          'col-md-3': galleryImages.length >= 3}"><!--
          <div class="gallery-container">
            <span class="gallery-title">{{image.title}}</span>
            <img class="image" *ngIf="loadedImages[i]" src="/assets/images/loader.svg" alt="loading">
            <img class="image" [hidden]="loadedImages[i]" (load)="onLoad(i)" [src]="image.url" (click)="openGallery(i)">
+          </div>-->
+          <div class="gallery-container" photoGalleryGroup>
+
+            <span class="gallery-title">{{image.title}}</span>
+            <div class="images-item" [photoGallery]="image.url">
+              <img class="image" *ngIf="loadedImages[i]" src="/assets/images/loader.svg" alt="loading">
+              <img class="image" [hidden]="loadedImages[i]" (load)="onLoad(i)" [src]="image.url">
+            </div>
          </div>
        </div>
      </div>
@ -63,14 +71,4 @@
  </div>
 </div>

-<ngx-image-gallery
-[images]="galleryImages"
-[conf]="conf"
-(onOpen)="galleryOpened($event)"
-(onClose)="galleryClosed()"
-(onImageClicked)="galleryImageClicked($event)"
-(onImageChange)="galleryImageChanged($event)"
-(onDelete)="deleteImage($event)"
-></ngx-image-gallery>
-
 <app-spinner [show]="!loaded"></app-spinner>
--- a/src/app/detail/detail.component.ts
+++ b/src/app/detail/detail.component.ts
@ -2,7 +2,7 @@ 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 { NgxImageGalleryComponent, GALLERY_IMAGE, GALLERY_CONF } from "ngx-image-gallery"
 import { ApisService } from '../services/apis.service'
 import { Title } from '@angular/platform-browser';
 import { environment } from '../../environments/environment'
@ -19,21 +19,21 @@ export class DetailComponent implements OnInit {
  public loaded = false
  public init = false

-  @ViewChild(NgxImageGalleryComponent) ngxImageGallery: NgxImageGalleryComponent
+  //@ViewChild(NgxImageGalleryComponent) ngxImageGallery: NgxImageGalleryComponent

  public details: any = {}
  public section: string = ''
  public id: number = 0
  private history: string[] = []
-
+/*
  public conf: GALLERY_CONF = {
    imageOffset: '0px',
    showDeleteControl: false,
    showImageTitle: false,
    showArrows: false
-  }
+  }*/

-  public galleryImages: GALLERY_IMAGE[] = []
+  public galleryImages: any[] = []
  public loadedImages: boolean[] = []

  constructor(
@ -135,17 +135,17 @@ 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
@ -163,8 +163,6 @@ export class DetailComponent implements OnInit {
    this.ngxImageGallery.prev()
  }

-  /**************************************************/
-
  // EVENTS
  // callback on gallery opened
  galleryOpened(index) {
@ -189,5 +187,5 @@ export class DetailComponent implements OnInit {
  // callback on user clicked delete button
  deleteImage(index) {
    console.info('Delete image at index ', index)
-  }
+  }*/
 }
--- a/src/app/home/home.component.scss
+++ b/src/app/home/home.component.scss
@ -22,6 +22,7 @@
      display: flex;
      background: $black-alpha2;
      border-radius: 5px;
+      box-sizing: border-box;
      overflow: hidden;
      margin: auto;
      padding: 40px 20px;
--- a/src/app/services/apis.service.ts
+++ b/src/app/services/apis.service.ts
@ -16,7 +16,7 @@ export class ApisService extends BaseService {
    super()
  }

-  getPortfolio(section, random = false): Observable<any> {
+  getPortfolio(section: string, random: boolean = false): Observable<any> {
    let urlApi = `${this.restApi}?query=${section}&random=${random}`
    return this.http.get<any>(urlApi).pipe(
      catchError(this.handleError)
--- a/yarn-error.log
+++ b/yarn-error.log
--- a/yarn.lock
+++ b/yarn.lock