You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
96 lines
4.9 KiB
96 lines
4.9 KiB
"use client";
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
// These styles apply to every route in the application
|
|
import '../app/globals.css'
|
|
|
|
type LogData = {
|
|
fileName: string;
|
|
accessCount: number;
|
|
};
|
|
|
|
interface TranslationDict {
|
|
[key: string]: string;
|
|
}
|
|
|
|
const LogTable: React.FC = () => {
|
|
const [logData, setLogData] = useState<LogData[]>([]);
|
|
|
|
const translationDict: TranslationDict = {
|
|
'to_africa_for_gold.mp3': 'В Африку за золотом',
|
|
'event_industry_in_action.mp3': 'Event - индустрия в действии. Как стоить империю в этой сфере и сколько можно заработать',
|
|
'i_live_the_way_I_want_I_also_earn.mp3':'Живу как хочу, ещё и зарабатываю. Как стать ведущим',
|
|
'Your-opportunities-today.mp3':'Твои возможности сегодня',
|
|
'Taurida_What-can-you-learn-on-the-Black-Sea-coast.mp3':'Таврида. Чему можно научиться на берегу Черного моря',
|
|
'Digital_communications_and_youth.mp3':'Цифровые коммуникации и молодежь',
|
|
'Special-issue-How-%D1%81loser-the-grant.mp3':'Спецвыпуск «Как выиграть грант»',
|
|
'Pass_exam_without_fear.mp3':'Как сдать экзамен без страха',
|
|
'where-to-go-this-summer.mp3':'Дайджест: куда поехать этим летом?',
|
|
'Fears_and_living_with_them.mp3':'Страхи и жизнь с ними',
|
|
'Страхи и жизнь с ними':'Спецвыпуск подкаста в Дубраве',
|
|
'what_to_watch.mp3':'Что посмотреть?',
|
|
'FoodWhatHowAndWhereDoWeEat.mp3':'Еда. Что, как и где мы едим?',
|
|
'WhatGearDoYouWearAndWhereToBuyIt.mp3':'Какой шмот ты носишь и где его покупать?',
|
|
'Lets_go_Why_Argentina.mp3':'Почему Аргентина?',
|
|
'Money_cards_and_black_dollar_exchange_rat.mp3':'Аргентина: деньги, карты и чёрный курс доллара',
|
|
'Argentina-What-for-what.mp3':'Аргентина: Что почем?',
|
|
'Make_money_on_a_childhood_dream_Aeromodelling_centers.mp3':'Заработать на мечте детства? Центры авиамоделирования',
|
|
'is_it_possible_to_make_money_on_tricks.mp3':'Можно ли заработать на фокусах?',
|
|
'Like_to_listen_in_Dubrava.mp3':'Спецвыпуск подкаста в Дубраве',
|
|
// Добавьте другие пары английское/русское название при необходимости
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetch('/api/log')
|
|
.then((response) => response.json())
|
|
.then((data: string[]) => {
|
|
const parsedData: LogData[] = data.map((item: string) => {
|
|
const [fileName, accessCountStr] = item.split(",");
|
|
const accessCount: number = parseInt(accessCountStr);
|
|
return { fileName, accessCount };
|
|
});
|
|
setLogData(parsedData);
|
|
});
|
|
}, []);
|
|
|
|
// Добавляем useEffect для обновления данных при изменении logData
|
|
useEffect(() => {
|
|
// Можете добавить здесь дополнительную логику, если необходимо
|
|
}, [logData]);
|
|
|
|
return (
|
|
<div className="m-3 card lg:card-side bg-base-100 shadow-xl">
|
|
<div className="flex flex-col items-center bg-white border border-gray-200 rounded-lg shadow md:flex-row ">
|
|
<div className="mb-3 object-cover rounded-t-lg md:w-auto md:min-w-64 md:max-w-96 md:rounded-s-lg md:m-3">
|
|
<div>
|
|
<h2>Статистика доступа к mp3 файлам</h2>
|
|
<div className="container mx-auto p-6">
|
|
<table className="min-w-full bg-white border border-gray-300">
|
|
<thead>
|
|
<tr>
|
|
<th className="py-2 px-4 border-b">№</th>
|
|
<th className="py-2 px-4 border-b">Имя файла</th>
|
|
<th className="py-2 px-4 border-b">Подкаст</th>
|
|
<th className="py-2 px-4 border-b">Количество доступов</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{logData.map((item, index) => (
|
|
<tr key={index}>
|
|
<td className="py-2 px-4 border-b">{index + 1}</td>
|
|
<td className="py-2 px-4 border-b">{item.fileName}</td>
|
|
<td className="py-2 px-4 border-b">{translationDict[item.fileName]}</td>
|
|
<td className="py-2 px-4 border-b">{item.accessCount}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LogTable;
|
|
|