Skip to content

A
ABC_Hotel
Commit 85a44480 authored by vinh's avatar vinh
Browse files
Options

finalize

parent cd02b769
Hide whitespace changes
Inline Side-by-side
Showing with 177 additions and 167 deletions
src/App.vue
View file @ 85a44480
......@@ -4,8 +4,7 @@
<HotelHeader />
</div>
<div class="body">
<div v-if="shouldDisplaySidebar !== '/login' && !shouldDisplaySidebar.includes('/reset-password/') && shouldDisplaySidebar !== '/register' && shouldDisplaySidebar !== '/verify-email' && width > 769"
>
<div v-if="shouldDisplaySidebar !== '/login' && !shouldDisplaySidebar.includes('/reset-password/') && shouldDisplaySidebar !== '/register' && shouldDisplaySidebar !== '/verify-email' && width > 769">
<div class="sidebar">
<NavbarHotel />
</div>
......
src/components/DataTable.vue
View file @ 85a44480
<template>
<div class="table-box">
<table class="table">
<tr>
<th v-for="title in tableTitles" :key="title">{{ title }}</th>
</tr>
<tr v-for="datas, i in tableDatas" :key="i">
<td v-for="data, i in datas" :key="i">{{ data }}</td>
<td class="action-column">
<div v-if="actionSubmitInput != null">
<div>
<input type="text" :id="datas.id" name="fee" placeholder="Fee" class="fee">
<button type="submit" class="submit-button" @click="callParentSubmitInputFunction(datas.id)">
<i class="bi bi-currency-dollar"></i> {{ actionSubmitInput }}
</button>
</div>
</div>
<div v-if="actionModify != null">
<div>
<button class="modify-button" @click="callParentModifyFunction(datas.id, datas.booking_id)">
<i class="bi bi-pencil-square"></i> {{ actionModify }}
</button>
</div>
</div>
<div v-if="actionDetail != null">
<div>
<button class="detail-button"
@click="callParentDetailFunction(datas.id, datas.booking_id)">
<i class="bi bi-ticket-detailed"></i> {{ actionDetail }}
</button>
</div>
</div>
<div v-if="actionSubmit != null">
<div>
<button type="submit" class="submit-button" @click="callParentSubmitFunction(datas.id)">
<i class="bi bi-check-circle"></i> {{ actionSubmit }}
</button>
</div>
</div>
<div v-if="actionDanger != null">
<div>
<button class="danger-button" @click="callParentDangerFunction(datas.id)">
<i class="bi bi-trash"></i> {{ actionDanger }}
</button>
</div>
</div>
</td>
</tr>
</table>
</div>
<div class="table-box">
<table class="table">
<tr>
<th v-for="title in tableTitles" :key="title">{{ title }}</th>
</tr>
<tr v-for="datas, i in tableDatas" :key="i">
<td v-for="data, i in datas" :key="i">{{ data }}</td>
<td class="action-column">
<div v-if="actionSubmitInput != null">
<div>
<input type="text" :id="datas.id" name="fee" placeholder="Fee" class="fee">
<button type="submit" class="submit-button" @click="callParentSubmitInputFunction(datas.id)">
<i class="bi bi-currency-dollar"></i> {{ actionSubmitInput }}
</button>
</div>
</div>
<div v-if="actionModify != null">
<div>
<button class="modify-button" @click="callParentModifyFunction(datas.id, datas.booking_id)">
<i class="bi bi-pencil-square"></i> {{ actionModify }}
</button>
</div>
</div>
<div v-if="actionDetail != null">
<div>
<button class="detail-button" @click="callParentDetailFunction(datas.id, datas.booking_id)">
<i class="bi bi-ticket-detailed"></i> {{ actionDetail }}
</button>
</div>
</div>
<div v-if="actionSubmit != null">
<div>
<button type="submit" class="submit-button" @click="callParentSubmitFunction(datas.id)">
<i class="bi bi-check-circle"></i> {{ actionSubmit }}
</button>
</div>
</div>
<div v-if="actionDanger != null">
<div>
<button class="danger-button" @click="callParentDangerFunction(datas.id)">
<i class="bi bi-trash"></i> {{ actionDanger }}
</button>
</div>
</div>
</td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: 'DataTable',
props: {
name: 'DataTable',
props: {
tableDatas: {
type: Object,
required: true
},
tableTitles: {
type: Object,
required: true
},
actionDanger: {
type: String,
required: false,
default: null
},
actionModify: {
type: String,
required: false,
default: null
},
actionDetail: {
type: String,
required: false,
default: null
},
actionSubmit: {
type: String,
required: false,
default: null
},
actionSubmitInput: {
type: String,
required: false,
default: null
},
functionDetail: {
type: Function,
required: false,
},
functionModify: {
type: Function,
required: false,
},
functionDanger: {
type: Function,
required: false,
},
functionSubmit: {
type: Function,
required: false,
},
functionSubmitInput: {
type: Function,
required: false,
}
},
tableDatas: {
type: Object,
required: true
},
tableTitles: {
type: Object,
required: true
},
actionDanger: {
type: String,
required: false,
default: null
},
actionModify: {
type: String,
required: false,
default: null
},
actionDetail: {
type: String,
required: false,
default: null
},
actionSubmit: {
type: String,
required: false,
default: null
},
actionSubmitInput: {
type: String,
required: false,
default: null
},
functionDetail: {
type: Function,
required: false,
},
functionModify: {
type: Function,
required: false,
},
functionDanger: {
type: Function,
required: false,
},
functionSubmit: {
type: Function,
required: false,
},
functionSubmitInput: {
type: Function,
required: false,
}
},
setup(props) {
const callParentDetailFunction = (param1, param2, param3) => {
props.functionDetail(param1, param2, param3);
}
setup(props) {
const callParentDetailFunction = (param1, param2, param3) => {
props.functionDetail(param1, param2, param3);
}
const callParentModifyFunction = (param1, param2) => {
props.functionModify(param1, param2);
}
const callParentModifyFunction = (param1, param2) => {
props.functionModify(param1, param2);
}
const callParentDangerFunction = (param1) => {
props.functionDanger(param1);
}
const callParentDangerFunction = (param1) => {
props.functionDanger(param1);
}
const callParentSubmitFunction = (param1) => {
props.functionSubmit(param1);
}
const callParentSubmitFunction = (param1) => {
props.functionSubmit(param1);
}
const callParentSubmitInputFunction = (param1) => {
const param2 = document.getElementById(param1).value;
console.log(param2)
props.functionSubmitInput(param1, param2);
}
return {
callParentDetailFunction,
callParentModifyFunction,
callParentDangerFunction,
callParentSubmitFunction,
callParentSubmitInputFunction
}
}
const callParentSubmitInputFunction = (param1) => {
const param2 = document.getElementById(param1).value;
console.log(param2)
props.functionSubmitInput(param1, param2);
}
return {
callParentDetailFunction,
callParentModifyFunction,
callParentDangerFunction,
callParentSubmitFunction,
callParentSubmitInputFunction
}
}
}
</script>
<style scoped>
.action-column {
display: flex;
display: flex;
}
</style>
src/config/index.js
View file @ 85a44480
......@@ -22,6 +22,7 @@ axios.interceptors.response.use(
if (newToken) {
localStorage.setItem('token', newToken)
}
return response
},
(error) => {
......
src/router/index.js
View file @ 85a44480
......@@ -46,7 +46,7 @@ const routes = [
component: CreateBookingView
},
{
path: '/modify/:id',
path: '/room/modify/:id',
name: 'Modify',
component: ModifyView
},
......
src/store/index.js
View file @ 85a44480
......@@ -17,5 +17,4 @@ const storeConfig = {
const store = createStore(storeConfig)
export default store;
src/views/BookingView.vue
View file @ 85a44480
......@@ -9,7 +9,8 @@
</div>
<br />
</div>
<DataTable :tableDatas="bookings" :tableTitles="tableTitles" :actionSubmit="'Checkin'" :actionDanger="'Delete'" :functionSubmit="checkin" :functionDanger="destroy"/>
<DataTable :tableDatas="bookings" :tableTitles="tableTitles" :actionSubmit="'Checkin'" :actionDanger="'Delete'"
:functionSubmit="checkin" :functionDanger="destroy" />
</div>
</template>
......@@ -26,7 +27,8 @@ export default defineComponent({
setup() {
const bookings = ref([]);
const tableTitles = ref(['Booking id', 'Guest name', 'Guest number', 'Arrive date','Leave date', 'Room id', 'Checked'])
const tableTitles = ref(['Booking id', 'Guest name', 'Guest number', 'Arrive date', 'Leave date', 'Room id', 'Checked'])
/**
* Get all bookings
*
......@@ -68,7 +70,7 @@ export default defineComponent({
console.log(id);
try {
const response = await axios.delete(
"checked/delBook",
"booking",
{
data: {
id: id,
......@@ -167,6 +169,7 @@ export default defineComponent({
background: #ff347f;
color: white
}
.create-button-box {
order: 1
}
......
src/views/CheckinView.vue
View file @ 85a44480
......@@ -84,7 +84,7 @@ export default defineComponent({
*/
const destroy = async (id) => {
try {
const response = await axios.delete('checked/delCheck', {
const response = await axios.delete('checkin/checkin', {
data: {
id: id
}
......@@ -120,10 +120,10 @@ export default defineComponent({
'Employee name': response.data[1].name,
'Employee role': response.data[1].role,
}
console.log(response.data[1])
console.log(response.data)
document.getElementById('detail-modal').style.display = 'block'
} catch (error) {
console.error(error.response.data)
console.error(error)
}
}
......
src/views/EmployeeView.vue
View file @ 85a44480
......@@ -8,32 +8,37 @@
</template>
<script>
import { defineComponent } from 'vue'
import { defineComponent,ref } from 'vue'
import DataTable from '@/components/DataTable.vue'
import axios from '@/config'
export default defineComponent({
name: 'EmployeeView',
components: {
DataTable
},
data() {
return {
employees: [],
tableTitles: [
'ID',
'Name',
'Role',
'Shift',
'Day off',
'Salary',
'Status'
]
setup() {
const employees = ref([])
const tableTitles = ref([
'ID',
'Name',
'Role',
'Shift',
'Day off',
'Salary',
'Status'
])
const getEmployee = async () => {
const response = await axios.get('employee')
employees.value = response.data
}
},
getEmployee()
async mounted() {
let results = await this.$axios.get('employee')
this.employees = results.data
return {
employees,
tableTitles
}
}
})
</script>
......
src/views/LoginView.vue
View file @ 85a44480
......@@ -54,7 +54,6 @@
<script>
import { defineComponent, ref } from 'vue'
import store from '../store';
// import { createStore } from 'vuex';
import axios from '../config'
import router from '../router'
......@@ -62,7 +61,7 @@ export default defineComponent({
name: 'LoginView',
setup() {
// const store = createStore(storeConfig)
const username = ref('');
const password = ref('');
const errors = ref('');
......@@ -71,18 +70,24 @@ export default defineComponent({
*
* @return {void}
*/
const submitForm = async () => {
try {
let response = await axios.post('auth/login', {
username: username.value,
password: password.value
})
localStorage.setItem('token', response.data.access_token)
localStorage.setItem('isLoggedIn', true)
router.push('/')
let response2 = await axios.post('auth/me')
const role = response2.data.role
if (role == 'guest') {
errors.value = 'You are not allowed to access this page'
return
}
localStorage.setItem('role', role)
localStorage.setItem('token', response.data.access_token)
localStorage.setItem('isLoggedIn', true)
router.push('/')
store.commit('setRole')
} catch (error) {
errors.value = error.response.data.error
......
src/views/ModifyView.vue
View file @ 85a44480
......@@ -230,7 +230,7 @@ export default defineComponent({
// for (const value of formData.values()) {
// conse.log(value);
// }
await axios.post('modify', formData, {
await axios.post('room/modify', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
......@@ -254,7 +254,7 @@ export default defineComponent({
showInput(input) {
console.log(input)
const id = ref(document.getElementById(input));
console.log(id.value.style)
if (id.value.style.display === "") {
id.value.style.display = "block";
} else {
......
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