Skip to content

Commit 0e23f24

Browse files
AzzooAzzoo
authored
Merge pull request #104 from Azzoo/main
Date & Time filter for charts #83
2 parents bd810e6 + 876becb commit 0e23f24

File tree

29 files changed

+1286
-327
lines changed

29 files changed

+1286
-327
lines changed

‎README.md‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -133,14 +133,14 @@ This method checks if the user is already authenticated and redirects the user t
133133

134134
```js
135135
const auth = authService.isStitchAuthenticated;
136-
137136
if (route.auth){
138137
if (!auth){
139138
return <Redirect to="/login" />;
140139
} else {
141140
if (!authService.isAuthenticated){
142-
authService.getUserFromLocalStorage();
143-
return <Redirect to={route.path} />
141+
return authService.reauthenticateUser().then(()=>{
142+
return <Redirect to={route.path} />
143+
});
144144
}
145145
}
146146
}
@@ -152,6 +152,7 @@ if (route.routes){
152152
} else {
153153
return <route.component isLoggedIn={auth} {...props} />;
154154
}
155+
};
155156
```
156157

157158
#### MongoDB Charts
@@ -166,12 +167,12 @@ Example chart options:
166167

167168
```js
168169
const chartOptions = {
169-
width: "100%",
170+
width: "100%",
170171
height: "100%",
171172
refreshInterval: 1300, // in seconds.
172-
useAuthenticatedAccess: true,
173+
useAuthenticatedAccess: true,
173174
chartId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
174-
filter: {exampleField: "someValue"}
175+
filter: {exampleField: "someValue"}
175176
};
176177
```
177178

‎src/components/boardings/boarding-view/crew/crew.section.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ class CrewSection extends Component {
3131
subText={t("BOARDING_PAGE.VIEW_BOARDING.PHOTOS")}
3232
/>
3333
<TextViewer
34-
mainText={captain.attachments.notes[0]}
34+
mainText={captain.attachments && captain.attachments.notes && captain.attachments.notes.length ? captain.attachments.notes[0] : ""}
3535
subText={t("BOARDING_PAGE.VIEW_BOARDING.NOTES")}
3636
/>
3737
</section>

‎src/components/header/header.component.js‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ const authService = AuthService.getInstance();
2929
class Header extends Component {
3030
state = {
3131
activeMenu: "",
32+
currentUser: null
3233
};
3334

3435
showActiveMenu = (value) => {
@@ -49,11 +50,18 @@ class Header extends Component {
4950
window.location.href = "/";
5051
};
5152

53+
componentDidMount(){
54+
authService.on("user-object-changed", (user) => {
55+
this.setState({user: {...user}})
56+
});
57+
}
58+
5259
render() {
53-
const { activeMenu } = this.state;
60+
const { activeMenu, currentUser } = this.state;
5461
const { t } = this.props;
55-
56-
return (
62+
const isAuthenticated = authService.isAuthenticated;
63+
const user = currentUser ? currentUser : authService.user;
64+
return isAuthenticated ? (
5765
<header className="flex-row align-center justify-center full-view header-top">
5866
<div className="flex-row align-center justify-between standard-view">
5967
<NavLink to={HOME_PAGE}>
@@ -200,11 +208,11 @@ class Header extends Component {
200208
onClick={() => this.showActiveMenu("profile")}
201209
>
202210
<div className="flex-row align-center">
203-
<UserPhoto imageId={authService.user.profilePic} defaultIcon={true}/>
211+
<UserPhoto imageId={user ? user.profilePic : null} defaultIcon={true}/>
204212
</div>
205213
<div className="flex-row align-center profile-name">
206-
{authService.isAuthenticated
207-
? `${authService.user.name.first} ${authService.user.name.last}`
214+
{isAuthenticated && user.name
215+
? `${user.name.first} ${user.name.last}`
208216
: t("WARNINGS.NOT_AUTHENTICATED")}
209217
</div>
210218
<img
@@ -231,7 +239,7 @@ class Header extends Component {
231239
</div>
232240
</div>
233241
</header>
234-
);
242+
): "";
235243
}
236244
}
237245

‎src/components/home/boardings-section/boardings.section.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,11 @@ class BoardingsSection extends Component {
4141
};
4242

4343
render() {
44-
const { t } = this.props;
44+
const { t, filter} = this.props;
4545

46+
if (filter && this.state.filter === ""){
47+
chartOptions.filter = filter;
48+
}
4649
return (
4750
<section className="flex-column justify-start align-start standard-view white-bg box-shadow margin-bottom charts-section">
4851
<div className="flex-row justify-between align-center full-view">

‎src/components/home/compliance-rate-section/compliance-rate.section.js‎

Lines changed: 31 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { memo } from "react";
1+
import React, { memo, Component } from "react";
22
import { withTranslation } from "react-i18next";
33

44
import ChartBox from "./../../charts/chart-box.component";
@@ -39,30 +39,39 @@ const chartComplianceRate = {
3939
...stitchService.chartsConfig["compliance-rate"],
4040
};
4141

42-
const ComplianceRateSection = ({ t }) => {
43-
return (
44-
<section className="flex-column justify-start align-start standard-view white-bg box-shadow margin-bottom charts-section">
45-
<h2 className="chart-name">{t("HOME_PAGE.COMPLIANCE_RATE")}</h2>
46-
<div className="flex-row justify-between align-stretch full-view lg-chart">
47-
<div className="half-row-view">
48-
<div className="align-stretch md-chart compliance-rate-value ">
49-
<ChartBox options={chartComplianceRate}></ChartBox>
50-
</div>
51-
<div className="flex-row align-stretch md-chart">
52-
<div className="half-row-view">
53-
<ChartBox options={chartBoardingsCount}></ChartBox>
42+
class ComplianceRateSection extends Component{
43+
44+
render(){
45+
const { t, filter } = this.props;
46+
if (filter){
47+
chartBoardingsCompliance.filter = filter;
48+
chartCitationsAndWarnings.filter = filter;
49+
chartBoardingsCount.filter = filter;
50+
}
51+
return (
52+
<section className="flex-column justify-start align-start standard-view white-bg box-shadow margin-bottom charts-section">
53+
<h2 className="chart-name">{t("HOME_PAGE.COMPLIANCE_RATE")}</h2>
54+
<div className="flex-row justify-between align-stretch full-view lg-chart">
55+
<div className="half-row-view">
56+
<div className="align-stretch md-chart compliance-rate-value ">
57+
<ChartBox options={chartComplianceRate}></ChartBox>
5458
</div>
55-
<div className="half-row-view">
56-
<ChartBox options={chartCitationsAndWarnings}></ChartBox>
59+
<div className="flex-row align-stretch md-chart">
60+
<div className="half-row-view">
61+
<ChartBox options={chartBoardingsCount}></ChartBox>
62+
</div>
63+
<div className="half-row-view">
64+
<ChartBox options={chartCitationsAndWarnings}></ChartBox>
65+
</div>
5766
</div>
5867
</div>
68+
<div className="half-row-view">
69+
<ChartBox options={chartBoardingsCompliance}></ChartBox>
70+
</div>
5971
</div>
60-
<div className="half-row-view">
61-
<ChartBox options={chartBoardingsCompliance}></ChartBox>
62-
</div>
63-
</div>
64-
</section>
65-
);
66-
};
72+
</section>
73+
);
74+
};
6775

76+
}
6877
export default withTranslation("translation")(memo(ComplianceRateSection));

‎src/components/home/home.component.js‎

Lines changed: 34 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
1-
import React, { Component } from "react";
1+
import React, { Component, Fragment } from "react";
22
import { withTranslation } from "react-i18next";
3-
3+
import moment from "moment";
44
import ComplianceRateSection from "./compliance-rate-section/compliance-rate.section";
55
import BoardingsSection from "./boardings-section/boardings.section";
66
import PatrolHoursSection from "./patrol-hours-section/patrol-hours.section";
77
import SearchPanel from "./../partials/search-panel/search-panel.component";
8+
import DatesRange from "./../partials/dates-range/dates-range.component";
89

910
import SearchService from "./../../services/search.service";
11+
import AuthService from "./../../services/auth.service";
1012

1113
import "./home.css";
1214

15+
const authService = AuthService.getInstance();
1316
const searchService = SearchService.getInstance();
1417

1518
class Home extends Component {
@@ -19,6 +22,10 @@ class Home extends Component {
1922
crew: [],
2023
searchQuery: "",
2124
highlighted: [],
25+
isLoaded: true,
26+
datesFilter:{
27+
date: { $gt: moment().subtract(1, "week").toDate() }
28+
}
2229
};
2330

2431
search = (value) => {
@@ -33,9 +40,21 @@ class Home extends Component {
3340
this.setState({ searchQuery: value });
3441
};
3542

43+
changeFilter = (filter) => {
44+
let filterObject =
45+
{ $and : [{
46+
date: { $gt: new Date(filter.start)}
47+
}, {
48+
date: { $lte: new Date(filter.end)}
49+
}]
50+
};
51+
this.setState({datesFilter: filterObject});
52+
}
53+
3654
render() {
37-
const { vessels, boardings, crew, searchQuery, highlighted } = this.state;
55+
const { vessels, boardings, crew, searchQuery, highlighted, isLoaded, datesFilter } = this.state;
3856
const { t } = this.props;
57+
const user = authService.user;
3958

4059
return (
4160
<div className="flex-column full-view align-center home">
@@ -48,10 +67,18 @@ class Home extends Component {
4867
searchWords={highlighted}
4968
isAutofill={true}
5069
/>
51-
<h1>{`${t("HOME_PAGE.OVERVIEW")} April 01, 2020 - April 25, 2020`}</h1>
52-
<ComplianceRateSection />
53-
<BoardingsSection />
54-
<PatrolHoursSection />
70+
<div className="standard-view page-header">
71+
<div className="item-label">{t("HOME_PAGE.DASHBOARD")}</div>
72+
<div className="flex-row full-view justify-between align-center">
73+
<div className="item-name">{isLoaded && user ? user.agency.name : t("LOADING.LOADING")}</div>
74+
<DatesRange onFilterChange={this.changeFilter}></DatesRange>
75+
</div>
76+
</div>
77+
{isLoaded && <Fragment>
78+
<ComplianceRateSection filter={datesFilter}/>
79+
<BoardingsSection filter={datesFilter} />
80+
<PatrolHoursSection filter={datesFilter} />
81+
</Fragment>}
5582
</div>
5683
);
5784
}

‎src/components/home/home.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,8 @@
1616
width: 100%;
1717
height: 100vh;
1818
}
19+
20+
.home .page-header{
21+
margin-top: 1em;
22+
margin-bottom: 2em;
23+
}

‎src/components/home/patrol-hours-section/patrol-hours.section.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,11 @@ class PatrolHoursSection extends Component {
4141
};
4242

4343
render() {
44-
const { t } = this.props;
44+
const { t, filter } = this.props;
45+
46+
if (filter && this.state.filter === ""){
47+
chartOptions.filter = filter;
48+
}
4549

4650
return (
4751
<section className="flex-column justify-start align-start standard-view white-bg box-shadow margin-bottom charts-section patrol-hours-section">

‎src/components/login/login.component.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ class Login extends Component {
3434
this.setState({
3535
loading: false,
3636
});
37-
history.replace(HOME_PAGE);
37+
history.push(HOME_PAGE);
3838
})
3939
.catch((error) => {
4040
this.setState({

0 commit comments

Comments
 (0)