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,
},
{
path: 'recipe-upload',
path: 'recipes-upload',
component: RecipeUploadPage,
},
{

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

@ -1,25 +1,6 @@
<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>
@ -61,5 +42,4 @@
</div>
</div>
</section>
-->
</div>

280
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 { ReactiveFormsModule } from '@angular/forms';
import { AiOrManual } from './steps/ai-or-manual/ai-or-manual';
import { AIOrManualSubmitEvent } from './steps/ai-or-manual/AIOrManualSubmitEvent';
import { Infer } from './steps/infer/infer';
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';
import { Component, inject, signal } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { SseClient } from 'ngx-sse-client';
import { Spinner } from '../../shared/components/spinner/spinner';
import { MatButton } from '@angular/material/button';
import { MatFormField, MatInput, MatLabel } from '@angular/material/input';
@Component({
selector: 'app-recipe-upload-page',
imports: [ReactiveFormsModule, AiOrManual, Infer, EnterRecipeData, RecipeUploadTrail],
imports: [ReactiveFormsModule, Spinner, MatButton, MatFormField, MatInput, MatLabel],
templateUrl: './recipe-upload-page.html',
styleUrl: './recipe-upload-page.css',
})
export class RecipeUploadPage implements OnInit {
protected readonly model = signal<RecipeUploadModel>({
inProgressStep: RecipeUploadStep.START,
export class RecipeUploadPage {
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 displayStep = signal<number>(RecipeUploadStep.START);
protected readonly inProgressStep = computed(() => this.model().inProgressStep);
protected readonly includeInfer = signal(false);
protected readonly sourceFile = computed(() => this.model().sourceFile ?? null);
protected readonly recipeForm = new FormGroup({
title: new FormControl('', [Validators.required]),
recipeText: new FormControl('', Validators.required),
});
private readonly router = inject(Router);
private readonly activatedRoute = inject(ActivatedRoute);
private readonly recipeUploadService = inject(RecipeUploadService);
protected onClear() {
this.recipeUploadForm.reset();
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));
}
}),
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();
}
.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,
});
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,
},
queryParamsHandling: 'merge',
});
}
protected async onStepClick(event: StepClickEvent): Promise<void> {
await this.changeDisplayStep(event.step);
}
protected onSourceFileChange(event: FileUploadEvent) {
if (event._tag === 'file-add-event') {
this.model.update((model) => ({
...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);
// must do this so we auto-resize the textarea
document.getElementById('recipe-text')?.dispatchEvent(new Event('input', { bubbles: true }));
}
},
complete: () => {
this.inferenceInProgress.set(false);
},
});
}
}
// 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;
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';
}
}

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()) {
<div id="header-login">
<p>Welcome {{ username() }}!</p>
<button matButton="elevated" (click)="logoutClick()">Logout</button>
<button matButton="tonal" (click)="logoutClick()">Logout</button>
</div>
} @else {
<div id="header-login">
<button matButton="elevated" (click)="loginClick()">Login</button>
<button matButton="tonal" (click)="loginClick()">Login</button>
</div>
}
</header>

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

@ -3,6 +3,6 @@
<ul>
<li><a [routerLink]="'/'">Browse 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>
</nav>

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

@ -7,5 +7,5 @@ import { Component, input } from '@angular/core';
styleUrl: './spinner.css',
})
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;
};

8
src/material-theme.scss
View File

@ -20,11 +20,9 @@ html {
);
}
@include mat.form-field-overrides(
(
filled-container-color: var(--mat-sys-surface-variant),
)
);
@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

248
src/theme-colors.scss
View File

@ -1,136 +1,136 @@
// 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 "@angular/material" as mat;
@use 'sass:map';
@use '@angular/material' as mat;
// Note: Color palettes are generated from primary: #91351d, secondary: #ffb61d, neutral: #aaa, neutral variant: #252525
$_palettes: (
primary: (
0: #000000,
10: #3c0800,
20: #611200,
25: #711e07,
30: #802912,
35: #90341c,
40: #a04027,
50: #c0573c,
60: #e07053,
70: #ff8b6d,
80: #ffb4a2,
90: #ffdbd2,
95: #ffede9,
98: #fff8f6,
99: #fffbff,
100: #ffffff,
),
secondary: (
0: #000000,
10: #281900,
20: #432c00,
25: #513600,
30: #5f4100,
35: #6f4c00,
40: #7e5700,
50: #9e6e00,
60: #bf8600,
70: #e29f00,
80: #ffba36,
90: #ffdeac,
95: #ffeed9,
98: #fff8f3,
99: #fffbff,
100: #ffffff,
),
tertiary: (
0: #000000,
10: #241a00,
20: #3d2f00,
25: #4a3900,
30: #584400,
35: #665000,
40: #735b0d,
50: #8e7426,
60: #aa8e3e,
70: #c6a855,
80: #e3c36d,
90: #ffe08e,
95: #ffefce,
98: #fff8f1,
99: #fffbff,
100: #ffffff,
),
neutral: (
0: #000000,
10: #1a1c1c,
20: #2f3131,
25: #3a3c3c,
30: #464747,
35: #525253,
40: #5e5e5f,
50: #767777,
60: #909191,
70: #ababab,
80: #c7c6c6,
90: #e3e2e2,
95: #f1f0f0,
98: #faf9f9,
99: #fdfcfc,
100: #ffffff,
4: #0d0e0f,
6: #121414,
12: #1e2020,
17: #292a2a,
22: #343535,
24: #38393a,
87: #dadada,
92: #e9e8e8,
94: #eeeeed,
96: #f4f3f3,
),
neutral-variant: (
0: #000000,
10: #1b1c1c,
20: #303030,
25: #3c3b3b,
30: #474746,
35: #535252,
40: #5f5e5e,
50: #787776,
60: #929090,
70: #adabaa,
80: #c8c6c5,
90: #e4e2e1,
95: #f3f0ef,
98: #fcf9f8,
99: #fffbfb,
100: #ffffff,
),
error: (
0: #000000,
10: #410002,
20: #690005,
25: #7e0007,
30: #93000a,
35: #a80710,
40: #ba1a1a,
50: #de3730,
60: #ff5449,
70: #ff897d,
80: #ffb4ab,
90: #ffdad6,
95: #ffedea,
98: #fff8f7,
99: #fffbff,
100: #ffffff,
),
primary: (
0: #000000,
10: #3c0800,
20: #611200,
25: #711e07,
30: #802912,
35: #90341c,
40: #a04027,
50: #c0573c,
60: #e07053,
70: #ff8b6d,
80: #ffb4a2,
90: #ffdbd2,
95: #ffede9,
98: #fff8f6,
99: #fffbff,
100: #ffffff,
),
secondary: (
0: #000000,
10: #281900,
20: #432c00,
25: #513600,
30: #5f4100,
35: #6f4c00,
40: #7e5700,
50: #9e6e00,
60: #bf8600,
70: #e29f00,
80: #ffba36,
90: #ffdeac,
95: #ffeed9,
98: #fff8f3,
99: #fffbff,
100: #ffffff,
),
tertiary: (
0: #000000,
10: #241a00,
20: #3d2f00,
25: #4a3900,
30: #584400,
35: #665000,
40: #735b0d,
50: #8e7426,
60: #aa8e3e,
70: #c6a855,
80: #e3c36d,
90: #ffe08e,
95: #ffefce,
98: #fff8f1,
99: #fffbff,
100: #ffffff,
),
neutral: (
0: #000000,
10: #1a1c1c,
20: #2f3131,
25: #3a3c3c,
30: #464747,
35: #525253,
40: #5e5e5f,
50: #767777,
60: #909191,
70: #ababab,
80: #c7c6c6,
90: #e3e2e2,
95: #f1f0f0,
98: #faf9f9,
99: #fdfcfc,
100: #ffffff,
4: #0d0e0f,
6: #121414,
12: #1e2020,
17: #292a2a,
22: #343535,
24: #38393a,
87: #dadada,
92: #e9e8e8,
94: #eeeeed,
96: #f4f3f3,
),
neutral-variant: (
0: #000000,
10: #1b1c1c,
20: #303030,
25: #3c3b3b,
30: #474746,
35: #535252,
40: #5f5e5e,
50: #787776,
60: #929090,
70: #adabaa,
80: #c8c6c5,
90: #e4e2e1,
95: #f3f0ef,
98: #fcf9f8,
99: #fffbfb,
100: #ffffff,
),
error: (
0: #000000,
10: #410002,
20: #690005,
25: #7e0007,
30: #93000a,
35: #a80710,
40: #ba1a1a,
50: #de3730,
60: #ff5449,
70: #ff897d,
80: #ffb4ab,
90: #ffdad6,
95: #ffedea,
98: #fff8f7,
99: #fffbff,
100: #ffffff,
),
);
$_rest: (
secondary: map.get($_palettes, secondary),
neutral: map.get($_palettes, neutral),
neutral-variant: map.get($_palettes, neutral-variant),
error: map.get($_palettes, error),
secondary: map.get($_palettes, secondary),
neutral: map.get($_palettes, neutral),
neutral-variant: map.get($_palettes, neutral-variant),
error: map.get($_palettes, error),
);
$primary-palette: map.merge(map.get($_palettes, primary), $_rest);