Skip to content

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

commit

parent addc6689
Show whitespace changes
Inline Side-by-side
Showing with 1964 additions and 418 deletions
package-lock.json
View file @ 7afc0148
......@@ -10,6 +10,7 @@
"dependencies": {
"axios": "^1.4.0",
"bootstrap": "^5.2.3",
"bootstrap-icons": "^1.10.5",
"bootstrap-vue": "^2.23.1",
"core-js": "^3.8.3",
"vue": "^3.2.47",
......@@ -3822,6 +3823,21 @@
"@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": {
"version": "2.23.1",
"resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-2.23.1.tgz",
......
package.json
View file @ 7afc0148
......@@ -10,6 +10,7 @@
"dependencies": {
"axios": "^1.4.0",
"bootstrap": "^5.2.3",
"bootstrap-icons": "^1.10.5",
"bootstrap-vue": "^2.23.1",
"core-js": "^3.8.3",
"vue": "^3.2.47",
......
src/App.vue
View file @ 7afc0148
<template>
<div class="d-flex flex-column min-vh-100">
<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>
<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 class="layout">
<HotelHeader />
<div class="body">
<div v-if="shouldDisplaySidebar">
<div class="sidebar" id="sidebar" v-if="width > 769">
<NavbarHotel />
</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>
</header>
<div class="view">
<router-view />
</div>
<div class="mt-auto">
<HotelFooter></HotelFooter>
</div>
</div>
</template>
<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 {
name: 'App',
components: {
HotelFooter
HotelHeader,
NavbarHotel
},
setup() {
const width = ref(window.innerWidth)
return {
width,
}
},
computed: {
shouldDisplaySidebar() {
const currentView = this.$route.path;
return currentView !== '/login';
},
},
}
</script>
<style>
.vh {
<style scoped>
@media (min-width: 769px) {
.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>
src/components/HotelHeader.vue
View file @ 7afc0148
<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 class="header">
<h1 class="hotel-name">ABC Hotel</h1>
<div v-if="width < 768">
<i class="bi bi-list" @click="showMenu()"></i>
<div class="sidebar" id="sidebar">
<NavbarHotel />
</div>
</div>
</div>
</template>
<script>
import { ref } from 'vue'
import NavbarHotel from './NavbarHotel.vue'
export default {
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>
<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'
import App from './App.vue'
import router from './router'
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-icons/font/bootstrap-icons.css'
import axios from 'axios'
import storeConfig from './store';
import { createStore } from 'vuex';
......
src/router/index.js
View file @ 7afc0148
......@@ -7,7 +7,6 @@ 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'
......@@ -68,7 +67,7 @@ const routes = [
routes.forEach(route => {
route.beforeEnter = (to, from, next) => {
const isAuthenticated = store.state.isLoggedIn;
const isAuthenticated = localStorage.getItem('isLoggedIn');
if (to.path !== '/login' && to.path !== '/register' && !isAuthenticated) {
next('/login');
} else {
......
src/views/BookingView.vue
View file @ 7afc0148
<template>
<div>
<div>
<h1 class="">Booking</h1>
<div class="position-relative top-0">
<div class="body">
<div class="title-box">
<h1 class="title">Booking</h1>
<div class="create-button-box">
<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>
</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>
<div class="table-box">
<table class="table">
<tr class="">
<th>Booking ID</th>
<th>Guest Name</th>
<th>Guest Number</th>
<th>Room ID</th>
<th>Checked</th>
</tr>
</thead>
<tbody>
<tr v-for="booking in bookings" :key="booking.id">
<td>{{ booking.id }}</td>
<td>{{ booking.guest_name }}</td>
......@@ -28,19 +25,19 @@
<td>{{ booking.room_id }}</td>
<td>{{ booking.checked }}</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
</button>
</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
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
......@@ -48,6 +45,7 @@ import { defineComponent, ref } from "vue";
import axios from '../config';
export default defineComponent({
name: "BookingView",
setup() {
......@@ -116,3 +114,161 @@ export default defineComponent({
},
});
</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>
<div>
<div>
<h1>Checkin</h1><br>
<div class="body">
<div class="title-box">
<h1 class="title">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>
<div class="table-box">
<table class="table">
<tr class="table-column">
<th>Checkin ID</th>
<th>Booking ID</th>
<th>Employee ID</th>
<th>Checkin Time</th>
<th>Checkout Time</th>
<th>Fee</th>
<th>Total Price</th>
</tr>
</thead>
<tbody>
<tr v-for="checkin in checkins" :key="checkin.id">
<td>{{ checkin.id }}</td>
<td>{{ checkin.booking_id }}</td>
......@@ -26,29 +23,27 @@
<td>{{ checkin.fee }}</td>
<td>{{ checkin.total_price }}</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
</button>
</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
</button>
</td>
<td>
<form @submit.prevent="addFee(checkin.id)">
<div class="input-group">
<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
<form @submit.prevent="addFee(checkin.id)" class="fee-box">
<input type="text" v-model="checkin.id" name="fee" id="fee" placeholder="Fee" class="fee">
<button type="submit" class="submit-button">
<i class="bi bi-currency-dollar"></i>Submit
</button>
</div>
</form>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
......@@ -149,3 +144,175 @@ export default defineComponent({
}
})
</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>
<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 class="body">
<div class="title-box">
<h1 class="title">Create Booking</h1>
</div>
<div class="input-box">
<div class="input-box-content">
<form @submit.prevent="addBooking" class="">
<div class="input-title-box">
Enter information
</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 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="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 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>
<button type="submit" class="btn btn-primary">
<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>
</template>
<script>
......@@ -32,40 +42,165 @@ import axios from '../config'
import router from '@/router'
export default defineComponent({
name: 'CreateBookingView',
name: "CreateBookingView",
setup() {
const guest_name = ref('')
const guest_number = ref('')
const room_id = ref('')
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)
console.log(guest_name.value, guest_number.value, room_id.value);
try {
const response = await axios.post('create-booking', {
const response = await axios.post("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) {
alert(error.response.data.message)
});
console.log(response.data);
alert("Create booking successfully");
router.push({ name: "Booking" });
}
catch (error) {
alert(error.response.data.message);
}
};
return {
guest_name,
guest_number,
room_id,
addBooking
}
}
};
},
})
</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>
<div>
<div>
<div class="mb-5">
<h1>Dashboard</h1>
<div class="body">
<div class="title-box">
<h1 class="title">Dashboard</h1>
</div>
<table class="table table-striped table-hover">
<thead>
<div>
<div class="table-box">
<table class="table">
<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>
<th>Booking ID</th>
<th>Guest Name</th>
<th>Guest Number</th>
<th>Room ID</th>
<th>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 v-for="guest in guestInfos" :key="guest.id">
<td>{{ guest.id }}</td>
<td>{{ guest.guest_name }}</td>
<td>{{ guest.guest_number }}</td>
<td>{{ guest.room_id }}</td>
<td>{{ guest.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>
<div class="summary-box">
<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 class="summary-value">
{{ bookingInfos.lastMonthTotal }}
</div>
</div>
</div>
</div>
</template>
<script>
......@@ -51,8 +79,190 @@ export default defineComponent({
this.guestInfos = results.data.guestInfos
this.bookingInfos = results.data.bookingInfos
}
},
})
</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>
<div>
<div>
<h1>Booking</h1><br>
<div class="body">
<div class="title-box">
<h1 class="title">Employee</h1>
</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>
<div class="table-box">
<table class="table">
<tr class="">
<th>Employee ID</th>
<th>Employee Name</th>
<th>Role</th>
<th>Status</th>
<th>Shift</th>
<th>Day Off</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr v-for="employee in employees" :key="employee.id">
<td>{{ employee.id }}</td>
<td>{{ employee.name }}</td>
......@@ -25,9 +23,9 @@
<td>{{ employee.day_off }}</td>
<td>{{ employee.salary }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
......@@ -48,3 +46,100 @@ export default defineComponent({
}
})
</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>
<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 class="body">
<form @submit.prevent="submitForm" class="login-form-box">
<div class="login-form">
<div class="input-title">Login</div>
<div class="input-box">
<div for="username" class="input-label">Username</div>
<input type="text" id="username" name="username" v-model="username" class="input">
</div>
<div class="input-box">
<div for="password" class="input-label">Password</div>
<input type="password" id="password" name="password" v-model="password" class="input">
</div>
<button type="submit" @click="submitForm" class="submit-button">Login</button>
<div>{{ error }}</div>
</div>
</form>
</main>
</div>
</template>
......@@ -55,3 +52,67 @@ export default defineComponent({
},
})
</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>
<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 class="body">
<div class="title-box">
<h1 class="title">Modify</h1>
</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">
<form @submit.prevent="update" class="form-box">
<div class="form">
<div class="column">
<div class="input-box">
<label for="name" class="label">
<span>
Room Name
</span>
<button type="button" @click="showInput('name')" class="show-button">Modify</button>
</label>
<input type="text" id="name" name="name" v-model="name" class="input">
</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 class="input-box">
<label for="image_first" class="label">
<span>
First Image
</span>
<button type="button" @click="showInput('image_first')" class="show-button">Modify</button>
</label>
<input type="file" ref="fileInput" @change="imageFirst" id="image_first" name="image_first"
class="input">
</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 class="input-box">
<label for="image_second" class="label">
<span>
Second Image
</span>
<button type="button" @click="showInput('image_second')" class="show-button">Modify</button>
</label>
<input type="file" ref="fileInput" @change="imageSecond" id="image_second" name="image_second"
class="input">
</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 class="input-box">
<label for="image_third" class="label">
<span>
Third Image
</span>
<button type="button" @click="showInput('image_third')" class="show-button">Modify</button>
</label>
<input type="file" ref="fileInput" @change="imageThird" id="image_third" name="image_third"
class="input">
</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 class="input-box">
<label for="type" class="label">
<span>
Type
</span>
<button type="button" @click="showInput('type')" class="show-button">Modify</button>
</label>
<input type="text" id="type" name="type" v-model="type" class="input">
</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 class="input-box">
<label for="hour_price" class="label">
<span>
Hour Price
</span>
<button type="button" @click="showInput('hour_price')" class="show-button">Modify</button>
</label>
<input type="text" id="hour_price" name="hour_price" v-model="hour_price" class="input">
</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 class="input-box">
<label for="day_price" class="label">
<span>
Day Price
</span>
<button type="button" @click="showInput('day_price')" class="show-button">Modify</button>
</label>
<input type="text" id="day_price" name="day_price" v-model="day_price" class="input">
</div>
<div class="col-md-6">
<label class="form-label">Balcony</label>
</div>
<div class="column">
<div class="input-box">
<label for="size" class="label">
<span>
Size
</span>
<button type="button" @click="showInput('size')" class="show-button">Modify</button>
</label>
<input type="number" id="size" name="size" v-model="size" class="input">
</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="form-check">
<select name="balcony" id="balcony" v-model="balcony" class="form-select">
<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="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 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="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 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="col-md-6">
<label class="form-label">Smoking</label>
<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="form-check">
<select name="smoking" id="smoking" v-model="smoking" class="form-select">
<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="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 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="col-md-6">
<label class="form-label">Bathtub</label>
<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="form-check">
<select name="bathtub" id="bathtub" v-model="bathtub" class="form-select">
<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 class="col-12">
<button type="submit" class="btn btn-primary">
<i class="bi bi-check-circle"></i> Submit
</div>
<div class="">
<button type="submit" class="submit-button">
<i class="bi bi-send">submit</i>
</button>
</div>
</div>
</form>
</div>
</template>
<script>
......@@ -95,33 +179,23 @@ export default defineComponent({
name: 'ModifyView',
setup() {
const router = useRouter();
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 imageFirstFile = ref(null)
const imageSecondFile = ref(null)
const imageThirdFile = ref(null)
const imageFirst = (event) => {
imageFirstFile.value = event.target.files[0];
imageFirstFile.value = event.target.files[0]
}
const imageSecond = (event) => {
imageSecondFile.value = event.target.files[0];
imageSecondFile.value = event.target.files[0]
}
const imageThird = (event) => {
imageThirdFile.value = event.target.files[0];
imageThirdFile.value = event.target.files[0]
}
......@@ -132,28 +206,29 @@ export default defineComponent({
*/
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)
formData.append('image_first', imageFirstFile.value)
}
if (input.name == 'image_second') {
formData.append(input.name, imageSecondFile.value)
formData.append('image_second', imageSecondFile.value)
}
if (input.name == 'image_third') {
formData.append(input.name, imageThirdFile.value)
formData.append('image_third', imageThirdFile.value)
}
else {
else if (input.name !== 'image_first' && input.name !== 'image_second' && input.name !== 'image_third') {
formData.append(input.name, input.value)
}
}
}
console.log(formData)
// for (const value of formData.values()) {
// conse.log(value);
// }
await axios.post('modify', formData, {
headers: {
'Content-Type': 'multipart/form-data'
......@@ -164,23 +239,178 @@ export default defineComponent({
}
return {
update,
// name,
// type,
// hour_price,
// day_price,
// size,
// balcony,
// view,
// smoking,
// floor,
// bathtub,
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>
<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>
<div>
<div>
<h1>Room</h1><br>
<div class="body">
<div class="title-box">
<h1 class="title">Room</h1>
</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>
<div class="table-box">
<table class="table">
<tr class="">
<th>Room ID</th>
<th>Room Name</th>
<th>Type</th>
<th>Hour Price</th>
<th>Day Price</th>
<th>Status</th>
<th>Size</th>
<th>Balcony</th>
<th>View</th>
<th>Smoking</th>
<th>Floor</th>
<th>Bathtub</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="room in rooms" :key="room.id">
<td>{{ room.id }}</td>
<td>{{ room.name }}</td>
......@@ -37,15 +35,15 @@
<td>{{ room.bathtub }}</td>
<td>
<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
</button>
</router-link>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
......@@ -65,3 +63,118 @@ export default defineComponent({
}
})
</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>
<div class="body">
<div class="title-box">
<h1 class=title>List of user:</h1>
</div>
<div>
<h1>List of user:</h1><br>
<table class="table table-striped">
<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>
<tr>
<th scope="col">ID</th>
<th scope="col">Username</th>
<th scope="col">Role</th>
<th scope="col">Actions</th>
<th>ID</th>
<th>Username</th>
<th>Role</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
......@@ -22,7 +46,7 @@
</td>
</tr>
</tbody>
</table>
</table> -->
</div>
</template>
......@@ -76,3 +100,134 @@ export default defineComponent({
},
})
</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