commit

src/App.vue

@@ -21,18 +21,18 @@
               <li>
                 <router-link to="/" class="nav-link px-2 text-secondary">Dashboard</router-link>
               </li>
-              <li v-if="$store.state.isLoggedIn && $store.getters.currentUser.user.role == 'admin'">
+              <li>
                 <router-link to="/user-list" class="nav-link px-2 text-secondary">User list</router-link>
               </li>
-              <li v-if="$store.state.isLoggedIn" class="text-end">
+              <li class="text-end">
                 <button @click="$store.commit('logout')" class="btn btn-danger">Logout</button>
               </li>
             </ul>
           </div>
           <div class="text-end">
-            <router-link to="/login" v-if="!$store.state.isLoggedIn"
+            <router-link to="/login"
               class="btn btn-outline-light me-2">Login</router-link>
-            <router-link to="/register" v-if="!$store.state.isLoggedIn" class="btn btn-warning">Register</router-link>
+            <router-link to="/register" class="btn btn-warning">Register</router-link>
           </div>
         </div>
       </header>

src/components/HotelFooter.vue

 <template>
-    <footer class="bg-dark text-white py-3">
-  <div class="container">
-    <div class="row">
-      <div class="col-12 col-md-6">
-        <h3>Contact Us</h3>
-        <ul class="list-unstyled">
-          <li>123 Main St</li>
-          <li>Anytown, USA 12345</li>
-          <li>Phone: (123) 456-7890</li>
-          <li>Email: info@example.com</li>
-        </ul>
-      </div>
-      <div class="col-12 col-md-6">
-        <h3>Connect With Us</h3>
-        <ul class="list-unstyled">
-          <li><a href="#"><i class="fab fa-facebook"></i> Facebook</a></li>
-          <li><a href="#"><i class="fab fa-twitter"></i> Twitter</a></li>
-          <li><a href="#"><i class="fab fa-instagram"></i> Instagram</a></li>
-        </ul>
+  <div class="bg-dark text-white py-3">
+    <div class="container">
+      <div class="row">
+        <div class="col-12 col-md-6">
+          <h3>Contact Us</h3>
+          <ul class="list-unstyled">
+            <li>123 Main St</li>
+            <li>Anytown, USA 12345</li>
+            <li>Phone: (123) 456-7890</li>
+            <li>Email: info@example.com</li>
+          </ul>
+        </div>
+        <div class="col-12 col-md-6">
+          <h3>Connect With Us</h3>
+          <ul class="list-unstyled">
+            <li><a href="#"><i class="fab fa-facebook"></i> Facebook</a></li>
+            <li><a href="#"><i class="fab fa-twitter"></i> Twitter</a></li>
+            <li><a href="#"><i class="fab fa-instagram"></i> Instagram</a></li>
+          </ul>
+        </div>
       </div>
     </div>
   </div>
-</footer>
 </template>
 
 <script>

src/components/HotelHeader.vue

 <template>
-    <div>
-        <h1>ABC Hotel</h1>
-        <button>View booking</button>
-        <button>View checkin</button>
-        <button>View employee</button>
-        <button>View room</button>
-        <button>View dashboard</button>
-        <button>Logout</button>
-    </div>
+  <div>
+    <h1>ABC Hotel</h1>
+    <button>View booking</button>
+    <button>View checkin</button>
+    <button>View employee</button>
+    <button>View room</button>
+    <button>View dashboard</button>
+    <button>Logout</button>
+  </div>
 </template>
 
 <script>
@@ -16,5 +16,4 @@ export default {
 }
 </script>
 
-<style>
-</style>
+<style></style>

src/config/index.js

+import axios from 'axios'
+
+
+const $axios = axios.create({
+    baseURL: 'http://localhost:8000/api',
+    headers: {
+        'Accept': 'application/json',
+        'Authorization': `Bearer ${localStorage.getItem('token')}`
+    }  
+})
+
+export default $axios

src/main.js

@@ -17,3 +17,4 @@ app.use(router).mount('#app')
 
 
 
+

src/store/index.js

-import axios from "axios";
 import router from "@/router";
-
+import axios from "../config";
 const storeConfig = {
   state: {
     isLoggedIn: false,
-    user: null,
+    token: null,
   },
 
   mutations: {
-    login(state, user) {
+    login(state, token) {
       state.isLoggedIn = true;
-      state.user = user;
+      state.token = token;
+
+      localStorage.setItem('token', token)
+      localStorage.setItem('isLoggedIn', state.isLoggedIn)
     },
     logout(state) {
-      state.isLoggedIn = false;
-      state.user = null;
-      router.push("/login");
+      state.isLoggedIn = false
+      state.token = null
+
+      localStorage.removeItem('isLoggedIn')
+      localStorage.removeItem('token')
+      
     },
   },
 
   actions: {
     async login({ commit }, { username, password }) {
-      try {
-        console.log("logging")
-        const response = await axios.post("http://127.0.0.1:8000/api/login", {
-          username,
-          password,
-        });
-        const user = response.data;
-        commit("login", user);
-        router.push({ name: 'Dashboard' })
-      } catch (error) {
-        alert(error.response.data.error)
-        alert(error.response.data.message)
-        console.error(error.response.data);
-      }
-    },
+      const response = await axios.post('auth/login', {
+        username,
+        password
+      })
+      const token = response.data.access_token
+      console.log(token)
+      commit('login', token)
+      router.push(  '/' )
+      },
     logout({ commit }) {
       commit("logout");
     },

src/views/BookingView.vue

@@ -45,7 +45,7 @@
 
 <script>
 import { defineComponent, ref } from "vue";
-import axios from "axios";
+import axios from '../config';
 
 export default defineComponent({
   name: "BookingView",
@@ -58,7 +58,7 @@ export default defineComponent({
      * @return {void}
      */
     const getBooking = async () => {
-      const response = await axios.get("http://127.0.0.1:8000/api/booking");
+      const response = await axios.get("booking");
       bookings.value = response.data;
     };
 
@@ -72,7 +72,7 @@ export default defineComponent({
     const checkin = async (id) => {
       console.log(id);
       try {
-        const response = await axios.post("http://127.0.0.1:8000/api/checked", {
+        const response = await axios.post("checked", {
           id: id,
         });
         console.log(response.data);
@@ -93,7 +93,7 @@ export default defineComponent({
       console.log(id);
       try {
         const response = await axios.delete(
-          "http://127.0.0.1:8000/api/checked/delBook",
+          "checked/delBook",
           {
             data: {
               id: id,

src/views/CheckinView.vue

@@ -38,7 +38,7 @@
           <td>
             <form @submit.prevent="addFee(checkin.id)">
               <div class="input-group">
-                <input type="text" class="form-control" v-model="fee" name="fee" id="fee" placeholder="Fee">
+                <input type="text" class="form-control" v-model="checkin.id" name="fee" id="fee" placeholder="Fee">
                 <button type="submit" class="btn btn-secondary">
                   <i class="bi bi-currency-dollar"></i> Submit
                 </button>
@@ -53,7 +53,7 @@
 
 <script>
 import { defineComponent, ref } from 'vue'
-import axios from 'axios'
+import axios from '../config'
 
 export default defineComponent({
   name: 'CheckinView',
@@ -67,7 +67,7 @@ export default defineComponent({
      * @return {void}
      */
     const getCheckin = async () => {
-      const response = await axios.get('http://127.0.0.1:8000/api/checkin')
+      const response = await axios.get('checkin')
       checkins.value = response.data
     }
 
@@ -82,7 +82,7 @@ export default defineComponent({
     const checkout = async (id, bookingId) => {
       console.log(id, bookingId)
       try {
-        const response = await axios.post('http://127.0.0.1:8000/api/checked/checkout', {
+        const response = await axios.post('checked/checkout', {
           id: id,
           bookingId: bookingId
         })
@@ -102,7 +102,7 @@ export default defineComponent({
      */
     const destroy = async (id) => {
       try {
-        const response = await axios.delete('http://127.0.0.1:8000/api/checked/delCheck', {
+        const response = await axios.delete('checked/delCheck', {
           data: {
             id: id
           }
@@ -125,7 +125,7 @@ export default defineComponent({
     const addFee = async (id) => {
       try {
         console.log(id, fee.value);
-        const response = await axios.post('http://127.0.0.1:8000/api/checked/addFee', {
+        const response = await axios.post('checked/addFee', {
           id: id,
           fee: fee.value
         })

src/views/CreateBookingView.vue

@@ -28,7 +28,7 @@
 
 <script>
 import { ref, defineComponent } from 'vue'
-import axios from 'axios'
+import axios from '../config'
 import router from '@/router'
 
 export default defineComponent({
@@ -47,7 +47,7 @@ export default defineComponent({
     const addBooking = async () => {
       console.log(guest_name.value, guest_number.value, room_id.value)
       try {
-        const response = await axios.post('http://127.0.0.1:8000/api/create-booking', {
+        const response = await axios.post('create-booking', {
           guest_name: guest_name.value,
           guest_number: guest_number.value,
           room_id: room_id.value
@@ -56,7 +56,7 @@ export default defineComponent({
         alert('Create booking successfully');
         router.push({ name: 'Booking' })
       } catch (error) {
-        console.error(error.response.data)
+        alert(error.response.data.message)
       }
     }
 

src/views/ModifyView.vue

@@ -4,6 +4,18 @@
       <label for="name" class="form-label">Room Name</label>
       <input type="text" id="name" name="name" v-model="name" class="form-control">
     </div>
+    <div class="col-md-6">
+      <label for="image_first" class="form-label">First Image</label>
+      <input type="file" ref="fileInput" @change="imageFirst" id="image_first" name="image_first" class="form-control">
+    </div>
+    <div class="col-md-6">
+      <label for="image_second" class="form-label">Second Image</label>
+      <input type="file" ref="fileInput" @change="imageSecond" id="image_second" name="image_second" class="form-control">
+    </div>
+    <div class="col-md-6">
+      <label for="image_third" class="form-label">Third Image</label>
+      <input type="file" ref="fileInput" @change="imageThird" id="image_third" name="image_third" class="form-control">
+    </div>
     <div class="col-md-6">
       <label for="type" class="form-label">Type</label>
       <input type="text" id="type" name="type" v-model="type" class="form-control">
@@ -24,16 +36,10 @@
       <label class="form-label">Balcony</label>
       <div>
         <div class="form-check">
-          <input class="form-check-input" type="radio" name="balcony" id="balcony-true" value="true" v-model="balcony">
-          <label class="form-check-label" for="balcony-true">
-            True
-          </label>
-        </div>
-        <div class="form-check">
-          <input class="form-check-input" type="radio" name="balcony" id="balcony-false" value="false" v-model="balcony">
-          <label class="form-check-label" for="balcony-false">
-            False
-          </label>
+          <select name="balcony" id="balcony" v-model="balcony" class="form-select">
+            <option value="1">True</option>
+            <option value="0">False</option>
+          </select>
         </div>
       </div>
     </div>
@@ -41,20 +47,18 @@
       <label for="view" class="form-label">View</label>
       <input type="text" id="view" name="view" v-model="view" class="form-control">
     </div>
+    <div class="col-md-6">
+      <label for="description" class="form-label">Description</label>
+      <input type="text" id="description" name="description" v-model="description" class="form-control">
+    </div>
     <div class="col-md-6">
       <label class="form-label">Smoking</label>
       <div>
         <div class="form-check">
-          <input class="form-check-input" type="radio" name="smoking" id="smoking-true" value="true" v-model="smoking">
-          <label class="form-check-label" for="smoking-true">
-            True
-          </label>
-        </div>
-        <div class="form-check">
-          <input class="form-check-input" type="radio" name="smoking" id="smoking-false" value="false" v-model="smoking">
-          <label class="form-check-label" for="smoking-false">
-            False
-          </label>
+          <select name="smoking" id="smoking" v-model="smoking" class="form-select">
+            <option value="1">True</option>
+            <option value="0">False</option>
+          </select>
         </div>
       </div>
     </div>
@@ -66,16 +70,10 @@
       <label class="form-label">Bathtub</label>
       <div>
         <div class="form-check">
-          <input class="form-check-input" type="radio" name="bathtub" id="bathtub-true" value="true" v-model="bathtub">
-          <label class="form-check-label" for="bathtub-true">
-            True
-          </label>
-        </div>
-        <div class="form-check">
-          <input class="form-check-input" type="radio" name="bathtub" id="bathtub-false" value="false" v-model="bathtub">
-          <label class="form-check-label" for="bathtub-false">
-            False
-          </label>
+          <select name="bathtub" id="bathtub" v-model="bathtub" class="form-select">
+            <option value="1">True</option>
+            <option value="0">False</option>
+          </select>
         </div>
       </div>
     </div>
@@ -89,7 +87,7 @@
 
 <script>
 import { defineComponent, ref } from 'vue'
-import axios from 'axios'
+import axios from '../config'
 import { useRoute } from 'vue-router'
 import { useRouter } from 'vue-router'
 
@@ -100,52 +98,89 @@ export default defineComponent({
     const router = useRouter();
     const route = useRoute()
     const id = route.params.id
-    const name = ref(null)
-    const type = ref(null)
-    const hour_price = ref(null)
-    const day_price = ref(null)
-    const size = ref(null)
-    const balcony = ref(null)
-    const view = ref(null)
-    const smoking = ref(null)
-    const floor = ref(null)
-    const bathtub = ref(null)
+    // const name = ref(null)
+    // const type = ref(null)
+    // const hour_price = ref(null)
+    // const day_price = ref(null)
+    // const size = ref(null)
+    // const balcony = ref(null)
+    // const view = ref(null)
+    // const smoking = ref(null)
+    // const floor = ref(null)
+    // const bathtub = ref(null)
+    const imageFirstFile = ref(null);
+    const imageSecondFile = ref(null);
+    const imageThirdFile = ref(null);
+
+    const imageFirst = (event) => {
+      imageFirstFile.value = event.target.files[0];
+    }
+
+    const imageSecond = (event) => {
+      imageSecondFile.value = event.target.files[0];
+    }
+
+    const imageThird = (event) => {
+      imageThirdFile.value = event.target.files[0];
+    }
+
 
     /**
      * Get room data
      *
      * @return void
      */
+
     const update = async () => {
-      await axios.put('http://127.0.0.1:8000/api/modify', {
-        name: name.value,
-        type: type.value,
-        hour_price: hour_price.value,
-        day_price: day_price.value,
-        size: size.value,
-        balcony: balcony.value,
-        view: view.value,
-        smoking: smoking.value,
-        floor: floor.value,
-        bathtub: bathtub.value,
-        id: id
+      
+      const formData = new FormData()
+      const form = document.querySelector('form')
+      formData.append('id', id)
+      for (let input of form) {
+        if (input.value !== '') {
+          if (input.name == 'image_first') {
+            formData.append(input.name, imageFirstFile.value)
+          }
+          if (input.name == 'image_second') {
+            formData.append(input.name, imageSecondFile.value)
+          }
+          if (input.name == 'image_third') {
+            formData.append(input.name, imageThirdFile.value)
+          }
+          else {
+            formData.append(input.name, input.value)
+          }
+        }
+
+      }
+      console.log(formData)
+      await axios.post('modify', formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data'
+        }
       })
       router.push({ name: 'Room' })
-    }
 
+    }
     return {
       update,
-      name,
-      type,
-      hour_price,
-      day_price,
-      size,
-      balcony,
-      view,
-      smoking,
-      floor,
-      bathtub,
+      // name,
+      // type,
+      // hour_price,
+      // day_price,
+      // size,
+      // balcony,
+      // view,
+      // smoking,
+      // floor,
+      // bathtub,
+      id,
+      router,
+      imageFirst,
+      imageSecond,
+      imageThird,
     }
   }
+
 })
 </script>    

src/views/RegisterView.vue

@@ -44,7 +44,7 @@
 </template>
 
 <script>
-import axios from 'axios'
+import axios from '../config'
 import { ref, defineComponent } from 'vue'
 import storeConfig from '../store';
 import { createStore } from 'vuex';
@@ -67,7 +67,7 @@ export default defineComponent({
      */
     const register = async () => {
       try {
-        const response = await axios.post('http://127.0.0.1:8000/api/register', {
+        const response = await axios.post('register', {
           username: username.value,
           password: password.value,
           confirm_password: confirm_password.value,

src/views/UserListView.vue

@@ -28,7 +28,7 @@
 
 <script>
 import { defineComponent, ref } from 'vue'
-import axios from 'axios'
+import axios from '../config'
 
 export default defineComponent({
   name: 'UserListView',
@@ -42,7 +42,7 @@ export default defineComponent({
      * @return {void}
      */
     const getUser = async () => {
-      const response = await axios.get('http://127.0.0.1:8000/api/userlist')
+      const response = await axios.get('userlist')
       users.value = response.data
     }
 
@@ -56,7 +56,7 @@ export default defineComponent({
     const deleteUser = async (id) => {
       console.log(id)
       try {
-        const response = await axios.delete('http://127.0.0.1:8000/api/userlist/del', {
+        const response = await axios.delete('userlist/del', {
           data: {
             id: id,
           },
@@ -68,7 +68,7 @@ export default defineComponent({
       }
     }
     getUser()
-    
+
     return {
       users,
       deleteUser