add merge log modal

client/src/app/features/changelog/changelog.component.html

@@ -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>

client/src/app/features/changelog/changelog.component.ts

@@ -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);
   }

client/src/app/shared/services/fetch-log.service.ts

@@ -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) => {

client/src/index.html

@@ -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>