Commit 0971448d authored by Zéfling's avatar Zéfling 🎨

List files

parent 88c8ca60
Pipeline #13 failed with stages
......@@ -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
<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
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;
}
}
<!--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
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;
});
}
}
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: [],
......
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]);
}
}
}
}
}
}
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;
}
}
This diff is collapsed.
#!/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
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