mirror of
https://github.com/creativetimofficial/vue-material-kit.git
synced 2025-05-24 05:24:21 +08:00
update status room
This commit is contained in:
kamoa457
parent
3d0327af01
commit
e076eb8611
@ -9,6 +9,7 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@popperjs/core": "2.11.5",
|
"@popperjs/core": "2.11.5",
|
||||||
|
"@trevoreyre/autocomplete-vue": "^2.4.1",
|
||||||
"bootstrap": "5.1.3",
|
"bootstrap": "5.1.3",
|
||||||
"pinia": "2.0.14",
|
"pinia": "2.0.14",
|
||||||
"prismjs": "1.28.0",
|
"prismjs": "1.28.0",
|
||||||
|
|||||||
@ -14,6 +14,7 @@ Coded by www.creative-tim.com
|
|||||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||||
*/
|
*/
|
||||||
import { RouterView } from "vue-router";
|
import { RouterView } from "vue-router";
|
||||||
|
import 'vue-select/dist/vue-select.css';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|||||||
@ -23,6 +23,7 @@
|
|||||||
@import "variables/social-buttons";
|
@import "variables/social-buttons";
|
||||||
@import "variables/breadcrumb";
|
@import "variables/breadcrumb";
|
||||||
|
|
||||||
|
|
||||||
// Mixin
|
// Mixin
|
||||||
@import "mixins/mixins";
|
@import "mixins/mixins";
|
||||||
|
|
||||||
|
|||||||
@ -2,15 +2,18 @@ import { createApp } from "vue";
|
|||||||
import { createPinia } from "pinia";
|
import { createPinia } from "pinia";
|
||||||
import App from "./App.vue";
|
import App from "./App.vue";
|
||||||
import router from "./router";
|
import router from "./router";
|
||||||
|
import '@trevoreyre/autocomplete-vue/dist/style.css'
|
||||||
|
|
||||||
// Nucleo Icons
|
// Nucleo Icons
|
||||||
import "./assets/css/nucleo-icons.css";
|
import "./assets/css/nucleo-icons.css";
|
||||||
import "./assets/css/nucleo-svg.css";
|
import "./assets/css/nucleo-svg.css";
|
||||||
|
|
||||||
import materialKit from "./material-kit";
|
import materialKit from "./material-kit";
|
||||||
|
import vSelect from 'vue-select'
|
||||||
const app = createApp(App);
|
const app = createApp(App);
|
||||||
|
|
||||||
|
|
||||||
|
app.component('v-select', vSelect)
|
||||||
app.use(createPinia());
|
app.use(createPinia());
|
||||||
app.use(router);
|
app.use(router);
|
||||||
app.use(materialKit);
|
app.use(materialKit);
|
||||||
|
|||||||
@ -24,6 +24,8 @@ import ElProgressBars from "../layouts/sections/elements/progress-bars/ProgressB
|
|||||||
import ElToggles from "../layouts/sections/elements/toggles/TogglesView.vue";
|
import ElToggles from "../layouts/sections/elements/toggles/TogglesView.vue";
|
||||||
import ElTypography from "../layouts/sections/elements/typography/TypographyView.vue";
|
import ElTypography from "../layouts/sections/elements/typography/TypographyView.vue";
|
||||||
import RoomView from "../views/Restroom/RoomView.vue"
|
import RoomView from "../views/Restroom/RoomView.vue"
|
||||||
|
import DetailRoom from "../views/Restroom/DetailRoomPage.vue"
|
||||||
|
import UpdateRoom from "../views/Restroom/UpdateRoom.vue"
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
history: createWebHistory(import.meta.env.BASE_URL),
|
history: createWebHistory(import.meta.env.BASE_URL),
|
||||||
routes: [
|
routes: [
|
||||||
@ -37,6 +39,21 @@ const router = createRouter({
|
|||||||
name: "room",
|
name: "room",
|
||||||
component: RoomView,
|
component: RoomView,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/room",
|
||||||
|
name: "room",
|
||||||
|
component: RoomView,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/room/detail/:id',
|
||||||
|
name: 'DetailRoom',
|
||||||
|
component: DetailRoom,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/room/update/:id',
|
||||||
|
name: 'updateRoom',
|
||||||
|
component: UpdateRoom,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: "/pages/landing-pages/about-us",
|
path: "/pages/landing-pages/about-us",
|
||||||
name: "about",
|
name: "about",
|
||||||
|
|||||||
219
src/views/Restroom/DetailRoomPage.vue
Normal file
219
src/views/Restroom/DetailRoomPage.vue
Normal file
@ -0,0 +1,219 @@
|
|||||||
|
<script setup>
|
||||||
|
import { onMounted } from "vue";
|
||||||
|
|
||||||
|
//image
|
||||||
|
import image from "@/assets/img/illustrations/illustration-signin.jpg";
|
||||||
|
|
||||||
|
//material components
|
||||||
|
import MaterialInput from "@/components/MaterialInput.vue";
|
||||||
|
|
||||||
|
// material-input
|
||||||
|
import setMaterialInput from "@/assets/js/material-input";
|
||||||
|
onMounted(() => {
|
||||||
|
setMaterialInput();
|
||||||
|
});
|
||||||
|
const listRoom = [
|
||||||
|
{ title: "ตึก 1" },
|
||||||
|
{ title: "ตึก 2" },
|
||||||
|
{ title: "ตึก 3" },
|
||||||
|
{ title: "ตึก 4" },
|
||||||
|
{ title: "ตึก 5" },
|
||||||
|
{ title: "ตึก 6" },
|
||||||
|
{ title: "ตึก 7" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const NoRoom = [
|
||||||
|
{ title: "ชั้น 1" },
|
||||||
|
{ title: "ชั้น 2" },
|
||||||
|
{ title: "ชั้น 3" },
|
||||||
|
{ title: "ชั้น 4" },
|
||||||
|
{ title: "ชั้น 5" },
|
||||||
|
{ title: "ชั้น 6" },
|
||||||
|
{ title: "ชั้น 7" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const landingColumns = [
|
||||||
|
{
|
||||||
|
title: "ห้อง 1",
|
||||||
|
dataIndex: "1",
|
||||||
|
status: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ห้อง 2",
|
||||||
|
dataIndex: "2",
|
||||||
|
status: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ห้อง 3",
|
||||||
|
dataIndex: "3",
|
||||||
|
status: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ห้อง 4",
|
||||||
|
dataIndex: "4",
|
||||||
|
status: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ห้อง 5",
|
||||||
|
dataIndex: "5",
|
||||||
|
status: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ห้อง 6",
|
||||||
|
dataIndex: "6",
|
||||||
|
status: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ห้อง 7",
|
||||||
|
dataIndex: "7",
|
||||||
|
status: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ห้อง 8",
|
||||||
|
dataIndex: "8",
|
||||||
|
status: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ห้อง 9",
|
||||||
|
dataIndex: "9",
|
||||||
|
status: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ห้อง 10",
|
||||||
|
dataIndex: "10",
|
||||||
|
status: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ห้อง 11",
|
||||||
|
dataIndex: "11",
|
||||||
|
status: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ห้อง 12",
|
||||||
|
dataIndex: "12",
|
||||||
|
status: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ห้อง 13",
|
||||||
|
dataIndex: "13",
|
||||||
|
status: false,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<section>
|
||||||
|
<div class="page-header min-vh-45">
|
||||||
|
<div class="container">
|
||||||
|
<!-- d-flex justify-content-between -->
|
||||||
|
<h4>รายละเอียดห้อง</h4>
|
||||||
|
<div class="row pt-4">
|
||||||
|
<div class="col-8">
|
||||||
|
<div class="nav-item dropdown dropdown-hover mx-2">
|
||||||
|
<a
|
||||||
|
role="button"
|
||||||
|
class="nav-link ps-2 d-flex cursor-pointer align-items-center"
|
||||||
|
id="dropdownMenuPages"
|
||||||
|
data-bs-toggle="dropdown"
|
||||||
|
aria-expanded="false"
|
||||||
|
>
|
||||||
|
<i class="material-icons opacity-6 me-2 text-md">home</i>
|
||||||
|
ตึก
|
||||||
|
</a>
|
||||||
|
<div
|
||||||
|
class="dropdown-menu dropdown-menu-animation ms-n3 dropdown-md p-3 border-radius-xl mt-0 mt-lg-3"
|
||||||
|
aria-labelledby="dropdownMenuPages"
|
||||||
|
>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12 px-4 py-2">
|
||||||
|
<div class="row">
|
||||||
|
<div class="position-relative">
|
||||||
|
<p
|
||||||
|
class="dropdown-item border-radius-md"
|
||||||
|
v-for="(item, index) in listRoom"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<span>{{ item?.title }}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-4">
|
||||||
|
<div>
|
||||||
|
<MaterialInput
|
||||||
|
class="input-group-dynamic w-100"
|
||||||
|
icon="search"
|
||||||
|
type="text"
|
||||||
|
placeholder="Search"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-center pt-4">
|
||||||
|
<div v-for="(item, index) in NoRoom" :key="index">
|
||||||
|
<p class="text-start mt-4">
|
||||||
|
<a
|
||||||
|
class="btn btn-primary"
|
||||||
|
data-bs-toggle="collapse"
|
||||||
|
href="#collapseExample"
|
||||||
|
role="button"
|
||||||
|
aria-expanded="false"
|
||||||
|
aria-controls="collapseExample"
|
||||||
|
>
|
||||||
|
{{ item?.title }}
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<div class="collapse show" id="collapseExample" aria-expanded="true">
|
||||||
|
<div>
|
||||||
|
<div class="row row-cols-auto" :style="{ '--bs-gutter-x': '0.5rem' }">
|
||||||
|
<div class="col" v-for="(item, index) in landingColumns" :key="index">
|
||||||
|
<div
|
||||||
|
class="card mb-2"
|
||||||
|
v-bind:class="{ 'bg-red': item?.status, 'bg-green': !item?.status }"
|
||||||
|
:style="{ width: `110px` }"
|
||||||
|
>
|
||||||
|
<div class="card-body">
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
text-align: right;
|
||||||
|
margin-top: -10px;
|
||||||
|
margin-right: -10px;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<a href="#" class="card-link"
|
||||||
|
><span class="material-icons" style="color: #fff">
|
||||||
|
edit
|
||||||
|
</span></a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<p class="card-title">{{ item?.title }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
<style>
|
||||||
|
.bg-green {
|
||||||
|
background: #567b57 !important;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.bg-red {
|
||||||
|
background: #d24c4a !important;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.bg-waring {
|
||||||
|
background: #d1d3d5 !important;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,117 +1,259 @@
|
|||||||
<script setup>
|
<script>
|
||||||
import { onMounted } from "vue";
|
|
||||||
|
|
||||||
//example components
|
|
||||||
import DefaultNavbar from "@/examples/navbars/NavbarDefault.vue";
|
|
||||||
import DefaultFooter from "@/examples/footers/FooterDefault.vue";
|
|
||||||
|
|
||||||
//image
|
|
||||||
import image from "@/assets/img/illustrations/illustration-signin.jpg";
|
|
||||||
|
|
||||||
//material components
|
|
||||||
import MaterialInput from "@/components/MaterialInput.vue";
|
import MaterialInput from "@/components/MaterialInput.vue";
|
||||||
import MaterialTextArea from "@/components/MaterialTextArea.vue";
|
|
||||||
import MaterialButton from "@/components/MaterialButton.vue";
|
import MaterialButton from "@/components/MaterialButton.vue";
|
||||||
|
|
||||||
// material-input
|
const listRoom = [
|
||||||
import setMaterialInput from "@/assets/js/material-input";
|
{ title: "ตึก 1" },
|
||||||
onMounted(() => {
|
{ title: "ตึก 2" },
|
||||||
setMaterialInput();
|
{ title: "ตึก 3" },
|
||||||
});
|
{ title: "ตึก 4" },
|
||||||
|
{ title: "ตึก 5" },
|
||||||
|
{ title: "ตึก 6" },
|
||||||
|
{ title: "ตึก 7" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const NoRoom = [
|
||||||
|
{ title: "ชั้น 1" },
|
||||||
|
{ title: "ชั้น 2" },
|
||||||
|
{ title: "ชั้น 3" },
|
||||||
|
{ title: "ชั้น 4" },
|
||||||
|
{ title: "ชั้น 5" },
|
||||||
|
{ title: "ชั้น 6" },
|
||||||
|
{ title: "ชั้น 7" },
|
||||||
|
];
|
||||||
|
|
||||||
const landingColumns = [
|
const landingColumns = [
|
||||||
{
|
{
|
||||||
title: "ห้อง 1",
|
title: "ห้อง 1",
|
||||||
dataIndex: "1",
|
dataIndex: "1",
|
||||||
status: true
|
status: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "ห้อง 2",
|
title: "ห้อง 2",
|
||||||
dataIndex: "2",
|
dataIndex: "2",
|
||||||
status: false
|
status: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "ห้อง 3",
|
title: "ห้อง 3",
|
||||||
dataIndex: "3",
|
dataIndex: "3",
|
||||||
status: true
|
status: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "ห้อง 4",
|
title: "ห้อง 4",
|
||||||
dataIndex: "4",
|
dataIndex: "4",
|
||||||
status: true
|
status: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "ห้อง 5",
|
title: "ห้อง 5",
|
||||||
dataIndex: "5",
|
dataIndex: "5",
|
||||||
status: false
|
status: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "ห้อง 6",
|
title: "ห้อง 6",
|
||||||
dataIndex: "6",
|
dataIndex: "6",
|
||||||
status: false
|
status: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "ห้อง 7",
|
title: "ห้อง 7",
|
||||||
dataIndex: "7",
|
dataIndex: "7",
|
||||||
status: true
|
status: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "ห้อง 8",
|
title: "ห้อง 8",
|
||||||
dataIndex: "8",
|
dataIndex: "8",
|
||||||
status: false
|
status: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "ห้อง 9",
|
title: "ห้อง 9",
|
||||||
dataIndex: "9",
|
dataIndex: "9",
|
||||||
status: false
|
status: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "ห้อง 10",
|
title: "ห้อง 10",
|
||||||
dataIndex: "10",
|
dataIndex: "10",
|
||||||
status: false
|
status: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "ห้อง 11",
|
title: "ห้อง 11",
|
||||||
dataIndex: "11",
|
dataIndex: "11",
|
||||||
status: true
|
status: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "ห้อง 12",
|
title: "ห้อง 12",
|
||||||
dataIndex: "12",
|
dataIndex: "12",
|
||||||
status: false
|
status: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "ห้อง 13",
|
title: "ห้อง 13",
|
||||||
dataIndex: "13",
|
dataIndex: "13",
|
||||||
status: false
|
status: false,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
MaterialInput,
|
||||||
|
MaterialButton,
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
return {
|
||||||
|
listRoom,
|
||||||
|
NoRoom,
|
||||||
|
landingColumns,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value: { name: "Vue.js", language: "JavaScript" },
|
||||||
|
options: [
|
||||||
|
{ label: "Vue.js", value: "JavaScript" },
|
||||||
|
{ label: "Rails", value: "Ruby" },
|
||||||
|
{ label: "Sinatra", value: "Ruby" },
|
||||||
|
{ label: "Laravel", value: "PHP" },
|
||||||
|
{ label: "Phoenix", value: "Elixir" },
|
||||||
|
],
|
||||||
|
selectedColor: '',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
selectedColor: function (newValue) {
|
||||||
|
// this.updateColor(newValue)
|
||||||
|
console.log(newValue);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
changedLabel(event) {
|
||||||
|
console.log(event);
|
||||||
|
// this.selected = event;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="container position-sticky z-index-sticky top-0">
|
<section>
|
||||||
|
<div class="page-header min-vh-45">
|
||||||
|
<div class="container">
|
||||||
|
<!-- d-flex justify-content-between -->
|
||||||
|
<div class="row pt-4">
|
||||||
|
<div class="col-8">
|
||||||
|
<div class="nav-item dropdown dropdown-hover mx-2">
|
||||||
|
<a
|
||||||
|
role="button"
|
||||||
|
class="nav-link ps-2 d-flex cursor-pointer align-items-center"
|
||||||
|
id="dropdownMenuPages"
|
||||||
|
data-bs-toggle="dropdown"
|
||||||
|
aria-expanded="false"
|
||||||
|
>
|
||||||
|
<i class="material-icons opacity-6 me-2 text-md">home</i>
|
||||||
|
ตึก
|
||||||
|
</a>
|
||||||
|
<div
|
||||||
|
class="dropdown-menu dropdown-menu-animation ms-n3 dropdown-md p-3 border-radius-xl mt-0 mt-lg-3"
|
||||||
|
aria-labelledby="dropdownMenuPages"
|
||||||
|
>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12">
|
<div class="col-12 px-4 py-2">
|
||||||
<DefaultNavbar
|
<div class="row">
|
||||||
:sticky="true"
|
<div class="position-relative">
|
||||||
:action="{
|
<p
|
||||||
route: 'https://www.creative-tim.com/product/vue-material-kit-pro',
|
class="dropdown-item border-radius-md"
|
||||||
color: 'bg-gradient-success',
|
v-for="(item, index) in listRoom"
|
||||||
label: 'Buy Now',
|
:key="index"
|
||||||
}"
|
>
|
||||||
|
<span>{{ item?.title }}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-4">
|
||||||
|
<div>
|
||||||
|
<MaterialInput
|
||||||
|
class="input-group-dynamic w-100"
|
||||||
|
icon="search"
|
||||||
|
type="text"
|
||||||
|
placeholder="Search"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<section>
|
|
||||||
<div class="page-header min-vh-100">
|
<div class="text-center pt-4">
|
||||||
<div class="container">
|
<div v-for="(item, index) in NoRoom" :key="index">
|
||||||
<div class=" text-center">
|
<p class="text-start mt-4">
|
||||||
|
<MaterialButton
|
||||||
|
variant="outline"
|
||||||
|
color="success"
|
||||||
|
data-bs-toggle="collapse"
|
||||||
|
href="#collapseExample"
|
||||||
|
aria-expanded="false"
|
||||||
|
aria-controls="collapseExample"
|
||||||
|
>{{ item?.title }}</MaterialButton
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
<div class="collapse show" id="collapseExample" aria-expanded="true">
|
||||||
|
<div>
|
||||||
<div class="row row-cols-auto" :style="{ '--bs-gutter-x': '0.5rem' }">
|
<div class="row row-cols-auto" :style="{ '--bs-gutter-x': '0.5rem' }">
|
||||||
<div class="col" v-for="(item, index) in landingColumns" :key="index">
|
<div class="col" v-for="(item, index) in landingColumns" :key="index">
|
||||||
<div class="card mb-2" v-bind:class="{'bg-red': item?.status, 'bg-green': !item?.status}" :style="{ width: `110px`, }">
|
<div
|
||||||
|
class="card mb-2"
|
||||||
|
v-bind:class="{ 'bg-red': item?.status, 'bg-green': !item?.status }"
|
||||||
|
:style="{ width: `110px` }"
|
||||||
|
>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<p class="card-title " >{{ item?.title }}</p>
|
<div
|
||||||
<a href="#" class="card-link"><i class="bi bi-pencil-square"></i></a>
|
style="
|
||||||
|
text-align: right;
|
||||||
|
margin-top: -10px;
|
||||||
|
margin-right: -10px;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
v-if="item?.status"
|
||||||
|
:href="`/room/update/${item?.dataIndex}`"
|
||||||
|
class="card-link"
|
||||||
|
><span
|
||||||
|
v-if="item?.status"
|
||||||
|
class="material-icons"
|
||||||
|
style="color: #fff"
|
||||||
|
>
|
||||||
|
edit
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
v-if="!item?.status"
|
||||||
|
class="material-icons"
|
||||||
|
style="color: #fff"
|
||||||
|
>
|
||||||
|
add
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
style="cursor: pointer"
|
||||||
|
data-bs-toggle="modal"
|
||||||
|
data-bs-target="#staticBackdrop"
|
||||||
|
v-if="!item?.status"
|
||||||
|
class="card-link"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
v-if="!item?.status"
|
||||||
|
class="material-icons"
|
||||||
|
style="color: #fff"
|
||||||
|
>
|
||||||
|
add
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<p class="card-title">
|
||||||
|
<a
|
||||||
|
:href="`/room/detail/${item?.dataIndex}`"
|
||||||
|
class="text-white"
|
||||||
|
>{{ item?.title }}</a
|
||||||
|
>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -119,8 +261,44 @@ const landingColumns = [
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Modal -->
|
||||||
|
<div
|
||||||
|
class="modal fade"
|
||||||
|
id="staticBackdrop"
|
||||||
|
data-bs-backdrop="static"
|
||||||
|
data-bs-keyboard="false"
|
||||||
|
tabindex="-1"
|
||||||
|
aria-labelledby="staticBackdropLabel"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<div class="modal-dialog modal-dialog-centered">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="staticBackdropLabel">เลือกผู้เช่าห้องพัก</h5>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn-close"
|
||||||
|
data-bs-dismiss="modal"
|
||||||
|
aria-label="Close"
|
||||||
|
></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<v-select :options="options" v-model="selectedColor"></v-select>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
|
||||||
|
ปิดหน้าต่าง
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-primary">บันทึก</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
<style>
|
<style>
|
||||||
.bg-green {
|
.bg-green {
|
||||||
|
|||||||
219
src/views/Restroom/UpdateRoom.vue
Normal file
219
src/views/Restroom/UpdateRoom.vue
Normal file
@ -0,0 +1,219 @@
|
|||||||
|
<script setup>
|
||||||
|
import { onMounted } from "vue";
|
||||||
|
|
||||||
|
//image
|
||||||
|
import image from "@/assets/img/illustrations/illustration-signin.jpg";
|
||||||
|
|
||||||
|
//material components
|
||||||
|
import MaterialInput from "@/components/MaterialInput.vue";
|
||||||
|
|
||||||
|
// material-input
|
||||||
|
import setMaterialInput from "@/assets/js/material-input";
|
||||||
|
onMounted(() => {
|
||||||
|
setMaterialInput();
|
||||||
|
});
|
||||||
|
const listRoom = [
|
||||||
|
{ title: "ตึก 1" },
|
||||||
|
{ title: "ตึก 2" },
|
||||||
|
{ title: "ตึก 3" },
|
||||||
|
{ title: "ตึก 4" },
|
||||||
|
{ title: "ตึก 5" },
|
||||||
|
{ title: "ตึก 6" },
|
||||||
|
{ title: "ตึก 7" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const NoRoom = [
|
||||||
|
{ title: "ชั้น 1" },
|
||||||
|
{ title: "ชั้น 2" },
|
||||||
|
{ title: "ชั้น 3" },
|
||||||
|
{ title: "ชั้น 4" },
|
||||||
|
{ title: "ชั้น 5" },
|
||||||
|
{ title: "ชั้น 6" },
|
||||||
|
{ title: "ชั้น 7" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const landingColumns = [
|
||||||
|
{
|
||||||
|
title: "ห้อง 1",
|
||||||
|
dataIndex: "1",
|
||||||
|
status: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ห้อง 2",
|
||||||
|
dataIndex: "2",
|
||||||
|
status: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ห้อง 3",
|
||||||
|
dataIndex: "3",
|
||||||
|
status: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ห้อง 4",
|
||||||
|
dataIndex: "4",
|
||||||
|
status: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ห้อง 5",
|
||||||
|
dataIndex: "5",
|
||||||
|
status: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ห้อง 6",
|
||||||
|
dataIndex: "6",
|
||||||
|
status: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ห้อง 7",
|
||||||
|
dataIndex: "7",
|
||||||
|
status: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ห้อง 8",
|
||||||
|
dataIndex: "8",
|
||||||
|
status: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ห้อง 9",
|
||||||
|
dataIndex: "9",
|
||||||
|
status: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ห้อง 10",
|
||||||
|
dataIndex: "10",
|
||||||
|
status: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ห้อง 11",
|
||||||
|
dataIndex: "11",
|
||||||
|
status: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ห้อง 12",
|
||||||
|
dataIndex: "12",
|
||||||
|
status: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ห้อง 13",
|
||||||
|
dataIndex: "13",
|
||||||
|
status: false,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<section>
|
||||||
|
<div class="page-header min-vh-45">
|
||||||
|
<div class="container">
|
||||||
|
<!-- d-flex justify-content-between -->
|
||||||
|
<h4>แก้รายละเอียดห้อง</h4>
|
||||||
|
<div class="row pt-4">
|
||||||
|
<div class="col-8">
|
||||||
|
<div class="nav-item dropdown dropdown-hover mx-2">
|
||||||
|
<a
|
||||||
|
role="button"
|
||||||
|
class="nav-link ps-2 d-flex cursor-pointer align-items-center"
|
||||||
|
id="dropdownMenuPages"
|
||||||
|
data-bs-toggle="dropdown"
|
||||||
|
aria-expanded="false"
|
||||||
|
>
|
||||||
|
<i class="material-icons opacity-6 me-2 text-md">home</i>
|
||||||
|
ตึก
|
||||||
|
</a>
|
||||||
|
<div
|
||||||
|
class="dropdown-menu dropdown-menu-animation ms-n3 dropdown-md p-3 border-radius-xl mt-0 mt-lg-3"
|
||||||
|
aria-labelledby="dropdownMenuPages"
|
||||||
|
>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12 px-4 py-2">
|
||||||
|
<div class="row">
|
||||||
|
<div class="position-relative">
|
||||||
|
<p
|
||||||
|
class="dropdown-item border-radius-md"
|
||||||
|
v-for="(item, index) in listRoom"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<span>{{ item?.title }}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-4">
|
||||||
|
<div>
|
||||||
|
<MaterialInput
|
||||||
|
class="input-group-dynamic w-100"
|
||||||
|
icon="search"
|
||||||
|
type="text"
|
||||||
|
placeholder="Search"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-center pt-4">
|
||||||
|
<div v-for="(item, index) in NoRoom" :key="index">
|
||||||
|
<p class="text-start mt-4">
|
||||||
|
<a
|
||||||
|
class="btn btn-primary"
|
||||||
|
data-bs-toggle="collapse"
|
||||||
|
href="#collapseExample"
|
||||||
|
role="button"
|
||||||
|
aria-expanded="false"
|
||||||
|
aria-controls="collapseExample"
|
||||||
|
>
|
||||||
|
{{ item?.title }}
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<div class="collapse show" id="collapseExample" aria-expanded="true">
|
||||||
|
<div>
|
||||||
|
<div class="row row-cols-auto" :style="{ '--bs-gutter-x': '0.5rem' }">
|
||||||
|
<div class="col" v-for="(item, index) in landingColumns" :key="index">
|
||||||
|
<div
|
||||||
|
class="card mb-2"
|
||||||
|
v-bind:class="{ 'bg-red': item?.status, 'bg-green': !item?.status }"
|
||||||
|
:style="{ width: `110px` }"
|
||||||
|
>
|
||||||
|
<div class="card-body">
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
text-align: right;
|
||||||
|
margin-top: -10px;
|
||||||
|
margin-right: -10px;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<a href="#" class="card-link"
|
||||||
|
><span class="material-icons" style="color: #fff">
|
||||||
|
edit
|
||||||
|
</span></a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<p class="card-title">{{ item?.title }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
<style>
|
||||||
|
.bg-green {
|
||||||
|
background: #567b57 !important;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.bg-red {
|
||||||
|
background: #d24c4a !important;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.bg-waring {
|
||||||
|
background: #d1d3d5 !important;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user