Simplify code

bytefy.webapp/src/tools/client-side/oracle-guid-converter/oracle-guid-converter.component.html

@@ -1,27 +1,9 @@
-<div class="container">
+<app-dual-textarea 
-    <h2>GUID to Oracle RAW(16) Converter</h2>
+  title="GUID to Oracle RAW(16) Converter"
-  
+  topPlaceholder="Enter GUID here..."
-    <div class="conversion-section">
+  bottomPlaceholder="Enter RAW(16) will appear here..."
-      <h3>Convert GUID to RAW(16)</h3>
+  [topValue]="convertedGuid" 
-      <label for="guidInput">Enter GUID:</label>
+  [bottomValue]="rawOutput" 
-      <input id="guidInput" [(ngModel)]="guidInput" placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" />
+  (topChange)="onConvertToRaw($event)" 
-      <button (click)="onConvertToRaw()">Convert to RAW(16)</button>
+  (bottomChange)="onConvertToGuid($event)">
-  
+</app-dual-textarea>
-      <ng-container *ngIf="rawOutput as output">
-        <p><strong>RAW(16) Output:</strong></p>
-        <p>{{ output }}</p>
-      </ng-container>
-    </div>
-  
-    <div class="conversion-section">
-      <h3>Convert RAW(16) to GUID</h3>
-      <label for="rawOutput">Enter RAW(16):</label>
-      <input id="rawOutput" [(ngModel)]="rawOutput" placeholder="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" />
-      <button (click)="onConvertToGuid()">Convert to GUID</button>
-  
-      <ng-container *ngIf="convertedGuid as converted">
-        <p><strong>GUID Output:</strong></p>
-        <p>{{ converted }}</p>
-      </ng-container>
-    </div>
-</div>

bytefy.webapp/src/tools/client-side/oracle-guid-converter/oracle-guid-converter.component.ts

@@ -1,13 +1,15 @@
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { DualTextareaComponent } from '../../../app/shared/dual-textarea/dual-textarea.component';
 
 @Component({
   selector: 'app-oracle-guid-converter',
   standalone: true,
   imports: [
     FormsModule,
-    CommonModule
+    CommonModule,
+    DualTextareaComponent
   ],
   templateUrl: './oracle-guid-converter.component.html',
   styleUrl: './oracle-guid-converter.component.scss'
@@ -17,6 +19,22 @@ export class OracleGuidConverterComponent {
   rawOutput: string = '';
   convertedGuid: string = '';
 
+  onConvertToRaw(input: string): void {
+    if (this.isValidGuid(input)) {
+      this.rawOutput = this.guidToRaw(input);
+    } else {
+      this.rawOutput = 'Invalid GUID format';
+    }
+  }
+
+  onConvertToGuid(input: string): void {
+    if (this.isValidRaw(input)) {
+      this.convertedGuid = this.rawToGuid(input);
+    } else {
+      this.convertedGuid = 'Invalid RAW(16) format';
+    }
+  }
+
   private isValidGuid(guid: string): boolean {
     const guidPattern = /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/;
     return guidPattern.test(guid);
@@ -34,13 +52,22 @@ export class OracleGuidConverterComponent {
     );
 
     const reorderedBytes = [
-      guidBytes[3], guidBytes[2], guidBytes[1], guidBytes[0],
+      guidBytes[3], 
-      guidBytes[5], guidBytes[4],
+      guidBytes[2], 
-      guidBytes[7], guidBytes[6],
+      guidBytes[1], 
+      guidBytes[0],
+      guidBytes[5], 
+      guidBytes[4],
+      guidBytes[7], 
+      guidBytes[6],
       ...guidBytes.slice(8, 16)
     ];
 
-    return reorderedBytes.map(b => b.toString(16).padStart(2, '0')).join('').toUpperCase();
+    return reorderedBytes
+    .map(byte => byte.toString(16)
+    .padStart(2, '0'))
+    .join('')
+    .toUpperCase();
   }
 
   private rawToGuid(raw: string): string {
@@ -49,9 +76,14 @@ export class OracleGuidConverterComponent {
     );
 
     const reorderedBytes = [
-      rawBytes[3], rawBytes[2], rawBytes[1], rawBytes[0],
+      rawBytes[3], 
-      rawBytes[5], rawBytes[4],
+      rawBytes[2], 
-      rawBytes[7], rawBytes[6],
+      rawBytes[1], 
+      rawBytes[0],
+      rawBytes[5], 
+      rawBytes[4],
+      rawBytes[7], 
+      rawBytes[6],
       ...rawBytes.slice(8, 16)
     ];
 
@@ -65,20 +97,4 @@ export class OracleGuidConverterComponent {
       hexArray.slice(10, 16).join('')
     ].join('-');
   }
-
-  onConvertToRaw(): void {
-    if (this.isValidGuid(this.guidInput)) {
-      this.rawOutput = this.guidToRaw(this.guidInput);
-    } else {
-      this.rawOutput = 'Invalid GUID format';
-    }
-  }
-
-  onConvertToGuid(): void {
-    if (this.isValidRaw(this.rawOutput)) {
-      this.convertedGuid = this.rawToGuid(this.rawOutput);
-    } else {
-      this.convertedGuid = 'Invalid RAW(16) format';
-    }
-  }
 }