add apis and fix back navigation

.gitignore

@@ -4,3 +4,5 @@ node_modules/
 package-lock\.json
 
 src/assets/images/contents/
+
+dist/

angular.json

@@ -25,7 +25,8 @@
             "aot": true,
             "assets": [
               "src/assets/images/favicon.png",
-              "src/assets"
+              "src/assets",
+              "src/apis"
             ],
             "styles": [
               "src/assets/scss/main.scss"

src/apis/conn.conn

@@ -0,0 +1,16 @@
+<?php
+
+$DATAhst="localhost";
+$DATAusr="root";
+$DATApwd="root";
+$DATAdtb="www_dslak_it";
+
+/*
+$DATAhst="localhost";
+$DATAusr="token";
+$DATApwd="tokendbpwd";
+$DATAdtb="www_dslak_it";
+*/
+
+
+?>

src/apis/index.php

@@ -0,0 +1,93 @@
+<?php
+@include 'conn.conn';
+$GLOBALS['conn'];
+$conn=@mysqli_connect($DATAhst,$DATAusr,$DATApwd,$DATAdtb)or die("CONNECTION ERROR");
+
+$content = null;
+$content->items = array();
+
+$filter = array("portfolio", "installations", "entertainment", "performances", "workshops");
+
+switch($_GET['query']) {
+  case "portfolio":
+  case "installations":
+  case "entertainment":
+  case "performances":
+  case "workshops":
+    if($_GET['query'] == 'portfolio') {$filter = '';} else {$filter = "WHERE type='".$_GET['query']."'";}
+    $qe = mysqli_query($conn,"SELECT * FROM `works` $filter ORDER BY id DESC");
+    if(mysqli_num_rows($qe) > 0) {
+      $content = null;
+      $content->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);
+      }
+    }
+    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();
+      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);
+      }
+    }
+    break;
+  case "detail":
+    $qe = mysqli_query($conn,"SELECT * FROM `".$_GET['type']."` WHERE id=".$_GET['id']);
+    if(mysqli_num_rows($qe)>0) {
+      $content = null;
+      $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'];
+      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'];
+          array_push($item->works, $ex);
+        }
+      } else if($_GET['type'] == 'works') {
+        $item->type = $re['type'];
+        $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'];
+          array_push($item->exhibitions, $ex);
+        }
+      }
+      $content->item = $item;
+    }
+    break;
+}
+
+
+header('Access-Control-Allow-Origin: *');
+header('Content-Type: application/json');
+echo json_encode($content);
+
+?>

src/app/app-layout/app-layout.component.ts

@@ -8,7 +8,7 @@ import type { Container } from 'tsparticles'
 })
 export class AppLayoutComponent implements OnInit {
 
-  public particlesEnabled: boolean = true
+  public particlesEnabled: boolean = false
   public id: string = 'tsparticles'
 
   public particlesOptions: any = {

src/app/app-routing.module.ts

@@ -21,7 +21,11 @@ const routes: Routes = [
       { path: 'workshops', component: PortfolioComponent },
       { path: 'detail', component: DetailComponent,
         children: [
-          { path: '**', component: DetailComponent }
+          { path: '**', component: DetailComponent,
+            children: [
+              { path: '**', component: DetailComponent }
+            ]
+          }
         ]
       }
 

src/app/detail/detail.component.html

@@ -3,7 +3,19 @@
     <div class="col-11 col-md-10 col-lg-12 content mx-auto">
       <button class="back icon-back" (click)="back()"></button>
       <h2 class="title">{{details.title}}</h2>
-      <div class="text" [innerHTML]="details.text"></div>
-      <span class="tags"><b>Tags:</b> {{details.tags}}</span>
+      <div class="text" [innerHTML]="details.content"></div>
+      <span class="tags" *ngIf="details.tags"><b>Tags:</b> {{details.tags}}</span>
+
+      <span class="links" *ngIf="details.exhibitions && details.exhibitions.length"><b>Exhibitions:</b>
+        <span class="link" *ngFor="let exhibition of details.exhibitions"
+              (click)="showDetails('exhibitions', exhibition.id)"
+              routerLink="/detail/exhibitions/{{exhibition.id}}">{{exhibition.title}} </span>
+      </span>
+
+      <span class="links" *ngIf="details.works && details.works.length"><b>Works:</b>
+        <span class="link" *ngFor="let work of details.works"
+              (click)="showDetails('works', work.id)"
+              routerLink="/detail/works/{{work.id}}">{{work.title}} </span>
+      </span>
   </div>
 </div>

src/app/detail/detail.component.scss

@@ -22,13 +22,23 @@
     .text {
       font-size: $font-18;
       text-align: justify;
+      padding-bottom: 40px;
     }
 
-    .tags {
+    .tags,
+    .links {
       display: block;
       font-size: $font-12;
       text-transform: uppercase;
-      padding-top: 40px;
+      padding: 5px 0;
+
+      .link {
+        display: inline-block;
+        font-size: $font-12;
+        text-transform: uppercase;
+        padding: 0 5px;
+        cursor: pointer;
+      }
     }
 
     .back {

src/app/detail/detail.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core'
-import { Router, NavigationEnd } from '@angular/router'
+import { Router, NavigationEnd, NavigationStart, ActivatedRoute } from '@angular/router'
 import { Location } from '@angular/common'
 import { ApisService } from '../services/apis.service'
 
@@ -11,19 +11,24 @@ import { ApisService } from '../services/apis.service'
 export class DetailComponent implements OnInit {
 
   public details: any = {}
+  private history: string[] = []
 
   constructor(
     private apisService: ApisService,
     private router: Router,
-    private location: Location
-  ){ }
+    private location: Location,
+    private activeRoute: ActivatedRoute
+  ) { }
 
   ngOnInit(): void {
-    this.showDetails(this.router.url.split('/')[2])
+    this.showDetails(this.router.url.split('/')[2], this.router.url.split('/')[3])
   }
 
-  showDetails(id): void {
-    this.apisService.getDetails(id).toPromise().then((response) => {
+  showDetails(section, id): void {
+    this.apisService.getDetails(section, id).toPromise().then((response) => {
+      if(this.history[this.history.length - 1] != `/detail/${section}/${id}`) {
+        this.history.push(`/detail/${section}/${id}`)
+      }
       this.details = response.item
     },(error) => {
       console.error('getPortfolio ERROR', error)
@@ -32,7 +37,14 @@ export class DetailComponent implements OnInit {
     })
   }
 
-  back() {
-    this.location.back()
+  back(): void {
+    this.history.pop()
+    if(this.history.length > 0) {
+      const last = this.history[this.history.length - 1]
+      this.showDetails(last.split('/')[2], last.split('/')[3])
+      this.location.back()
+    } else {
+      this.location.back()
+    }
   }
 }

src/app/portfolio/portfolio.component.ts

@@ -27,7 +27,8 @@ export class PortfolioComponent implements OnInit {
   }
 
   showDetails(id): void {
-    this.router.navigate([`/detail/${id}`])
+    const section = this.router.url.split('/')[1] == 'exhibitions' ? 'exhibitions' : 'works'
+    this.router.navigate([`/detail/${section}/${id}`])
   }
 
 }

src/app/services/apis.service.ts

@@ -23,8 +23,8 @@ export class ApisService extends BaseService {
     )
   }
 
-  getDetails(id): Observable<any> {
-    let urlApi = `${this.restApi}?query=single&id=${id}`
+  getDetails(section, id): Observable<any> {
+    let urlApi = `${this.restApi}?query=detail&type=${section}&id=${id}`
     return this.http.get<any>(urlApi).pipe(
       catchError(this.handleError)
     )

src/environments/environment.ts

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