vcgit-forge/KaplanTest
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/KaplanTest.git synced 2026-02-10 04:33:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

Initial Commit

Browse Source
This commit is contained in:
Raghu-Ch
2018-07-05 18:06:27 -04:00
parent 16dd95cec4
commit f906e9f67a
17 changed files with 310 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
angular.json
View File

@@ -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"
}
}
}

10
package-lock.json generated
View File

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

2
package.json
View File

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

15
src/app/app-routing.module.ts Normal file
View File

@@ -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 { }

0
src/app/app.component.css
View File

19
src/app/app.component.html
View File

@@ -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>

4
src/app/app.component.scss Normal file
View File

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

2
src/app/app.component.ts
View File

@@ -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';

13
src/app/app.module.ts
View File

@@ -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: [
AppComponent
AppComponent,
ChannellistComponent
],
imports: [
BrowserModule
BrowserModule,
HttpClientModule,
AppRoutingModule
],
providers: [],
providers: [GetDataService],
bootstrap: [AppComponent]
})
export class AppModule { }

20
src/app/channellist/channellist.component.html Normal file
View File

@@ -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>

42
src/app/channellist/channellist.component.scss Normal file
View File

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

25
src/app/channellist/channellist.component.spec.ts Normal file
View File

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

48
src/app/channellist/channellist.component.ts Normal file
View File

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

15
src/app/services/get-data.service.spec.ts Normal file
View File

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

14
src/app/services/get-data.service.ts Normal file
View File

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

66
src/assets/channel.json Executable file
View File

@@ -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"
}
]

20
src/styles.css
View File

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