finalize

src/App.vue

@@ -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

@@ -24,8 +24,7 @@
           </div>
           <div v-if="actionDetail != null">
             <div>
-							<button class="detail-button"
-								@click="callParentDetailFunction(datas.id, datas.booking_id)">
+              <button class="detail-button" @click="callParentDetailFunction(datas.id, datas.booking_id)">
                 <i class="bi bi-ticket-detailed"></i> {{ actionDetail }}
               </button>
             </div>
@@ -54,7 +53,6 @@
 export default {
   name: 'DataTable',
   props: {
-
     tableDatas: {
       type: Object,
       required: true

src/config/index.js

@@ -22,6 +22,7 @@ axios.interceptors.response.use(
     if (newToken) {
       localStorage.setItem('token', newToken)
     }
+    
     return response
   },
   (error) => {

src/router/index.js

@@ -46,7 +46,7 @@ const routes = [
     component: CreateBookingView
   },
   {
-    path: '/modify/:id',
+    path: '/room/modify/:id',
     name: 'Modify',
     component: ModifyView
   },

src/store/index.js

@@ -17,5 +17,4 @@ const storeConfig = {
 
 const store = createStore(storeConfig)
 
-
 export default store;

src/views/BookingView.vue

@@ -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

@@ -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

@@ -8,18 +8,19 @@
 </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: [
+
+ setup() {
+    const employees = ref([])
+    const tableTitles = ref([
       'ID',
       'Name',
       'Role',
@@ -27,13 +28,17 @@ export default defineComponent({
       '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

@@ -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

@@ -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 {