added rendering of clients from data file

.gitignore

@@ -2,22 +2,22 @@
 
 # dependencies
 /node_modules
-/.pnp
+# /.pnp
-.pnp.js
+# .pnp.js
 
 # testing
-/coverage
+# /coverage
 
 # production
-/build
+# /build
 
 # misc
-.DS_Store
+# .DS_Store
-.env.local
+# .env.local
-.env.development.local
+# .env.development.local
-.env.test.local
+# .env.test.local
-.env.production.local
+# .env.production.local
 
-npm-debug.log*
+# npm-debug.log*
-yarn-debug.log*
+# yarn-debug.log*
-yarn-error.log*
+# yarn-error.log*

src/App.css

@@ -1,38 +1,11 @@
-.App {
+body {
-  text-align: center;
+    width: 100%;
+    height: 100%;
+    background-color: rgb(44, 44, 44);
 }
 
-.App-logo {
+#root {
-  height: 40vmin;
+    width: 100%;
-  pointer-events: none;
+    display: flex;
-}
+    justify-content: center;
-
+}
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js

@@ -1,25 +0,0 @@
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-
-export default App;

src/App.jsx

@@ -0,0 +1,8 @@
+import './App.css';
+import { MainPage } from './pages/Home.jsx';
+
+export default function App() {
+    return (
+        <MainPage/>
+    );
+} 

src/App.test.js

@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

src/components/Client/Client.css

@@ -0,0 +1,104 @@
+.acc-icon {
+    border-radius: 30px;
+    background-image: 'client_icon.svg';
+}
+
+.circle {
+    width: 40px;
+    height: 40px;
+    border: 2px solid none;
+    border-radius: 50%;
+    background: #e1e1e1;
+    display: flex;
+}
+
+.circle svg {
+    margin: auto;
+}
+
+.device {
+    height: 90px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: #333;
+    color: white;
+    padding: 10px;
+    border-top: rgb(94, 93, 93) 1px solid;
+    flex-wrap: wrap;
+}
+
+.device .info {
+    width: 270px;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+}
+
+.device .avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    margin-right: 10px;
+}
+
+.device .ip {
+    color: #959393;
+    font-size: 0.9rem;
+}
+
+.device .details .name {
+    font-weight: bold;
+}
+
+.info .lst-time {
+    font-size: 0.8rem;
+    color: #959393;
+    align-self: self-end;
+}
+
+.device .data {
+    display: flex;
+    align-items: center;
+}
+
+.device .data div {
+    display: flex;
+    flex-direction: column;
+    margin: 0 10px;
+}
+
+.data .total {
+    color: #959393;
+    font-size: 0.8rem;
+}
+
+.device .controls {
+    display: flex;
+    align-items: center;
+}
+
+.device .controls button {
+    background: none;
+    border: none;
+    width: 45px;
+    height: 45px;
+    cursor: pointer;
+    padding: 5px 10px;
+    margin: 0 10px;
+    background-color: rgb(94, 93, 93);
+    border-radius: 30%;
+}
+
+.device .controls button:hover {
+    background-color: #830202;
+}
+
+.device .toggle.red {
+    background-color: red;
+    border-radius: 50%;
+}
+
+.controls button svg {
+    margin: auto;
+}

src/components/Client/Client.jsx

@@ -0,0 +1,88 @@
+import React from "react"
+import './Client.css'
+import './checkbox.css'
+import TrafficFormatter from "../DataFormatter/TrafficFormatter"
+import TimeFormatter from "../DataFormatter/TimeFormatter"
+
+export default function Client({deviceName, ip, lastConnect, uploadSpeed, downloadSpeed, downloadTraffic, uploadTraffic}) {
+  return (
+    <>
+  <div class="device">
+    <div className="info">
+    <div className="circle">
+      <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+        width="27px" height="27px" viewBox="0 0 512.000000 512.000000"
+      preserveAspectRatio="xMidYMid meet">
+        <g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+        fill="#000000" stroke="none">
+          <path d="M2420 5114 c-322 -40 -591 -171 -815 -398 -199 -201 -313 -415 -372
+          -696 -24 -118 -24 -382 0 -500 59 -281 174 -496 372 -696 201 -203 421 -322
+          705 -381 117 -24 380 -24 502 0 270 54 494 174 694 372 202 199 322 421 381
+          705 24 118 24 382 0 500 -39 185 -110 356 -212 510 -63 95 -258 291 -351 352
+          -161 107 -335 180 -506 213 -81 16 -328 28 -398 19z"/>
+          <path d="M2023 2104 c-560 -68 -1065 -385 -1390 -874 -191 -286 -300 -624
+          -319 -985 -6 -111 -5 -124 15 -163 14 -28 34 -48 61 -62 39 -20 54 -20 2170
+          -20 2116 0 2131 0 2170 20 27 14 47 34 61 62 20 39 21 52 15 163 -26 493 -214
+          925 -556 1279 -324 335 -742 539 -1199 586 -151 15 -889 11 -1028 -6z"/>
+        </g>
+      </svg>
+    </div>
+          <div className="details">
+            <div className="name">{deviceName}</div>
+            <div className="ip">{ip}</div>
+        </div>
+        <div class="lst-time"><TimeFormatter seconds={lastConnect}/></div>
+
+    </div>
+    <div className="data">
+        <div className="download">
+            <span className="rate"><TrafficFormatter bytes = {downloadSpeed}/></span>
+            <span className="total"><TrafficFormatter bytes={downloadTraffic}/></span>
+        </div>
+        <div className="upload">
+            <span className="rate"><TrafficFormatter bytes={uploadSpeed}/></span>
+            <span className="total"><TrafficFormatter bytes={uploadTraffic}/></span>
+        </div>
+    </div>
+    <div className="controls">
+      <label class="switch">
+        <input type="checkbox"/>
+        <span class="slider"></span>
+      </label>        
+      <button className="download">
+        <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="27px" height="27px" viewBox="0 0 512.000000 512.000000" preserveAspectRatio="xMidYMid meet">
+          <g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)" fill="#ccc" stroke="none">
+            <path d="M2460 4668 c-25 -14 -58 -44 -75 -67 l-30 -43 -3 -1164 c-1 -640 -6 -1164 -10 -1164 -4 0 -169 162 -367 361 -198 198 -371 366 -385 373 -39 21 -104
+            28 -147 17 -92 -25 -152 -97 -161 -194 -9 -97 -19 -86 600 -703 563 -562 574 -572 626 -584 41 -9 63 -9 105 0 51 12 62 22 620 579 377 376 574 580 587 607 77 
+            159 -77 340 -250 294 -40 -10 -84 -50 -415 -381 -204 -203 -374 -369 -378 -369 -4 0 -8 524 -9 1163 l-3 1164 -27 39 c-44 62 -90 88 -167 92 -55 3 -74 -1 -111 -20z"/>
+            <path d="M590 1061 c-104 -32 -160 -106 -160 -211 0 -84 53 -161 132 -194 33 -14 248 -16 2000 -16 1889 0 1965 1 2003 19 77 36 125 111 125 196 0 83 -39 148 -115 
+            188 l-40 22 -1960 2 c-1078 1 -1971 -2 -1985 -6z"/>
+          </g>
+        </svg>
+      </button>
+      <button className="delete">
+        <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="27px" height="27px" viewBox="0 0 512.000000 512.000000" preserveAspectRatio="xMidYMid meet">
+          <g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)" fill="#ccc" stroke="none">
+            <path d="M2100 4737 c-78 -18 -142 -52 -203 -107 -102 -93 -137 -194 -137 -392 l0 -127 -582 -3 c-568 -3 -584 -4 -618 -24 -52 -30 -82 -88 -77 -147 5 -54 27 -91 77
+            -124 31 -22 44 -23 192 -23 118 0 160 -3 163 -12 2 -7 45 -641 94 -1408 57 -873 96 -1425 106 -1475 48 -242 228 -432 475 -502 61 -17 122 -18 975 -18 1023 0 961 -4
+            1116 76 181 94 308 273 339 476 6 38 49 691 96 1453 47 762 87 1391 89 1398 3 9 45 12 163 12 148 0 161 1 192 23 48 32 72 69 77 119 7 58 -23 118 -74 149 l-38 24 -581
+            3 -582 3 -4 152 c-4 128 -8 161 -27 210 -43 110 -142 206 -258 250 -56 21 -73 22 -488 24 -309 1 -445 -2 -485 -10z m911 -355 c29 -32 29 -34 29 -152 l0 -120 -480 0 
+            -480 0 0 119 c0 113 1 121 25 150 14 16 36 32 48 34 12 3 203 4 425 3 l404 -1 29 -33z m869 -624 c0 -13 -38 -642 -85 -1398 -58 -933 -91 -1391 -100 -1426 -29 -103 
+            -120 -196 -218 -226 -33 -10 -242 -13 -927 -13 l-885 0 -55 26 c-31 14 -72 40 -91 57 -43 38 -96 133 -104 188 -6 41 -165 2719 -165 2779 l0 35 1315 0 1315 0 0 -22z"/>
+            <path d="M1840 3228 c-18 -13 -43 -36 -54 -51 -21 -28 -21 -31 -21 -937 0 -906 0 -909 21 -937 73 -98 195 -98 268 0 21 28 21 31 21 937 0 906 0 909 -21 937 -35 48 
+            -82 73 -134 73 -32 0 -57 -7 -80 -22z"/>
+            <path d="M2480 3228 c-18 -13 -43 -36 -54 -51 -21 -28 -21 -31 -21 -937 0 -906 0 -909 21 -937 73 -98 195 -98 268 0 21 28 21 31 21 937 0 906 0 909 -21 937 -35 48 
+            -82 73 -134 73 -32 0 -57 -7 -80 -22z"/>
+            <path d="M3120 3228 c-18 -13 -43 -36 -54 -51 -21 -28 -21 -31 -21 -937 0 -906 0 -909 21 -937 73 -98 195 -98 268 0 21 28 21 31 21 937 0 906 0 909 -21 937 -35 48 
+            -82 73 -134 73 -32 0 -57 -7 -80 -22z"/>
+          </g>
+        </svg>
+      </button>
+    </div>
+</div>
+
+    {/* <ClientIcon /> */}
+    {/* <img src="./client_icon.svg" alt="Клиент" width={100} height={100}/> */}
+    </>
+  )
+}

src/components/Client/checkbox.css

@@ -0,0 +1,61 @@
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+}
+
+.switch input {
+    display: none;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: .4s;
+    transition: .4s;
+    border-radius: 34px;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+    border-radius: 50%;
+}
+
+input:checked+.slider {
+    background-color: #830202;
+}
+
+input:focus+.slider {
+    box-shadow: 0 0 1px #830202;
+}
+
+input:checked+.slider:before {
+    -webkit-transform: translateX(26px);
+    -ms-transform: translateX(26px);
+    transform: translateX(26px);
+}
+
+
+/* Rounded sliders */
+
+.slider.round {
+    border-radius: 34px;
+}
+
+.slider.round:before {
+    border-radius: 50%;
+}

src/components/ClientList/ClientList.css

@@ -0,0 +1,28 @@
+#clients {
+    border-radius: 5px;
+    background-color: #333;
+    color: white;
+}
+
+#clients-header {
+    padding: 10px 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+#new-device {
+    color: white;
+    background: none;
+    border: 1px solid rgb(94, 93, 93);
+    cursor: pointer;
+    padding: 10px 15px;
+    margin: 0 10px;
+    background-color: #333;
+    border-radius: 5px;
+}
+
+#new-device:hover {
+    background-color: #830202;
+    border: #830202;
+}

src/components/ClientList/ClientList.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import Client from "../Client/Client";
+import clientsData from '../../data/clients.json'
+import './ClientList.css'
+
+export default function ClientsList() {
+  return <div id="clients">
+    <div id="clients-header">
+      <h2>Клиенты</h2>
+      <button id="new-device">Создать</button>
+    </div>
+    {clientsData.map(client => (
+      <Client deviceName={client.deviceName} ip={client.ip} lastConnect={client.lastConnect} uploadSpeed={client.uploadSpeed} downloadSpeed={client.downloadSpeed} 
+      uploadTraffic={client.uploadTraffic} downloadTraffic={client.downloadTraffic}/>
+    ))}
+  </div>
+}

src/components/DataFormatter/TimeFormatter.jsx

@@ -0,0 +1,43 @@
+import React from "react";
+
+// отвечает за преобразование поступающего в секундах значения в минуты, часы, дни
+export default function TimeFormatter ( {seconds, withAgo = true }) {
+  if (seconds === undefined || seconds === null) return null;
+
+  const formatTime = (sec) => {
+    const timeUnits = [
+      { limit: 60, unit: 'сек' },
+      { limit: 3600, unit: 'мин' }, // 60*60
+      { limit: 86400, unit: 'ч' },   // 60*60*24
+      { limit: Infinity, unit: 'д' }
+    ];
+
+    for (const { limit, unit } of timeUnits) {
+      if (sec < limit) {
+        const value = unit == 'д'
+          ? Math.floor(sec / 86400) 
+          : unit === 'ч'
+            ? Math.floor(sec / 3600)
+            : unit === 'мин'
+              ? Math.floor(sec / 60)
+              : sec;
+
+      return {value, unit};
+      }
+    }
+
+    return {value: sec, unit: 'сек'};
+  };
+
+  const {value, unit} = formatTime(seconds)
+
+  if (value === 0 && unit === 'сек') {
+    return <span>только что</span>
+  }
+
+  return (
+    <span>
+      {value} {unit}{withAgo && ' назад'}
+    </span>
+  )
+}

src/components/DataFormatter/TrafficFormatter.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+// отвечает за преобразование поступающего в байтах значения в КБ, МБ, ГБ
+export default function TrafficFormatter ({ bytes, precision = 2}) {
+  if (bytes === undefined || bytes === null) return null;
+  
+  const units = ['Б', 'КБ', 'МБ', 'ГБ'];
+
+  let value = bytes;
+  let unitIndex = 0;
+
+  while (value >= 1024 && unitIndex < units.length - 1) {
+    value /= 1024;
+    unitIndex += 1;
+  }
+
+  return (
+    <span>
+      {value.toFixed(precision)} {units[unitIndex]}
+    </span>
+  )
+}

src/data/clients.json

@@ -0,0 +1,9 @@
+[{
+    "deviceName": "homePC",
+    "ip": "10.8.0.3",
+    "lastConnect": 23260,
+    "uploadSpeed": 500,
+    "downloadSpeed": 12300,
+    "uploadTraffic": 120838,
+    "downloadTraffic": 3423534
+}]

src/logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

src/pages/Home.css

@@ -0,0 +1,10 @@
+#main-container {
+    width: 60%;
+}
+
+#main-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: white;
+}

src/pages/Home.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+import Client from "../components/Client/Client";
+import ClientsList from "../components/ClientList/ClientList";
+import './Home.css'
+
+export function MainPage() {
+  return (
+    <>
+    <div id="main-container">
+      <div id="main-header">
+        <h2>WireGuard</h2>
+        <a href="/">Выйти</a>
+      </div>
+      <ClientsList/>
+    </div>
+    </>
+  )
+}