Add dds to png converter

src/app/app.config.ts

@@ -4,11 +4,15 @@ import { provideRouter } from '@angular/router';
 import { routes } from './app.routes';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { provideNgIconsConfig } from '@ng-icons/core';
+import { provideHttpClient } from '@angular/common/http';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes), 
+  providers: [
+    provideRouter(routes), 
     provideAnimationsAsync("animations"), 
     provideNgIconsConfig({
       size: '1.5em',
-    }),]
+    }),
+    provideHttpClient()
+  ]
 };

src/app/app.routes.ts

@@ -4,8 +4,8 @@ import { GuidComponent } from '../tools/guid/guid.component';
 import { Base64ConverterComponent } from '../tools/base64-converter/base64-converter.component';
 import { JwtToJsonComponent } from '../tools/jwt-to-json/jwt-to-json.component';
 import { TextToCronComponent } from '../tools/text-to-cron/text-to-cron.component';
+import { DdsToPngComponent } from '../tools/dds-to-png/dds-to-png.component';
 
-// create route to the ascii-to-text component
 export const routes: Routes = [
   {
     path: 'ascii-to-text',
@@ -31,6 +31,11 @@ export const routes: Routes = [
     path: 'text-to-cron',
     pathMatch: 'full',
     component: TextToCronComponent
+  },
+  {
+    path: 'dds-to-png',
+    pathMatch: 'full',
+    component: DdsToPngComponent
   }
 ];
 

src/app/header/header.component.ts

@@ -17,43 +17,60 @@ export class HeaderComponent implements OnInit {
   ngOnInit() {
       this.items = [
           {
-              label: 'Text Tools',
-              icon: 'pi pi-box',
-              items: [
-                  [
-                      {
-                          items: [
-                              {
-                                  label: 'Ascii to text',
-                                  routerLink: 'ascii-to-text',
-                                  routerLinkActiveOptions: { exact: true }
-                              },
-                              {
-                                label: 'Guid Generator',
-                                routerLink: 'guid',
-                                routerLinkActiveOptions: { exact: true }
-                              },
-															{
-																label: 'Base64 Converter',
-																routerLink: 'base64-converter',
-																routerLinkActiveOptions: { exact: true }
-															},
-															{
-																label: 'Jwt decoder',
-																routerLink: 'jwt-decoder',
-																routerLinkActiveOptions: { exact: true }
-															},
-															{
-																label: 'Text to Cron Expression',
-																routerLink: 'text-to-cron',
-																routerLinkActiveOptions: { exact: true }
-															},
-                          ],
-                          
-                      }
-                  ]
+						label: 'Text Tools',
+						icon: 'pi pi-box',
+						items: [
+							[
+								{
+									items: [
+											{
+													label: 'Ascii to text',
+													routerLink: 'ascii-to-text',
+													routerLinkActiveOptions: { exact: true }
+											},
+											{
+												label: 'Guid Generator',
+												routerLink: 'guid',
+												routerLinkActiveOptions: { exact: true }
+											},
+											{
+												label: 'Base64 Converter',
+												routerLink: 'base64-converter',
+												routerLinkActiveOptions: { exact: true }
+											},
+											{
+												label: 'Jwt decoder',
+												routerLink: 'jwt-decoder',
+												routerLinkActiveOptions: { exact: true }
+											},
+											{
+												label: 'Text to Cron Expression',
+												routerLink: 'text-to-cron',
+												routerLinkActiveOptions: { exact: true }
+											}
+									],
+									
+								}
+							]
             ]
-          }
+          },
+					{
+						label: 'Conversion',
+						icon: 'pi pi-box',
+						items: [
+							[
+								{
+									items: [
+										{
+											label: 'DDS to PNG',
+											routerLink: 'dds-to-png',
+											routerLinkActiveOptions: { exact: true }
+										}
+									]
+								}
+							]
+						]
+					}
       ]
   }
 }

src/app/shared/dual-textarea/dual-textarea.component.scss

@@ -5,6 +5,12 @@
     height: 100vh;
     width: 98vw;
     
+    .card {
+        display: flex;
+        flex-direction: column;
+        width: 1140px;
+    }
+    
     .wrapper {
         display: flex;
         flex-direction: column;
@@ -23,7 +29,7 @@
     }
 
     textarea {
-        width: 540px;
+        width: 100%;
         height: 175px;
         padding: 12px 20px;
         box-sizing: border-box;

src/app/shared/upload/file-converter.component.html

@@ -0,0 +1,29 @@
+<div class="card flex justify-center">
+  <p-panel [header]="title">
+    <p-fileUpload 
+      name="file" 
+      url="./upload" 
+      (onSelect)="onFileSelect($event)" 
+      [auto]="true"
+      [accept]="accept"
+      [previewWidth]="isPreview ? '50px' : '0px'"
+    >
+    </p-fileUpload>
+    <p-table [value]="processedFiles" *ngIf="processedFiles.length != 0">
+      <ng-template pTemplate="header">
+        <tr>
+          <th>Name</th>
+          <th>Format</th>
+          <th>Download</th>
+        </tr>
+      </ng-template>
+      <ng-template pTemplate="body" let-file>
+        <tr>
+          <td>{{file.name}}</td>
+          <td>{{file.format}}</td>
+          <td><a [href]="file.link" download>{{file.name}}</a></td>
+        </tr>
+      </ng-template>
+    </p-table>
+  </p-panel>
+</div>

src/app/shared/upload/file-converter.component.scss

@@ -0,0 +1,20 @@
+:host {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    width: 98vw;
+    
+  
+    .card {
+      display: flex;
+      flex-direction: column;
+      width: 1140px;
+    }
+  
+    .conversion {
+      display: flex;
+      justify-content: center;
+      margin-top: 1rem;
+    }
+  }

src/app/shared/upload/file-converter.component.ts

@@ -0,0 +1,53 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { FileSelectEvent, FileUploadModule } from 'primeng/fileupload';
+import { ButtonModule } from 'primeng/button';
+import { PanelModule } from 'primeng/panel';
+import { TableModule } from 'primeng/table';
+
+interface ProcessedFile {
+  name: string;
+  link: string;
+  format: string;
+}
+
+@Component({
+  selector: 'app-file-converter',
+  templateUrl: 'file-converter.component.html',
+  styleUrls: ['file-converter.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    FileUploadModule,
+    ButtonModule,
+    PanelModule,
+    TableModule
+  ]
+})
+export class FileConverterComponent {
+  _fileFormats: string[] = [];
+  accept: string = '';
+
+  @Output() fileSelected = new EventEmitter<File[]>();
+  @Input() isPreview: boolean = true;
+  @Input () title: string = 'File Converter';
+  @Input() processedFiles: ProcessedFile[] = [];
+  @Input()
+  set fileFormats(formats: string[]) {
+    this._fileFormats = formats;
+    this.accept = formats.join(',');
+  }
+
+  get fileFormats(): string[] {
+    return this._fileFormats;
+  }
+
+  selectedFile: File[] | null = null;
+
+  onFileSelect(event: FileSelectEvent): void {
+    this.selectedFile = event.files;
+    this.fileSelected.emit(this.selectedFile!);
+  }
+}