Add sample display logs from server.WIP

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

@@ -1,9 +1,10 @@
 <div class="flex">
-  <div class="flex-1 bg-slate-400 h-screen p-8">
-    <p> Display log here !</p>
+  <div class="flex-1 flex-wrap bg-stone-200 p-8" id="log-disp">
+    <div id="log-dl"></div>
+    <p class="flex flex-wrap" id="log-disp-texts"> Display log here !</p>
   </div>
   <!-- Temporary remove log -->
-  <div class="flex-3 bg-slate-700 h-screen justify-centers items-center">
+  <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/merge/merge.component.ts

@@ -4,6 +4,8 @@ import { CommonModule } from '@angular/common';
 import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { MergeServiceService } from './merge-service.service';
 import { HttpClient } from '@angular/common/http';
+import { environment } from 'src/environments/environment.development';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-merge',
@@ -12,7 +14,7 @@ import { HttpClient } from '@angular/common/http';
   templateUrl: './merge.component.html',
   styleUrls: ['./merge.component.css']
 })
-export class MergeComponent {
+export class MergeComponent<T> {
 
   exceptionValues = [0, null, undefined]
 
@@ -45,7 +47,7 @@ export class MergeComponent {
 
     // TODO: Fetch merge. Modify this to websocket
 
-    this.httpClient.post("http://localhost:8080/merge", {
+    this.httpClient.post<T>(environment.api+"/merge", {
       master: this.targets.master_version,
       dev: this.targets.dev_version,
       output: this.targets.output_path,
@@ -53,8 +55,15 @@ export class MergeComponent {
     }, {
       withCredentials: true
     }).subscribe({
-      next(value) {
+      next: (value: T) => {
           console.log(value)
+          if(typeof value === "object" && value !== null){
+            if("message" in value){
+              console.log(value.message)
+              // alert(value.message + " \n Fetching logs ...")
+              this.downloadLogs("");
+            }
+          }
       },
     })
   }
@@ -66,20 +75,30 @@ export class MergeComponent {
     } else {
       additionalParams = ""
     }
-    this.httpClient.get("http://localhost:8080/dllog"+additionalParams, { responseType: 'blob' }).subscribe(
-      (data) => {
-        const blob = new Blob([data], { type: 'application/octet-stream' });
+    this.httpClient.get(environment.api+"/dllog"+additionalParams, {
+      responseType: 'blob',
+      withCredentials: true,
+    }).subscribe(
+      {
+        next: (value) => {
+          const blob = new Blob([value], { type: 'application/octet-stream' });
+          const url = window.URL.createObjectURL(blob);
+          const a = document.createElement('a');
+          a.href = url;
+          a.download = 'logfile.log';
+          a.innerText = "download log";
+          console.log("Blob: ",blob.text())
+          // document.body.appendChild(a);
+          document.getElementById("log-dl")?.appendChild(a);
+          document.getElementById("log-dl")!.className = "bg-yellow-500 rounded p-2";
+          blob.text().then(v => document.getElementById("log-disp-texts")!.innerHTML = v);
+          // a.click();
 
-        const url = window.URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = 'logfile.log';
-        document.body.appendChild(a);
-        a.click();
-        window.URL.revokeObjectURL(url);
-      },
-      (error) => {
-        console.error('Error downloading log file: ',error);
+          // window.URL.revokeObjectURL(url);
+        },
+        error: (err) => {
+          console.error('Error downloading log file: ',err);
+        }
       }
     )
   }