update

2024-11-16 16:21:41 +00:00 · 2024-05-03 00:54:10 +03:00 · 2024-05-03 00:54:10 +03:00 · 8196e23ed8
parent 6f27ca2970
commit 8196e23ed8
19 changed files with 231 additions and 202 deletions
--- a/package.json
+++ b/package.json
@ -27,7 +27,7 @@
    "build-rename-css": "mv build/static/css/main.*.css build/static/index.css && rm -rf build/static/css",
    "build-rename-html": "rm build/index.html && mv build/local.html build/index.html",
    "dev": "set PORT=3006 && react-app-rewired start",
-    "build": "react-scripts build && npm run build-rename",
+    "build": "react-scripts build",
    "build-local": "set REACT_APP_TYPE=local && react-scripts build && npm run build-rename && npm run build-rename-html",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
--- a/src/ts/components/HoursChart/components/Columns.tsx
+++ b/src/ts/components/HoursChart/components/Columns.tsx
@ -22,7 +22,7 @@ function Columns({ week, day, max }: IColumnsProps): React.ReactElement | null {
    return (
      <div
        key={hour}
-        className={style.hour}
+        className={style.hours_chart_hour}
        style={{
          color,
          backgroundColor: `rgba(${backgroundColor}, ${opacity})`,
--- a/src/ts/components/HoursChart/components/Header.tsx
+++ b/src/ts/components/HoursChart/components/Header.tsx
@ -8,19 +8,19 @@ function Header(): React.ReactElement | null {
    if (!hour) return (
      <div
        key={hour}
-        className={style.day_name}
+        className={style.hours_chart_day_name}
      ></div>
    );

    return (
      <div
        key={hour}
-        className={style.day_time}
+        className={style.hours_chart_day_time}
      >
-        <span className={style.day_time_hh}>
+        <span className={style.hours_chart_day_time_hh}>
          {get2Number(hour - 1)}
        </span>
-        <span className={style.day_time_mm}>
+        <span className={style.hours_chart_day_time_mm}>
          :00
        </span>
      </div>
--- a/src/ts/components/HoursChart/components/Legend.tsx
+++ b/src/ts/components/HoursChart/components/Legend.tsx
@ -6,24 +6,24 @@ import style from '../styles/legend.module.scss';
 function Legend(): React.ReactElement | null {
  const { t } = useTranslation();
  return (
-    <div className={style.legend}>
-      <div className={style.legend_item}>
-        <div className={style.legend_work}></div>
-        <div className={style.legend_title}>
+    <div className={style.hours_chart_legend}>
+      <div className={style.hours_chart_legend_item}>
+        <div className={style.hours_chart_legend_work}></div>
+        <div className={style.hours_chart_legend_title}>
          {t('uiKit.hoursChart.work')}
        </div>
      </div>
-      <div className={style.legend_item}>
-        <div className={style.legend_weekend}></div>
-        <div className={style.legend_title}>
+      <div className={style.hours_chart_legend_item}>
+        <div className={style.hours_chart_legend_weekend}></div>
+        <div className={style.hours_chart_legend_title}>
          {t('uiKit.hoursChart.weekend')}
        </div>
      </div>
-      <div className={style.legend_item}>
-        <div className={style.legend_count}>
+      <div className={style.hours_chart_legend_item}>
+        <div className={style.hours_chart_legend_count}>
          42
        </div>
-        <div className={style.legend_title}>
+        <div className={style.hours_chart_legend_title}>
          {t('uiKit.hoursChart.days')}
        </div>
      </div>
--- a/src/ts/components/HoursChart/index.module.scss
+++ b/src/ts/components/HoursChart/index.module.scss
@ -1,90 +1,94 @@
@import 'src/styles/variables';

-.user {
-  display: block;
-  box-sizing: border-box;
-  vertical-align: top;
-  margin: 24px 0 0 0;
+.hours_chart {
+  &_user {
+    display: block;
+    box-sizing: border-box;
+    vertical-align: top;
+    margin: 24px 0 0 0;

-  --commits-by-hours-size: calc((100vw - 400px) / 25);
-}
+    --commits-by-hours-size: calc((100vw - 400px) / 25);
+  }

-.title {
-  display: inline-block;
-  width: 200px;
-  text-align: left;
-  white-space: nowrap;
-}
+  &_title {
+    display: inline-block;
+    width: 200px;
+    text-align: left;
+    white-space: nowrap;
+  }

-.data {
-  display: inline-block;
-  width: 100%;
-  vertical-align: top;
-}
+  &_data {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+  }

-.day {
-  display: block;
-  width: 100%;
-  vertical-align: top;
-  white-space: nowrap;
-}
+  &_day {
+    display: block;
+    width: 100%;
+    vertical-align: top;
+    white-space: nowrap;
+  }

-.day_time,
-.day_name,
-.hour {
-  font-size: var(--font-xs);
-  display: inline-block;
-  width: var(--commits-by-hours-size);
-  height: var(--commits-by-hours-size);
-  text-align: center;
-  line-height: var(--commits-by-hours-size);
-  vertical-align: top;
-  box-sizing: border-box;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-print-color-adjust: exact;
-}
+  &_day_time,
+  &_day_name,
+  &_hour {
+    font-size: var(--font-xs);
+    display: inline-block;
+    width: var(--commits-by-hours-size);
+    height: var(--commits-by-hours-size);
+    text-align: center;
+    line-height: var(--commits-by-hours-size);
+    vertical-align: top;
+    box-sizing: border-box;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-print-color-adjust: exact;
+  }

-.day_time,
-.day_name {
-  box-sizing: border-box;
-  border-bottom: 1px solid grey;
-}
+  &_day_time,
+  &_day_name {
+    box-sizing: border-box;
+    border-bottom: 1px solid grey;
+  }

-.day_name {
-  font-size: var(--font-xs);
-  border-right: 1px solid grey;
-}
+  &_day_name {
+    font-size: var(--font-xs);
+    border-right: 1px solid grey;
+  }

-.hour {
-  color: white;
-  border-radius: 6px;
-  border: 1px solid #FFFFFF;
-  background-color: var(--color-first);
+  &_hour {
+    color: white;
+    border-radius: 6px;
+    border: 1px solid #FFFFFF;
+    background-color: var(--color-first);
+  }
 }

@media (max-width: 1300px) {
-  .day_time_mm {
+  .hours_chart_day_time_mm {
    display: none;
  }
 }

@media (max-width: 1000px) {
-  .user {
+  .hours_chart_user {
    --commits-by-hours-size: calc((100vw - 156px) / 25);
  }
 }

@media (max-width: 900px) {
-  .day_time,
-  .day_name,
-  .hour {
-    font-size: var(--font-xxs);
-  }
+  .hours_chart {
+    &_day_time,
+    &_day_name,
+    &_hour {
+      font-size: var(--font-xxs);
+    }

-  .hour {
-    border-radius: 0;
-    border: none;
+    &_hour {
+      border-radius: 0;
+      border: none;
+    }
  }
 }
--- a/src/ts/components/HoursChart/index.tsx
+++ b/src/ts/components/HoursChart/index.tsx
@ -21,9 +21,9 @@ function HoursChart({
      return (
        <div
          key={day}
-          className={style.day}
+          className={style.hours_chart_day}
        >
-          <div className={style.day_name}>
+          <div className={style.hours_chart_day_name}>
            {getDayName(day, 'short')}
          </div>
          <Columns
@ -36,9 +36,9 @@ function HoursChart({
    });

  return (
-    <div className={style.user}>
-      <div className={style.data}>
-        <div className={style.day}>
+    <div className={style.hours_chart_user}>
+      <div className={style.hours_chart_data}>
+        <div className={style.hours_chart_day}>
          <Header />
        </div>
        {items}
--- a/src/ts/components/HoursChart/styles/legend.module.scss
+++ b/src/ts/components/HoursChart/styles/legend.module.scss
@ -1,6 +1,6 @@
@import 'src/styles/variables';

-.legend {
+.hours_chart_legend {
  display: block;
  box-sizing: border-box;
  vertical-align: top;
--- a/src/ts/components/Recommendations/styles/index.module.scss
+++ b/src/ts/components/Recommendations/styles/index.module.scss
@ -3,7 +3,7 @@
 .recommendations_container {
  position: relative;
  display: block;
-  margin: 0;
+  margin: 0 auto 12px 0;
  padding: 0;

  text-align: left;
--- a/src/ts/components/Table/components/Header.tsx
+++ b/src/ts/components/Table/components/Header.tsx
@ -42,10 +42,10 @@ function Header({
          {formattedTitle}
        </span>
        {column.title && column.sortDirection === -1 && (
-          <div className={headerStyle.sort_down} />
+          <div className={headerStyle.table_sort_down} />
        )}
        {column.title && column.sortDirection === 1 && (
-          <div className={headerStyle.sort_up} />
+          <div className={headerStyle.table_sort_up} />
        )}
      </div>
    );
--- a/src/ts/components/Table/styles/header.module.scss
+++ b/src/ts/components/Table/styles/header.module.scss
@ -1,28 +1,23 @@
@import 'src/styles/variables';

-.title {
-  font-size: var(--font-l);
-  font-weight: 100;
-  margin: 24px 0;
-  color: var(--color-black);
-}
-
-.sort_up,
-.sort_down {
-  display: inline-block;
-  height: 0;
-  width: 0;
-  margin: 0 0 -5px 8px;
-
-  cursor: pointer;
-  transform: rotateZ(-45deg);
-
-  border: 6px solid var(--color-grey);
-  border-left-color: white;
-  border-bottom-color: white;
-}
-
-.sort_down {
-  margin: 0 0 3px 8px;
-  transform: rotateZ(135deg);
+.table {
+  &_sort_up,
+  &_sort_down {
+    display: inline-block;
+    height: 0;
+    width: 0;
+    margin: 0 0 -5px 8px;
+
+    cursor: pointer;
+    transform: rotateZ(-45deg);
+
+    border: 6px solid var(--color-grey);
+    border-left-color: white;
+    border-bottom-color: white;
+  }
+
+  &_sort_down {
+    margin: 0 0 3px 8px;
+    transform: rotateZ(135deg);
+  }
 }
--- a/src/ts/helpers/DataGrip/components/author.ts
+++ b/src/ts/helpers/DataGrip/components/author.ts
@ -163,8 +163,7 @@ export default class DataGripByAuthor {
        const moneyLosses = lazyDays > 0
          ? Math.ceil(lazyDays * middleSalaryInDay)
          : 0;
-        const salaryInMonth = settingsStore.getMiddleSalaryInMonth(dot.author);
-        const moneyAll = Math.ceil((allDaysInProject / 30) * salaryInMonth);
+        const moneyAll = Math.ceil((allDaysInProject / 30) * middleSalaryInMonth);

        const tasksEntries = Object.entries(dot.tasks).filter(t => t[0]);
        const tasks = tasksEntries.map(t => t[0]);
--- a/src/ts/helpers/RPC.ts
+++ b/src/ts/helpers/RPC.ts
@ -16,7 +16,7 @@ function getParametersFromURL(): IHashMap<string> {
  };
 }

-function loadJsDump(url: string, callback: Function) {
+function loadJsLocal(url: string, callback: Function) {
  const script = document.createElement('script');
  script.src = url;
  script.async = true; // @ts-ignore
@ -27,6 +27,30 @@ function loadJsDump(url: string, callback: Function) {
  document.body.appendChild(script);
 }

+function loadJsLGlobal(url: string, callback: Function) {
+  fetch(url)
+    .then((response) => response.text())
+    .then((text) => {
+      if (!text) return callback();
+      if (text[0] === 'r') {
+        eval(text);
+        return callback();
+      } else {
+        // @ts-ignore
+        window.report = text.split('\n');
+      }
+      callback();
+    });
+}
+
+function loadJsDump(url: string, callback: Function) {
+  if (url?.[0] === '.') {
+    loadJsLocal(url, callback);
+  } else {
+    loadJsLGlobal(url, callback);
+  }
+}
+
 function loadCssFile(url: string) {
  const node = document.createElement('link');
  node.setAttribute('rel', 'stylesheet');
--- a/src/ts/pages/Authorization/components/Success.tsx
+++ b/src/ts/pages/Authorization/components/Success.tsx
@ -15,93 +15,104 @@ import Welcome from '../../Welcome/index';
 import Settings from '../../Settings/index';
 import DebugPage from '../../Debug/index';

+interface IViewWithChartsProps {
+  showSplashScreen: boolean;
+}
+
+function ViewWithCharts({ showSplashScreen }: IViewWithChartsProps) {
+  return (
+    <>
+      <Confirm />
+      <Routes>
+        <Route
+          path="/settings"
+          element={(
+            <PageWrapper>
+              <Settings />
+            </PageWrapper>
+          )}
+        />
+        <Route
+          path="/debug"
+          element={(
+            <PageWrapper>
+              <DebugPage />
+            </PageWrapper>
+          )}
+        />
+        <Route
+          path="/print"
+          element={(
+            <PageWrapper>
+              <PrintAll />
+            </PageWrapper>
+          )}
+        />
+        <Route
+          path="/:type/:page"
+          element={(
+            <PageWrapper>
+              <Team />
+            </PageWrapper>
+          )}
+        />
+        <Route
+          path="/:type/:page/:userId"
+          element={(
+            <PageWrapper>
+              <Person />
+            </PageWrapper>
+          )}
+        />
+        <Route
+          path="*"
+          element={(
+            <PageWrapper>
+              <Team />
+            </PageWrapper>
+          )}
+        />
+      </Routes>
+      {showSplashScreen && <SplashScreen />}
+    </>
+  );
+}
+
+function ViewWithText() {
+  return (
+    <Routes>
+      <Route
+        path="*"
+        element={(
+          <Welcome />
+        )}
+      />
+    </Routes>
+  );
+}
+
 const Success = observer((): React.ReactElement => {
  const [showSplashScreen, setShowSplashScreen] = useState<boolean>(true);
+  const showChart = dataGripStore.showApplication;

  useEffect(() => {
    // @ts-ignore
    dataGripStore.setCommits(window?.report || []);
  }, []);

-  const dropArea = (
-    <DropZone
-      onChange={(type: string, data: any[]) => {
-        setShowSplashScreen(false);
-        if (type === 'dump') dataGripStore.setCommits(data);
-        setTimeout(() => {
-          setShowSplashScreen(true);
-        });
-      }}
-    />
-  );
-
-  return dataGripStore.showApplication ? (
-      <>
-        <Confirm />
-        {dropArea}
-        <Routes>
-          <Route
-            path="/settings"
-            element={(
-              <PageWrapper>
-                <Settings />
-              </PageWrapper>
-            )}
-          />
-          <Route
-            path="/debug"
-            element={(
-              <PageWrapper>
-                <DebugPage />
-              </PageWrapper>
-            )}
-          />
-          <Route
-            path="/print"
-            element={(
-              <PageWrapper>
-                <PrintAll />
-              </PageWrapper>
-            )}
-          />
-          <Route
-            path="/:type/:page"
-            element={(
-              <PageWrapper>
-                <Team />
-              </PageWrapper>
-            )}
-          />
-          <Route
-            path="/:type/:page/:userId"
-            element={(
-              <PageWrapper>
-                <Person />
-              </PageWrapper>
-            )}
-          />
-          <Route
-            path="*"
-            element={(
-              <PageWrapper>
-                <Team />
-              </PageWrapper>
-            )}
-          />
-        </Routes>
-        {showSplashScreen && <SplashScreen />}
-      </>
-  ) : (
+  return (
    <>
-      {dropArea}
-      <Routes>
-        <Route
-          path="*"
-          element={(
-            <Welcome />
-          )}
-        />
-      </Routes>
+      {showChart && <ViewWithCharts showSplashScreen={showSplashScreen} />}
+      {!showChart && <ViewWithText />}
+      <DropZone
+        onChange={(type: string, data: any[]) => {
+          setShowSplashScreen(false);
+          if (type === 'dump') dataGripStore.setCommits(data);
+          setTimeout(() => {
+            setShowSplashScreen(true);
+          });
+        }}
+      />
    </>
  );
 });
--- a/src/ts/pages/Person/components/Month.tsx
+++ b/src/ts/pages/Person/components/Month.tsx
@ -14,7 +14,6 @@ const Month = observer(({ user }: IPersonCommonProps): React.ReactElement => {

  return (
    <>
-      <br/>
      <PageWrapper template="table">
        <YearChart
          showEvents={false}
--- a/src/ts/pages/Person/components/Tasks.tsx
+++ b/src/ts/pages/Person/components/Tasks.tsx
@ -33,9 +33,6 @@ const Tasks = observer(({
      })}
      watch={`${mode}${dataGripStore.dataGrip.hash}${user.author}`}
    >
-      <br/>
-      <br/>
-      <br/>
      <TasksView
        mode={mode}
        rowsForExcel={rows}
--- a/src/ts/pages/Person/components/Tempo.tsx
+++ b/src/ts/pages/Person/components/Tempo.tsx
@ -46,7 +46,6 @@ const Tempo = observer(({ user, filters }: IPersonCommonProps): React.ReactEleme

  return (
    <>
-      <br/>
      <PageWrapper template="table">
        <DataLoader
          to="response"
--- a/src/ts/pages/Person/components/Week.tsx
+++ b/src/ts/pages/Person/components/Week.tsx
@ -132,7 +132,6 @@ const Week = observer(({

  return (
    <>
-      <br/>
      <Recommendations
        mode={mode}
        recommendations={recommendations}
--- a/src/ts/pages/Settings/helpers/getEmptySettings.ts
+++ b/src/ts/pages/Settings/helpers/getEmptySettings.ts
@ -47,7 +47,7 @@ export default function getEmptySettings(): IUserSetting {

  const value = {
    RUB: 200000,
-    USD: 12000,
+    USD: 3000,
  }[currency] || 3000;

  return {
--- a/src/ts/pages/Team/styles/filters.module.scss
+++ b/src/ts/pages/Team/styles/filters.module.scss
@ -1,6 +1,8 @@
@import 'src/styles/variables';

 .table_filters {
+  margin: 0 0 24px;
+
  &_item {
    display: inline-block;
    width: 350px;