423 lines
17 KiB
Plaintext
423 lines
17 KiB
Plaintext
@{
|
|
ViewData["Title"] = "Calendar Update";
|
|
Layout = "~/Views/Shared/_Layout.cshtml";
|
|
}
|
|
|
|
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
|
|
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-6 col-md-6 col-lg-3">
|
|
<div class="card card-hover">
|
|
<a asp-area="OTcalculate" asp-controller="HrDashboard" asp-action="Rate">
|
|
<div class="box bg-success text-center">
|
|
<h1 class="font-light text-white">
|
|
<i class="mdi mdi-currency-usd"></i>
|
|
</h1>
|
|
<h6 class="text-white">Rate</h6>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-6 col-md-6 col-lg-3">
|
|
<div class="card card-hover">
|
|
<a asp-area="OTcalculate" asp-controller="HrDashboard" asp-action="Calendar">
|
|
<div class="box bg-purple text-center">
|
|
<h1 class="font-light text-white">
|
|
<i class="mdi mdi-calendar"></i>
|
|
</h1>
|
|
<h6 class="text-white">Calendar</h6>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="app">
|
|
<div class="container mt-3">
|
|
|
|
@* Tab Page *@
|
|
<ul class="nav nav-tabs">
|
|
<li class="nav-item">
|
|
<a class="nav-link"
|
|
:class="{ 'bg-purple text-white': activeTab === 'holiday', 'bg-light text-dark': activeTab !== 'holiday' }"
|
|
style="border: 1px solid #ddd;"
|
|
v-on:click="changeTab('holiday')">
|
|
Update Holiday
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link"
|
|
:class="{ 'bg-purple text-white': activeTab === 'weekend', 'bg-light text-dark': activeTab !== 'weekend' }"
|
|
style="border: 1px solid #ddd;"
|
|
v-on:click="changeTab('weekend')">
|
|
Update Weekend
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="tab-content mt-3">
|
|
|
|
@* Update Holiday *@
|
|
<div v-if="activeTab === 'holiday'" class="card shadow-sm">
|
|
<div class="card-body">
|
|
<label>Date:</label>
|
|
<input type="date" class="form-control" v-model="selectedDate">
|
|
</div>
|
|
<div class="card-body">
|
|
<label>State:</label>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="form-check">
|
|
<input type="checkbox" class="form-check-input" v-model="selectAllChecked">
|
|
<label class="form-check-label"><strong>Select All</strong></label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4" v-for="state in stateList" :key="state.stateId">
|
|
<div class="form-check">
|
|
<input type="checkbox" class="form-check-input" :value="state.stateId" v-model="selectedStates">
|
|
<label class="form-check-label">{{ state.stateName }}</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<label>Holiday:</label>
|
|
<input type="text" class="form-control" v-model="holidayName" placeholder="Enter Holiday Name">
|
|
</div>
|
|
|
|
<div class="card-body text-center">
|
|
<button class="btn btn-danger" v-on:click="clearForm">Clear</button>
|
|
<button class="btn btn-success ms-3" v-on:click="updateHoliday">Save Holiday</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="activeTab === 'holiday'" class="card shadow-sm">
|
|
<div class="card-body">
|
|
<label for="stateDropdown">Select State:</label>
|
|
<select id="stateDropdown" class="form-control" v-model="selectedState">
|
|
<option v-for="state in stateList" :key="state.stateId" :value="state.stateId">
|
|
{{ state.stateName }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div class="card-body">
|
|
<h5>Holidays for Selected State</h5>
|
|
<ul class="list-group">
|
|
<li class="list-group-item d-flex justify-content-between align-items-center"
|
|
v-for="holiday in filteredHolidays" :key="holiday.holidayId">
|
|
<span>{{ formatDate(holiday.holidayDate) }} - {{ holiday.holidayName }}</span>
|
|
<button class="btn btn-danger btn-sm" v-on:click="deleteHoliday(holiday.holidayId)">
|
|
<i class="mdi mdi-delete"></i>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
@* Update Weekend *@
|
|
<div v-if="activeTab === 'weekend'" class="card shadow-sm">
|
|
<div class="card-body">
|
|
<label>State:</label>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="form-check">
|
|
<input type="checkbox" class="form-check-input" v-model="selectAllChecked">
|
|
<label class="form-check-label"><strong>Select All</strong></label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4" v-for="state in stateList" :key="state.stateId">
|
|
<div class="form-check">
|
|
<input type="checkbox" class="form-check-input" :value="state.stateId" v-model="selectedStates">
|
|
<label class="form-check-label">{{ state.stateName }}</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<label for="dayDropdown">Days:</label>
|
|
<select id="dayDropdown" class="form-control" v-model="selectedDay">
|
|
<option value="" disabled selected>Select Day</option>
|
|
<option v-for="weekend in dayList" :key="weekend.weekendId" :value="weekend.day">
|
|
{{ weekend.day }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
|
|
<div class="card-body text-center">
|
|
<button class="btn btn-danger" v-on:click="clearWeekend">Clear</button>
|
|
<button class="btn btn-success ms-3" v-on:click="updateWeekend">Save Weekend</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="activeTab === 'weekend'" class="card shadow-sm">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6" v-for="(states, day) in groupedWeekends" :key="day">
|
|
<div class="card p-2 mb-2 shadow-sm">
|
|
<strong>{{ day }}</strong>
|
|
<ul class="list-unstyled ps-3">
|
|
<li v-for="state in states" :key="state">{{ state }}</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@section Scripts {
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.js"></script>
|
|
|
|
<script>
|
|
const app = Vue.createApp({
|
|
data() {
|
|
return {
|
|
activeTab: 'holiday',
|
|
stateList: [],
|
|
selectedDate: '',
|
|
selectedStates: [],
|
|
holidayName: '',
|
|
selectedState: null,
|
|
holidayList: [],
|
|
selectedDay: "",
|
|
weekendList: [],
|
|
stateWeekends: [],
|
|
selectAllChecked: false
|
|
};
|
|
},
|
|
|
|
mounted() {
|
|
this.fetchStates();
|
|
this.fetchHolidays();
|
|
this.fetchWeekends();
|
|
this.fetchStateWeekends();
|
|
|
|
},
|
|
|
|
computed: {
|
|
filteredHolidays() {
|
|
return this.selectedState
|
|
? this.holidayList.filter(h => h.stateId === this.selectedState)
|
|
: [];
|
|
},
|
|
groupedWeekends() {
|
|
const grouped = {};
|
|
this.stateWeekends.forEach(weekend => {
|
|
if (!grouped[weekend.day]) {
|
|
grouped[weekend.day] = [];
|
|
}
|
|
grouped[weekend.day].push(weekend.stateName);
|
|
});
|
|
return grouped;
|
|
},
|
|
filteredHolidays() {
|
|
return this.selectedState
|
|
? this.holidayList
|
|
.filter(h => h.stateId === this.selectedState)
|
|
.sort((a, b) => new Date(a.holidayDate) - new Date(b.holidayDate))
|
|
: [];
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
selectAllChecked(ckeckedState) {
|
|
if (ckeckedState) {
|
|
this.selectedStates = this.stateList.map(state => state.stateId);
|
|
}
|
|
},
|
|
|
|
selectedStates(ckeckedState) {
|
|
this.selectAllChecked = ckeckedState.length === this.stateList.length;
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
changeTab(tab) {
|
|
this.activeTab = tab;
|
|
},
|
|
|
|
async fetchStates() {
|
|
try {
|
|
const response = await fetch("/OvertimeAPI/GetStatesName");
|
|
if (!response.ok) throw new Error("Failed to fetch states");
|
|
|
|
const data = await response.json();
|
|
this.stateList = data.map(state => ({
|
|
stateId: state.stateId,
|
|
stateName: state.stateName
|
|
}));
|
|
|
|
if (this.stateList.length > 0) {
|
|
this.selectedState = this.stateList[0].stateId;
|
|
}
|
|
} catch (error) {
|
|
console.error("Error fetching states:", error);
|
|
alert("Failed to load state list.");
|
|
}
|
|
},
|
|
|
|
async fetchHolidays() {
|
|
try {
|
|
const response = await fetch("/OvertimeAPI/GetAllHolidays");
|
|
if (!response.ok) throw new Error("Failed to fetch holidays");
|
|
|
|
this.holidayList = await response.json();
|
|
} catch (error) {
|
|
console.error("Error fetching holidays:", error);
|
|
alert("Failed to load holiday list.");
|
|
}
|
|
},
|
|
|
|
formatDate(date) {
|
|
return new Date(date).toLocaleDateString();
|
|
},
|
|
|
|
async updateHoliday() {
|
|
try {
|
|
if (!this.selectedDate || this.selectedStates.length === 0 || !this.holidayName) {
|
|
alert("Please fill in all fields.");
|
|
return;
|
|
}
|
|
|
|
const payload = this.selectedStates.map(stateId => ({
|
|
holidayDate: this.selectedDate,
|
|
stateId: stateId,
|
|
holidayName: this.holidayName
|
|
}));
|
|
|
|
const response = await fetch("/OvertimeAPI/UpdateHoliday", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
|
|
if (response.ok) {
|
|
alert("Holiday updated successfully!");
|
|
this.clearForm();
|
|
this.fetchHolidays();
|
|
} else {
|
|
alert("Failed to update holiday.");
|
|
}
|
|
} catch (error) {
|
|
console.error("Error updating holiday:", error);
|
|
alert("An error occurred while updating holiday.");
|
|
}
|
|
},
|
|
|
|
async deleteHoliday(holidayId) {
|
|
if (!confirm("Are you sure you want to delete this holiday?")) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`/OvertimeAPI/DeleteHoliday/${holidayId}`, {
|
|
method: "DELETE"
|
|
});
|
|
|
|
if (response.ok) {
|
|
alert("Holiday deleted successfully!");
|
|
this.fetchHolidays();
|
|
} else {
|
|
alert("Failed to delete holiday.");
|
|
}
|
|
} catch (error) {
|
|
console.error("Error deleting holiday:", error);
|
|
alert("An error occurred while deleting the holiday.");
|
|
}
|
|
},
|
|
|
|
async fetchWeekends() {
|
|
try {
|
|
const response = await fetch("/OvertimeAPI/GetWeekendDay");
|
|
if (!response.ok) throw new Error("Failed to fetch weekends");
|
|
|
|
this.dayList = await response.json();
|
|
} catch (error) {
|
|
console.error("Error fetching weekends:", error);
|
|
alert("Failed to load weekend list.");
|
|
}
|
|
},
|
|
|
|
async fetchStateWeekends() {
|
|
try {
|
|
const response = await fetch("/OvertimeAPI/GetStateWeekends");
|
|
if (!response.ok) throw new Error("Failed to fetch state weekends");
|
|
|
|
this.stateWeekends = await response.json();
|
|
console.log("Fetched state weekends:", this.stateWeekends);
|
|
} catch (error) {
|
|
console.error("Error fetching state weekends:", error);
|
|
alert("Failed to load state weekend data.");
|
|
}
|
|
},
|
|
|
|
async updateWeekend() {
|
|
try {
|
|
if (this.selectedStates.length === 0 || !this.selectedDay) {
|
|
alert("Please select at least one state and a day.");
|
|
return;
|
|
}
|
|
|
|
const selectedDayObject = this.dayList.find(day => day.day === this.selectedDay);
|
|
if (!selectedDayObject) {
|
|
alert("Selected day not found in the list.");
|
|
return;
|
|
}
|
|
|
|
const payload = this.selectedStates.map(stateId => {
|
|
const state = this.stateList.find(s => s.stateId === stateId);
|
|
return {
|
|
StateId: stateId,
|
|
StateName: state.stateName,
|
|
WeekendId: selectedDayObject.weekendId
|
|
};
|
|
});
|
|
|
|
console.log("Payload being sent to API:", payload);
|
|
|
|
const response = await fetch("/OvertimeAPI/UpdateWeekend", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
|
|
if (response.ok) {
|
|
alert("Weekend updated successfully!");
|
|
this.clearWeekend();
|
|
await this.fetchStateWeekends();
|
|
} else {
|
|
alert("Failed to update weekend.");
|
|
}
|
|
} catch (error) {
|
|
console.error("Error updating weekend:", error);
|
|
alert("An error occurred while updating weekend.");
|
|
}
|
|
},
|
|
|
|
clearForm() {
|
|
this.selectedDate = '';
|
|
this.selectedStates = [];
|
|
this.holidayName = '';
|
|
this.selectedDay = '';
|
|
},
|
|
|
|
clearWeekend() {
|
|
this.selectedDay = "";
|
|
this.selectedStates = [];
|
|
}
|
|
}
|
|
});
|
|
|
|
app.mount('#app');
|
|
</script>
|
|
}
|