Админ-панель для профиля + полная адаптация под смартфоны
This commit is contained in:
parent
672a151595
commit
46caa4805f
28
app.js
28
app.js
@ -396,7 +396,35 @@ function loadProfile() {
|
||||
<div class="history-item-status">Статус: ${getStatusName(r.status)}</div>
|
||||
</div>
|
||||
`).join('') || '<p>Пока нет обращений</p>';
|
||||
|
||||
// Панель администратора (видна только если isAdmin = true)
|
||||
const adminPanel = document.getElementById('adminPanel');
|
||||
if (adminPanel && profile.isAdmin) {
|
||||
adminPanel.style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
// Экспорт всех данных для админа
|
||||
function exportAllData() {
|
||||
const data = {
|
||||
reviews: appData.reviews,
|
||||
ideas: appData.ideas,
|
||||
motivation: appData.motivation,
|
||||
kpi: appData.kpi,
|
||||
reserve: appData.reserve
|
||||
};
|
||||
|
||||
const json = JSON.stringify(data, null, 2);
|
||||
const blob = new Blob([json], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = 'pulse_admin_export_' + new Date().toISOString().split('T')[0] + '.json';
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
window.exportAllData = exportAllData;
|
||||
|
||||
// Аналитика
|
||||
function loadAnalytics() {
|
||||
|
||||
11
data.js
11
data.js
@ -43,7 +43,16 @@ const INITIAL_DATA = {
|
||||
name: 'Катипа',
|
||||
department: 'IT Департамент',
|
||||
position: 'Ведущий специалист',
|
||||
tenure: '2 года 3 месяца'
|
||||
tenure: '2 года 3 месяца',
|
||||
isAdmin: true,
|
||||
adminPermissions: [
|
||||
'Просмотр всех отзывов',
|
||||
'Редактирование статусов идей',
|
||||
'Выгрузка отчётов в Excel',
|
||||
'Управление пользователями',
|
||||
'Доступ к аналитике по подразделениям',
|
||||
'Изменение параметров системы'
|
||||
]
|
||||
},
|
||||
settings: {
|
||||
engagementIndex: 78,
|
||||
|
||||
16
index.html
16
index.html
@ -410,6 +410,22 @@
|
||||
<h3>Мои обращения</h3>
|
||||
<div id="profileHistory" class="history-list"></div>
|
||||
</div>
|
||||
|
||||
<div id="adminPanel" class="admin-panel" style="display: none;">
|
||||
<h3>🔐 Панель администратора</h3>
|
||||
<div class="admin-permissions">
|
||||
<div class="permission-item">
|
||||
<span class="permission-icon">✅</span>
|
||||
<span class="permission-text">Доступны все права администратора</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="admin-actions">
|
||||
<button class="admin-btn" onclick="alert('Управление пользователями')">👥 Пользователи</button>
|
||||
<button class="admin-btn" onclick="alert('Настройки системы')">⚙️ Настройки</button>
|
||||
<button class="admin-btn" onclick="alert('Журнал действий')">📋 Журнал</button>
|
||||
<button class="admin-btn" onclick="exportAllData()">📥 Полная выгрузка</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
344
style.css
344
style.css
@ -718,6 +718,66 @@ textarea {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* Admin Panel */
|
||||
.admin-panel {
|
||||
background: linear-gradient(135deg, #1A3A52, #2C5282);
|
||||
color: var(--white);
|
||||
padding: 24px;
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--shadow-lg);
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.admin-panel h3 {
|
||||
margin-bottom: 16px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.admin-permissions {
|
||||
background: rgba(255,255,255,0.1);
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.permission-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.permission-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.permission-text {
|
||||
font-size: 14px;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.admin-actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.admin-btn {
|
||||
background: rgba(255,255,255,0.15);
|
||||
color: var(--white);
|
||||
border: 1px solid rgba(255,255,255,0.3);
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.admin-btn:hover {
|
||||
background: rgba(255,255,255,0.25);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.history-item-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -1351,41 +1411,317 @@ textarea {
|
||||
.header-content {
|
||||
flex-wrap: wrap;
|
||||
height: auto;
|
||||
padding: 16px;
|
||||
gap: 16px;
|
||||
padding: 12px 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.nav {
|
||||
order: 3;
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 8px;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 6px 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.user-btn {
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main {
|
||||
padding: 20px 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.section-header h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.kpi-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.kpi-card {
|
||||
padding: 16px 12px;
|
||||
}
|
||||
|
||||
.kpi-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.kpi-value {
|
||||
font-size: 28px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.kpi-label {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.kpi-trend {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.charts-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.chart-card {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.chart-card h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.chart-placeholder {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.profile-stats {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.ideas-filters {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
padding: 6px 12px;
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.idea-card {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.idea-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.idea-meta {
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.idea-actions {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.vote-btn {
|
||||
padding: 6px 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.feedback-container,
|
||||
.automation-form,
|
||||
.survey-container {
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.rating-star {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
max-width: calc(100% - 32px);
|
||||
max-height: calc(100vh - 64px);
|
||||
}
|
||||
|
||||
.modal-header,
|
||||
#ideaForm,
|
||||
.modal-footer {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.adaptation-blocks,
|
||||
.training-grid,
|
||||
.motivation-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.kpi-employee-header {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.kpi-avatar {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.kpi-circle {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.kpi-value {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.kpi-component {
|
||||
grid-template-columns: 1fr 60px 40px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.kpi-comp-label {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.stage {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stage-dot {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.participant-card {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.participant-progress {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.requirements-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.admin-actions {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.analytics-filters {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.analytics-filters select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.analytics-kpi {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.akpi-item {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.akpi-value {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.chart-large {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.thanks-wall {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.thank-card {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.thank-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.reserve-banner {
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.reserve-banner h2 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.reserve-banner p {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.kpi-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.kpi-card {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 6px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.section-header h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.btn-primary,
|
||||
.btn-secondary {
|
||||
padding: 10px 16px;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.idea-header {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.idea-status {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.admin-actions {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.admin-btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user