alansouzati/grommet_tutorial_bower.html

## grommet_tutorial_bower.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Todo App</title>
  <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400italic,400,700" rel="stylesheet" type="text/css">
  <link href="bower_components/grommet/css/grommet-hpe.min.css" rel="stylesheet" type="text/css">
  <script src="bower_components/react/react.js"></script>
  <script src="bower_components/react/JSXTransformer.js"></script>
  <script src="bower_components/grommet/grommet.min.js"></script>
</head>
<body>
  <div id="content"></div>
  <script type="text/jsx">

   function getLabel(label, count, colorIndex) {
    return {
      "label": label,
      "value": count,
      "units": count > 1 ? "Tasks" : 'Task',
      "colorIndex": colorIndex
    };
   }

   var TodoAppDashboard = React.createClass({

    render: function () {

     var tasksMap = {
      error: 0,
      ok: 0,
      warning: 0
     };

     var items = this.props.tasks.map(function(task) {

      tasksMap[task.type] += 1;

      return (
       <tr>
         <td><Grommet.Icons.Status value={task.type} small={true} /></td>
        <td>{task.item}</td>
       </tr>
      );
     });

      return (
        <Grommet.Tiles>
         <Grommet.Tile>
          <Grommet.Section centered={true}>
           <Grommet.Donut series={[
            getLabel('Fix Now', tasksMap.error, "error"),
            getLabel('Remember', tasksMap.warning, "warning"),
            getLabel('Enjoy', tasksMap.ok, "ok")
           ]}/>
          </Grommet.Section>
         </Grommet.Tile>
         <Grommet.Tile>
          <Grommet.Header><h3>My Tasks:</h3></Grommet.Header>
           <Grommet.Table>
            <tbody>
             {items}
            </tbody>
           </Grommet.Table>
         </Grommet.Tile>
        </Grommet.Tiles>
      );
    }
  });

  var App = React.createClass({
   getInitialState: function() {
    return {
     tasks: [
       {
        type: 'error',
        item: 'The coffee pot needs to be cleaned.'
       },
       {
        type: 'ok',
        item: 'It\'s going to be a sunny day tomorrow.'
       },
       {
        type: 'warning',
        item: 'Don\'t forget your anniversary in two weeks.'
       },
       {
        type: 'warning',
        item: 'Pay my late bills.'
       },
       {
        type: 'ok',
        item: 'Go to the Sharks game tomorrow.'
       },
       {
        type: 'ok',
        item: 'Go to Santa Cruz, it\'s summer time.'
       },
      ]
    };
   },
    render: function() {
      return (
        <Grommet.App centered={false}>
          <Grommet.Header primary={true}>
            <Grommet.Title>Todo App</Grommet.Title>
          </Grommet.Header>
          <TodoAppDashboard tasks={this.state.tasks} />
        </Grommet.App>
      );
    }
  });

  var element = document.getElementById('content');
  React.render(React.createElement(App), element);
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Todo App</title>
	<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400italic,400,700" rel="stylesheet" type="text/css">
	<link href="bower_components/grommet/css/grommet-hpe.min.css" rel="stylesheet" type="text/css">
	<script src="bower_components/react/react.js"></script>
	<script src="bower_components/react/JSXTransformer.js"></script>
	<script src="bower_components/grommet/grommet.min.js"></script>
	</head>
	<body>
	<div id="content"></div>
	<script type="text/jsx">

	function getLabel(label, count, colorIndex) {
	return {
	"label": label,
	"value": count,
	"units": count > 1 ? "Tasks" : 'Task',
	"colorIndex": colorIndex
	};
	}

	var TodoAppDashboard = React.createClass({

	render: function () {

	var tasksMap = {
	error: 0,
	ok: 0,
	warning: 0
	};

	var items = this.props.tasks.map(function(task) {

	tasksMap[task.type] += 1;

	return (
	<tr>
	<td><Grommet.Icons.Status value={task.type} small={true} /></td>
	<td>{task.item}</td>
	</tr>
	);
	});

	return (
	<Grommet.Tiles>
	<Grommet.Tile>
	<Grommet.Section centered={true}>
	<Grommet.Donut series={[
	getLabel('Fix Now', tasksMap.error, "error"),
	getLabel('Remember', tasksMap.warning, "warning"),
	getLabel('Enjoy', tasksMap.ok, "ok")
	]}/>
	</Grommet.Section>
	</Grommet.Tile>
	<Grommet.Tile>
	<Grommet.Header><h3>My Tasks:</h3></Grommet.Header>
	<Grommet.Table>
	<tbody>
	{items}
	</tbody>
	</Grommet.Table>
	</Grommet.Tile>
	</Grommet.Tiles>
	);
	}
	});

	var App = React.createClass({
	getInitialState: function() {
	return {
	tasks: [
	{
	type: 'error',
	item: 'The coffee pot needs to be cleaned.'
	},
	{
	type: 'ok',
	item: 'It\'s going to be a sunny day tomorrow.'
	},
	{
	type: 'warning',
	item: 'Don\'t forget your anniversary in two weeks.'
	},
	{
	type: 'warning',
	item: 'Pay my late bills.'
	},
	{
	type: 'ok',
	item: 'Go to the Sharks game tomorrow.'
	},
	{
	type: 'ok',
	item: 'Go to Santa Cruz, it\'s summer time.'
	},
	]
	};
	},
	render: function() {
	return (
	<Grommet.App centered={false}>
	<Grommet.Header primary={true}>
	<Grommet.Title>Todo App</Grommet.Title>
	</Grommet.Header>
	<TodoAppDashboard tasks={this.state.tasks} />
	</Grommet.App>
	);
	}
	});

	var element = document.getElementById('content');
	React.render(React.createElement(App), element);
	</script>
	</body>
	</html>