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