406 lines
19 KiB
Plaintext
406 lines
19 KiB
Plaintext
@{
|
|
ViewData["Title"] = "Edit Overtime";
|
|
Layout = "~/Views/Shared/_Layout.cshtml";
|
|
}
|
|
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
|
|
|
|
<div id="app" class="container mt-4 d-flex justify-content-center">
|
|
<div class="card shadow-sm" style="width: 1100px;">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-7">
|
|
<div class="mb-3">
|
|
<label class="form-label" for="dateInput">Date</label>
|
|
<input type="date" class="form-control" v-model="editForm.otDate"
|
|
v-on:input="calculateOTAndBreak">
|
|
</div>
|
|
|
|
<!-- OFFICE HOURS -->
|
|
<h6 class="fw-bold">OFFICE HOURS</h6>
|
|
<div class="d-flex gap-3 mb-3 align-items-end flex-wrap">
|
|
<div style="flex: 1;">
|
|
<label for="officeFrom">From</label>
|
|
<input type="time" class="form-control" v-model="editForm.officeFrom"
|
|
v-on:input="calculateOTAndBreak">
|
|
</div>
|
|
<div style="flex: 1;">
|
|
<label for="officeTo">To</label>
|
|
<input type="time" id="officeTo" class="form-control" v-model="editForm.officeTo"
|
|
v-on:input="calculateOTAndBreak">
|
|
</div>
|
|
<div style="flex: 1;">
|
|
<label for="officeBreak">Break Hours (Minutes)</label>
|
|
<div class="d-flex">
|
|
<input type="number" id="officeBreak" class="form-control"
|
|
v-model="editForm.officeBreak"
|
|
v-on:input="calculateOTAndBreak" placeholder="e.g. 30">
|
|
<button class="btn btn-outline-danger ms-2" v-on:click="clearOfficeHours" title="Clear Office Hours">
|
|
<i class="bi bi-x-circle"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AFTER OFFICE HOURS -->
|
|
<h6 class="fw-bold text-danger">AFTER OFFICE HOURS</h6>
|
|
<div class="d-flex gap-3 mb-3 align-items-end flex-wrap">
|
|
<div style="flex: 1;">
|
|
<label for="afterFrom">From</label>
|
|
<input type="time" id="afterFrom" class="form-control" v-model="editForm.afterFrom"
|
|
v-on:input="calculateOTAndBreak">
|
|
</div>
|
|
<div style="flex: 1;">
|
|
<label for="afterTo">To</label>
|
|
<input type="time" id="afterTo" class="form-control" v-model="editForm.afterTo"
|
|
v-on:input="calculateOTAndBreak">
|
|
</div>
|
|
<div style="flex: 1;">
|
|
<label for="afterBreak">Break Hours (Minutes)</label>
|
|
<div class="d-flex">
|
|
<input type="number" id="afterBreak" class="form-control"
|
|
v-model="editForm.afterBreak"
|
|
v-on:input="calculateOTAndBreak" placeholder="e.g. 45">
|
|
<button class="btn btn-outline-danger ms-2" v-on:click="clearAfterHours" title="Clear After Office Hours">
|
|
<i class="bi bi-x-circle"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="mb-3" v-if="isPSTWAIR">
|
|
<label for="airstationDropdown">Air Station</label>
|
|
<select id="airstationDropdown" class="form-control" v-model="editForm.stationId">
|
|
<option value="" disabled selected>Select Station</option>
|
|
<option v-for="station in airstationList" :key="station.stationId" :value="station.stationId">
|
|
{{ station.stationName || 'Unnamed Station' }}
|
|
</option>
|
|
</select>
|
|
<small class="text-danger">*Only for PSTW AIR</small>
|
|
</div>
|
|
|
|
|
|
<div class="mb-3">
|
|
<label for="otDescription">Work Brief Description</label>
|
|
<textarea id="otDescription" class="form-control"
|
|
v-model="editForm.otDescription"
|
|
v-on:input="limitCharCount"
|
|
placeholder="Describe the work done..."></textarea>
|
|
<small class="text-muted">
|
|
{{ charCount }} / 150 characters
|
|
</small>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-5">
|
|
<label class="mb-2">Day</label>
|
|
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" id="weekday" v-model="editForm.selectedDayType" value="Weekday">
|
|
<label class="form-check-label" for="weekday">Weekday</label>
|
|
</div>
|
|
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" id="weekend" v-model="editForm.selectedDayType" value="Weekend">
|
|
<label class="form-check-label" for="weekend">Weekend</label>
|
|
</div>
|
|
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" id="publicHoliday" v-model="editForm.selectedDayType"
|
|
value="Public Holiday">
|
|
<label class="form-check-label" for="publicHoliday">Public Holiday</label>
|
|
</div>
|
|
|
|
<div class="mb-3 d-flex flex-column align-items-center">
|
|
<label for="totalOTHours">Total OT Hours</label>
|
|
<input type="text" id="totalOTHours" class="form-control text-center" v-model="totalOTHours"
|
|
style="width: 200px;" readonly>
|
|
</div>
|
|
|
|
<div class="mb-3 d-flex flex-column align-items-center">
|
|
<label for="totalBreakHours">Total Break Hours</label>
|
|
<input type="text" id="totalBreakHours" class="form-control text-center" v-model="totalBreakHours"
|
|
style="width: 200px;" readonly>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-end mt-3">
|
|
<button class="btn btn-danger" v-on:click="goBack">Cancel</button>
|
|
<button class="btn btn-success ms-3" v-on:click="updateRecord">Update</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@section Scripts {
|
|
@{
|
|
await Html.RenderPartialAsync("_ValidationScriptsPartial");
|
|
}
|
|
<script>
|
|
const app = Vue.createApp({
|
|
data() {
|
|
return {
|
|
editForm: {
|
|
overtimeId: null,
|
|
otDate: "",
|
|
officeFrom: "",
|
|
officeTo: "",
|
|
officeBreak: 0,
|
|
afterFrom: "",
|
|
afterTo: "",
|
|
afterBreak: 0,
|
|
stationId: "",
|
|
otDescription: "",
|
|
otDays: "",
|
|
userId: null,
|
|
},
|
|
airstationList: [],
|
|
totalOTHours: "0 hr 0 min",
|
|
totalBreakHours: "0 hr 0 min",
|
|
currentUser: null,
|
|
isPSTWAIR: false,
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
charCount() {
|
|
return this.editForm.otDescription.length;
|
|
}
|
|
},
|
|
async mounted() {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const overtimeId = urlParams.get('overtimeId');
|
|
if (overtimeId) {
|
|
await this.fetchOvertimeRecord(overtimeId);
|
|
}
|
|
|
|
await this.fetchUser();
|
|
|
|
if (this.isPSTWAIR) {
|
|
await this.fetchStations();
|
|
}
|
|
},
|
|
methods: {
|
|
async fetchOvertimeRecord(id) {
|
|
try {
|
|
const res = await fetch(`/OvertimeAPI/GetOvertimeRecordById/${id}`);
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
this.populateForm(data); // Fill form fields with data
|
|
} else {
|
|
alert("Failed to fetch overtime record.");
|
|
}
|
|
} catch (err) {
|
|
console.error("Fetch error:", err);
|
|
}
|
|
},
|
|
populateForm(record) {
|
|
this.editForm = {
|
|
...record,
|
|
otDate: record.otDate.slice(0, 10),
|
|
selectedDayType: record.otDays,
|
|
};
|
|
|
|
this.calculateOTAndBreak();
|
|
},
|
|
async fetchStations() {
|
|
try {
|
|
const response = await fetch(`/OvertimeAPI/GetStationsByDepartment`);
|
|
if (!response.ok) throw new Error("Failed to fetch stations");
|
|
|
|
this.airstationList = await response.json();
|
|
} catch (error) {
|
|
console.error("Error fetching stations:", error);
|
|
}
|
|
},
|
|
async fetchUser() {
|
|
try {
|
|
const response = await fetch(`/IdentityAPI/GetUserInformation/`, { method: 'POST' });
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
this.currentUser = data?.userInfo || null;
|
|
this.userId = this.currentUser?.id || null;
|
|
|
|
console.log("Fetched User:", this.currentUser);
|
|
console.log("Dept ID:", this.currentUser?.departmentId);
|
|
|
|
if (this.currentUser?.department?.departmentId === 2) {
|
|
this.isPSTWAIR = true;
|
|
console.log("User is PSTW AIR");
|
|
}
|
|
} else {
|
|
console.error(`Failed to fetch user: ${response.statusText}`);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error fetching user:", error);
|
|
}
|
|
},
|
|
limitCharCount(event) {
|
|
if (this.editForm.otDescription && this.editForm.otDescription.length > 150) {
|
|
this.editForm.otDescription = this.editForm.otDescription.substring(0, 150);
|
|
event.preventDefault();
|
|
}
|
|
},
|
|
calculateOTAndBreak() {
|
|
let officeOT = this.calculateTimeDifference(
|
|
this.editForm.officeFrom,
|
|
this.editForm.officeTo,
|
|
this.editForm.officeBreak
|
|
);
|
|
|
|
let afterOT = this.calculateTimeDifference(
|
|
this.editForm.afterFrom,
|
|
this.editForm.afterTo,
|
|
this.editForm.afterBreak
|
|
);
|
|
|
|
let totalOTMinutes = officeOT.minutes + afterOT.minutes;
|
|
let totalOTHours = officeOT.hours + afterOT.hours + Math.floor(totalOTMinutes / 60);
|
|
totalOTMinutes = totalOTMinutes % 60;
|
|
|
|
this.totalOTHours = `${totalOTHours} hr ${totalOTMinutes} min`;
|
|
|
|
let totalBreakMinutes = (this.editForm.officeBreak || 0) + (this.editForm.afterBreak || 0);
|
|
let totalBreakHours = Math.floor(totalBreakMinutes / 60);
|
|
totalBreakMinutes = totalBreakMinutes % 60;
|
|
|
|
this.totalBreakHours = `${totalBreakHours} hr ${totalBreakMinutes} min`;
|
|
},
|
|
calculateTimeDifference(startTime, endTime, breakMinutes) {
|
|
if (!startTime || !endTime) {
|
|
return { hours: 0, minutes: 0 };
|
|
}
|
|
|
|
const start = this.parseTime(startTime);
|
|
const end = this.parseTime(endTime);
|
|
|
|
let diffMinutes = (end.hours * 60 + end.minutes) - (start.hours * 60 + start.minutes);
|
|
if (diffMinutes < 0) {
|
|
diffMinutes += 24 * 60;
|
|
}
|
|
|
|
diffMinutes -= breakMinutes || 0;
|
|
|
|
const hours = Math.floor(diffMinutes / 60);
|
|
const minutes = diffMinutes % 60;
|
|
|
|
return { hours, minutes };
|
|
},
|
|
parseTime(timeString) {
|
|
const [hours, minutes] = timeString.split(':').map(Number);
|
|
return { hours, minutes };
|
|
},
|
|
formatTime(timeString) {
|
|
if (!timeString) return null;
|
|
const [hours, minutes] = timeString.split(':');
|
|
return `${hours.padStart(2, '0')}:${minutes.padStart(2, '0')}:00`; //HH:mm:ss format
|
|
},
|
|
async updateRecord() {
|
|
if (this.editForm.officeFrom && !this.editForm.officeTo) {
|
|
alert("Please enter a 'To' time for Office Hours.");
|
|
return;
|
|
}
|
|
if (this.editForm.officeTo && !this.editForm.officeFrom) {
|
|
alert("Please enter a 'From' time for Office Hours.");
|
|
return;
|
|
}
|
|
if (this.editForm.afterFrom && !this.editForm.afterTo) {
|
|
alert("Please enter a 'To' time for After Hours.");
|
|
return;
|
|
}
|
|
if (this.editForm.afterTo && !this.editForm.afterFrom) {
|
|
alert("Please enter a 'From' time for After Hours.");
|
|
return;
|
|
}
|
|
|
|
// Check if both Office and After hours are empty
|
|
if ((!this.editForm.officeFrom || !this.editForm.officeTo) &&
|
|
(!this.editForm.afterFrom || !this.editForm.afterTo)) {
|
|
alert("Please enter either Office Hours or After Hours.");
|
|
return;
|
|
}
|
|
|
|
// Existing validation for "From" < "To" logic
|
|
if (this.editForm.officeFrom && this.editForm.officeTo) {
|
|
if (this.editForm.officeTo <= this.editForm.officeFrom) {
|
|
alert("Invalid Office Time: 'To' time must be later than 'From' time (same day only).");
|
|
return;
|
|
}
|
|
}
|
|
|
|
if (this.editForm.afterFrom && this.editForm.afterTo) {
|
|
if (this.editForm.afterTo <= this.editForm.afterFrom) {
|
|
alert("Invalid After Time: 'To' time must be later than 'From' time (same day only).");
|
|
return;
|
|
}
|
|
}
|
|
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append("OvertimeId", this.editForm.overtimeId);
|
|
formData.append("OtDate", this.editForm.otDate);
|
|
formData.append("StationId", this.editForm.stationId || "");
|
|
formData.append("OtDescription", this.editForm.otDescription || "");
|
|
formData.append("OtDays", this.editForm.selectedDayType);
|
|
formData.append("OfficeFrom", this.formatTime(this.editForm.officeFrom) || "");
|
|
formData.append("OfficeTo", this.formatTime(this.editForm.officeTo) || "");
|
|
formData.append("After Office From", this.formatTime(this.editForm.afterFrom) || "");
|
|
formData.append("After Office To", this.formatTime(this.editForm.afterTo) || "");
|
|
|
|
formData.append("officeBreak", this.editForm.officeBreak || 0);
|
|
formData.append("afterBreak", this.editForm.afterBreak || 0);
|
|
|
|
// Conditionally include nullable fields
|
|
if (this.editForm.afterFrom) {
|
|
formData.append("afterFrom", this.formatTime(this.editForm.afterFrom));
|
|
}
|
|
if (this.editForm.afterTo) {
|
|
formData.append("afterTo", this.formatTime(this.editForm.afterTo));
|
|
}
|
|
|
|
// Required field
|
|
formData.append("userId", this.currentUser?.id);
|
|
|
|
const response = await fetch(`/OvertimeAPI/UpdateOvertimeRecord`, {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
if (response.ok) {
|
|
alert("Overtime record updated successfully!");
|
|
|
|
window.location.href = '/OTcalculate/Overtime/OtRecords';
|
|
} else {
|
|
alert("Failed to update overtime record.");
|
|
}
|
|
} catch (error) {
|
|
console.error("Error updating record:", error);
|
|
alert("An error occurred while updating the overtime record.");
|
|
}
|
|
},
|
|
|
|
goBack() {
|
|
window.location.href = "/OTcalculate/Overtime/OtRecords";
|
|
},
|
|
clearOfficeHours() {
|
|
this.editForm.officeFrom = "";
|
|
this.editForm.officeTo = "";
|
|
this.editForm.officeBreak = 0;
|
|
this.calculateOTAndBreak();
|
|
},
|
|
clearAfterHours() {
|
|
this.editForm.afterFrom = "";
|
|
this.editForm.afterTo = "";
|
|
this.editForm.afterBreak = 0;
|
|
this.calculateOTAndBreak();
|
|
},
|
|
|
|
}
|
|
});
|
|
|
|
app.mount("#app");
|
|
</script>
|
|
} |