132 lines
5.4 KiB
Plaintext
132 lines
5.4 KiB
Plaintext
@{
|
|
ViewData["Title"] = "Register 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">
|
|
@* Left Section *@
|
|
<div class="col-md-7">
|
|
<div class="mb-3">
|
|
<label class="form-label">Date</label>
|
|
<input type="date" class="form-control" v-model="selectedDate">
|
|
</div>
|
|
|
|
<h6 class="fw-bold">OFFICE HOURS</h6>
|
|
<div class="row mb-3">
|
|
<div class="col-4">
|
|
<label>From</label>
|
|
<input type="time" class="form-control" v-model="officeFrom">
|
|
</div>
|
|
<div class="col-4">
|
|
<label>To</label>
|
|
<input type="time" class="form-control" v-model="officeTo">
|
|
</div>
|
|
<div class="col-4">
|
|
<label>Break Hours</label>
|
|
<input type="time" class="form-control" v-model="officeBreak">
|
|
</div>
|
|
</div>
|
|
|
|
<h6 class="fw-bold text-danger">OUTSIDE OFFICE HOURS</h6>
|
|
<div class="row mb-2">
|
|
<div class="col-4">
|
|
<label>From</label>
|
|
<input type="time" class="form-control" v-model="outsideFrom">
|
|
</div>
|
|
<div class="col-4">
|
|
<label>To</label>
|
|
<input type="time" class="form-control" v-model="outsideTo">
|
|
</div>
|
|
<div class="col-4">
|
|
<label>Break Hours</label>
|
|
<input type="time" class="form-control" v-model="outsideBreak">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="airstationDropdown">Air Station</label>
|
|
<select id="airstationDropdown" class="form-control" v-model="selectedAirStation">
|
|
<option v-for="airstation in airstationList" :key="airstation.airstationId" :value="airstation.airstationId">
|
|
{{ airstation.airstationName }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label>Work Brief Description</label>
|
|
<textarea class="form-control" v-model="otDescription"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
@* Right Section *@
|
|
<div class="col-md-5">
|
|
<label>Day</label>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" v-model="selectedDayType" value="Weekday">
|
|
<label class="form-check-label">Weekday</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" v-model="selectedDayType" value="Weekend">
|
|
<label class="form-check-label">Weekend</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="radio" v-model="selectedDayType" value="Public Holiday">
|
|
<label class="form-check-label">Public Holiday</label>
|
|
</div>
|
|
|
|
<div class="mb-3 mt-3">
|
|
<label>Upload File:</label>
|
|
<input type="file" class="form-control" v-on:change="handleFileUpload">
|
|
<small class="text-danger">*upload pdf file only</small>
|
|
</div>
|
|
|
|
<div class="mb-3 d-flex flex-column align-items-center">
|
|
<label>Total OT Hours</label>
|
|
<input type="text" 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>Total Break Hours</label>
|
|
<input type="text" 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="clearForm">Clear</button>
|
|
<button class="btn btn-success ms-3" v-on:click="addOvertime">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
@section Scripts {
|
|
<script>
|
|
const app = Vue.createApp({
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
},
|
|
computed: {
|
|
|
|
},
|
|
mounted() {
|
|
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
}
|
|
});
|
|
|
|
app.mount('#app');
|
|
</script>
|
|
} |