Skip to content

B
BookingMyHrManagement
Commit de4e50d9 by DESKTOP-HF0LVOG\myhr
Options

Update หน้าหลัก และ เพิ่ม compo ปฏิทิน

parent d62471a9
Showing with 153 additions and 11 deletions
src/app/app.module.ts
...@@ -18,6 +18,7 @@ import { FullCalendarModule } from "@fullcalendar/angular"; ...@@ -18,6 +18,7 @@ import { FullCalendarModule } from "@fullcalendar/angular";
import dayGridPlugin from '@fullcalendar/daygrid'; // a plugin! import dayGridPlugin from '@fullcalendar/daygrid'; // a plugin!
import interactionPlugin from '@fullcalendar/interaction'; import interactionPlugin from '@fullcalendar/interaction';
import { EquipmentComponent } from "./pages/equipment/equipment.component"; import { EquipmentComponent } from "./pages/equipment/equipment.component";
import { CalenRoomComponent } from './pages/calen-room/calen-room.component';
FullCalendarModule.registerPlugins([ // register FullCalendar plugins FullCalendarModule.registerPlugins([ // register FullCalendar plugins
dayGridPlugin, dayGridPlugin,
...@@ -36,7 +37,7 @@ FullCalendarModule.registerPlugins([ // register FullCalendar plugins ...@@ -36,7 +37,7 @@ FullCalendarModule.registerPlugins([ // register FullCalendar plugins
ToastrModule.forRoot(), ToastrModule.forRoot(),
FullCalendarModule, FullCalendarModule,
], ],
declarations: [AppComponent, AdminLayoutComponent, AuthLayoutComponent, HomePageComponent, EquipmentComponent], declarations: [AppComponent, AdminLayoutComponent, AuthLayoutComponent, HomePageComponent, EquipmentComponent, CalenRoomComponent],
providers: [], providers: [],
bootstrap: [AppComponent] bootstrap: [AppComponent]
}) })
......
src/app/pages/calen-room/calen-room.component.spec.ts 0 → 100644
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CalenRoomComponent } from './calen-room.component';
describe('CalenRoomComponent', () => {
let component: CalenRoomComponent;
let fixture: ComponentFixture<CalenRoomComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ CalenRoomComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(CalenRoomComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/pages/calen-room/calen-room.component.ts 0 → 100644
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-calen-room',
templateUrl: './calen-room.component.html',
styleUrls: ['./calen-room.component.scss']
})
export class CalenRoomComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
\ No newline at end of file
src/app/pages/home-page/home-page.component.html
...@@ -19,24 +19,118 @@ ...@@ -19,24 +19,118 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-6"> <div class="col-sm-12">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<div> <div ngbDropdown class="d-inline-block">
<h4 class="card-title">ตาราง</h4> <button class="btn btn-outline-primary" id="dropdownBasic1"
ngbDropdownToggle>ปฏิทินการจองห้อง</button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
<button ngbDropdownItem>ปฏิทินการจองห้อง</button>
<button ngbDropdownItem>ปฏิทินการจองรถ</button>
<button ngbDropdownItem>ตารางการยืมอุปกรณ์</button>
</div>
</div> </div>
<full-calendar [options]="calendarOptions"></full-calendar> <full-calendar [options]="calendarOptions"></full-calendar>
</div> </div>
</div> </div>
</div> </div>
<div class="col-sm-6"> </div>
<div class="card">
<div class="card-body"> <div class="row">
<div> <!-- col -->
<h4 class="card-title">ตาราง</h4> <div class="col-sm-12">
<ul class="nav nav-pills custom-pills" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab2" data-bs-toggle="pill" href="#month" role="tab"
aria-selected="true">Month Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab2" data-bs-toggle="pill" href="#revenue" role="tab"
aria-selected="false">Revenue</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab2" data-bs-toggle="pill" href="#conversion" role="tab"
aria-selected="false">Conversions</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-session-tab2" data-bs-toggle="pill" href="#session" role="tab"
aria-selected="false">Sessions</a>
</li>
</ul>
<div class="tab-content mt-4" id="pills-tabContent">
<div class="tab-pane fade show active" id="month" role="tabpanel" aria-labelledby="pills-home-tab2">
<div class="row">
<div class="col-sm-12 text-center">
<h1 class="fw-bold mb-1">$6,890.68</h1>
<h6 class="mb-3">Current Month Earnings</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non
<br />pharetra ligula, sitametlaoreet arcu.
</p>
</div>
<div class="col-sm-12">
<div class="w-100">
<div class="revenue-chart"></div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="revenue" role="tabpanel" aria-labelledby="pills-profile-tab2">
<div class="row">
<div class="col-sm-12 text-center">
<h1 class="fw-bold mb-1">$6,890.68</h1>
<h6 class="mb-3">Current Month Earnings</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non
<br />pharetra ligula, sitametlaoreet arcu.
</p>
</div>
<div class="col-sm-12">
<div class="w-100">
<div class="revenue-chart"></div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="conversion" role="tabpanel" aria-labelledby="pills-contact-tab2">
<div class="row">
<div class="col-sm-12 col-lg-4">
<h1 class="fw-bold mb-1">$6,890.68</h1>
<h6 class="mb-3">Current Month Earnings</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non pharetra
ligula, sitametlaoreet arcu.
</p>
<button class="waves-effect waves-light mt-3 btn btn-lg btn-info">
Last Month Summary
</button>
</div>
<div class="col-sm-12 col-lg-8 text-center border-left">
<div class="conversation-chart"></div>
</div>
</div>
</div>
<div class="tab-pane fade" id="session" role="tabpanel" aria-labelledby="pills-session-tab2">
<div class="row">
<div class="col-sm-12 col-lg-4">
<h1 class="fw-bold mb-1">$6,890.68</h1>
<h6 class="mb-3">Current Month Earnings</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non pharetra
ligula, sitametlaoreet arcu.
</p>
<button class="waves-effect waves-light mt-3 btn btn-lg btn-info">
Last Month Summary
</button>
</div>
<div class="col-sm-12 col-lg-8 text-center border-start">
<div class="sessions-chart"></div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
\ No newline at end of file
src/app/pages/home-page/home-page.component.ts
...@@ -7,13 +7,12 @@ import { CalendarOptions } from '@fullcalendar/angular'; ...@@ -7,13 +7,12 @@ import { CalendarOptions } from '@fullcalendar/angular';
styleUrls: ['./home-page.component.scss'] styleUrls: ['./home-page.component.scss']
}) })
export class HomePageComponent implements OnInit { export class HomePageComponent implements OnInit {
calendarOptions: CalendarOptions = { calendarOptions: CalendarOptions = {
initialView: 'dayGridMonth', initialView: 'dayGridMonth',
dateClick: this.handleDateClick.bind(this), // bind is important! dateClick: this.handleDateClick.bind(this), // bind is important!
events: [ events: [
{ title: 'จองรถ', date: '2021-11-23' }, { title: 'จองรถ', date: '2021-11-23' },
{ title: 'event 2', date: '2021-11-23' }
] ]
}; };
...@@ -27,3 +26,7 @@ export class HomePageComponent implements OnInit { ...@@ -27,3 +26,7 @@ export class HomePageComponent implements OnInit {
} }
} }
export class NgbdCollapseBasic {
public isCollapsed = false;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment