From 64ba0e5090fbf83be1b0bf320da6f222b8789119 Mon Sep 17 00:00:00 2001
From: Evert Prants <imsonotsleepy@gmail.com>
Date: Sun, 8 Nov 2020 11:46:31 +0200
Subject: [PATCH] article page working

---
 src/app/article.service.spec.ts        | 16 ++++++++++++++++
 src/app/article.service.ts             | 17 +++++++++++++++++
 src/app/article.ts                     |  8 ++++++--
 src/app/article/article.component.html | 11 ++++++++++-
 src/app/article/article.component.ts   |  8 +++++++-
 src/app/list/list.component.html       |  1 +
 6 files changed, 57 insertions(+), 4 deletions(-)
 create mode 100644 src/app/article.service.spec.ts
 create mode 100644 src/app/article.service.ts

diff --git a/src/app/article.service.spec.ts b/src/app/article.service.spec.ts
new file mode 100644
index 0000000..120c0e2
--- /dev/null
+++ b/src/app/article.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ArticleService } from './article.service';
+
+describe('ArticleService', () => {
+  let service: ArticleService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ArticleService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/article.service.ts b/src/app/article.service.ts
new file mode 100644
index 0000000..e278856
--- /dev/null
+++ b/src/app/article.service.ts
@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs'
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ArticleService {
+  private articleUrl = 'http://midaiganes.irw.ee/api/list/dad2ec5d';
+
+  constructor(private http: HttpClient) { }
+
+  public getArticle(): Observable<any> {
+    return this.http.get<any>(this.articleUrl);
+  }
+
+}
diff --git a/src/app/article.ts b/src/app/article.ts
index 41473a7..6d88354 100644
--- a/src/app/article.ts
+++ b/src/app/article.ts
@@ -1,4 +1,8 @@
 
 export interface IArticle {
-
-};
+  title: string;
+  intro: string;
+  body: string;
+  images: any;
+  tags: string[];
+}
diff --git a/src/app/article/article.component.html b/src/app/article/article.component.html
index 369b28c..c0f7081 100644
--- a/src/app/article/article.component.html
+++ b/src/app/article/article.component.html
@@ -1 +1,10 @@
-<p>article works!</p>
+<h1>{{ article.title }}</h1>
+<div class="intro" [innerHTML]="article.intro"></div>
+<ng-container *ngIf="article.images.length">
+  <ng-container *ngFor="let image of article.images">
+    <div class="image-wrapper">
+      <img src="{{ image.medium }}" alt="{{ image.alt }}" title="{{ image.title }}">
+    </div>
+  </ng-container>
+</ng-container>
+<div class="content-wrapper" [innerHTML]="article.body"></div>
diff --git a/src/app/article/article.component.ts b/src/app/article/article.component.ts
index 35ef9ec..43a32c5 100644
--- a/src/app/article/article.component.ts
+++ b/src/app/article/article.component.ts
@@ -1,15 +1,21 @@
 import { Component, OnInit } from '@angular/core';
 
+import { ArticleService } from '../article.service';
+
+import { IArticle } from '../article';
+
 @Component({
   selector: 'app-article',
   templateUrl: './article.component.html',
   styleUrls: ['./article.component.styl']
 })
 export class ArticleComponent implements OnInit {
+  public article: IArticle;
 
-  constructor() { }
+  constructor(private articleService: ArticleService) { }
 
   ngOnInit(): void {
+    this.articleService.getArticle().subscribe((data) => this.article = data);
   }
 
 }
diff --git a/src/app/list/list.component.html b/src/app/list/list.component.html
index ed25f4c..e9204cc 100644
--- a/src/app/list/list.component.html
+++ b/src/app/list/list.component.html
@@ -1,3 +1,4 @@
+<h1>Nimekiri</h1>
 <table>
   <thead>
     <th (click)="setSort('firstname')" class="clickable">Eesnimi