From d35397108aadb5e303c297a6761a0a67d511667c Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Tue, 9 Jun 2020 12:58:41 +0700
Subject: [PATCH] better boris stats

---
 src/components/boris/BorisStats/index.tsx     |  2 +
 .../boris/BorisStatsBackend/index.tsx         | 74 +++++++++++++++++++
 .../BorisStatsBackend/styles.module.scss      | 36 +++++++++
 .../boris/BorisStatsGit/styles.module.scss    |  2 +-
 .../BorisStatsGitCard/styles.module.scss      | 13 +++-
 src/utils/dom.ts                              |  8 ++
 6 files changed, 132 insertions(+), 3 deletions(-)
 create mode 100644 src/components/boris/BorisStatsBackend/index.tsx
 create mode 100644 src/components/boris/BorisStatsBackend/styles.module.scss

diff --git a/src/components/boris/BorisStats/index.tsx b/src/components/boris/BorisStats/index.tsx
index 89030c82..97f2e975 100644
--- a/src/components/boris/BorisStats/index.tsx
+++ b/src/components/boris/BorisStats/index.tsx
@@ -1,6 +1,7 @@
 import React, { FC } from 'react';
 import { IBorisState } from '~/redux/boris/reducer';
 import { BorisStatsGit } from '../BorisStatsGit';
+import { BorisStatsBackend } from '../BorisStatsBackend';
 
 interface IProps {
   stats: IBorisState['stats'];
@@ -9,6 +10,7 @@ interface IProps {
 const BorisStats: FC<IProps> = ({ stats }) => {
   return (
     <>
+      <BorisStatsBackend stats={stats} />
       <BorisStatsGit stats={stats} />
     </>
   );
diff --git a/src/components/boris/BorisStatsBackend/index.tsx b/src/components/boris/BorisStatsBackend/index.tsx
new file mode 100644
index 00000000..d4ca7916
--- /dev/null
+++ b/src/components/boris/BorisStatsBackend/index.tsx
@@ -0,0 +1,74 @@
+import React, { FC } from 'react';
+import { IBorisState } from '~/redux/boris/reducer';
+import styles from './styles.module.scss';
+import { Placeholder } from '~/components/placeholders/Placeholder';
+import { sizeOf } from '~/utils/dom';
+
+interface IProps {
+  stats: IBorisState['stats'];
+}
+
+const BorisStatsBackend: FC<IProps> = ({ stats }) => {
+  if (stats.is_loading)
+    return (
+      <>
+        <div className={styles.title}>
+          <Placeholder width="50%" />
+        </div>
+      </>
+    );
+
+  if (!stats.backend) return null;
+
+  return (
+    <div className={styles.wrap}>
+      <div className={styles.title}>Юнитс</div>
+
+      <ul>
+        <li>
+          В сознании <span>{stats.backend.users.alive}</span>
+        </li>
+
+        <li>
+          Криокамера <span>{stats.backend.users.total - stats.backend.users.alive}</span>
+        </li>
+      </ul>
+
+      <div className={styles.title}>Контент</div>
+
+      <ul>
+        <li>
+          Фотографии <span>{stats.backend.nodes.images}</span>
+        </li>
+
+        <li>
+          Письма <span>{stats.backend.nodes.texts}</span>
+        </li>
+
+        <li>
+          Видеозаписи <span>{stats.backend.nodes.videos}</span>
+        </li>
+
+        <li>
+          Аудиозаписи <span>{stats.backend.nodes.audios}</span>
+        </li>
+
+        <li>
+          Комментарии <span>{stats.backend.comments.total}</span>
+        </li>
+      </ul>
+
+      <div className={styles.title}>Сторедж</div>
+      <ul>
+        <li>
+          Файлы <span>{stats.backend.files.count}</span>
+        </li>
+        <li>
+          На диске <span>{sizeOf(stats.backend.files.size)}</span>
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export { BorisStatsBackend };
diff --git a/src/components/boris/BorisStatsBackend/styles.module.scss b/src/components/boris/BorisStatsBackend/styles.module.scss
new file mode 100644
index 00000000..1d3912e8
--- /dev/null
+++ b/src/components/boris/BorisStatsBackend/styles.module.scss
@@ -0,0 +1,36 @@
+.wrap {
+  ul {
+    font: $font_12_regular;
+    line-height: 24px;
+    text-transform: uppercase;
+
+    span {
+      float: right;
+      color: white;
+      font: $font_12_semibold;
+      line-height: 24px;
+    }
+
+    li {
+      border-bottom: 1px solid #333333;
+      color: #aaaaaa;
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+}
+
+.title {
+  font: $font_12_semibold;
+  text-transform: uppercase;
+  opacity: 0.3;
+  margin: $gap * 2 0 $gap;
+}
+
+.subtitle {
+  margin-left: $gap;
+  font: $font_12_semibold;
+  text-transform: uppercase;
+}
diff --git a/src/components/boris/BorisStatsGit/styles.module.scss b/src/components/boris/BorisStatsGit/styles.module.scss
index e87bf71e..f46c72f4 100644
--- a/src/components/boris/BorisStatsGit/styles.module.scss
+++ b/src/components/boris/BorisStatsGit/styles.module.scss
@@ -3,6 +3,6 @@
     font: $font_12_semibold;
     text-transform: uppercase;
     opacity: 0.3;
-    margin-top: 16px !important;
+    margin: $gap * 2 0 $gap;
   }
 }
diff --git a/src/components/boris/BorisStatsGitCard/styles.module.scss b/src/components/boris/BorisStatsGitCard/styles.module.scss
index 7da9033d..0aac62af 100644
--- a/src/components/boris/BorisStatsGitCard/styles.module.scss
+++ b/src/components/boris/BorisStatsGitCard/styles.module.scss
@@ -1,9 +1,18 @@
 .wrap {
-  margin-top: $gap;
+  padding: $gap / 2 0;
+  border-bottom: 1px solid #333333;
+
+  &:last-child {
+    border-bottom: none;
+  }
 }
 
 .time {
   font: $font_12_regular;
   line-height: 17px;
-  opacity: 0.5;
+  opacity: 0.3;
+}
+
+.subject {
+  font: $font_14_regular;
 }
diff --git a/src/utils/dom.ts b/src/utils/dom.ts
index 7ef404a9..428b9d79 100644
--- a/src/utils/dom.ts
+++ b/src/utils/dom.ts
@@ -215,3 +215,11 @@ export const darken = (col: string, amt: number) => {
 
   return (usePound ? '#' : '') + (g | (b << 8) | (r << 16)).toString(16);
 };
+
+export const sizeOf = (bytes: number): string => {
+  if (bytes == 0) {
+    return '0.00 B';
+  }
+  var e = Math.floor(Math.log(bytes) / Math.log(1024));
+  return (bytes / Math.pow(1024, e)).toFixed(2) + ' ' + ' KMGTP'.charAt(e) + 'B';
+};