xclele/vue-material-kit
1
0
Fork 0
mirror of https://github.com/creativetimofficial/vue-material-kit.git synced 2025-05-23 04:04:22 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

update status room

Browse Source
This commit is contained in:
kamoa457 2023-10-15 18:30:22 +07:00
parent 3d0327af01
commit e076eb8611
8 changed files with 698 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -9,6 +9,7 @@
},
"dependencies": {
"@popperjs/core": "2.11.5",
"@trevoreyre/autocomplete-vue": "^2.4.1",
"bootstrap": "5.1.3",
"pinia": "2.0.14",
"prismjs": "1.28.0",

1
src/App.vue
View File

@ -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.
*/
import { RouterView } from "vue-router";
import 'vue-select/dist/vue-select.css';
</script>
<template>

1
src/assets/scss/material-kit/theme.scss
View File

@ -23,6 +23,7 @@
@import "variables/social-buttons";
@import "variables/breadcrumb";
// Mixin
@import "mixins/mixins";

5
src/main.js
View File

@ -2,15 +2,18 @@ import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import router from "./router";
import '@trevoreyre/autocomplete-vue/dist/style.css'
// Nucleo Icons
import "./assets/css/nucleo-icons.css";
import "./assets/css/nucleo-svg.css";
import materialKit from "./material-kit";
import vSelect from 'vue-select'
const app = createApp(App);
app.component('v-select', vSelect)
app.use(createPinia());
app.use(router);
app.use(materialKit);

17
src/router/index.js
View File

@ -24,6 +24,8 @@ import ElProgressBars from "../layouts/sections/elements/progress-bars/ProgressB
import ElToggles from "../layouts/sections/elements/toggles/TogglesView.vue";
import ElTypography from "../layouts/sections/elements/typography/TypographyView.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({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
@ -37,6 +39,21 @@ const router = createRouter({
name: "room",
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",
name: "about",

219
src/views/Restroom/DetailRoomPage.vue Normal file
View 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>

294
src/views/Restroom/RoomView.vue
View File

@ -1,117 +1,262 @@
<script setup>
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
<script>
import MaterialInput from "@/components/MaterialInput.vue";
import MaterialTextArea from "@/components/MaterialTextArea.vue";
import MaterialButton from "@/components/MaterialButton.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
status: true,
},
{
title: "ห้อง 2",
dataIndex: "2",
status: false
status: false,
},
{
title: "ห้อง 3",
dataIndex: "3",
status: true
status: true,
},
{
title: "ห้อง 4",
dataIndex: "4",
status: true
status: true,
},
{
title: "ห้อง 5",
dataIndex: "5",
status: false
status: false,
},
{
title: "ห้อง 6",
dataIndex: "6",
status: false
status: false,
},
{
title: "ห้อง 7",
dataIndex: "7",
status: true
status: true,
},
{
title: "ห้อง 8",
dataIndex: "8",
status: false
status: false,
},
{
title: "ห้อง 9",
dataIndex: "9",
status: false
status: false,
},
{
title: "ห้อง 10",
dataIndex: "10",
status: false
status: false,
},
{
title: "ห้อง 11",
dataIndex: "11",
status: true
status: true,
},
{
title: "ห้อง 12",
dataIndex: "12",
status: false
status: false,
},
{
title: "ห้อง 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>
<template>
<div class="container position-sticky z-index-sticky top-0">
<div class="row">
<div class="col-12">
<DefaultNavbar
:sticky="true"
:action="{
route: 'https://www.creative-tim.com/product/vue-material-kit-pro',
color: 'bg-gradient-success',
label: 'Buy Now',
}"
/>
</div>
</div>
</div>
<section>
<div class="page-header min-vh-100">
<div class="page-header min-vh-45">
<div class="container">
<div class=" text-center">
<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">
<p class="card-title " >{{ item?.title }}</p>
<a href="#" class="card-link"><i class="bi bi-pencil-square"></i></a>
<!-- 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="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">
<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="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
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,20 +264,53 @@ const landingColumns = [
</div>
</div>
</div>
</section>
<!-- 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>
</template>
<style>
.bg-green{
background : #567b57 !important;
.bg-green {
background: #567b57 !important;
color: #fff;
}
.bg-red{
.bg-red {
background: #d24c4a !important;
color: #fff;
}
.bg-waring{
.bg-waring {
background: #d1d3d5 !important;
color: #fff;
}
</style>
</style>

219
src/views/Restroom/UpdateRoom.vue Normal file
View 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>