Skip to content

B
BookingMyHrManagement
Commit 4b46d3b0 by Ooh-Ao
Options

no message

parent 47ef36f7
Showing with 449 additions and 441 deletions
Web-Manage/src/app/DPU/company-management/home-installer/home-installer.component.ts
...@@ -3,7 +3,7 @@ import { EquipmentService } from './../../services/equirement.service'; ...@@ -3,7 +3,7 @@ import { EquipmentService } from './../../services/equirement.service';
import { ProjectService } from './../../services/project.service'; import { ProjectService } from './../../services/project.service';
import { UserService } from './../../services/user.service'; import { UserService } from './../../services/user.service';
import { ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core'; import { ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
import { RouterModule } from '@angular/router'; import { ActivatedRoute, RouterModule } from '@angular/router';
import ApexCharts from 'apexcharts' import ApexCharts from 'apexcharts'
import { SharedModule } from '../../../shared/shared.module'; import { SharedModule } from '../../../shared/shared.module';
import { NgApexchartsModule } from 'ng-apexcharts'; import { NgApexchartsModule } from 'ng-apexcharts';
...@@ -22,6 +22,7 @@ import swal from 'sweetalert'; ...@@ -22,6 +22,7 @@ import swal from 'sweetalert';
import { ProjectModel } from '../../models/project.model'; import { ProjectModel } from '../../models/project.model';
import { EquipmentModel } from '../../models/equipments.model'; import { EquipmentModel } from '../../models/equipments.model';
import { DashboardModel } from '../../models/dasbord.model'; import { DashboardModel } from '../../models/dasbord.model';
import { CompanyService } from '../../services/company.service';
@Component({ @Component({
selector: 'app-home-installer', selector: 'app-home-installer',
...@@ -38,68 +39,68 @@ import { DashboardModel } from '../../models/dasbord.model'; ...@@ -38,68 +39,68 @@ import { DashboardModel } from '../../models/dasbord.model';
}) })
export class HomeInstallerComponent { export class HomeInstallerComponent {
@ViewChild('closeModal') public childModal?: ElementRef; @ViewChild('closeModal') public childModal?: ElementRef;
@ViewChild('modalDetail') public modalDetail?: ElementRef; @ViewChild('modalDetail') public modalDetail?: ElementRef;
action = "new"; action = "new";
rawData: any[]; rawData: any[];
allSelected = false; allSelected = false;
someSelected = false; someSelected = false;
startDate: string = ''; startDate: string = '';
endDate: string = ''; endDate: string = '';
selectedProjects: string[] = []; selectedProjects: string[] = [];
selectedEquipmentType: string = 'ALL'; selectedEquipmentType: string = 'ALL';
isDropdownOpen = false; isDropdownOpen = false;
projectSelection: { [key: string]: boolean } = {}; projectSelection: { [key: string]: boolean } = {};
confirmPassword = "" confirmPassword = ""
dashbordList:string[] = []; dashbordList: string[] = [];
equipmentList: EquipmentModel[] = [] equipmentList: EquipmentModel[] = []
projectList: ProjectModel[] = [] projectList: ProjectModel[] = []
itemsList: UserProfileModel[] = [] itemsList: UserProfileModel[] = []
filterList: UserProfileModel[] = [] filterList: UserProfileModel[] = []
selectModel: UserProfileModel = new UserProfileModel() selectModel: UserProfileModel = new UserProfileModel()
selectedItems = new Map<string, boolean>(); selectedItems = new Map<string, boolean>();
roleList: UserRoleModel[] = [] roleList: UserRoleModel[] = []
empList: UserProfileModel[] = [] empList: UserProfileModel[] = []
descName = 'engName' descName = 'engName'
pageIndex = 0; pageIndex = 0;
uploaderProfile: FileUploader | undefined; uploaderProfile: FileUploader | undefined;
uploadErrorMsg: string = ""; uploadErrorMsg: string = "";
dashboardModel: DashboardModel dashboardModel: DashboardModel
get searchTerm(): string { get searchTerm(): string {
return this._searchTerm; return this._searchTerm;
} }
set searchTerm(val: string) { set searchTerm(val: string) {
this.pageIndex = 0; this.pageIndex = 0;
this.allSelected = false this.allSelected = false
this._searchTerm = val; this._searchTerm = val;
if (val != '') { if (val != '') {
this.filterList = this.filter(val); this.filterList = this.filter(val);
} else { } else {
this.updatePagedItems() this.updatePagedItems()
}
} }
}
_searchTerm = ""; _searchTerm = "";
chartOptions1:any; chartOptions1: any;
chartOptions2:any; chartOptions2: any;
chartOptions3:any chartOptions3: any
chartOptions:any; chartOptions: any;
optionsCircle1:any; optionsCircle1: any;
chartOptions4:any; chartOptions4: any;
optionsCircle2:any; optionsCircle2: any;
optionsCircle3:any optionsCircle3: any
chartOptions5:any; chartOptions5: any;
chartOptions6:any; chartOptions6: any;
chartOptions7:any; chartOptions7: any;
chartOptions8:any; chartOptions8: any;
chartOptions9:any chartOptions9: any
chartOptions10:any chartOptions10: any
chartOptions11:any chartOptions11: any
chart3options:any chart3options: any
chart2options:any chart2options: any
chart1options:any chart1options: any
public series: ApexAxisChartSeries = []; public series: ApexAxisChartSeries = [];
public chart!: ApexChart; public chart!: ApexChart;
public dataLabels!: ApexDataLabels; public dataLabels!: ApexDataLabels;
public markers!: ApexMarkers; public markers!: ApexMarkers;
...@@ -108,7 +109,7 @@ public series: ApexAxisChartSeries = []; ...@@ -108,7 +109,7 @@ public series: ApexAxisChartSeries = [];
public yaxis!: ApexYAxis; public yaxis!: ApexYAxis;
public xaxis!: ApexXAxis; public xaxis!: ApexXAxis;
public tooltip!: ApexTooltip; public tooltip!: ApexTooltip;
public colors!:any; public colors!: any;
public commonOptions1: any = { public commonOptions1: any = {
dataLabels: { dataLabels: {
enabled: false, enabled: false,
...@@ -151,389 +152,396 @@ public series: ApexAxisChartSeries = []; ...@@ -151,389 +152,396 @@ public series: ApexAxisChartSeries = [];
type: 'datetime', type: 'datetime',
}, },
}; };
constructor(private el: ElementRef, private renderer: Renderer2, private cdr: ChangeDetectorRef, private userService: UserService, public translate: TranslateService, private tokenService: TokenService, private ProjectService: ProjectService, private EquipmentService: EquipmentService,private DashboardService:DashboardService) { companyId: string = '';
constructor(private el: ElementRef, private renderer: Renderer2, private cdr: ChangeDetectorRef, private userService: UserService, public translate: TranslateService, private tokenService: TokenService, private ProjectService: ProjectService, private EquipmentService: EquipmentService, private DashboardService: DashboardService, private route: ActivatedRoute,private comService: ProjectService) {
this.companyId = this.route.snapshot.paramMap.get('companyId')!;
this.comService.getById(this.companyId).subscribe(result => {
console.log("SAVEEE")
this.tokenService.saveSelectCompany(result);
// this.router.navigate(["/company"]);
})
this.chartOptions9 = { this.chartOptions9 = {
series: [ series: [
{ {
name: 'จำนวนการยืม', name: 'จำนวนการยืม',
data: [40, 55, 60, 80, 70, 65, 90] data: [40, 55, 60, 80, 70, 65, 90]
}, },
{ {
name: 'จำนวนการคืน', name: 'จำนวนการคืน',
data: [30, 50, 58, 75, 68, 63, 85] data: [30, 50, 58, 75, 68, 63, 85]
}
],
chart: {
height: 320,
type: 'line',
dropShadow: {
enabled: true,
color: '#000',
top: 18,
left: 7,
blur: 10,
opacity: 0.2
},
toolbar: {
show: false
},
events: {
mounted: (chart: any) => {
chart.windowResizeHandler();
} }
],
chart: {
height: 320,
type: 'line',
dropShadow: {
enabled: true,
color: '#000',
top: 18,
left: 7,
blur: 10,
opacity: 0.2
},
toolbar: {
show: false
},
events: {
mounted: (chart: any) => {
chart.windowResizeHandler();
}
},
}, },
}, colors: ['#845adf', '#23b7e5'],
colors: ['#845adf', '#23b7e5'], dataLabels: {
dataLabels: { enabled: true
enabled: true },
}, stroke: {
stroke: { curve: 'smooth'
curve: 'smooth'
},
title: {
text: '',
align: 'left',
style: {
fontSize: '13px',
fontWeight: 'bold',
color: '#8c9097'
}, },
},
grid: {
borderColor: '#f2f5f7',
},
markers: {
size: 3
},
xaxis: {
categories: ['ม.ค.', 'ก.พ.', 'มี.ค.', 'เม.ย.', 'พ.ค.', 'มิ.ย.', 'ก.ค.'],
title: { title: {
text: 'เดือน', text: '',
align: 'left',
style: { style: {
color: "#8c9097",
fontSize: '13px', fontSize: '13px',
fontWeight: 'bold', fontWeight: 'bold',
} color: '#8c9097'
},
}, },
labels: { grid: {
style: { borderColor: '#f2f5f7',
colors: "#8c9097",
fontSize: '11px',
fontWeight: 600
}
}, },
}, markers: {
yaxis: { size: 3
title: {
text: 'จำนวนครั้ง',
style: {
color: "#8c9097",
fontSize: '13px',
fontWeight: 'bold',
}
}, },
labels: { xaxis: {
style: { categories: ['ม.ค.', 'ก.พ.', 'มี.ค.', 'เม.ย.', 'พ.ค.', 'มิ.ย.', 'ก.ค.'],
colors: "#8c9097", title: {
fontSize: '11px', text: 'เดือน',
fontWeight: 600 style: {
} color: "#8c9097",
fontSize: '13px',
fontWeight: 'bold',
}
},
labels: {
style: {
colors: "#8c9097",
fontSize: '11px',
fontWeight: 600
}
},
}, },
min: 0, yaxis: {
max: 100 title: {
}, text: 'จำนวนครั้ง',
legend: { style: {
position: 'top', color: "#8c9097",
horizontalAlign: 'right', fontSize: '13px',
floating: true, fontWeight: 'bold',
offsetY: -25, }
offsetX: -5 },
} labels: {
}; style: {
colors: "#8c9097",
fontSize: '11px',
fontWeight: 600
}
},
min: 0,
max: 100
},
legend: {
position: 'top',
horizontalAlign: 'right',
floating: true,
offsetY: -25,
offsetX: -5
}
};
this.chartOptions2={ this.chartOptions2 = {
series: [ series: [
{ {
name: "High - 2013", name: "High - 2013",
data: [28, 29, 33, 36, 32, 32, 33] data: [28, 29, 33, 36, 32, 32, 33]
}, },
{ {
name: "Low - 2013", name: "Low - 2013",
data: [12, 11, 14, 18, 17, 13, 13] data: [12, 11, 14, 18, 17, 13, 13]
} }
], ],
chart: { chart: {
height: 320, height: 320,
type: 'line', type: 'line',
dropShadow: { dropShadow: {
enabled: true, enabled: true,
color: '#000', color: '#000',
top: 18, top: 18,
left: 7, left: 7,
blur: 10, blur: 10,
opacity: 0.2 opacity: 0.2
},
toolbar: {
show: false
},
events: {
mounted: (chart:any) => {
chart.windowResizeHandler();
}
},
}, },
colors: ['#845adf', '#23b7e5'], toolbar: {
dataLabels: { show: false
enabled: true,
}, },
stroke: { events: {
curve: 'smooth' mounted: (chart: any) => {
chart.windowResizeHandler();
}
}, },
title: { },
text: 'Average High & Low Temperature', colors: ['#845adf', '#23b7e5'],
align: 'left', dataLabels: {
style: { enabled: true,
fontSize: '13px', },
fontWeight: 'bold', stroke: {
color: '#8c9097' curve: 'smooth'
}, },
title: {
text: 'Average High & Low Temperature',
align: 'left',
style: {
fontSize: '13px',
fontWeight: 'bold',
color: '#8c9097'
}, },
grid: { },
borderColor: '#f2f5f7', grid: {
borderColor: '#f2f5f7',
},
markers: {
size: 1
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
title: {
text: 'Month',
style: {
color: "#8c9097",
fontSize: '13px',
fontWeight: 'bold',
}
}, },
markers: { labels: {
size: 1 show: true,
style: {
colors: "#8c9097",
fontSize: '11px',
fontWeight: 600,
cssClass: 'apexcharts-xaxis-label',
},
}, },
xaxis: { },
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], yaxis: {
title: { title: {
text: 'Month', text: 'Temperature',
style: { style: {
color: "#8c9097", color: "#8c9097",
fontSize: '13px', fontSize: '13px',
fontWeight: 'bold', fontWeight: 'bold',
} }
},
labels: {
show: true,
style: {
colors: "#8c9097",
fontSize: '11px',
fontWeight: 600,
cssClass: 'apexcharts-xaxis-label',
},
},
}, },
yaxis: { labels: {
title: { show: true,
text: 'Temperature', style: {
style: { colors: "#8c9097",
color: "#8c9097", fontSize: '11px',
fontSize: '13px', fontWeight: 600,
fontWeight: 'bold', cssClass: 'apexcharts-yaxis-label',
} },
},
labels: {
show: true,
style: {
colors: "#8c9097",
fontSize: '11px',
fontWeight: 600,
cssClass: 'apexcharts-yaxis-label',
},
},
min: 5,
max: 40
}, },
legend: { min: 5,
position: 'top', max: 40
horizontalAlign: 'right', },
floating: true, legend: {
offsetY: -25, position: 'top',
offsetX: -5 horizontalAlign: 'right',
floating: true,
offsetY: -25,
offsetX: -5
}
} }
}
this.chartOptions1={ this.chartOptions1 = {
chart: { chart: {
type: 'line', type: 'line',
height: 40, height: 40,
width: 120, width: 120,
sparkline: { sparkline: {
enabled: true enabled: true
}, },
dropShadow: { dropShadow: {
enabled: true, enabled: true,
top: 0, top: 0,
left: 0, left: 0,
blur: 3, blur: 3,
color: '#000', color: '#000',
opacity: 0.1 opacity: 0.1
}, },
}, },
grid: { grid: {
show: false, show: false,
xaxis: { xaxis: {
lines: { lines: {
show: false show: false
} }
}, },
yaxis: { yaxis: {
lines: { lines: {
show: false show: false
} }
}, },
}, },
stroke: { stroke: {
show: true, show: true,
curve: 'straight', curve: 'straight',
lineCap: 'butt', lineCap: 'butt',
width: 1.5, width: 1.5,
dashArray: 0, dashArray: 0,
}, },
fill: { fill: {
gradient: { gradient: {
enabled: false enabled: false
} }
}, },
series: [{ series: [{
name: 'Value', name: 'Value',
data: [0, 21, 54, 38, 56, 24, 65] data: [0, 21, 54, 38, 56, 24, 65]
}], }],
yaxis: { yaxis: {
min: 0, min: 0,
show: false show: false
}, },
xaxis: { xaxis: {
show: false, show: false,
axisTicks: { axisTicks: {
show: false, show: false,
axisBorder: { axisBorder: {
show: false show: false
}, },
}, },
axisBorder: { axisBorder: {
show: false show: false
} }
}, },
colors: ['#23b7e5'], colors: ['#23b7e5'],
} }
this.chartOptions2={ this.chartOptions2 = {
chart: { chart: {
type: 'line', type: 'line',
height: 45, height: 45,
sparkline: { sparkline: {
enabled: true enabled: true
}, },
dropShadow: { dropShadow: {
enabled: true, enabled: true,
top: 0, top: 0,
left: 0, left: 0,
blur: 1, blur: 1,
color: '#fff', color: '#fff',
opacity: 0.05 opacity: 0.05
} }
}, },
stroke: { stroke: {
show: true, show: true,
curve: 'smooth', curve: 'smooth',
lineCap: 'butt', lineCap: 'butt',
width: 2, width: 2,
dashArray: 0, dashArray: 0,
}, },
fill: { fill: {
gradient: { gradient: {
enabled: false enabled: false
} }
}, },
series: [{ series: [{
name: 'Value', name: 'Value',
data: [54, 38, 56, 35, 65, 43, 53, 45, 62, 80, 35, 48] data: [54, 38, 56, 35, 65, 43, 53, 45, 62, 80, 35, 48]
}], }],
yaxis: { yaxis: {
min: 0, min: 0,
show: false, show: false,
axisBorder: { axisBorder: {
show: false show: false
},
}, },
}, xaxis: {
xaxis: {
axisBorder: { axisBorder: {
show: false show: false
}, },
}, },
colors: ["rgba(132, 90, 223, 0.1)"], colors: ["rgba(132, 90, 223, 0.1)"],
tooltip: { tooltip: {
enabled: false, enabled: false,
} }
} }
this.optionsCircle1 = { this.optionsCircle1 = {
series: [1754, 1234, 878, 270], series: [1754, 1234, 878, 270],
labels: ["Mobile", "Tablet", "Desktop", "Others"], labels: ["Mobile", "Tablet", "Desktop", "Others"],
chart: { chart: {
height: 250, height: 250,
type: 'donut', type: 'donut',
}, },
dataLabels: { dataLabels: {
enabled: false, enabled: false,
}, },
legend: { legend: {
show: false, show: false,
}, },
stroke: { stroke: {
show: true,
curve: 'smooth',
lineCap: 'round',
colors: ["#fff"],
width: 0,
dashArray: 0,
},
plotOptions: {
pie: {
expandOnClick: false,
donut: {
size: '80%',
background: 'transparent',
labels: {
show: true, show: true,
curve: 'smooth', name: {
lineCap: 'round', show: true,
colors: ["#fff"], fontSize: '20px',
width: 0, color: '#495057',
dashArray: 0, offsetY: -4
},
plotOptions: {
pie: {
expandOnClick: false,
donut: {
size: '80%',
background: 'transparent',
labels: {
show: true,
name: {
show: true,
fontSize: '20px',
color: '#495057',
offsetY: -4
},
value: {
show: true,
fontSize: '18px',
offsetY: 8,
formatter: function (val: string) {
return val + "%";
}
},
total: {
show: true,
showAlways: true,
label: 'Total',
fontSize: '22px',
fontWeight: 600,
color: '#495057',
}
}
}, },
}, value: {
show: true,
fontSize: '18px',
offsetY: 8,
formatter: function (val: string) {
return val + "%";
}
},
total: {
show: true,
showAlways: true,
label: 'Total',
fontSize: '22px',
fontWeight: 600,
color: '#495057',
}
}
}, },
colors: ["rgba(132, 90, 223, 1)", "rgba(35, 183, 229, 1)", "rgba(38, 191, 148, 1)", "rgba(245, 184, 73, 1)",], },
},
colors: ["rgba(132, 90, 223, 1)", "rgba(35, 183, 229, 1)", "rgba(38, 191, 148, 1)", "rgba(245, 184, 73, 1)",],
}; };
this.chartOptions = { this.chartOptions = {
series: [ series: [
...@@ -610,41 +618,41 @@ public series: ApexAxisChartSeries = []; ...@@ -610,41 +618,41 @@ public series: ApexAxisChartSeries = [];
height: 328, height: 328,
zoom: { zoom: {
enabled: false enabled: false
}, },
}, },
dataLabels: { dataLabels: {
enabled: false, enabled: false,
}, },
grid: { grid: {
borderColor: '#f1f1f1', borderColor: '#f1f1f1',
strokeDashArray: 3 strokeDashArray: 3
}, },
legend: { legend: {
show: true, show: true,
position: 'top', position: 'top',
}, },
plotOptions: { plotOptions: {
bar: { bar: {
borderRadius: 5, borderRadius: 5,
columnWidth: "40%", columnWidth: "40%",
dataLabels: { dataLabels: {
position: 'top', // top, center, bottom position: 'top', // top, center, bottom
}, },
} }
}, },
colors: ["rgb(132, 90, 223)", "#ededed"], colors: ["rgb(132, 90, 223)", "#ededed"],
stroke: { stroke: {
curve: ['smooth', 'stepline'], curve: ['smooth', 'stepline'],
width: [2, 0], width: [2, 0],
}, },
xaxis: { xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
axisBorder: { axisBorder: {
color: '#e9e9e9', color: '#e9e9e9',
}, },
} }
}; };
this.chartOptions4 = { this.chartOptions4 = {
series: [ series: [
...@@ -737,87 +745,87 @@ public series: ApexAxisChartSeries = []; ...@@ -737,87 +745,87 @@ public series: ApexAxisChartSeries = [];
}, },
}, },
}; };
this.optionsCircle2={ this.optionsCircle2 = {
chart: { chart: {
height: 120, height: 120,
width: 100, width: 100,
type: "radialBar", type: "radialBar",
}, },
series: [48], series: [48],
colors: ["#23b7e5"], colors: ["#23b7e5"],
plotOptions: { plotOptions: {
radialBar: { radialBar: {
hollow: { hollow: {
margin: 0, margin: 0,
size: "50%", size: "50%",
background: "#fff" background: "#fff"
},
dataLabels: {
name: {
offsetY: -10,
color: "#4b9bfa",
fontSize: "10px",
show: false
}, },
dataLabels: { value: {
name: { offsetY: 5,
offsetY: -10, color: "#4b9bfa",
color: "#4b9bfa", fontSize: "12px",
fontSize: "10px", show: true,
show: false fontWeight: 800
},
value: {
offsetY: 5,
color: "#4b9bfa",
fontSize: "12px",
show: true,
fontWeight: 800
}
} }
}
} }
}, },
stroke: { stroke: {
lineCap: "round" lineCap: "round"
}, },
labels: ["Followers"] labels: ["Followers"]
} }
this.optionsCircle3={ this.optionsCircle3 = {
chart: { chart: {
height: 120, height: 120,
width: 100, width: 100,
type: "radialBar", type: "radialBar",
}, },
series: [65], series: [65],
colors: ["#ffc107"], colors: ["#ffc107"],
plotOptions: { plotOptions: {
radialBar: { radialBar: {
hollow: { hollow: {
margin: 0, margin: 0,
size: "50%", size: "50%",
background: "#fff" background: "#fff"
},
dataLabels: {
name: {
offsetY: -10,
color: "#4b9bfa",
fontSize: "10px",
show: false
},
value: {
offsetY: 5,
color: "#4b9bfa",
fontSize: "12px",
show: true,
fontWeight: 800
}, },
dataLabels: {
name: {
offsetY: -10,
color: "#4b9bfa",
fontSize: "10px",
show: false
},
value: {
offsetY: 5,
color: "#4b9bfa",
fontSize: "12px",
show: true,
fontWeight: 800
},
} }
} }
}, },
stroke: { stroke: {
lineCap: "round" lineCap: "round"
}, },
labels: ["Views"] labels: ["Views"]
} }
this.uploadConfig() this.uploadConfig()
} }
uploadConfig() { uploadConfig() {
this.uploaderProfile = new FileUploader({ this.uploaderProfile = new FileUploader({
...@@ -883,11 +891,11 @@ public series: ApexAxisChartSeries = []; ...@@ -883,11 +891,11 @@ public series: ApexAxisChartSeries = [];
this.isDropdownOpen = !this.isDropdownOpen; this.isDropdownOpen = !this.isDropdownOpen;
} }
getdasbord(){ getdasbord() {
this.DashboardService.getDashboard(this.startDate, this.endDate,) this.DashboardService.getDashboard(this.startDate, this.endDate,)
.subscribe(data => { .subscribe(data => {
console.log('Dashboard Data:', data); console.log('Dashboard Data:', data);
}); });
} }
getSelectedLabel(): string { getSelectedLabel(): string {
...@@ -918,7 +926,7 @@ public series: ApexAxisChartSeries = []; ...@@ -918,7 +926,7 @@ public series: ApexAxisChartSeries = [];
this.EquipmentService.getLists().subscribe(result => { this.EquipmentService.getLists().subscribe(result => {
this.equipmentList = result this.equipmentList = result
}) })
const today = new Date(); const today = new Date();
const firstDay = new Date(today.getFullYear(), today.getMonth(), 1); const firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
this.startDate = this.formatDateToYYYYMMDD(firstDay); this.startDate = this.formatDateToYYYYMMDD(firstDay);
this.endDate = this.formatDateToYYYYMMDD(today); this.endDate = this.formatDateToYYYYMMDD(today);
...@@ -931,7 +939,7 @@ public series: ApexAxisChartSeries = []; ...@@ -931,7 +939,7 @@ public series: ApexAxisChartSeries = [];
}) })
} }
formatDateToYYYYMMDD(date: Date): string { formatDateToYYYYMMDD(date: Date): string {
const year = date.getFullYear(); const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0'); // เพิ่ม 1 เพราะเดือนเริ่มที่ 0 const month = (date.getMonth() + 1).toString().padStart(2, '0'); // เพิ่ม 1 เพราะเดือนเริ่มที่ 0
const day = date.getDate().toString().padStart(2, '0'); const day = date.getDate().toString().padStart(2, '0');
...@@ -1020,18 +1028,18 @@ public series: ApexAxisChartSeries = []; ...@@ -1020,18 +1028,18 @@ public series: ApexAxisChartSeries = [];
} }
applyFilters() { applyFilters() {
const selectedProjects = Object.keys(this.projectSelection).filter(p => this.projectSelection[p]); const selectedProjects = Object.keys(this.projectSelection).filter(p => this.projectSelection[p]);
// Filter your full data here // Filter your full data here
const filteredData = this.rawData.filter(item => { const filteredData = this.rawData.filter(item => {
return (!this.startDate || item.date >= this.startDate) && return (!this.startDate || item.date >= this.startDate) &&
(!this.endDate || item.date <= this.endDate) && (!this.endDate || item.date <= this.endDate) &&
(selectedProjects.length === 0 || selectedProjects.includes(item.project_name)) && (selectedProjects.length === 0 || selectedProjects.includes(item.project_name)) &&
(this.selectedEquipmentType === 'ALL' || item.equipment_type === this.selectedEquipmentType); (this.selectedEquipmentType === 'ALL' || item.equipment_type === this.selectedEquipmentType);
}); });
} }
......
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