Add sync times and update styles

This commit is contained in:
Jackie Luo 2016-06-30 17:24:20 -07:00
parent 84ce3bdeb3
commit 27eba6dfaa
3 changed files with 27 additions and 7 deletions

View file

@ -1,15 +1,21 @@
body {
background-image: -webkit-linear-gradient(top, rgba(232, 244, 250, 0.6), rgba(231, 231, 233, 1)), url(http://news.nationalgeographic.com/content/dam/news/2015/12/13/BookTalk%20K2/01BookTalkK2.jpg);
background-image: -webkit-linear-gradient(top, rgba(232, 244, 250, 0.2), rgba(231, 231, 233, 1)), url(http://news.nationalgeographic.com/content/dam/news/2015/12/13/BookTalk%20K2/01BookTalkK2.jpg);
background-size: cover;
font-family: sans-serif;
font-family: Roboto, sans-serif;
}
h2 {
padding-top: 10px;
text-align: center;
}
.account {
display:inline-block;
display: inline-block;
border-radius: 5px;
width: 300px;
background-color: white;
padding:15px;
margin:5px;
background-color: rgba(255, 255, 255, 0.6);
padding: 15px;
margin: 5px;
vertical-align: top;
}
@ -17,6 +23,10 @@ body {
margin: 0; padding: 0;
}
.account .section {
text-align: center;
}
.account.errored {
background-image: linear-gradient(to bottom,#f2dede 0,#e7c3c3 100%);
background-repeat: repeat-x;

View file

@ -5,9 +5,11 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="/js/app.jsx" type="text/babel"></script>
<link rel='stylesheet' type="text/css" href="./css/app.css" />
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<title>K2 Dashboard</title>
</head>
<body>
<h2>Dashboard</h2>
<h2>K2 Dashboard</h2>
<div id="root"></div>
</body>
</html>

View file

@ -32,11 +32,19 @@ class Account extends React.Component {
render() {
const {account, assignment, active} = this.props;
const errorClass = account.sync_error ? ' errored' : ''
const syncCompletions = []
for (const time of account.lastSyncCompletions) {
syncCompletions.push(
<div key={time}>{new Date(time).toString()}</div>
)
}
return (
<div className={`account${errorClass}`}>
<h3>{account.email_address} {active ? '🌕' : '🌑'}</h3>
<strong>{assignment}</strong>
<pre>{JSON.stringify(account.sync_policy, null, 2)}</pre>
<div className="section">Last Sync Completions</div>
<pre>{syncCompletions}</pre>
{this.renderError()}
</div>
);