diff --git a/db.json b/db.json
new file mode 100644
index 0000000..d327a5a
--- /dev/null
+++ b/db.json
@@ -0,0 +1,19 @@
+{
+ "books": [
+ {
+ "id": 1,
+ "title": "The Brothers Karamazov",
+ "author": "Fyodor Dostoevsky"
+ },
+ {
+ "id": 2,
+ "title": "Infinite Jest",
+ "author": "David Foster Wallace"
+ },
+ {
+ "id": 3,
+ "title": "Suttree",
+ "author": "Cormac McCarthy"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 79e21c0..32c93e4 100644
--- a/package.json
+++ b/package.json
@@ -2,6 +2,7 @@
"name": "vue-material-kit-2",
"version": "2.0.0",
"scripts": {
+ "db:serve": " json-server --watch db.json --port=3002",
"dev": "vite",
"build": "vite build",
"preview": "vite preview --port 4173",
@@ -10,6 +11,7 @@
"dependencies": {
"@popperjs/core": "2.11.5",
"@trevoreyre/autocomplete-vue": "^2.4.1",
+ "axios": "^1.5.1",
"bootstrap": "5.1.3",
"pinia": "2.0.14",
"prismjs": "1.28.0",
@@ -18,7 +20,8 @@
"vue-clipboard3": "2.0.0",
"vue-count-to": "1.0.13",
"vue-prism-editor": "2.0.0-alpha.2",
- "vue-router": "4.0.15"
+ "vue-router": "4.0.15",
+ "vue-select": "^4.0.0-beta.6"
},
"devDependencies": {
"@rushstack/eslint-patch": "1.1.0",
@@ -29,6 +32,6 @@
"prettier": "2.5.1",
"sass": "1.52.3",
"sass-loader": "13.0.0",
- "vite": "2.9.9"
+ "vite": "^2.9.16"
}
}
diff --git a/src/App.vue b/src/App.vue
index c22554b..96697c6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,8 +14,10 @@ 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';
+
diff --git a/src/assets/dataJson/rooms.json b/src/assets/dataJson/rooms.json
new file mode 100644
index 0000000..9cdd13a
--- /dev/null
+++ b/src/assets/dataJson/rooms.json
@@ -0,0 +1,67 @@
+[
+ {
+ "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
+ }
+]
\ No newline at end of file
diff --git a/src/assets/dataJson/users.json b/src/assets/dataJson/users.json
new file mode 100644
index 0000000..e69de29
diff --git a/src/data.json b/src/data.json
new file mode 100644
index 0000000..d327a5a
--- /dev/null
+++ b/src/data.json
@@ -0,0 +1,19 @@
+{
+ "books": [
+ {
+ "id": 1,
+ "title": "The Brothers Karamazov",
+ "author": "Fyodor Dostoevsky"
+ },
+ {
+ "id": 2,
+ "title": "Infinite Jest",
+ "author": "David Foster Wallace"
+ },
+ {
+ "id": 3,
+ "title": "Suttree",
+ "author": "Cormac McCarthy"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 6908227..43e6b41 100644
--- a/src/main.js
+++ b/src/main.js
@@ -9,12 +9,12 @@ import "./assets/css/nucleo-icons.css";
import "./assets/css/nucleo-svg.css";
import materialKit from "./material-kit";
-import vSelect from 'vue-select'
+import VueSelect from "vue-select";
+
+
const app = createApp(App);
-
-
-app.component('v-select', vSelect)
+app.component("v-select", VueSelect)
app.use(createPinia());
app.use(router);
-app.use(materialKit);
+app.use(materialKit)
app.mount("#app");
diff --git a/src/views/Restroom/DetailRoomPage.vue b/src/views/Restroom/DetailRoomPage.vue
index b551068..9a8d928 100644
--- a/src/views/Restroom/DetailRoomPage.vue
+++ b/src/views/Restroom/DetailRoomPage.vue
@@ -3,10 +3,11 @@ import { onMounted } from "vue";
//image
import image from "@/assets/img/illustrations/illustration-signin.jpg";
-
+import vueMkHeader from "@/assets/img/bg.jpg";
//material components
import MaterialInput from "@/components/MaterialInput.vue";
-
+import MaterialButton from "@/components/MaterialButton.vue";
+import Breadcrumbs from "@/examples/Breadcrumbs.vue";
// material-input
import setMaterialInput from "@/assets/js/material-input";
onMounted(() => {
@@ -101,29 +102,73 @@ const landingColumns = [
];
- 
-