add display merged files. WIP json display
This commit is contained in:
pakintada@gmail.com
parent
a5f4d48aad
commit
e7bb2639cd
7 changed files with 250 additions and 44 deletions
|
|
@ -5,7 +5,7 @@
|
|||
<div data-te-modal-init ="fixed left-0 top-0 z-100 hidden h-full w-full " *ngIf="showLogModal" class="" id="log-div">
|
||||
<div class="flex relative p-4">
|
||||
<div class="flex-1 rounded-md bg-yellow-200 p-4 m-2 z-50 relative" id="log-dl"></div>
|
||||
<button class="flex-1 rounded-md bg-stone-600 text-white z-50 sticky" id="log-close" (click)="toggleLogModal()"> Close </button>
|
||||
<button class="flex-1 rounded-md bg-stone-600 text-white z-50 sticky" id="log-close" (click)="toggleLogModal('log')"> Close </button>
|
||||
</div>
|
||||
<div class="relative h-[calc(100%-1rem)] w-auto z-50">
|
||||
<div class="flex flex-wrap overflow-y-clip bg-stone-50 p-4" id="log-disp-texts"></div>
|
||||
|
|
@ -14,16 +14,64 @@
|
|||
<!-- <div *ngIf="showLogModal" class="opacity-25 fixed bg-black z-0 inset-0"></div> -->
|
||||
</div>
|
||||
|
||||
|
||||
<!-- display merge div -->
|
||||
|
||||
<div data-te-modal-init ="fixed left-0 top-0 z-100 hidden h-full w-full " *ngIf="showMergeModal" class="" id="merge-json-div">
|
||||
<div class="flex relative p-4">
|
||||
<button class="flex-1 rounded-md bg-stone-600 text-white z-50 sticky" id="merge-json-close" (click)="toggleLogModal('merge')"> Close </button>
|
||||
</div>
|
||||
<div class="relative h-[calc(100%-1rem)] w-auto z-50">
|
||||
<div class="flex flex-wrap overflow-y-clip bg-stone-50 p-4" id="merge-json-disp-texts"></div>
|
||||
</div>
|
||||
|
||||
<!-- <div *ngIf="showLogModal" class="opacity-25 fixed bg-black z-0 inset-0"></div> -->
|
||||
</div>
|
||||
|
||||
<!-- end of display merge div -->
|
||||
|
||||
<div class="flex-1 flex-wrap bg-stone-200 p-8" *ngIf="!showLogModal">
|
||||
<button type="button" class="button bg-stone-400 p-2 rounded m-2 text-black font-bold relative" (click)="refreshLogList()">Refresh 🔃</button>
|
||||
<div class="absolute grid grid-cols-4 gap-4 m-1 auto-cols-min z-30" id="log-dir-list">
|
||||
<div *ngFor="let logfile of displayableLogs">
|
||||
<div class="font-semibold text-center bg-stone-700 p-2 rounded-md text-white">
|
||||
<p>{{logfile}}</p>
|
||||
<button class="button bg-stone-400 p-2 rounded m-2 text-black" type="button" (click)="viewLog(logfile)">View</button>
|
||||
<div class="block p-4 m-4 bg-yellow-200 rounded-md shadow-lg">
|
||||
|
||||
<h3 class="font-bold">Log files</h3>
|
||||
<div class="relative grid grid-cols-4 gap-4 m-1 auto-cols-min z-30" id="log-dir-list">
|
||||
<div *ngFor="let logfile of displayableLogs">
|
||||
<div class="font-semibold text-center bg-stone-700 p-2 rounded-md text-white">
|
||||
<p>{{logfile}}</p>
|
||||
<button class="button bg-stone-400 p-2 rounded m-2 text-black" type="button" (click)="viewLog(logfile)">View</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="block p-4 shadow-lg m-4 bg-yellow-300 rounded-md">
|
||||
<h3 class="font-bold">Merged files</h3>
|
||||
<div class="relative grid grid-cols-4 gap-4 m-1 auto-cols-min z-30" id="log-dir-list">
|
||||
<div *ngFor="let logfile of displayableMergeJson">
|
||||
<!-- <div class="font-semibold text-center bg-stone-700 p-2 rounded-md text-white">
|
||||
<p>{{logfile}}</p>
|
||||
<button class="button bg-stone-400 p-2 rounded m-2 text-black" type="button" (click)="viewLog(logfile)">View</button>
|
||||
</div> -->
|
||||
|
||||
<div class="font-semibold text-center bg-stone-700 p-2 rounded-md text-white">
|
||||
<p>{{logfile}}</p>
|
||||
<button class="button bg-stone-400 p-2 rounded m-2 text-black" type="button" (click)="viewJson(logfile)">View</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,9 @@ import { FetchLogService } from 'src/app/shared/services/fetch-log.service';
|
|||
export class ChangelogComponent {
|
||||
|
||||
public displayableLogs: string[] = [];
|
||||
public displayableMergeJson: string[] = [];
|
||||
showLogModal:boolean = false;
|
||||
showMergeModal:boolean = false;
|
||||
|
||||
constructor(
|
||||
private httpClient: HttpClient,
|
||||
|
|
@ -28,7 +30,7 @@ export class ChangelogComponent {
|
|||
// TODO: Fetch changelog.html
|
||||
// fetch("/changelog")
|
||||
let dirlist: any[] = []
|
||||
this.httpClient.get(environment.api+"/mergelogList", {
|
||||
this.httpClient.get(environment.api+"/listFileInDir/changelog", {
|
||||
withCredentials: true
|
||||
}).subscribe({
|
||||
next: (value) => {
|
||||
|
|
@ -45,7 +47,26 @@ export class ChangelogComponent {
|
|||
console.error('Error fetch json: ',err);
|
||||
}
|
||||
})
|
||||
console.log(dirlist);
|
||||
// console.log(dirlist);
|
||||
|
||||
this.httpClient.get(environment.api+"/listFileInDir/merge", {
|
||||
withCredentials: true
|
||||
}).subscribe({
|
||||
next: (value) => {
|
||||
console.log(value)
|
||||
if(typeof value === "object" && value !== null){
|
||||
if("dirs" in value){
|
||||
console.log("dirs", value)
|
||||
// dirlist.push(...(value as {dirs: unknown[]})["dirs"]);
|
||||
this.displayableMergeJson = value.dirs as any[];
|
||||
}
|
||||
}
|
||||
},
|
||||
error: (err) => {
|
||||
console.error('Error fetch json: ',err);
|
||||
}
|
||||
})
|
||||
|
||||
return dirlist;
|
||||
}
|
||||
|
||||
|
|
@ -70,11 +91,22 @@ export class ChangelogComponent {
|
|||
viewLog(name:string){
|
||||
let cli = new FetchLogService(this.httpClient);
|
||||
this.showLogModal = !this.showLogModal;
|
||||
cli.fetchLogsToDisplay("", true, false, name);
|
||||
cli.fetchLogsToDisplay("", false, false, name);
|
||||
cli.fetchLogsToDisplay("changelog", true, false, name);
|
||||
cli.fetchLogsToDisplay("changelog", false, false, name);
|
||||
}
|
||||
|
||||
toggleLogModal(){
|
||||
this.showLogModal = !this.showLogModal;
|
||||
viewJson(name:string){
|
||||
let cli = new FetchLogService(this.httpClient);
|
||||
this.showMergeModal = !this.showMergeModal;
|
||||
cli.fetchLogsToDisplay("merge", false, true, name);
|
||||
// cli.fetchLogsToDisplay("", false, false, name);
|
||||
}
|
||||
|
||||
toggleLogModal(target:string){
|
||||
if(target == "merge"){
|
||||
this.showMergeModal = !this.showMergeModal;
|
||||
} else {
|
||||
this.showLogModal = !this.showLogModal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@ export class MergeComponent<T> {
|
|||
// fetch log file
|
||||
// this.fetchLogsToDisplay("", false, false);
|
||||
// fetch json
|
||||
this.mergeLogs = new FetchLogService(this.httpClient).fetchLogsToDisplay("", false, true,"");
|
||||
this.mergeLogs = new FetchLogService(this.httpClient).fetchLogsToDisplay("", false, true,this.targets.changelog_path);
|
||||
this.chlog.fetchLoglist();
|
||||
this.chlog.translateLogDirToString();
|
||||
}
|
||||
|
|
@ -87,6 +87,4 @@ export class MergeComponent<T> {
|
|||
},
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,12 +15,7 @@ export class FetchLogService {
|
|||
|
||||
|
||||
public fetchLogsToDisplay(query: string, isDisplayOnly: boolean, requestJson: boolean, filename:string) : Map<string, string> | void{
|
||||
let additionalParams:string = "?query=";
|
||||
if(query != ""){
|
||||
additionalParams += query
|
||||
} else {
|
||||
additionalParams = ""
|
||||
}
|
||||
let additionalParams:string = "?query="+query;
|
||||
|
||||
let jsontarget;
|
||||
|
||||
|
|
@ -35,6 +30,9 @@ export class FetchLogService {
|
|||
}).subscribe({
|
||||
next: (value: any) => {
|
||||
jsontarget = value;
|
||||
if(query == "merge"){
|
||||
document.getElementById("merge-json-disp-texts")!.innerHTML = jsontarget;
|
||||
}
|
||||
},
|
||||
error: (err: any) => {
|
||||
console.error('Error fetch json: ',err);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue