save
This commit is contained in:
223
client/src/components/shift/ShiftManagementModal.vue
Normal file
223
client/src/components/shift/ShiftManagementModal.vue
Normal file
@@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<div v-if="show" class="modal-overlay" @click="$emit('close')">
|
||||
<div class="modal-content" @click.stop>
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-title">Управление сменами</h2>
|
||||
<button @click="$emit('close')" class="modal-close">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="shift-types">
|
||||
<!-- Обычная смена -->
|
||||
<div v-if="canManageRegularShift" class="shift-type-card">
|
||||
<h3>Обычная смена</h3>
|
||||
<p v-if="!shiftStatus.regularShift">Управление обычными играми и учет денежных средств</p>
|
||||
<p v-else class="shift-info">
|
||||
Смена открыта: {{ formatShiftTime(shiftStatus.regularShift.stime) }}<br>
|
||||
Администратор: {{ shiftStatus.regularShift.adminName }}
|
||||
</p>
|
||||
<div class="shift-actions">
|
||||
<button
|
||||
v-if="!shiftStatus.regularShift"
|
||||
@click="$emit('open-regular-shift')"
|
||||
class="btn btn-primary"
|
||||
>
|
||||
Открыть смену
|
||||
</button>
|
||||
<button
|
||||
v-else
|
||||
@click="$emit('close-regular-shift')"
|
||||
class="btn btn-secondary"
|
||||
>
|
||||
Закрыть смену
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Техническая смена -->
|
||||
<div v-if="canManageTechShift" class="shift-type-card">
|
||||
<h3>Техническая смена</h3>
|
||||
<p v-if="!shiftStatus.techShift">Управление пристрелочными играми и техническими работами</p>
|
||||
<p v-else class="shift-info">
|
||||
Смена открыта: {{ formatShiftTime(shiftStatus.techShift.stime) }}
|
||||
</p>
|
||||
<div class="shift-actions">
|
||||
<button
|
||||
v-if="!shiftStatus.techShift"
|
||||
@click="$emit('open-tech-shift')"
|
||||
class="btn btn-primary"
|
||||
>
|
||||
Открыть смену
|
||||
</button>
|
||||
<button
|
||||
v-else
|
||||
@click="$emit('close-tech-shift')"
|
||||
class="btn btn-secondary"
|
||||
>
|
||||
Закрыть смену
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
shiftStatus: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
canManageRegularShift: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
canManageTechShift: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
formatShiftTime: {
|
||||
type: Function,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
defineEmits(['close', 'open-regular-shift', 'close-regular-shift', 'open-tech-shift', 'close-tech-shift'])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: var(--color-card);
|
||||
border-radius: var(--radius-xl);
|
||||
max-width: 600px;
|
||||
width: 90%;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1.5rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
color: var(--color-text-secondary);
|
||||
transition: color var(--transition-fast);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.shift-types {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.shift-type-card {
|
||||
background: var(--color-background);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.shift-type-card h3 {
|
||||
margin: 0 0 0.75rem 0;
|
||||
font-size: 1.25rem;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.shift-type-card p {
|
||||
margin: 0 0 1rem 0;
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.shift-info {
|
||||
color: var(--color-text-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.shift-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: var(--radius-md);
|
||||
border: none;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--color-primary-hover);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--color-background);
|
||||
color: var(--color-text-primary);
|
||||
border: 2px solid var(--color-border);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--color-card);
|
||||
border-color: var(--color-text-secondary);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user