From 9269c538d917212ae1cf7681bafee5c8e182284f Mon Sep 17 00:00:00 2001 From: Pravin Uttarwar Date: Sat, 25 Apr 2020 13:58:02 +0530 Subject: [PATCH 1/2] Bug fixes 1) When more empty rows are present portal was not loading 2) On weekend portal was not loading 3) Added option to sort open resources first 4) Added opne resource % calculations 5) Picture was not showing properly on some resolutions 5) Vertical and Hor scroll was broken on some resolutionn 7) When number of projects are more made project name rows multiline --- src/css/modules/_header.scss | 108 ++-- src/css/modules/_projectList.scss | 87 +-- src/css/modules/_resourceTable.scss | 826 +++++++++++++++++----------- src/index.html | 50 +- src/js/components/peopleTable.js | 144 ++++- src/js/components/projectsRow.js | 23 +- src/js/components/trackerPanel.js | 77 ++- src/js/components/weeksRow.js | 4 +- src/js/main.js | 6 +- src/js/modules/stores.js | 115 ++-- 10 files changed, 915 insertions(+), 525 deletions(-) diff --git a/src/css/modules/_header.scss b/src/css/modules/_header.scss index 9fd592f..3c24ed4 100644 --- a/src/css/modules/_header.scss +++ b/src/css/modules/_header.scss @@ -1,45 +1,75 @@ .fd-header { - align-items: center; - background: $color-headerBG; - box-sizing: border-box; - display: flex; - padding: 15px 0 15px 100px; - position: relative; - justify-content: flex-start; - @mixin size 100vw, 55px; + align-items: center; + background: $color-headerBG; + box-sizing: border-box; + display: flex; + padding: 15px 0 15px 100px; + position: relative; + justify-content: flex-start; + height: fit-content !important; + @mixin size 100vw, 55px; - img, h1 { - align-items: center; - display: flex; - flex-direction: row; - } + img, + h1 { + align-items: center; + display: flex; + flex-direction: row; + } - img { max-height: 100%; } + img { + max-height: 100%; + height: 30px; + } - h1 { - color: $color-off-white; - display: inline-block; - margin: 0 0 0 15px; - left: 10%; - @mixin font-sansN3; - @mixin font-size 18; - } + h1 { + color: #ffffff; + display: inline-block; + margin: 5px 0 0 0; + left: 10%; + @mixin font-sansN3; + @mixin font-size 13; + } - &--updated { - color: #9e9e9e; - position: absolute; - right: 20px; - top: 50%; - transform: translateY(-50%); - @mixin font-sansN3; - @mixin font-size 14; + &--updated { + color: #9e9e9e; + position: absolute; + right: 20px; + top: 50%; + transform: translateY(-50%); + @mixin font-sansN3; + @mixin font-size 14; - span { @mixin font-sansN7; } - } - @media screen and (--wide) { - padding-left: 20px; - } - @media screen and (--mobile) { - h1 { display: none; } - } -} \ No newline at end of file + span { + @mixin font-sansN7; + } + } + @media screen and (--wide) { + padding-left: 20px; + } + @media screen and (--mobile) { + h1 { + display: none; + } + } +} + +.logo-text { + color: #f8f8f8; + display: inline-block; + margin: 5px 0 0 0; + left: 10%; + font-size: 14px !important; + font-family: "Roboto", sans-serif; + font-weight: 300; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-size: 1.125rem; + letter-spacing: 0em; +} + +.regular-checkbox { + height: 18px !important; + width: 18px !important; + margin-left: 5px; + cursor: pointer; +} diff --git a/src/css/modules/_projectList.scss b/src/css/modules/_projectList.scss index 0068c8a..cad4984 100644 --- a/src/css/modules/_projectList.scss +++ b/src/css/modules/_projectList.scss @@ -1,46 +1,57 @@ .fd-projectList { - padding-left: 50px; - text-align: center; + padding-left: 25px; + text-align: center; - &-container { - @mixin list-reset; - display: flex; - justify-content: flex-start; - text-align: left; + &-container { + @mixin list-reset; + display: flex; + justify-content: flex-start; + text-align: left; - li { - align-items: center; - display: flex; - flex-direction: row; - margin-left: 10px; - justify-content: flex-start; + li { + align-items: center; + display: inline; + flex-direction: row; + margin-left: 0px; + justify-content: flex-start; - &:first-child, &:first-child .fd-projectList--color { margin-left: 0; } - } + &:first-child, + &:first-child .fd-projectList--color { + margin-left: 0; + } + } - .fd-projectList--color { - background: #d0d2d5; - border: 1px solid #d0d2d5; - box-sizing: border-box; - border-radius: 50%; - display: inline-block; - margin: 0 10px; - @mixin size 20px, 20px; - } + .fd-projectList--color { + background: #d0d2d5; + border: 1px solid #d0d2d5; + box-sizing: border-box; + border-radius: 50%; + display: inline-block; + margin: 0; + @mixin size 20px, 20px; + } - .fd-projectList--name { - color: $color-projectListText; - @mixin font-sansN4; - } - } + .fd-projectList--name { + color: $color-projectListText; + display: inline; + margin-left: 5px; + margin-right: 10px; + vertical-align: top; + @mixin font-sansN4; + } + } - @media screen and (--desktop) { - padding-left: 20px; - @mixin font-size 14, 0, 0; + @media screen and (--desktop) { + padding-left: 20px; + @mixin font-size 14, 0, 0; - &-container { - .fd-projectList--color { @mixin size 14px, 14px; } - } - } - @media screen and (--mid) { display: none; } -} \ No newline at end of file + &-container { + .fd-projectList--color { + @mixin size 14px, 14px; + } + } + } + @media screen and (--mid) { + display: none; + } +} diff --git a/src/css/modules/_resourceTable.scss b/src/css/modules/_resourceTable.scss index ffb5103..49ee250 100644 --- a/src/css/modules/_resourceTable.scss +++ b/src/css/modules/_resourceTable.scss @@ -1,333 +1,497 @@ // Resource Table Styles .fd-resourceTable { - width: 100%; - - &-head { - align-items: center; - background: $color-tableHeadBG; - display: flex; - flex: 1; - flex-direction: row; - padding-left: $table-row-offset--1-6; - justify-content: flex-start; - } - - &-date { - align-items: flex-start; - border-left: 1px solid #272727; - box-sizing: border-box; - color: #acacac; - display: flex; - flex-direction: column; - flex: 1; - height: $table-date-height--large; - padding: 0 15px; - position: relative; - justify-content: flex-end; - width: $table-col-width--1-6; - @mixin font-size 22, -16, -100; - line-height: 29px; - @mixin font-sansN4; - - [data-showdayofweeklabels="false"] & { - justify-content: center; - } - - &--current { - border-left-color: transparent; - - span.date { - color: $color-white; - position: relative; - top: -5px; - @mixin font-size 32, -16, -100; - } - .fd-resourceTable-daysOfWeek span { color: #7d7d7d; } - } - span { - box-sizing: border-box; - display: block; - padding-left: 5%; - width: 100%; - @mixin font-sansN5; - } - } - - &-daysOfWeek { - display: flex; - margin-top: 3px; - @mixin size 100%, auto; - - [data-showdayofweeklabels="false"] & { - display: none; - } - - span { - box-sizing: border-box; - color: #9e9e9e; - display: block; - padding: 10px 0; - position: relative; - text-align: center; - flex: 1; - flex-basis: 20%; - width: 20%; - @mixin font-size 12, 0; - - &:before { - @extend %pseudoElementAbsolute; - background: #4e4e4e; - top: 5px; bottom: 5px; - width: 1px; - } - &:first-child:before { display: none; } - } - } - - &-rowsWrap { height: $table-rowWrap-height--large; } - &-row { - background: #eeedec; - border-bottom: 1px solid $color-tableBorder; - display: flex; - flex-direction: row; - flex: 1; - align-items: center; - justify-content: flex-start; - position: relative; - @mixin size 100%, $table-row-height; - - &:nth-child(even) { background: #f5f5f5; } - } - - &-employee { - border-right: 1px solid transparent; // meant to try and keep things aligned - flex-basis: auto; - min-width: $table-row-offset--1-6; - max-width: $table-row-offset--1-6; - position: relative; - width: $table-row-offset--1-6; - - i, span { - display: block; - margin: 0 auto; - } - - i { - background-size: cover !important; - border-radius: 50%; - @mixin size 50px, 50px; - } - - span { - color: $color-grey-60; - margin-top: 5px; - text-align: center; - @mixin font-sansN4; - @mixin font-size 16, 18, 25; - line-height: 15px; - } - - &--container { - position: absolute; - top: 50%; left: 50%; - transform: translate(-50%, -50%); - width: 100%; - } - } - - &-week { - align-content: center; - border-right: 1px solid #dcdcdc; - box-sizing: border-box; - display: flex; - flex: 1; - flex-direction: row; - flex-wrap: wrap; - padding: 0 15px; - position: relative; - @mixin size $table-col-width--1-6, 100%; - - &:nth-child(2) { - margin-left: 0; - - &:before { - @extend %pseudoElementAbsolute; - background: $color-white; - border-left: 1px solid #dfdedd; - border-right: 1px solid #dfdedd; - box-sizing: border-box; - margin-left: -1px; - position: absolute; - top: 0; left: 0; - @mixin size calc(20% - 4px), 100%; - } - - [data-highlightdayofweek="false"] & { - &:before { - display: none; - } - } - } - - div { - background: #ff0000; - border-radius: 10px; - box-shadow: color($color-black a(10%)) 0 1px 2px; - color: $color-white; - height: 35%; - margin: 2px; - float: left; - text-align: left; - position: relative; - overflow: hidden; - @mixin font-sansN6; - @mixin font-size 14, 38, 25; - - span { - margin-left: 10px; - position: absolute; - top: 50%; - transform: translateY(-50%); - } - } - - [data-delivery="true"] { box-shadow: inset 0 0 0 2px #ff0000; } - - // Override White color for cells with white backgrounds - .span-1 { - width: calc(20% - 4px); - - span { - margin-left: 0; - left: 50%; - transform: translate(-50%, -50%); - } - } - .span-2 { width: calc(40% - 4px); } - .span-3 { width: calc(60% - 4px); } - .span-4 { width: calc(80% - 4px); } - .span-5 { width: calc(100% - 4px); } - } - - &[data-day="Mon"] { @mixin activeDay .Mon; } - &[data-day="Tue"] { @mixin activeDay .Tue; } - &[data-day="Wed"] { @mixin activeDay .Wed; } - &[data-day="Thu"] { @mixin activeDay .Thu; } - &[data-day="Fri"] { @mixin activeDay .Fri; } - - &-day { - display: flex; - flex-direction: column; - margin: 0 1% 0 0; - height: 6vh; - width: calc(100vw / 34); - - &:last-child { margin-right: 0; } - - div { - background: #ff0000; - border-radius: 3px; - display: flex; - align-items: center; - justify-content: center; - clear: both; - text-align: center; - @mixin size 100%, 100%; - } - - &--split { - display: block; - height: auto; - margin-bottom: 2%; - - &:last-child { - margin-top: 2%; - margin-bottom: 0; - } - } - } - - // Vertical Breakpoints - @media screen and (--tallest) { - &-date {} - &-employee { - span { - font-size: 16px; - margin-left: 10px; - padding: 0; - } - } - } - - @media screen and (--tall) { - &-employee { - i { display: none; } - } - } - - @media screen and (--medium) { - &-date { - @mixin font-size 18, -16, -100; - - &--current span.date { @mixin font-size 20, -16, -100; } - .fd-resourceTable-daysOfWeek span { font-size: 12px; } - } - } - - @media screen and (--small) { - &-rowsWrap { height: $table-rowWrap-height--small; } - &-date { height: $table-date-height--small; } - &-employee { - span { - font-size: 12px; - line-height: 1; - // margin-left: auto; - margin-top: 0; - padding: 0; - } - } - &-week div { @mixin font-size 12, 38, 25; } - } - - // Hiding cols - @media screen and (--maxWidth) { - &-date, &-week { @mixin hideEndWeeks 1; } - } - @media screen and (--widest) { - &-date, &-week { @mixin hideEndWeeks 2; } - } - @media screen and (--wide) { - &-head { padding-left: $table-row-offset--1-3; } - &-employee { - height: 100%; - min-width: $table-row-offset--1-3; - max-width: $table-row-offset--1-3; - transform: rotate(180deg); - writing-mode: vertical-lr; - width: $table-row-offset--1-3; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - &--container { - height: 100%; - top: 0; - transform: translate(-50%, 0); - } - i { display: none; } - span { - box-sizing: border-box; - line-height: 5px; - padding: 0 10px; - } - } - - &-date, &-week { @mixin hideEndWeeks 3; } - } - @media screen and (--mid) { - &-date, &-week { @mixin hideEndWeeks 4; } - } - @media screen and (--mobile) { - &-date, &-week { @mixin hideEndWeeks 5; } - } -} \ No newline at end of file + width: 100%; + scrollbar-width: thin; + scrollbar-color: gray; + + &-head { + align-items: center; + background: $color-tableHeadBG; + display: flex; + flex: 1; + flex-direction: row; + padding-left: $table-row-offset--1-2; + justify-content: flex-start; + } + + &-open_percent { + font-size: 10px; + color: #c2c2c2; + min-width: 100px !important; + text-align: center; + } + + &-date { + align-items: flex-start; + border-left: 1px solid #272727; + box-sizing: border-box; + color: #acacac; + display: flex; + flex-direction: column; + flex: 1; + height: $table-date-height--large; + padding: 0 15px; + position: relative; + justify-content: flex-end; + // width: $table-col-width--1-6; + min-width: 300px !important; + @mixin font-size 22, -16, -100; + line-height: 29px; + @mixin font-sansN4; + + [data-showdayofweeklabels="false"] & { + justify-content: center; + } + + &--current { + border-left-color: transparent; + + span.date { + color: $color-white; + position: relative; + top: -5px; + @mixin font-size 32, -16, -100; + } + .fd-resourceTable-daysOfWeek span { + color: #7d7d7d; + } + } + span { + box-sizing: border-box; + display: block; + padding-left: 5%; + width: 100%; + @mixin font-sansN5; + } + } + + &-daysOfWeek { + display: flex; + margin-top: 3px; + @mixin size 100%, auto; + + [data-showdayofweeklabels="false"] & { + display: none; + } + + span { + box-sizing: border-box; + color: #9e9e9e; + display: block; + padding: 10px 0; + position: relative; + text-align: center; + flex: 1; + flex-basis: 20%; + width: 20%; + @mixin font-size 12, 0; + + &:before { + @extend %pseudoElementAbsolute; + background: #4e4e4e; + top: 5px; + bottom: 5px; + width: 1px; + } + &:first-child:before { + display: none; + } + } + } + + &-rowsWrap { + height: $table-rowWrap-height--large; + } + &-row { + background: #eeedec; + border-bottom: 1px solid $color-tableBorder; + display: flex; + flex-direction: row; + flex: 1; + align-items: center; + justify-content: flex-start; + position: relative; + height: 60px !important; + @mixin size 100%, $table-row-height; + + &:nth-child(even) { + background: #f5f5f5; + } + } + + &-employee { + border-right: 1px solid transparent; // meant to try and keep things aligned + flex-basis: auto; + min-width: $table-row-offset--1-6; + max-width: $table-row-offset--1-6; + position: relative; + width: $table-row-offset--1-6; + + i, + span { + display: block; + margin: 0 auto; + } + + i { + background-size: cover !important; + border-radius: 50%; + margin-top: -3px; + @mixin size 35px, 35px; + } + + span { + color: $color-grey-60; + margin-top: 5px; + text-align: center; + @mixin font-sansN4; + @mixin font-size 16, 18, 25; + line-height: 15px; + } + + &--container { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100%; + } + } + + &-week { + align-content: center; + border-right: 1px solid #dcdcdc; + box-sizing: border-box; + display: flex; + flex: 1; + flex-direction: row; + flex-wrap: wrap; + padding: 0 15px; + position: relative; + width: 300px !important; + @mixin size $table-col-width--1-6, 100%; + + &:nth-child(2) { + margin-left: 0; + + &:before { + @extend %pseudoElementAbsolute; + background: $color-white; + border-left: 1px solid #dfdedd; + border-right: 1px solid #dfdedd; + box-sizing: border-box; + margin-left: -1px; + position: absolute; + top: 0; + left: 0; + @mixin size calc(20% - 4px), 100%; + } + + [data-highlightdayofweek="false"] & { + &:before { + display: none; + } + } + } + + div { + background: #ff0000; + border-radius: 10px; + box-shadow: color($color-black a(10%)) 0 1px 2px; + color: $color-white; + height: 35%; + margin: 2px; + float: left; + text-align: left; + position: relative; + overflow: hidden; + @mixin font-sansN6; + @mixin font-size 14, 38, 25; + + span { + margin-left: 12px; + position: absolute; + top: 50%; + transform: translateY(-50%); + } + } + + [data-delivery="true"] { + box-shadow: inset 0 0 0 2px #ff0000; + } + + // Override White color for cells with white backgrounds + .span-1 { + width: calc(20% - 4px); + + span { + margin-left: 0; + left: 50%; + transform: translate(-50%, -50%); + } + } + .span-2 { + width: calc(40% - 4px); + } + .span-3 { + width: calc(60% - 4px); + } + .span-4 { + width: calc(80% - 4px); + } + .span-5 { + width: calc(100% - 4px); + } + } + + &[data-day="Mon"] { + @mixin activeDay .Mon; + } + &[data-day="Tue"] { + @mixin activeDay .Tue; + } + &[data-day="Wed"] { + @mixin activeDay .Wed; + } + &[data-day="Thu"] { + @mixin activeDay .Thu; + } + &[data-day="Fri"] { + @mixin activeDay .Fri; + } + + &-day { + display: flex; + flex-direction: column; + margin: 0 1% 0 0; + height: 6vh; + width: calc(100vw / 34); + + &:last-child { + margin-right: 0; + } + + div { + background: #ff0000; + border-radius: 3px; + display: flex; + align-items: center; + justify-content: center; + clear: both; + text-align: center; + @mixin size 100%, 100%; + } + + &--split { + display: block; + height: auto; + margin-bottom: 2%; + + &:last-child { + margin-top: 2%; + margin-bottom: 0; + } + } + } + + // Vertical Breakpoints + @media screen and (--tallest) { + &-date { + } + &-employee { + span { + font-size: 12px; + margin-left: 10px; + padding: 0; + } + } + } + + @media screen and (--tall) { + &-employee { + i { + display: block; + } + } + } + + @media screen and (--medium) { + &-date { + @mixin font-size 18, -16, -100; + + &--current span.date { + @mixin font-size 20, -16, -100; + } + .fd-resourceTable-daysOfWeek span { + font-size: 12px; + } + } + } + + @media screen and (--small) { + &-rowsWrap { + // height: $table-rowWrap-height--small; + } + &-date { + height: $table-date-height--small; + } + &-employee { + span { + font-size: 10px; + line-height: 1; + margin-top: 0; + padding: 0; + } + } + &-week div { + @mixin font-size 12, 38, 25; + } + } + + // Hiding cols + // @media screen and (--maxWidth) { + // &-date, + // &-week { + // @mixin hideEndWeeks 1; + // } + // } + // @media screen and (--widest) { + // &-date, + // &-week { + // @mixin hideEndWeeks 2; + // } + // } + // @media screen and (--wide) { + // &-head { + // padding-left: $table-row-offset--1-3; + // } + // &-open_percent { + // display: none; + // } + // &-employee { + // height: 100%; + // min-width: $table-row-offset--1-3; + // max-width: $table-row-offset--1-3; + // transform: rotate(180deg); + // writing-mode: vertical-lr; + // width: $table-row-offset--1-3; + // white-space: nowrap; + // overflow: hidden; + // text-overflow: ellipsis; + + // &--container { + // height: 100%; + // top: 0; + // transform: translate(-50%, 0); + // } + // i { + // display: none; + // } + // span { + // box-sizing: border-box; + // line-height: 5px; + // padding: 0 10px; + // } + // } + + // &-date, + // &-week { + // @mixin hideEndWeeks 3; + // } + // } + // @media screen and (--mid) { + // &-date, + // &-week { + // @mixin hideEndWeeks 4; + // } + // } + // @media screen and (--mobile) { + // &-date, + // &-week { + // @mixin hideEndWeeks 5; + // } + // } +} + +.fd-resourceTable-rowsWrap::-webkit-scrollbar { + width: 5px; + height: 20px; +} + +.fd-resourceTable-rowsWrap::-webkit-scrollbar-track { + background: #f1f1f1; +} + +.fd-resourceTable-rowsWrap::-webkit-scrollbar-thumb { + background: #000000; + border-radius: 50px; + height: 30px; +} + +.emp-name { + font-weight: 8px !important; + width: 85px !important; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.pie { + background-color: #f09628; + color: #d02b2b; // text color inside circle + border-radius: 50%; + width: 45px; + height: 45px; + overflow: hidden; + position: relative; + float: left; + margin-left: 25px; + margin-top: 3px; + margin-bottom: 2px; +} +.pie > div { + float: left; + width: 50%; + height: 100%; + position: relative; + overflow: hidden; +} +.pie span { + background-color: #d02b2b; + display: block; + width: 100%; + height: 100%; +} +.pie .left span { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + -webkit-transform-origin: 100% 50%; +} +.pie .right span { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + -webkit-transform-origin: 0% 50%; +} +.pie:before, +.pie:after { + border-radius: 50%; + display: block; + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translateX(-50%) translateY(-50%); +} +.pie:before { + background-color: #fff; + content: ""; + width: 75%; + height: 75%; + z-index: 100; +} +.pie:after { + content: attr(data-percent) "%"; + font-size: 14px; + font-weight: bold; + z-index: 200; + text-align: center; +} diff --git a/src/index.html b/src/index.html index 9f765f6..abd8b47 100644 --- a/src/index.html +++ b/src/index.html @@ -1,26 +1,30 @@ - + - - - - - - + + + + + + - - - - -
- -

Resource Tracker

-

Use your company email address to recieve access

- - -
- -
- - - + + + + +
+ +

Resource Tracker

+

Use your company email address to recieve access

+ + +
+ +
+ + + diff --git a/src/js/components/peopleTable.js b/src/js/components/peopleTable.js index 1bd227e..9733be1 100644 --- a/src/js/components/peopleTable.js +++ b/src/js/components/peopleTable.js @@ -2,6 +2,10 @@ import React from 'react'; import WeeksRow from './weeksRow'; var DateStore = require('../modules/stores').DateStore; +var total = 0 +var updated_projects = [] +//Added to sort open projects to show up at the top +var show_open_first = false class PeopleTable extends React.Component { constructor(props) { @@ -10,23 +14,112 @@ class PeopleTable extends React.Component { } componentDidMount() { - DateStore.on('change', ::this._peopleChanged); + total = this.getPrecentage() + DateStore.on('change', :: this._peopleChanged); } componentWillUnmount() { - DateStore.off('change', ::this._peopleChanged); + DateStore.off('change', :: this._peopleChanged); } + + setHeightRowDiv = () => { + // this function return height for people data table div (dynamic height) + var PeopleDataDiv = document.getElementsByClassName('fd-resourceTable-rowsWrap') + var top_value = 0 + if (PeopleDataDiv[0]) + top_value = PeopleDataDiv[0].offsetTop + 27 + return top_value + } + + componentDidUpdate() { + total = this.getPrecentage(); + try { + setTimeout(function(){ + $(".pie").each(function () { + var percent = $(this).data("percent"), + $left = $(this).find(".left span"), + $right = $(this).find(".right span"), + deg; + if (percent <= 50) { + // Hide left + $left.hide(); + + // Adjust right + deg = 180 - (percent / 100 * 360) + $right.css({ + "-webkit-transform": "rotateZ(-" + deg + "deg)" + }); + } else { + // Adjust left + deg = 180 - ((percent - 50) / 100 * 360) + $left.css({ + "-webkit-transform": "rotateZ(-" + deg + "deg)" + }); + } + }); + },500); + } catch (e) { + console.log(e); + } + } + + getPrecentage = () => { + // this funtion used to get the open pecentage and also sort the data as per open duration + const { projects } = this.state; + let totalDay = 0 + let people_data = [] + projects.forEach(people => { + if (people.weeklyBreakdown && people.weeklyBreakdown.length) { + let open_count = 0 + people.weeklyBreakdown.forEach(ele => { + ele.forEach(data => { + if (data.name === "OPEN") { + totalDay = totalDay + data.duration + open_count = open_count + data.duration + } + }) + }) + people['open_count'] = open_count + people_data.push(people) + } + }) + + // calculate percentage + let per = ((totalDay / (projects.length * 60)) * 100).toFixed(0) + + // sorting the peoples array as per open duration + updated_projects = people_data + updated_projects.sort(this.compare) + return (projects.length ? per : 0) + } + _peopleChanged() { this.setState({ - projects : DateStore.getState().people, + projects: DateStore.getState().people, dates: DateStore.getState().dates, currentDay: DateStore.getState().currentDay, }); } + compare = (a, b) => { + // to sort descending order + const bandA = a.open_count; + const bandB = b.open_count; + + let comparison = 0; + if (bandA < bandB) { + comparison = 1; + } else if (bandA > bandB) { + comparison = -1; + } + return comparison; + } + render() { const { dates, projects, currentDay } = this.state; let rows = []; + let rows_sorted = []; let cols = []; + let BenchPrecent = this.getPrecentage(); if (dates.length > 0) { dates.forEach((date, i) => { @@ -34,18 +127,55 @@ class PeopleTable extends React.Component { const classes = `fd-resourceTable-date fd-resourceTable-date--${i + 1} ${isCurrentWeek}`; const key = `${date.day}-${i}`; - cols.push(
{date.month} / {date.day}
M T W T F
); + cols.push(
+ {date.month} / {date.day} +
+ M + T + W + T + F +
+
); }); } + // show normal data projects.forEach(people => { rows.push(); }); + // show sorted data + updated_projects.forEach(people => { + rows_sorted.push(); + }); + return ( -
-
{cols}
-
{rows}
+
+
+ + Bench Strength +
+
+ +
+
+ +
+
+ + + {cols} + +
+ +
+ {this.props.show_open ? rows_sorted : rows} +
+
); } diff --git a/src/js/components/projectsRow.js b/src/js/components/projectsRow.js index 7b0bc6b..cd82f54 100644 --- a/src/js/components/projectsRow.js +++ b/src/js/components/projectsRow.js @@ -10,10 +10,10 @@ class ProjectsRow extends React.Component { } componentDidMount() { - TrackerStore.on('change', ::this._projectsChanged); + TrackerStore.on('change', :: this._projectsChanged); } componentWillUnmount() { - TrackerStore.off('change', ::this._projectsChanged); + TrackerStore.off('change', :: this._projectsChanged); } // only update if a client is added/changed shouldComponentUpdate(nextProps, nextState) { @@ -21,7 +21,7 @@ class ProjectsRow extends React.Component { return updatedState; } - _projectsChanged() { + _projectsChanged() { this.setState({ clients: TrackerStore.getState().clients }); @@ -37,13 +37,24 @@ class ProjectsRow extends React.Component { background: client.color }; - rows.push(
  • {client.name}
    • ); + rows.push( +
  • +
    + +
    + {client.name} +
    +
    +
    • + ); }); } return ( -
    -
      {rows}
    +
    +
      + {rows} +
    ); } diff --git a/src/js/components/trackerPanel.js b/src/js/components/trackerPanel.js index 21099ad..0cee2d2 100644 --- a/src/js/components/trackerPanel.js +++ b/src/js/components/trackerPanel.js @@ -7,6 +7,8 @@ import Screensaver from './screensaver'; var SettingsStore = require('../modules/stores').SettingsStore; var TrackerActions = require('../modules/actions').TrackerActions; +var show_open_backup = false + class TrackerPanel extends React.Component { constructor(props) { super(props); @@ -14,26 +16,26 @@ class TrackerPanel extends React.Component { } componentWillUnmount() { - SettingsStore.off('change', ::this._settingsChanged); + SettingsStore.off('change', :: this._settingsChanged); clearInterval(this.timerID); } componentDidMount() { - SettingsStore.on('change', ::this._settingsChanged); + SettingsStore.on('change', :: this._settingsChanged); this.timerID = setInterval( () => this.tick(), - 10000 + 300000 // 60000 micro-sec = 1 min ); } tick() { - TrackerActions.reload(); - TrackerActions.reload_settings(); - this.setState({ - date: new Date(), - showDayOfWeekLabels: SettingsStore.getState().settings[6][0].toLowerCase(), - highlightDayOfWeek: SettingsStore.getState().settings[7][0].toLowerCase(), - logo: SettingsStore.getState().settings[0][0], - name: SettingsStore.getState().settings[1][0] - }); + TrackerActions.reload(); + TrackerActions.reload_settings(); + this.setState({ + date: new Date(), + showDayOfWeekLabels: SettingsStore.getState().settings[6][0].toLowerCase(), + highlightDayOfWeek: SettingsStore.getState().settings[7][0].toLowerCase(), + logo: SettingsStore.getState().settings[0][0], + name: SettingsStore.getState().settings[1][0] + }); } _settingsChanged() { this.setState({ @@ -42,24 +44,51 @@ class TrackerPanel extends React.Component { highlightDayOfWeek: SettingsStore.getState().settings[7][0].toLowerCase(), logo: SettingsStore.getState().settings[0][0], name: SettingsStore.getState().settings[1][0], + show_open_first: show_open_backup }); } + toggleOpenList = () => { + const { show_open_first } = this.state; + if (show_open_first === true) { + this.setState({ + show_open_first: false + }) + show_open_backup = false + } else { + this.setState({ + show_open_first: true + }) + show_open_backup = true + } + } + render() { - let { date, showDayOfWeekLabels, highlightDayOfWeek, logo, name } = this.state; + let { date, showDayOfWeekLabels, highlightDayOfWeek, logo, name, show_open_first } = this.state; - return( -
    -
    - -

    Resource Tracker

    - - Last Updated: {this.state.date.toLocaleTimeString()} -
    - - + return ( +
    +
    +
    +
    +

    Resource Tracker

    +
    + +
    +
    Last Updated:
    +
    {this.state.date.toLocaleTimeString()}
    +
    + Open First + + {show_open_first ? : } + +
    - ); +
    + + +
    + ); } } diff --git a/src/js/components/weeksRow.js b/src/js/components/weeksRow.js index 84b66f2..4b7cad3 100644 --- a/src/js/components/weeksRow.js +++ b/src/js/components/weeksRow.js @@ -23,7 +23,9 @@ class WeeksRow extends React.Component {
    - {this.props.people.employee} + + {this.props.people.employee} +
    {cols} diff --git a/src/js/main.js b/src/js/main.js index 237c363..e4194b9 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -3,7 +3,11 @@ import Tracker from './containers/tracker'; const APP = { init() { - this.loadGoogleAPIs(); + //Added timeout for better loading, sometimes on first load color was not reflected so delaying might help + setTimeout(() => { + this.loadGoogleAPIs(); + }, 2000); + }, bootstrap() { diff --git a/src/js/modules/stores.js b/src/js/modules/stores.js index 96d2de0..22a2bd4 100644 --- a/src/js/modules/stores.js +++ b/src/js/modules/stores.js @@ -42,7 +42,7 @@ function errorHandler(res, status, error) { function _getSettings() { var range = 'B:B'; - $.ajax({ + $.ajax({ url: `https://sheets.googleapis.com/v4/spreadsheets/${config.spreadsheetId}/values/settings!${range}?access_token=${_config.token}`, type: 'GET', dataType: 'text', @@ -87,7 +87,7 @@ function _getSettings() { function _getProjects() { var range = 'A:A'; - $.ajax({ + $.ajax({ url: `https://sheets.googleapis.com/v4/spreadsheets/${config.spreadsheetId}/values/${config.sheetId}!${range}?access_token=${_config.token}`, type: 'GET', dataType: 'text', @@ -116,7 +116,7 @@ function _getProjects() { for (let i = 0; i < clientsData.length; i++) { clientsList.push({ - name: clientsData[i][0], + name: clientsData[i][0], color: '#' + clientsData[i][1] }); } @@ -146,10 +146,10 @@ function _getDates() { const resParsed = JSON.parse(res); const today = new Date(); const dd = (today.getDate() < 10) ? `0${today.getDate()}` : today.getDate(); - const mm = (today.getMonth()+1 < 10) ? `0${today.getMonth()+1}` : today.getMonth()+1; + const mm = (today.getMonth() + 1 < 10) ? `0${today.getMonth() + 1}` : today.getMonth() + 1; const yyyy = today.getFullYear(); const weekday = new Array(7); - weekday[0] = "Sun"; + weekday[0] = "Sun"; weekday[1] = "Mon"; weekday[2] = "Tue"; weekday[3] = "Wed"; @@ -209,7 +209,10 @@ function _parseProjects(data) { // Skip first Row for (var i = 1; i <= data.valueRanges.length - 1; i++) { // Every 2 rows = 1 person's full day + // data.valueRanges[i]; data.valueRanges[i]; + if (data.valueRanges[i].values == undefined) continue; + var personHalfDayArray = [], multiDayProject = false, projectName = '', @@ -222,41 +225,43 @@ function _parseProjects(data) { // Start at second position to skip project column and merged cell for (var d = weekToStart; d <= parseInt(weekToStart + 30); d++) { // Check for a project name - if(data.valueRanges[i].values[0][d].length >= 1) { + //when we see on weekend its breaking so adding check + if(data.valueRanges[i] == undefined || data.valueRanges[i].values[0] == undefined || data.valueRanges[i].values[0][d] == undefined) continue; + if (data.valueRanges[i].values[0][d].length >= 1) { // End current project tracking and start a new one when the next projec tname appears //if(data.valueRanges[i].values[0][d] != projectName) { - if (projectName.length > 0) { - if(projectName.indexOf('-') > -1) { - let projectArr = projectName.split('-'); + if (projectName.length > 0) { + if (projectName.indexOf('-') > -1) { + let projectArr = projectName.split('-'); - var projectColor = _checkProjectColor(projectArr[0]), - id = personName + projectArr[0] + projectLength + d; - personHalfDayArray.push({name: projectArr[0], duration: projectLength, color: projectColor, id: id, delivery: true}); - } - else { - var projectColor = _checkProjectColor(projectName), - id = personName + projectName + projectLength + d; - personHalfDayArray.push({name: projectName, duration: projectLength, color: projectColor, id: id, }); - prevProjectName = projectName; - } + var projectColor = _checkProjectColor(projectArr[0]), + id = personName + projectArr[0] + projectLength + d; + personHalfDayArray.push({ name: projectArr[0], duration: projectLength, color: projectColor, id: id, delivery: true }); } - // If project length is > 5 (length of a week) - multiDayProject = true; - projectName = data.valueRanges[i].values[0][d]; - projectLength = 1; // Resets project length to initial start of 1 + else { + var projectColor = _checkProjectColor(projectName), + id = personName + projectName + projectLength + d; + personHalfDayArray.push({ name: projectName, duration: projectLength, color: projectColor, id: id, }); + prevProjectName = projectName; + } + } + // If project length is > 5 (length of a week) + multiDayProject = true; + projectName = data.valueRanges[i].values[0][d]; + projectLength = 1; // Resets project length to initial start of 1 //} } // Add to project duration if the next cell in the spreadsheet is empty - else if(data.valueRanges[i].values[0][d].length <= 1 && multiDayProject == true) { + else if (data.valueRanges[i].values[0][d].length <= 1 && multiDayProject == true) { projectLength++; } - + } // Even - if(i % 2 == 0) { + if (i % 2 == 0) { // Push both morning and afternoon times - reformattedDataArray.push({employee: personName, top: personHalfDaySavedArray, bottom: personHalfDayArray}); + reformattedDataArray.push({ employee: personName, top: personHalfDaySavedArray, bottom: personHalfDayArray }); } // Odd, assign day to person else { @@ -271,9 +276,9 @@ function _parseProjects(data) { // Return project's color function _checkProjectColor(project) { for (var i = 0; i < _state.projects.length; i++) { - if(_state.projects[i].name == project) { - return _state.projects[i].color; - } + if (_state.projects[i].name == project) { + return _state.projects[i].color; + } } } @@ -295,11 +300,11 @@ function _parseProjectsByWeek(data) { for (var d = 0; d < data[i].top.length; d++) { - if(weekMaxDuration - currentWeekTimeTop - data[i].top[d].duration >= 0) { + if (weekMaxDuration - currentWeekTimeTop - data[i].top[d].duration >= 0) { currentWeekTimeTop += data[i].top[d].duration; weekResourcesTop.push(data[i].top[d]); } - if(weekMaxDuration - currentWeekTimeTop == 0) { + if (weekMaxDuration - currentWeekTimeTop == 0) { //fullResourcesTop.push(weekResourcesTop); fullResources.push(weekResourcesTop) weekResourcesTop = []; @@ -308,11 +313,11 @@ function _parseProjectsByWeek(data) { } for (var a = 0; a < data[i].bottom.length; a++) { - if(weekMaxDuration - currentWeekTimeBottom - data[i].bottom[a].duration >= 0) { + if (weekMaxDuration - currentWeekTimeBottom - data[i].bottom[a].duration >= 0) { currentWeekTimeBottom += data[i].bottom[a].duration; weekResourcesBottom.push(data[i].bottom[a]); } - if(weekMaxDuration - currentWeekTimeBottom == 0) { + if (weekMaxDuration - currentWeekTimeBottom == 0) { fullResourcesBottom.push(weekResourcesBottom); weekResourcesBottom = []; currentWeekTimeBottom = 0; @@ -320,7 +325,7 @@ function _parseProjectsByWeek(data) { } for (var c = 0; c < fullResources.length; c++) { - + if (undefined !== fullResourcesBottom[c] && fullResourcesBottom[c].length) { for (var b = 0; b < fullResourcesBottom[c].length; b++) { fullResources[c].push(fullResourcesBottom[c][b]); @@ -328,7 +333,7 @@ function _parseProjectsByWeek(data) { } } - formattedByWeek.push({employee: data[i].employee, weeklyBreakdown: fullResources}); + formattedByWeek.push({ employee: data[i].employee, weeklyBreakdown: fullResources }); //formattedByWeek.push({employee: data[i].employee, weeklyBreakdownTop: fullResourcesTop, weeklyBreakdownBottom: fullResourcesBottom}); } @@ -364,68 +369,68 @@ function _reloadTracker() { } var SettingsStore = $.extend({}, EventEmitter.prototype, { - getState: function() { + getState: function () { return _state; }, - emitChange: function() { + emitChange: function () { this.emit('change'); }, - addChangeListener: function(callback) { + addChangeListener: function (callback) { this.on('change', callback); }, - removeChangeListener: function(callback) { + removeChangeListener: function (callback) { this.removeListener('change', callback); } }); var TrackerStore = $.extend({}, EventEmitter.prototype, { - getState: function() { + getState: function () { return _state; }, - emitChange: function() { + emitChange: function () { this.emit('change'); }, - addChangeListener: function(callback) { + addChangeListener: function (callback) { this.on('change', callback); }, - removeChangeListener: function(callback) { + removeChangeListener: function (callback) { this.removeListener('change', callback); } }); var DateStore = $.extend({}, EventEmitter.prototype, { - getState: function() { + getState: function () { return _state; }, - emitChange: function() { + emitChange: function () { this.emit('change'); }, - addChangeListener: function(callback) { + addChangeListener: function (callback) { this.on('change', callback); }, - removeChangeListener: function(callback) { + removeChangeListener: function (callback) { this.removeListener('change', callback); } }); -AppDispatcher.register(function(action) { - switch(action.actionType) { +AppDispatcher.register(function (action) { + switch (action.actionType) { case TrackerConstants.GET_PROJECTS: _getProjects(); _getDates(); - break; + break; case TrackerConstants.GET_DATES: _getDates(); - break; + break; case TrackerConstants.GET_PEOPLE: _getPeople(); - break; + break; case TrackerConstants.GET_PEOPLES_DATA: _getPeoplesData(); - break; + break; case TrackerConstants.GET_SETTINGS: _getSettings(); - break; + break; } return true; }); From 164331b365dad00dfc8d847d39298351ffdf4370 Mon Sep 17 00:00:00 2001 From: Pravin Uttarwar Date: Sat, 25 Apr 2020 14:05:11 +0530 Subject: [PATCH 2/2] Removed custom fav icon --- src/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.html b/src/index.html index abd8b47..5e15b96 100644 --- a/src/index.html +++ b/src/index.html @@ -9,7 +9,7 @@