Skip to content

A
ABC_Hotel
Commit 7afc0148 authored by vinh's avatar vinh
Browse files
Options

commit

parent addc6689
Hide whitespace changes
Inline Side-by-side
Showing with 1964 additions and 418 deletions
package-lock.json
View file @ 7afc0148
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
"dependencies": { "dependencies": {
"axios": "^1.4.0", "axios": "^1.4.0",
"bootstrap": "^5.2.3", "bootstrap": "^5.2.3",
"bootstrap-icons": "^1.10.5",
"bootstrap-vue": "^2.23.1", "bootstrap-vue": "^2.23.1",
"core-js": "^3.8.3", "core-js": "^3.8.3",
"vue": "^3.2.47", "vue": "^3.2.47",
...@@ -3822,6 +3823,21 @@ ...@@ -3822,6 +3823,21 @@
"@popperjs/core": "^2.11.6" "@popperjs/core": "^2.11.6"
} }
}, },
"node_modules/bootstrap-icons": {
"version": "1.10.5",
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.10.5.tgz",
"integrity": "sha512-oSX26F37V7QV7NCE53PPEL45d7EGXmBgHG3pDpZvcRaKVzWMqIRL9wcqJUyEha1esFtM3NJzvmxFXDxjJYD0jQ==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/twbs"
},
{
"type": "opencollective",
"url": "https://opencollective.com/bootstrap"
}
]
},
"node_modules/bootstrap-vue": { "node_modules/bootstrap-vue": {
"version": "2.23.1", "version": "2.23.1",
"resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-2.23.1.tgz", "resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-2.23.1.tgz",
......
package.json
View file @ 7afc0148
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
"dependencies": { "dependencies": {
"axios": "^1.4.0", "axios": "^1.4.0",
"bootstrap": "^5.2.3", "bootstrap": "^5.2.3",
"bootstrap-icons": "^1.10.5",
"bootstrap-vue": "^2.23.1", "bootstrap-vue": "^2.23.1",
"core-js": "^3.8.3", "core-js": "^3.8.3",
"vue": "^3.2.47", "vue": "^3.2.47",
......
src/App.vue
View file @ 7afc0148
<template> <template>
<div class="d-flex flex-column min-vh-100"> <div class="layout">
<div> <HotelHeader />
<header class="p-3 bg-dark text-white"> <div class="body">
<div class="container"> <div v-if="shouldDisplaySidebar">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"> <div class="sidebar" id="sidebar" v-if="width > 769">
<h1>ABC Hotel</h1> <NavbarHotel />
<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>
<router-link to="/user-list" class="nav-link px-2 text-secondary">User list</router-link>
</li>
<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"
class="btn btn-outline-light me-2">Login</router-link>
<router-link to="/register" class="btn btn-warning">Register</router-link>
</div>
</div> </div>
</header> </div>
<router-view /> <div class="view">
</div> <router-view />
<div class="mt-auto"> </div>
<HotelFooter></HotelFooter>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import HotelFooter from './components/HotelFooter.vue' import NavbarHotel from './components/NavbarHotel.vue'
import HotelHeader from './components/HotelHeader.vue'
import { ref } from 'vue'
export default { export default {
name: 'App', name: 'App',
components: { components: {
HotelFooter HotelHeader,
} NavbarHotel
},
setup() {
const width = ref(window.innerWidth)
return {
width,
}
},
computed: {
shouldDisplaySidebar() {
const currentView = this.$route.path;
return currentView !== '/login';
},
},
} }
</script> </script>
<style> <style scoped>
.vh { @media (min-width: 769px) {
min-height: 100vh;
.body {
display: flex;
}
.layout {
height: 100vh;
display: flex;
flex-direction: column;
}
.footer {
margin-top: auto
}
.sidebar {
height: 100vh;
}
.view {
width: 100%;
height: 100vh;
}
}
@media (max-width:768px) {
.layout {
display: flex;
flex-direction: column;
min-height: 100vh;
width: 100%;
}
.body {
display: flex;
flex-direction: column;
}
} }
</style> </style>
src/components/HotelHeader.vue
View file @ 7afc0148
<template> <template>
<div> <div class="header">
<h1>ABC Hotel</h1> <h1 class="hotel-name">ABC Hotel</h1>
<button>View booking</button> <div v-if="width < 768">
<button>View checkin</button> <i class="bi bi-list" @click="showMenu()"></i>
<button>View employee</button> <div class="sidebar" id="sidebar">
<button>View room</button> <NavbarHotel />
<button>View dashboard</button> </div>
<button>Logout</button> </div>
</div> </div>
</template> </template>
<script> <script>
import { ref } from 'vue'
import NavbarHotel from './NavbarHotel.vue'
export default { export default {
name: 'HotelHeader', name: 'HotelHeader',
components: {
NavbarHotel
},
setup() {
const width = ref(window.innerWidth)
const showMenu = () => {
const sidebar = document.getElementById('sidebar')
console.log('hello')
if (sidebar.style.display === 'none') {
sidebar.style.display = 'block'
} else {
sidebar.style.display = 'none'
}
}
return {
width,
showMenu
}
}
} }
</script> </script>
<style></style> <style scoped>
@media (min-width: 769px) {
.header {
width: 100%;
background-color: rgb(255, 255, 255);
padding: 10px;
}
.hotel-name {
font-size: 30px;
}
}
@media (max-width: 768px) {
.header {
width: 100%;
background-color: rgb(255, 255, 255);
padding: 10px;
display: flex;
justify-content: space-between;
}
.hotel-name {
font-size: 20px;
}
.sidebar {
display: none;
position: fixed;
right: 0;
margin-top: 20px;
}
}
</style>
src/components/NavbarHotel.vue 0 → 100644
View file @ 7afc0148
<template>
<div class="body">
<div class="nav">
<div class="nav-content" :class="{ 'my-class': currentView == '/booking' }">
<i class="bi bi-book-fill icon"> </i>
<router-link to="/booking" class="router-link">View booking</router-link>
</div>
<div class="nav-content" :class="{ 'active-route': currentView == '/checkin' }">
<i class="bi bi-bookmark-check-fill icon"></i>
<router-link to="/checkin" class="router-link">View checkin</router-link>
</div>
<div class="nav-content" :class="{ 'my-class': currentView == '/employee' }">
<i class="bi bi-people-fill icon"></i>
<router-link to="/employee" class="router-link">View employee</router-link>
</div>
<div class="nav-content" :class="{ 'my-class': currentView == '/room' }">
<i class="bi bi-bank2 icon"></i>
<router-link to="/room" class="router-link">View room</router-link>
</div>
<div class="nav-content" :class="{ 'my-class': currentView == '/' }">
<i class="bi bi-clipboard-fill icon"></i>
<router-link to="/" class="router-link">Dashboard</router-link>
</div>
<div class="nav-content" :class="{ 'my-class': currentView == '/user-list' }">
<i class="bi bi-person-badge-fill icon"></i>
<router-link to="/user-list" class="router-link">User list</router-link>
</div>
</div>
<div class="logout nav-content">
<i class="bi bi-box-arrow-right icon" @click="logout"></i>
</div>
</div>
</template>
<script>
export default {
name: 'NavbarHotel',
//logout function
methods: {
logout() {
localStorage.removeItem('token');
localStorage.removeItem('isLoggedIn');
this.$router.push('/login');
}
},
//get current route
computed: {
currentView() {
return this.$route.path;
}
}
}
</script>
<style scoped>
.title {
text-align: center;
}
.active-route {
background-color: #c0bfbf;
color: #000;
font-size: 15px;
}
.icon {
color: rgb(213, 213, 213);
font-size: 25px;
}
.nav {
display: flex;
flex-direction: column;
background-color: rgb(248, 248, 248);
color: #f0f0f0;
height: 100%;
gap: 30px;
width: 200px;
}
.nav-content {
padding: 10px;
padding-left: 20px;
font-size: 15px;
display: flex;
gap: 15px;
}
.nav-content:hover {
background-color: #c0bfbf;
color: #000;
font-size: 15px;
}
.body {
height: 100%;
width: 2;
display: flex;
flex-direction: column;
}
.router-link {
text-decoration: none;
color: rgb(35, 35, 35);
font-size: 15px;
display: flex;
flex-direction: column;
justify-content: center;
}
.logout {
background-color: rgb(217, 84, 84);
cursor: pointer;
}
.logout:hover {
background-color: rgb(247, 108, 105);
color: #fff;
}
</style>
src/main.js
View file @ 7afc0148
...@@ -2,6 +2,7 @@ import { createApp} from 'vue' ...@@ -2,6 +2,7 @@ import { createApp} from 'vue'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
import 'bootstrap/dist/css/bootstrap.css'; import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-icons/font/bootstrap-icons.css'
import axios from 'axios' import axios from 'axios'
import storeConfig from './store'; import storeConfig from './store';
import { createStore } from 'vuex'; import { createStore } from 'vuex';
......
src/router/index.js
View file @ 7afc0148
...@@ -7,7 +7,6 @@ import CheckinView from '../views/CheckinView.vue' ...@@ -7,7 +7,6 @@ import CheckinView from '../views/CheckinView.vue'
import CreateBookingView from '../views/CreateBookingView.vue' import CreateBookingView from '../views/CreateBookingView.vue'
import ModifyView from '../views/ModifyView.vue' import ModifyView from '../views/ModifyView.vue'
import LoginView from '../views/LoginView.vue' import LoginView from '../views/LoginView.vue'
import store from '../store'
import register from '../views/RegisterView.vue' import register from '../views/RegisterView.vue'
import userList from '../views/UserListView.vue' import userList from '../views/UserListView.vue'
...@@ -68,7 +67,7 @@ const routes = [ ...@@ -68,7 +67,7 @@ const routes = [
routes.forEach(route => { routes.forEach(route => {
route.beforeEnter = (to, from, next) => { route.beforeEnter = (to, from, next) => {
const isAuthenticated = store.state.isLoggedIn; const isAuthenticated = localStorage.getItem('isLoggedIn');
if (to.path !== '/login' && to.path !== '/register' && !isAuthenticated) { if (to.path !== '/login' && to.path !== '/register' && !isAuthenticated) {
next('/login'); next('/login');
} else { } else {
......
src/views/BookingView.vue
View file @ 7afc0148
<template> <template>
<div> <div class="body">
<div> <div class="title-box">
<h1 class="">Booking</h1> <h1 class="title">Booking</h1>
<div class="position-relative top-0"> <div class="create-button-box">
<router-link to="/create-booking"> <router-link to="/create-booking">
<button class="btn btn-outline-info top-0 end-0 position-absolute">Create booking</button> <button class="create-button">Create booking</button>
</router-link> </router-link>
</div> </div>
<br /> <br />
</div> </div>
<table class="table table-striped"> <div class="table-box">
<thead> <table class="table">
<tr> <tr class="">
<th scope="col">Booking ID</th> <th>Booking ID</th>
<th scope="col">Guest Name</th> <th>Guest Name</th>
<th scope="col">Guest Number</th> <th>Guest Number</th>
<th scope="col">Room ID</th> <th>Room ID</th>
<th scope="col">Checked</th> <th>Checked</th>
<th scope="col" colspan="2">Actions</th>
</tr> </tr>
</thead>
<tbody>
<tr v-for="booking in bookings" :key="booking.id"> <tr v-for="booking in bookings" :key="booking.id">
<td>{{ booking.id }}</td> <td>{{ booking.id }}</td>
<td>{{ booking.guest_name }}</td> <td>{{ booking.guest_name }}</td>
...@@ -28,18 +25,18 @@ ...@@ -28,18 +25,18 @@
<td>{{ booking.room_id }}</td> <td>{{ booking.room_id }}</td>
<td>{{ booking.checked }}</td> <td>{{ booking.checked }}</td>
<td> <td>
<button @click="checkin(booking.id)" class="btn btn-success"> <button @click="checkin(booking.id)" class="checkin-button">
<i class="bi bi-check-circle"></i> Checkin <i class="bi bi-check-circle"></i> Checkin
</button> </button>
</td> </td>
<td> <td>
<button @click="destroy(booking.id)" class="btn btn-danger"> <button @click="destroy(booking.id)" class="delete-button">
<i class="bi bi-trash"></i> Delete <i class="bi bi-trash"></i> Delete
</button> </button>
</td> </td>
</tr> </tr>
</tbody> </table>
</table> </div>
</div> </div>
</template> </template>
...@@ -48,6 +45,7 @@ import { defineComponent, ref } from "vue"; ...@@ -48,6 +45,7 @@ import { defineComponent, ref } from "vue";
import axios from '../config'; import axios from '../config';
export default defineComponent({ export default defineComponent({
name: "BookingView", name: "BookingView",
setup() { setup() {
...@@ -116,3 +114,161 @@ export default defineComponent({ ...@@ -116,3 +114,161 @@ export default defineComponent({
}, },
}); });
</script> </script>
<style scoped>
@media (min-width: 769px) {
.body {
background-color: rgb(240, 240, 240);
display: flex;
flex-direction: column;
padding: 20px;
border-radius: 3px;
height: 100%;
}
.table-box {
border: 2px rgb(222, 222, 222) solid;
border-radius: 15px;
padding: 5px;
}
.checkin-button {
border: none;
background: #93e4c1;
color: white;
border-radius: 20px;
}
.checkin-button:hover {
background: #3baea0;
}
.delete-button {
border: none;
border-radius: 20px;
background: #ff8585;
color: white;
}
.delete-button:hover {
background: #ff5757;
}
tr:nth-child(even) {
background-color: rgb(224, 224, 224);
}
td:first-child {
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
td:last-child {
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.title-box {
display: flex;
justify-content: space-between;
margin-bottom: 40px;
}
.create-button-box {
order: 2;
}
.create-button {
border: none;
border-radius: 30px;
padding: 10px;
background: #ff347f;
color: white
}
.create-button:hover {
background: #c9356c;
color: white;
}
.title {
order: 0;
font-weight: bold;
}
}
@media (max-width:768px) {
.body {
background-color: rgb(240, 240, 240);
display: flex;
flex-direction: column;
min-height: 100vh;
}
.table-box {
overflow: scroll;
}
th {
padding: 10px
}
.table {
border: 2px rgb(222, 222, 222) solid;
border-radius: 13px;
padding: 5px;
white-space: nowrap;
}
.checkin-button {
border: none;
background: #93e4c1;
color: white;
border-radius: 20px;
}
.delete-button {
border: none;
border-radius: 20px;
background: #ff8585;
color: white;
}
.create-button {
border: none;
border-radius: 30px;
padding: 10px;
background: #ff347f;
color: white
}
.title-box {
display: flex;
justify-content: space-between;
padding:10px;
}
.create-button-box {
order:1
}
.title {
order: 0;
font-weight: bold;
}
tr:nth-child(even) {
background-color: rgb(224, 224, 224);
}
td:first-child {
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
td:last-child {
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
}
</style>
src/views/CheckinView.vue
View file @ 7afc0148
<template> <template>
<div> <div class="body">
<div> <div class="title-box">
<h1>Checkin</h1><br> <h1 class="title">Checkin</h1><br>
</div> </div>
<table class="table table-striped"> <div class="table-box">
<thead> <table class="table">
<tr> <tr class="table-column">
<th scope="col">Checkin ID</th> <th>Checkin ID</th>
<th scope="col">Booking ID</th> <th>Booking ID</th>
<th scope="col">Employee ID</th> <th>Employee ID</th>
<th scope="col">Checkin Time</th> <th>Checkin Time</th>
<th scope="col">Checkout Time</th> <th>Checkout Time</th>
<th scope="col">Fee</th> <th>Fee</th>
<th scope="col">Total Price</th> <th>Total Price</th>
<th scope="col" colspan="3">Actions</th>
</tr> </tr>
</thead>
<tbody>
<tr v-for="checkin in checkins" :key="checkin.id"> <tr v-for="checkin in checkins" :key="checkin.id">
<td>{{ checkin.id }}</td> <td>{{ checkin.id }}</td>
<td>{{ checkin.booking_id }}</td> <td>{{ checkin.booking_id }}</td>
...@@ -26,28 +23,26 @@ ...@@ -26,28 +23,26 @@
<td>{{ checkin.fee }}</td> <td>{{ checkin.fee }}</td>
<td>{{ checkin.total_price }}</td> <td>{{ checkin.total_price }}</td>
<td> <td>
<button @click="checkout(checkin.id, checkin.booking_id)" class="btn btn-success"> <button @click="checkout(checkin.id, checkin.booking_id)" class="checkout-button">
<i class="bi bi-box-arrow-right"></i> Checkout <i class="bi bi-box-arrow-right"></i> Checkout
</button> </button>
</td> </td>
<td> <td>
<button @click="destroy(checkin.id)" class="btn btn-danger"> <button @click="destroy(checkin.id)" class="delete-button">
<i class="bi bi-trash"></i> Delete <i class="bi bi-trash"></i> Delete
</button> </button>
</td> </td>
<td> <td>
<form @submit.prevent="addFee(checkin.id)"> <form @submit.prevent="addFee(checkin.id)" class="fee-box">
<div class="input-group"> <input type="text" v-model="checkin.id" name="fee" id="fee" placeholder="Fee" class="fee">
<input type="text" class="form-control" v-model="checkin.id" name="fee" id="fee" placeholder="Fee"> <button type="submit" class="submit-button">
<button type="submit" class="btn btn-secondary"> <i class="bi bi-currency-dollar"></i>Submit
<i class="bi bi-currency-dollar"></i> Submit </button>
</button>
</div>
</form> </form>
</td> </td>
</tr> </tr>
</tbody> </table>
</table> </div>
</div> </div>
</template> </template>
...@@ -149,3 +144,175 @@ export default defineComponent({ ...@@ -149,3 +144,175 @@ export default defineComponent({
} }
}) })
</script> </script>
<style scoped>
@media (min-width: 768px) {
.body {
background-color: rgb(240, 240, 240);
display: flex;
flex-direction: column;
padding: 20px;
border-radius: 3px;
height: 100%;
}
.table-box {
border: 2px rgb(222, 222, 222) solid;
border-radius: 13px;
padding: 5px;
}
th {
padding: 10px
}
.checkout-button {
border: none;
border-radius: 20px;
background: #8bffff;
color: white
}
.checkout-button:hover {
background: #82acff;
}
.delete-button {
border: none;
border-radius: 20px;
background: #ff8585;
color: white;
}
.delete-button:hover {
background: #ff5757;
}
.fee-box {
display: flex;
}
.fee {
width: 100px;
border: none;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.submit-button {
border: none;
background: #93e4c1;
color: white;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
.submit-button:hover {
background: #3baea0;
}
tr:nth-child(even) {
background-color: rgb(224, 224, 224);
}
td:first-child {
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
td:last-child {
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.title-box {
display: flex;
justify-content: space-between;
margin-bottom: 40px;
}
.title {
order: 0;
font-weight: bold;
}
}
@media (max-width:768px) {
.body {
background-color: rgb(240, 240, 240);
display: flex;
flex-direction: column;
min-height: 100vh;
}
.table-box {
overflow: scroll;
}
.table {
border: 2px rgb(222, 222, 222) solid;
border-radius: 13px;
padding: 5px;
white-space: nowrap;
}
th {
padding: 10px
}
td {
padding: 10px
}
.checkout-button {
border: none;
border-radius: 20px;
background: #8bffff;
}
tr:nth-child(even) {
background-color: rgb(224, 224, 224);
}
td:first-child {
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
td:last-child {
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.delete-button {
border: none;
border-radius: 20px;
background: #ff8585;
}
.submit-button {
border: none;
background: #93e4c1;
color: white;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
.fee {
width: 100px;
border: none;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.title-box {
padding:10px;
font-weight: bold;
}
.title {
order: 0;
font-weight: bold;
}
}
</style>
src/views/CreateBookingView.vue
View file @ 7afc0148
<template> <template>
<div class="d-flex justify-content-center"> <div class="body">
<form @submit.prevent="addBooking" class="col-12 col-md-6"> <div class="title-box">
<div class="mb-3"> <h1 class="title">Create Booking</h1>
<label for="guest_name" class="form-label">Guest Name</label> </div>
<div class="input-group"> <div class="input-box">
<input type="text" id="guest_name" v-model="guest_name" name="guest_name" class="form-control"> <div class="input-box-content">
</div> <form @submit.prevent="addBooking" class="">
<div class="input-title-box">
Enter information
</div>
<div class="">
<label for="guest_name" class="">Guest Name</label>
<div class="">
<input type="text" id="guest_name" v-model="guest_name" name="guest_name" class="input">
</div>
</div>
<div class="">
<label for="guest_number" class="">Guest Number</label>
<div class="">
<input type="text" id="guest_number" v-model="guest_number" name="guest_number" class="input">
</div>
</div>
<div class="">
<label for="room_id" class="">Room ID</label>
<div class="">
<input type="text" id="room_id" v-model="room_id" name="room_id" class="input">
</div>
</div>
<button type="submit" class="submit-button">
<i class="bi bi-check-circle"></i> Submit
</button>
</form>
</div> </div>
<div class="mb-3"> </div>
<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> </div>
</template> </template>
...@@ -32,40 +42,165 @@ import axios from '../config' ...@@ -32,40 +42,165 @@ import axios from '../config'
import router from '@/router' import router from '@/router'
export default defineComponent({ export default defineComponent({
name: 'CreateBookingView', name: "CreateBookingView",
setup() { setup() {
const guest_name = ref("");
const guest_name = ref('') const guest_number = ref("");
const guest_number = ref('') const room_id = ref("");
const room_id = ref('')
/** /**
* Add booking * Add booking
* *
* @return {void} * @return {void}
*/ */
const addBooking = async () => { const addBooking = async () => {
console.log(guest_name.value, guest_number.value, room_id.value) console.log(guest_name.value, guest_number.value, room_id.value);
try { try {
const response = await axios.post('create-booking', { const response = await axios.post("create-booking", {
guest_name: guest_name.value, guest_name: guest_name.value,
guest_number: guest_number.value, guest_number: guest_number.value,
room_id: room_id.value room_id: room_id.value
}) });
console.log(response.data) console.log(response.data);
alert('Create booking successfully'); alert("Create booking successfully");
router.push({ name: 'Booking' }) router.push({ name: "Booking" });
} catch (error) {
alert(error.response.data.message)
} }
} catch (error) {
alert(error.response.data.message);
}
};
return { return {
guest_name, guest_name,
guest_number, guest_number,
room_id, room_id,
addBooking addBooking
} };
} },
}) })
</script> </script>
<style scoped>
@media (min-width: 769px) {
.input-title-box {
font-size: 30px;
font-weight: bold;
margin-bottom: 40px;
}
.body {
background-color: rgb(240, 240, 240);
display: flex;
flex-direction: column;
padding: 20px;
border-radius: 3px;
height: 100%;
}
.input-box-content {
display: flex;
background-color: white;
justify-content: space-between;
height: 100%;
justify-content: center;
padding: 50px;
padding-left: 100px;
padding-right: 100px;
border: none;
border-radius: 3px;
box-shadow: 5px 5px 5px 5px #d5d5d5;
}
.input-box {
margin-top: 40px;
padding: 20px;
display: flex;
justify-content: center;
}
.input {
border: none;
background-color: rgb(240, 240, 240);
border-radius: 3px;
width: 300px;
height: 50px;
}
.submit-button {
border: none;
background: #93e4c1;
color: white;
border-radius: 3px;
width: 300px;
height: 50px;
}
.submit-button:hover {
background: #3baea0;
}
}
@media (max-width: 768px) {
.input-title-box {
font-size: 30px;
font-weight: bold;
margin-bottom: 40px;
}
.body {
background-color: rgb(240, 240, 240);
display: flex;
flex-direction: column;
min-height: 100vh;
}
.title-box {
display: flex;
justify-content: space-between;
padding:10px;
}
.title {
order: 0;
font-weight: bold;
}
.input-box {
margin-top: 40px;
padding: 20px;
display: flex;
justify-content: center;
}
.input-box-content {
display: flex;
background-color: white;
justify-content: space-between;
height: 100%;
min-width: 100%;
justify-content: center;
border: none;
border-radius: 3px;
padding:50px;
box-shadow: 5px 5px 5px 5px #d5d5d5;
}
.input {
border: none;
background-color: rgb(240, 240, 240);
border-radius: 3px;
width: 250px;
height: 50px;
margin-bottom: 20px;
}
.submit-button {
border: none;
background: #93e4c1;
color: white;
border-radius: 3px;
width: 250px;
height: 50px;
}
}
</style>
src/views/DashboardView.vue
View file @ 7afc0148
<template> <template>
<div> <div class="body">
<div class="title-box">
<h1 class="title">Dashboard</h1>
</div>
<div> <div>
<div class="mb-5"> <div class="table-box">
<h1>Dashboard</h1> <table class="table">
</div>
<table class="table table-striped table-hover">
<thead>
<tr> <tr>
<th scope="col">Booking ID</th> <th>Booking ID</th>
<th scope="col">Guest Name</th> <th>Guest Name</th>
<th scope="col">Guest Number</th> <th>Guest Number</th>
<th scope="col">Room ID</th> <th>Room ID</th>
<th scope="col">Total Price</th> <th>Total Price</th>
</tr> </tr>
</thead> <tr v-for="guest in guestInfos" :key="guest.id">
<tbody> <td>{{ guest.id }}</td>
<tr v-for="guestInfo in guestInfos" :key="guestInfo.id"> <td>{{ guest.guest_name }}</td>
<td>{{ guestInfo.id }}</td> <td>{{ guest.guest_number }}</td>
<td>{{ guestInfo.guest_name }}</td> <td>{{ guest.room_id }}</td>
<td>{{ guestInfo.guest_number }}</td> <td>{{ guest.checkin.total_price }}</td>
<td>{{ guestInfo.room_id }}</td>
<td>{{ guestInfo.checkin.total_price }}</td>
</tr> </tr>
</tbody> </table>
<div class="mb-5 mt-auto"> </div>
<h4 class="text-start">Today's total interest: {{ bookingInfos.total }}</h4> </div>
<h4 class="text-start">Current month total checkin: {{ bookingInfos.lastMonth }}</h4> <div class="summary-box">
<h4 class="text-start">Current month total interest: {{ bookingInfos.lastMonthTotal }}</h4> <div class="summary">
<div class="icon-box">
<i class="bi bi-cash-stack money-icon"></i>
</div>
<div class="summary-title">
Today's interest
</div>
<div class="summary-value">
{{ bookingInfos.total }}
</div>
</div>
<div class="summary">
<div class="icon-box">
<i class="bi bi-bag-check checkin-icon"></i>
</div>
<div class="summary-title">
This month checkin
</div>
<div class="summary-value">
{{ bookingInfos.lastMonth }}
</div>
</div>
<div class="summary">
<div class="icon-box">
<i class="bi bi-safe2 safe-icon"></i>
</div>
<div class="summary-title">
This month interest
</div> </div>
</table> <div class="summary-value">
{{ bookingInfos.lastMonthTotal }}
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -51,8 +79,190 @@ export default defineComponent({ ...@@ -51,8 +79,190 @@ export default defineComponent({
this.guestInfos = results.data.guestInfos this.guestInfos = results.data.guestInfos
this.bookingInfos = results.data.bookingInfos this.bookingInfos = results.data.bookingInfos
} },
}) })
</script> </script>
<style></style> <style scoped> @media (min-width: 769px) {
.body {
background-color: rgb(240, 240, 240);
display: flex;
flex-direction: column;
padding: 20px;
border-radius: 3px;
height: 100%;
}
.table-box {
border: 2px rgb(222, 222, 222) solid;
border-radius: 15px;
padding: 5px;
}
tr:nth-child(even) {
background-color: rgb(224, 224, 224);
}
td:first-child {
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
td:last-child {
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.title-box {
display: flex;
justify-content: space-between;
margin-bottom: 40px;
}
.title {
order: 0;
font-weight: bold;
}
.summary-box {
display: flex;
justify-content: space-evenly;
margin-top: 100px;
}
.summary {
background-color: rgb(255, 255, 255);
box-shadow: 5px 5px 5px 5px rgb(235, 234, 234);
border-radius: 10px;
width: 250px;
padding: 15px
}
.summary-title {
font-size: 10px;
color: rgb(181, 181, 181);
}
.icon-box {
font-size: 80px;
text-align: center;
}
.money-icon {
color: rgb(0, 255, 0);
}
.checkin-icon {
color: rgb(255, 0, 0);
}
.safe-icon {
color: rgb(252, 255, 64);
}
.summary-value {
font-size: 30px;
font-weight: bold;
}
}
@media (max-width: 768px) {
.body {
background-color: rgb(240, 240, 240);
display: flex;
flex-direction: column;
min-height: 100vh;
}
.table-box {
overflow: scroll;
}
th {
padding: 10px
}
.table {
border: 2px rgb(222, 222, 222) solid;
border-radius: 13px;
padding: 5px;
white-space: nowrap;
}
td {
padding: 10px
}
.title-box {
display: flex;
justify-content: space-between;
padding: 10px;
}
.title {
order: 0;
font-weight: bold;
}
tr:nth-child(even) {
background-color: rgb(224, 224, 224);
}
td:first-child {
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
td:last-child {
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.summary-box {
display: flex;
flex-direction: column;
justify-content: center;
padding: 10px;
}
.summary {
background-color: rgb(255, 255, 255);
box-shadow: 5px 5px 5px 5px rgb(235, 234, 234);
border-radius: 10px;
width: 250px;
padding: 15px;
margin: 10px;
align-self: center;
width: 100%;
}
.icon-box {
font-size: 50px;
text-align: center;
}
.money-icon {
color: rgb(0, 255, 0);
}
.checkin-icon {
color: rgb(255, 0, 0);
}
.safe-icon {
color: rgb(252, 255, 64);
}
.summary-value {
font-size: 30px;
font-weight: bold;
}
.summary-title {
font-size: 10px;
color: rgb(181, 181, 181);
}
}
</style>
src/views/EmployeeView.vue
View file @ 7afc0148
<template> <template>
<div> <div class="body">
<div> <div class="title-box">
<h1>Booking</h1><br> <h1 class="title">Employee</h1>
</div> </div>
<table class="table table-striped"> <div class="table-box">
<thead> <table class="table">
<tr> <tr class="">
<th scope="col">Employee ID</th> <th>Employee ID</th>
<th scope="col">Employee Name</th> <th>Employee Name</th>
<th scope="col">Role</th> <th>Role</th>
<th scope="col">Status</th> <th>Status</th>
<th scope="col">Shift</th> <th>Shift</th>
<th scope="col">Day Off</th> <th>Day Off</th>
<th scope="col">Salary</th> <th>Salary</th>
</tr> </tr>
</thead>
<tbody>
<tr v-for="employee in employees" :key="employee.id"> <tr v-for="employee in employees" :key="employee.id">
<td>{{ employee.id }}</td> <td>{{ employee.id }}</td>
<td>{{ employee.name }}</td> <td>{{ employee.name }}</td>
...@@ -25,8 +23,8 @@ ...@@ -25,8 +23,8 @@
<td>{{ employee.day_off }}</td> <td>{{ employee.day_off }}</td>
<td>{{ employee.salary }}</td> <td>{{ employee.salary }}</td>
</tr> </tr>
</tbody> </table>
</table> </div>
</div> </div>
</template> </template>
...@@ -48,3 +46,100 @@ export default defineComponent({ ...@@ -48,3 +46,100 @@ export default defineComponent({
} }
}) })
</script> </script>
<style scoped>
@media (min-width: 768px) {
.body {
background-color: rgb(240, 240, 240);
display: flex;
flex-direction: column;
padding: 20px;
border-radius: 3px;
height: 100%;
}
.table-box {
border: 2px rgb(222, 222, 222) solid;
border-radius: 15px;
padding: 5px;
}
tr:nth-child(even) {
background-color: rgb(224, 224, 224);
}
td:first-child {
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
td:last-child {
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.title-box {
display: flex;
justify-content: space-between;
margin-bottom: 40px;
}
.title {
order: 0;
font-weight: bold;
}
}
@media (max-width: 768px) {
.body {
background-color: rgb(240, 240, 240);
display: flex;
flex-direction: column;
min-height: 100vh;
}
.table-box {
overflow: scroll;
}
th {
padding: 10px
}
.table {
border: 2px rgb(222, 222, 222) solid;
border-radius: 13px;
padding: 5px;
white-space: nowrap;
}
td {
padding: 10px
}
.title-box {
display: flex;
justify-content: space-between;
padding:10px;
}
.title {
order: 0;
font-weight: bold;
}
tr:nth-child(even) {
background-color: rgb(224, 224, 224);
}
td:first-child {
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
td:last-child {
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
}
</style>
src/views/LoginView.vue
View file @ 7afc0148
<template> <template>
<div class="text-center"> <div class="body">
<main class="form-signin d-flex justify-content-center align-items-center"> <form @submit.prevent="submitForm" class="login-form-box">
<form @submit.prevent="submitForm"> <div class="login-form">
<h1>Login</h1> <div class="input-title">Login</div>
<div class="form-floating "> <div class="input-box">
<input class=form-control type="text" id="username" name="username" v-model="username"> <div for="username" class="input-label">Username</div>
<label for="username" class="floatingInput">Username</label> <input type="text" id="username" name="username" v-model="username" class="input">
<div class="error"></div> </div>
</div> <br> <div class="input-box">
<div class="form-floating"> <div for="password" class="input-label">Password</div>
<input class="form-control" type="text" name="password" id="password" v-model="password"> <input type="password" id="password" name="password" v-model="password" class="input">
<label for="password" class="floatingInput">Password</label> </div>
<div class="error"></div> <button type="submit" @click="submitForm" class="submit-button">Login</button>
</div><br>
<button type="submit" @click="submitform" class="btn btn-lg btn-primary w-100">Login</button>
<div>{{ error }}</div> <div>{{ error }}</div>
</form> </div>
</form>
</main>
</div> </div>
</template> </template>
...@@ -42,9 +39,9 @@ export default defineComponent({ ...@@ -42,9 +39,9 @@ export default defineComponent({
* @return {void} * @return {void}
*/ */
const submitForm = () => { const submitForm = () => {
store.dispatch('login', { username: username.value, password: password.value }) store.dispatch('login', { username: username.value, password: password.value })
} }
return { return {
username, username,
...@@ -55,3 +52,67 @@ export default defineComponent({ ...@@ -55,3 +52,67 @@ export default defineComponent({
}, },
}) })
</script> </script>
<style scoped>
.body {
background-color: rgb(240, 240, 240);
display: flex;
flex-direction: column;
padding: 100px;
border-radius: 3px;
min-height: 100%;
}
.login-form-box {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.login-form {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
background-color: rgb(255, 255, 255);
padding: 20px;
border-radius: 3px;
min-width: 500px;
min-height: 400px;
border:none;
border-radius: 3px;
box-shadow: 5px 5px 5px 5px #d5d5d5;
}
.submit-button {
border: none;
background: #93e4c1;
color: white;
border-radius: 3px;
width: 300px;
height: 50px;
}
.submit-button:hover {
background: #3baea0;
}
.input-title {
font-size: 30px;
font-weight: bold;
}
.input-label {
font-size: 15px;
color: rgb(164, 164, 164);
}
.input {
border: none;
background-color: rgb(240, 240, 240);
border-radius: 3px;
width: 300px;
height: 50px;
}
</style>
src/views/ModifyView.vue
View file @ 7afc0148
<template> <template>
<form @submit.prevent="update" class="row g-3"> <div class="body">
<div class="col-md-6"> <div class="title-box">
<label for="name" class="form-label">Room Name</label> <h1 class="title">Modify</h1>
<input type="text" id="name" name="name" v-model="name" class="form-control"> </div>
</div> <form @submit.prevent="update" class="form-box">
<div class="col-md-6"> <div class="form">
<label for="image_first" class="form-label">First Image</label> <div class="column">
<input type="file" ref="fileInput" @change="imageFirst" id="image_first" name="image_first" class="form-control"> <div class="input-box">
</div> <label for="name" class="label">
<div class="col-md-6"> <span>
<label for="image_second" class="form-label">Second Image</label> Room Name
<input type="file" ref="fileInput" @change="imageSecond" id="image_second" name="image_second" class="form-control"> </span>
</div> <button type="button" @click="showInput('name')" class="show-button">Modify</button>
<div class="col-md-6"> </label>
<label for="image_third" class="form-label">Third Image</label> <input type="text" id="name" name="name" v-model="name" class="input">
<input type="file" ref="fileInput" @change="imageThird" id="image_third" name="image_third" class="form-control"> </div>
</div> <div class="input-box">
<div class="col-md-6"> <label for="image_first" class="label">
<label for="type" class="form-label">Type</label> <span>
<input type="text" id="type" name="type" v-model="type" class="form-control"> First Image
</div> </span>
<div class="col-md-6"> <button type="button" @click="showInput('image_first')" class="show-button">Modify</button>
<label for="hour_price" class="form-label">Hour Price</label> </label>
<input type="text" id="hour_price" name="hour_price" v-model="hour_price" class="form-control"> <input type="file" ref="fileInput" @change="imageFirst" id="image_first" name="image_first"
</div> class="input">
<div class="col-md-6"> </div>
<label for="day_price" class="form-label">Day Price</label> <div class="input-box">
<input type="text" id="day_price" name="day_price" v-model="day_price" class="form-control"> <label for="image_second" class="label">
</div> <span>
<div class="col-md-6"> Second Image
<label for="size" class="form-label">Size</label> </span>
<input type="number" id="size" name="size" v-model="size" class="form-control"> <button type="button" @click="showInput('image_second')" class="show-button">Modify</button>
</div> </label>
<div class="col-md-6"> <input type="file" ref="fileInput" @change="imageSecond" id="image_second" name="image_second"
<label class="form-label">Balcony</label> class="input">
<div> </div>
<div class="form-check"> <div class="input-box">
<select name="balcony" id="balcony" v-model="balcony" class="form-select"> <label for="image_third" class="label">
<option value="1">True</option> <span>
<option value="0">False</option> Third Image
</select> </span>
</div> <button type="button" @click="showInput('image_third')" class="show-button">Modify</button>
</div> </label>
</div> <input type="file" ref="fileInput" @change="imageThird" id="image_third" name="image_third"
<div class="col-md-6"> class="input">
<label for="view" class="form-label">View</label> </div>
<input type="text" id="view" name="view" v-model="view" class="form-control"> <div class="input-box">
</div> <label for="type" class="label">
<div class="col-md-6"> <span>
<label for="description" class="form-label">Description</label> Type
<input type="text" id="description" name="description" v-model="description" class="form-control"> </span>
</div> <button type="button" @click="showInput('type')" class="show-button">Modify</button>
<div class="col-md-6"> </label>
<label class="form-label">Smoking</label> <input type="text" id="type" name="type" v-model="type" class="input">
<div> </div>
<div class="form-check"> <div class="input-box">
<select name="smoking" id="smoking" v-model="smoking" class="form-select"> <label for="hour_price" class="label">
<option value="1">True</option> <span>
<option value="0">False</option> Hour Price
</select> </span>
</div> <button type="button" @click="showInput('hour_price')" class="show-button">Modify</button>
</div> </label>
</div> <input type="text" id="hour_price" name="hour_price" v-model="hour_price" class="input">
<div class="col-md-6"> </div>
<label for="floor" class="form-label">Floor</label> <div class="input-box">
<input type="number" id="floor" name="floor" v-model="floor" class="form-control"> <label for="day_price" class="label">
</div> <span>
<div class="col-md-6"> Day Price
<label class="form-label">Bathtub</label> </span>
<div> <button type="button" @click="showInput('day_price')" class="show-button">Modify</button>
<div class="form-check"> </label>
<select name="bathtub" id="bathtub" v-model="bathtub" class="form-select"> <input type="text" id="day_price" name="day_price" v-model="day_price" class="input">
<option value="1">True</option> </div>
<option value="0">False</option> </div>
</select> <div class="column">
</div> <div class="input-box">
</div> <label for="size" class="label">
</div> <span>
<div class="col-12"> Size
<button type="submit" class="btn btn-primary"> </span>
<i class="bi bi-check-circle"></i> Submit <button type="button" @click="showInput('size')" class="show-button">Modify</button>
</button> </label>
</div> <input type="number" id="size" name="size" v-model="size" class="input">
</form> </div>
<div class="input-box">
<label class="label">
<span>
Balcony
</span>
<button type="button" @click="showInput('balcony')" class="show-button">Modify</button>
</label>
<div>
<div class="">
<select name="balcony" id="balcony" v-model="balcony" class="input">
<option value="1">True</option>
<option value="0">False</option>
</select>
</div>
</div>
</div>
<div class="input-box">
<label for="view" class="label">
<span>
View
</span>
<button type="button" @click="showInput('view')" class="show-button">Modify</button>
</label>
<input type="text" id="view" name="view" v-model="view" class="input">
</div>
<div class="input-box">
<label for="description" class="label">
<span>
Description
</span>
<button type="button" @click="showInput('description')" class="show-button">Modify</button>
</label>
<input type="text" id="description" name="description" v-model="description" class="input">
</div>
<div class="input-box">
<label class="label">
<span>
Smoking
</span>
<button type="button" @click="showInput('smoking')" class="show-button">Modify</button>
</label>
<div>
<div class="">
<select name="smoking" id="smoking" v-model="smoking" class="input">
<option value="1">True</option>
<option value="0">False</option>
</select>
</div>
</div>
</div>
<div class="input-box">
<label for="floor" class="label">
<span>
Floor
</span>
<button type="button" @click="showInput('floor')" class="show-button">Modify</button>
</label>
<input type="number" id="floor" name="floor" v-model="floor" class="input">
</div>
<div class="input-box">
<label class="label">
<span>
Bathtub
</span>
<button type="button" @click="showInput('bathtub')" class="show-button">Modify</button>
</label>
<div>
<div class="">
<select name="bathtub" id="bathtub" v-model="bathtub" class="input">
<option value="1">True</option>
<option value="0">False</option>
</select>
</div>
</div>
</div>
</div>
<div class="">
<button type="submit" class="submit-button">
<i class="bi bi-send">submit</i>
</button>
</div>
</div>
</form>
</div>
</template> </template>
<script> <script>
...@@ -92,95 +176,241 @@ import { useRoute } from 'vue-router' ...@@ -92,95 +176,241 @@ import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
export default defineComponent({ export default defineComponent({
name: 'ModifyView', 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)
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 () => {
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,
id,
router,
imageFirst,
imageSecond,
imageThird,
}
}
setup() {
const router = useRouter()
const route = useRoute()
const id = route.params.id
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 () => {
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('image_first', imageFirstFile.value)
}
if (input.name == 'image_second') {
formData.append('image_second', imageSecondFile.value)
}
if (input.name == 'image_third') {
formData.append('image_third', imageThirdFile.value)
}
else if (input.name !== 'image_first' && input.name !== 'image_second' && input.name !== 'image_third') {
formData.append(input.name, input.value)
}
}
}
// for (const value of formData.values()) {
// conse.log(value);
// }
await axios.post('modify', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
router.push({ name: 'Room' })
}
return {
update,
id,
router,
imageFirst,
imageSecond,
imageThird,
}
},
methods: {
//display input field on click
showInput(input) {
console.log('okay')
const id = ref(document.getElementById(input));
if (id.value.style.display === "none") {
id.value.style.display = "block";
} else {
id.value.style.display = "none";
}
}
}
}) })
</script> </script>
<style scoped>
@media (min-width: 769px) {
.body {
background-color: rgb(240, 240, 240);
display: flex;
flex-direction: column;
padding: 20px;
border-radius: 3px;
min-height: 100%;
}
.title {
order: 0;
font-weight: bold;
}
.title-box {
display: flex;
justify-content: space-between;
margin-bottom: 40px;
}
.input {
display: none;
border: none;
border-radius: 5px;
}
.form {
display: flex;
justify-content: space-between;
}
.form-box {
border: 2px rgb(222, 222, 222) solid;
border-radius: 15px;
padding: 5px;
}
.column {
display: flex;
flex-direction: column;
gap: 40px;
}
.label {
padding: 10px;
border-radius: 5px;
font-size: 13px;
width: 300px;
display: flex;
justify-content: space-between;
color: rgb(178, 178, 178);
}
.input-box {
border-bottom: 1px solid rgb(178, 178, 178);
}
.show-button {
border: none;
background-color: #8bffff;
cursor: pointer;
border-radius: 5px;
padding: 5px;
margin-left: 10px;
}
.show-button:hover {
background-color: #1aeded;
color: white;
}
.submit-button {
border: none;
background-color: rgb(89, 229, 98);
cursor: pointer;
border-radius: 5px;
padding: 5px;
margin-left: 10px;
}
}
@media (max-width:768px) {
.body {
background-color: rgb(240, 240, 240);
display: flex;
flex-direction: column;
padding: 20px;
border-radius: 3px;
min-height: 100%;
}
.title {
order: 0;
font-weight: bold;
}
.title-box {
display: flex;
justify-content: space-between;
margin-bottom: 40px;
}
.form-box {
border: 2px rgb(222, 222, 222) solid;
border-radius: 15px;
padding: 5px;
}
.input {
display: none;
border: none;
border-radius: 5px;
width: 100%;
}
.input-box {
border-bottom: 1px solid rgb(178, 178, 178);
}
.show-button {
border: none;
background-color: #8bffff;
cursor: pointer;
border-radius: 5px;
padding: 5px;
margin-left: 10px;
}
.label {
padding: 10px;
border-radius: 5px;
font-size: 13px;
width: 300px;
display: flex;
justify-content: space-between;
color: rgb(178, 178, 178);
}
.submit-button {
border: none;
background-color: rgb(89, 229, 98);
cursor: pointer;
border-radius: 5px;
padding: 5px;
width: 100%;
margin-top: 10px;
}
}
</style>
src/views/RoomView.vue
View file @ 7afc0148
<template> <template>
<div> <div class="body">
<div> <div class="title-box">
<h1>Room</h1><br> <h1 class="title">Room</h1>
</div> </div>
<table class="table table-striped"> <div class="table-box">
<thead> <table class="table">
<tr> <tr class="">
<th scope="col">Room ID</th> <th>Room ID</th>
<th scope="col">Room Name</th> <th>Room Name</th>
<th scope="col">Type</th> <th>Type</th>
<th scope="col">Hour Price</th> <th>Hour Price</th>
<th scope="col">Day Price</th> <th>Day Price</th>
<th scope="col">Status</th> <th>Status</th>
<th scope="col">Size</th> <th>Size</th>
<th scope="col">Balcony</th> <th>Balcony</th>
<th scope="col">View</th> <th>View</th>
<th scope="col">Smoking</th> <th>Smoking</th>
<th scope="col">Floor</th> <th>Floor</th>
<th scope="col">Bathtub</th> <th>Bathtub</th>
<th scope="col">Actions</th> <th>Actions</th>
</tr> </tr>
</thead>
<tbody>
<tr v-for="room in rooms" :key="room.id"> <tr v-for="room in rooms" :key="room.id">
<td>{{ room.id }}</td> <td>{{ room.id }}</td>
<td>{{ room.name }}</td> <td>{{ room.name }}</td>
...@@ -37,14 +35,14 @@ ...@@ -37,14 +35,14 @@
<td>{{ room.bathtub }}</td> <td>{{ room.bathtub }}</td>
<td> <td>
<router-link :to="{ name: 'Modify', params: { id: room.id } }"> <router-link :to="{ name: 'Modify', params: { id: room.id } }">
<button class="btn btn-outline-primary"> <button class="modify-button">
<i class="bi bi-pencil-square"></i> Modify <i class="bi bi-pencil-square"></i> Modify
</button> </button>
</router-link> </router-link>
</td> </td>
</tr> </tr>
</tbody> </table>
</table> </div>
</div> </div>
</template> </template>
...@@ -65,3 +63,118 @@ export default defineComponent({ ...@@ -65,3 +63,118 @@ export default defineComponent({
} }
}) })
</script> </script>
<style scoped>
@media (min-width: 769px) {
.body {
background-color: rgb(240, 240, 240);
display: flex;
flex-direction: column;
padding: 20px;
border-radius: 3px;
height: 100%;
}
.table-box {
border: 2px rgb(222, 222, 222) solid;
border-radius: 15px;
padding: 5px;
}
tr:nth-child(even) {
background-color: rgb(224, 224, 224);
}
td:first-child {
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
td:last-child {
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.title-box {
display: flex;
justify-content: space-between;
margin-bottom: 40px;
}
.title {
order: 0;
font-weight: bold;
}
.modify-button {
border: none;
border-radius: 20px;
background: #8bffff;
color: white
}
.modify-button:hover {
background: #82acff;
}
}
@media (max-width:768px) {
.body {
background-color: rgb(240, 240, 240);
display: flex;
flex-direction: column;
min-height: 100vh;
}
.table-box {
overflow: scroll;
}
th {
padding: 10px
}
.table {
border: 2px rgb(222, 222, 222) solid;
border-radius: 13px;
padding: 5px;
white-space: nowrap;
}
td {
padding: 10px
}
.title-box {
display: flex;
justify-content: space-between;
padding:10px;
}
.title {
order: 0;
font-weight: bold;
}
.modify-button {
border: none;
border-radius: 20px;
background: #8bffff;
color: white
}
tr:nth-child(even) {
background-color: rgb(224, 224, 224);
}
td:first-child {
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
td:last-child {
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
}
</style>
src/views/UserListView.vue
View file @ 7afc0148
<template> <template>
<div> <div class="body">
<h1>List of user:</h1><br> <div class="title-box">
<table class="table table-striped"> <h1 class=title>List of user:</h1>
</div>
<div>
<div class="table-box">
<table class="table">
<tr>
<th>ID</th>
<th>Username</th>
<th>Role</th>
<th>Actions</th>
</tr>
<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="delete-button">
<i class="bi bi-trash"></i> Delete
</button>
</td>
</tr>
</table>
</div>
</div>
<!-- <table class="table table-striped">
<thead> <thead>
<tr> <tr>
<th scope="col">ID</th> <th>ID</th>
<th scope="col">Username</th> <th>Username</th>
<th scope="col">Role</th> <th>Role</th>
<th scope="col">Actions</th> <th>Actions</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -22,7 +46,7 @@ ...@@ -22,7 +46,7 @@
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table> -->
</div> </div>
</template> </template>
...@@ -76,3 +100,134 @@ export default defineComponent({ ...@@ -76,3 +100,134 @@ export default defineComponent({
}, },
}) })
</script> </script>
<style scoped>
@media (min-width: 769px) {
.body {
background-color: rgb(240, 240, 240);
display: flex;
flex-direction: column;
padding: 20px;
border-radius: 3px;
height: 100%;
}
.table-box {
border: 2px rgb(222, 222, 222) solid;
border-radius: 13px;
padding: 5px;
}
th {
padding: 10px
}
.delete-button {
border: none;
border-radius: 20px;
background: #ff8585;
color: white;
}
.delete-button:hover {
background: #ff5757;
}
.fee-box {
display: flex;
}
.fee {
width: 100px;
border: none;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
tr:nth-child(even) {
background-color: rgb(224, 224, 224);
}
td:first-child {
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
td:last-child {
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.title-box {
display: flex;
justify-content: space-between;
margin-bottom: 40px;
}
.title {
order: 0;
font-weight: bold;
}
}
@media (max-width: 768px) {
.body {
background-color: rgb(240, 240, 240);
display: flex;
flex-direction: column;
min-height: 100vh;
}
.table-box {
overflow: scroll;
}
th {
padding: 10px
}
.table {
border: 2px rgb(222, 222, 222) solid;
border-radius: 13px;
padding: 5px;
white-space: nowrap;
}
td {
padding: 10px
}
.title-box {
display: flex;
justify-content: space-between;
padding: 10px;
}
.title {
order: 0;
font-weight: bold;
}
tr:nth-child(even) {
background-color: rgb(224, 224, 224);
}
td:first-child {
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
td:last-child {
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.delete-button {
border: none;
border-radius: 20px;
background: #ff8585;
color: white;
}
}
</style>
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