Add merge ops (not yet import py api)

client/src/app/app.module.ts

@@ -12,6 +12,7 @@ import { HeaderComponent } from './core/layout/header.component';
 import { HttpClientModule } from '@angular/common/http';
 import { AppComponent } from './app.component';
 import { ChangelogComponent } from './features/changelog/changelog.component';
+import { ReactiveFormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [AppComponent],

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

@@ -1,11 +1,16 @@
 import { Component } from '@angular/core';
+import { MergeComponent } from '../merge/merge.component';
 
 @Component({
   selector: 'app-changelog',
   standalone: true,
   templateUrl: './changelog.component.html',
-  styleUrls: ['./changelog.component.css']
+  styleUrls: ['./changelog.component.css'],
+  imports: [MergeComponent]
 })
 export class ChangelogComponent {
-
+  fetchLog(){
+    // TODO: Fetch changelog.html
+    fetch("/changelog")
+  }
 }

client/src/app/features/merge/merge-service.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { MergeServiceService } from './merge-service.service';
+
+describe('MergeServiceService', () => {
+  let service: MergeServiceService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(MergeServiceService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

client/src/app/features/merge/merge-service.service.ts

@@ -0,0 +1,12 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MergeServiceService {
+
+  master_version: number = 0;
+  dev_version: number = 0;
+
+  constructor() { }
+}

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

@@ -0,0 +1,43 @@
+
+<div class="flex-3 bg-stone-400 h-screen justify-centers items-center">
+
+  <h3 class="text-2xl text-center py-4 font-semibold">Merge 2 json</h3>
+
+  <div class="bg-stone-600 p-1 m-2 rounded-md">
+    <div class="bg-stone-500 m-2 rounded-md">
+      <p class="px-1 py-5 font-semibold">
+        ❓ What does this function do?
+      </p>
+      <div class="bg-stone-300 rounded">
+        <p class="px-2 ">
+          Apply changes from the `dev` version
+          <br>into the `master` version
+        </p>
+      </div>
+    </div>
+
+    <div class="bg-stone-200 p-1 m-2 rounded-md">
+      <p class="px-2 py-4 text-md text-center font-bold">
+       ❗Beware❗
+      <br>`master` = base version
+        <br>`dev` = your version
+      </p>
+    </div>
+    <form class="space-y-6 p-3 bg-stone-500 rounded" [formGroup]="mergeForm" (ngSubmit)="fetchMerge()">
+      <div class="flex">
+        <label class="flex-1 text-red-700 font-bold bg-yellow-100 rounded text-center" for="master_version">Master</label>
+        <input class="flex-1 mx-1 bg-slate-300 hover:bg-blue-400 text-center border border-collapse rounded-md" id="master_version" formControlName="master_version" type="text">
+      </div>
+
+      <div class="flex">
+        <label class="flex-1 bg-yellow-100 font-bold rounded text-center" for="dev_version">Dev</label>
+        <input class="flex-1 mx-1 bg-slate-300 hover:bg-blue-400 text-center border border-collapse rounded-md" id="dev_version" formControlName="dev_version" type="text">
+      </div>
+
+      <button class="button font-semibold bg-red-300 p-4 border border-collapse rounded-md" type="submit">Begin Merge</button>
+    </form>
+  </div>
+
+
+</div>
+

client/src/app/features/merge/merge.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MergeComponent } from './merge.component';
+
+describe('MergeComponent', () => {
+  let component: MergeComponent;
+  let fixture: ComponentFixture<MergeComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [MergeComponent]
+    });
+    fixture = TestBed.createComponent(MergeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,49 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { MergeServiceService } from './merge-service.service';
+
+@Component({
+  selector: 'app-merge',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule],
+  templateUrl: './merge.component.html',
+  styleUrls: ['./merge.component.css']
+})
+export class MergeComponent {
+
+  exceptionValues = [0, null, undefined]
+
+  mergeForm = this.formBuilder.group({
+    master_version: 0,
+    dev_version: 0
+  });
+
+
+  constructor(
+    private targets: MergeServiceService,
+    private formBuilder: FormBuilder,
+  ){}
+
+  private isException(value: any){
+    return this.exceptionValues.includes(value)
+  }
+
+  fetchMerge(){
+    if(this.isException(this.mergeForm.value.master_version) || this.isException(this.mergeForm.value.dev_version)){
+      return
+    }
+    this.targets.master_version = this.mergeForm.value.master_version!;
+    this.targets.dev_version = this.mergeForm.value.dev_version!;
+
+    // TODO: Fetch merge. Modify this to websocket
+    return fetch("http://localhost:3000/merge", {
+      method: "POST",
+      body: JSON.stringify({
+        master: this.targets.master_version,
+        dev: this.targets.dev_version
+      })
+    })
+  }
+}