Skip to content

Commit

Permalink
adding styles and routing
Browse files Browse the repository at this point in the history
  • Loading branch information
techieshravan committed Mar 13, 2016
1 parent be73e93 commit 82e9161
Show file tree
Hide file tree
Showing 29 changed files with 181 additions and 571 deletions.
20 changes: 20 additions & 0 deletions Vehicles/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { Component } from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
import { VehiclesService } from './vehicles/vehicles.service';
import { VehiclesListComponent } from "./vehicles/vehicles-list.component";

@Component({
selector: 'vehicles-app',
templateUrl: 'app/app.html',
directives: [ROUTER_DIRECTIVES],
providers: [ROUTER_PROVIDERS, VehiclesService]
})
@RouteConfig([
{
path: '/vehicles',
name: 'VehiclesList',
component: VehiclesListComponent,
useAsDefault: true
}
])
export class AppComponent { }
16 changes: 16 additions & 0 deletions Vehicles/app/app.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<h1>Vehicles List</h1>

<main class="mdl-layout__content">
<section>
<div class="page-content">
<router-outlet></router-outlet>
</div>
</section>
</main>


<!--<div class="row">
<div class="col-md-12">
<vehicles-list [selectedVehicle]="selectedVehicle"></vehicles-list>
</div>
</div>-->
4 changes: 4 additions & 0 deletions Vehicles/app/main.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import { bootstrap } from 'angular2/platform/browser';
import { AppComponent } from './app.component';

bootstrap(AppComponent);
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {Vehicle} from '../models/vehicle'
import {VehiclesPictures} from "../models/vehicles-pictures";
import { Vehicle } from './vehicle'
import { VehiclesPictures } from "./vehicles-pictures";

export var VehiclesList: Vehicle[] = [
{
Expand All @@ -9,7 +9,7 @@ export var VehiclesList: Vehicle[] = [
make: "Chrysler",
type: "Compact",
seats: 4,
picture: "data:image/png;base64," + VehiclesPictures.pictures[0] ,
picture: "data:image/png;base64," + VehiclesPictures.pictures[0],
rating: Math.floor((Math.random() * 5) + 1)
},
{
Expand All @@ -19,7 +19,7 @@ export var VehiclesList: Vehicle[] = [
make: "Lincoln",
type: "Van",
seats: 7,
picture: "data:image/png;base64," + VehiclesPictures.pictures[1] ,
picture: "data:image/png;base64," + VehiclesPictures.pictures[1],
rating: Math.floor((Math.random() * 5) + 1)
},
{
Expand All @@ -29,7 +29,7 @@ export var VehiclesList: Vehicle[] = [
make: "Ford",
type: "Van",
seats: 7,
picture: "data:image/png;base64," + VehiclesPictures.pictures[2] ,
picture: "data:image/png;base64," + VehiclesPictures.pictures[2],
rating: Math.floor((Math.random() * 5) + 1)
},
{
Expand All @@ -39,7 +39,7 @@ export var VehiclesList: Vehicle[] = [
make: "Chrysler",
type: "Van",
seats: 7,
picture: "data:image/png;base64," + VehiclesPictures.pictures[3] ,
picture: "data:image/png;base64," + VehiclesPictures.pictures[3],
rating: Math.floor((Math.random() * 5) + 1)
},
{
Expand All @@ -49,7 +49,7 @@ export var VehiclesList: Vehicle[] = [
make: "Chevrolet",
type: "Van",
seats: 7,
picture: "data:image/png;base64," + VehiclesPictures.pictures[4] ,
picture: "data:image/png;base64," + VehiclesPictures.pictures[4],
rating: Math.floor((Math.random() * 5) + 1)
},
{
Expand All @@ -59,7 +59,7 @@ export var VehiclesList: Vehicle[] = [
make: "Chevrolet",
type: "Van",
seats: 7,
picture: "data:image/png;base64," + VehiclesPictures.pictures[5] ,
picture: "data:image/png;base64," + VehiclesPictures.pictures[5],
rating: Math.floor((Math.random() * 5) + 1)
},
{
Expand All @@ -69,7 +69,7 @@ export var VehiclesList: Vehicle[] = [
make: "Cadillac",
type: "Van",
seats: 7,
picture: "data:image/png;base64," + VehiclesPictures.pictures[6] ,
picture: "data:image/png;base64," + VehiclesPictures.pictures[6],
rating: Math.floor((Math.random() * 5) + 1)
},
{
Expand All @@ -79,7 +79,7 @@ export var VehiclesList: Vehicle[] = [
make: "Cadilac",
type: "Van",
seats: 7,
picture: "data:image/png;base64," + VehiclesPictures.pictures[7] ,
picture: "data:image/png;base64," + VehiclesPictures.pictures[7],
rating: Math.floor((Math.random() * 5) + 1)
},
{
Expand All @@ -89,7 +89,7 @@ export var VehiclesList: Vehicle[] = [
make: "Chevrolet",
type: "Van",
seats: 7,
picture: "data:image/png;base64," + VehiclesPictures.pictures[8] ,
picture: "data:image/png;base64," + VehiclesPictures.pictures[8],
rating: Math.floor((Math.random() * 5) + 1)
},
{
Expand All @@ -99,7 +99,7 @@ export var VehiclesList: Vehicle[] = [
make: "Dodge",
type: "Van",
seats: 7,
picture: "data:image/png;base64," + VehiclesPictures.pictures[9] ,
picture: "data:image/png;base64," + VehiclesPictures.pictures[9],
rating: Math.floor((Math.random() * 5) + 1)
},
{
Expand All @@ -109,7 +109,7 @@ export var VehiclesList: Vehicle[] = [
make: "Dodge",
type: "Luxury",
seats: 7,
picture: "data:image/png;base64," + VehiclesPictures.pictures[10] ,
picture: "data:image/png;base64," + VehiclesPictures.pictures[10],
rating: Math.floor((Math.random() * 5) + 1)
},
{
Expand All @@ -119,7 +119,7 @@ export var VehiclesList: Vehicle[] = [
make: "Pontiac",
type: "Luxury",
seats: 7,
picture: "data:image/png;base64," + VehiclesPictures.pictures[11] ,
picture: "data:image/png;base64," + VehiclesPictures.pictures[11],
rating: Math.floor((Math.random() * 5) + 1)
},
{
Expand All @@ -129,7 +129,7 @@ export var VehiclesList: Vehicle[] = [
make: "Saturn",
type: "Luxury",
seats: 7,
picture: "data:image/png;base64," + VehiclesPictures.pictures[12] ,
picture: "data:image/png;base64," + VehiclesPictures.pictures[12],
rating: Math.floor((Math.random() * 5) + 1)
},
{
Expand All @@ -139,7 +139,7 @@ export var VehiclesList: Vehicle[] = [
make: "Pontiac",
type: "Luxury",
seats: 7,
picture: "data:image/png;base64," + VehiclesPictures.pictures[13] ,
picture: "data:image/png;base64," + VehiclesPictures.pictures[13],
rating: Math.floor((Math.random() * 5) + 1)
},
{
Expand All @@ -149,7 +149,7 @@ export var VehiclesList: Vehicle[] = [
make: "Pontiac",
type: "Luxury",
seats: 7,
picture: "data:image/png;base64," + VehiclesPictures.pictures[14] ,
picture: "data:image/png;base64," + VehiclesPictures.pictures[14],
rating: Math.floor((Math.random() * 5) + 1)
},
{
Expand All @@ -159,7 +159,7 @@ export var VehiclesList: Vehicle[] = [
make: "Buick",
type: "Luxury",
seats: 7,
picture: "data:image/png;base64," + VehiclesPictures.pictures[15] ,
picture: "data:image/png;base64," + VehiclesPictures.pictures[15],
rating: Math.floor((Math.random() * 5) + 1)
},
{
Expand All @@ -169,7 +169,7 @@ export var VehiclesList: Vehicle[] = [
make: "Chevrolet",
type: "Luxury",
seats: 7,
picture: "data:image/png;base64," + VehiclesPictures.pictures[16] ,
picture: "data:image/png;base64," + VehiclesPictures.pictures[16],
rating: Math.floor((Math.random() * 5) + 1)
},
{
Expand All @@ -179,7 +179,7 @@ export var VehiclesList: Vehicle[] = [
make: "Buick",
type: "Luxury",
seats: 7,
picture: "data:image/png;base64," + VehiclesPictures.pictures[17] ,
picture: "data:image/png;base64," + VehiclesPictures.pictures[17],
rating: Math.floor((Math.random() * 5) + 1)
},
{
Expand All @@ -189,7 +189,7 @@ export var VehiclesList: Vehicle[] = [
make: "Chevrolet",
type: "Luxury",
seats: 7,
picture: "data:image/png;base64," + VehiclesPictures.pictures[18] ,
picture: "data:image/png;base64," + VehiclesPictures.pictures[18],
rating: Math.floor((Math.random() * 5) + 1)
},
{
Expand All @@ -199,7 +199,7 @@ export var VehiclesList: Vehicle[] = [
make: "Pontiac",
type: "Luxury",
seats: 7,
picture: "data:image/png;base64," + VehiclesPictures.pictures[19] ,
picture: "data:image/png;base64," + VehiclesPictures.pictures[19],
rating: Math.floor((Math.random() * 5) + 1)
}
];
14 changes: 14 additions & 0 deletions Vehicles/app/vehicles/vehicle-detail.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<div class="mdl-grid mdl-card mdl-shadow--4dp" *ngIf="vehicle">
<div class="mdl-card__media mdl-cell mdl-cell--4-col">
<img class="article-image" [src]='vehicle.picture' border="0" alt="">
</div>
<div class="mdl-cell mdl-cell--8-col">
<h2 class="mdl-card__title-text">{{vehicle.make}} {{vehicle.model}}</h2>
<div class="mdl-card__supporting-text no-left-padding">
<span>License Plate: {{vehicle.licensePlate}}</span>
<span>Type: {{vehicle.type}}</span>
<span>Seats: {{vehicle.seats}}</span>
<span>Rating: {{vehicle.rating}}</span>
</div>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import {Component} from 'angular2/core';
import {Vehicle} from "../../models/vehicle";
import {Vehicle} from "./vehicle";

@Component({
selector: 'vehicle-detail',
templateUrl: 'src/components/vehicle-detail/vehicle-detail.html',
templateUrl: 'app/vehicles/vehicle-detail.html',
inputs: ['vehicle']
})
export class VehicleDetailComponent {
Expand Down
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -1,16 +1,13 @@
import {Component} from 'angular2/core';
import {Vehicle} from '../../models/vehicle';
import {VehiclesService} from '../../services/vehicles.service';
import {VehicleDetailComponent} from "../vehicle-detail/vehicle-details";
import {OnInit} from 'angular2/core';

import { Component, OnInit } from 'angular2/core';
import { Vehicle } from './vehicle';
import { VehiclesService } from './vehicles.service';
import { VehicleDetailComponent } from "./vehicle-details.component";

@Component({
selector: 'vehicles-list',
templateUrl: 'src/components/vehicles-list/vehicles-list.html',
styles:[],
directives: [VehicleDetailComponent],
providers:[VehiclesService]
templateUrl: 'app/vehicles/vehicles-list.html',
styleUrls: ['app/vehicles/vehicles-list.css'],
directives: [VehicleDetailComponent]
})
export class VehiclesListComponent {

Expand Down
7 changes: 7 additions & 0 deletions Vehicles/app/vehicles/vehicles-list.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
.mdl-cell--col-3 {
width: 25%;
}

.mdl-cell--col-3 img {
width: 100%;
}
6 changes: 6 additions & 0 deletions Vehicles/app/vehicles/vehicles-list.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--3-col" *ngFor="#vehicle of vehicles" (click)="onSelect(vehicle)">
<img [src]="vehicle.picture" />
</div>
</div>
<vehicle-detail [vehicle]="selectedVehicle"></vehicle-detail>
File renamed without changes.
File renamed without changes.
49 changes: 34 additions & 15 deletions Vehicles/index.html
Original file line number Diff line number Diff line change
@@ -1,29 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<html>

<head>
<meta charset="UTF-8">
<base href="/" />
<title>Vehicles Application</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.css">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.2/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.2/material.min.js"></script>

<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>

<!-- 2. Configure SystemJS -->
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true},
map: {typescript: 'node_modules/typescript/lib/typescript.js'},
packages: {
'src' : {
defaultExtension: 'ts'
}
}
});
System.import('src/components/boot').then(null, console.error.bind(console));
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>

<!-- 3. Display the application -->

<body>
<div style="width:70%;margin-left:auto;margin-right:auto;">
<vehicles-app>Loading...</vehicles-app>
<div>
</body>
</html>

</html>
Loading

0 comments on commit 82e9161

Please sign in to comment.