Theme, new recipe upload page WIP.

src/app/app.routes.ts

@@ -14,7 +14,7 @@ export const routes: Routes = [
         component: RecipesSearchPage,
     },
     {
-        path: 'recipes-upload',
+        path: 'recipe-upload',
         component: RecipeUploadPage,
     },
     {

src/app/pages/recipe-upload-page/recipe-upload-page.html

@@ -1,6 +1,25 @@
 <div id="recipe-upload-container">
     <h1>Upload Recipe</h1>
+    <app-recipe-upload-trail
+        [displayStep]="displayStep()"
+        [inProgressStep]="inProgressStep()"
+        [includeInfer]="includeInfer()"
+        (stepClick)="onStepClick($event)"
+    ></app-recipe-upload-trail>
 
+    @if (displayStep() === RecipeUploadStep.START) {
+        <app-ai-or-manual
+            [sourceFile]="sourceFile()"
+            (sourceFileChange)="onSourceFileChange($event)"
+            (submitStep)="onAiOrManualSubmit($event)"
+        ></app-ai-or-manual>
+    } @else if (displayStep() === RecipeUploadStep.INFER) {
+        <app-infer></app-infer>
+    } @else if (displayStep() === RecipeUploadStep.ENTER_DATA) {
+        <app-enter-recipe-data [model]="model()"></app-enter-recipe-data>
+    }
+
+    <!--
     <section>
         <h2>Auto-Complete Recipe (Optional)</h2>
         <p>Choose a photo of a recipe from your files, and AI will fill out the form below for you.</p>
@@ -42,4 +61,5 @@
             </div>
         </div>
     </section>
+    -->
 </div>

src/app/pages/recipe-upload-page/recipe-upload-page.ts

@@ -1,100 +1,212 @@
-import { Component, inject, signal } from '@angular/core';
+import { Component, computed, inject, OnInit, signal } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
-import { SseClient } from 'ngx-sse-client';
+import { AiOrManual } from './steps/ai-or-manual/ai-or-manual';
-import { Spinner } from '../../shared/components/spinner/spinner';
+import { AIOrManualSubmitEvent } from './steps/ai-or-manual/AIOrManualSubmitEvent';
-import { MatButton } from '@angular/material/button';
+import { Infer } from './steps/infer/infer';
-import { MatFormField, MatInput, MatLabel } from '@angular/material/input';
+import { EnterRecipeData } from './steps/enter-recipe-data/enter-recipe-data';
+import { RecipeUploadTrail } from './recipe-upload-trail/recipe-upload-trail';
+import { ActivatedRoute, Router } from '@angular/router';
+import { StepClickEvent } from './recipe-upload-trail/StepClickEvent';
+import { RecipeUploadModel } from '../../shared/client-models/RecipeUploadModel';
+import { RecipeUploadService } from '../../shared/services/RecipeUploadService';
+import { RecipeUploadStep } from '../../shared/client-models/RecipeUploadStep';
+import { FileUploadEvent } from '../../shared/components/file-upload/FileUploadEvent';
+import { tryMaybeInt } from '../../shared/util';
+import { from, map, switchMap, tap } from 'rxjs';
 
 @Component({
     selector: 'app-recipe-upload-page',
-    imports: [ReactiveFormsModule, Spinner, MatButton, MatFormField, MatInput, MatLabel],
+    imports: [ReactiveFormsModule, AiOrManual, Infer, EnterRecipeData, RecipeUploadTrail],
     templateUrl: './recipe-upload-page.html',
     styleUrl: './recipe-upload-page.css',
 })
-export class RecipeUploadPage {
+export class RecipeUploadPage implements OnInit {
-    private readonly sseClient = inject(SseClient);
+    protected readonly model = signal<RecipeUploadModel>({
-    private readonly formBuilder = inject(FormBuilder);
+        inProgressStep: RecipeUploadStep.START,
-
-    protected readonly sourceRecipeImage = signal<string | null>(null);
-    protected readonly inferenceInProgress = signal(false);
-
-    protected readonly recipeUploadForm = this.formBuilder.group({
-        file: this.formBuilder.control<File | null>(null, [Validators.required]),
     });
 
-    protected readonly recipeForm = new FormGroup({
+    protected readonly displayStep = signal<number>(RecipeUploadStep.START);
-        title: new FormControl('', [Validators.required]),
+    protected readonly inProgressStep = computed(() => this.model().inProgressStep);
-        recipeText: new FormControl('', Validators.required),
+    protected readonly includeInfer = signal(false);
-    });
+    protected readonly sourceFile = computed(() => this.model().sourceFile ?? null);
 
-    protected onClear() {
+    private readonly router = inject(Router);
-        this.recipeUploadForm.reset();
+    private readonly activatedRoute = inject(ActivatedRoute);
-        this.sourceRecipeImage.set(null);
+    private readonly recipeUploadService = inject(RecipeUploadService);
-    }
 
-    protected onFileChange(event: Event) {
+    public ngOnInit(): void {
-        const fileInput = event.target as HTMLInputElement;
+        this.activatedRoute.queryParamMap
-        if (fileInput.files && fileInput.files.length) {
+            .pipe(
-            const file = fileInput.files[0];
+                map((paramMap) => {
-            this.recipeUploadForm.controls.file.setValue(file);
+                    const draftIdParam: string | null = paramMap.get('draftId');
-            this.recipeUploadForm.controls.file.markAsTouched();
+                    const draftId = tryMaybeInt(draftIdParam);
-            this.recipeUploadForm.controls.file.updateValueAndValidity();
+                    const stepParam: string | null = paramMap.get('step');
-
+                    const step = tryMaybeInt(stepParam);
-            // set source image
+                    return [draftId, step];
-            this.sourceRecipeImage.set(URL.createObjectURL(file));
+                }),
-        }
+                switchMap(([draftId, step]) => {
-    }
+                    const currentModel = this.model();
-
+                    if (draftId !== null && currentModel.id !== draftId) {
-    protected onFileSubmit() {
+                        return this.recipeUploadService.getRecipeUploadModel(draftId).pipe(
-        const rawValue = this.recipeUploadForm.getRawValue();
+                            tap((updatedModel) => {
-
+                                this.model.set(updatedModel);
-        this.inferenceInProgress.set(true);
+                            }),
-
+                            switchMap((updatedModel) => {
-        // upload form data
+                                if (step !== null && step <= updatedModel.inProgressStep) {
-        const formData = new FormData();
+                                    return from(this.changeDisplayStep(step));
-        formData.append('recipeImageFile', rawValue.file!, rawValue.file!.name);
-        this.sseClient
-            .stream(
-                `http://localhost:8080/inferences/recipe-extract-stream`,
-                {
-                    keepAlive: false,
-                    reconnectionDelay: 1000,
-                    responseType: 'event',
-                },
-                {
-                    body: formData,
-                },
-                'PUT',
-            )
-            .subscribe({
-                next: (event) => {
-                    if (event.type === 'error') {
-                        const errorEvent = event as ErrorEvent;
-                        console.error(errorEvent.error, errorEvent.message);
                                 } else {
-                        const messageEvent = event as MessageEvent;
+                                    return from(this.changeDisplayStep(updatedModel.inProgressStep));
-                        const data: { delta: string } = JSON.parse(messageEvent.data);
-                        this.recipeForm.patchValue({
-                            recipeText: this.recipeForm.value.recipeText + data.delta,
-                        });
-
-                        // must do this so we auto-resize the textarea
-                        document.getElementById('recipe-text')?.dispatchEvent(new Event('input', { bubbles: true }));
                                 }
+                            }),
+                        );
+                    } else if (step !== null && step <= currentModel.inProgressStep) {
+                        return from(this.changeDisplayStep(step));
+                    } else {
+                        return from(this.changeDisplayStep(RecipeUploadStep.START));
+                    }
+                }),
+            )
+            .subscribe();
+    }
+
+    private async changeDisplayStep(targetStep: number): Promise<void> {
+        this.displayStep.set(targetStep);
+        await this.router.navigate([], {
+            relativeTo: this.activatedRoute,
+            queryParams: {
+                step: targetStep,
+                draftId: this.model().id,
             },
-                complete: () => {
+            queryParamsHandling: 'merge',
-                    this.inferenceInProgress.set(false);
-                },
         });
     }
 
-    protected onRecipeSubmit() {
+    protected async onStepClick(event: StepClickEvent): Promise<void> {
-        console.log(this.recipeForm.value);
+        await this.changeDisplayStep(event.step);
     }
 
-    protected onRecipeTextChange(event: Event) {
+    protected onSourceFileChange(event: FileUploadEvent) {
-        const textarea = event.target as HTMLTextAreaElement;
+        if (event._tag === 'file-add-event') {
-        textarea.style.height = 'auto';
+            this.model.update((model) => ({
-        textarea.style.height = textarea.scrollHeight + 'px';
+                ...model,
+                sourceFile: event.file,
+            }));
+        } else {
+            this.model.update((model) => ({
+                ...model,
+                sourceFile: null,
+            }));
         }
+    }
+
+    protected async onAiOrManualSubmit(event: AIOrManualSubmitEvent): Promise<void> {
+        if (event.mode === 'manual') {
+            this.model.update((model) => ({
+                ...model,
+                sourceFile: null,
+                inProgressStep: RecipeUploadStep.ENTER_DATA,
+            }));
+            await this.changeDisplayStep(RecipeUploadStep.ENTER_DATA);
+            this.includeInfer.set(false);
+        } else {
+            this.model.update((model) => ({
+                ...model,
+                sourceFile: this.sourceFile(),
+                inProgressStep: RecipeUploadStep.INFER,
+            }));
+            await this.changeDisplayStep(RecipeUploadStep.INFER);
+            this.includeInfer.set(true);
+            this.recipeUploadService.doInference(this.model()).subscribe((updatedModel) => {
+                this.model.set(updatedModel);
+                this.changeDisplayStep(RecipeUploadStep.ENTER_DATA);
+            });
+        }
+    }
+
+    // private readonly sseClient = inject(SseClient);
+    // private readonly formBuilder = inject(FormBuilder);
+    //
+    // protected readonly sourceRecipeImage = signal<string | null>(null);
+    // protected readonly inferenceInProgress = signal(false);
+    //
+    // protected readonly recipeUploadForm = this.formBuilder.group({
+    //     file: this.formBuilder.control<File | null>(null, [Validators.required]),
+    // });
+    //
+    // protected readonly recipeForm = new FormGroup({
+    //     title: new FormControl('', [Validators.required]),
+    //     recipeText: new FormControl('', Validators.required),
+    // });
+    //
+    // protected onClear() {
+    //     this.recipeUploadForm.reset();
+    //     this.sourceRecipeImage.set(null);
+    // }
+    //
+    // protected onFileChange(event: Event) {
+    //     const fileInput = event.target as HTMLInputElement;
+    //     if (fileInput.files && fileInput.files.length) {
+    //         const file = fileInput.files[0];
+    //         this.recipeUploadForm.controls.file.setValue(file);
+    //         this.recipeUploadForm.controls.file.markAsTouched();
+    //         this.recipeUploadForm.controls.file.updateValueAndValidity();
+    //
+    //         // set source image
+    //         this.sourceRecipeImage.set(URL.createObjectURL(file));
+    //     }
+    // }
+    //
+    // protected onFileSubmit() {
+    //     const rawValue = this.recipeUploadForm.getRawValue();
+    //
+    //     this.inferenceInProgress.set(true);
+    //
+    //     // upload form data
+    //     const formData = new FormData();
+    //     formData.append('recipeImageFile', rawValue.file!, rawValue.file!.name);
+    //     this.sseClient
+    //         .stream(
+    //             `http://localhost:8080/inferences/recipe-extract-stream`,
+    //             {
+    //                 keepAlive: false,
+    //                 reconnectionDelay: 1000,
+    //                 responseType: 'event',
+    //             },
+    //             {
+    //                 body: formData,
+    //             },
+    //             'PUT',
+    //         )
+    //         .subscribe({
+    //             next: (event) => {
+    //                 if (event.type === 'error') {
+    //                     const errorEvent = event as ErrorEvent;
+    //                     console.error(errorEvent.error, errorEvent.message);
+    //                 } else {
+    //                     const messageEvent = event as MessageEvent;
+    //                     const data: { delta: string } = JSON.parse(messageEvent.data);
+    //                     this.recipeForm.patchValue({
+    //                         recipeText: this.recipeForm.value.recipeText + data.delta,
+    //                     });
+    //
+    //                     // must do this so we auto-resize the textarea
+    //                     document.getElementById('recipe-text')?.dispatchEvent(new Event('input', { bubbles: true }));
+    //                 }
+    //             },
+    //             complete: () => {
+    //                 this.inferenceInProgress.set(false);
+    //             },
+    //         });
+    // }
+    //
+    // protected onRecipeSubmit() {
+    //     console.log(this.recipeForm.value);
+    // }
+    //
+    // protected onRecipeTextChange(event: Event) {
+    //     const textarea = event.target as HTMLTextAreaElement;
+    //     textarea.style.height = 'auto';
+    //     textarea.style.height = textarea.scrollHeight + 'px';
+    // }
+    protected readonly RecipeUploadStep = RecipeUploadStep;
 }

src/app/pages/recipe-upload-page/recipe-upload-trail/StepClickEvent.ts

@@ -0,0 +1,3 @@
+export interface StepClickEvent {
+    step: number;
+}

src/app/pages/recipe-upload-page/recipe-upload-trail/recipe-upload-trail.css

@@ -0,0 +1,32 @@
+#recipe-upload-steps {
+    display: flex;
+    list-style-type: none;
+    margin-block: 0;
+    padding-inline: 0;
+}
+
+#recipe-upload-steps li {
+    display: inline;
+}
+
+#recipe-upload-steps li:not(:first-child)::before {
+    content: ">";
+    padding-inline: 5px;
+}
+
+.step-complete,
+.step-in-progress {
+    cursor: pointer;
+}
+
+.step-in-progress {
+    opacity: 0.9;
+}
+
+.step-incomplete {
+    opacity: 0.6;
+}
+
+.step-displayed {
+    font-weight: 700;
+}

src/app/pages/recipe-upload-page/recipe-upload-trail/recipe-upload-trail.html

@@ -0,0 +1,18 @@
+<ul id="recipe-upload-steps">
+    @for (step of steps(); track step.index) {
+        <li
+            [class]="{
+                'step-complete': step.completed,
+                'step-in-progress': step.inProgress,
+                'step-incomplete': !step.completed,
+                'step-displayed': displayStep() === step.index
+            }"
+        >
+            @if (step.completed || step.inProgress) {
+                <a (click)="onStepClick(step.index)">{{ step.name }}</a>
+            } @else {
+                {{ step.name }}
+            }
+        </li>
+    }
+</ul>

src/app/pages/recipe-upload-page/recipe-upload-trail/recipe-upload-trail.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RecipeUploadTrail } from './recipe-upload-trail';
+
+describe('RecipeUploadTrail', () => {
+    let component: RecipeUploadTrail;
+    let fixture: ComponentFixture<RecipeUploadTrail>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [RecipeUploadTrail],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(RecipeUploadTrail);
+        component = fixture.componentInstance;
+        await fixture.whenStable();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

src/app/pages/recipe-upload-page/recipe-upload-trail/recipe-upload-trail.ts

@@ -0,0 +1,53 @@
+import { Component, computed, input, output } from '@angular/core';
+import { StepClickEvent } from './StepClickEvent';
+import { RecipeUploadStep } from '../../../shared/client-models/RecipeUploadStep';
+
+@Component({
+    selector: 'app-recipe-upload-trail',
+    imports: [],
+    templateUrl: './recipe-upload-trail.html',
+    styleUrl: './recipe-upload-trail.css',
+})
+export class RecipeUploadTrail {
+    public readonly displayStep = input.required<RecipeUploadStep>();
+    public readonly inProgressStep = input.required<RecipeUploadStep>();
+    public readonly includeInfer = input.required<boolean>();
+
+    public readonly stepClick = output<StepClickEvent>();
+
+    protected readonly steps = computed(() => {
+        const base: {
+            index: RecipeUploadStep;
+            name: string;
+            completed: boolean;
+            inProgress: boolean;
+        }[] = [
+            {
+                index: RecipeUploadStep.START,
+                name: 'Start',
+                completed: this.inProgressStep() > RecipeUploadStep.START,
+                inProgress: this.inProgressStep() === RecipeUploadStep.START,
+            },
+            {
+                index: RecipeUploadStep.ENTER_DATA,
+                name: 'Enter Recipe',
+                completed: this.inProgressStep() > RecipeUploadStep.ENTER_DATA,
+                inProgress: this.inProgressStep() === RecipeUploadStep.ENTER_DATA,
+            },
+        ];
+        if (this.includeInfer()) {
+            base.push({
+                index: RecipeUploadStep.INFER,
+                name: 'Infer',
+                completed: this.inProgressStep() > RecipeUploadStep.INFER,
+                inProgress: this.inProgressStep() === RecipeUploadStep.INFER,
+            });
+        }
+        base.sort((a, b) => a.index - b.index);
+        return base;
+    });
+
+    protected onStepClick(stepIndex: number) {
+        this.stepClick.emit({ step: stepIndex });
+    }
+}

src/app/pages/recipe-upload-page/steps/ai-or-manual/AIOrManualSubmitEvent.ts

@@ -0,0 +1,3 @@
+export interface AIOrManualSubmitEvent {
+    mode: 'manual' | 'ai-assist';
+}

src/app/pages/recipe-upload-page/steps/ai-or-manual/ai-or-manual.html

@@ -0,0 +1,11 @@
+<section>
+    <h2>Start</h2>
+    <p>Either upload a photo of a recipe and AI will assist you, or enter your recipe manually.</p>
+    <form id="ai-or-manual-form">
+        <app-file-upload [files]="sourceFilesArray()" (fileChange)="onFileChange($event)"></app-file-upload>
+        <div id="ai-or-manual-buttons">
+            <button matButton="outlined" type="button" (click)="onFormSubmit('manual')">Enter Manually</button>
+            <button matButton="filled" type="button" [disabled]="!sourceFile()" (click)="onFormSubmit('ai-assist')">Use AI Assist</button>
+        </div>
+    </form>
+</section>

src/app/pages/recipe-upload-page/steps/ai-or-manual/ai-or-manual.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AiOrManual } from './ai-or-manual';
+
+describe('AiOrManual', () => {
+    let component: AiOrManual;
+    let fixture: ComponentFixture<AiOrManual>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [AiOrManual],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(AiOrManual);
+        component = fixture.componentInstance;
+        await fixture.whenStable();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

src/app/pages/recipe-upload-page/steps/ai-or-manual/ai-or-manual.ts

@@ -0,0 +1,35 @@
+import { Component, computed, input, output } from '@angular/core';
+import { MatButton } from '@angular/material/button';
+import { ReactiveFormsModule } from '@angular/forms';
+import { AIOrManualSubmitEvent } from './AIOrManualSubmitEvent';
+import { FileUpload } from '../../../../shared/components/file-upload/file-upload';
+import { FileUploadEvent } from '../../../../shared/components/file-upload/FileUploadEvent';
+
+@Component({
+    selector: 'app-ai-or-manual',
+    imports: [MatButton, ReactiveFormsModule, FileUpload],
+    templateUrl: './ai-or-manual.html',
+    styleUrl: './ai-or-manual.css',
+})
+export class AiOrManual {
+    public sourceFile = input.required<File | null>();
+    public sourceFileChange = output<FileUploadEvent>();
+    public submitStep = output<AIOrManualSubmitEvent>();
+
+    protected readonly sourceFilesArray = computed(() => {
+        const maybeSourceFile = this.sourceFile();
+        if (maybeSourceFile) {
+            return [maybeSourceFile];
+        } else {
+            return [];
+        }
+    });
+
+    protected onFileChange(event: FileUploadEvent) {
+        this.sourceFileChange.emit(event);
+    }
+
+    protected onFormSubmit(mode: 'manual' | 'ai-assist') {
+        this.submitStep.emit({ mode });
+    }
+}

src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.css

@@ -0,0 +1,5 @@
+form {
+    display: flex;
+    flex-direction: column;
+    width: 60ch;
+}

src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.html

@@ -0,0 +1,15 @@
+<h2>Enter Recipe</h2>
+<form [formGroup]="recipeFormGroup">
+    <mat-form-field>
+        <mat-label>Title</mat-label>
+        <input matInput [formControl]="recipeFormGroup.controls.title">
+    </mat-form-field>
+    <mat-form-field>
+        <mat-label>Slug</mat-label>
+        <input matInput [formControl]="recipeFormGroup.controls.slug">
+    </mat-form-field>
+    <mat-form-field>
+        <mat-label>Recipe Text</mat-label>
+        <textarea matInput [formControl]="recipeFormGroup.controls.text"></textarea>
+    </mat-form-field>
+</form>

src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EnterRecipeData } from './enter-recipe-data';
+
+describe('EnterRecipeData', () => {
+    let component: EnterRecipeData;
+    let fixture: ComponentFixture<EnterRecipeData>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [EnterRecipeData],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(EnterRecipeData);
+        component = fixture.componentInstance;
+        await fixture.whenStable();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.ts

@@ -0,0 +1,29 @@
+import { Component, input, OnInit } from '@angular/core';
+import { RecipeUploadModel } from '../../../../shared/client-models/RecipeUploadModel';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MatFormField, MatInput, MatLabel } from '@angular/material/input';
+
+@Component({
+    selector: 'app-enter-recipe-data',
+    imports: [ReactiveFormsModule, MatFormField, MatLabel, MatInput],
+    templateUrl: './enter-recipe-data.html',
+    styleUrl: './enter-recipe-data.css',
+})
+export class EnterRecipeData implements OnInit {
+    public readonly model = input.required<RecipeUploadModel>();
+
+    public ngOnInit(): void {
+        const model = this.model();
+        this.recipeFormGroup.patchValue({
+            title: model.userTitle ?? model.inferredTitle ?? '',
+            slug: model.userSlug ?? model.inferredSlug ?? '',
+            text: model.userText ?? model.inferredText ?? '',
+        });
+    }
+
+    protected readonly recipeFormGroup = new FormGroup({
+        title: new FormControl('', Validators.required),
+        slug: new FormControl('', Validators.required),
+        text: new FormControl('', Validators.required),
+    });
+}

src/app/pages/recipe-upload-page/steps/infer/infer.html

@@ -0,0 +1,2 @@
+<p>Using AI to read your recipe...</p>
+<app-spinner></app-spinner>

src/app/pages/recipe-upload-page/steps/infer/infer.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Infer } from './infer';
+
+describe('Infer', () => {
+    let component: Infer;
+    let fixture: ComponentFixture<Infer>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [Infer],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(Infer);
+        component = fixture.componentInstance;
+        await fixture.whenStable();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

src/app/pages/recipe-upload-page/steps/infer/infer.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { Spinner } from '../../../../shared/components/spinner/spinner';
+
+@Component({
+    selector: 'app-infer',
+    imports: [Spinner],
+    templateUrl: './infer.html',
+    styleUrl: './infer.css',
+})
+export class Infer {}

src/app/shared/client-models/RecipeUploadIngredientModel.ts

@@ -0,0 +1,5 @@
+export interface RecipeUploadIngredientModel {
+    amount: string | null;
+    name: string;
+    notes: string | null;
+}

src/app/shared/client-models/RecipeUploadModel.ts

@@ -0,0 +1,19 @@
+import { RecipeUploadIngredientModel } from './RecipeUploadIngredientModel';
+import { RecipeUploadStep } from './RecipeUploadStep';
+
+export interface RecipeUploadModel {
+    inProgressStep: RecipeUploadStep;
+
+    id?: number | null;
+    sourceFile?: File | null;
+
+    inferredText?: string | null;
+    inferredIngredients?: RecipeUploadIngredientModel[] | null;
+    inferredTitle?: string | null;
+    inferredSlug?: string | null;
+
+    userText?: string | null;
+    userIngredients?: RecipeUploadIngredientModel[] | null;
+    userTitle?: string | null;
+    userSlug?: string | null;
+}

src/app/shared/client-models/RecipeUploadStep.ts

@@ -0,0 +1,5 @@
+export enum RecipeUploadStep {
+    START,
+    INFER,
+    ENTER_DATA,
+}

src/app/shared/components/file-upload/FileUploadEvent.ts

@@ -0,0 +1,11 @@
+export type FileUploadEvent = FileAddEvent | FileRemoveEvent;
+
+export interface FileAddEvent {
+    _tag: 'file-add-event';
+    file: File;
+}
+
+export interface FileRemoveEvent {
+    _tag: 'file-remove-event';
+    fileName: string;
+}

src/app/shared/components/file-upload/file-upload.css

@@ -0,0 +1,14 @@
+.file-input-container {
+    display: flex;
+    column-gap: 10px;
+    padding-block: 10px;
+}
+
+.file-name {
+    display: flex;
+    column-gap: 5px;
+}
+
+fa-icon {
+    cursor: pointer;
+}

src/app/shared/components/file-upload/file-upload.html

@@ -0,0 +1,11 @@
+<input #fileInput type="file" (change)="onFileChange($event)" style="display: none" />
+<div class="file-input-container">
+    <fa-icon [icon]="faFileUpload" size="3x" (click)="onFileUploadIconClick(fileInput)"></fa-icon>
+    @if (fileNames().length) {
+        @for (fileName of fileNames(); track $index) {
+            <p class="file-name"><fa-icon [icon]="faCancel" (click)="onClear(fileName)"></fa-icon>{{ fileName }}</p>
+        }
+    } @else {
+        <p>Click the icon to choose a file.</p>
+    }
+</div>

src/app/shared/components/file-upload/file-upload.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FileUpload } from './file-upload';
+
+describe('FileUpload', () => {
+    let component: FileUpload;
+    let fixture: ComponentFixture<FileUpload>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [FileUpload],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(FileUpload);
+        component = fixture.componentInstance;
+        await fixture.whenStable();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

src/app/shared/components/file-upload/file-upload.ts

@@ -0,0 +1,42 @@
+import { Component, computed, input, output } from '@angular/core';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { faCancel, faFileUpload } from '@fortawesome/free-solid-svg-icons';
+import { FileUploadEvent } from './FileUploadEvent';
+
+@Component({
+    selector: 'app-file-upload',
+    imports: [FaIconComponent],
+    templateUrl: './file-upload.html',
+    styleUrl: './file-upload.css',
+})
+export class FileUpload {
+    public readonly files = input<File[]>([]);
+    public readonly fileChange = output<FileUploadEvent>();
+
+    protected fileNames = computed(() => this.files().map((file) => file.name));
+
+    protected onFileUploadIconClick(target: HTMLInputElement) {
+        target.click();
+    }
+
+    protected onClear(fileName: string): void {
+        this.fileChange.emit({
+            _tag: 'file-remove-event',
+            fileName,
+        });
+    }
+
+    protected onFileChange(event: Event) {
+        const fileInput = event.target as HTMLInputElement;
+        if (fileInput.files && fileInput.files.length) {
+            this.fileChange.emit({
+                _tag: 'file-add-event',
+                file: fileInput.files[0],
+            });
+        }
+        fileInput.value = '';
+    }
+
+    protected readonly faFileUpload = faFileUpload;
+    protected readonly faCancel = faCancel;
+}

src/app/shared/components/header/header.html

@@ -3,11 +3,11 @@
     @if (isLoggedIn()) {
         <div id="header-login">
             <p>Welcome {{ username() }}!</p>
-            <button matButton="tonal" (click)="logoutClick()">Logout</button>
+            <button matButton="elevated" (click)="logoutClick()">Logout</button>
         </div>
     } @else {
         <div id="header-login">
-            <button matButton="tonal" (click)="loginClick()">Login</button>
+            <button matButton="elevated" (click)="loginClick()">Login</button>
         </div>
     }
 </header>

src/app/shared/components/nav/nav.html

@@ -3,6 +3,6 @@
     <ul>
         <li><a [routerLink]="'/'">Browse Recipes</a></li>
         <li><a [routerLink]="'/recipes-search'">Search Recipes</a></li>
-        <li><a [routerLink]="'/recipes-upload'">Upload Recipe</a></li>
+        <li><a [routerLink]="'/recipe-upload'">Upload Recipe</a></li>
     </ul>
 </nav>

src/app/shared/components/spinner/spinner.ts

@@ -7,5 +7,5 @@ import { Component, input } from '@angular/core';
     styleUrl: './spinner.css',
 })
 export class Spinner {
-    public readonly enabled = input.required<boolean>();
+    public readonly enabled = input(true);
 }

src/app/shared/services/RecipeUploadService.ts

@@ -0,0 +1,31 @@
+import { inject, Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { delay, Observable, of } from 'rxjs';
+import { RecipeUploadModel } from '../client-models/RecipeUploadModel';
+import { RecipeUploadStep } from '../client-models/RecipeUploadStep';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class RecipeUploadService {
+    private readonly http = inject(HttpClient);
+
+    public getRecipeUploadModel(draftId: number): Observable<RecipeUploadModel> {
+        return of({
+            inProgressStep: RecipeUploadStep.ENTER_DATA,
+            id: 42
+        });
+    }
+
+    public doInference(model: RecipeUploadModel): Observable<RecipeUploadModel> {
+        return of({
+            inProgressStep: RecipeUploadStep.ENTER_DATA,
+            id: 16,
+            inferredTitle: 'Some recipe',
+            inferredSlug: 'some-recipe',
+            inferredText: 'Some text.',
+            inferredIngredients: []
+        }).pipe(delay(5_000));
+    }
+
+}

src/app/shared/util.ts

@@ -0,0 +1,23 @@
+export const tryInt = (s: string): number | null => {
+    try {
+        return parseInt(s);
+    } catch (e) {
+        console.error(e);
+        return null;
+    }
+};
+
+export const tryMaybeInt = (maybeString: string | null): number | null => {
+    if (maybeString) {
+        try {
+            return parseInt(maybeString);
+        } catch (e) {
+            console.error(e);
+        }
+    }
+    return null;
+};
+
+export const hasValue = <T>(value?: T | null): value is T => {
+    return value !== undefined && value !== null;
+};

src/material-theme.scss

@@ -20,9 +20,11 @@ html {
     );
 }
 
-@include mat.form-field-overrides((
+@include mat.form-field-overrides(
+    (
         filled-container-color: var(--mat-sys-surface-variant),
-));
+    )
+);
 
 body {
     // Default the application to a light color theme. This can be changed to

src/theme-colors.scss

@@ -1,8 +1,8 @@
 // This file was generated by running 'ng generate @angular/material:theme-color'.
 // Proceed with caution if making changes to this file.
 
-@use 'sass:map';
+@use "sass:map";
-@use '@angular/material' as mat;
+@use "@angular/material" as mat;
 
 // Note: Color palettes are generated from primary: #91351d, secondary: #ffb61d, neutral: #aaa, neutral variant: #252525
 $_palettes: (