update select department page
This commit is contained in:
Kenta420
parent
872f0f2383
commit
baa5382c8b
5 changed files with 325 additions and 244 deletions
80
client/src/app/core/department/department.component.ts
Normal file
80
client/src/app/core/department/department.component.ts
Normal 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`]);
|
||||
}
|
||||
}
|
||||
|
|
@ -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'
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
|
|
@ -1,154 +1,154 @@
|
|||
<body class="overflow-auto">
|
||||
<nav class="fixed top-0 z-50 w-full bg-primary border-b border-gray-200">
|
||||
<div class="px-3 py-3 lg:px-5 lg:pl-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center justify-start">
|
||||
<button
|
||||
data-drawer-target="logo-sidebar"
|
||||
data-drawer-toggle="logo-sidebar"
|
||||
aria-controls="logo-sidebar"
|
||||
type="button"
|
||||
class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200"
|
||||
>
|
||||
<svg
|
||||
class="w-6 h-6"
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
<div class="overflow-auto">
|
||||
<nav class="fixed top-0 z-50 w-full bg-primary border-b border-gray-200">
|
||||
<div class="px-3 py-3 lg:px-5 lg:pl-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center justify-start">
|
||||
<button
|
||||
data-drawer-target="logo-sidebar"
|
||||
data-drawer-toggle="logo-sidebar"
|
||||
aria-controls="logo-sidebar"
|
||||
type="button"
|
||||
class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200"
|
||||
>
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
<a routerLink="/recipes" class="flex ml-14 max-sm:hidden">
|
||||
<img
|
||||
src="assets/logo.svg"
|
||||
class="h-10 md:h-20 px-4"
|
||||
alt="Tao Bin Logo"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center ml-3">
|
||||
<div class="flex flex-row">
|
||||
<div
|
||||
class="flex justify-center items-center sm:flex-row md:flex-col sm:px-5 w-[250px]"
|
||||
<svg
|
||||
class="w-6 h-6"
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<span
|
||||
class="flex items-center text-primary max-sm:text-xs sm:text-sm md:text-xl font-normal font-kanit"
|
||||
>
|
||||
{{ date | date : "dd MMM yyyy HH:mm:ss" }}
|
||||
</span>
|
||||
<p
|
||||
class="md:hidden px-1 flex items-center text-primary font-normal font-kanit"
|
||||
>
|
||||
|
|
||||
</p>
|
||||
<span
|
||||
class="flex items-center text-primary max-sm:text-xs sm:text-xs md:text-xl font-normal font-kanit"
|
||||
>
|
||||
{{ user?.name }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="dropdown dropdown-bottom dropdown-end">
|
||||
<label
|
||||
tabindex="0"
|
||||
class="btn btn-circle w-14 h-14 focus:ring ring-primary ring-offset-base-100 ring-offset-2 max-sm:hidden"
|
||||
>
|
||||
<div class="avatar">
|
||||
<div class="rounded-full">
|
||||
<img src="{{ user?.picture }}" alt="profile picture" />
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
<a routerLink="/recipes" class="flex ml-14 max-sm:hidden">
|
||||
<img
|
||||
src="assets/logo.svg"
|
||||
class="h-10 md:h-20 px-4"
|
||||
alt="Tao Bin Logo"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center ml-3">
|
||||
<div class="flex flex-row">
|
||||
<div
|
||||
tabindex="0"
|
||||
class="dropdown-content z-[-1] menu p-2 shadow bg-base-100 rounded-box w-52 divide-y divide-gray-100"
|
||||
class="flex justify-center items-center sm:flex-row md:flex-col sm:px-5 w-[250px]"
|
||||
>
|
||||
<div class="px-4 py-3" role="none">
|
||||
<p class="text-sm text-gray-900" role="none">
|
||||
{{ user?.name }}
|
||||
</p>
|
||||
<p
|
||||
class="text-sm font-medium text-gray-900 truncate"
|
||||
role="none"
|
||||
>
|
||||
{{ user?.email }}
|
||||
</p>
|
||||
<span
|
||||
class="flex items-center text-primary max-sm:text-xs sm:text-sm md:text-xl font-normal font-kanit"
|
||||
>
|
||||
{{ date | date : "dd MMM yyyy HH:mm:ss" }}
|
||||
</span>
|
||||
<p
|
||||
class="md:hidden px-1 flex items-center text-primary font-normal font-kanit"
|
||||
>
|
||||
|
|
||||
</p>
|
||||
<span
|
||||
class="flex items-center text-primary max-sm:text-xs sm:text-xs md:text-xl font-normal font-kanit"
|
||||
>
|
||||
{{ user?.name }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="dropdown dropdown-bottom dropdown-end">
|
||||
<label
|
||||
tabindex="0"
|
||||
class="btn btn-circle w-14 h-14 focus:ring ring-primary ring-offset-base-100 ring-offset-2 max-sm:hidden"
|
||||
>
|
||||
<div class="avatar">
|
||||
<div class="rounded-full">
|
||||
<img src="{{ user?.picture }}" alt="profile picture" />
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<div
|
||||
tabindex="0"
|
||||
class="dropdown-content z-[-1] menu p-2 shadow bg-base-100 rounded-box w-52 divide-y divide-gray-100"
|
||||
>
|
||||
<div class="px-4 py-3" role="none">
|
||||
<p class="text-sm text-gray-900" role="none">
|
||||
{{ user?.name }}
|
||||
</p>
|
||||
<p
|
||||
class="text-sm font-medium text-gray-900 truncate"
|
||||
role="none"
|
||||
>
|
||||
{{ user?.email }}
|
||||
</p>
|
||||
</div>
|
||||
<ul class="py-1" role="none">
|
||||
<li>
|
||||
<a
|
||||
routerLink="/recipes"
|
||||
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
||||
role="menuitem"
|
||||
>
|
||||
Dashboard</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
||||
role="menuitem"
|
||||
>Settings</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
||||
role="menuitem"
|
||||
(click)="logout()"
|
||||
>Sign out</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="py-1" role="none">
|
||||
<li>
|
||||
<a
|
||||
routerLink="/recipes"
|
||||
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
||||
role="menuitem"
|
||||
>
|
||||
Dashboard</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
||||
role="menuitem"
|
||||
>Settings</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
||||
role="menuitem"
|
||||
(click)="logout()"
|
||||
>Sign out</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="z-50 hidden my-4 text-base list-none bg-primary divide-y divide-gray-100 rounded shadow"
|
||||
id="dropdown-user"
|
||||
></div>
|
||||
<div
|
||||
class="z-50 hidden my-4 text-base list-none bg-primary divide-y divide-gray-100 rounded shadow"
|
||||
id="dropdown-user"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</nav>
|
||||
|
||||
<aside
|
||||
id="logo-sidebar"
|
||||
class="fixed top-0 left-0 z-40 w-64 h-screen sm:pt-20 md:pt-28 transition-transform -translate-x-full bg-primary border-r border-gray-200 sm:translate-x-0"
|
||||
aria-label="Sidebar"
|
||||
>
|
||||
<div class="h-full px-3 pb-4 overflow-y-auto bg-primary">
|
||||
<ul class="space-y-2 font-medium">
|
||||
<li *ngFor="let menu of menuItems">
|
||||
<a
|
||||
routerLink="{{ menu.link }}"
|
||||
routerLinkActive="bg-gray-100 text-gray-900"
|
||||
class="flex items-center p-2 text-gray-900 rounded-lg hover:bg-gray-100 group"
|
||||
>
|
||||
<img
|
||||
*ngIf="menu.icon_url"
|
||||
class="w-5 h-5 text-gray-500 transition duration-75 group-hover:text-gray-900"
|
||||
src="{{ menu.icon_url }}"
|
||||
alt="recipes icon"
|
||||
/>
|
||||
<span class="ml-3 capitalize font-kanit">{{ menu.name }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
<aside
|
||||
id="logo-sidebar"
|
||||
class="fixed top-0 left-0 z-40 w-64 h-screen sm:pt-20 md:pt-28 transition-transform -translate-x-full bg-primary border-r border-gray-200 sm:translate-x-0"
|
||||
aria-label="Sidebar"
|
||||
>
|
||||
<div class="h-full px-3 pb-4 overflow-y-auto bg-primary">
|
||||
<ul class="space-y-2 font-medium">
|
||||
<li *ngFor="let menu of menuItems">
|
||||
<a
|
||||
routerLink="{{ menu.link }}"
|
||||
routerLinkActive="bg-gray-100 text-gray-900"
|
||||
class="flex items-center p-2 text-gray-900 rounded-lg hover:bg-gray-100 group"
|
||||
>
|
||||
<img
|
||||
*ngIf="menu.icon_url"
|
||||
class="w-5 h-5 text-gray-500 transition duration-75 group-hover:text-gray-900"
|
||||
src="{{ menu.icon_url }}"
|
||||
alt="recipes icon"
|
||||
/>
|
||||
<span class="ml-3 capitalize font-kanit">{{ menu.name }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="fixed pt-10 sm:ml-64">
|
||||
<div class="p-2 sm:mt-5 md:mt-14">
|
||||
<router-outlet></router-outlet>
|
||||
<div class="fixed pt-10 sm:ml-64">
|
||||
<div class="p-2 sm:mt-5 md:mt-14">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue