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