diff --git a/client/coral-admin/src/containers/Dashboard/Dashboard.css b/client/coral-admin/src/containers/Dashboard/Dashboard.css index 72b9bd90c..cdad990ba 100644 --- a/client/coral-admin/src/containers/Dashboard/Dashboard.css +++ b/client/coral-admin/src/containers/Dashboard/Dashboard.css @@ -7,3 +7,28 @@ font-size: 1.5rem; font-weight: bold; } + +.autoUpdate { + background-color: #d5d5d5; + padding: 3px 10px 10px 10px; + margin-bottom: 0; + + i { + position: relative; + top: 7px; + } + + b { + float: right; + border-radius: 20px; + cursor: pointer; + background-color: #c0c0c0; + width: 30px; + height: 30px; + text-align: center; + top: 4px; + position: relative; + line-height: 1.7em; + font-size: 1.3em; + } +} diff --git a/client/coral-admin/src/containers/Dashboard/Dashboard.js b/client/coral-admin/src/containers/Dashboard/Dashboard.js index 96e837a9e..5b4a20282 100644 --- a/client/coral-admin/src/containers/Dashboard/Dashboard.js +++ b/client/coral-admin/src/containers/Dashboard/Dashboard.js @@ -6,11 +6,41 @@ import {getMetrics} from 'coral-admin/src/graphql/queries'; import FlagWidget from './FlagWidget'; import LikeWidget from './LikeWidget'; import {showBanUserDialog, hideBanUserDialog} from 'coral-admin/src/actions/moderation'; +import I18n from 'coral-framework/modules/i18n/i18n'; +import translations from 'coral-admin/src/translations'; +import {Spinner, Icon} from 'coral-ui'; -import {Spinner} from 'coral-ui'; +const lang = new I18n(translations); +const refreshIntervalSeconds = 60 * 5; class Dashboard extends React.Component { + state = { + noteHidden: false, + secondsUntilRefresh: refreshIntervalSeconds + } + + componentWillMount () { + setInterval(() => { // the countdown timer + let nextCount = this.state.secondsUntilRefresh - 1; + if (nextCount < 0) { + nextCount = refreshIntervalSeconds; + this.props.data.refetch(); + } + this.setState({secondsUntilRefresh: nextCount}); + }, 1000); + } + + formatTime = () => { + const minutes = Math.floor(this.state.secondsUntilRefresh / 60); + let seconds = (this.state.secondsUntilRefresh % 60).toString(); + if (seconds.length < 2) { + seconds = `0${seconds}`; + } + + return `${minutes}:${seconds}`; + } + render () { if (this.props.data && this.props.data.loading) { @@ -20,9 +50,18 @@ class Dashboard extends React.Component { const {data: {assetsByLike, assetsByFlag}} = this.props; return ( -
- - +
+

this.setState({noteHidden: true})}> + × + {lang.t('dashboard.next-update', this.formatTime())} {lang.t('dashboard.auto-update')} +

+
+ + +
); } diff --git a/client/coral-admin/src/containers/Dashboard/Widget.css b/client/coral-admin/src/containers/Dashboard/Widget.css index 124663cea..401cd1fe7 100644 --- a/client/coral-admin/src/containers/Dashboard/Widget.css +++ b/client/coral-admin/src/containers/Dashboard/Widget.css @@ -3,12 +3,11 @@ } .widget { - box-sizing: border-box; margin: 10px 5px 5px 5px; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); - padding: 15px; flex: 1; background-color: white; + box-sizing: border-box; } .widget * { @@ -20,6 +19,7 @@ padding-left: 10px; font-size: 1.5rem; font-weight: bold; + background-color: #e0e0e0; } .widgetTable { diff --git a/client/coral-admin/src/translations.json b/client/coral-admin/src/translations.json index ac9131685..257148837 100644 --- a/client/coral-admin/src/translations.json +++ b/client/coral-admin/src/translations.json @@ -117,6 +117,8 @@ "write_message": "Write a message" }, "dashboard": { + "next-update": "{0} minutes until next update.", + "auto-update": "Data automatically updates every five minutes or when you Reload.", "no_flags": "There have been no flags in the last 5 minutes! Hooray!", "no_likes": "There have been no likes in the last 5 minutes. All quiet.", "flags": "Flags", @@ -235,6 +237,8 @@ "yes_ban_user": "Si, Suspendan el usuario" }, "dashbord": { + "next-update": "{0} minutos hasta la siguiente actualización.", + "auto-update": "Los datos se actualizan automaticamente cada 5 minutos o cuando Recargas.", "no_flags": "¡Nadie ha marcado nada en los últimos 5 minutos! ¡Bravo!", "no_likes": "A nadie le ha gustado algún comentario en los últimos 5 minutos. Todo tranquilo.", "flags": "Marcados",