Commit ce9358cb authored by Zéfling's avatar Zéfling 🎨

Show data in the table

parent fd44af2c
...@@ -10,30 +10,16 @@ ...@@ -10,30 +10,16 @@
<div class="arine"> <div class="arine">
<span *ngFor="let nom of page.path">{{nom}}</span> <span *ngFor="let nom of page.path">{{nom}}</span>
</div> </div>
<div *ngIf="page.data.__compat"> <div>
<div *ngIf="page.data.__compat.mdn_url"> <browser-line></browser-line>
<a [href]="page.data.__compat.mdn_url">MDN</a> <element-line *ngIf="page.data.__compat"
</div> [element]="page.data.__compat"
<div *ngIf="page.data.__compat.status"> [name]="page.fileName"></element-line>
<span *ngIf="page.data.__compat.status.deprecated">deprecated</span> <ng-container *ngFor="let data of (page.data | ngForObject)">
<span *ngIf="page.data.__compat.status.experimental">experimental</span> <element-line *ngIf="data.key !== '__compat'"
<span *ngIf="page.data.__compat.status.standard_track">standard</span> [element]="data.value.__compat"
</div> [name]="data.key"></element-line>
<div *ngIf="page.data.__compat.support" </ng-container>
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>
</div> </div>
</ng-container> </ng-container>
\ No newline at end of file
...@@ -31,14 +31,3 @@ div { ...@@ -31,14 +31,3 @@ div {
.arine span:not(:last-child)::after { .arine span:not(:last-child)::after {
content: " » "; 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
...@@ -28,9 +28,4 @@ export class AppComponent { ...@@ -28,9 +28,4 @@ export class AppComponent {
console.log(page); console.log(page);
}); });
} }
isArray(data: any): boolean {
return typeof data === 'object' && data.length;
}
} }
...@@ -5,12 +5,16 @@ import { NgModule } from '@angular/core'; ...@@ -5,12 +5,16 @@ import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; import { AppRoutingModule } from './app-routing.module';
import { AppNavComponent } from './app-nav.component'; import { AppNavComponent } from './app-nav.component';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { BrowserLineComponent } from './browser-line.component';
import { ElementLineComponent } from './element-line.component';
import { NgForObjectPipe } from './ngfor-object'; import { NgForObjectPipe } from './ngfor-object';
@NgModule({ @NgModule({
declarations: [ declarations: [
AppComponent, AppComponent,
AppNavComponent, AppNavComponent,
ElementLineComponent,
BrowserLineComponent,
NgForObjectPipe NgForObjectPipe
], ],
imports: [ imports: [
......
...@@ -3,7 +3,7 @@ import { HttpClient } from '@angular/common/http'; ...@@ -3,7 +3,7 @@ import { HttpClient } from '@angular/common/http';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
import { BcdData, BcdDataType } from './browser-compat-data'; import { BcdData, BcdDataType, BrowserData, BrowserInfos } from './browser-compat-data';
export type DataValue = (string | { [key: string]: DataValue })[]; export type DataValue = (string | { [key: string]: DataValue })[];
export interface ChangePage { path: string[]; fileName: string; data: BcdDataType; } export interface ChangePage { path: string[]; fileName: string; data: BcdDataType; }
...@@ -20,7 +20,7 @@ export class AppService { ...@@ -20,7 +20,7 @@ export class AppService {
isInit = false; isInit = false;
browsers: string[] = []; browsers: { [key: string]: BrowserInfos } = {};
data: { [key: string]: DataValue } = {}; data: { [key: string]: DataValue } = {};
page: BcdData; page: BcdData;
...@@ -58,7 +58,7 @@ export class AppService { ...@@ -58,7 +58,7 @@ export class AppService {
const [, group, path] = test; const [, group, path] = test;
switch (group) { switch (group) {
case 'browsers': case 'browsers':
this.browsers.push(path); this.addBrowsers(group + '/' + path);
break; break;
default: default:
if (!this.data[group]) { if (!this.data[group]) {
...@@ -80,6 +80,21 @@ export class AppService { ...@@ -80,6 +80,21 @@ export class AppService {
} }
} }
addBrowsers(path: string) {
this.http
.get('./assets/browser-compat-data/' + path, { responseType: 'json' })
.subscribe(
(data: BrowserData) => {
for (const i in data.browsers) {
if (data.browsers[i]) {
this.browsers[i] = data.browsers[i];
}
}
}
);
}
show(path: string) { show(path: string) {
this.http this.http
.get('./assets/browser-compat-data' + path, { responseType: 'json' }) .get('./assets/browser-compat-data' + path, { responseType: 'json' })
......
export interface BcdSupport { export interface BcdSupportInfo {
version_added: boolean | string; version_added: boolean | string;
partial_implementation?: boolean; partial_implementation?: boolean;
notes?: string | string[]; notes?: string | string[];
} }
export interface BcdSupport { export interface BcdSupportDesc {
__compat: { mdn_url: string;
mdn_url: string; description?: string;
description?: string; status: {
status: { deprecated: boolean;
deprecated: boolean; experimental: boolean;
experimental: boolean; standard_track: boolean;
standard_track: boolean; };
}; support: {
support: { [key: string]: BcdSupportInfo | BcdSupportInfo[];
[key: string]: BcdSupport | BcdSupport[];
}
}; };
} }
export interface BcdSupport {
__compat: BcdSupportDesc;
}
export interface BcdDataType { export interface BcdDataType {
[key: string]: BcdDataType; [key: string]: BcdDataType;
} }
...@@ -27,3 +29,22 @@ export interface BcdDataType { ...@@ -27,3 +29,22 @@ export interface BcdDataType {
export interface BcdData { export interface BcdData {
[key: string]: BcdDataType & BcdSupport; [key: string]: BcdDataType & BcdSupport;
} }
export interface BrowserInfos {
name: string;
pref_url: string;
releases: {
[key: string]: {
release_date: string,
release_notes: string,
status: string
}
};
}
export interface BrowserData {
browsers: {
[key: string]: BrowserInfos
};
}
<div class="title">
</div>
<div *ngFor="let browser of (browsers | ngForObject)"
class="browser">
<span>{{browser.value.name}}</span>
</div>
\ No newline at end of file
:host {
display:flex;
}
.title {
width: 300px;
}
.browser {
flex: 1;
text-align: center;
flex: 1 1 0%;
border: 1px solid #DDD;
padding: 5px 0;
&:not(:last-child) {
border-right: 0;
}
span {
writing-mode: vertical-lr;
}
}
\ No newline at end of file
import { Component, Input } from '@angular/core';
import { AppService } from './app.service';
import { BcdSupportDesc } from './browser-compat-data';
@Component({
selector: 'browser-line',
templateUrl: './browser-line.component.html',
styleUrls: ['./browser-line.component.scss']
})
export class BrowserLineComponent {
get browsers() {
console.log("browsers >", this.appService.browsers);
return this.appService.browsers;
}
constructor(private appService: AppService) { }
}
<div class="title">
<div>
<span>
{{name}}
</span>
<a *ngIf="element.mdn_url"
class="mdn"
[href]="element.mdn_url">MDN</a>
<span *ngIf="element.status"
class="status">
<span *ngIf="element.status.deprecated"
title="deprecated"
class="deprecated">D</span>
<span *ngIf="element.status.experimental"
title="experimental"
class="experimental">E</span>
<span *ngIf="element.status.standard_track"
title="standard"
class="standard">S</span>
</span>
</div>
<div *ngIf="element.description"
[innerHTML]="element.description"></div>
</div>
<div *ngFor="let browser of browsers"
class="browser"
[class.unknow]="browser.version_added === undefined"
[class.false]="browser.version_added === false">
<span>{{browser.version_added || (browser.version_added === false ? 'false ' : '?')}}</span>
</div>
\ No newline at end of file
:host {
display:flex;
}
.title {
width: 300px;
border: 1px solid #DDD;
border-right: 0;
padding: 5px 0;
}
.status span {
background-color: #000;
color: #FFF;
border-radius: 50%;
line-height: 20px ;
height: 20px;
width: 20px;
margin: 0 3px;
text-align: center;
display: inline-block;
cursor: default;
&.deprecated {
}
&.experimental {
background-color: #cfa631;
}
&.standard {
background-color: #2c783a;
}
}
.mdn {
display: inline-block;
color: #FFF;
background-color: #864b92;
line-height: 20px;
padding: 2px 5px;
border-radius: 8px;
text-decoration: none;
&:hover {
background-color: #c77bd7;
}
}
.browsers {
display:flex;
text-align: center;
}
.browser {
display:flex;
flex-direction: column;
padding: 5px;
text-align: center;
flex: 1 1 0%;
background-color: #80f395;
border: 1px solid #DDD;
padding: 5px 0;
&:not(:last-child) {
border-right: 0;
}
&.false {
background-color: #ffa1a1;
}
&.unknow {
background-color: #d7d7d7;
}
}
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
import { AppService } from './app.service';
import { BcdSupportDesc } from './browser-compat-data';
@Component({
selector: 'element-line',
templateUrl: './element-line.component.html',
styleUrls: ['./element-line.component.scss']
})
export class ElementLineComponent implements OnChanges {
@Input() element: BcdSupportDesc;
@Input() name: string;
browsers = [];
constructor(private appService: AppService) {
}
ngOnChanges(changes: SimpleChanges) {
if (changes['element'].currentValue !== changes['element'].previousValue) {
setTimeout(() => {
const browser = this.appService.browsers;
this.browsers = [];
for (const i in browser) {
if (browser[i]) {
this.browsers.push({
id: i,
...this.element.support[i]
});
}
}
});
}
}
isArray(data: any): boolean {
return typeof data === 'object' && data.length;
}
}
...@@ -4,14 +4,12 @@ ...@@ -4,14 +4,12 @@
"directive-selector": [ "directive-selector": [
true, true,
"attribute", "attribute",
"app",
"camelCase" "camelCase"
], ],
"component-selector": [ "component-selector": [
true, true,
"element", "element",
"app",
"kebab-case" "kebab-case"
] ]
} }
} }
\ No newline at end of file
...@@ -128,4 +128,4 @@ ...@@ -128,4 +128,4 @@
"component-class-suffix": true, "component-class-suffix": true,
"directive-class-suffix": true "directive-class-suffix": true
} }
} }
\ No newline at end of file
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