Create new alerts view

[benburwell]

In #13, a way for dispatchers to see the calls they had dispatched and what members were responding was requested.

Preparation & cleanup

1. Move the files in src/jsx/components out of the components directory and just into src/jsx.
2. Move the files in src/jsx/pages out of the pages directory and just into src/jsx.
3. Update the Gulpfile with explicit references to the components that are needed in the proper order:
   1. CheckboxInput
   2. LongTextInput
   3. TextInput
   4. SelectInput
   5. ErrorMessage
   6. FlashMessage
   7. LoginPage
   8. AlertPage
   9. Application

Now, the meat of the task:

getAlerts method

Edit the src/js/client.js file. Near the bottom, add MCEMS.prototype.getAlerts, a function that accepts a callback done. The function uses makeRequest to make a GET request to /api/v1/active911/alert. If the resulting status is not 200, the callback should be invoked with an Error object as the first parameter and null as the second. Otherwise, the callback should be invoked with null as the first parameter and the returned array of alerts as the second.

UnitResponse component

Create a new src/jsx/UnitResponse.jsx component. The getDefaultProps should return:

{
  name: "",
  status: "",
}

The render function should return a <div> that contains text in the format "Name: Status".

AlertTable component

Create a new src/jsx/AlertTable.jsx component. The getDefaultProps should return:

{
  client: null
}

The getInitialState function should return the result of client.getAlerts:

getInitialState: function() {
  this.props.client.getAlerts(function(err, alerts) {
    if (err) {
      return { alerts: [] };
    } else {
      return { alerts: alerts };
    }
  }
}

The componentDidMount function should invoke setInterval to call this.setState(this.getInitialState) every 30 seconds. Effectively, this will refresh the table from the server every 30 seconds.

The render function should return an HTML table that looks like the following:

Time Sent	Call	Location	Units	Incident
2016-01-01 18:21:36	Chest Pain	Walz 405 2400 W CHEW ST	see below	0123456
{alert.timestamp}	{alert.description}	{alert.location} {alert.address}	see below	{alert.id}

The Units cell should render a UnitResponse component for each unit in the responses array:

  <td>
    {this.state.responses.map(function(response) {
      return <UnitResponse key={response.id} name={response.name} status={response.status} />;
    })}
  </td>

AlertPage component

Modify the existing AlertPage component to include the new AlertTable component. Insert it just before the <form> in the render() function:

<AlertTable client={this.props.client} />

Notes

I think this should be all you need to do. Once the base functionality is in, I think we'll need to make it look nice, but I kind of want to get the data in there first.

This task sort of depends on Jalal's task (he is implementing the /api/v1/active911/alert route, see https://github.com/MCEMS/api/issues/25). Until that is up and running, you can have your getAlerts() function in client.js just return an array of made up data (see Jalal's task for the format).

If you have any questions or run into any issues, please let me know!