เพิ่มหน้ารายการอุปกรณ์

src/app/app.module.ts

@@ -16,7 +16,8 @@ import { ComponentsModule } from "./components/components.module";
 import { HomePageComponent } from './pages/home-page/home-page.component';
 import { FullCalendarModule } from "@fullcalendar/angular";
 import dayGridPlugin from '@fullcalendar/daygrid'; // a plugin!
-import interactionPlugin from '@fullcalendar/interaction'; // a plugin!
+import interactionPlugin from '@fullcalendar/interaction';
+import { EquipmentComponent } from './pages/equipment/equipment.component'; // a plugin!
 
 FullCalendarModule.registerPlugins([ // register FullCalendar plugins
   dayGridPlugin,
@@ -35,7 +36,7 @@ FullCalendarModule.registerPlugins([ // register FullCalendar plugins
     ToastrModule.forRoot(),
     FullCalendarModule
   ],
-  declarations: [AppComponent, AdminLayoutComponent, AuthLayoutComponent, HomePageComponent],
+  declarations: [AppComponent, AdminLayoutComponent, AuthLayoutComponent, HomePageComponent, EquipmentComponent],
   providers: [],
   bootstrap: [AppComponent]
 })

src/app/components/sidebar/sidebar.component.ts

@@ -16,6 +16,13 @@ export const ROUTES: RouteInfo[] = [
     class: ""
   },
   {
+    path: "/equipment",
+    title: "รายการอุปกรณ์",
+    rtlTitle: "",
+    icon: "icon-cart",
+    class: ""
+  },
+  {
     path: "/dashboard",
     title: "Dashboard",
     rtlTitle: "",

src/app/layouts/admin-layout/admin-layout.routing.ts

@@ -8,10 +8,12 @@ import { UserComponent } from "../../pages/user/user.component";
 import { TablesComponent } from "../../pages/tables/tables.component";
 import { TypographyComponent } from "../../pages/typography/typography.component";
 import { HomePageComponent } from "src/app/pages/home-page/home-page.component";
+import { EquipmentComponent } from "src/app/pages/equipment/equipment.component";
 // import { RtlComponent } from "../../pages/rtl/rtl.component";
 
 export const AdminLayoutRoutes: Routes = [
   { path: "home-page", component: HomePageComponent },
+  { path: "equipment", component: EquipmentComponent },
   { path: "dashboard", component: DashboardComponent },
   { path: "icons", component: IconsComponent },
   { path: "maps", component: MapComponent },

src/app/pages/equipment/equipment.component.html

+<div class="content">
+    <div class="row">
+        <div class="col-sm-12">
+            <div class="card">
+                <div class="card-body">
+                    <div>
+                        <h4 class="card-title ">รายการอุปกรณ์ที่ยืมได้</h4>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-sm-6">
+            <div class="card">
+                <div class="card-body">
+                    <div>
+                        <h4 class="card-title">รูปภาพอุปกรณ์</h4>
+                    </div>
+                    <div class="card mb-3" style="max-width: 540px;">
+                        <div class="row g-0">
+                            <div class="col-md-4">
+                                <img src="assets\img\mo.jpg" class="img-fluid rounded-start" alt="...">
+                            </div>
+                            <div class="col-md-8">
+                                <div class="card-body">
+                                    <h5 class="card-title">จอคอมพิวเตอร์</h5>
+                                    <p class="card-text">รหัสอุปกรณ์ : 0001</p>
+                                    <p class="card-text">ชื่อรุ่นอุปกรณ์ : MSI</p>
+                                    <p class="card-text">จำนวนที่เหลือ </p>
+                                </div>
+                                <div class="d-grid gap-2 d-md-flex justify-content-md-end">
+                                    <button class="btn btn-primary me-md-2" type="button">ยืนยัน</button>
+                                    <button class="btn btn-primary" type="button">ยกเลิก</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

src/app/pages/equipment/equipment.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EquipmentComponent } from './equipment.component';
+
+describe('EquipmentComponent', () => {
+  let component: EquipmentComponent;
+  let fixture: ComponentFixture<EquipmentComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ EquipmentComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EquipmentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/equipment/equipment.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-equipment',
+  templateUrl: './equipment.component.html',
+  styleUrls: ['./equipment.component.scss']
+})
+export class EquipmentComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}