pakin/Taobin-Recipe-Manager
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add merge log modal

Browse source
This commit is contained in:
pakintada@gmail.com 2023-10-04 16:19:59 +07:00
parent b7b4bca78e
commit 8ccbbc8647
4 changed files with 99 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

72
client/src/app/features/changelog/changelog.component.html
View file

@ -2,6 +2,27 @@
<div class="flex-1 flex-wrap bg-stone-200 p-8" id="log-disp">
<!-- query search -->
<!-- {{fetchLoglist()}} -->
<div *ngFor="let logfile of displayableLogs">
<!-- display log div -->
<input type="checkbox" id="log_modal-{{logfile}}" class="modal-toggle">
<div class="modal">
<div class="modal-box max-w-5xl">
<div class="modal-top">
<!-- Searchbar -->
<!-- Download log -->
<div id="log-dl-{{logfile}}"></div>
</div>
<!-- content -->
<div class="overflow-y-hidden" id="log-disp-texts-{{logfile}}"></div>
</div>
<div class="modal-backdrop">
<label for="log_modal-{{logfile}}">Close</label>
</div>
</div>
</div>
<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>
@ -32,14 +53,29 @@
<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="block p-4 m-4 bg-yellow-200 rounded-md shadow-lg">
<div class="card shadow-xl">
<!-- Total logs -->
<div class="card-body bg-stone-100 text-primary-content">
<h3 class="card-title"> How to use </h3>
<p> Click on "Load", if the file does not have any error, the "View" button will appear and you can view the log file. </p>
</div>
<div class="card-body bg-stone-300">
<h3 class="card-title">Generated 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="card bg-stone-400 text-center" id="{{logfile}}">
<div class="card-body p-2">
<p class="font-semibold">{{logfile}}</p>
<div class="card-actions flex flex-row" id="load_log_action-{{logfile}}">
<button class="btn btn-primary flex-1" type="button" (click)="viewLog(logfile)" id="load_log_btn-{{logfile}}">Load</button>
</div>
</div>
</div>
<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>
@ -48,28 +84,6 @@
</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>

2
client/src/app/features/changelog/changelog.component.ts
View file

@ -96,7 +96,7 @@ export class ChangelogComponent {
viewLog(name: string) {
let cli = new FetchLogService(this.httpClient);
this.showLogModal = !this.showLogModal;
// this.showLogModal = !this.showLogModal;
cli.fetchLogsToDisplay('changelog', true, false, name);
cli.fetchLogsToDisplay('changelog', false, false, name);
}