Initial Commit

angular.json

@@ -23,9 +23,13 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.css"
+              "src/styles.css",
+              "node_modules/bootstrap/dist/css/bootstrap.min.css"
             ],
-            "scripts": []
+            "scripts": [
+              "node_modules/jquery/dist/jquery.min.js",
+              "node_modules/bootstrap/dist/js/bootstrap.min.js"
+            ]
           },
           "configurations": {
             "production": {
@@ -118,5 +122,10 @@
       }
     }
   },
-  "defaultProject": "KaplanTest"
+  "defaultProject": "KaplanTest",
+  "schematics": {
+    "@schematics/angular:component": {
+      "styleext": "scss"
+    }
+  }
 }

package-lock.json

@@ -1409,6 +1409,11 @@
         "hoek": "2.16.3"
       }
     },
+    "bootstrap": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.1.1.tgz",
+      "integrity": "sha512-SpiDSOcbg4J/PjVSt4ny5eY6j74VbVSjROY4Fb/WIUXBV9cnb5luyR4KnPvNoXuGnBK1T+nJIWqRsvU3yP8Mcg=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -5532,6 +5537,11 @@
       "integrity": "sha1-43zwsX8ZnM4jvqcbIDk5Uka07E4=",
       "dev": true
     },
+    "jquery": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
+      "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg=="
+    },
     "js-base64": {
       "version": "2.4.5",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.5.tgz",

package.json

@@ -20,7 +20,9 @@
     "@angular/platform-browser": "^6.0.0",
     "@angular/platform-browser-dynamic": "^6.0.0",
     "@angular/router": "^6.0.0",
+    "bootstrap": "^4.1.1",
     "core-js": "^2.5.4",
+    "jquery": "^3.3.1",
     "rxjs": "^6.0.0",
     "zone.js": "^0.8.26"
   },

src/app/app-routing.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { ChannellistComponent } from './channellist/channellist.component';
+
+const routes: Routes = [
+    { path: '', redirectTo: 'channel', pathMatch: 'full' },
+    { path: 'channel', component: ChannellistComponent },
+    { path: '**', redirectTo: 'channel' }
+];
+
+@NgModule({
+    imports: [RouterModule.forRoot(routes)],
+    exports: [RouterModule]
+})
+export class AppRoutingModule { }

src/app/app.component.html

@@ -1,20 +1,3 @@
 <!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
 
+<router-outlet></router-outlet>

src/app/app.component.scss

@@ -0,0 +1,4 @@
+.check {
+  margin: 2em auto;
+  width: 80%;
+}

src/app/app.component.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
   title = 'app';

src/app/app.module.ts

@@ -2,15 +2,22 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
+import { ChannellistComponent } from './channellist/channellist.component';
+import { AppRoutingModule } from './app-routing.module';
+import { GetDataService } from './services/get-data.service';
+import { HttpClientModule } from '@angular/common/http';
 
 @NgModule({
-  declarations: [
+    declarations: [
-    AppComponent
+        AppComponent,
-  ],
+        ChannellistComponent
-  imports: [
+    ],
-    BrowserModule
+    imports: [
-  ],
+        BrowserModule,
-  providers: [],
+        HttpClientModule,
-  bootstrap: [AppComponent]
+        AppRoutingModule
+    ],
+    providers: [GetDataService],
+    bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/channellist/channellist.component.html

@@ -0,0 +1,20 @@
+<div class="container container-table">
+  <div *ngFor="let channel of channels;let index = index">
+    <div [class.separator]="channel?.sectionLast">
+      <div *ngIf="channel?.sectionFirst" class="dateHeader">{{channel.time | date: 'EE, MMMM d, y'}}</div>
+      <div class="channelSection row vertical-center-row">
+        <div class="col-md-6">
+          <img [src]="channel.subjectPhotoUrl">
+          <h3>{{channel.title}}</h3>
+          <div class="description">{{channel.description}}</div>
+        </div>
+        <div class="col-md-3">
+          <img [src]="channel.instructorPhotoUrl">
+          <h3 class="title">{{channel.instructorName}}</h3>
+        </div>
+        <div class="col-md-3 datetime">{{channel.time}}</div>
+        <hr *ngIf="!channel?.sectionLast">
+      </div>
+    </div>
+  </div>
+</div>

src/app/channellist/channellist.component.scss

@@ -0,0 +1,42 @@
+.channelSection {
+  width: 100%;
+  background-color: #fff;
+  .vertical-center-row {
+    margin-left: 0px;
+  }
+  img {
+    margin: 10px;
+    float: left;
+    border-radius: 50%;
+    width: 30px;
+  }
+  h3 {
+    margin-top: 12px;
+    font-size: 16px;
+    margin-left: 60px;
+  }
+  .description {
+    margin: 5px 0 10px 60px;
+    font-size: 14px;
+  }
+  .datetime {
+    margin-top: 10px;
+  }
+  hr {
+    width: 100%;
+    margin-right: 0px;
+  }
+}
+
+.separator {
+  margin-bottom: 20px;
+  .channelSection {
+    padding-bottom: 25px;
+  }
+}
+
+.dateHeader {
+  margin: 10px 0px 10px -13px;
+  font-weight: bold;
+  font-size: 13px;
+}

src/app/channellist/channellist.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChannellistComponent } from './channellist.component';
+
+describe('ChannellistComponent', () => {
+  let component: ChannellistComponent;
+  let fixture: ComponentFixture<ChannellistComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ChannellistComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ChannellistComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/channellist/channellist.component.ts

@@ -0,0 +1,48 @@
+import { Component, OnInit } from '@angular/core';
+import { GetDataService } from '../services/get-data.service';
+
+
+@Component({
+  selector: 'app-channellist',
+  templateUrl: './channellist.component.html',
+  styleUrls: ['./channellist.component.scss']
+})
+export class ChannellistComponent implements OnInit {
+
+  channels: any;
+
+  constructor(private getData: GetDataService) { }
+
+  ngOnInit() {
+    this.getData.getChannels().subscribe((response) => {
+      this.channels = response;
+      this.sortChannels();
+      let tempDate = '';
+      this.channels = this.channels.map((channel, index) => {
+        if (tempDate === '') {
+          tempDate = channel.time.split(' ')[0];
+          channel.sectionFirst = true;
+        } else if (tempDate !== channel.time.split(' ')[0]) {
+          this.channels[index - 1].sectionLast = true;
+          channel.sectionFirst = true;
+          tempDate = channel.time.split(' ')[0];
+        }
+        return channel;
+      });
+      console.log(this.channels);
+    });
+  }
+
+  sortChannels() {
+    this.channels.sort(function (channel1, channel2) {
+      if (channel1.time < channel2.time) {
+        return -1;
+      } else if (channel1.time > channel2.time) {
+        return 1;
+      } else {
+        return 0;
+      }
+    });
+  }
+
+}

src/app/services/get-data.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { GetDataService } from './get-data.service';
+
+describe('GetDataService', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [GetDataService]
+        });
+    });
+
+    it('should be created', inject([GetDataService], (service: GetDataService) => {
+        expect(service).toBeTruthy();
+    }));
+});

src/app/services/get-data.service.ts

@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable()
+export class GetDataService {
+
+    constructor(private http: HttpClient) { }
+
+    public getChannels(): Observable<any> {
+        return this.http.get('./assets/channel.json');
+    }
+
+}

src/assets/channel.json

@@ -0,0 +1,66 @@
+[
+  {
+    "title":"Nulla convallis dolor quis erat.",
+    "description":"Sed hendrerit luctus finibus. Sed justo dui, vulputate ac suscipit condimentum, porttitor sed dolor. Ut eu justo at metus dapibus facilisis a quis libero. Integer lectus turpis, pretium a tincidunt.",
+    "instructorName":"Erat Libero",
+    "instructorPhotoUrl":"https://placeholdit.imgix.net/~text?txtsize=34&txt=C&w=60&h=60",
+    "subjectPhotoUrl":"https://placeholdit.imgix.net/~text?txtsize=34&txt=C&w=60&h=60",
+    "time":"2016-01-03 22:00:00"
+  },
+  {
+    "title":"Pellentesque sagittis porttitor tincidunt. Sed.",
+    "description":"Curabitur eu velit vitae massa varius rhoncus. Proin eu ligula venenatis, consequat libero maximus, varius lorem. Morbi a dignissim nibh. Suspendisse eget ornare nunc, sollicitudin lacinia elit. Sed in volutpat.",
+    "instructorName":"Scelerisque Via",
+    "instructorPhotoUrl":"https://placeholdit.imgix.net/~text?txtsize=34&txt=D&w=60&h=60",
+    "subjectPhotoUrl":"https://placeholdit.imgix.net/~text?txtsize=34&txt=B&w=60&h=60",
+    "time":"2016-01-01 21:00:00"
+  },
+  {
+    "title":"Phasellus a interdum purus, non.",
+    "description":"Pellentesque bibendum, nulla tincidunt consequat rutrum, sem lacus mattis quam, cursus semper lectus nibh id diam. Duis ullamcorper, odio ac blandit pretium, purus est varius ante, eu aliquam elit tortor.",
+    "instructorName":"Cras Ac",
+    "instructorPhotoUrl":"https://placeholdit.imgix.net/~text?txtsize=34&txt=B&w=60&h=60",
+    "subjectPhotoUrl":"https://placeholdit.imgix.net/~text?txtsize=34&txt=A&w=60&h=60",
+    "time":"2016-01-04 21:00:00"
+  },
+  {
+    "title":"Donec viverra, magna ut porttitor",
+    "description":"Maecenas finibus ullamcorper aliquam. Integer eros neque, placerat id convallis non, rutrum tempor nisi. In venenatis vulputate feugiat. Vivamus porttitor, odio sit amet volutpat maximus, magna est maximus sapien, et.",
+    "instructorName":"Posuere Una",
+    "instructorPhotoUrl":"https://placeholdit.imgix.net/~text?txtsize=34&txt=E&w=60&h=60",
+    "subjectPhotoUrl":"https://placeholdit.imgix.net/~text?txtsize=34&txt=A&w=60&h=60",
+    "time":"2016-01-03 20:00:00"
+  },
+  {
+    "title":"In quis elit ut ipsum.",
+    "description":"Praesent fermentum tortor non arcu imperdiet, egestas vestibulum augue tempus. Nunc sollicitudin tincidunt metus placerat luctus. Praesent at finibus nibh. Donec auctor feugiat hendrerit. Nulla massa augue, mattis quis fermentum.",
+    "instructorName":"Aliquam Nisl",
+    "instructorPhotoUrl":"https://placeholdit.imgix.net/~text?txtsize=34&txt=D&w=60&h=60",
+    "subjectPhotoUrl":"https://placeholdit.imgix.net/~text?txtsize=34&txt=C&w=60&h=60",
+    "time":"2016-01-05 19:00:00"
+  },
+  {
+    "title":"Ut consequat risus id lacus.",
+    "description":"Nunc hendrerit blandit elit sed rhoncus. Sed interdum tempus enim vel ornare. Nulla facilisi. Morbi rhoncus turpis in justo sollicitudin, sit amet varius magna fringilla. Fusce porta magna neque, nec.",
+    "instructorName":"Vestibulum Ante",
+    "instructorPhotoUrl":"https://placeholdit.imgix.net/~text?txtsize=34&txt=B&w=60&h=60",
+    "subjectPhotoUrl":"https://placeholdit.imgix.net/~text?txtsize=34&txt=A&w=60&h=60",
+    "time":"2016-01-05 22:00:00"
+  },
+  {
+    "title":"Sed mauris dui, ornare ut.",
+    "description":"Vivamus pulvinar, nisl fermentum cursus tincidunt, tortor justo dignissim metus, consectetur facilisis nulla tellus ut nisi. Cras in lorem neque. Vivamus sed odio in libero finibus consequat. Maecenas facilisis nisi.",
+    "instructorName":"Integer Laciana",
+    "instructorPhotoUrl":"https://placeholdit.imgix.net/~text?txtsize=34&txt=E&w=60&h=60",
+    "subjectPhotoUrl":"https://placeholdit.imgix.net/~text?txtsize=34&txt=B&w=60&h=60",
+    "time":"2016-01-01 20:00:00"
+  },
+  {
+    "title":"In hac habitasse platea dictumst.",
+    "description":"Suspendisse consequat egestas posuere. Integer diam diam, gravida ac condimentum a, vulputate et quam. Fusce eleifend leo sed diam cursus, nec ultrices orci luctus. Vivamus eget eros aliquam, suscipit sapien.",
+    "instructorName":"Ipsum Primis",
+    "instructorPhotoUrl":"https://placeholdit.imgix.net/~text?txtsize=34&txt=A&w=60&h=60",
+    "subjectPhotoUrl":"https://placeholdit.imgix.net/~text?txtsize=34&txt=D&w=60&h=60",
+    "time":"2016-01-03 21:00:00"
+  }
+]

src/styles.css

@@ -1 +1,21 @@
 /* You can add global styles to this file, and also import other style files */
+
+body {
+  background-color: #ededed !important;
+  font-family: Arial;
+}
+
+html,
+body,
+.container-table {
+  height: 100%;
+}
+
+.container-table {
+  display: table;
+}
+
+.vertical-center-row {
+  display: table-cell;
+  vertical-align: middle;
+}