Commit 4af64328 authored by mdsecurity's avatar mdsecurity
Browse files

UGE update

The dataProviderService has been updated so data travels around the application properly
the place cards now talk with the context window to display information
parent df2bb6d1
......@@ -3,7 +3,7 @@ root = true
[*]
charset = utf-8
indent_style = space
indent_style = tabs
indent_size = 4
insert_final_newline = true
trim_trailing_whitespace = true
......
This diff is collapsed.
......@@ -4,30 +4,30 @@ import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
});
});
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
});
});
it('should create the app', async(() => {
let fixture = TestBed.createComponent(AppComponent);
let app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
}));
it('should create the app', async(() => {
let fixture = TestBed.createComponent(AppComponent);
let app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
}));
it(`should have as title 'app works!'`, async(() => {
let fixture = TestBed.createComponent(AppComponent);
let app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('app works!');
}));
it(`should have as title 'app works!'`, async(() => {
let fixture = TestBed.createComponent(AppComponent);
let app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('app works!');
}));
it('should render title in a h1 tag', async(() => {
let fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
let compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain('app works!');
}));
it('should render title in a h1 tag', async(() => {
let fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
let compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain('app works!');
}));
});
import { Component } from '@angular/core';
import { DataProviderService } from './data-provider.service';
import { Place } from './place';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
providers: [DataProviderService]
})
export class AppComponent {
title: string = 'What\'s Open';
}
......@@ -16,27 +16,26 @@ import { AreaComponent } from './place-window/area/area.component';
import { FilterBarComponent } from './filter-bar/filter-bar.component';
import { ShowHideArrowComponent } from './context-bar/show-hide-arrow/show-hide-arrow.component';
@NgModule({
declarations: [
AppComponent,
NavBarComponent,
ContextBarComponent,
TimeRangeComponent,
TimeRangeBarComponent,
MapComponent,
SafeUrlPipe,
PlaceWindowComponent,
PlaceCardComponent,
AreaComponent,
FilterBarComponent,
FilterBarComponent,
ShowHideArrowComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
declarations: [
AppComponent,
NavBarComponent,
ContextBarComponent,
TimeRangeComponent,
TimeRangeBarComponent,
MapComponent,
SafeUrlPipe,
PlaceWindowComponent,
PlaceCardComponent,
AreaComponent,
FilterBarComponent,
ShowHideArrowComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
<div class="context-bar-button-container">
<!--<button class="show-hide-button"(click)="show=!show">Click Me</button>-->
<app-show-hide-arrow class="show-hide-button" [isRight]='true' (change)="show = $event"></app-show-hide-arrow>
<button (click)="tempf()">Click</button>
<div [ngClass]="(show)?'light-card context-bar-open' : 'light-card context-bar-closed'">
<div class="context-bar-header">
<img class="image" src="../../assets/BKing.jpg">
<div class="content-bar-title">Burger King</div>
</div>
<hr>
<div>
<div class="info">
<div class="column">
<div class="info-block">
<div class="info-header">Location</div>
<div class="info-text">The Johnson Center</div>
</div>
<div class="spacer"></div>
<div class="info-block">
<div class="info-header">Mobile</div>
<div class="info-text">+44 (0) 7887-665-588</div>
</div>
</div>
<div class="column">
<div class="info-block">
<div class="info-header">Menu</div>
<div class="info-text"><a>bk.com</a></div>
<!--<button class="show-hide-button"(click)="show=!show">Click Me</button>-->
<app-show-hide-arrow class="show-hide-button" [isRight]='true' (change)="show = $event"></app-show-hide-arrow>
<button (click)="tempf()">Click</button>
<div [ngClass]="(show)?'light-card context-bar-open' : 'light-card context-bar-closed'">
<div class="context-bar-header">
<img class="image" src="../../assets/BKing.jpg">
<div class="content-bar-title">{{place.name}}</div>
</div>
<hr>
<div>
<div class="info">
<div class="column">
<div class="info-block">
<div class="info-header">Location</div>
<div class="info-text">{{place.location}}</div>
</div>
<div class="spacer"></div>
<div class="info-block">
<div class="info-header">Mobile</div>
<div class="info-text">+44 (0) 7887-665-588</div>
</div>
</div>
<div class="spacer"></div>
<div class="info-block ">
<div class="info-header">Tags</div>
<div class="tag-container">
<div class="tag">
<div class="tag-text">h</div>
</div>
<div class="tag">
<div class="tag-text">Som</div>
</div>
<div class="tag">
<div class="tag-text">Somethg</div>
</div>
<div class="tag">
<div class="tag-text">ng</div>
</div>
<div class="tag">
<div class="tag-text">Somhing</div>
<div class="column">
<div class="info-block">
<div class="info-header">Menu</div>
<div class="info-text"><a>bk.com</a></div>
</div>
<div class="spacer"></div>
<div class="info-block ">
<div class="info-header">Tags</div>
<div class="tag-container">
<div class="tag">
<div class="tag-text">h</div>
</div>
<div class="tag">
<div class="tag-text">Som</div>
</div>
<div class="tag">
<div class="tag-text">Somethg</div>
</div>
<div class="tag">
<div class="tag-text">ng</div>
</div>
<div class="tag">
<div class="tag-text">Somhing</div>
</div>
</div>
</div>
</div>
</div>
<!--<hr>-->
<app-time-range [place]="place"></app-time-range>
<!--<hr>-->
<app-map></app-map>
</div>
<!--<hr>-->
<app-time-range></app-time-range>
<!--<hr>-->
<app-map></app-map>
</div>
</div>
\ No newline at end of file
import { Component, OnInit } from '@angular/core';
import { DataProviderService } from '../data-provider.service'
import { DataProviderService } from '../data-provider.service';
import { Place } from '../place';
@Component({
selector: 'app-context-bar',
templateUrl: './context-bar.component.html',
styleUrls: ['./context-bar.component.scss'],
providers: [DataProviderService]
selector: 'app-context-bar',
templateUrl: './context-bar.component.html',
styleUrls: ['./context-bar.component.scss']
})
export class ContextBarComponent implements OnInit {
show: boolean = true;
data: Place[];
error: any;
constructor(private dataProvider: DataProviderService) { }
show = true;
place: Place = new Place();
error: any;
constructor(private dataProvider: DataProviderService) { }
ngOnInit() {
this.dataProvider.getContext().subscribe(
(place) => {
this.place = place;
}
);
}
tempf() {
ngOnInit() {
this.dataProvider.getFacilities().subscribe(
data => { this.data = data },
error => { this.error = error }
)
}
}
}
......@@ -69,12 +69,12 @@
<rect id="ShadowEnd" fill="url(#radialGradient-6)" [attr.x]="endTimeTextX" y="4" width="35" height="13"></rect>
<text font-family="HelveticaNeue, Helvetica Neue" font-size="8" font-weight="normal" fill="#FFFFFF">
<tspan [attr.x]="endTimeTextX" y="13">{{endTime | date:'shortTime'}}</tspan>
<tspan [attr.x]="endTimeTextX" y="13">{{day.end_time.toString() }}</tspan>
</text>
<rect id="ShadowStart" fill="url(#radialGradient-6)" [attr.x]="this.startTimeTextX" y="4" width="35" height="13"></rect>
<text font-family="HelveticaNeue, Helvetica Neue" font-size="8" font-weight="normal" fill="#FFFFFF">
<tspan [attr.x]="this.startTimeTextX" y="13">{{startTime | date:'shortTime'}}</tspan>
<tspan [attr.x]="this.startTimeTextX" y="13">{{day.start_time.toString()}}</tspan>
</text>
</g>
......
import { Component, OnInit, Input } from '@angular/core';
import { Place } from '../../../place';
import { Time } from '../../../time';
import { Day } from '../../../day';
@Component({
selector: 'app-time-range-bar',
templateUrl: './time-range-bar.component.html',
styleUrls: ['./time-range-bar.component.scss']
selector: 'app-time-range-bar',
templateUrl: './time-range-bar.component.html',
styleUrls: ['./time-range-bar.component.scss']
})
export class TimeRangeBarComponent implements OnInit {
@Input() startTime: Date;
@Input() endTime: Date;
// blue bar x location and width
barX: number;
barWidth: number;
// width between startTimeX and barX
barStartWidth: number = 3;
// width between the end of the bar and the endTextX location
barEndWidth: number = 38;
// text x locations
startTimeTextX: number;
endTimeTextX: number;
dayOfWeek: string;
week: string[] = ["SUN","MON","TUE", "WED", "THU", "FRI", "SAT"];
constructor() { }
ngOnInit() {
// let time1 = new Date();
// time1.setHours(9);
// let time2 = new Date();
// time2.setHours(18);
// this.startTime = time1;
// this.endTime = time2;
this.barX = this.timeToPixel(this.startTime);
this.barWidth = this.timeToPixel(this.endTime) - this.barX;
this.startTimeTextX = this.barX + this.barStartWidth;
this.endTimeTextX = this.barWidth + this.barX - this.barEndWidth;
this.dayOfWeek = this.week[this.startTime.getDay()];
}
timeToPixel(date: Date): number {
// this equals 304(the length of the ticks) divided by the amount of minutes in a day
let pixelPerMinute = 0.2111111111111111;
return 40 + ((date.getHours() * 60 + date.getMinutes()) * pixelPerMinute);
}
@Input() day: Day;
// blue bar x location and width
barX: number;
barWidth: number;
// width between startTimeX and barX
barStartWidth: number = 3;
// width between the end of the bar and the endTextX location
barEndWidth: number = 38;
// text x locations
startTimeTextX: number;
endTimeTextX: number;
dayOfWeek: string;
week: string[] = ["MON", "TUE", "WED", "THU", "FRI", "SAT","SUN"];
constructor() { }
ngOnInit() {
this.barX = this.timeToPixel(this.day.start_time);
this.barWidth = this.timeToPixel(this.day.end_time) - this.barX;
this.startTimeTextX = this.barX + this.barStartWidth;
this.endTimeTextX = this.barWidth + this.barX - this.barEndWidth;
this.dayOfWeek = this.week[this.day.start_day];
}
timeToPixel(time: Time): number {
// this equals 304(the length of the ticks) divided by the amount of minutes in a day
let pixelPerMinute = 0.2111111111111111;
return 40 + ((time.hour * 60 + time.minute) * pixelPerMinute);
}
}
<div class="time-range-bar-container">
<app-time-range-bar [startTime]="weekStartTimes[0]" [endTime]="weekEndTimes[0]"></app-time-range-bar>
<app-time-range-bar [startTime]="weekStartTimes[1]" [endTime]="weekEndTimes[1]"></app-time-range-bar>
<app-time-range-bar [startTime]="weekStartTimes[2]" [endTime]="weekEndTimes[2]"></app-time-range-bar>
<app-time-range-bar [startTime]="weekStartTimes[3]" [endTime]="weekEndTimes[3]"></app-time-range-bar>
<app-time-range-bar [startTime]="weekStartTimes[4]" [endTime]="weekEndTimes[4]"></app-time-range-bar>
<app-time-range-bar [startTime]="weekStartTimes[5]" [endTime]="weekEndTimes[5]"></app-time-range-bar>
<app-time-range-bar [startTime]="weekStartTimes[6]" [endTime]="weekEndTimes[6]"></app-time-range-bar>
</div>
<div *ngFor="let day of days; let i = index;">
<app-time-range-bar [day]="days[i]"></app-time-range-bar>
</div>
......@@ -6,23 +6,23 @@ import { DebugElement } from '@angular/core';
import { TimeRangeComponent } from './time-range.component';
describe('TimeRangeComponent', () => {
let component: TimeRangeComponent;
let fixture: ComponentFixture<TimeRangeComponent>;
let component: TimeRangeComponent;
let fixture: ComponentFixture<TimeRangeComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ TimeRangeComponent ]
})
.compileComponents();
}));
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [TimeRangeComponent]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TimeRangeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
beforeEach(() => {
fixture = TestBed.createComponent(TimeRangeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, Input, SimpleChange } from '@angular/core';
import { Place } from '../../place';
import { Day } from '../../day';
import { DataProviderService } from '../../data-provider.service';
@Component({
selector: 'app-time-range',
templateUrl: './time-range.component.html',
styleUrls: ['./time-range.component.scss']
selector: 'app-time-range',
templateUrl: './time-range.component.html',
styleUrls: ['./time-range.component.scss']
})
export class TimeRangeComponent implements OnInit {
weekStartTimes: Date[] = [];
weekEndTimes: Date[] = [];
constructor() {
}
ngOnInit() {
let t1 = new Date();
let t2 = new Date();
// this.weekStartTimes = [t1, t1, t1, t1, t1, t1, t1];
// this.weekEndTimes = [t2, t2, t2, t2, t2, t2, t2];
for (let i = 0; i < 7; i++) {
t1 = new Date();
t2 = new Date();
t1.setDate(5 + Math.random() * 6);
t1.setHours((Math.random() * 10) + 1);
t2.setHours((Math.random() * 10) + 13);
this.weekStartTimes.push(t1);
this.weekEndTimes.push(t2);
}
}
@Input() place: Place = new Place();
days: Day[] = [];
// weekEndTimes: Date[] = [];
constructor(private dataProvider: DataProviderService) {
}
ngOnInit() {
// console.log(this.place);
// for (let i = 0; i < this.place.main_schedule_times.length; i++) {
// for (let e = 0; e < this.place.main_schedule_times.length; e++) {
// if (this.place.main_schedule_times[e].start_day === i) {
// this.days.push(this.place.main_schedule_times[e]);
// }
// }
// }
}
ngOnChanges(change: SimpleChange) {
console.log('changed');
this.days = [];
for (let i = 0; i < this.place.main_schedule_times.length; i++) {
for (let e = 0; e < this.place.main_schedule_times.length; e++) {
if (this.place.main_schedule_times[e].start_day === i) {
this.days.push(this.place.main_schedule_times[e]);
}
}
}
}
}
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { MockData } from './mock-data'
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import { Place } from './place';
import { Day } from './day';
......@@ -9,78 +9,100 @@ import { Time } from './time';
// Operators
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/catch';
//import 'rxjs/add/operator/debounceTime';
//mport 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/share';
import 'rxjs/add/operator/map';
//import 'rxjs/add/operator/switchMap';
//import 'rxjs/add/operator/toPromise';
@Injectable()
export class DataProviderService {
// facilities: Observable<Place[]>;
error: any;
private Url = 'https://whatsopen.gmu.edu/api/facilities/'; // URL to web API
// facilities: Observable<Place[]>;
private contextPlace: Place = new Place();
places: Place[];
placesObs: Observable<any>;
private contextSubj: Subject<Place> = new Subject<Place>();
private Url = 'https://whatsopen.gmu.edu/api/facilities/'; // URL to web API
constructor(private http: Http) { }
getFacilities(): Observable<Place[]> {
return this.http.get(this.Url)
.map(this.extractData)
.catch(this.handleError);
}
private extractData(res: Response): Place[] {
let parseTime = function(time: string):Time{
const timeArr = time.split(':');
const hour = Number(timeArr[0]);
const minute = Number(timeArr[1]);
const second = Number(timeArr[2]);
return new Time(hour,minute,second);
}
constructor(private http: Http) { }
let places: Place[] = [];
let data = res.json();
for (let i = 0; i < data.length; i++) {
let main_schedule_times: Day[] = [];
for (let e = 0; e < data[i].main_schedule.open_times.length; e++) {
let jsonDay = data[i].main_schedule.open_times[e];
getFacilities(): Observable<Place[]> {
if (this.places) {
return Observable.of(this.places);
} else if (this.placesObs) {
return this.placesObs;
} else {
this.placesObs = this.http.get(this.Url)
.map((data) => {
this.placesObs = null;
this.places = this.extractData(data);
this.contextPlace = this.places[0];