jessebrault/meals-made-easy-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: jessebrault:f673db572e27d5458ebcea81b746620438411a84
Branches Tags
jessebrault:main
jessebrault:with-ng-mat
..
compare: jessebrault:2bb206b8bf6086644a8307a72abdff18c38084e8
Branches Tags
jessebrault:main
jessebrault:with-ng-mat

No commits in common. "f673db572e27d5458ebcea81b746620438411a84" and "2bb206b8bf6086644a8307a72abdff18c38084e8" have entirely different histories.
f673db572e ... 2bb206b8bf

36 changed files with 216 additions and 837 deletions
Show Stats Expand all files Collapse all files

2
src/app/app.routes.ts
View File

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

20
src/app/pages/recipe-upload-page/recipe-upload-page.html
View File

@ -1,25 +1,6 @@
<div id="recipe-upload-container"> <div id="recipe-upload-container">
<h1>Upload Recipe</h1> <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> <section>
<h2>Auto-Complete Recipe (Optional)</h2> <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> <p>Choose a photo of a recipe from your files, and AI will fill out the form below for you.</p>
@ -61,5 +42,4 @@
</div> </div>
</div> </div>
</section> </section>
-->
</div> </div>

274
src/app/pages/recipe-upload-page/recipe-upload-page.ts
View File

@ -1,212 +1,100 @@
import { Component, computed, inject, OnInit, signal } from '@angular/core'; import { Component, inject, signal } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms'; import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { AiOrManual } from './steps/ai-or-manual/ai-or-manual'; import { SseClient } from 'ngx-sse-client';
import { AIOrManualSubmitEvent } from './steps/ai-or-manual/AIOrManualSubmitEvent'; import { Spinner } from '../../shared/components/spinner/spinner';
import { Infer } from './steps/infer/infer'; import { MatButton } from '@angular/material/button';
import { EnterRecipeData } from './steps/enter-recipe-data/enter-recipe-data'; import { MatFormField, MatInput, MatLabel } from '@angular/material/input';
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({ @Component({
selector: 'app-recipe-upload-page', selector: 'app-recipe-upload-page',
imports: [ReactiveFormsModule, AiOrManual, Infer, EnterRecipeData, RecipeUploadTrail], imports: [ReactiveFormsModule, Spinner, MatButton, MatFormField, MatInput, MatLabel],
templateUrl: './recipe-upload-page.html', templateUrl: './recipe-upload-page.html',
styleUrl: './recipe-upload-page.css', styleUrl: './recipe-upload-page.css',
}) })
export class RecipeUploadPage implements OnInit { export class RecipeUploadPage {
protected readonly model = signal<RecipeUploadModel>({ private readonly sseClient = inject(SseClient);
inProgressStep: RecipeUploadStep.START, 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 displayStep = signal<number>(RecipeUploadStep.START); protected readonly recipeForm = new FormGroup({
protected readonly inProgressStep = computed(() => this.model().inProgressStep); title: new FormControl('', [Validators.required]),
protected readonly includeInfer = signal(false); recipeText: new FormControl('', Validators.required),
protected readonly sourceFile = computed(() => this.model().sourceFile ?? null); });
private readonly router = inject(Router); protected onClear() {
private readonly activatedRoute = inject(ActivatedRoute); this.recipeUploadForm.reset();
private readonly recipeUploadService = inject(RecipeUploadService); this.sourceRecipeImage.set(null);
public ngOnInit(): void {
this.activatedRoute.queryParamMap
.pipe(
map((paramMap) => {
const draftIdParam: string | null = paramMap.get('draftId');
const draftId = tryMaybeInt(draftIdParam);
const stepParam: string | null = paramMap.get('step');
const step = tryMaybeInt(stepParam);
return [draftId, step];
}),
switchMap(([draftId, step]) => {
const currentModel = this.model();
if (draftId !== null && currentModel.id !== draftId) {
return this.recipeUploadService.getRecipeUploadModel(draftId).pipe(
tap((updatedModel) => {
this.model.set(updatedModel);
}),
switchMap((updatedModel) => {
if (step !== null && step <= updatedModel.inProgressStep) {
return from(this.changeDisplayStep(step));
} else {
return from(this.changeDisplayStep(updatedModel.inProgressStep));
}
}),
);
} 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> { protected onFileChange(event: Event) {
this.displayStep.set(targetStep); const fileInput = event.target as HTMLInputElement;
await this.router.navigate([], { if (fileInput.files && fileInput.files.length) {
relativeTo: this.activatedRoute, const file = fileInput.files[0];
queryParams: { this.recipeUploadForm.controls.file.setValue(file);
step: targetStep, this.recipeUploadForm.controls.file.markAsTouched();
draftId: this.model().id, 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);
}, },
queryParamsHandling: 'merge',
}); });
} }
protected async onStepClick(event: StepClickEvent): Promise<void> { protected onRecipeSubmit() {
await this.changeDisplayStep(event.step); console.log(this.recipeForm.value);
} }
protected onSourceFileChange(event: FileUploadEvent) { protected onRecipeTextChange(event: Event) {
if (event._tag === 'file-add-event') { const textarea = event.target as HTMLTextAreaElement;
this.model.update((model) => ({ textarea.style.height = 'auto';
...model, textarea.style.height = textarea.scrollHeight + 'px';
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;
}

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

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

32
src/app/pages/recipe-upload-page/recipe-upload-trail/recipe-upload-trail.css
View File

@ -1,32 +0,0 @@
#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;
}

18
src/app/pages/recipe-upload-page/recipe-upload-trail/recipe-upload-trail.html
View File

@ -1,18 +0,0 @@
<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>

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

@ -1,22 +0,0 @@
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();
});
});

53
src/app/pages/recipe-upload-page/recipe-upload-trail/recipe-upload-trail.ts
View File

@ -1,53 +0,0 @@
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 });
}
}

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

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

0
src/app/pages/recipe-upload-page/steps/ai-or-manual/ai-or-manual.css
View File

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

@ -1,11 +0,0 @@
<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>

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

@ -1,22 +0,0 @@
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();
});
});

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

@ -1,35 +0,0 @@
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 });
}
}

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

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

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

@ -1,15 +0,0 @@
<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>

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

@ -1,22 +0,0 @@
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();
});
});

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

@ -1,29 +0,0 @@
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),
});
}

0
src/app/pages/recipe-upload-page/steps/infer/infer.css
View File

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

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

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

@ -1,22 +0,0 @@
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();
});
});

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

@ -1,10 +0,0 @@
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 {}

5
src/app/shared/client-models/RecipeUploadIngredientModel.ts
View File

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

19
src/app/shared/client-models/RecipeUploadModel.ts
View File

@ -1,19 +0,0 @@
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;
}

5
src/app/shared/client-models/RecipeUploadStep.ts
View File

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

11
src/app/shared/components/file-upload/FileUploadEvent.ts
View File

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

14
src/app/shared/components/file-upload/file-upload.css
View File

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

11
src/app/shared/components/file-upload/file-upload.html
View File

@ -1,11 +0,0 @@
<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>

22
src/app/shared/components/file-upload/file-upload.spec.ts
View File

@ -1,22 +0,0 @@
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();
});
});

42
src/app/shared/components/file-upload/file-upload.ts
View File

@ -1,42 +0,0 @@
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;
}

4
src/app/shared/components/header/header.html
View File

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

2
src/app/shared/components/nav/nav.html
View File

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

2
src/app/shared/components/spinner/spinner.ts
View File

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

31
src/app/shared/services/RecipeUploadService.ts
View File

@ -1,31 +0,0 @@
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));
}
}

23
src/app/shared/util.ts
View File

@ -1,23 +0,0 @@
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;
};

6
src/material-theme.scss
View File

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

4
src/theme-colors.scss
View File

@ -1,8 +1,8 @@
// This file was generated by running 'ng generate @angular/material:theme-color'. // This file was generated by running 'ng generate @angular/material:theme-color'.
// Proceed with caution if making changes to this file. // 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 // Note: Color palettes are generated from primary: #91351d, secondary: #ffb61d, neutral: #aaa, neutral variant: #252525
$_palettes: ( $_palettes: (