Commit 69d07f09 authored by Zéfling's avatar Zéfling 🎨

Show data for tests

parent 14bad0ba
......@@ -8,10 +8,7 @@ ul {
font-weight: bold;
}
.file {
&:hover {
background-color: antiquewhite;
cursor: pointer;
}
.file:hover {
background-color: antiquewhite;
cursor: pointer;
}
\ No newline at end of file
......@@ -3,10 +3,37 @@
<app-nav [data]="data">
</app-nav>
</nav>
<h1>
Section
<h1 *ngIf="page">
<span>{{page.fileName}}</span>
</h1>
<div>
<router-outlet></router-outlet>
<div *ngIf="page">
<div class="arine">
<span *ngFor="let nom of page.path">{{nom}}</span>
</div>
<div *ngIf="page.data.__compat">
<div *ngIf="page.data.__compat.mdn_url">
<a [href]="page.data.__compat.mdn_url">MDN</a>
</div>
<div *ngIf="page.data.__compat.status">
<span *ngIf="page.data.__compat.status.deprecated">deprecated</span>
<span *ngIf="page.data.__compat.status.experimental">experimental</span>
<span *ngIf="page.data.__compat.status.standard_track">standard</span>
</div>
<div *ngIf="page.data.__compat.support"
class="browsers">
<div *ngFor="let browser of (page.data.__compat.support | ngForObject)"
class="browser">
<span>{{browser.key}}</span>
<ng-container *ngIf="isArray(browser.value); else one">
<span *ngFor="let value of browser.value">
{{value.version_added || (value.version_added ? 'yes' : 'no')}}
</span>
</ng-container>
<ng-template #one>
<span *ngIf="browser.value">{{browser.value.version_added || (value.version_added ? 'yes' : 'no')}}</span>
</ng-template>
</div>
</div>
</div>
</div>
</ng-container>
\ No newline at end of file
......@@ -10,10 +10,12 @@ app-root {
display: grid;
grid-template: [header-left] "nav title" auto [header-right]
[footer-left] "nav page" 1fr [footer-right] / 350px 1fr;
height: 100%;
}
nav {
grid-area: nav;
overflow: auto;
}
h1 {
......@@ -24,4 +26,19 @@ h1 {
div {
grid-area: page;
}
.arine span:not(:last-child)::after {
content: " » ";
}
.browsers {
display:flex;
}
.browser {
display:flex;
flex-direction: column;
padding: 5px;
text-align: center;
flex: 1 1 auto;
}
\ No newline at end of file
import { Component, ViewEncapsulation } from '@angular/core';
import { AppService, DataValue } from './app.service';
import { AppService, DataValue, ChangePage } from './app.service';
@Component({
selector: 'app-root',
......@@ -11,6 +11,8 @@ export class AppComponent {
version = '0.1.0';
title = 'web-table';
page: ChangePage;
get data(): { [key: string]: DataValue } {
return this.appService.data;
}
......@@ -21,6 +23,14 @@ export class AppComponent {
appService.onData.subscribe(() => {
this.isInit = true;
});
appService.onChangePage.subscribe((page: ChangePage) => {
this.page = page;
console.log(page);
});
}
isArray(data: any): boolean {
return typeof data === 'object' && data.length;
}
}
......@@ -3,9 +3,10 @@ import { HttpClient } from '@angular/common/http';
import { Subject } from 'rxjs';
import { BcdData } from './browser-compat-data';
import { BcdData, BcdDataType } from './browser-compat-data';
export type DataValue = (string | { [key: string]: DataValue })[];
export interface ChangePage { path: string[]; fileName: string; data: BcdDataType; }
const pattern = /\.\/([^\/]+)\/(.*)/;
......@@ -15,7 +16,7 @@ const pattern = /\.\/([^\/]+)\/(.*)/;
export class AppService {
readonly onData = new Subject<void>();
readonly changePage = new Subject<void>();
readonly onChangePage = new Subject<ChangePage>();
isInit = false;
......@@ -89,12 +90,19 @@ export class AppService {
.get('./assets/browser-compat-data' + path, { responseType: 'json' })
.subscribe(
(data: BcdData) => {
console.log(data);
this.page = data;
},
() => { },
() => {
this.changePage.next();
});
const frag = path.split('/');
frag.shift();
const fileName = frag.pop().replace(/\.json/g, '');
let part: any = data;
for (let i = 0; i < frag.length; i++) {
part = part[frag[i]];
}
this.onChangePage.next({
path: frag,
fileName: fileName.replace(/_/g, ' '),
data: part[fileName]
});
}
);
}
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment