Skip to content

A
ABC_Hotel
Commit addc6689 authored by Đinh Quang Vinh's avatar Đinh Quang Vinh
Browse files
Options

commit

parent d3b3f983
Hide whitespace changes
Inline Side-by-side
Showing with 187 additions and 141 deletions
src/App.vue
View file @ addc6689
......@@ -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
View file @ addc6689
<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
View file @ addc6689
<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 0 → 100644
View file @ addc6689
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
View file @ addc6689
......@@ -17,3 +17,4 @@ app.use(router).mount('#app')
src/store/index.js
View file @ addc6689
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
View file @ addc6689
......@@ -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
View file @ addc6689
......@@ -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
View file @ addc6689
......@@ -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
View file @ addc6689
......@@ -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
View file @ addc6689
......@@ -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
View file @ addc6689
......@@ -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
......
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