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();
+  }
 }