pakin/Taobin-Recipe-Manager
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update select department page

Browse source
This commit is contained in:
Kenta420 2023-12-12 00:23:20 +07:00
parent 872f0f2383
commit baa5382c8b
5 changed files with 325 additions and 244 deletions
Download patch file Download diff file Expand all files Collapse all files

80
client/src/app/core/department/department.component.ts Normal file
View file

@ -0,0 +1,80 @@
import { Component } from '@angular/core';
import { CommonModule, NgOptimizedImage } from '@angular/common';
import { Router } from '@angular/router';
@Component({
standalone: true,
imports: [CommonModule, NgOptimizedImage],
template: `
<div
class="flex flex-row sm:flex-col gap-5 items-center justify-center h-screen bg-[#EAE6E1]"
>
<h1 class="font-bold text-amber-950 text-3xl hidden sm:block">
Select Product
</h1>
<div
class="flex flex-col sm:flex-row gap-10 items-center justify-center rounded border-dashed border-4 border-amber-800 p-5 ml-5 mr-5"
>
<button
*ngFor="let country of countries"
class="transition-transform duration-300 ease-in-out transform shadow-lg hover:scale-110 hover:shadow-xl"
>
<img
ngSrc="{{ country.img }}"
alt="{{ country.id }}"
width="200"
height="225"
priority="true"
(click)="onClick(country.id)"
/>
</button>
</div>
<div
class="flex flex-col sm:flex-row gap-10 items-center justify-center rounded border-dashed border-4 border-amber-800 p-5 ml-5 mr-5"
>
<button
*ngFor="let alpha of alphas"
class="transition-transform duration-300 ease-in-out transform hover:scale-110 hover:shadow-xl"
>
<img
ngSrc="{{ alpha.img }}"
alt="{{ alpha.id }}"
width="200"
height="225"
priority="true"
(click)="onClick(alpha.id)"
/>
</button>
</div>
</div>
`,
})
export class DepartmentComponent {
countries: { id: string; img: string }[] = [
{
id: 'tha',
img: 'assets/departments/tha_plate.png',
},
{
id: 'mys',
img: 'assets/departments/mys_plate.png',
},
{
id: 'aus',
img: 'assets/departments/aus_plate.png',
},
];
alphas: { id: string; img: string }[] = [
{
id: 'alpha-3',
img: 'assets/departments/alpha-3.png',
},
];
constructor(private router: Router) {}
onClick(id: string) {
void this.router.navigate([`/${id}/recipes`]);
}
}

44
client/src/app/core/department/select-country.component.ts
View file

@ -1,44 +0,0 @@
import { Component } from '@angular/core';
import {CommonModule, NgOptimizedImage} from '@angular/common';
@Component({
standalone: true,
imports: [CommonModule, NgOptimizedImage],
template: `
<div class="flex flex-row sm:flex-col gap-5 items-center justify-center h-screen bg-[#EAE6E1]">
<h1 class="font-bold text-amber-950 text-3xl hidden sm:block">Select Product</h1>
<div class="flex flex-col sm:flex-row gap-10 items-center justify-center rounded border-dashed border-4 border-amber-800 p-5 ml-5 mr-5">
<button *ngFor="let country of countries"
class="transition-transform duration-300 ease-in-out transform shadow-lg hover:scale-110 hover:shadow-xl">
<img ngSrc="{{country.img}}" alt="{{country.country}}" width="200" height="225" priority="true"/>
</button>
</div>
<div class="flex flex-col sm:flex-row gap-10 items-center justify-center rounded border-dashed border-4 border-amber-800 p-5 ml-5 mr-5">
<button *ngFor="let alpha of alphas"
class="transition-transform duration-300 ease-in-out transform hover:scale-110 hover:shadow-xl">
<img ngSrc="{{alpha.img}}" alt="{{alpha.alphaName}}" width="200" height="225" priority="true"/>
</button>
</div>
</div>
`
})
export class SelectCountryComponent {
countries: {country: string; img: string}[] = [{
country: 'Thai',
img: 'assets/departments/tha_plate.png'
}, {
country: 'Malaysia',
img: 'assets/departments/mys_plate.png'
}, {
country: 'Australia',
img: 'assets/departments/aus_plate.png'
}]
alphas: {alphaName: string; img: string}[] = [
{
alphaName: 'ALPHA-3',
img: 'assets/departments/alpha-3.png'
}
]
}