Viacheslav/hackaton-2025-web-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

some updates

Browse Source
This commit is contained in:
MoonDev
2025-05-08 22:05:05 +03:00
parent 292f38e10a
commit de77558e31
8 changed files with 302 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
package-lock.json generated
View File

@@ -8,6 +8,7 @@
"name": "hackaton-form",
"version": "0.1.0",
"dependencies": {
"@flaticon/flaticon-uicons": "^3.3.1",
"@headlessui/react": "^2.2.2",
"@heroicons/react": "^2.2.0",
"@testing-library/dom": "^10.4.0",
@@ -2487,6 +2488,15 @@
"npm": ">=9.0.0"
}
},
"node_modules/@flaticon/flaticon-uicons": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/@flaticon/flaticon-uicons/-/flaticon-uicons-3.3.1.tgz",
"integrity": "sha512-WN2zuECCdjuGBQrjzN0kpeSygzC5fgF8Q7pDR+FUuGtYWczSdIhIwoD+/fKBEfwqKfNIMZ1WouidevGQ4OJORg==",
"license": "SEE LICENSE IN LICENSE",
"optionalDependencies": {
"esbuild-linux-64": "^0.14.5"
}
},
"node_modules/@floating-ui/core": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.0.tgz",
@@ -7437,6 +7447,22 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/esbuild-linux-64": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.54.tgz",
"integrity": "sha512-EgjAgH5HwTbtNsTqQOXWApBaPVdDn7XcK+/PtJwZLT1UmpLoznPd8c5CxqsH2dQK3j05YsB3L17T8vE7cp4cCg==",
"cpu": [
"x64"
],
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=12"
}
},
"node_modules/escalade": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",

1
package.json
View File

@@ -3,6 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@flaticon/flaticon-uicons": "^3.3.1",
"@headlessui/react": "^2.2.2",
"@heroicons/react": "^2.2.0",
"@testing-library/dom": "^10.4.0",

79
src/dashboard/NetworkMonitor.js
View File

@@ -1,4 +1,5 @@
import React, { useState } from "react";
import { ArrowDownTrayIcon, ArrowUpTrayIcon } from "@heroicons/react/24/outline";
export default function NetworkMonitor(args) {
const [selectedTab, setSelectedTab] = useState("interfaces");
@@ -9,6 +10,37 @@ export default function NetworkMonitor(args) {
const handleTabClick = (tabId) => {
setSelectedTab(tabId);
};
const [NetIfaces, setNetIfaces] = useState(
[
{
name: "Ethernet 6",
wireless: false,
mac: "FF-FF-FF-FF-FF-FF",
ip: "192.168.2.5",
mask: "255.255.255.0",
mtu: 1500,
speed_mbit: 2500,
status: true,
trafic_down_mb: 100,
trafic_up_mb: 1000,
},
{
name: "Wireles Adapter 1",
wireless: true,
mac: "F1-FF-0F-FF-1F-F0",
ip: "192.168.1.5",
mask: "255.255.255.0",
mtu: 1500,
speed_mbit: 0,
status: false,
trafic_down_mb: 35,
trafic_up_mb: 2,
}
]
);
return (
<>
<div className="flex justify-center md:justify-start">
@@ -18,8 +50,8 @@ export default function NetworkMonitor(args) {
<button
key={tab.id}
onClick={() => handleTabClick(tab.id)}
className={`rounded-lg px-4 py-2 text-gray-900 dark:text-gray-100 ${selectedTab === tab.id
? "bg-gray-200 dark:bg-gray-800 text-orange-600 font-semibold"
className={`rounded-lg px-4 py-2 text-gray-900 dark:text-gray-100 font-semibold ${selectedTab === tab.id
? "bg-gray-200 dark:bg-gray-800 text-orange-600"
: "hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-600 duration-300"
}`}
>
@@ -29,7 +61,50 @@ export default function NetworkMonitor(args) {
</div>
</div>
<div className="mt-6">
{selectedTab === "interfaces" && (
<>
<div className="flex flex-wrap gap-2 flex-col anim-pop">
{NetIfaces.map((iface, index) => (
<div className="max-w-full md:max-w-[420px] min-h-[150px] border bg-gray-100 border-gray-100 dark:border-gray-900 dark:bg-gray-900 p-4 rounded-lg shadow-sm flex flex-col" key={"iface" + index}>
<div className="flex gap-3">
{!iface.wireless &&
<i className="fi fi-rr-ethernet text-2xl dark:text-gray-200"></i>
}
{iface.wireless &&
<i className="fi fi-rr-wifi text-2xl dark:text-gray-200"></i>
}
<div>
<div className="flex gap-3 items-center">
<span className="block text-lg font-bold text-gray-800 dark:text-gray-200">{iface.name}</span>
<span className={"h-3 w-3 " + (iface.status ? "bg-green-500" : "bg-red-500") + " rounded-full shadow-lg " + (iface.status ? "shadow-green-500/50" : "shadow-red-500/50") + " animate-pulse"} />
</div>
<span className="block text-sm font-normal text-gray-800 dark:text-gray-200"><span className="font-semibold">{iface.ip}</span> • <span className="text-gray-600 dark:text-gray-300">{iface.mac}</span></span>
<div className="flex gap-5 items-center mt-3">
<span className="flex gap-2 items-center">
<ArrowDownTrayIcon className="h-5 text-gray-700 dark:text-gray-300" />
<span className="text-gray-700 dark:text-gray-300">{iface.trafic_down_mb} МБ</span>
</span>
<span className="flex gap-2 items-center">
<ArrowUpTrayIcon className="h-5 text-gray-700 dark:text-gray-300" />
<span className="text-gray-700 dark:text-gray-300">{iface.trafic_up_mb} МБ</span>
</span>
</div>
<span className="flex gap-2 items-center mt-1">
<span className="text-gray-700 dark:text-gray-300">{iface.speed_mbit} Мбит/c</span>
</span>
</div>
</div>
</div>
))}
</div>
</>
)}
</div>
</>
);

204
src/dashboard/SystemMonitor.js
View File

@@ -1,9 +1,8 @@
import React, { useState } from "react";
import Gauge from "../misc/Gauge";
import { InformationCircleIcon, ComputerDesktopIcon, CodeBracketIcon, CpuChipIcon, ClockIcon, ChevronDoubleRightIcon } from "@heroicons/react/24/outline";
import { InformationCircleIcon, ComputerDesktopIcon, CodeBracketIcon, CpuChipIcon, ClockIcon, ChevronDoubleRightIcon, } from "@heroicons/react/24/outline";
import CpuChart from "../misc/CpuChart";
const SystemMonitor = () => {
// Состояние для отслеживания выбранной вкладки
const [selectedTab, setSelectedTab] = useState("system");
@@ -37,21 +36,74 @@ const SystemMonitor = () => {
arch: "AMD64",
cpu_load: 20,
mem_load: 80,
cpu_model:"AMD Ryzen 5 5600x 6-core processor",
cpu_model: "AMD Ryzen 5 5600x 6-core processor",
cpu_cores: 6,
cpu_threads: 12,
memory_gb: 32,
cpu_chart:
{
"10:00":40,
"11:00":34,
"12:00":56,
"13:00":60,
"14:00":80
"1": 20,
"2": 14,
"3": 6,
"4": 5,
"5": 10,
"6": 10,
"7": 0,
"8": 0
}
});
const [Devices, setDevices] = useState({
cpu: [{
vendor: "AMD",
name: "AMD Ryzen 7 5700X 8-Core Processor",
desc: "AMD64 Ryzen Processor",
arch: "9",
freq: 3400,
max_freq: 3400,
cores: 8,
threads: 16,
status: "OK"
}],
graphics: [{
name: "AMD Radeon RX 6700 XT",
desc: "AMD Radeon RX 6700 XT",
driver: "1.1.4",
status: "OK"
}],
drives: [{
name: "INTEL SSD",
desc: "INTEL SSD ABCDEFGH123457",
serial: "ABCDEFGH123457",
interface: "IDE",
size_gb: 238,
status: "OK"
}],
motherboard: [{
name: "B550M PG Riptide",
vendor: "ASRock",
model: "B550M PG Riptide",
serial: "ABCDEFGH123457"
},
{
name: "BIOS",
vendor: "American Megatrends LLC",
version: "1.1.5",
date: "20240111"
}],
usb: [{
name: "AMD USB 3.10 - 1.10 xxxxx",
vendor: "AMD",
id: "PCI/VEN_1022&....",
status: "OK"
}],
audio: [{
name: "AMD Audio device",
vendor: "AMD",
status: "OK"
}]
});
// Функция для обработки клика по вкладке
const handleTabClick = (tabId) => {
@@ -67,8 +119,8 @@ const SystemMonitor = () => {
<button
key={tab.id}
onClick={() => handleTabClick(tab.id)}
className={`rounded-lg px-4 py-2 text-gray-900 dark:text-gray-100 ${selectedTab === tab.id
? "bg-gray-200 dark:bg-gray-800 text-orange-600 font-semibold"
className={`rounded-lg px-4 py-2 text-gray-900 dark:text-gray-100 font-semibold ${selectedTab === tab.id
? "bg-gray-200 dark:bg-gray-800 text-orange-600"
: "hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-600 duration-300"
}`}
>
@@ -79,8 +131,8 @@ const SystemMonitor = () => {
</div>
<div className="mt-6">
{selectedTab === "system" && (
<div className="flex gap-3 flex-wrap flex-col md:flex-row dark:text-gray-100">
<div className="md:basis-3/6 w-full border border-gray-300 dark:border-gray-700 p-4 rounded-lg shadow-sm">
<div className="flex gap-3 flex-wrap flex-col md:flex-row dark:text-gray-100 anim-pop">
<div className="md:basis-3/6 w-full border bg-gray-100 border-gray-100 dark:border-gray-900 dark:bg-gray-900 p-4 rounded-lg shadow-sm">
<h1 className="text-lg font-semibold">Информация о системе</h1>
<div className="flex flex-col gap-2 mt-3">
<div className="flex items-start gap-2">
@@ -120,20 +172,20 @@ const SystemMonitor = () => {
</div>
</div>
</div>
<div className="md:basis-1/6 border border-gray-300 dark:border-gray-700 p-4 rounded-lg shadow-sm">
<div className="md:basis-1/6 border bg-gray-100 border-gray-100 dark:border-gray-900 dark:bg-gray-900 p-4 rounded-lg shadow-sm">
<h1 className="text-lg font-semibold dark:text-gray-100">Загрузка CPU</h1>
<div className=" flex flex-col items-center">
<Gauge value={SystemInfo.cpu_load} title="%" color={PercentColor(SystemInfo.cpu_load)} className="mt-3" />
</div>
</div>
<div className="md:basis-1/6 border border-gray-300 dark:border-gray-700 p-4 rounded-lg shadow-sm">
<div className="md:basis-1/6 border bg-gray-100 border-gray-100 dark:border-gray-900 dark:bg-gray-900 p-4 rounded-lg shadow-sm">
<h1 className="text-lg font-semibold dark:text-gray-100">Занято ОЗУ</h1>
<div className=" flex flex-col items-center">
<Gauge value={SystemInfo.mem_load} title="%" color={PercentColor(SystemInfo.mem_load)} className="mt-3" />
</div>
</div>
<div className="md:basis-3/6 w-full border border-gray-300 dark:border-gray-700 p-4 rounded-lg shadow-sm">
<div className="md:basis-3/6 w-full border bg-gray-100 border-gray-100 dark:border-gray-900 dark:bg-gray-900 p-4 rounded-lg shadow-sm">
<h1 className="text-lg font-semibold">Аппаратное обеспечение</h1>
<div className="flex flex-col gap-2 mt-3">
<div className="flex items-start gap-2">
@@ -169,8 +221,8 @@ const SystemMonitor = () => {
</div>
</div>
<div className="md:basis-[34.3%] w-full border border-gray-300 dark:border-gray-700 p-4 rounded-lg shadow-sm">
<h1 className="text-lg font-semibold">График загрузки CPU</h1>
<div className="md:basis-[34.3%] w-full border bg-gray-100 border-gray-100 dark:border-gray-900 dark:bg-gray-900 p-4 rounded-lg shadow-sm">
<h1 className="text-lg font-semibold">Загрузка ядер CPU, %</h1>
<div className="flex flex-col gap-2 mt-3">
<CpuChart chart_dataset={SystemInfo.cpu_chart} />
</div>
@@ -178,7 +230,123 @@ const SystemMonitor = () => {
</div>
)}
{selectedTab === "deviceManager" && (
<p>Вот содержимое вкладки "Диспетчер устройств"</p>
<div className="flex flex-col gap-8 text-orange-500 anim-pop">
<div>
<div className="flex items-center gap-2">
<i className="fi fi-rr-microchip text-2xl text-orange-500"></i>
<h1 className="text-lg font-semibold">Процессоры</h1>
</div>
<div className="md:ml-8 flex flex-wrap gap-2 flex-col md:flex-row mt-2">
{Devices.cpu.map((cpu, index) => (
<div className="min-w-full md:min-w-[420px] min-h-[150px] border bg-gray-100 border-gray-100 dark:border-gray-900 dark:bg-gray-900 p-4 rounded-lg shadow-sm flex flex-col" key={"cpu" + index}>
<span className="text-lg font-bold text-gray-800 dark:text-gray-200">{cpu.name}</span>
<span className="text-sm font-normal text-gray-800 dark:text-gray-200">{cpu.desc}</span>
<span className="text-md font-normal text-gray-800 dark:text-gray-200 mt-3"><span className="font-bold">Архитектура:</span> {cpu.arch}</span>
<span className="text-md font-normal text-gray-800 dark:text-gray-200"><span className="font-bold">Частота:</span> {cpu.freq} Mhz</span>
<span className="text-md font-normal text-gray-800 dark:text-gray-200"><span className="font-bold">Ядра:</span> {cpu.cores}</span>
<span className="text-md font-normal text-gray-800 dark:text-gray-200"><span className="font-bold">Потоки:</span> {cpu.threads}</span>
<span className="text-md font-normal text-gray-800 dark:text-gray-200 mt-3"><span className="font-bold">Статус:</span> {cpu.status}</span>
</div>
))}
</div>
</div>
<div>
<div className="flex items-center gap-2">
<i className="fi fi-rr-screen text-2xl text-orange-500"></i>
<h1 className="text-lg font-semibold">Графика</h1>
</div>
<div className="md:ml-8 flex flex-wrap gap-2 flex-col md:flex-row mt-2">
{Devices.graphics.map((cpu, index) => (
<div className="min-w-full md:min-w-[420px] min-h-[150px] border bg-gray-100 border-gray-100 dark:border-gray-900 dark:bg-gray-900 p-4 rounded-lg shadow-sm flex flex-col" key={"graphics" + index}>
<span className="text-lg font-bold text-gray-800 dark:text-gray-200">{cpu.name}</span>
<span className="text-sm font-normal text-gray-800 dark:text-gray-200">{cpu.desc}</span>
<span className="text-md font-normal text-gray-800 dark:text-gray-200 mt-3"><span className="font-bold">Драйвер:</span> {cpu.driver}</span>
<span className="text-md font-normal text-gray-800 dark:text-gray-200 mt-3"><span className="font-bold">Статус:</span> {cpu.status}</span>
</div>
))}
</div>
</div>
<div>
<div className="flex items-center gap-2">
<i className="fi fi-rr-hdd text-2xl text-orange-500"></i>
<h1 className="text-lg font-semibold">Диски</h1>
</div>
<div className="md:ml-8 flex flex-wrap gap-2 flex-col md:flex-row mt-2">
{Devices.drives.map((cpu, index) => (
<div className="min-w-full md:min-w-[420px] min-h-[150px] border bg-gray-100 border-gray-100 dark:border-gray-900 dark:bg-gray-900 p-4 rounded-lg shadow-sm flex flex-col" key={"drives" + index}>
<span className="text-lg font-bold text-gray-800 dark:text-gray-200">{cpu.name}</span>
<span className="text-sm font-normal text-gray-800 dark:text-gray-200">{cpu.desc}</span>
<span className="text-md font-normal text-gray-800 dark:text-gray-200 mt-3"><span className="font-bold">Сер. номер:</span> {cpu.serial}</span>
<span className="text-md font-normal text-gray-800 dark:text-gray-200"><span className="font-bold">Интерфейс:</span> {cpu.interface}</span>
<span className="text-md font-normal text-gray-800 dark:text-gray-200"><span className="font-bold">Объем:</span> {cpu.size_gb} ГБ</span>
<span className="text-md font-normal text-gray-800 dark:text-gray-200 mt-3"><span className="font-bold">Статус:</span> {cpu.status}</span>
</div>
))}
</div>
</div>
<div>
<div className="flex items-center gap-2">
<i className="fi fi-rr-category-alt text-2xl text-orange-500"></i>
<h1 className="text-lg font-semibold">Материнская плата</h1>
</div>
<div className="md:ml-8 flex flex-wrap gap-2 flex-col md:flex-row mt-2">
{Devices.motherboard.map((cpu, index) => (
<div className="min-w-full md:min-w-[420px] min-h-[150px] border bg-gray-100 border-gray-100 dark:border-gray-900 dark:bg-gray-900 p-4 rounded-lg shadow-sm flex flex-col" key={"motherboard" + index}>
<span className="text-lg font-bold text-gray-800 dark:text-gray-200">{cpu.name}</span>
<span className="text-sm font-normal text-gray-800 dark:text-gray-200">{cpu.vendor}</span>
{cpu.version &&
<span className="text-md font-normal text-gray-800 dark:text-gray-200 mt-3"><span className="font-bold">Версия:</span> {cpu.version}</span>
}
{cpu.model &&
<span className="text-md font-normal text-gray-800 dark:text-gray-200 mt-3"><span className="font-bold">Модель:</span> {cpu.model}</span>
}
{cpu.date &&
<span className="text-md font-normal text-gray-800 dark:text-gray-200"><span className="font-bold">Дата:</span> {cpu.date}</span>
}
{cpu.serial &&
<span className="text-md font-normal text-gray-800 dark:text-gray-200"><span className="font-bold">Сер. номер:</span> {cpu.serial}</span>
}
</div>
))}
</div>
</div>
<div>
<div className="flex items-center gap-2">
<i className="fi fi-rr-usb-pendrive text-2xl text-orange-500"></i>
<h1 className="text-lg font-semibold">USB</h1>
</div>
<div className="md:ml-8 flex flex-wrap gap-2 flex-col md:flex-row mt-2">
{Devices.usb.map((cpu, index) => (
<div className="min-w-full md:min-w-[420px] min-h-[150px] border bg-gray-100 border-gray-100 dark:border-gray-900 dark:bg-gray-900 p-4 rounded-lg shadow-sm flex flex-col" key={"drives" + index}>
<span className="text-lg font-bold text-gray-800 dark:text-gray-200">{cpu.name}</span>
<span className="text-sm font-normal text-gray-800 dark:text-gray-200">{cpu.vendor}</span>
<span className="text-md font-normal text-gray-800 dark:text-gray-200 mt-3"><span className="font-bold">ID:</span> {cpu.id}</span>
</div>
))}
</div>
</div>
<div>
<div className="flex items-center gap-2">
<i className="fi fi-rr-volume text-2xl text-orange-500"></i>
<h1 className="text-lg font-semibold">Звук</h1>
</div>
<div className="md:ml-8 flex flex-wrap gap-2 flex-col md:flex-row mt-2">
{Devices.audio.map((cpu, index) => (
<div className="min-w-full md:min-w-[420px] min-h-[150px] border bg-gray-100 border-gray-100 dark:border-gray-900 dark:bg-gray-900 p-4 rounded-lg shadow-sm flex flex-col" key={"drives" + index}>
<span className="text-lg font-bold text-gray-800 dark:text-gray-200">{cpu.name}</span>
<span className="text-sm font-normal text-gray-800 dark:text-gray-200">{cpu.name}</span>
<span className="text-md font-normal text-gray-800 dark:text-gray-200 mt-3"><span className="font-bold">Статус:</span> {cpu.status}</span>
</div>
))}
</div>
</div>
</div>
)}
</div>

BIN
src/img/icon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

3
src/index.css
View File

@@ -1,6 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "~@flaticon/flaticon-uicons/css/all/all";
body,html, #root{
height: 100%;
@@ -18,5 +19,5 @@ body,html, #root{
}
.anim-pop {
animation: anim-pop .3s ease-out;
animation: anim-pop .2s ease-in;
}

10
src/misc/CpuChart.js
View File

@@ -4,18 +4,18 @@ import {
CategoryScale,
LinearScale,
PointElement,
LineElement,
BarElement,
Title,
Tooltip,
Legend,
} from 'chart.js';
import { Line } from 'react-chartjs-2';
import { Bar } from 'react-chartjs-2';
ChartJS.register(
CategoryScale,
LinearScale,
PointElement,
LineElement,
BarElement,
Title,
Tooltip,
Legend
@@ -45,10 +45,10 @@ export default function CpuChart({chart_dataset}) {
label: 'Загрузка CPU',
data: Object.values(chart_dataset),
borderColor: '#ff9f43',
backgroundColor: 'rgba(255, 99, 132, 0.5)',
backgroundColor: '#ff9f43',
}
],
};
return <Line options={options} data={data} />;
return <Bar options={options} data={data} />;
}

9
src/pages/Dashboard.js
View File

@@ -7,6 +7,7 @@ import SystemMonitor from "../dashboard/SystemMonitor"
import NetworkMonitor from "../dashboard/NetworkMonitor"
import React, { useState, useEffect } from "react";
import Logo from "../img/icon.ico";
const user = {
name: 'Administrator',
@@ -60,13 +61,13 @@ export default function Dashboard(args) {
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="flex h-16 items-center justify-between">
<div className="flex items-center">
<div className="shrink-0">
<Link className="shrink-0 bg-gray-100 rounded-lg h-[40px]" to="/dashboard">
<img
alt="Your Company"
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500"
className="size-8"
src={Logo}
className="h-full"
/>
</div>
</Link>
<div className="hidden md:block">
<div className="ml-10 flex items-baseline space-x-4">
{navigation.map((item) => (