update recipe model

client/src/app/core/models/recipe.model.ts

@@ -1,54 +1,141 @@
 export interface Recipe {
+  Timestamp: Date;
+  MachineSetting: MachineSetting;
+  Recipe01: Recipe01[];
+  Topping: Topping;
+  MaterailCode: MaterailCode[];
+}
+
+export interface MachineSetting {
+  RecipeTag: string;
+  StrTextShowError: string[];
+  configNumber: string;
+  temperatureMax: string;
+  temperatureMin: string;
+}
+
+export interface MaterailCode {
+  PackageDescription: string;
+  RefillValuePerStep: string;
+  materialID: string;
+  materialCode: string;
+}
+
+export interface Recipe01 {
   Description: string;
-  ExtendID: number;
-  OnTOP: boolean;
-  LastChange: Date;
-  MenuStatus: number;
+  ExtendID: string;
+  OnTOP: string;
+  LastChange: string;
+  MenuStatus: string;
   RemainingCups: string;
   StringParam: string;
   TextForWarningBeforePay: string[];
-  cashPrice: number;
+  cashPrice: string;
   changerecipe: string;
-  disable: boolean;
-  disable_by_cup: boolean;
-  disable_by_ice: boolean;
-  EncoderCount: number;
-  id: number;
-  isUse: boolean;
-  isShow: boolean;
+  disable: string;
+  disable_by_cup: string;
+  disable_by_ice: string;
+  EncoderCount: string;
+  id: string;
+  isUse: string;
+  isShow: string;
   name: string;
-  nonCashPrice: number;
+  nonCashPrice: string;
   otherDescription: string;
   otherName: string;
   productCode: string;
   recipes: MatRecipe[];
-  SubMenu: Recipe[];
+  SubMenu: Recipe01[];
   ToppingSet: ToppingSet[];
-  total_time: number;
-  total_weight: number;
+  total_time: string;
+  total_weight: string;
   uriData: string;
-  useGram: boolean;
-  weight_float: number;
+  useGram: string;
+  weight_float: string;
+}
+
+export interface Topping {
+  ToppingGroup: ToppingGroup;
+  ToppingList: ToppingList;
+}
+
+export interface ToppingGroup {
+  Desc: string;
+  groupID: string;
+  idDefault: string;
+  idInGroup: string;
+  inUse: string;
+  name: string;
+  otherName: string;
+}
+
+export interface ToppingList {
+  ExtendID: string;
+  OnTOP: string;
+  MenuStatus: string;
+  cashPrice: string;
+  disable: string;
+  disable_by_cup: string;
+  disable_by_ice: string;
+  EncoderCount: string;
+  id: string;
+  isUse: string;
+  isShow: string;
+  stringParam: string;
+  name: string;
+  nonCashPrice: string;
+  otherName: string;
+  productCode: string;
+  recipes: string;
+  total_time: string;
+  total_weight: string;
+  useGram: string;
+  weight_float: string;
 }
 
 export interface MatRecipe {
-  MixOrder: number;
-  FeedParameter: number;
-  FeedPattern: number;
-  isUse: boolean;
-  materialPathId: number;
-  powderGram: number;
-  powderTime: number;
-  stirTime: number;
-  syrupGram: number;
-  syrupTime: number;
-  waterCold: number;
-  waterYield: number;
+  MixOrder: string;
+  FeedParameter: string;
+  FeedPattern: string;
+  isUse: string;
+  materialPathId: string;
+  powderGram: string;
+  powderTime: string;
+  stirTime: string;
+  syrupGram: string;
+  syrupTime: string;
+  waterCold: string;
+  waterYield: string;
 }
 
 export interface ToppingSet {
-  ListGroupID: number[];
-  defaultIDSelect: number;
+  ListGroupID: string;
+  defaultIDSelect: string;
   groupID: string;
-  isUse: boolean;
+  isUse: string;
+}
+
+export interface MaterialSetting {
+  AlarmIDWhenOffline: string;
+  BeanChannel: string;
+  CanisterType: string;
+  DrainTimer: string;
+  IsEquipment: string;
+  LeavesChannel: string;
+  LowToOffline: string;
+  MaterialStatus: string;
+  PowderChannel: string;
+  RefillUnitGram: string;
+  RefillUnitMilliliters: string;
+  RefillUnitPCS: string;
+  ScheduleDrainType: string;
+  SodaChannel: string;
+  StockAdjust: string;
+  SyrupChannel: string;
+  id: string;
+  idAlternate: string;
+  isUse: string;
+  pay_rettry_max_count: string;
+  feed_mode: string;
+  MaterialParameter: string;
 }

client/src/app/core/services/jwt.service.ts

@@ -1,16 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({ providedIn: 'root' })
-export class JwtService {
-  getToken(): string | null {
-    return window.localStorage['jwtToken'];
-  }
-
-  saveToken(token: string): void {
-    window.localStorage['jwtToken'] = token;
-  }
-
-  destroyToken(): void {
-    window.localStorage.removeItem('jwtToken');
-  }
-}

client/src/app/core/services/recipe.service.ts

@@ -0,0 +1,16 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable, distinctUntilChanged } from 'rxjs';
+import { Recipe } from '../models/recipe.model';
+import { environment } from 'src/environments/environment';
+
+@Injectable({ providedIn: 'root' })
+export class RecipeService {
+  constructor(private _httpClient: HttpClient) {}
+
+  getRecipes(): Observable<Recipe> {
+    return this._httpClient.get<Recipe>(environment.api + '/recipes', {
+      withCredentials: true,
+    });
+  }
+}

client/src/app/features/dashboard/dashboard.component.html

@@ -5,7 +5,22 @@
   >
     <caption
       class="p-5 text-lg font-semibold text-left text-gray-900 bg-primary"
-    ></caption>
+    >
+      <div class="flex flex-row">
+        <div class="flex flex-col">
+          <span
+            >Recipe Version {{ recipes?.MachineSetting?.configNumber }} |
+            {{"{{File name}}"}}</span
+          >
+        </div>
+        <div class="flex flex-col ml-auto">
+          <span class=""
+            >Last Updated:
+            {{ recipes?.Timestamp | date : "dd-MMM-yyyy hh:mm:ss" }}</span
+          >
+        </div>
+      </div>
+    </caption>
     <thead class="text-xs sticky top-0 text-gray-700 uppercase bg-secondary">
       <tr>
         <th scope="col" class="px-6 py-3" *ngFor="let head of tableHeads">
@@ -48,19 +63,31 @@
     </thead>
     <tbody>
       <tr
-        *ngFor="let recipe of recipes"
+        *ngFor="let recipe of recipes!.Recipe01"
         class="bg-white la border-b hover:bg-secondary"
       >
         <th
           scope="row"
-          class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
+          class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap"
         >
           {{ recipe.name }}
         </th>
         <td class="px-6 py-4">{{ recipe.otherName }}</td>
-        <td class="px-6 py-4">{{ recipe.Description }}</td>
-        <td class="px-6 py-4">{{ recipe.LastChange }}</td>
+        <td class="px-6 py-4 flex-wrap max-w-xs">{{ recipe.Description }}</td>
         <td class="px-6 py-4">
+          {{ recipe.LastChange | date : "dd-MMM-yyyy hh:mm:ss" }}
+        </td>
+        <td class="px-6 py-4 flex gap-2">
+          <a
+            href="#"
+            class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
+            >Edit</a
+          >
+          <a
+            href="#"
+            class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
+            >Edit</a
+          >
           <a
             href="#"
             class="font-medium text-blue-600 dark:text-blue-500 hover:underline"

client/src/app/features/dashboard/dashboard.component.ts

@@ -2,27 +2,28 @@ import { Component, OnInit } from '@angular/core';
 import { UserService } from 'src/app/core/services/user.service';
 import { HttpClient } from '@angular/common/http';
 import { User } from 'src/app/core/models/user.model';
-import { NgFor, NgIf } from '@angular/common';
+import { DatePipe, NgFor, NgIf } from '@angular/common';
 import { initFlowbite } from 'flowbite';
 import { environment } from 'src/environments/environment';
 import { delay } from 'rxjs';
 import { Recipe } from 'src/app/core/models/recipe.model';
+import { RecipeService } from 'src/app/core/services/recipe.service';
 
 @Component({
   selector: 'app-dashboard',
   standalone: true,
-  imports: [NgIf, NgFor],
+  imports: [NgIf, NgFor, DatePipe],
   templateUrl: './dashboard.component.html',
 })
 export class DashboardComponent implements OnInit {
   userInfo: User | null = null;
-  recipes: Recipe[] | null = null;
+  recipes: Recipe | null = null;
   tableHeads: string[] = ['Name', 'Other Name', 'Description', 'Last Updated'];
   isLoaded: boolean = false;
 
   constructor(
     private _userService: UserService,
-    private _httpClient: HttpClient
+    private _recipeService: RecipeService
   ) {}
 
   ngOnInit(): void {
@@ -32,14 +33,10 @@ export class DashboardComponent implements OnInit {
       this.userInfo = user;
     });
 
-    this._httpClient
-      .get<{ Recipe01: Recipe[] }>(environment.api + '/recipes', {
-        withCredentials: true,
-      })
-      .subscribe(({ Recipe01 }) => {
-        this.recipes = Recipe01.slice(0, 10);
-        console.log(this.recipes);
-        this.isLoaded = true;
-      });
+    this._recipeService.getRecipes().subscribe((recipes) => {
+      this.recipes = recipes;
+      this.isLoaded = true;
+      console.log(this.recipes);
+    });
   }
 }