Skip to content

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

Merge branch 'feature/displayError' into 'develop' 

Style web, add function

See merge request !1
parents 7f33e947 cd02b769
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 4054 additions and 274 deletions
README.md
View file @ ae491862
# hotel # test
## Project setup ## Project setup
``` ```
......
package-lock.json
View file @ ae491862
This diff is collapsed.
package.json
View file @ ae491862
{ {
"name": "hotel", "name": "test",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"scripts": { "scripts": {
...@@ -8,14 +8,24 @@ ...@@ -8,14 +8,24 @@
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"axios": "^1.4.0",
"bootstrap": "^5.2.3",
"bootstrap-icons": "^1.10.5",
"bootstrap-vue": "^2.23.1",
"chart.js": "^4.3.0",
"core-js": "^3.8.3", "core-js": "^3.8.3",
"vue": "^3.2.13" "vue": "^3.2.47",
"vue-chartjs": "^5.2.0",
"vue-router": "^4.1.6",
"vuejs-paginate": "^2.1.0",
"vuex": "^4.0.2"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.12.16", "@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16", "@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0", "@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-service": "~5.0.0", "@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3" "eslint-plugin-vue": "^8.0.3"
......
src/App.vue
View file @ ae491862
<template> <template>
<img alt="Vue logo" src="./assets/logo.png"> <div class="layout">
<HelloWorld msg="Welcome to Your Vue.js App"/> <div class="header">
<HotelHeader />
</div>
<div class="body">
<div v-if="shouldDisplaySidebar !== '/login' && !shouldDisplaySidebar.includes('/reset-password/') && shouldDisplaySidebar !== '/register' && shouldDisplaySidebar !== '/verify-email' && width > 769"
>
<div class="sidebar">
<NavbarHotel />
</div>
</div>
<div class="view">
<router-view />
</div>
</div>
</div>
</template> </template>
<script> <script>
import HelloWorld from './components/HelloWorld.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: {
HelloWorld HotelHeader,
} NavbarHotel
},
setup() {
const width = ref(window.innerWidth)
return {
width,
}
},
computed: {
shouldDisplaySidebar() {
const currentView = this.$route.path;
return currentView;
},
},
} }
</script> </script>
<style scoped>
@media (min-width: 769px) {
.header {}
.layout {
width:99vw;
min-height: 100vh;
}
.body {
display: flex;
width:100%;
}
.layout {
display: flex;
flex-direction: column;
}
<style> .footer {
#app { margin-top: auto
font-family: Avenir, Helvetica, Arial, sans-serif; }
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; .sidebar {
text-align: center; position: sticky;
color: #2c3e50; top: 0;
margin-top: 60px; }
.view {
width: 100%;
}
}
@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/DataTable.vue 0 → 100644
View file @ ae491862
<template>
<div class="table-box">
<table class="table">
<tr>
<th v-for="title in tableTitles" :key="title">{{ title }}</th>
</tr>
<tr v-for="datas, i in tableDatas" :key="i">
<td v-for="data, i in datas" :key="i">{{ data }}</td>
<td class="action-column">
<div v-if="actionSubmitInput != null">
<div>
<input type="text" :id="datas.id" name="fee" placeholder="Fee" class="fee">
<button type="submit" class="submit-button" @click="callParentSubmitInputFunction(datas.id)">
<i class="bi bi-currency-dollar"></i> {{ actionSubmitInput }}
</button>
</div>
</div>
<div v-if="actionModify != null">
<div>
<button class="modify-button" @click="callParentModifyFunction(datas.id, datas.booking_id)">
<i class="bi bi-pencil-square"></i> {{ actionModify }}
</button>
</div>
</div>
<div v-if="actionDetail != null">
<div>
<button class="detail-button"
@click="callParentDetailFunction(datas.id, datas.booking_id)">
<i class="bi bi-ticket-detailed"></i> {{ actionDetail }}
</button>
</div>
</div>
<div v-if="actionSubmit != null">
<div>
<button type="submit" class="submit-button" @click="callParentSubmitFunction(datas.id)">
<i class="bi bi-check-circle"></i> {{ actionSubmit }}
</button>
</div>
</div>
<div v-if="actionDanger != null">
<div>
<button class="danger-button" @click="callParentDangerFunction(datas.id)">
<i class="bi bi-trash"></i> {{ actionDanger }}
</button>
</div>
</div>
</td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: 'DataTable',
props: {
tableDatas: {
type: Object,
required: true
},
tableTitles: {
type: Object,
required: true
},
actionDanger: {
type: String,
required: false,
default: null
},
actionModify: {
type: String,
required: false,
default: null
},
actionDetail: {
type: String,
required: false,
default: null
},
actionSubmit: {
type: String,
required: false,
default: null
},
actionSubmitInput: {
type: String,
required: false,
default: null
},
functionDetail: {
type: Function,
required: false,
},
functionModify: {
type: Function,
required: false,
},
functionDanger: {
type: Function,
required: false,
},
functionSubmit: {
type: Function,
required: false,
},
functionSubmitInput: {
type: Function,
required: false,
}
},
setup(props) {
const callParentDetailFunction = (param1, param2, param3) => {
props.functionDetail(param1, param2, param3);
}
const callParentModifyFunction = (param1, param2) => {
props.functionModify(param1, param2);
}
const callParentDangerFunction = (param1) => {
props.functionDanger(param1);
}
const callParentSubmitFunction = (param1) => {
props.functionSubmit(param1);
}
const callParentSubmitInputFunction = (param1) => {
const param2 = document.getElementById(param1).value;
console.log(param2)
props.functionSubmitInput(param1, param2);
}
return {
callParentDetailFunction,
callParentModifyFunction,
callParentDangerFunction,
callParentSubmitFunction,
callParentSubmitInputFunction
}
}
}
</script>
<style scoped>
.action-column {
display: flex;
}
</style>
src/components/DetailInfo.vue 0 → 100644
View file @ ae491862
<template>
<div class="detail-modal" id="detail-modal">
<div class="modal-content">
<div class="modal-header">
<span>Detail</span>
<span class="close" @click="closeModal()">&times;</span>
</div>
<div class="modal-body">
<div class="modal-icon">
<i class="bi bi-info-circle-fill"></i>
</div>
<div>
<div v-for="data, key in datas" :key="data.id"><span class="modal-title">{{ key }}: </span>{{ data }}</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'DetailInfo',
props: {
datas: {
type: Object,
}
},
methods: {
closeModal() {
document.getElementById('detail-modal').style.display = 'none'
}
}
}
</script>
src/components/HotelFooter.vue 0 → 100644
View file @ ae491862
<template>
<div class="bg-dark text-white py-3">
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<h3>Contact Us</h3>
<ul class="list-unstyled">
<li>123 Main St</li>
<li>Anytown, USA 12345</li>
<li>Phone: (123) 456-7890</li>
<li>Email: info@example.com</li>
</ul>
</div>
<div class="col-12 col-md-6">
<h3>Connect With Us</h3>
<ul class="list-unstyled">
<li><a href="#"><i class="fab fa-facebook"></i> Facebook</a></li>
<li><a href="#"><i class="fab fa-twitter"></i> Twitter</a></li>
<li><a href="#"><i class="fab fa-instagram"></i> Instagram</a></li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'HotelFooter',
}
</script>
src/components/HotelHeader.vue 0 → 100644
View file @ ae491862
<template>
<div class="header">
<h1 class="hotel-name"><a href="/">ABC Hotel</a></h1>
<div v-if="width < 768 & currentView != '/login'">
<i class="bi bi-list" @click="showMenu()"></i>
<div class="side" id="side">
<NavbarHotel />
</div>
</div>
<router-link to="/register" class="register-box" v-show="currentView == '/login'">
Register
</router-link>
</div>
</template>
<script>
import NavbarHotel from './NavbarHotel.vue'
export default {
name: 'HotelHeader',
components: {
NavbarHotel
},
setup() {
const showMenu = () => {
const sidebar = document.getElementById('side')
console.log(sidebar.style.display)
if (sidebar.style.display === '') {
sidebar.style.display = 'block'
} else {
sidebar.style.display = ''
}
console.log(sidebar)
}
return {
showMenu,
}
},
computed: {
currentView() {
return this.$route.path
},
width() {
return window.innerWidth
}
},
}
</script>
<style scoped>
a {
text-decoration: none;
color: rgb(0, 0, 0);
}
@media (min-width: 769px) {
.header {
width: 100%;
background-color: rgb(255, 255, 255);
padding: 10px;
justify-content: space-between;
display: flex;
}
.hotel-name {
font-size: 30px;
}
.register-box {
background-color: rgb(255, 255, 255);
border: 1px solid rgb(0, 0, 0);
border-radius: 5px;
padding: 5px;
font-size: 15px;
cursor: pointer;
}
.register-box:hover {
background-color: rgb(215, 215, 215);
}
}
@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;
}
.side {
display: none;
position: absolute;
right: 0;
}
.register-box {
background-color: rgb(255, 255, 255);
border: 1px solid rgb(0, 0, 0);
border-radius: 5px;
padding: 5px;
font-size: 15px;
cursor: pointer;
}
}
</style>
src/components/LineChart.vue 0 → 100644
View file @ ae491862
<template>
<div>
<div>
<Line :data="chartData" :options="chartOptions" />
</div>
</div>
</template>
<script>
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend,
BarController,
BarElement,
PieController,
ArcElement
} from 'chart.js'
import { Line } from 'vue-chartjs'
ChartJS.register(
CategoryScale,
LinearScale,
PointElement,
LineElement,
BarController,
BarElement,
PieController,
ArcElement,
Title,
Tooltip,
Legend
)
export default {
name: 'LineChart',
components: { Line },
props: {
chartData: {
type: Object,
required: true
},
chartOptions: {
type: Object,
required: true
}
},
}
</script>
\ No newline at end of file
src/components/NavbarHotel.vue 0 → 100644
View file @ ae491862
<template>
<div class="sidebar" id="sidebar">
<div class="nav">
<router-link to="/" class="router-link" v-if="userRole == 'admin'">
<div class="nav-content" :class="{ 'active-route': currentView == '/' }">
<i class="bi bi-clipboard-fill icon"></i>
Dashboard
</div>
</router-link>
<router-link to="/booking" class="router-link">
<div class="nav-content" :class="{ 'active-route': currentView == '/booking' }">
<i class="bi bi-book-fill icon"> </i>
View booking
</div>
</router-link>
<router-link to="/checkin" class="router-link">
<div class="nav-content" :class="{ 'active-route': currentView == '/checkin' }">
<i class="bi bi-bookmark-check-fill icon"></i>
View checkin
</div>
</router-link>
<router-link to="/employee" class="router-link" v-if="userRole == 'admin'">
<div class="nav-content" :class="{ 'active-route': currentView == '/employee' }">
<i class="bi bi-people-fill icon"></i>
View employee
</div>
</router-link>
<router-link to="/room" class="router-link">
<div class="nav-content" :class="{ 'active-route': currentView == '/room' }">
<i class="bi bi-bank2 icon"></i>
View room
</div>
</router-link>
<router-link to="/user-list" class="router-link" v-if="userRole == 'admin'">
<div class="nav-content" :class="{ 'active-route': currentView == '/user-list' }">
<i class="bi bi-person-badge-fill icon"></i>
User list
</div>
</router-link>
<router-link to="/guest" class="router-link" v-if="userRole == 'admin'">
<div class="nav-content" :class="{ 'active-route': currentView == '/guest' }">
<i class="bi bi-person-fill-check icon"></i>
Guest
</div>
</router-link>
</div>
<div class="logout" @click="logout">
<i class="bi bi-box-arrow-right icon"> </i>Logout
</div>
</div>
</template>
<script>
import store from '../store'
export default {
name: 'NavbarHotel',
props: {
closeMenu: {
type: Function,
required: false,
}
},
methods: {
logout() {
localStorage.removeItem('token');
localStorage.removeItem('isLoggedIn');
localStorage.removeItem('role');
this.$router.push('/login');
},
},
//get current route
computed: {
currentView() {
return this.$route.path;
},
userRole() {
console.log(store.state.role);
return store.state.role;
}
}
}
</script>
<style scoped>
.active-route {
background-color: #c0bfbf;
color: #000;
font-size: 15px;
}
.icon {
color: rgb(74, 74, 74);
font-size: 25px;
}
.nav {
background-color: rgb(248, 248, 248);
color: #f0f0f0;
min-height: 80vh;
width: 200px;
display: flex;
flex-direction: column;
}
.nav-content {
padding-left: 20px;
font-size: 15px;
display: flex;
gap: 15px;
padding: 15px;
min-height: 100px;
align-items: center;
}
.nav-content:not(.active-route):hover {
background-color: #eaeaea;
color: #000;
font-size: 15px;
}
.sidebar {
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;
width: 100%;
}
.logout {
cursor: pointer;
padding-left: 20px;
font-size: 15px;
display: flex;
gap: 15px;
padding: 15px;
min-height: 100px;
align-items: center;
}
.logout:hover {
background-color: rgb(247, 108, 105);
color: #fff;
}
@media (max-width:425px) {
.logout {
cursor: pointer;
padding-left: 20px;
font-size: 15px;
display: flex;
gap: 15px;
padding: 15px;
min-height: 100px;
align-items: center;
background-color: rgb(247, 108, 105);
}
}
</style>
src/config/index.js 0 → 100644
View file @ ae491862
import axios from 'axios'
axios.interceptors.request.use(
(config) => {
config.baseURL = 'http://localhost:8000/api'
config.headers.Accept = 'application/json'
const token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
},
(error) => {
return Promise.reject(error)
}
)
axios.interceptors.response.use(
(response) => {
const newToken = response.data.access_token
if (newToken) {
localStorage.setItem('token', newToken)
}
return response
},
(error) => {
return Promise.reject(error)
}
)
export default axios
src/main.js
View file @ ae491862
import { createApp } from 'vue' import { createApp} from 'vue'
import App from './App.vue' import App from './App.vue'
import router from './router'
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-icons/font/bootstrap-icons.css'
import axios from 'axios'
import storeConfig from './store';
import { createStore } from 'vuex';
import './style/CommonStyle.css'
createApp(App).mount('#app')
const app = createApp(App)
const store = createStore(storeConfig)
app.config.globalProperties.$axios = axios.create({
baseURL: 'http://localhost:8000/api'
})
app.use(store)
app.use(router).mount('#app')
src/router/index.js 0 → 100644
View file @ ae491862
import { createRouter, createWebHistory } from 'vue-router'
import DashboardView from '../views/DashboardView.vue'
import BookingView from '../views/BookingView.vue'
import RoomView from '../views/RoomView.vue'
import EmployeeView from '../views/EmployeeView.vue'
import CheckinView from '../views/CheckinView.vue'
import CreateBookingView from '../views/CreateBookingView.vue'
import ModifyView from '../views/ModifyView.vue'
import LoginView from '../views/LoginView.vue'
import register from '../views/RegisterView.vue'
import userList from '../views/UserListView.vue'
import verifyEmail from '../views/VerifyEmail.vue'
import resetPassword from '../views/ResetPasswordView.vue'
import guestView from '../views/GuestView.vue'
const routes = [
{
path: '/',
name: 'Dashboard',
component: DashboardView
},
{
path: '/booking',
name: 'Booking',
component: BookingView
},
{
path: '/room',
name: 'Room',
component: RoomView
},
{
path: '/employee',
name: 'Employee',
component: EmployeeView
},
{
path: '/checkin',
name: 'Checkin',
component: CheckinView
},
{
path: '/create-booking',
name: 'CreateBooking',
component: CreateBookingView
},
{
path: '/modify/:id',
name: 'Modify',
component: ModifyView
},
{
path: '/login',
name: 'Login',
component: LoginView
},
{
path: '/register',
name: 'Register',
component: register
},
{
path: '/user-list',
name: 'UserList',
component: userList
},
{
path: '/verify-email',
name: 'VerifyEmail',
component: verifyEmail
},
{
path: '/reset-password/:token',
name: 'ResetPassword',
component: resetPassword
},
{
path: '/guest',
name: 'Guest',
component: guestView
},
]
routes.forEach(route => {
route.beforeEnter = (to, from, next) => {
const isAuthenticated = localStorage.getItem('isLoggedIn');
const role = localStorage.getItem('role');
if (to.path !== '/login' && to.path !== '/register' && to.path !=='/verify-email' && !to.path.includes('/reset-password/') && !isAuthenticated) {
next('/login');
} else if (role !== 'admin' && to.path == '/' && to.path == '/user-list' && to.path == '/employee' && to.path == '/guest' ) {
next('/booking');
} else {
next();
}
}
})
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
src/store/index.js 0 → 100644
View file @ ae491862
import { createStore } from 'vuex';
const storeConfig = {
state: {
role: localStorage.getItem('role'),
},
mutations: {
setRole(state) {
state.role = localStorage.getItem('role');
},
removeRole(state) {
state.role = null;
},
},
};
const store = createStore(storeConfig)
export default store;
src/style/CommonStyle.css 0 → 100644
View file @ ae491862
.login-form-box {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.login-button {
border: none;
background-color: #93e4c1;
color: white;
border-radius: 3px;
width: 250px;
height: 50px;
margin-top: 10px;
}
.error {
color: red;
font-weight: bold;
}
.detail-button {
border: none;
color: white;
border-radius: 3px;
background-color: #f5d442;
padding: 5px;
}
.detail-button:hover {
background-color: #caa811;
}
.input-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: 350px;
min-height: 400px;
border: none;
border-radius: 3px;
box-shadow: 5px 5px 5px 5px #d5d5d5;
}
.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: 250px;
height: 50px;
}
.table-box {
border: 2px rgb(222, 222, 222) solid;
border-radius: 13px;
padding: 5px;
white-space: nowrap;
overflow-x: scroll;
width: 100%;
}
th {
padding: 10px
}
td {
padding: 10px
}
.fee {
width: 100px;
border: none;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
height: 33px;
}
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;
}
.submit-button {
border: none;
background-color: #93e4c1;
color: white;
padding: 5px;
border-radius: 3px;
}
.success {
color: rgb(79, 236, 55);
font-weight: bold;
}
.submit-button:hover {
background-color: #3baea0;
}
.w-100 {
width: 100%;
}
.danger-button {
border: none;
color: white;
border-radius: 3px;
background-color: #ff8585;
padding: 5px;
}
.danger-button:hover {
background-color: #ff5757;
}
.modify-button {
border: none;
padding: 5px;
color: white;
border-radius: 3px;
background: #18d6dc;
}
.modify-button:hover {
background: #3b77ef;
}
.modal-title {
font-weight: bold;
}
.modal-body {
padding: 15px;
display: flex;
}
.modal-icon {
font-size: 80px;
padding: 20px;
color: #f5d442;
}
.modal-header {
display: flex;
color: white;
font-size: 25px;
font-weight: bold;
width: 100%;
padding: 15px;
background-color: #f5d442;
}
.detail-modal {
display: none;
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
/* 15% from the top and centered */
border: 1px solid #888;
max-width: 800px;
min-height: 300px;
/* Could be more or less, depending on screen size */
}
.close {
color: #ffffff;
font-size: 20px;
display: flex;
flex-direction: column-reverse;
font-weight: bold;
height: 100%
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.title-box {
display: flex;
justify-content: space-between;
margin-bottom: 40px;
}
.title {
order: 0;
font-weight: bold;
}
/* loading effect */
.lds-ring {
width: 35px;
height: 35px;
}
.lds-ring div {
box-sizing: border-box;
position: absolute;
width: 25px;
height: 25px;
margin: 5px;
border: 5px solid #fff;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
src/views/AboutView.vue 0 → 100644
View file @ ae491862
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
src/views/BookingView.vue 0 → 100644
View file @ ae491862
<template>
<div class="body">
<div class="title-box">
<h1 class="title">Booking</h1>
<div class="create-button-box">
<router-link to="/create-booking">
<button class="modify-button">Create booking</button>
</router-link>
</div>
<br />
</div>
<DataTable :tableDatas="bookings" :tableTitles="tableTitles" :actionSubmit="'Checkin'" :actionDanger="'Delete'" :functionSubmit="checkin" :functionDanger="destroy"/>
</div>
</template>
<script>
import { defineComponent, ref } from "vue";
import axios from '../config';
import DataTable from '../components/DataTable.vue'
export default defineComponent({
name: "BookingView",
components: {
DataTable,
},
setup() {
const bookings = ref([]);
const tableTitles = ref(['Booking id', 'Guest name', 'Guest number', 'Arrive date','Leave date', 'Room id', 'Checked'])
/**
* Get all bookings
*
* @return {void}
*/
const getBooking = async () => {
const response = await axios.get("booking");
bookings.value = response.data;
};
/**
* Checkin booking
*
* @param {int} id
*
* @return {void}
*/
const checkin = async (id) => {
console.log(id);
try {
const response = await axios.post("checked", {
id: id,
});
console.log(response.data);
} catch (error) {
console.error(error.response.data);
}
getBooking();
};
/**
* destroy a booking
*
* @param {*} id
*
* @return {void}
*/
const destroy = async (id) => {
console.log(id);
try {
const response = await axios.delete(
"checked/delBook",
{
data: {
id: id,
},
}
);
console.log(response.data);
} catch (error) {
console.error(error.response);
}
getBooking();
};
getBooking();
return {
checkin,
destroy,
bookings,
tableTitles
};
},
});
</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: 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;
}
.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;
}
}
@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
}
.create-button {
border: none;
border-radius: 30px;
padding: 10px;
background: #ff347f;
color: white
}
.create-button-box {
order: 1
}
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 0 → 100644
View file @ ae491862
<template>
<div class="body">
<div class="title-box">
<h1 class="title">Checkin</h1><br>
<div class="">
<button class="modify-button" @click="exportData()">Export data</button>
</div>
</div>
<DataTable :tableDatas="checkins" :tableTitles="tableTitles" :actionModify="'Checkout'" :actionDetail="'View detail'"
:actionDanger="'Delete'" :actionSubmitInput="'Add fee'" :functionModify="checkout" :functionDetail="viewDetail"
:functionDanger="destroy" :functionSubmitInput="addFee"></DataTable>
<DetailInfo :datas="CheckinDetail"></DetailInfo>
</div>
</template>
<script>
import { defineComponent, ref, } from 'vue'
import axios from '../config'
import DetailInfo from '../components/DetailInfo.vue'
import DataTable from '../components/DataTable.vue'
export default defineComponent({
name: 'CheckinView',
components: {
DetailInfo,
DataTable
},
data() {
return {
fee: {}
}
},
setup() {
const tableTitles = ref([
'Checkin ID',
'Booking ID',
'Guest name',
'Checkin Time',
'Checkout Time',
'Fee',
'Total Price'
])
const checkins = ref();
/**
* Get all checkins
*
* @return {void}
*/
const getCheckin = async () => {
const response = await axios.get('checkin')
checkins.value = response.data
}
/**
* Checkin a booking
*
* @param {number} id
* @param {number} bookingId
*
* @return {void}
*/
const checkout = async (id, bookingId) => {
console.log(id, bookingId)
try {
const response = await axios.post('checked/checkout', {
id: id,
bookingId: bookingId
})
console.log(response.data);
} catch (error) {
console.error(error.response.data)
}
getCheckin()
}
/**
* Delete a checkin
*
* @param {number} id
*
* @return {void}
*/
const destroy = async (id) => {
try {
const response = await axios.delete('checked/delCheck', {
data: {
id: id
}
})
console.log(response.data);
} catch (error) {
console.error(error.response.data)
}
getCheckin()
}
/**
* View detail of a checkin
*
* @param {number} employeeId
* @param {number} bookingId
*
* @return {void}
*/
const CheckinDetail = ref([]);
const viewDetail = async (checkinId, bookingId) => {
try {
const response = await axios.post('checkin/checkin-detail', {
checkinId: checkinId,
bookingId: bookingId
})
CheckinDetail.value = {
'Guest name': response.data[0].guest_name,
'Guest number': response.data[0].guest_number,
'Booked time': response.data[0].created_at,
'Employee id': response.data[1].id,
'Employee name': response.data[1].name,
'Employee role': response.data[1].role,
}
console.log(response.data[1])
document.getElementById('detail-modal').style.display = 'block'
} catch (error) {
console.error(error.response.data)
}
}
const closeModal = () => {
document.getElementById('detail-modal').style.display = 'none'
}
/**
* Add fee to a checkin
*
* @param {number} id
*
* @return {void}
*/
const addFee = async (id, fee) => {
try {
console.log(id, fee)
const response = await axios.post('checked/addFee', {
id: id,
fee: fee
})
console.log(response.data)
getCheckin()
} catch (error) {
console.error(error.response.data)
}
}
const exportData = async () => {
try {
axios({
method: 'GET',
url: 'checkin/export',
responseType: 'blob',
}).then(response => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'data.csv'); // Specify the filename
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
} catch (error) {
console.error(error.response.data)
}
}
getCheckin()
return {
checkins,
exportData,
checkout,
destroy,
getCheckin,
viewDetail,
closeModal,
addFee,
tableTitles,
CheckinDetail
}
},
})
</script>
<style scoped>
.test {
max-width: 90%;
}
@media (min-width: 426px) {
.fee {
padding: 5px;
}
.body {
background-color: rgb(240, 240, 240);
display: flex;
flex-direction: column;
padding: 20px;
border-radius: 3px;
height: 100%;
width: 86vw;
}
}
@media (max-width:768px) {
.body {
background-color: rgb(240, 240, 240);
display: flex;
flex-direction: column;
min-height: 100vh;
}
.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;
padding: 5px;
}
}
</style>
src/views/CreateBookingView.vue 0 → 100644
View file @ ae491862
<template>
<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="checkAvailability()" class="">
<div class="input-title-box">
Enter information
</div>
<div class="error">
{{ errorValue }}
</div>
<div class="detail-modal" id="modal">
<div class="modal-content h-400px">
<div class="modal-header">
<span>Create booking</span>
<span class="close" @click="closeModal">&times;</span>
</div>
<div class="file-box mt-4">
<form class="booking-form" @submit.prevent="addBooking">
<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>
<label for="room" class="">Room</label>
<div>
<select class="input" name="room" id="room" v-model="room_id">
<option v-for="room in availableRoom" :key="room.id" :value="room.id" >
{{ room.name }}
</option>
</select>
</div>
<button type="submit" class="submit-button h-50px mt-3 w-100">
<i class="bi bi-check-circle"></i> Submit
</button>
</div>
</form>
</div>
</div>
</div>
<div class="">
<label for="arrive_date" class="">Arrive date</label>
<div class="">
<input type="date" id="arrive_date" v-model="arrive_date" name="arrive_date" class="input">
</div>
</div>
<div class="">
<label for="leave_date" class="">Leave date</label>
<div class="">
<input type="date" id="leave_date" v-model="leave_date" name="leave_date" class="input">
</div>
</div>
<button type="submit" class="submit-button w-100 h-50px mt-3">
<i class="bi bi-check-circle"></i> Check
</button>
</form>
</div>
</div>
</div>
</template>
<script>
import { ref, defineComponent } from 'vue'
import axios from '../config'
import router from '@/router'
export default defineComponent({
name: "CreateBookingView",
setup() {
const guest_name = ref('')
const guest_number = ref('')
const arrive_date = ref('')
const leave_date = ref('')
const room_id = ref('')
const deviceWidth = ref(window.innerWidth)
const availableRoom = ref('')
const err = ref('')
/**
* Add booking
*
* @return {void}
*/
const addBooking = async () => {
try {
const userId = (await axios.post('auth/me')).data.id
await axios.post('booking/create-booking', {
guest_name: guest_name.value,
guest_number: guest_number.value,
arrive_date: arrive_date.value,
room_id: room_id.value,
leave_date: leave_date.value,
guest_id: userId
})
router.push({ name: 'Booking' })
} catch (error) {
err.value = error.response.data.message
console.log(err.value)
}
}
const showAvailableRoom = async (id) => {
try {
let response = await axios.post('booking/show-available-room', {
id
})
availableRoom.value = response.data
} catch (error) {
err.value = error.response.data.message
console.log(err.value)
}
}
const openModal = () => {
document.getElementById('modal').style.display = 'block'
}
const closeModal = () => {
document.getElementById('modal').style.display = 'none'
}
const checkAvailability = async () => {
try {
let response = await axios.post('booking/check-availability', {
arrive_date: arrive_date.value,
leave_date: leave_date.value
})
showAvailableRoom(response.data)
openModal()
} catch (error) {
err.value = error.response.data.message
console.log(err.value)
}
}
return {
guest_name,
guest_number,
arrive_date,
room_id,
leave_date,
addBooking,
deviceWidth,
openModal,
closeModal,
err,
checkAvailability,
availableRoom
}
},
computed: {
errorValue() {
return this.err;
}
}
})
</script>
<style scoped>
.h-50px {
height: 50px;
}
.h-400px {
height: 400px;
}
.booking-form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
.modal-header {
display: flex;
color: white;
font-size: 25px;
font-weight: bold;
width: 100%;
padding: 15px;
background-color: #18d6dc;
}
@media (min-width: 769px) {
.input-title-box {
font-size: 30px;
font-weight: bold;
margin-bottom: 40px;
}
.error {
color: red;
font-weight: bold;
}
.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;
}
}
@media (max-width: 768px) {
.modal-content {
background-color: #fefefe;
margin: 15% auto;
/* 15% from the top and centered */
border: 1px solid #888;
max-width: 800px;
min-height: 500px;
/* Could be more or less, depending on screen size */
}
.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;
}
.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;
}
.error {
color: red;
font-weight: bold;
}
.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;
margin-top: 20px;
}
}
</style>
src/views/DashboardView.vue 0 → 100644
View file @ ae491862
<template>
<div class="body">
<div class="title-box">
<h1 class="title">Dashboard</h1>
</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 class="chart">
<h2>Total booking of each month this year</h2>
<div>
<LineChart v-if="loaded" :chartData="LineChartData" :chartOptions="LineChartOptions" />
</div>
<h2>Interest of each month this year</h2>
<div>
<LineChart v-if="loaded" :chartData="BarChartData" :chartOptions="BarChartOptions" />
</div>
</div>
<div>
<h2>Income after expense</h2>
<div>
<LineChart v-if="loaded" :chartData="PieChartData" :chartOptions="PieChartOptions" />
</div>
</div>
</div>
</template>
<script>
import { defineComponent, ref } from 'vue';
import axios from '../config'
import LineChart from '../components/LineChart.vue'
export default defineComponent({
name: 'DashboardView',
components: {
LineChart
},
data() {
return {
loaded: false,
LineChartData: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
datasets: [
{
label: 'Booking',
data: [],
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1,
},
],
},
LineChartOptions: {
responsive: true,
maintainAspectRatio: true,
scales: {
x: {
title: {
display: true,
text: 'Booking'
},
ticks: {
beginAtZero: true
}
},
y: {
min: 0,
ticks: {
stepSize: 1
},
title: {
display: true,
text: 'Month'
}
},
},
elements: {
point: {
backgroundColor: 'red'
}
}
},
BarChartData: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
datasets: [{
label: 'Income',
data: [],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1,
type: 'bar'
}]
},
BarChartOptions: {
scales: {
x: {
title: {
display: true,
},
ticks: {
beginAtZero: true
}
},
y: {
title: {
display: true,
text: 'Month'
}
}
}
},
PieChartData: {
labels: ['Income', 'Employee salary', 'expense', 'tax'],
datasets: [{
backgroundColor: ['#41B883', '#E46651', '#00D8FF', 'rgb(114,64,109)'],
data: [],
type: 'pie',
labels: ['Income', 'Employee salary', 'expense', 'tax'],
}]
},
//make legend show all 4 labels
PieChartOptions: {
responsive: true,
maintainAspectRatio: true,
}
}
},
setup() {
const tableTitles = ref(['ID', 'Guest Name', 'Guest Number', 'Room ID', 'Checkin time'])
const guestInfos = ref([])
const checkinToday = ref()
const bookingInfos = ref([])
const incomeAndSalary = ref([])
const getData = async () => {
try {
let results = await axios.get('dashboard')
guestInfos.value = results.data.guestInfos
bookingInfos.value = results.data.bookingInfos
} catch (error) {
console.log(error)
}
}
getData()
return {
guestInfos,
bookingInfos,
incomeAndSalary,
tableTitles,
checkinToday
}
},
async mounted() {
this.loaded = false
try {
const bookingThisYear = await axios.get('dashboard/booking-this-year')
this.LineChartData.datasets[0].data = bookingThisYear.data
const interestThisYear = await axios.get('dashboard/interest-this-year')
this.BarChartData.datasets[0].data = interestThisYear.data
const IncomeAndSalary = await axios.get('dashboard/income-this-month')
this.PieChartData.datasets[0].data = IncomeAndSalary.data
this.loaded = true
} catch (e) {
console.error(e)
}
}
})
</script>
<style scoped>
@media (min-width: 426px) {
.body {
background-color: rgb(240, 240, 240);
display: flex;
flex-direction: column;
padding: 20px;
border-radius: 3px;
min-height: 100%;
}
.summary-box {
display: flex;
justify-content: space-evenly;
margin-top: 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
}
.summary-title {
font-size: 10px;
color: rgb(181, 181, 181);
text-align: center;
}
.icon-box {
font-size: 80px;
text-align: center;
}
.money-icon {
color: rgb(0, 255, 0);
}
.checkin-icon {
color: rgb(255, 0, 0);
}
.chart {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 50px;
}
.safe-icon {
color: rgb(252, 255, 64);
}
.summary-value {
font-size: 30px;
font-weight: bold;
text-align: center;
}
}
@media (max-width: 425px) {
.body {
background-color: rgb(240, 240, 240);
display: flex;
flex-direction: column;
min-height: 100vh;
}
.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 0 → 100644
View file @ ae491862
<template>
<div class="body">
<div class="title-box">
<h1 class="title">Employee</h1>
</div>
<DataTable :tableDatas="employees" :tableTitles="tableTitles" />
</div>
</template>
<script>
import { defineComponent } from 'vue'
import DataTable from '@/components/DataTable.vue'
export default defineComponent({
name: 'EmployeeView',
components: {
DataTable
},
data() {
return {
employees: [],
tableTitles: [
'ID',
'Name',
'Role',
'Shift',
'Day off',
'Salary',
'Status'
]
}
},
async mounted() {
let results = await this.$axios.get('employee')
this.employees = results.data
}
})
</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%;
}
}
@media (max-width: 768px) {
.body {
background-color: rgb(240, 240, 240);
display: flex;
flex-direction: column;
min-height: 100vh;
}
}
</style>
src/views/GuestView.vue 0 → 100644
View file @ ae491862
<template>
<div class="body">
<div class="title-box">
<h1 class="title">Guest</h1>
</div>
<div>
<DataTable :tableDatas="checkinToday" :tableTitles="tableTitles"></DataTable>
</div>
</div>
</template>
<script>
import DataTable from '../components/DataTable.vue'
import { ref } from 'vue'
import axios from '../config'
export default {
name: 'GuestView',
components: {
DataTable
},
setup() {
const checkinToday = ref([]);
const tableTitles = ['Guest id', 'Guest name', 'Total booking', 'Email address', 'Booking this month', 'Joined date']
/**
* Get all bookings
*
* @return {void}
*/
const getGuestStatistic = async () => {
const response = await axios.get('guest-statistic')
checkinToday.value = response.data
console.log(response.data)
}
getGuestStatistic()
return {
checkinToday,
tableTitles
}
}
}
</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%;
}
}
</style>
\ No newline at end of file
src/views/LoginView.vue 0 → 100644
View file @ ae491862
<template>
<div class="body">
<form @submit.prevent="submitForm" class="login-form-box">
<div class="input-form">
<div class="input-title">Login</div>
<div class="error">
{{ errors }}
</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" class="login-button">Login</button>
<div class="forgot-password" @click="openImportModal">Forgot password?</div>
</div>
</form>
<div>
</div>
<div class="detail-modal" id="import-modal">
<div class="modal-content">
<div class="modal-header">
<span>Forgot password</span>
<span class="close" @click="closeImportModal">&times;</span>
</div>
<div class="file-box">
<div class="success" :class="{'hidden': success}">Please check your email</div>
<form @submit.prevent="forgotPassword()">
<input type="email" class="form-control form-control-xlg" placeholder="Enter your email" v-model="email">
<button type="submit" class="submit-button w-100 mt-5">
<div class="flex">
<div class="lds-ring loading" :class="{ 'active': isPending }">
<!-- :class="{ 'active': isPending }" -->
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="d-flex align-items-center">
Submit
</div>
</div>
</button>
</form>
</div>
</div>
</div>
</div>
</template>
<script>
import { defineComponent, ref } from 'vue'
import store from '../store';
// import { createStore } from 'vuex';
import axios from '../config'
import router from '../router'
export default defineComponent({
name: 'LoginView',
setup() {
// const store = createStore(storeConfig)
const username = ref('');
const password = ref('');
const errors = ref('');
/**
* Submit form
*
* @return {void}
*/
const submitForm = async () => {
try {
let response = await axios.post('auth/login', {
username: username.value,
password: password.value
})
localStorage.setItem('token', response.data.access_token)
localStorage.setItem('isLoggedIn', true)
router.push('/')
let response2 = await axios.post('auth/me')
const role = response2.data.role
localStorage.setItem('role', role)
store.commit('setRole')
} catch (error) {
errors.value = error.response.data.error
}
}
const email = ref('');
const isPending = ref(true);
const success = ref(true)
const forgotPassword = async () => {
try {
isPending.value = false
let response = await axios.post('/forgot-password', {
email: email.value,
})
console.log(response.data);
} catch (error) {
errors.value = error.response.data.error
} finally {
isPending.value = true
success.value = false
}
}
const openImportModal = () => {
document.getElementById('import-modal').style.display = 'block'
}
const closeImportModal = () => {
document.getElementById('import-modal').style.display = 'none'
}
return {
username,
password,
errors,
submitForm,
openImportModal,
closeImportModal,
email,
forgotPassword,
isPending,
success
};
},
})
</script>
<style scoped>
.active {
visibility: hidden;
}
.flex {
display: flex;
gap: 60px;
flex-direction: row-reverse;
}
.forgot-password:hover {
cursor: pointer;
text-decoration: underline blue;
color: blue;
}
.forgot-password {
font-size: 12px;
margin-top: 10px;
color: rgb(156, 156, 156);
}
.hidden {
display: none;
}
.file-box {
width: 50%;
padding: 30px;
align-self: center;
display: flex;
flex-direction: column;
gap: 50px;
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
/* 15% from the top and centered */
border: 1px solid #888;
max-width: 600px;
min-height: 300px;
/* Could be more or less, depending on screen size */
}
.modal-header {
display: flex;
color: white;
font-size: 25px;
font-weight: bold;
width: 100%;
padding: 15px;
background-color: #18d6dc;
}
.body {
background-color: rgb(240, 240, 240);
display: flex;
flex-direction: column;
padding: 100px;
border-radius: 3px;
min-height: 100vh;
}
</style>
src/views/ModifyView.vue 0 → 100644
View file @ ae491862
<template>
<div class="body">
<div class="title-box">
<h1 class="title">Modify</h1>
</div>
<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="modify-button">Modify</button>
</label>
<input type="text" id="name" name="name" v-model="name" class="input">
</div>
<div class="input-box">
<label for="image_first" class="label">
<span>
First Image
</span>
<button type="button" @click="showInput('image_first')" class="modify-button">Modify</button>
</label>
<input type="file" ref="fileInput" @change="imageFirst" id="image_first" name="image_first"
class="input">
</div>
<div class="input-box">
<label for="image_second" class="label">
<span>
Second Image
</span>
<button type="button" @click="showInput('image_second')" class="modify-button">Modify</button>
</label>
<input type="file" ref="fileInput" @change="imageSecond" id="image_second" name="image_second"
class="input">
</div>
<div class="input-box">
<label for="image_third" class="label">
<span>
Third Image
</span>
<button type="button" @click="showInput('image_third')" class="modify-button">Modify</button>
</label>
<input type="file" ref="fileInput" @change="imageThird" id="image_third" name="image_third"
class="input">
</div>
<div class="input-box">
<label for="type" class="label">
<span>
Type
</span>
<button type="button" @click="showInput('type')" class="modify-button">Modify</button>
</label>
<input type="text" id="type" name="type" v-model="type" class="input">
</div>
<div class="input-box">
<label for="hour_price" class="label">
<span>
Hour Price
</span>
<button type="button" @click="showInput('hour_price')" class="modify-button">Modify</button>
</label>
<input type="text" id="hour_price" name="hour_price" v-model="hour_price" class="input">
</div>
<div class="input-box">
<label for="day_price" class="label">
<span>
Day Price
</span>
<button type="button" @click="showInput('day_price')" class="modify-button">Modify</button>
</label>
<input type="text" id="day_price" name="day_price" v-model="day_price" class="input">
</div>
</div>
<div class="column">
<div class="input-box">
<label for="size" class="label">
<span>
Size
</span>
<button type="button" @click="showInput('size')" class="modify-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="modify-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="modify-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="modify-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="modify-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="modify-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="modify-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 w-100" :class="{ 'mt-3': width <= 425 }">
<i class="bi bi-send">submit</i>
</button>
</div>
</div>
</form>
</div>
</template>
<script>
import { defineComponent, ref } from 'vue'
import axios from '../config'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
export default defineComponent({
name: 'ModifyView',
setup() {
const width = ref(window.innerWidth)
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,
width
}
},
methods: {
//display input field on click
showInput(input) {
console.log(input)
const id = ref(document.getElementById(input));
console.log(id.value.style)
if (id.value.style.display === "") {
id.value.style.display = "block";
} else {
id.value.style.display = "";
}
}
}
})
</script>
<style scoped>
.form-box {
border: 2px rgb(222, 222, 222) solid;
border-radius: 15px;
padding: 5px;
}
.input-box {
border-bottom: 1px solid rgb(178, 178, 178);
}
@media (min-width: 769px) {
.body {
background-color: rgb(240, 240, 240);
display: flex;
flex-direction: column;
padding: 20px;
border-radius: 3px;
min-height: 100%;
}
.input {
display: none;
border: none;
border-radius: 5px;
}
.form {
display: flex;
justify-content: space-between;
}
.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);
}
}
@media (max-width:768px) {
.body {
background-color: rgb(240, 240, 240);
display: flex;
flex-direction: column;
padding: 20px;
border-radius: 3px;
min-height: 100%;
}
.input {
display: none;
border: none;
border-radius: 5px;
width: 100%;
}
.label {
padding: 10px;
border-radius: 5px;
font-size: 13px;
width: 300px;
display: flex;
justify-content: space-between;
color: rgb(178, 178, 178);
}
}
</style>
src/views/RegisterView.vue 0 → 100644
View file @ ae491862
<template>
<div class="body">
<form @submit.prevent="register" class="login-form-box">
<div class="input-form">
<div class="input-title">Register</div>
<div class="success" :class="{'hidden': success}">Registered successfully, please verify your email</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="email" class="input-label">Email</div>
<input type="email" class="input" id="email" name="email" v-model="email">
</div>
<div class="input-box-radio">
<div for="role" class="input-label">Role</div>
<div class="radio">
<div>
<input type="radio" id="admin" name="role" value="admin" v-model="role">
<label for="admin" class="input-label">Admin</label>
</div>
<div>
<input type="radio" id="employee" name="role" value="employee" v-model="role">
<label for="employee" class="input-label">Employee</label>
</div>
</div>
</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>
<div class="input-box">
<div for="confirm-password" class="input-label">Confirm password</div>
<input type="password" class="input" id="confirm_password" name="confirm_password" v-model="confirm_password">
</div>
<button type="submit" class="login-button">
<div class="flex">
<div class="lds-ring loading" :class="{ 'active': isPending }" >
<!-- :class="{ 'active': isPending }" -->
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="d-flex align-items-center">
Register
</div>
</div>
</button>
</div>
</form>
</div>
</template>
<script>
import axios from '../config'
import { ref, defineComponent } from 'vue'
export default defineComponent({
name: 'RegisterView',
setup() {
const username = ref('')
const password = ref('')
const confirm_password = ref('')
const email = ref('')
const errors = ref('')
const role = ref('')
const isPending = ref(true)
const success = ref(true)
/**
* Register
*
* @return {void}
*/
const register = async () => {
try {
isPending.value = false
const response = await axios.post('register', {
username: username.value,
password: password.value,
confirm_password: confirm_password.value,
email: email.value,
role: role.value,
})
console.log(response.data);
success.value = false
}
catch (error) {
errors.value = error.response.data.message
alert(errors.value);
} finally {
isPending.value = true
}
}
return {
username,
password,
confirm_password,
email,
errors,
role,
isPending,
success,
register,
};
}
})
</script>
<style scoped>
.hidden {
display: none;
}
.active {
visibility: hidden;
}
.loading {
font-size: 1px;
}
.body {
background-color: rgb(240, 240, 240);
display: flex;
flex-direction: column;
padding: 100px;
border-radius: 3px;
min-height: 100vh;
}
.input-box-radio {
display: flex;
flex-direction: column;
align-items: baseline;
width: 250px;
}
.flex {
display: flex;
gap: 60px;
flex-direction: row-reverse;
}
.radio {
display: flex;
gap: 50px;
}
</style>
src/views/ResetPasswordView.vue 0 → 100644
View file @ ae491862
<template>
<form @submit.prevent="resetPassword()">
<h2>Reset Password</h2>
<div class="success">
{{ noti }}
</div>
<div>
<label for="email">Email</label>
<input type="email" id="email" name="email" v-model="email" required>
</div>
<div>
<label for="password">New Password</label>
<input type="password" id="password" name="password" v-model="password" required>
</div>
<div>
<label for="confirm-password">Confirm Password</label>
<input type="password" id="confirm-password" name="confirm-password" v-model="confirmPassword" required>
</div>
<div>
<input type="hidden" name="token" :value="token">
</div>
<button type="submit">Reset Password</button>
</form>
</template>
<script>
import router from "@/router";
import axios from "../config";
import { ref } from "vue";
export default {
name: "ResetPasswordView",
setup() {
//get token from url
const token = window.location.href.split("/").pop();
console.log(token);
const email = ref("");
const password = ref("");
const confirmPassword = ref("");
const timer = ref(6)
const noti = ref('')
const resetPassword = async () => {
try {
const response = await axios.post("reset-password", {
token: token,
email: email.value,
password: password.value,
password_confirmation: confirmPassword.value,
});
console.log(response.data);
} catch (error) {
console.log(error.response.data.message);
} finally {
const interval = setInterval(() => {
timer.value -= 1; // Decrease countdown by 1 every second
noti.value = "Change password successfully, redirect to login page in " + timer.value + " seconds";
if (timer.value === 0) {
clearInterval(interval); // Stop the interval when countdown reaches 0
router.push('/'); // Redirect after countdown reaches 0
}
}, 1000);
}
}
return {
token,
email,
password,
confirmPassword,
resetPassword,
timer,
noti
}
}
}
</script>
<style scoped>
form {
width: 700px;
margin: auto;
padding: 20px;
border: 0.5px solid black;
border-radius: 5px;
display: flex;
flex-direction: column;
gap: 20px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
h2 {
text-align: center;
font-weight: bold;
}
div {
margin-bottom: 10px;
}
label {
display: block;
}
input[type="email"],
input[type="password"] {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
}
button[type="submit"] {
display: block;
width: 100%;
padding: 10px;
background-color: rgb(258, 187, 0);
color: white;
border: none;
cursor: pointer;
}
</style>
\ No newline at end of file
src/views/RoomView.vue 0 → 100644
View file @ ae491862
<template>
<div class="body">
<div class="title-box">
<h1 class="title">Room</h1>
<div class="">
<button class="modify-button" @click="openImportModal">Import room</button>
<div class="detail-modal" id="import-modal">
<div class="modal-content">
<div class="modal-header">
<span>Detail</span>
<span class="close" @click="closeImportModal">&times;</span>
</div>
<div class="file-box">
<input class="form-control form-control-lg" type="file" :v-model="fileInput" @change="handleFileUpload" />
<button @click="uploadFile" class="submit-button">Upload</button>
</div>
</div>
</div>
</div>
</div>
<div>
<DataTable :tableDatas="tableData" :tableTitles="tableTitles" :actionModify="'Modify'" :actionDetail="'View detail'"
:functionDetail="viewRoomDetail" :functionModify="modifyRoom" :key="key"></DataTable>
<div>
<DetailInfo :datas="roomInfo"></DetailInfo>
</div>
</div>
</div>
</template>
<script>
import DataTable from '../components/DataTable.vue'
import { ref} from 'vue'
import axios from '../config'
import DetailInfo from '../components/DetailInfo.vue'
import router from '../router'
export default {
name: 'TestingView',
components: {
DataTable,
DetailInfo
},
setup() {
const tableData = ref({})
const roomInfo = ref({})
const modalStatus = ref(false)
// const fileInput = ref(null)
const file = ref(null)
const tableTitles = ref([
'Room ID',
'Room Name',
'Type',
'Hour price',
'Day price',
'Size',
])
const getRooms = async () => {
let results = await axios.get('room')
tableData.value = results.data
}
const modifyRoom = (id) => {
//router push to modify room
router.push('room/modify/' + id)
}
const handleFileUpload = (event) => {
file.value = event.target.files[0];
}
const viewRoomDetail = async (id) => {
let response = await axios.post('room/room-detail', {
id: id
})
roomInfo.value = {
'Id': response.data.id,
'Name': response.data.name,
'Type': response.data.type,
'Hour price': response.data.hour_price,
'Day price': response.data.day_price,
'Status': response.data.status,
'Size': response.data.size,
'Balcony': response.data.balcony,
'View': response.data.view,
'Smoking': response.data.smoking,
'Floor': response.data.floor,
'Bathtub': response.data.bathtub,
}
document.getElementById('detail-modal').style.display = 'block'
}
const openImportModal = () => {
document.getElementById('import-modal').style.display = 'block'
}
const closeImportModal = () => {
document.getElementById('import-modal').style.display = 'none'
}
const uploadFile = async () => {
let formData = new FormData();
formData.append('file', file.value);
await axios.post('/room/storeRoomFile', formData)
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
}).finally(() => {
closeImportModal()
});
getRooms()
}
getRooms()
return {
tableData,
tableTitles,
viewRoomDetail,
handleFileUpload,
roomInfo,
modalStatus,
closeImportModal,
modifyRoom,
openImportModal,
uploadFile,
}
}
}
</script>
<style scoped>
.file-box {
width:50%;
padding:30px;
align-self: center;
display:flex;
flex-direction: column;
gap:50px;
}
.modal-header {
display: flex;
color: white;
font-size: 25px;
font-weight: bold;
width: 100%;
padding: 15px;
background-color: #18d6dc;
}
@media (min-width: 769px) {
.body {
background-color: rgb(240, 240, 240);
display: flex;
flex-direction: column;
padding: 20px;
border-radius: 3px;
min-height: 100%;
}
}
@media (max-width:768px) {
.body {
background-color: rgb(240, 240, 240);
display: flex;
flex-direction: column;
min-height: 100vh;
}
}
</style>
src/views/UserListView.vue 0 → 100644
View file @ ae491862
<template>
<div class="body">
<div class="title-box">
<h1 class=title>List of user</h1>
</div>
<div>
<DataTable :tableDatas="users" :tableTitles="tableTitles" :actionDanger="'Delete'" :functionDanger="deleteUser"></DataTable>
</div>
</div>
</template>
<script>
import { defineComponent, ref } from 'vue'
import axios from '../config'
import DataTable from '../components/DataTable.vue'
export default defineComponent({
name: 'UserListView',
components: {
DataTable
},
setup() {
const users = ref([]);
const tableTitles = ref(['User id', 'Username', 'email', 'User role'])
/**
* Get all users
*
* @return {void}
*/
const getUser = async () => {
const response = await axios.get('userlist')
users.value = response.data
}
/**
* Delete a user
*
* @param {int} id
*
* @return {void}
*/
const deleteUser = async (id) => {
console.log(id)
try {
const response = await axios.delete('userlist/del', {
data: {
id: id,
},
})
console.log(response.data)
getUser()
} catch (error) {
console.error(error.response.data)
}
}
getUser()
return {
users,
deleteUser,
tableTitles
}
},
})
</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%;
}
.fee-box {
display: flex;
}
.fee {
width: 100px;
border: none;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
}
@media (max-width: 768px) {
.body {
background-color: rgb(240, 240, 240);
display: flex;
flex-direction: column;
min-height: 100vh;
}
.danger-button {
border: none;
border-radius: 20px;
background: #ff8585;
color: white;
}
}
</style>
src/views/VerifyEmail.vue 0 → 100644
View file @ ae491862
<template>
<div class="body">
<div class="content">
<div class="text">
<div class="icon">
<i class="bi bi-envelope-check-fill"></i>
</div>
<h1>Email verification</h1>
<div>{{noti}} </div>
</div>
</div>
</div>
</template>
<script>
import { ref } from 'vue'
import router from '@/router'
export default {
name: 'VerifyEmail',
setup() {
const timer = ref(6); // Countdown timer
const noti = ref()
const interval = setInterval(() => {
timer.value -= 1; // Decrease countdown by 1 every second
noti.value = "You have been verified, redirect to login page in " + timer.value + " seconds";
if (timer.value === 0) {
clearInterval(interval); // Stop the interval when countdown reaches 0
router.push('/'); // Redirect after countdown reaches 0
}
}, 1000);
return {
noti,
timer
}
}
}
</script>
<style scoped>
.body {
background-color: rgb(240, 240, 240);
display: flex;
flex-direction: column;
padding: 20px;
border-radius: 3px;
height: 100vh;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
}
.icon {
font-size: 100px;
color: #93e4c1;
}
h1 {
font-size: 50px;
font-weight: bold;
}
.text {
margin-top: 100px;
padding: 100px;
text-align: center;
background-color: white;
}
</style>
\ No newline at end of file
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