437 lines
22 KiB
Plaintext
437 lines
22 KiB
Plaintext
@{
|
|
ViewData["Title"] = "Station";
|
|
Layout = "~/Views/Shared/_Layout.cshtml";
|
|
}
|
|
|
|
@await Html.PartialAsync("~/Areas/Inventory/Views/_InventoryPartial.cshtml")
|
|
<div id="registerStation">
|
|
<form v-on:submit.prevent="addStation" data-aos="fade-right" id="registerStationForm" v-if="registerStationForm">
|
|
<div class="container register" data-aos="fade-right">
|
|
<div class="row">
|
|
<div class="col-md-9 register-rights" data-aos="fade-right">
|
|
<div class="tab-content" id="myTabContent" data-aos="fade-right">
|
|
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab" data-aos="fade-right">
|
|
<h3 class="register-heading">REGISTRATION STATION</h3>
|
|
<div class="row register-form">
|
|
<div class="col-md-61">
|
|
|
|
@* Station Name *@
|
|
<div class="form-group row">
|
|
<label for="stationName" class="col-sm-3">Station Name:</label>
|
|
<div class="col-sm-9">
|
|
<input type="text" id="stationName" name="stationName" class="form-control" required v-model="stationName">
|
|
</div>
|
|
</div>
|
|
|
|
@* User ID *@
|
|
<div class="form-group row">
|
|
<label class="col-sm-4 col-form-label">Station User PIC</label>
|
|
<div class="col-sm-8">
|
|
<div class="">
|
|
<select class="btn btn-primary form-select" v-model="selectedUserName" :disabled="currentUser != null" required v-on:change="updateDepartment()">
|
|
<option class="btn-light" value="" disabled selected>Select User</option>
|
|
<option class="btn-light" v-for="(technicianUser, index) in users" :key="index" :value="technicianUser.fullName">
|
|
{{ technicianUser.fullName }}
|
|
</option>
|
|
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@* Department ID *@
|
|
<!-- Department Dropdown -->
|
|
<div class="form-group row">
|
|
<label class="col-sm-4 col-form-label">Department: </label>
|
|
<div class="col-sm-8">
|
|
<!-- Use a span to keep the same space occupied -->
|
|
<span v-if="selectedDepartment">{{ selectedDepartment }}</span>
|
|
<span v-else>No department assigned</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div class="form-group row">
|
|
<div class="col-sm-9 offset-sm-3">
|
|
<button type="button" v-on:click="resetForm" class="btn btn-secondary m-1">Reset</button>
|
|
<button type="submit" class="btn btn-primary m-1">Submit</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<form v-on:submit.prevent="submitEditStation" data-aos="fade-right" id="editStationForm" v-if="editStationForm">
|
|
<div class="container register" data-aos="fade-right">
|
|
<div class="row">
|
|
<div class="col-md-9 register-rights" data-aos="fade-right">
|
|
<div class="tab-content" id="myTabContent" data-aos="fade-right">
|
|
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab" data-aos="fade-right">
|
|
<h3 class="register-heading">EDIT STATION</h3>
|
|
<div class="row register-form">
|
|
<div class="col-md-61">
|
|
|
|
@* Station Name *@
|
|
<div class="form-group row">
|
|
<label for="stationName" class="col-sm-3">Station Name:</label>
|
|
<div class="col-sm-9">
|
|
<input type="text" id="stationName" name="stationName" class="form-control" required v-model="stationName">
|
|
</div>
|
|
</div>
|
|
|
|
@* User ID *@
|
|
<div class="form-group row">
|
|
<label class="col-sm-4 col-form-label">Station User PIC</label>
|
|
<div class="col-sm-8">
|
|
<div class="">
|
|
<select class="btn btn-primary form-select" v-model="selectedUserName" :disabled="currentUser != null" required v-on:change="updateDepartment()">
|
|
<option class="btn-light" value="" disabled selected>Select User</option>
|
|
<option class="btn-light" v-for="(technicianUser, index) in users" :key="index" :value="technicianUser.fullName">
|
|
{{ technicianUser.fullName }}
|
|
</option>
|
|
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@* Department ID *@
|
|
<!-- Department Dropdown -->
|
|
<div class="form-group row">
|
|
<label class="col-sm-4 col-form-label">Department: </label>
|
|
<div class="col-sm-8">
|
|
<!-- Use a span to keep the same space occupied -->
|
|
<span v-if="selectedDepartment">{{ selectedDepartment }}</span>
|
|
<span v-else>No department assigned</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div class="form-group row">
|
|
<div class="col-sm-9 offset-sm-3">
|
|
<button type="button" v-on:click="resetForm" class="btn btn-secondary m-1">Reset</button>
|
|
<button type="submit" class="btn btn-primary m-1">Submit</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<div class="row card">
|
|
<div class="card-header">
|
|
<button id="addStationBtn" :class="['btn', 'col-md-3', 'col-lg-3', 'm-1', 'col-12', registerStationForm ? 'btn-danger' : 'btn-success']" v-on:click="registerStationForm = !registerStationForm"><i :class="['fa', registerStationForm ? 'fa-minus' : 'fa-plus']"></i> {{registerStationForm ? 'Hide Add Station' : 'Show Add Station'}}</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<table class="table table-bordered table-hover table-striped no-wrap" id="stationDatatable" style="width:100%;border-style: solid; border-width: 1px"></table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@section Scripts {
|
|
@{
|
|
await Html.RenderPartialAsync("_ValidationScriptsPartial");
|
|
}
|
|
<script>
|
|
$(function () {
|
|
app.mount('#registerStation');
|
|
|
|
// Attach a click event listener to elements with the class 'btn-success'.
|
|
$('#addStationBtn').on('click', function () {
|
|
// Show the modal with the ID 'addStationModal'.
|
|
$('#registerStationModal').modal('show');
|
|
});
|
|
$('.closeModal').on('click', function () {
|
|
// Show the modal with the ID 'addStationModal'.
|
|
$('.modal').modal('hide');
|
|
});
|
|
});
|
|
const app = Vue.createApp({
|
|
data() {
|
|
return {
|
|
stationId: null,
|
|
stationName: null,
|
|
stationUserPIC: null,
|
|
departmentId : null,
|
|
selectedUserName : null,
|
|
selectedDepartment: null,
|
|
stations: null,
|
|
currentUser: null,
|
|
users : null,
|
|
registerStationForm: false,
|
|
editStationForm: false,
|
|
}
|
|
},
|
|
mounted() {
|
|
this.fetchUsers();
|
|
this.fetchStations();
|
|
},
|
|
methods: {
|
|
async fetchUsers() {
|
|
try {
|
|
const response = await fetch(`/InvMainAPI/UserList/`, {
|
|
method: 'POST',
|
|
});
|
|
if (response.ok) {
|
|
this.users = await response.json();
|
|
}
|
|
else {
|
|
console.error(`Failed to fetch user: ${response.statusText}`);
|
|
}
|
|
}
|
|
catch (error) {
|
|
console.error('There was a problem with the fetch operation:', error);
|
|
}
|
|
},
|
|
async fetchStations() {
|
|
try {
|
|
const response = await fetch('/InvMainAPI/StationList', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
}
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const errorData = await response.json();
|
|
console.error('Error response:', errorData);
|
|
this.errorMessage = 'Error: ' + (errorData.message || 'Unknown error');
|
|
return;
|
|
}
|
|
if (this.stationDatatable) {
|
|
this.stationDatatable.clear().destroy();
|
|
}
|
|
const stations = await response.json();
|
|
this.stations = stations;
|
|
|
|
if ($.fn.dataTable.isDataTable('#stationDatatable')) {
|
|
$('#stationDatatable').DataTable().clear().destroy();
|
|
}
|
|
this.initiateTable();
|
|
} catch (error) {
|
|
console.error('Error fetching stations:', error);
|
|
this.errorMessage = 'Error: ' + error.message;
|
|
}
|
|
},
|
|
async addStation() {
|
|
$('#loadingModal').modal('show');
|
|
// Create the payload
|
|
const formData = {
|
|
StationName: this.stationName,
|
|
StationPicID: this.stationUserPIC,
|
|
DepartmentId: this.departmentId,
|
|
};
|
|
|
|
try {
|
|
// List of required fields
|
|
const requiredFields = ['stationName', 'stationUserPIC', 'departmentId'];
|
|
|
|
// Loop through required fields and check if any are null or empty
|
|
for (let field of requiredFields) {
|
|
if (this[field] === null || this[field] === '') {
|
|
alert('Station Error', `Please fill in required fields: ${field}.`, 'warning');
|
|
return; // Exit early if validation fails
|
|
}
|
|
}
|
|
|
|
// Proceed to send the data as raw JSON string
|
|
const response = await fetch('/InvMainAPI/AddStation', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(formData) // Convert the formData to a JSON string
|
|
});
|
|
|
|
await this.fetchStations();
|
|
$('#loadingModal').modal('hide');
|
|
if (!response.ok) {
|
|
const errorData = await response.json();
|
|
console.error('Error response:', errorData);
|
|
this.errorMessage = 'Error: ' + (errorData.message || 'Unknown error');
|
|
|
|
} else {
|
|
this.fetchStations();
|
|
this.resetForm();
|
|
}
|
|
|
|
}
|
|
catch (error) {
|
|
console.error('Error:', error);
|
|
alert('Station Error', `An error occurred: ${error.message}`, 'error');
|
|
}
|
|
finally {
|
|
await new Promise(resolve => {
|
|
$('#loadingModal').on('shown.bs.modal', resolve);
|
|
});
|
|
$('#loadingModal').modal('hide');
|
|
}
|
|
},
|
|
resetForm() {
|
|
this.selectedUserName = null;
|
|
this.selectedDepartment = null;
|
|
this.stationName = null;
|
|
this.stationUserPIC = null;
|
|
this.departmentId = '';
|
|
},
|
|
initiateTable() {
|
|
self = this;
|
|
this.stationDatatable = $('#stationDatatable').DataTable({
|
|
"data": this.stations,
|
|
"columns": [
|
|
{
|
|
"title": "Station Name",
|
|
"data": "stationName",
|
|
},
|
|
{
|
|
"title": "Station User PIC",
|
|
"data": "fullName",
|
|
},
|
|
{
|
|
"title": "Department",
|
|
"data": "departmentName",
|
|
},
|
|
{
|
|
"title": "Edit",
|
|
"data": "stationId",
|
|
"render": function (data) {
|
|
var editButton = `<button type="button" class="btn btn-success edit-btn" data-id="${data}">Edit</button>`;
|
|
return editButton;
|
|
},
|
|
},
|
|
{
|
|
"title": "Delete",
|
|
"data": "stationId",
|
|
"render": function (data) {
|
|
var deleteButton = `<button type="button" class="btn btn-danger delete-btn" data-id="${data}">Delete</button>`;
|
|
return deleteButton;
|
|
},
|
|
}
|
|
],
|
|
responsive: true,
|
|
|
|
})
|
|
// Attach click event listener to the edit buttons
|
|
$('#stationDatatable tbody').off('click', '.edit-btn').on('click', '.edit-btn', function () {
|
|
const stationId = $(this).data('id');
|
|
self.editStation(stationId);
|
|
});
|
|
|
|
// Attach click event listener to the delete buttons
|
|
$('#stationDatatable tbody').off('click', '.delete-btn').on('click', '.delete-btn', function () {
|
|
const stationId = $(this).data('id');
|
|
self.deleteStation(stationId);
|
|
});
|
|
|
|
this.loading = false;
|
|
},
|
|
updateDepartment() {
|
|
// Find the selected user by their full name
|
|
const selectedUser = this.users.find(user => user.fullName === this.selectedUserName);
|
|
console.log(selectedUser);
|
|
if (selectedUser) {
|
|
this.stationUserPIC = selectedUser.id;
|
|
this.departmentId = selectedUser.department.departmentId;
|
|
this.selectedDepartment = selectedUser.department.departmentName; // Set department name
|
|
}
|
|
},
|
|
async editStation(stationId) {
|
|
// Find the selected station data
|
|
const station = this.stations.find(s => s.stationId === stationId);
|
|
if (!station) {
|
|
alert('Error', 'Station not found!', 'warning');
|
|
return;
|
|
}
|
|
|
|
// Populate form fields
|
|
this.stationId = stationId;
|
|
this.stationName = station.stationName;
|
|
this.selectedUserName = station.fullName;
|
|
this.departmentId = station.departmentId;
|
|
this.selectedDepartment = station.departmentName;
|
|
this.stationUserPIC = station.stationPicID;
|
|
|
|
// Show the edit form and hide the add form
|
|
this.registerStationForm = false;
|
|
this.editStationForm = true;
|
|
},
|
|
|
|
async submitEditStation() {
|
|
const formData = {
|
|
StationId: this.stationId,
|
|
StationName: this.stationName,
|
|
StationPicID: this.stationUserPIC,
|
|
DepartmentId: this.departmentId,
|
|
};
|
|
|
|
try {
|
|
// Ensure all required fields are filled
|
|
const requiredFields = ['stationName', 'stationUserPIC', 'departmentId'];
|
|
for (let field of requiredFields) {
|
|
if (!this[field]) {
|
|
alert('Error', `Please fill in required fields: ${field}`, 'warning');
|
|
return;
|
|
}
|
|
}
|
|
|
|
const response = await fetch('/InvMainAPI/EditStation', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(formData)
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const errorData = await response.json();
|
|
console.error('Error response:', errorData);
|
|
this.errorMessage = 'Error: ' + (errorData.message || 'Unknown error');
|
|
return;
|
|
}
|
|
|
|
// Refresh station list and reset form
|
|
await this.fetchStations();
|
|
this.resetForm();
|
|
this.editStationForm = false;
|
|
} catch (error) {
|
|
console.error('Error editing station:', error);
|
|
this.errorMessage = 'Error: ' + error.message;
|
|
}
|
|
},
|
|
|
|
async deleteStation(stationId) {
|
|
if (!confirm("Are you sure you want to delete this station?")) {
|
|
return;
|
|
}
|
|
try {
|
|
const response = await fetch(`/InvMainAPI/DeleteStation/${stationId}`, {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ stationId })
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const errorData = await response.json();
|
|
console.error('Error response:', errorData);
|
|
this.errorMessage = 'Error: ' + (errorData.message || 'Unknown error');
|
|
return;
|
|
}
|
|
|
|
await this.fetchStations();
|
|
} catch (error) {
|
|
console.error('Error deleting stations:', error);
|
|
this.errorMessage = 'Error: ' + error.message;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
} |