List files

.gitignore

@@ -37,3 +37,6 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+# browser-compat-data
+src/assets/browser-compat-data
\ No newline at end of file

src/app/app-nav.component.html

+<ul>
+  <li *ngFor="let line of folders">
+    <div>
+      {{line.name}}
+    </div>
+    <app-nav [path]="path + '/' + line.name"
+             [data]="line.data"></app-nav>
+  </li>
+  <li *ngFor="let line of files"
+      (click)="action(path + '/' + line.fileName, line.name)">
+    {{line.name}}
+  </li>
+</ul>
\ No newline at end of file

src/app/app-nav.component.ts

+import { Component, Input } from '@angular/core';
+import { DataValue } from './app.service';
+
+@Component({
+  selector: 'app-nav',
+  templateUrl: './app-nav.component.html',
+  styleUrls: ['./app-nav.component.scss']
+})
+export class AppNavComponent {
+
+  @Input() path = '';
+  @Input() data: DataValue;
+
+  get folders(): { name: string; data: DataValue; }[] {
+    const list = [];
+    for (const i in this.data) {
+      if (i.match(/[^\d]+/)) {
+        list.push({
+          name: i,
+          data: this.data[i]
+        });
+      }
+    }
+
+    return list;
+  }
+
+  get files(): { fileName: string; name: string; }[] {
+    const list = [];
+    for (const i in this.data) {
+      if (i.match(/[\d]+/)) {
+        list.push({
+          fileName: this.data[i],
+          name: (this.data[i] as string).replace('.json', '')
+        });
+      }
+    }
+
+    return list;
+  }
+
+
+}

src/app/app.component.html

-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
-
-<router-outlet></router-outlet>
+<ng-container *ngIf="isInit">
+  <nav>
+    <app-nav [data]="data">
+    </app-nav>
+  </nav>
+  <div>
+    <router-outlet></router-outlet>
+  </div>
+</ng-container>
\ No newline at end of file

src/app/app.component.ts

 import { Component } from '@angular/core';
+import { AppService, DataValue } from './app.service';
 
 @Component({
   selector: 'app-root',
@@ -6,5 +7,19 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
+  version = '0.1.0';
   title = 'web-table';
+
+  get data(): { [key: string]: DataValue } {
+    return this.appService.data;
+  }
+
+  isInit = false;
+
+  constructor(private appService: AppService) {
+    appService.onData.subscribe(() => {
+      this.isInit = true;
+    });
+  }
+
 }

src/app/app.module.ts

 import { BrowserModule } from '@angular/platform-browser';
+import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
+import { AppNavComponent } from './app-nav.component';
 import { AppComponent } from './app.component';
+import { NgForObjectPipe } from './ngfor-object';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    AppNavComponent,
+    NgForObjectPipe
   ],
   imports: [
     BrowserModule,
+    HttpClientModule,
     AppRoutingModule
   ],
   providers: [],

src/app/app.service.ts

+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { Subject } from 'rxjs';
+
+export type DataValue = (string | { [key: string]: DataValue })[];
+
+const pattern = /\.\/([^\/]+)\/(.*)/;
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AppService {
+
+  readonly onData = new Subject<void>();
+
+  isInit = false;
+
+  browsers: string[] = [];
+  data: { [key: string]: DataValue } = {};
+
+  constructor(
+    private http: HttpClient
+  ) {
+    this.init();
+  }
+
+  init() {
+    if (!this.isInit) {
+      this.http
+        .get('./assets/browser-conpat-date.txt', { responseType: 'text' })
+        .subscribe(
+          (data: string) => {
+            this.parselist(data);
+          },
+          () => { },
+          () => {
+            this.isInit = true;
+            this.onData.next();
+          });
+    }
+  }
+
+  parselist(data: string) {
+    const list = data.split('\n');
+    list.sort();
+
+    // browser infos
+    for (const line of list) {
+      if (line) {
+        const test = line.match(pattern);
+        if (test) {
+          const [, group, path] = test;
+          switch (group) {
+            case 'browsers':
+              this.browsers.push(path);
+              break;
+            case '.vscode':
+            case 'schemas':
+            case 'package.json':
+            case 'test':
+              break;
+            default:
+              if (!this.data[group]) {
+                this.data[group] = [];
+              }
+              let step = this.data[group];
+              const frag = path.split('/');
+              const l = frag.length - 1;
+              for (let i = 0; i < l; i++) {
+                if (!step[frag[i]]) {
+                  step[frag[i]] = [];
+                }
+                step = step[frag[i]];
+              }
+              step.push(frag[l]);
+          }
+        }
+      }
+    }
+  }
+}

src/app/ngfor-object.ts

+import { PipeTransform, Pipe } from '@angular/core';
+
+@Pipe({ name: 'ngForObject' })
+export class NgForObjectPipe implements PipeTransform {
+
+    transform(data: any): { key: string, value: any }[] {
+        if (!data) {
+            return null;
+        }
+        const keys: { key: string, value: any }[] = [];
+        for (const key in data) {
+            if (data[key]) {
+                keys.push({ key: key, value: data[key] });
+            }
+        }
+        console.log('<<<', keys);
+        return keys;
+    }
+
+}

src/assets/update.sh

+
+#!/bin/bash
+
+cd browser-compat-data
+# find -L **/**.json > '../browser-conpat-date.txt'
+find . -type f \( -iname "*.json" \) > '../browser-conpat-date.txt'
\ No newline at end of file