artem.kokos/ignis-core
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: Stats. Closes #6

Browse Source
This commit is contained in:
Artem Kokos
2026-03-28 23:06:40 +07:00
parent c793b73fa2
commit 732313a61c
5 changed files with 303 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
static/index.html
View File

@@ -69,6 +69,7 @@
<button @click="tab = 'control'" :class="tab === 'control' ? 'active-tab text-white' : 'text-slate-500 hover:text-slate-300'" class="px-6 py-2 rounded-lg font-bold text-sm transition-all">ПУЛЬТ</button>
<button v-if="isAdmin" @click="tab = 'schedules'" :class="tab === 'schedules' ? 'active-tab text-white' : 'text-slate-500 hover:text-slate-300'" class="px-6 py-2 rounded-lg font-bold text-sm transition-all">ГРАФИК</button>
<button v-if="isAdmin" @click="tab = 'admin'" :class="tab === 'admin' ? 'active-tab text-white' : 'text-slate-500 hover:text-slate-300'" class="px-6 py-2 rounded-lg font-bold text-sm transition-all">АДМИНКА</button>
<button v-if="isAdmin" @click="tab = 'stats'; fetchStats()" :class="tab === 'stats' ? 'active-tab text-white' : 'text-slate-500 hover:text-slate-300'" class="px-6 py-2 rounded-lg font-bold text-sm transition-all">СТАТА</button>
</nav>
</header>
@@ -254,6 +255,95 @@
</div>
</section>
</div>
<!-- СТАТИСТИКА (только админ) -->
<div v-if="tab === 'stats' && !isLoading && isAdmin" class="space-y-8 fade-up">
<!-- Период -->
<div class="flex items-center gap-3">
<span class="text-sm text-slate-500">Период:</span>
<button v-for="d in [1, 7, 30]" :key="d" @click="statsDays = d; fetchStats()"
:class="statsDays === d ? 'bg-orange-600 text-white' : 'bg-slate-800/50 text-slate-400 hover:text-white'"
class="px-4 py-1.5 rounded-lg text-sm font-bold transition-all">
{{ d === 1 ? 'Сегодня' : d + 'д' }}
</button>
</div>
<!-- Карточки по группам -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div v-for="s in statsData" :key="s.target_id" class="glass p-6 rounded-2xl">
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="text-lg font-black">{{ getGroupName(s.target_id) || s.target_id }}</h3>
<span class="text-[10px] mono text-slate-600">{{ s.target_id }}</span>
</div>
<span class="mono text-2xl font-black text-orange-400">{{ s.estimated_hours }}ч</span>
</div>
<div class="grid grid-cols-3 gap-3 mb-4">
<div class="bg-black/20 p-3 rounded-xl text-center">
<div class="text-lg font-bold text-green-400">{{ s.toggles_on }}</div>
<div class="text-[10px] text-slate-600 uppercase">вкл</div>
</div>
<div class="bg-black/20 p-3 rounded-xl text-center">
<div class="text-lg font-bold text-red-400">{{ s.toggles_off }}</div>
<div class="text-[10px] text-slate-600 uppercase">выкл</div>
</div>
<div class="bg-black/20 p-3 rounded-xl text-center">
<div class="text-lg font-bold text-slate-300">{{ s.total_commands }}</div>
<div class="text-[10px] text-slate-600 uppercase">всего</div>
</div>
</div>
<div class="flex flex-wrap gap-2 mb-3">
<span v-if="s.scenes" class="text-[10px] bg-purple-500/10 text-purple-400 px-2 py-1 rounded font-bold">🎨 {{ s.scenes }} сцен</span>
<span v-if="s.colors" class="text-[10px] bg-pink-500/10 text-pink-400 px-2 py-1 rounded font-bold">🌈 {{ s.colors }} цветов</span>
<span v-if="s.brightness" class="text-[10px] bg-yellow-500/10 text-yellow-400 px-2 py-1 rounded font-bold">🔆 {{ s.brightness }} яркость</span>
<span v-if="s.temperature" class="text-[10px] bg-blue-500/10 text-blue-400 px-2 py-1 rounded font-bold">🌡 {{ s.temperature }} темп.</span>
</div>
<!-- Кто управлял -->
<div v-if="Object.keys(s.by_user).length > 0" class="border-t border-slate-800/50 pt-3">
<div class="text-[10px] text-slate-600 uppercase mb-2">Кто управлял</div>
<div class="flex flex-wrap gap-2">
<span v-for="(count, user) in s.by_user" :key="user" class="text-[10px] mono bg-slate-800/50 text-slate-400 px-2 py-1 rounded">
{{ user }}: {{ count }}
</span>
</div>
</div>
</div>
</div>
<div v-if="statsData.length === 0" class="text-center py-16 glass rounded-2xl text-slate-600 text-sm">
Нет данных за выбранный период
</div>
<!-- Лог последних событий -->
<div class="glass p-6 rounded-2xl">
<div class="flex justify-between items-center mb-4">
<h2 class="text-lg font-black uppercase">Лог событий</h2>
<button @click="fetchEventLog" class="text-xs text-slate-500 hover:text-orange-400 font-bold transition-colors">ОБНОВИТЬ</button>
</div>
<div class="space-y-1 max-h-96 overflow-y-auto">
<div v-for="ev in eventLog" :key="ev.id" class="flex items-center gap-3 py-2 border-b border-slate-800/30 text-sm">
<span class="mono text-[10px] text-slate-600 w-36 shrink-0">{{ formatTime(ev.timestamp) }}</span>
<span class="mono text-[10px] text-slate-500 w-16 shrink-0">{{ ev.key_name }}</span>
<span :class="{
'text-green-400': ev.action === 'toggle_on',
'text-red-400': ev.action === 'toggle_off',
'text-purple-400': ev.action === 'scene',
'text-pink-400': ev.action === 'color',
'text-yellow-400': ev.action === 'brightness',
'text-blue-400': ev.action === 'temperature',
'text-slate-400': !['toggle_on','toggle_off','scene','color','brightness','temperature'].includes(ev.action),
}" class="text-xs font-bold w-24 shrink-0">{{ ev.action }}</span>
<span class="text-xs text-slate-500">{{ getGroupName(ev.target_id) || ev.target_id }}</span>
</div>
<div v-if="eventLog.length === 0" class="text-center py-8 text-slate-600 text-sm">Событий пока нет</div>
</div>
</div>
</div>
</template>
<!-- Toast -->
@@ -280,6 +370,7 @@
tasks: [], allScenes: {},
toasts: [], toastCounter: 0,
apiKeys: [], newKeyName: '', newKeyAdmin: false, lastCreatedKey: '',
statsData: [], eventLog: [], statsDays: 7,
}
},
methods: {
@@ -419,6 +510,23 @@
copyKey(key) {
navigator.clipboard.writeText(key).then(() => this.toast('Скопировано', 'success'));
},
// ─── Статистика ──────────────────────────────
async fetchStats() {
const data = await this.request(`/stats/summary`, 'GET', { days: this.statsDays });
if (data) this.statsData = data.groups || [];
await this.fetchEventLog();
},
async fetchEventLog() {
const data = await this.request('/stats/log', 'GET', { limit: 100 });
if (data) this.eventLog = data;
},
formatTime(iso) {
if (!iso) return '';
const d = new Date(iso);
const pad = n => String(n).padStart(2, '0');
return `${pad(d.getDate())}.${pad(d.getMonth()+1)} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
},
},
async mounted() { if (this.apiKey) await this.initApp(); }
}).mount('#app')