Finish image converter

tools/src/app/app.component.scss

@@ -1,9 +0,0 @@
-// .main-content {
-//   display: flex;
-//   flex-direction: row;
-// }
-
-// router-outlet {
-//   flex: 1;
-//   padding: 20px;
-// }

tools/src/app/app.config.ts

@@ -1,10 +1,10 @@
-import { ApplicationConfig } from '@angular/core';
+import { ApplicationConfig, importProvidersFrom } from '@angular/core';
 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';
+import { HttpClientXsrfModule, provideHttpClient } from '@angular/common/http';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -13,6 +13,10 @@ export const appConfig: ApplicationConfig = {
     provideNgIconsConfig({
       size: '1.5em',
     }),
-    provideHttpClient()
+    provideHttpClient(),
+    importProvidersFrom(HttpClientXsrfModule.withOptions({
+      cookieName: 'X-XSRF-TOKEN',
+      headerName: '2311d8d8-607d-4747-8939-1bde65643254',
+    }))
   ]
 };

tools/src/app/app.routes.ts

@@ -5,6 +5,7 @@ import { Base64ConverterComponent } from '../tools/client-side/base64-converter/
 import { JwtToJsonComponent } from '../tools/client-side/jwt-to-json/jwt-to-json.component';
 import { TextToCronComponent } from '../tools/client-side/text-to-cron/text-to-cron.component';
 import { DdsToPngComponent } from '../tools/client-side/dds-to-png/dds-to-png.component';
+import { ImageConverterComponent } from '../tools/server-side/image-converter/image-converter.component';
 
 export const routes: Routes = [
   {
@@ -36,6 +37,11 @@ export const routes: Routes = [
     path: 'dds-to-png',
     pathMatch: 'full',
     component: DdsToPngComponent
+  },
+  {
+    path: 'image-converter',
+    pathMatch: 'full',
+    component: ImageConverterComponent
   }
 ];
 

tools/src/app/header/header.component.ts

@@ -65,6 +65,11 @@ export class HeaderComponent implements OnInit {
 											label: 'DDS to PNG',
 											routerLink: 'dds-to-png',
 											routerLinkActiveOptions: { exact: true }
+										},
+										{
+											label: 'Image Converter',
+											routerLink: 'image-converter',
+											routerLinkActiveOptions: { exact: true }
 										}
 									]
 								}

tools/src/app/models/conversion.model.ts

@@ -0,0 +1,12 @@
+// Contains all models used for conversion
+
+export interface ProcessedFile {
+  name: string;
+  link: string;
+  format: string;
+}
+
+export interface Format {
+  name: string;
+  code: string;
+}

tools/src/app/shared/dual-textarea/dual-textarea.component.html

@@ -1,5 +1,8 @@
 <div class="card flex justify-center">
     <p-panel [header]="title">
+      <ng-template pTemplate="header">
+        <p-tag *ngIf="isBeta" severity="warn" value="Beta"></p-tag>
+      </ng-template>
       <textarea 
         (keyup)="onTopChange($event)"
         [disabled]="topDisabled"

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

@@ -1,7 +1,7 @@
 :host {
     display: flex;
     justify-content: center;
-    align-items: center;
+    margin-top: 20px;
     height: 100vh;
     width: 98vw;
     
@@ -39,4 +39,13 @@
         background-color: var(--primary-contrast);
         color: var(--text-color)
     }
+
+    
+  ::ng-deep .p-panel-header {
+    justify-content: unset !important;
+
+    * {
+      margin-right: 5px;
+    }
+  }
 }

tools/src/app/shared/dual-textarea/dual-textarea.component.ts

@@ -4,6 +4,7 @@ import { FormsModule } from '@angular/forms';
 import { FloatLabelModule } from 'primeng/floatlabel';
 import { InputTextareaModule } from 'primeng/inputtextarea';
 import { PanelModule } from 'primeng/panel';
+import { TagModule } from 'primeng/tag';
 
 @Component({
   selector: 'app-dual-textarea',
@@ -15,7 +16,8 @@ import { PanelModule } from 'primeng/panel';
     InputTextareaModule, 
     FormsModule, 
     PanelModule, 
-    CommonModule
+    CommonModule,
+    TagModule
   ]
 
 })
@@ -27,6 +29,7 @@ export class DualTextareaComponent {
   @Input() bottomPlaceholder: string = 'Right Textarea';
   @Input() topValue: string = '';
   @Input() bottomValue: string = '';
+  @Input() isBeta: boolean = false;
   @Output() topChange = new EventEmitter<string>();
   @Output() bottomChange = new EventEmitter<string>();
 

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

@@ -1,13 +1,60 @@
 <div class="card flex justify-center">
   <p-panel [header]="title">
+    <ng-template pTemplate="header">
+      <p-tag *ngIf="isBeta" severity="warn" value="Beta"></p-tag>
+    </ng-template>
+
     <p-fileUpload 
       name="file" 
-      url="./upload" 
       (onSelect)="onFileSelect($event)" 
       [auto]="true"
       [accept]="accept"
       [previewWidth]="isPreview ? '50px' : '0px'"
+      mode="advanced"
+      [url]="url"
+      [withCredentials]="true"
+      [method]="method"
+      [headers]="requestHeaders"
     >
+    <ng-template
+      *ngIf="fileTypeSelector"
+      pTemplate="header"
+      let-files
+      let-chooseCallback="chooseCallback"
+      let-clearCallback="clearCallback"
+      let-uploadCallback="uploadCallback"
+    >
+      <p-button
+        (onClick)="choose($event, chooseCallback)"
+        icon="pi pi-images"
+        [rounded]="true"
+        [outlined]="true"
+      />
+
+      <p-autoComplete
+        *ngIf="fileTypeSelector"
+        (onSelect)="onAutoCompleteDropdownClick($event)"
+        [virtualScroll]="true"
+        [suggestions]="filteredFiles"
+        [virtualScrollItemSize]="34"
+        (completeMethod)="onAutoComplete($event)" 
+        optionLabel="name"
+        [dropdown]="true"
+        placeholder="Select a output format"
+      />
+
+      <p-button
+        (onClick)="onUploadEvent()"
+        icon="pi pi-file-arrow-up"
+        [rounded]="true"
+        [outlined]="true"
+    />
+    </ng-template>
+
+    <ng-template *ngIf="fileTypeSelector" pTemplate="empty">
+        <div>Drag and drop files to here to upload.</div>
+    </ng-template>
+
     </p-fileUpload>
     <p-table [value]="processedFiles" *ngIf="processedFiles.length != 0">
       <ng-template pTemplate="header">
@@ -21,7 +68,7 @@
         <tr>
           <td>{{file.name}}</td>
           <td>{{file.format}}</td>
-          <td><a [href]="file.link" download>{{file.name}}</a></td>
+          <td><a [href]="file.link" [download]="file.name">{{file.name}}</a></td>
         </tr>
       </ng-template>
     </p-table>

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

@@ -1,10 +1,9 @@
 :host {
     display: flex;
     justify-content: center;
-    align-items: center;
+    margin-top: 20px;
     height: 100vh;
     width: 98vw;
-    
   
     .card {
       display: flex;
@@ -17,4 +16,12 @@
       justify-content: center;
       margin-top: 1rem;
     }
-  }
+
+    ::ng-deep .p-panel-header {
+      justify-content: unset !important;
+
+      * {
+        margin-right: 5px;
+      }
+    }
+}

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

@@ -1,10 +1,14 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { FileSelectEvent, FileUploadModule } from 'primeng/fileupload';
+import { FileSelectEvent, FileUploadEvent, FileUploadModule } from 'primeng/fileupload';
 import { ButtonModule } from 'primeng/button';
 import { PanelModule } from 'primeng/panel';
 import { TableModule } from 'primeng/table';
+import { AutoCompleteCompleteEvent, AutoCompleteModule, AutoCompleteSelectEvent } from 'primeng/autocomplete';
+import { BadgeModule } from 'primeng/badge';
+import { HttpHeaders } from '@angular/common/http';
+import { TagModule } from 'primeng/tag';
 
 interface ProcessedFile {
   name: string;
@@ -23,16 +27,26 @@ interface ProcessedFile {
     FileUploadModule,
     ButtonModule,
     PanelModule,
-    TableModule
+    TableModule,
+    AutoCompleteModule,
+    BadgeModule,
+    TagModule
   ]
 })
-export class FileConverterComponent {
+export class FileConverterComponent implements OnInit {
   _fileFormats: string[] = [];
   accept: string = '';
+  selected = '';
+  invalidFileTypeMessageSummary: string = '';
+  url: string = '';
+  requestHeaders: any;
+  selectedFile: File[] | null = null;
 
   @Output() fileSelected = new EventEmitter<File[]>();
+  @Input() isBeta: boolean = false;
+  @Input() filteredFiles: string[] = [];
   @Input() isPreview: boolean = true;
-  @Input () title: string = 'File Converter';
+  @Input() title: string = 'File Converter';
   @Input() processedFiles: ProcessedFile[] = [];
   @Input()
   set fileFormats(formats: string[]) {
@@ -40,14 +54,44 @@ export class FileConverterComponent {
     this.accept = formats.join(',');
   }
 
+  // File type selector
+  @Output() autoComplete = new EventEmitter<AutoCompleteCompleteEvent>();
+  @Output() selectedFormat = new EventEmitter<string>();
+  @Input() fileTypeSelector: boolean = false;
+
+  // Upload file to server
+  @Input() baseUrl = '';
+  @Input() method : 'post' | 'put' = 'post';
+  @Input() headers: HttpHeaders = new HttpHeaders();
+  @Output() upload = new EventEmitter<FileUploadEvent>();
+
   get fileFormats(): string[] {
     return this._fileFormats;
   }
 
-  selectedFile: File[] | null = null;
+  ngOnInit(): void {
+    this.requestHeaders = this.headers;
+  }
+
+  choose(_: any, callback: () => void) {
+      callback();
+  }
 
   onFileSelect(event: FileSelectEvent): void {
-    this.selectedFile = event.files;
+    this.selectedFile = event.currentFiles;
     this.fileSelected.emit(this.selectedFile!);
   }
+
+  onAutoComplete(event: AutoCompleteCompleteEvent): void {
+    this.autoComplete.emit(event);
+  }
+
+  onAutoCompleteDropdownClick(event: AutoCompleteSelectEvent): void {
+    this.selectedFormat.emit(event.value.name);
+    this.selected = event.value.name;
+  }
+
+  onUploadEvent() {
+    this.upload.emit();
+  }
 }

tools/src/environments/environment.ts

@@ -0,0 +1,4 @@
+export const environment = {
+  production: false,
+  uploadServiceBaseUrl: 'http://localhost:1337'
+};

tools/src/index.html

@@ -6,6 +6,9 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@304&display=swap" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>

tools/src/styles.scss

@@ -1,2 +1,11 @@
 /* You can add global styles to this file, and also import other style files */
 @import "primeicons/primeicons.css";
+body,
+body .p-component
+{
+
+  font-family: "Roboto Mono", monospace;
+  font-optical-sizing: auto;
+  font-weight: 304;
+  font-style: normal;
+}

tools/src/tools/client-side/dds-to-png/dds-to-png.component.ts

@@ -1,12 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { FileConverterComponent } from '../../../app/shared/upload/file-converter.component';
 import { DdsToPngService } from './dds-to-png.service';
-
-interface ProcessedFile {
-  name: string;
-  link: string;
-  format: string;
-}
+import { ProcessedFile } from '../../../app/models/conversion.model';
 
 @Component({
   selector: 'app-dds-to-png',

tools/src/tools/client-side/dds-to-png/dds-to-png.service.ts

@@ -4,8 +4,6 @@ import { Injectable } from '@angular/core';
   providedIn: 'root'
 })
 export class DdsToPngService {
-  constructor() {}
-
   parseHeaders(arrayBuffer: ArrayBuffer) {
     const header = new DataView(arrayBuffer, 0, 128);
     const height = header.getUint32(12, true);

tools/src/tools/client-side/text-to-cron/text-to-cron.component.html

@@ -4,7 +4,6 @@
   bottomPlaceholder="*/5 * * * *"
   [bottomDisabled]="true"
   [bottomValue]="cronExpression" 
+  [isBeta]="true"
   (topChange)="getCronExpression($event)">
-</app-dual-textarea>
-
-<p>Still in beta, don't rely on this tool!</p>
+</app-dual-textarea>

tools/src/tools/client-side/text-to-cron/text-to-cron.component.ts

@@ -9,7 +9,6 @@ import { DualTextareaComponent } from '../../../app/shared/dual-textarea/dual-te
   imports: [DualTextareaComponent]
 })
 export class TextToCronComponent {
-
   cronExpression: string = '';
 
   getCronExpression(description: string): string {

tools/src/tools/server-side/image-converter/iamge-converter.service.ts

@@ -1,31 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { Observable, tap } from 'rxjs';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ImageService {
-  private baseUrl = 'http://localhost:1337'; // replace with your API base URL
-
-  constructor(private http: HttpClient) { }
-
-  convertImage(image: File, format: string): Observable<any> {
-    const formData = new FormData();
-    formData.append('image', image);
-
-    let imgToken = localStorage.getItem('imgToken');
-
-    const headers = new HttpHeaders({
-      '2311d8d8-607d-4747-8939-1bde65643254': imgToken!
-    });
-
-    return this.http.post(`${this.baseUrl}/convert/${format}`, formData, { headers });
-  }
-
-  seteAntiforgeryToken(): void {    
-    this.http.get<string>(`${this.baseUrl}/antiforgery/token`, { responseType: 'text' as 'json' }).pipe(
-        tap(token => localStorage.setItem('imgToken', token))
-    )
-  }
-}

tools/src/tools/server-side/image-converter/image-converter.component.html

@@ -1,3 +1,17 @@
-<p>
-  image-converter works!
-</p>
+<app-file-converter 
+  title="Image converter"
+  method="post"
+  [isPreview]="false"
+  [fileTypeSelector]="true"
+  [processedFiles]="processedFiles" 
+  [fileFormats]="fileFormats"
+  [filteredFiles]="filteredFormats"
+  [baseUrl]="url"
+  [headers]="headers"
+  [isBeta]="true"
+  (autoComplete)="filterFormats($event)"
+  (fileSelected)="onFileSelected($event)"
+  (selectedFormat)="onFormatSelected($event)"
+  (upload)="onUploadClicked()"
+  >
+</app-file-converter>

tools/src/tools/server-side/image-converter/image-converter.component.ts

@@ -1,10 +1,101 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { map, Subscription } from 'rxjs';
+import { DropdownModule } from 'primeng/dropdown';
+import { AutoCompleteCompleteEvent, AutoCompleteModule } from 'primeng/autocomplete';
+import { FormsModule } from '@angular/forms';
+import { ImageService } from './image-converter.service';
+import { CommonModule } from '@angular/common';
+import { FileConverterComponent } from "../../../app/shared/upload/file-converter.component";
+import { Format, ProcessedFile } from '../../../app/models/conversion.model';
+import { HttpHeaders } from '@angular/common/http';
 
 @Component({
   selector: 'app-image-converter',
   templateUrl: 'image-converter.component.html',
-  styleUrls: ['image-converter.component.scss']
+  styleUrls: ['image-converter.component.scss'],
+  standalone: true,
+  imports: [DropdownModule, AutoCompleteModule, FormsModule, CommonModule, FileConverterComponent]
 })
-export class ImageConverterComponent {
+export class ImageConverterComponent implements OnInit, OnDestroy {
+  constructor(private ImageService: ImageService) { }
 
-}
+  url = 'http://localhost:1337/convert';
+  filteredFormats: string[] = [];
+  formats: Format[] = [];
+  selectedFormat: string | undefined;
+  subscriptions: Subscription[] = [];
+  selected = '';
+  headers = new HttpHeaders();
+  processedFiles: ProcessedFile[] = [];
+  fileFormats: string[] = ["image/*"];
+  selectedFile: File[] | null = null;
+
+  filterFormats(event: AutoCompleteCompleteEvent) {
+    let filtered: any[] = [];
+    let query = event.query;
+
+    for (let index = 0; index < (this.formats as any[]).length; index++) {
+        let format = (this.formats as any[])[index];
+        if (format.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
+            filtered.push(format);
+        }
+    }
+
+    this.filteredFormats = filtered;
+  }
+
+  onUploadClicked() {
+    if (this.selectedFormat && this.selectedFile) {
+      this.subscriptions.push(
+        this.ImageService.getMimeType(this.selectedFormat).subscribe((typeResponse) => {
+          this.subscriptions.push(
+            this.ImageService.convertImage(this.selectedFile![0], this.selectedFormat!)
+              .pipe(map((response: any) => {
+                const blob = new Blob([response], { type: typeResponse });
+                const blobUrl = URL.createObjectURL(blob);
+                const processedFile = {
+                  name: this.selectedFile![0].name.replace(/\.[^/.]+$/, `.${this.selectedFormat?.toLowerCase()}`),
+                  link: blobUrl,
+                  format: this.selectedFormat
+                } as ProcessedFile;
+                this.processedFiles.push(processedFile);
+              }))
+              .subscribe()
+          );
+        })
+      );
+    }
+  }
+  
+
+  onFormatSelected(format: string) {
+    this.selectedFormat = format;
+  }
+
+  onFileSelected(input: File[]): void {
+    this.selectedFile = input;
+  }
+
+  ngOnInit(): void { 
+    this.subscriptions.push(this.ImageService.setAntiforgeryToken().subscribe());
+
+    this.subscriptions.push(this.ImageService.getFormats()
+      .pipe(map(formats => {
+        this.formats = formats.map(format => {
+          return {
+            name: format,
+            code: format.toLowerCase()
+          } as Format;
+        });
+      }))
+      .subscribe());
+
+    this.headers = new HttpHeaders({
+      '2311d8d8-607d-4747-8939-1bde65643254': localStorage.getItem('imgToken')!,
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach(sub => sub.unsubscribe());
+  }
+}

tools/src/tools/server-side/image-converter/image-converter.service.ts

@@ -0,0 +1,42 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { map, Observable } from 'rxjs';
+import { environment } from '../../../environments/environment';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ImageService {
+  private baseUrl = environment.uploadServiceBaseUrl;
+
+  constructor(private http: HttpClient) { }
+
+  convertImage(image: File, format: string): Observable<any> {
+    const formData = new FormData();
+    formData.append('file', image);
+
+    let imgToken = localStorage.getItem('imgToken');
+
+    const headers = new HttpHeaders({
+      '2311d8d8-607d-4747-8939-1bde65643254': imgToken!
+    });
+
+    return this.http.post(`${this.baseUrl}/convert/${format}`, formData, { headers, responseType: 'blob' });  }
+
+  setAntiforgeryToken(): Observable<string> {    
+    return this.http.get<string>(`${this.baseUrl}/antiforgery/token`, { responseType: 'text' as 'json' }).pipe(
+      map((token) => {
+        localStorage.setItem('imgToken', token.replace('"', ''));
+        return token;
+      })
+    );
+  }
+
+  getMimeType(simpleType: string): Observable<string> {
+    return this.http.get<string>(`${this.baseUrl}/mimetype/${simpleType}`, { responseType: 'text' as 'json' });
+  }
+
+  getFormats(): Observable<string[]> {
+      return this.http.get<string[]>(`${this.baseUrl}/formats`);
+  }
+}