Skip to content

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

Style web, add function

parent 7f33e947
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1708 additions and 274 deletions
README.md
View file @ d3b3f983
# hotel # test
## Project setup ## Project setup
``` ```
......
package-lock.json
View file @ d3b3f983
This diff is collapsed.
package.json
View file @ d3b3f983
{ {
"name": "hotel", "name": "test",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"scripts": { "scripts": {
...@@ -8,14 +8,20 @@ ...@@ -8,14 +8,20 @@
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"axios": "^1.4.0",
"bootstrap": "^5.2.3",
"bootstrap-vue": "^2.23.1",
"core-js": "^3.8.3", "core-js": "^3.8.3",
"vue": "^3.2.13" "vue": "^3.2.47",
"vue-router": "^4.1.6",
"vuex": "^4.0.2"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.12.16", "@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16", "@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0", "@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-service": "~5.0.0", "@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3" "eslint-plugin-vue": "^8.0.3"
......
src/App.vue
View file @ d3b3f983
<template> <template>
<img alt="Vue logo" src="./assets/logo.png"> <div class="d-flex flex-column min-vh-100">
<HelloWorld msg="Welcome to Your Vue.js App"/> <div>
<header class="p-3 bg-dark text-white">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<h1>ABC Hotel</h1>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li>
<router-link to="/booking" class="nav-link px-2 text-secondary">View booking</router-link>
</li>
<li>
<router-link to="/checkin" class="nav-link px-2 text-secondary">View checkin</router-link>
</li>
<li>
<router-link to="/employee" class="nav-link px-2 text-secondary">View employee</router-link>
</li>
<li>
<router-link to="/room" class="nav-link px-2 text-secondary">View room</router-link>
</li>
<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'">
<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">
<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"
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>
</div>
</div>
</header>
<router-view />
</div>
<div class="mt-auto">
<HotelFooter></HotelFooter>
</div>
</div>
</template> </template>
<script>
import HelloWorld from './components/HelloWorld.vue'
<script>
import HotelFooter from './components/HotelFooter.vue'
export default { export default {
name: 'App', name: 'App',
components: { components: {
HelloWorld HotelFooter
} }
} }
</script> </script>
<style> <style>
#app { .vh {
font-family: Avenir, Helvetica, Arial, sans-serif; min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
} }
</style> </style>
src/components/HotelFooter.vue 0 → 100644
View file @ d3b3f983
<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>
</div>
</div>
</footer>
</template>
<script>
export default {
name: 'HotelFooter',
}
</script>
src/components/HotelHeader.vue 0 → 100644
View file @ d3b3f983
<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>
</template>
<script>
export default {
name: 'HotelHeader',
}
</script>
<style>
</style>
src/main.js
View file @ d3b3f983
import { createApp } from 'vue' import { createApp} from 'vue'
import App from './App.vue' import App from './App.vue'
import router from './router'
import 'bootstrap/dist/css/bootstrap.css';
import axios from 'axios'
import storeConfig from './store';
import { createStore } from 'vuex';
const app = createApp(App)
const store = createStore(storeConfig)
app.config.globalProperties.$axios = axios.create({
baseURL: 'http://localhost:8000/api'
})
app.use(store)
app.use(router).mount('#app')
createApp(App).mount('#app')
src/router/index.js 0 → 100644
View file @ d3b3f983
import { createRouter, createWebHistory } from 'vue-router'
import DashboardView from '../views/DashboardView.vue'
import BookingView from '../views/BookingView.vue'
import RoomView from '../views/RoomView.vue'
import EmployeeView from '../views/EmployeeView.vue'
import CheckinView from '../views/CheckinView.vue'
import CreateBookingView from '../views/CreateBookingView.vue'
import ModifyView from '../views/ModifyView.vue'
import LoginView from '../views/LoginView.vue'
import store from '../store'
import register from '../views/RegisterView.vue'
import userList from '../views/UserListView.vue'
const routes = [
{
path: '/',
name: 'Dashboard',
component: DashboardView
},
{
path: '/booking',
name: 'Booking',
component: BookingView
},
{
path: '/room',
name: 'Room',
component: RoomView
},
{
path: '/employee',
name: 'Employee',
component: EmployeeView
},
{
path: '/checkin',
name: 'Checkin',
component: CheckinView
},
{
path: '/create-booking',
name: 'CreateBooking',
component: CreateBookingView
},
{
path: '/modify/:id',
name: 'Modify',
component: ModifyView
},
{
path: '/login',
name: 'Login',
component: LoginView
},
{
path: '/register',
name: 'Register',
component: register
},
{
path: '/user-list',
name: 'UserList',
component: userList
}
]
routes.forEach(route => {
route.beforeEnter = (to, from, next) => {
const isAuthenticated = store.state.isLoggedIn;
if (to.path !== '/login' && to.path !== '/register' && !isAuthenticated) {
next('/login');
} else {
next();
}
}
})
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
src/store/index.js 0 → 100644
View file @ d3b3f983
import axios from "axios";
import router from "@/router";
const storeConfig = {
state: {
isLoggedIn: false,
user: null,
},
mutations: {
login(state, user) {
state.isLoggedIn = true;
state.user = user;
},
logout(state) {
state.isLoggedIn = false;
state.user = null;
router.push("/login");
},
},
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);
}
},
logout({ commit }) {
commit("logout");
},
},
getters: {
isLoggedIn: (state) => state.isLoggedIn,
currentUser: (state) => state.user,
},
};
export default storeConfig;
src/views/AboutView.vue 0 → 100644
View file @ d3b3f983
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
src/views/BookingView.vue 0 → 100644
View file @ d3b3f983
<template>
<div>
<div>
<h1 class="">Booking</h1>
<div class="position-relative top-0">
<router-link to="/create-booking">
<button class="btn btn-outline-info top-0 end-0 position-absolute">Create booking</button>
</router-link>
</div>
<br />
</div>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Booking ID</th>
<th scope="col">Guest Name</th>
<th scope="col">Guest Number</th>
<th scope="col">Room ID</th>
<th scope="col">Checked</th>
<th scope="col" colspan="2">Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="booking in bookings" :key="booking.id">
<td>{{ booking.id }}</td>
<td>{{ booking.guest_name }}</td>
<td>{{ booking.guest_number }}</td>
<td>{{ booking.room_id }}</td>
<td>{{ booking.checked }}</td>
<td>
<button @click="checkin(booking.id)" class="btn btn-success">
<i class="bi bi-check-circle"></i> Checkin
</button>
</td>
<td>
<button @click="destroy(booking.id)" class="btn btn-danger">
<i class="bi bi-trash"></i> Delete
</button>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import { defineComponent, ref } from "vue";
import axios from "axios";
export default defineComponent({
name: "BookingView",
setup() {
const bookings = ref([]);
/**
* Get all bookings
*
* @return {void}
*/
const getBooking = async () => {
const response = await axios.get("http://127.0.0.1:8000/api/booking");
bookings.value = response.data;
};
/**
* Checkin booking
*
* @param {int} id
*
* @return {void}
*/
const checkin = async (id) => {
console.log(id);
try {
const response = await axios.post("http://127.0.0.1:8000/api/checked", {
id: id,
});
console.log(response.data);
} catch (error) {
console.error(error.response.data);
}
getBooking();
};
/**
* destroy a booking
*
* @param {*} id
*
* @return {void}
*/
const destroy = async (id) => {
console.log(id);
try {
const response = await axios.delete(
"http://127.0.0.1:8000/api/checked/delBook",
{
data: {
id: id,
},
}
);
console.log(response.data);
} catch (error) {
console.error(error.response);
}
getBooking();
};
getBooking();
return {
checkin,
destroy,
bookings,
};
},
});
</script>
src/views/CheckinView.vue 0 → 100644
View file @ d3b3f983
<template>
<div>
<div>
<h1>Checkin</h1><br>
</div>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Checkin ID</th>
<th scope="col">Booking ID</th>
<th scope="col">Employee ID</th>
<th scope="col">Checkin Time</th>
<th scope="col">Checkout Time</th>
<th scope="col">Fee</th>
<th scope="col">Total Price</th>
<th scope="col" colspan="3">Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="checkin in checkins" :key="checkin.id">
<td>{{ checkin.id }}</td>
<td>{{ checkin.booking_id }}</td>
<td>{{ checkin.employee_id }}</td>
<td>{{ checkin.checkin_time }}</td>
<td>{{ checkin.checkout_time }}</td>
<td>{{ checkin.fee }}</td>
<td>{{ checkin.total_price }}</td>
<td>
<button @click="checkout(checkin.id, checkin.booking_id)" class="btn btn-success">
<i class="bi bi-box-arrow-right"></i> Checkout
</button>
</td>
<td>
<button @click="destroy(checkin.id)" class="btn btn-danger">
<i class="bi bi-trash"></i> Delete
</button>
</td>
<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">
<button type="submit" class="btn btn-secondary">
<i class="bi bi-currency-dollar"></i> Submit
</button>
</div>
</form>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import { defineComponent, ref } from 'vue'
import axios from 'axios'
export default defineComponent({
name: 'CheckinView',
setup() {
const checkins = ref([]);
/**
* Get all checkins
*
* @return {void}
*/
const getCheckin = async () => {
const response = await axios.get('http://127.0.0.1:8000/api/checkin')
checkins.value = response.data
}
/**
* Checkin a booking
*
* @param {number} id
* @param {number} bookingId
*
* @return {void}
*/
const checkout = async (id, bookingId) => {
console.log(id, bookingId)
try {
const response = await axios.post('http://127.0.0.1:8000/api/checked/checkout', {
id: id,
bookingId: bookingId
})
console.log(response.data);
} catch (error) {
console.error(error.response.data)
}
getCheckin()
}
/**
* Delete a checkin
*
* @param {number} id
*
* @return {void}
*/
const destroy = async (id) => {
try {
const response = await axios.delete('http://127.0.0.1:8000/api/checked/delCheck', {
data: {
id: id
}
})
console.log(response.data);
} catch (error) {
console.error(error.response.data)
}
getCheckin()
}
const fee = ref('')
/**
* Add fee to a checkin
*
* @param {number} id
*
* @return {void}
*/
const addFee = async (id) => {
try {
console.log(id, fee.value);
const response = await axios.post('http://127.0.0.1:8000/api/checked/addFee', {
id: id,
fee: fee.value
})
console.log(response.data);
getCheckin()
} catch (error) {
console.error(error.response.data)
}
}
getCheckin()
return {
checkins,
checkout,
destroy,
addFee,
fee
}
}
})
</script>
src/views/CreateBookingView.vue 0 → 100644
View file @ d3b3f983
<template>
<div class="d-flex justify-content-center">
<form @submit.prevent="addBooking" class="col-12 col-md-6">
<div class="mb-3">
<label for="guest_name" class="form-label">Guest Name</label>
<div class="input-group">
<input type="text" id="guest_name" v-model="guest_name" name="guest_name" class="form-control">
</div>
</div>
<div class="mb-3">
<label for="guest_number" class="form-label">Guest Number</label>
<div class="input-group">
<input type="text" id="guest_number" v-model="guest_number" name="guest_number" class="form-control">
</div>
</div>
<div class="mb-3">
<label for="room_id" class="form-label">Room ID</label>
<div class="input-group">
<input type="text" id="room_id" v-model="room_id" name="room_id" class="form-control">
</div>
</div>
<button type="submit" class="btn btn-primary">
<i class="bi bi-check-circle"></i> Submit
</button>
</form>
</div>
</template>
<script>
import { ref, defineComponent } from 'vue'
import axios from 'axios'
import router from '@/router'
export default defineComponent({
name: 'CreateBookingView',
setup() {
const guest_name = ref('')
const guest_number = ref('')
const room_id = ref('')
/**
* Add booking
*
* @return {void}
*/
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', {
guest_name: guest_name.value,
guest_number: guest_number.value,
room_id: room_id.value
})
console.log(response.data)
alert('Create booking successfully');
router.push({ name: 'Booking' })
} catch (error) {
console.error(error.response.data)
}
}
return {
guest_name,
guest_number,
room_id,
addBooking
}
}
})
</script>
src/views/DashboardView.vue 0 → 100644
View file @ d3b3f983
<template>
<div>
<div>
<div class="mb-5">
<h1>Dashboard</h1>
</div>
<table class="table table-striped table-hover">
<thead>
<tr>
<th scope="col">Booking ID</th>
<th scope="col">Guest Name</th>
<th scope="col">Guest Number</th>
<th scope="col">Room ID</th>
<th scope="col">Total Price</th>
</tr>
</thead>
<tbody>
<tr v-for="guestInfo in guestInfos" :key="guestInfo.id">
<td>{{ guestInfo.id }}</td>
<td>{{ guestInfo.guest_name }}</td>
<td>{{ guestInfo.guest_number }}</td>
<td>{{ guestInfo.room_id }}</td>
<td>{{ guestInfo.checkin.total_price }}</td>
</tr>
</tbody>
<div class="mb-5 mt-auto">
<h4 class="text-start">Today's total interest: {{ bookingInfos.total }}</h4>
<h4 class="text-start">Current month total checkin: {{ bookingInfos.lastMonth }}</h4>
<h4 class="text-start">Current month total interest: {{ bookingInfos.lastMonthTotal }}</h4>
</div>
</table>
</div>
</div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
name: 'DashboardView',
data() {
return {
guestInfos: [],
bookingInfos: []
}
},
async mounted() {
let results = await this.$axios.get('dashboard')
this.guestInfos = results.data.guestInfos
this.bookingInfos = results.data.bookingInfos
}
})
</script>
<style></style>
src/views/EmployeeView.vue 0 → 100644
View file @ d3b3f983
<template>
<div>
<div>
<h1>Booking</h1><br>
</div>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Employee ID</th>
<th scope="col">Employee Name</th>
<th scope="col">Role</th>
<th scope="col">Status</th>
<th scope="col">Shift</th>
<th scope="col">Day Off</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr v-for="employee in employees" :key="employee.id">
<td>{{ employee.id }}</td>
<td>{{ employee.name }}</td>
<td>{{ employee.role }}</td>
<td>{{ employee.status }}</td>
<td>{{ employee.shift }}</td>
<td>{{ employee.day_off }}</td>
<td>{{ employee.salary }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
name: 'EmployeeView',
data() {
return {
employees: []
}
},
async mounted() {
let results = await this.$axios.get('employee')
this.employees = results.data
}
})
</script>
src/views/HomeView.vue 0 → 100644
View file @ d3b3f983
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'HomeView',
components: {
HelloWorld
}
}
</script>
src/views/LoginView.vue 0 → 100644
View file @ d3b3f983
<template>
<div class="text-center">
<main class="form-signin d-flex justify-content-center align-items-center">
<form @submit.prevent="submitForm">
<h1>Login</h1>
<div class="form-floating ">
<input class=form-control type="text" id="username" name="username" v-model="username">
<label for="username" class="floatingInput">Username</label>
<div class="error"></div>
</div> <br>
<div class="form-floating">
<input class="form-control" type="text" name="password" id="password" v-model="password">
<label for="password" class="floatingInput">Password</label>
<div class="error"></div>
</div><br>
<button type="submit" @click="submitform" class="btn btn-lg btn-primary w-100">Login</button>
<div>{{ error }}</div>
</form>
</main>
</div>
</template>
<script>
import { defineComponent, ref } from 'vue'
import storeConfig from '../store';
import { createStore } from 'vuex';
export default defineComponent({
name: 'LoginView',
setup() {
const store = createStore(storeConfig)
const username = ref('');
const password = ref('');
const error = ref('');
/**
* Submit form
*
* @return {void}
*/
const submitForm = () => {
store.dispatch('login', { username: username.value, password: password.value })
}
return {
username,
password,
error,
submitForm,
};
},
})
</script>
src/views/ModifyView.vue 0 → 100644
View file @ d3b3f983
<template>
<form @submit.prevent="update" class="row g-3">
<div class="col-md-6">
<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="type" class="form-label">Type</label>
<input type="text" id="type" name="type" v-model="type" class="form-control">
</div>
<div class="col-md-6">
<label for="hour_price" class="form-label">Hour Price</label>
<input type="text" id="hour_price" name="hour_price" v-model="hour_price" class="form-control">
</div>
<div class="col-md-6">
<label for="day_price" class="form-label">Day Price</label>
<input type="text" id="day_price" name="day_price" v-model="day_price" class="form-control">
</div>
<div class="col-md-6">
<label for="size" class="form-label">Size</label>
<input type="number" id="size" name="size" v-model="size" class="form-control">
</div>
<div class="col-md-6">
<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>
</div>
</div>
</div>
<div class="col-md-6">
<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 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>
</div>
</div>
</div>
<div class="col-md-6">
<label for="floor" class="form-label">Floor</label>
<input type="number" id="floor" name="floor" v-model="floor" class="form-control">
</div>
<div class="col-md-6">
<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>
</div>
</div>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">
<i class="bi bi-check-circle"></i> Submit
</button>
</div>
</form>
</template>
<script>
import { defineComponent, ref } from 'vue'
import axios from 'axios'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
export default defineComponent({
name: 'ModifyView',
setup() {
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)
/**
* 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
})
router.push({ name: 'Room' })
}
return {
update,
name,
type,
hour_price,
day_price,
size,
balcony,
view,
smoking,
floor,
bathtub,
}
}
})
</script>
src/views/RegisterView.vue 0 → 100644
View file @ d3b3f983
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6">
<h1 class="text-center mb-5">Register</h1>
<form @submit.prevent="register" class="needs-validation" novalidate>
<div class="form-floating mb-3">
<input type="text" class="form-control" id="username" name="username" v-model="username"
placeholder="Username" required>
<label for="username">Username</label>
<div class="invalid-feedback">
Please enter a valid username.
</div>
</div>
<div class="form-floating mb-3">
<input type="password" class="form-control" id="password" name="password" v-model="password"
placeholder="Password" required>
<label for="password">Password</label>
<div class="invalid-feedback">
Please enter a valid password.
</div>
</div>
<div class="form-floating mb-3">
<input type="password" class="form-control" id="confirm_password" name="confirm_password"
v-model="confirm_password" placeholder="Confirm Password" required>
<label for="confirm_password">Confirm Password</label>
<div class="invalid-feedback">
Please confirm your password.
</div>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="email" name="email" v-model="email" placeholder="Email" required>
<label for="email">Email</label>
<div class="invalid-feedback">
Please enter a valid email address.
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<div>{{ errors }}</div>
</form>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
import { ref, defineComponent } from 'vue'
import storeConfig from '../store';
import { createStore } from 'vuex';
export default defineComponent({
name: 'RegisterView',
setup() {
const store = createStore(storeConfig)
const username = ref('')
const password = ref('')
const confirm_password = ref('')
const email = ref('')
const errors = ref('')
/**
* Register
*
* @return {void}
*/
const register = async () => {
try {
const response = await axios.post('http://127.0.0.1:8000/api/register', {
username: username.value,
password: password.value,
confirm_password: confirm_password.value,
email: email.value
})
store.dispatch('login', { username: username.value, password: password.value })
console.log(response.data);
}
catch (error) {
errors.value = error.response.data.message
console.log(errors.value);
}
}
return {
username,
password,
confirm_password,
email,
errors,
register,
};
}
})
</script>
src/views/RoomView.vue 0 → 100644
View file @ d3b3f983
<template>
<div>
<div>
<h1>Room</h1><br>
</div>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Room ID</th>
<th scope="col">Room Name</th>
<th scope="col">Type</th>
<th scope="col">Hour Price</th>
<th scope="col">Day Price</th>
<th scope="col">Status</th>
<th scope="col">Size</th>
<th scope="col">Balcony</th>
<th scope="col">View</th>
<th scope="col">Smoking</th>
<th scope="col">Floor</th>
<th scope="col">Bathtub</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="room in rooms" :key="room.id">
<td>{{ room.id }}</td>
<td>{{ room.name }}</td>
<td>{{ room.type }}</td>
<td>{{ room.hour_price }}</td>
<td>{{ room.day_price }}</td>
<td>{{ room.status }}</td>
<td>{{ room.size }}</td>
<td>{{ room.balcony }}</td>
<td>{{ room.view }}</td>
<td>{{ room.smoking }}</td>
<td>{{ room.floor }}</td>
<td>{{ room.bathtub }}</td>
<td>
<router-link :to="{ name: 'Modify', params: { id: room.id } }">
<button class="btn btn-outline-primary">
<i class="bi bi-pencil-square"></i> Modify
</button>
</router-link>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
name: 'RoomView',
data() {
return {
rooms: []
}
},
async mounted() {
let results = await this.$axios.get('room')
this.rooms = results.data
}
})
</script>
src/views/UserListView.vue 0 → 100644
View file @ d3b3f983
<template>
<div>
<h1>List of user:</h1><br>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Username</th>
<th scope="col">Role</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="user in users" :key="user.id">
<td>{{ user.id }}</td>
<td>{{ user.username }}</td>
<td>{{ user.role }}</td>
<td>
<button @click="deleteUser(user.id)" class="btn btn-danger">
<i class="bi bi-trash"></i> Delete
</button>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import { defineComponent, ref } from 'vue'
import axios from 'axios'
export default defineComponent({
name: 'UserListView',
setup() {
const users = ref([]);
/**
* Get all users
*
* @return {void}
*/
const getUser = async () => {
const response = await axios.get('http://127.0.0.1:8000/api/userlist')
users.value = response.data
}
/**
* Delete a user
*
* @param {int} id
*
* @return {void}
*/
const deleteUser = async (id) => {
console.log(id)
try {
const response = await axios.delete('http://127.0.0.1:8000/api/userlist/del', {
data: {
id: id,
},
})
console.log(response.data)
getUser()
} catch (error) {
console.error(error.response.data)
}
}
getUser()
return {
users,
deleteUser
}
},
})
</script>
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