add merge log modal
This commit is contained in:
pakintada@gmail.com
parent
b7b4bca78e
commit
8ccbbc8647
4 changed files with 99 additions and 35 deletions
|
|
@ -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">
|
||||
|
||||
<h3 class="font-bold">Log files</h3>
|
||||
<!-- 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="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="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>
|
||||
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -58,15 +58,38 @@ export class FetchLogService {
|
|||
a.innerText = "Download "+filename+".log";
|
||||
if(isDisplayOnly){
|
||||
this.showModal = !this.showModal;
|
||||
blob.text().then(v => document.getElementById("log-disp-texts")!.innerHTML = v);
|
||||
blob.text().then(v => {
|
||||
let disp_log = document.getElementById("log-disp-texts-"+filename)!;
|
||||
disp_log.innerHTML = v;
|
||||
let target = disp_log.getElementsByTagName('input');
|
||||
target[0].remove();
|
||||
});
|
||||
// create label modall
|
||||
let l_t = document.getElementById("log_modal_label-"+filename);
|
||||
console.log(l_t);
|
||||
if(l_t !== null){
|
||||
l_t!.remove();
|
||||
}
|
||||
const l = document.createElement('label');
|
||||
l.htmlFor = "log_modal-"+filename;
|
||||
l.className = "btn flex-1";
|
||||
l.innerText = "View";
|
||||
l.id = "log_modal_label-"+filename;
|
||||
document.getElementById("load_log_action-"+filename)!.appendChild(l);
|
||||
|
||||
// change text to loaded after download html
|
||||
let load_log_btn = document.getElementById("load_log_btn-"+filename)!;
|
||||
load_log_btn.innerText = "Loaded";
|
||||
|
||||
|
||||
} else {
|
||||
|
||||
while(document.getElementById("log-dl")?.firstChild){
|
||||
document.getElementById("log-dl")?.removeChild(document.getElementById("log-dl")!.firstChild!);
|
||||
while(document.getElementById("log-dl-"+filename)?.firstChild){
|
||||
document.getElementById("log-dl-"+filename)?.removeChild(document.getElementById("log-dl-"+filename)!.firstChild!);
|
||||
}
|
||||
|
||||
document.getElementById("log-dl")?.appendChild(a);
|
||||
document.getElementById("log-dl")!.className = "bg-yellow-500 rounded p-2 sticky top-0";
|
||||
document.getElementById("log-dl-"+filename)?.appendChild(a);
|
||||
document.getElementById("log-dl-"+filename)!.className = "btn";
|
||||
}
|
||||
},
|
||||
error: (err: any) => {
|
||||
|
|
|
|||
|
|
@ -13,6 +13,33 @@
|
|||
/> -->
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
// Context from Function d:/CodeProjects/recipe_manager/taobin_recipe_manager/server/python_api/merge_recipe.py:searchFnForHtml
|
||||
function searchLog(){
|
||||
var input, filter, logBody, logRow, logP, logContent;
|
||||
input = document.getElementById("searchInput");
|
||||
filter = input.value;
|
||||
logBody = document.getElementById("logBody");
|
||||
logRow = logBody.getElementsByTagName("div");
|
||||
|
||||
|
||||
for(let i = 0; i < logRow.length; i++){
|
||||
p = logRow[i].getElementsByTagName("p");
|
||||
console.log("Total P = ", logRow[i].getElementsByTagName("p").length);
|
||||
|
||||
for(let p_i = 0; p_i < p.length; p_i++){
|
||||
pcontent = p[p_i].textContent || p[p_i].innerText;
|
||||
|
||||
if(pcontent.includes(filter)){
|
||||
logRow[i].style.display = "";
|
||||
break;
|
||||
} else {
|
||||
logRow[i].style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue