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