mirror of
https://github.com/Dadechin/XRoomDashboardFront.git
synced 2025-07-03 16:54:35 +00:00
Compare commits
2 Commits
0e0c45dba1
...
66229e6365
| Author | SHA1 | Date | |
|---|---|---|---|
|
66229e6365 | ||
| ce39bc4f96 |
|
|
@ -1,8 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div v-if="isVisible" class="modal-overlay" @click="$emit('close')">
|
<div v-if="isVisible" class="modal-overlay" @click="closeModal">
|
||||||
<div class="modal-content" @click.stop>
|
<div class="modal-content" @click.stop>
|
||||||
<div class="popUp-header">
|
<div class="popUp-header">
|
||||||
<h2>ایجاد جلسه جدید</h2>
|
<h2>فضا جدید</h2>
|
||||||
<button @click="$emit('close')">
|
<button @click="$emit('close')">
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
|
@ -31,87 +31,178 @@
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="popUp-title">
|
<div class="popUp-title">
|
||||||
<h2>اضافه کردن فضای جدید</h2>
|
<!-- Space Selection Cards -->
|
||||||
<span>برای ایجاد فضای جدید فرم زیر را تکمیل نمایید.</span>
|
<div v-if="spaces.length > 0" class="space-selection">
|
||||||
|
<div
|
||||||
|
v-for="(space, index) in spaces"
|
||||||
|
:key="index"
|
||||||
|
class="space-card"
|
||||||
|
@click="selectSpace(space)"
|
||||||
|
:class="{ selected: selectedSpace === space }"
|
||||||
|
>
|
||||||
|
<img :src="'http://my.xroomapp.com:8000' + space.img" alt="فضای اختصاصی" class="space-img" />
|
||||||
|
<div class="space-info">
|
||||||
|
<h3 class="space-name">{{ space.name }}</h3>
|
||||||
|
<p class="space-type">{{ space.type }}</p>
|
||||||
|
<p class="space-capacity">حداکثر: {{ space.capacity }} کاربر</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else class="loading-message">
|
||||||
|
<p>در حال بارگذاری فضاها...</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="popUp-objects">
|
<div class="popUp-objects">
|
||||||
<form @submit.prevent="handleSubmit">
|
<div class="popUp-title-object">
|
||||||
<div class="form-group">
|
<h2>اضافه کردن فضا جدید</h2>
|
||||||
<label for="spaceName">نام:</label>
|
<span>برای ایجاد فضای جدید فرم زیر را تکمیل نمایید .</span>
|
||||||
<input
|
</div>
|
||||||
id="spaceName"
|
|
||||||
v-model="form.name"
|
|
||||||
type="text"
|
<!-- Form to enter additional information -->
|
||||||
required
|
<div v-if="selectedSpace" class="space-form">
|
||||||
/>
|
<form @submit.prevent="submitForm">
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="spaceCapacity">ظرفیت:</label>
|
<label for="name">نام:</label>
|
||||||
<input
|
<input type="text" v-model="form.name" id="name" required />
|
||||||
id="spaceCapacity"
|
</div>
|
||||||
v-model.number="form.capacity"
|
|
||||||
type="number"
|
<div class="form-group">
|
||||||
required
|
<label for="capacity">ظرفیت:</label>
|
||||||
/>
|
<input type="number" v-model="form.capacity" id="capacity" required />
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
|
||||||
<label for="spaceType">امکانات فضای مد نظر:</label>
|
<div class="form-group">
|
||||||
<textarea
|
<label for="description">توضیحات:</label>
|
||||||
id="spaceType"
|
<textarea v-model="form.description" id="description" required></textarea>
|
||||||
v-model="form.features"
|
</div>
|
||||||
required
|
</form>
|
||||||
></textarea>
|
</div>
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="form-actions">
|
<div class="form-actions" v-if="selectedSpace">
|
||||||
<button type="button" class="cancel-btn" @click="$emit('close')">بازگشت</button>
|
<button type="button" class="cancel-btn" @click="closeModal">بازگشت</button>
|
||||||
<button type="submit" class="submit-btn" @click="handleSubmit">تایید</button>
|
<button type="submit" class="submit-btn" @click="submitForm">تایید</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'CreateSpaceModal',
|
|
||||||
props: {
|
props: {
|
||||||
isVisible: {
|
isVisible: Boolean,
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
spaces: [],
|
||||||
|
selectedSpace: null,
|
||||||
form: {
|
form: {
|
||||||
name: '',
|
name: '',
|
||||||
capacity: null,
|
capacity: '',
|
||||||
features: '',
|
description: '',
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleSubmit() {
|
closeModal() {
|
||||||
if (this.form.name && this.form.capacity && this.form.features) {
|
this.$emit('close');
|
||||||
console.log('داده‌های فرم:', {
|
this.resetForm()
|
||||||
name: this.form.name,
|
},
|
||||||
capacity: this.form.capacity,
|
resetForm() {
|
||||||
features: this.form.features,
|
this.spaces = [],
|
||||||
});
|
this.selectedSpace = null,
|
||||||
this.form = {
|
this.form = {
|
||||||
name: '',
|
name : '',
|
||||||
capacity: null,
|
capacity : '',
|
||||||
features: '',
|
description : '',
|
||||||
};
|
}
|
||||||
this.$emit('close');
|
},
|
||||||
|
selectSpace(space) {
|
||||||
|
this.selectedSpace = space;
|
||||||
|
},
|
||||||
|
async fetchSpaces() {
|
||||||
|
try {
|
||||||
|
const token = localStorage.getItem('token');
|
||||||
|
if (!token) {
|
||||||
|
console.error('No token found!');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await axios.get(
|
||||||
|
'http://my.xroomapp.com:8000/get_assigned_assetbundle_rooms',
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
Authorization: `Token ${token}`,
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
console.log(response.data);
|
||||||
|
|
||||||
|
this.spaces = response.data.assetbundle_rooms.map(room => ({
|
||||||
|
name: room.name,
|
||||||
|
img: room.img,
|
||||||
|
capacity: room.maxPerson,
|
||||||
|
type: room.Private ? 'Private' : 'Public',
|
||||||
|
maxPerson: room.maxPerson,
|
||||||
|
id: room.id,
|
||||||
|
}));
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching spaces:', error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async submitForm() {
|
||||||
|
const spaceData = {
|
||||||
|
assetBundleRoomId: this.selectedSpace.id,
|
||||||
|
name: this.form.name,
|
||||||
|
description: this.form.description,
|
||||||
|
capacity: this.form.capacity,
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
const token = localStorage.getItem('token');
|
||||||
|
if (!token) {
|
||||||
|
console.error('No token found!');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await axios.post(
|
||||||
|
'http://my.xroomapp.com:8000/add_space',
|
||||||
|
spaceData,
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
Authorization: `Token ${token}`,
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
console.log(response.data);
|
||||||
|
this.$emit('submit', response.data);
|
||||||
|
this.closeModal(); // Close the modal
|
||||||
|
window.location.reload(); // Refresh the page
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error submitting form:', error);
|
||||||
|
alert('خطا در ارسال اطلاعات، لطفا دوباره تلاش کنید');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
isVisible(newVal) {
|
||||||
|
if (newVal) {
|
||||||
|
this.fetchSpaces();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.modal-overlay {
|
.modal-overlay {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
@ -135,7 +226,7 @@ export default {
|
||||||
direction: rtl;
|
direction: rtl;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
padding-bottom: 1.5rem;
|
padding-bottom: 1.5rem;
|
||||||
height: max-content;
|
height: 95vh;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
scrollbar-width: none;
|
scrollbar-width: none;
|
||||||
-ms-overflow-style: none;
|
-ms-overflow-style: none;
|
||||||
|
|
@ -145,6 +236,8 @@ export default {
|
||||||
.modal-content::-webkit-scrollbar {
|
.modal-content::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.popUp-header {
|
.popUp-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -168,20 +261,25 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.popUp-title {
|
.popUp-title {
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: start;
|
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
padding-right: 50px;
|
padding-right: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popUp-title h2 {
|
.popUp-title-object {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.popUp-title-object h2{
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #101010;
|
color: #101010;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popUp-title span {
|
.popUp-title-object span {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #4F5A69;
|
color: #4F5A69;
|
||||||
|
|
@ -189,7 +287,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.popUp-objects {
|
.popUp-objects {
|
||||||
margin-top: 1rem !important;
|
margin-top: 0rem !important;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
background-color: #FFFFFF;
|
background-color: #FFFFFF;
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
|
|
@ -220,12 +318,12 @@ export default {
|
||||||
border: 1px solid #718096;
|
border: 1px solid #718096;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
max-width: 25rem
|
max-width: 22rem
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group textarea {
|
.form-group textarea {
|
||||||
height: 140px;
|
height: 140px;
|
||||||
width: 100%;
|
width: 75%;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
border: 1px solid #718096;
|
border: 1px solid #718096;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
|
@ -242,10 +340,77 @@ export default {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.space-selection {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 2rem 16px;
|
||||||
|
justify-content: flex-start;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.space-card {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||||||
|
width: 31%;
|
||||||
|
height: 15rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.space-card:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Add selected class styles */
|
||||||
|
.space-card.selected {
|
||||||
|
border: 2px solid #3A57E8;
|
||||||
|
box-shadow: 0 4px 8px rgba(58, 87, 232, 0.5); /* Blue border and shadow */
|
||||||
|
}
|
||||||
|
|
||||||
|
.space-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 8rem;
|
||||||
|
object-fit: cover;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.space-info {
|
||||||
|
padding: 10px;
|
||||||
|
text-align: center;
|
||||||
|
gap: 1rem;
|
||||||
|
display: grid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.space-name {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #444;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.space-type, .space-capacity {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #718096;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-message {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #718096;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.space-form {
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
.form-actions {
|
.form-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 20px;
|
padding: 20px 0px;
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 620px;
|
max-width: 620px;
|
||||||
|
|
@ -275,4 +440,5 @@ export default {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -189,6 +189,8 @@ export default {
|
||||||
.modal-content::-webkit-scrollbar {
|
.modal-content::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.popUp-header {
|
.popUp-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
||||||
|
|
@ -14,182 +14,54 @@
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Page Objects -->
|
<!-- Add Space Button -->
|
||||||
<div>
|
<button class="add-space" @click="openCreateSpaceModal">
|
||||||
<!-- Sharing Filter -->
|
+ <span style="margin-right: 0.5rem;">اضافه کردن فضای اختصاصی</span>
|
||||||
<div class="filter-section">
|
</button>
|
||||||
<div class="sharing-filters">
|
|
||||||
<span style="font-size: 17px; font-weight: 600;">فیلتر اشتراک‌گذاری</span>
|
|
||||||
<div class="filter-buttons">
|
|
||||||
<button
|
<!-- Spaces -->
|
||||||
v-for="filter in sharingFilters"
|
<div v-if="filteredSpaces.length > 0 " style="z-index: 0;">
|
||||||
:key="filter.value"
|
<swiper
|
||||||
:class="activeSharingFilter === filter.value ? 'active-filter' : 'disable-filter'"
|
:slidesPerView="3.6"
|
||||||
@click="setActiveSharingFilter(filter.value)"
|
:spaceBetween="30"
|
||||||
>
|
:pagination="{ clickable: false }"
|
||||||
{{ filter.label }}
|
:modules="modules"
|
||||||
</button>
|
class="mySwiper"
|
||||||
|
>
|
||||||
|
<swiper-slide v-for="(space, index) in filteredSpaces" :key="index" class="card">
|
||||||
|
<img :src="'http://my.xroomapp.com:8000' + space.img" alt="تصویر فضا" />
|
||||||
|
<div class="card-texts">
|
||||||
|
<h2>{{ space.name }}</h2>
|
||||||
|
<p class="space-capacity">
|
||||||
|
حداکثر: {{ space.capacity }} کاربر
|
||||||
|
</p>
|
||||||
|
<p class="space-type">
|
||||||
|
{{ space.type }}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</swiper-slide>
|
||||||
<div class="space-type-filter">
|
</swiper>
|
||||||
<span style="font-size: 17px; font-weight: 600;">فیلتر نوع فضا</span>
|
</div>
|
||||||
<div class="filter-buttons">
|
<div v-else class="no-spaces-message">
|
||||||
<button
|
<p>هیچ فضایی با فیلترهای انتخاب‌شده یافت نشد.</p>
|
||||||
v-for="filter in spaceTypeFilters"
|
|
||||||
:key="filter.value"
|
|
||||||
:class="activeSpaceTypeFilter === filter.value ? 'active-filter' : 'disable-filter'"
|
|
||||||
@click="setActiveSpaceTypeFilter(filter.value)"
|
|
||||||
>
|
|
||||||
{{ filter.label }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Add Space Button -->
|
|
||||||
<button class="add-space" @click="openCreateSpaceModal">
|
|
||||||
+ <span style="margin-right: 0.5rem;">اضافه کردن فضای اختصاصی</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- Create Space Modal -->
|
|
||||||
<CreateSpaceModal
|
|
||||||
:isVisible="isCreateSpaceModalVisible"
|
|
||||||
@close="closeCreateSpaceModal"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Spaces -->
|
|
||||||
<div v-if="filteredSpaces.length > 0">
|
|
||||||
<swiper
|
|
||||||
:slidesPerView="3.6"
|
|
||||||
:spaceBetween="30"
|
|
||||||
:pagination="{ clickable: false }"
|
|
||||||
:modules="modules"
|
|
||||||
class="mySwiper"
|
|
||||||
>
|
|
||||||
<swiper-slide v-for="(space, index) in filteredSpaces" :key="index" class="card">
|
|
||||||
<img :src="space.image" alt="تصویر فضا" />
|
|
||||||
<div class="card-texts">
|
|
||||||
<h2>{{ space.name }}</h2>
|
|
||||||
<p class="space-capacity">
|
|
||||||
<span style="margin-left: 4px;">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="16"
|
|
||||||
height="17"
|
|
||||||
viewBox="0 0 16 17"
|
|
||||||
fill="none"
|
|
||||||
>
|
|
||||||
<g clip-path="url(#clip0_622_1334)">
|
|
||||||
<path
|
|
||||||
d="M3.33203 5.16667C3.33203 5.87391 3.61298 6.55219 4.11308 7.05228C4.61318 7.55238 5.29145 7.83333 5.9987 7.83333C6.70594 7.83333 7.38422 7.55238 7.88432 7.05228C8.38441 6.55219 8.66536 5.87391 8.66536 5.16667C8.66536 4.45942 8.38441 3.78115 7.88432 3.28105C7.38422 2.78095 6.70594 2.5 5.9987 2.5C5.29145 2.5 4.61318 2.78095 4.11308 3.28105C3.61298 3.78115 3.33203 4.45942 3.33203 5.16667Z"
|
|
||||||
stroke="#718096"
|
|
||||||
stroke-width="1.5"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M2 14.5V13.1667C2 12.4594 2.28095 11.7811 2.78105 11.281C3.28115 10.781 3.95942 10.5 4.66667 10.5H7.33333C8.04058 10.5 8.71885 10.781 9.21895 11.281C9.71905 11.7811 10 12.4594 10 13.1667V14.5"
|
|
||||||
stroke="#718096"
|
|
||||||
stroke-width="1.5"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M10.668 2.58667C11.2416 2.73354 11.75 3.06714 12.1131 3.53488C12.4761 4.00262 12.6732 5.17 12.6732 5.17C12.6732 5.76212 12.4761 6.33739 12.1131 6.80513C11.75 7.27287 11.2416 7.60647 10.668 7.75334"
|
|
||||||
stroke="#718096"
|
|
||||||
stroke-width="1.5"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M14 14.5V13.1666C13.9966 12.5781 13.7986 12.0072 13.4368 11.5429C13.0751 11.0786 12.5699 10.7471 12 10.6"
|
|
||||||
stroke="#718096"
|
|
||||||
stroke-width="1.5"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
<defs>
|
|
||||||
<clipPath id="clip0_622_1334">
|
|
||||||
<rect width="16" height="16" fill="white" transform="translate(0 0.5)" />
|
|
||||||
</clipPath>
|
|
||||||
</defs>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
حداکثر: {{ space.capacity }} کاربر
|
|
||||||
</p>
|
|
||||||
<p class="space-type">
|
|
||||||
<span style="margin-left: 4px;">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="16"
|
|
||||||
height="17"
|
|
||||||
viewBox="0 0 16 17"
|
|
||||||
fill="none"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M4 15.1667V3.16671C4 2.81309 4.14048 2.47395 4.39052 2.2239C4.64057 1.97385 4.97971 1.83337 5.33333 1.83337H10.6667C11.0203 1.83337 11.3594 1.97385 11.6095 2.2239C11.8595 2.47395 12 2.81309 12 3.16671V15.1667H4Z"
|
|
||||||
stroke="#3A57E8"
|
|
||||||
stroke-width="1.25"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M3.9987 8.5H2.66536C2.31174 8.5 1.9726 8.64048 1.72256 8.89052C1.47251 9.14057 1.33203 9.47971 1.33203 9.83333V13.8333C1.33203 14.187 1.47251 14.5261 1.72256 14.7761C1.9726 15.0262 2.31174 15.1667 2.66536 15.1667H3.9987"
|
|
||||||
stroke="#3A57E8"
|
|
||||||
stroke-width="1.25"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M12 6.5H13.3333C13.687 6.5 14.0261 6.64048 14.2761 6.89052C14.5262 7.14057 14.6667 7.47971 14.6667 7.83333V13.8333C14.6667 14.187 14.5262 14.5261 14.2761 14.7761C14.0261 15.0262 13.687 15.1667 13.3333 15.1667H12"
|
|
||||||
stroke="#3A57E8"
|
|
||||||
stroke-width="1.25"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M6.66797 4.5H9.33464"
|
|
||||||
stroke="#3A57E8"
|
|
||||||
stroke-width="1.25"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M6.66797 7.16663H9.33464"
|
|
||||||
stroke="#3A57E8"
|
|
||||||
stroke-width="1.25"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M6.66797 9.83337H9.33464"
|
|
||||||
stroke="#3A57E8"
|
|
||||||
stroke-width="1.25"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M6.66797 12.5H9.33464"
|
|
||||||
stroke="#3A57E8"
|
|
||||||
stroke-width="1.25"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
{{ space.type }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</swiper-slide>
|
|
||||||
</swiper>
|
|
||||||
</div>
|
|
||||||
<div v-else class="no-spaces-message">
|
|
||||||
<p>هیچ فضایی با فیلترهای انتخاب‌شده یافت نشد.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Create Space Modal -->
|
||||||
|
<CreateSpaceModal
|
||||||
|
:isVisible="isCreateSpaceModalVisible"
|
||||||
|
@close="closeCreateSpaceModal"
|
||||||
|
:spaces="spaces"
|
||||||
|
@submit="handleCreateSpaceSubmit"
|
||||||
|
/>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -199,6 +71,7 @@ import CreateSpaceModal from '@/components/CreateSpaceModal.vue';
|
||||||
import { Swiper, SwiperSlide } from 'swiper/vue';
|
import { Swiper, SwiperSlide } from 'swiper/vue';
|
||||||
import 'swiper/css';
|
import 'swiper/css';
|
||||||
import { Pagination } from 'swiper/modules';
|
import { Pagination } from 'swiper/modules';
|
||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'DashboardPage',
|
name: 'DashboardPage',
|
||||||
|
|
@ -225,48 +98,8 @@ export default {
|
||||||
],
|
],
|
||||||
activeSharingFilter: 'all',
|
activeSharingFilter: 'all',
|
||||||
activeSpaceTypeFilter: 'spaces',
|
activeSpaceTypeFilter: 'spaces',
|
||||||
spaces: [
|
spaces: [], // Initialize the spaces array
|
||||||
{
|
selectedSpace: null, // Store the selected space
|
||||||
name: 'فضای تیمی ۱',
|
|
||||||
image: require('@/assets/img/img.jpg'),
|
|
||||||
capacity: 33,
|
|
||||||
type: 'فضا تیم',
|
|
||||||
sharing: 'team',
|
|
||||||
spaceType: 'spaces',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'فضای تیمی ۲',
|
|
||||||
image: require('@/assets/img/img2.jpg'),
|
|
||||||
capacity: 33,
|
|
||||||
type: 'فضا تیم',
|
|
||||||
sharing: 'team',
|
|
||||||
spaceType: 'spaces',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'فضای خصوصی ۱',
|
|
||||||
image: require('@/assets/img/img3.jpg'),
|
|
||||||
capacity: 33,
|
|
||||||
type: 'فضا خصوصی',
|
|
||||||
sharing: 'private',
|
|
||||||
spaceType: 'spaces',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'قالب ۱',
|
|
||||||
image: require('@/assets/img/img4.jpg'),
|
|
||||||
capacity: 33,
|
|
||||||
type: 'قالب',
|
|
||||||
sharing: 'team',
|
|
||||||
spaceType: 'templates',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'فضای تیمی ۳',
|
|
||||||
image: require('@/assets/img/img.jpg'),
|
|
||||||
capacity: 33,
|
|
||||||
type: 'فضا تیم',
|
|
||||||
sharing: 'team',
|
|
||||||
spaceType: 'spaces',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
@ -293,166 +126,206 @@ export default {
|
||||||
closeCreateSpaceModal() {
|
closeCreateSpaceModal() {
|
||||||
this.isCreateSpaceModalVisible = false;
|
this.isCreateSpaceModalVisible = false;
|
||||||
},
|
},
|
||||||
|
async fetchSpaces() {
|
||||||
|
try {
|
||||||
|
const token = localStorage.getItem('token'); // Retrieve the token from localStorage
|
||||||
|
if (!token) {
|
||||||
|
console.error('No token found!');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await axios.get(
|
||||||
|
'http://my.xroomapp.com:8000/get_spaces', // API endpoint
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
Authorization: `Token ${token}`,
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// Store the spaces data in the spaces array
|
||||||
|
this.spaces = response.data.spaces.map(space => ({
|
||||||
|
name: space.name,
|
||||||
|
img: space.assetBundleRoomId.img, // Assuming 'img' exists in the API response
|
||||||
|
capacity: space.capacity,
|
||||||
|
type: space.Private ? 'Private' : 'Public', // Adjust if you have a different field
|
||||||
|
sharing: space.Private ? 'private' : 'team',
|
||||||
|
spaceType: 'spaces',
|
||||||
|
description: space.description, // Store description from response
|
||||||
|
}));
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching spaces:', error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleCreateSpaceSubmit(space) {
|
||||||
|
// Handle form submission here, space will contain the selected space and the additional fields
|
||||||
|
console.log('Form submitted with:', space);
|
||||||
|
this.closeCreateSpaceModal(); // Close the modal after submission
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.fetchSpaces(); // Fetch spaces when the component is mounted
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
/* Add your CSS styling here */
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
.dashboard-page {
|
.dashboard-page {
|
||||||
margin-right: 360px;
|
margin-right: 360px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
direction: rtl;
|
direction: rtl;
|
||||||
font-family: IRANSansXFaNum, sans-serif;
|
font-family: IRANSansXFaNum, sans-serif;
|
||||||
}
|
}
|
||||||
.content {
|
.content {
|
||||||
background-color: #f8f9fa;
|
background-color: #f8f9fa;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
padding: 35px 80px;
|
padding: 35px 80px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 32px;
|
gap: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-title {
|
.section-title {
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title-description {
|
.title-description {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
margin-top: 1.5rem;
|
margin-top: 1.5rem;
|
||||||
color: #4F5A69;
|
color: #4F5A69;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-section {
|
.filter-section {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 2.5rem;
|
margin-bottom: 2.5rem;
|
||||||
padding: 24px 16px;
|
padding: 24px 16px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
background-color: #FFFFFF;
|
background-color: #FFFFFF;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sharing-filters {
|
.sharing-filters {
|
||||||
max-width: 79%;
|
max-width: 79%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-left: 1.5rem;
|
margin-left: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.space-type-filter {
|
.space-type-filter {
|
||||||
max-width: 21%;
|
max-width: 21%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.active-filter {
|
.active-filter {
|
||||||
background-color: #3A57E8;
|
background-color: #3A57E8;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
border: none;
|
border: none;
|
||||||
padding: 7px 12px;
|
padding: 7px 12px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin-left: 1rem;
|
margin-left: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.disable-filter {
|
.disable-filter {
|
||||||
color: #3A57E8;
|
color: #3A57E8;
|
||||||
background-color: #FFFFFF;
|
background-color: #FFFFFF;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
border: none;
|
border: none;
|
||||||
padding: 7px 10px;
|
padding: 7px 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin-left: 1rem;
|
margin-left: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-buttons {
|
.filter-buttons {
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.add-space {
|
.add-space {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 12px 24px 12px 24px;
|
padding: 12px 24px 12px 24px;
|
||||||
background-color: #3A57E8;
|
background-color: #3A57E8;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: max-content;
|
width: max-content;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mySwiper {
|
.mySwiper {
|
||||||
margin-top: 2.5rem;
|
margin-top: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
max-width: 250px !important;
|
max-width: 250px !important;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
height: 335px;
|
height: 335px;
|
||||||
border: 1px solid #B8C0CB;
|
border: 1px solid #B8C0CB;
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card img {
|
.card img {
|
||||||
max-width: 235px;
|
max-width: 235px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-height: 205px;
|
max-height: 205px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border-radius: 14px;
|
border-radius: 14px;
|
||||||
border: none;
|
border: none;
|
||||||
margin-top: 0.4rem;
|
margin-top: 0.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-texts {
|
.card-texts {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
padding-right: 1rem;
|
padding-right: 1rem;
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.space-name {
|
.space-name {
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #444D5A;
|
color: #444D5A;
|
||||||
}
|
}
|
||||||
|
|
||||||
.space-capacity {
|
.space-capacity {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #718096;
|
color: #718096;
|
||||||
}
|
}
|
||||||
|
|
||||||
.space-type {
|
.space-type {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #3A57E8;
|
color: #3A57E8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-spaces-message {
|
.no-spaces-message {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #101010;
|
color: #101010;
|
||||||
margin-top: 4rem;
|
margin-top: 4rem;
|
||||||
margin-bottom: 12rem;
|
margin-bottom: 12rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user