WIP modal

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

@@ -1,21 +1,36 @@
-<div class="flex">
+<div class="flex border rounded-md">
   <div class="flex-1 flex-wrap bg-stone-200 p-8" id="log-disp">
     <!-- query search -->
     <!-- {{fetchLoglist()}} -->
-    <button type="button" class="button bg-stone-400 p-2 rounded m-2 text-black font-bold" (click)="refreshLogList()">Refresh 🔃</button>
-    <div class="grid grid-cols-4 gap-4 m-1 auto-cols-min" 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 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>
+      </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>
+      </div>
+
+      <!-- <div *ngIf="showLogModal" class="opacity-25 fixed bg-black z-0 inset-0"></div> -->
+    </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>
         </div>
       </div>
     </div>
-    <div id="log-dl"></div>
-    <p class="flex flex-wrap" id="log-disp-texts"></p>
+
+
   </div>
   <!-- Temporary remove log -->
   <div class="flex-3 sticky top-0 bg-slate-700 h-screen justify-centers items-center">
     <app-merge></app-merge>
   </div>
+
 </div>

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

@@ -15,6 +15,7 @@ import { FetchLogService } from 'src/app/shared/services/fetch-log.service';
 export class ChangelogComponent {
 
   public displayableLogs: string[] = [];
+  showLogModal:boolean = false;
 
   constructor(
     private httpClient: HttpClient,
@@ -67,6 +68,13 @@ export class ChangelogComponent {
   }
 
   viewLog(name:string){
-    new FetchLogService(this.httpClient).fetchLogsToDisplay("", true, false, name);
+    let cli = new FetchLogService(this.httpClient);
+    this.showLogModal = !this.showLogModal;
+    cli.fetchLogsToDisplay("", true, false, name);
+    cli.fetchLogsToDisplay("", false, false, name);
+  }
+
+  toggleLogModal(){
+    this.showLogModal = !this.showLogModal;
   }
 }

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

@@ -7,6 +7,8 @@ import { environment } from 'src/environments/environment.development';
 })
 export class FetchLogService {
 
+  showModal: boolean = false
+
   constructor(
     private httpClient: HttpClient
   ) {}
@@ -54,9 +56,10 @@ export class FetchLogService {
             const url = window.URL.createObjectURL(blob);
             const a = document.createElement('a');
             a.href = url;
-            a.download = 'logfile.log';
-            a.innerText = "Click here to download as `.log` file";
+            a.download = filename+'.log';
+            a.innerText = "Download "+filename+".log";
             if(isDisplayOnly){
+              this.showModal = !this.showModal;
               blob.text().then(v => document.getElementById("log-disp-texts")!.innerHTML = v);
             } else {
 

server/python_api/merge_recipe.py

@@ -102,6 +102,27 @@ def create_map(events_action: str, log: str, additional=[]) -> str:
 # 3 - changefile = track log
 # 4 - debug = enable debug
 def merge(args):
+    """
+    Merge the 2 json files together with input of target paths, output path and changefile
+    
+    :param args: A list of arguments. list[]
+    :type args: list
+        where each element position;
+            0 - master_path = master.json / to be merged
+
+            1 - dev_path = dev.json / to merge into another
+
+            2 - outfile = merged json output 
+
+            3 - changefile = track log (json) --- generate by merge to html,log,json
+
+            4 - debug = enable debug
+            
+            5 - requester = requester's name sent by client
+
+    :return: None
+    :rtype: None
+    """
     print("ARGS: => ",args)
     
     master_path = args[0]; dev_path = args[1]; outfile_path = args[2]; changefile_path = args[3]; 
@@ -225,7 +246,7 @@ def merge(args):
         for event in events:
             # Create div
             # print("Log as list: ",str(event).split("\t"))
-            html_string = "\t<div class=\"flex\">\n"
+            html_string = "\t<div class=\"flex p-4 bg-stone-300 rounded m-2\">\n"
             event_fraction = str(event).split("\t")
             for i in event_fraction:
                 if i != "" and i != "\n" and i != "---":