<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Plato - components/Event/EventActionBar.js</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">

  <!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

  <link href="../../assets/css/vendor/morris.css" rel="stylesheet" type="text/css">
  <link href="../../assets/css/vendor/bootstrap.css" rel="stylesheet" type="text/css">
  <link href="../../assets/css/vendor/font-awesome.css" rel="stylesheet" type="text/css">
  <link href="../../assets/css/vendor/codemirror.css" rel="stylesheet" type="text/css">
  <link href="../../assets/css/plato.css" rel="stylesheet" type="text/css">
  <link href="../../assets/css/plato-file.css" rel="stylesheet" type="text/css">

</head>

<body>

<div class="navbar navbar-fixed-top">
  <div class="container">
    <a class="navbar-brand" href="https://github.com/the-simian/es6-plato">ES6 Plato on Github</a>
    <ul class="nav navbar-nav">
      <li>
        <a href="../../index.html">Report Home</a>
      </li>
      <li class="active">
        <a href="display.html">Summary Display</a>
      </li>
    </ul>
  </div>
</div>

<div class="jumbotron">
  <div class="container">
    <h1>components/Event/EventActionBar.js</h1>
  </div>
</div>

<div class="container aggregate-stats">
  <div class="row">
    <div class="col-md-6">
      <h2 class="header">Maintainability <a href="http://blogs.msdn.com/b/codeanalysis/archive/2007/11/20/maintainability-index-range-and-meaning.aspx"><i class="icon icon-info-sign" rel="popover" data-placement="top" data-trigger="hover" data-content="A value between 0 and 100 that represents the relative ease of maintaining the code. A high value means better maintainability." data-original-title="Maintainability Index"  data-container="body"></i></a></h2>
      <p class="stat">70.11</p>
    </div>
    <div class="col-md-6">
      <h2 class="header">Lines of code <i class="icon icon-info-sign" rel="popover" data-placement="top" data-trigger="hover" data-content="Source Lines of Code / Logical Lines of Code" data-original-title="SLOC/LSLOC" data-container="body"></i></h2>
      <p class="stat">282</p>
    </div>
  </div>
  <div class="row historical">
    <div class="col-md-6">
      <p id="chart_historical_maint" class="chart"></p>
    </div>
    <div class="col-md-6">
      <p id="chart_historical_sloc" class="chart"></p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <h2 class="header">Difficulty  <a href="http://en.wikipedia.org/wiki/Halstead_complexity_measures"><i class="icon icon-info-sign" rel="popover" data-placement="top" data-trigger="hover" data-content="The difficulty measure is related to the difficulty of the program to write or understand." data-original-title="Difficulty" data-container="body"></i></a></h2>
      <p class="stat">33.45</p>
    </div>
    <div class="col-md-6">
      <h2 class="header">Estimated Errors  <a href="http://en.wikipedia.org/wiki/Halstead_complexity_measures"><i class="icon icon-info-sign" rel="popover" data-placement="top" data-trigger="hover" data-content="Halstead's delivered bugs is an estimate for the number of errors in the implementation." data-original-title="Delivered Bugs" data-container="body"></i></a></h2>
      <p class="stat">1.80</p>
    </div>
  </div>
</div>

<div class="container charts">
  <div class="row">
    <h2 class="header">Function weight</h2>
  </div>
  <div class="row">
    <div class="col-md-6">
      <h3 class="chart-header">By Complexity <a href="http://en.wikipedia.org/wiki/Cyclomatic_complexity"><i class="icon icon-info-sign" rel="popover" data-placement="top" data-trigger="hover" data-content="This metric counts the number of distinct paths through a block of code. Lower values are better." data-original-title="Cyclomatic Complexity" data-container="body"></i></a></h3>
      <div id="fn-by-complexity" class="stat"></div>
    </div>
    <div class="col-md-6">
      <h3 class="chart-header">By SLOC  <i class="icon icon-info-sign" rel="popover" data-placement="top" data-trigger="hover" data-content="Source Lines of Code / Logical Lines of Code" data-original-title="SLOC/LSLOC" data-container="body"></i></h3>
      <div id="fn-by-sloc" class="stat"></div>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <textarea id="file-source" class="col-md-12">import React from &#039;react&#039;;
import { Well, Button, ButtonToolbar, Glyphicon, Tooltip, OverlayTrigger, ToggleButtonGroup, ToggleButton, Navbar, Nav, NavItem, NavDropdown, MenuItem } from &#039;react-bootstrap&#039;;
import NewButton from &#039;./NewButton&#039;;
import { getPDF } from &#039;../../api/icat/icatPlus&#039;;
import { ComboSearch } from &#039;react-combo-search&#039;;
import PropTypes from &#039;prop-types&#039;;
import _ from &#039;lodash&#039;;
import { DOC_VIEW, LIST_VIEW, SORT_EVENTS_FROM_YOUNGEST, SORT_EVENTS_FROM_OLDEST } from &#039;../../constants/EventTypes&#039;;
import { GUI_CONFIG } from &#039;../../config/gui.config&#039;;

// styles 
require(&#039;./react-datetime.css&#039;);
require(&#039;./react-combo-select.css&#039;);
require(&#039;./react-combo-search.css&#039;);

/**
 * The menu displayed above the event list
 */
class EventActionBar extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isNavbarExpanded: true
        };

        this.getSelectPickerData = this.getSelectPickerData.bind(this);
        this.onSearch = this.onSearch.bind(this);
        this.onSelectNavbar = this.onSelectNavbar.bind(this);
        this.onToggleNavbar = this.onToggleNavbar.bind(this);
        this.sortByDate = this.sortByDate.bind(this);
    }

    render() {
        const { investigationId,
            isNewEventVisible,
            numberOfMatchingEventsFound,
            selectionFilter,
            sessionId,
            setNewEventVisibility,
            setView,
            sortingFilter } = this.props;

        function getCurrentlyPressedSortButton() {
            if (sortingFilter &amp;&amp; sortingFilter.createdAt) {
                return sortingFilter.createdAt;
            }
        }

        let defaultSortingOrder = (GUI_CONFIG().DEFAULT_SORTING_FILTER) ? GUI_CONFIG().DEFAULT_SORTING_FILTER.createdAt : 1;
        return (
            &lt;Navbar
                fluid
                expanded={this.state.isNavbarExpanded}
                onSelect={this.onSelectNavbar}
                onToggle={this.onToggleNavbar}
                style={{ background: &#039;none&#039;, border: &#039;none&#039;, webkitBoxShadow: &#039;none&#039;, boxShadow: &#039;none&#039; }}&gt;

                &lt;Navbar.Header&gt;
                    &lt;Navbar.Toggle /&gt;
                &lt;/Navbar.Header&gt;

                &lt;Navbar.Collapse&gt;
                    &lt;Nav&gt;
                        &lt;NavItem eventKey={1} href=&quot;#&quot; className=&quot;logbookNavItem&quot; &gt;
                            &lt;NewButton
                                isNewComponentVisible={isNewEventVisible}
                                onClick={setNewEventVisibility}
                            /&gt;
                        &lt;/NavItem&gt;

                        &lt;NavDropdown eventKey={2} title=&quot;More&quot; className=&quot;logbookNavItem&quot; id=&quot;basic-nav-dropdown&quot; style={{ paddingTop: &#039;5px&#039; }}&gt;
                            &lt;CameraButton investigationId={investigationId} /&gt;
                            &lt;PDFButton
                                investigationId={investigationId}
                                isNewEventVisible={isNewEventVisible}
                                numberOfMatchingEventsFound={numberOfMatchingEventsFound}
                                selectionFilter={selectionFilter}
                                sessionId={sessionId}
                            /&gt;
                        &lt;/NavDropdown&gt;

                        &lt;NavItem eventKey={4} href=&quot;#&quot; className=&quot;logbookNavItem&quot;&gt;
                            &lt;OverlayTrigger
                                placement=&quot;bottom&quot;
                                overlay={
                                    &lt;Tooltip id=&quot;tooltip&quot;&gt;
                                        &lt;p&gt; Select the view:  &lt;/p&gt;
                                        &lt;div style={{ textAlign: &#039;left&#039; }}&gt;
                                            &lt;ul&gt;
                                                &lt;li&gt; LIST - show all events.&lt;/li&gt;
                                                &lt;li&gt; DOC - show comments only.&lt;/li&gt;
                                            &lt;/ul&gt;
                                        &lt;/div&gt;
                                    &lt;/Tooltip&gt;
                                }&gt;
                                &lt;ButtonToolbar style={{ display: &#039;inline-block&#039; }}&gt;
                                    &lt;ToggleButtonGroup defaultValue={1} name=&quot;view&quot; type=&quot;radio&quot; value={this.props.view}&gt;
                                        &lt;ToggleButton bsSize=&quot;small&quot; value={LIST_VIEW} onClick={() =&gt; setView(LIST_VIEW)}&gt;&lt;Glyphicon glyph=&quot;list&quot; /&gt; List&lt;/ToggleButton&gt;
                                        &lt;ToggleButton bsSize=&quot;small&quot; value={DOC_VIEW} onClick={() =&gt; setView(DOC_VIEW)}&gt;&lt;Glyphicon glyph=&quot;list-alt&quot; /&gt; Doc &lt;/ToggleButton&gt;
                                    &lt;/ToggleButtonGroup&gt;
                                &lt;/ButtonToolbar&gt;
                            &lt;/OverlayTrigger&gt;

                            &lt;ButtonToolbar style={{ display: &#039;inline-block&#039;, marginLeft: &#039;10px&#039; }}&gt;
                                &lt;ToggleButtonGroup defaultValue={defaultSortingOrder} name=&quot;sort&quot; type=&quot;radio&quot; value={getCurrentlyPressedSortButton()}&gt;
                                    &lt;ToggleButton bsSize=&quot;small&quot; onClick={() =&gt; this.sortByDate(SORT_EVENTS_FROM_YOUNGEST)} value={SORT_EVENTS_FROM_YOUNGEST}&gt;
                                        &lt;OverlayTrigger placement=&quot;right&quot;
                                            overlay={
                                                &lt;Tooltip id=&quot;tooltip3&quot;&gt;
                                                    &lt;p&gt; Sort events chronologically from youngest to oldest &lt;/p&gt;
                                                &lt;/Tooltip&gt;
                                            }&gt;
                                            &lt;Glyphicon glyph=&quot;sort-by-attributes-alt&quot; /&gt;
                                        &lt;/OverlayTrigger&gt;
                                    &lt;/ToggleButton&gt;
                                    &lt;ToggleButton bsSize=&quot;small&quot; onClick={() =&gt; this.sortByDate(SORT_EVENTS_FROM_OLDEST)} value={SORT_EVENTS_FROM_OLDEST}&gt;
                                        &lt;OverlayTrigger placement=&quot;right&quot;
                                            overlay={
                                                &lt;Tooltip id=&quot;tooltip3&quot;&gt;
                                                    &lt;p&gt; Sort events chronologically from oldest to youngest &lt;/p&gt;
                                                &lt;/Tooltip&gt;
                                            }&gt;
                                            &lt;Glyphicon glyph=&quot;sort-by-attributes&quot; /&gt;

                                        &lt;/OverlayTrigger&gt;

                                    &lt;/ToggleButton&gt;
                                &lt;/ToggleButtonGroup&gt;
                            &lt;/ButtonToolbar&gt;
                        &lt;/NavItem&gt;
                    &lt;/Nav&gt;

                    &lt;Nav pullRight&gt;
                        &lt;NavItem eventKey={6} href=&quot;#&quot; className=&quot;logbookNavItem&quot;&gt;
                            &lt;div className=&#039;comboSearchContainer&#039;&gt;

                                &lt;ComboSearch
                                    onSearch={this.onSearch}
                                    selectData={[
                                        { value: &#039;Everywhere&#039;, text: &#039;Everywhere&#039; },
                                        { value: &#039;Content&#039;, text: &#039;Content&#039; },
                                        { value: &#039;Title&#039;, text: &#039;Title&#039; },
                                        { value: &#039;category&#039;, text: &#039;Category&#039; },
                                        { value: &#039;Author&#039;, text: &#039;Author&#039; },
                                        { value: &#039;Tag&#039;, text: &#039;Tag&#039; },
                                        { value: &#039;Creation date&#039;, text: &#039;Creation date&#039; }
                                    ]}
                                    datePickerCriteria=&#039;Creation date&#039;
                                    selectPickerData={this.getSelectPickerData()}
                                /&gt;
                            &lt;/div&gt;
                            &lt;Well style={{ display: &#039;inline-block&#039;, padding: &#039;4px&#039;, marginBottom: &#039;0px&#039;, borderTopLeftRadius: &#039;0px&#039;, borderBottomLeftRadius: &#039;0px&#039;, color: &#039;#666666&#039; }}&gt;
                                &lt;b&gt; &amp;nbsp; {numberOfMatchingEventsFound} found &lt;/b&gt;
                            &lt;/Well&gt;
                        &lt;/NavItem&gt;
                    &lt;/Nav&gt;
                &lt;/Navbar.Collapse&gt;
            &lt;/Navbar&gt;
        );
    }

    getSelectPickerData() {
        let selectPickerData = { category: [&#039;Info&#039;, &#039;Error&#039;, &#039;Command&#039;, &#039;Comment&#039;, &#039;Debug&#039;] };

        if (this.props.availableTags) {
            selectPickerData[&#039;Tag&#039;] = this.props.availableTags.map((tag) =&gt; ({ value: tag._id, text: tag.name }));
        }

        return selectPickerData;
    }
    /** 
     * Callback triggered when the user clicks the button to expand the navbar in mobile layout 
    */
    onToggleNavbar() {
        this.setState({ isNavbarExpanded: !this.state.isNavbarExpanded });
    }

    /**
     * Callback triggered when the user clicks an element of the navbar.
     * @param {*} eventKey key of the element
     */
    onSelectNavbar(eventKey) {
        if (eventKey != 6) {
            this.onToggleNavbar();
        }
    }

    onSearch(data) {
        return this.props.searchEvents(data);
    }

    sortByDate(sortingOrder) {
        if (sortingOrder &amp;&amp; this.props.sortingFilter.createdAt !== sortingOrder) {
            //this.setState({ sortingOrder: sortingOrder })
            this.props.reverseEventsSortingByCreationDate();
        }
    }
}

/* A React component which renders the &#039;Camera&#039; button */
class CameraButton extends React.Component {
    render() {
        const tooltip = (text) =&gt; (
            &lt;Tooltip id=&#039;tooltip&#039;&gt;
                {text}
            &lt;/Tooltip&gt;
        );
        let url = &#039;/investigation/&#039; + this.props.investigationId + &#039;/camera&#039;;
        return (&lt;OverlayTrigger placement=&#039;bottom&#039; overlay={tooltip(&#039;Take a photo&#039;)} &gt;
            &lt;Button
                bsSize=&#039;small&#039;
                bsStyle=&#039;primary&#039;
                href={url}
                target=&#039;_blank&#039;
                style={{
                    marginTop: &#039;5px&#039;,
                    marginBottom: &#039;5px&#039;,
                    marginLeft: &#039;10px&#039;,
                }}
            &gt;
                &lt;Glyphicon glyph=&#039;camera&#039; style={{ marginRight: &#039;3px&#039; }} /&gt; Take a photo
                    &lt;/Button&gt;
        &lt;/OverlayTrigger&gt;);
    }
}

/* A React component which renders the &#039;PDF&#039; button */
class PDFButton extends React.Component {
    render() {
        let { isNewEventVisible, numberOfMatchingEventsFound, investigationId, sessionId, selectionFilter } = this.props;

        const tooltip = (text) =&gt; (
            &lt;Tooltip id=&#039;tooltip&#039;&gt;
                {text}
            &lt;/Tooltip&gt;
        );

        return (&lt;OverlayTrigger placement=&#039;bottom&#039; overlay={tooltip(&#039;Download the logbook as PDF&#039;)} &gt;
            &lt;Button
                bsSize=&#039;small&#039;
                bsStyle=&#039;primary&#039;
                href={getPDF(sessionId, investigationId, selectionFilter)}
                target=&#039;_blank&#039;
                style={{
                    marginTop: &#039;5px&#039;,
                    marginBottom: &#039;5px&#039;,
                    marginLeft: &#039;10px&#039;,
                }}
                disabled={(isNewEventVisible === undefined || isNewEventVisible === true || numberOfMatchingEventsFound === 0)}
            &gt;
                &lt;Glyphicon glyph=&#039;download&#039; style={{ marginRight: &#039;3px&#039; }} /&gt; PDF
                    &lt;/Button&gt;
        &lt;/OverlayTrigger&gt;);
    }
}

EventActionBar.propTypes = {
    /** the identifier of the current investigation */
    investigationId: PropTypes.string,
    /** True when the user is writing a new event */
    isNewEventVisible: PropTypes.bool,
    /** the number of events found */
    numberOfMatchingEventsFound: PropTypes.number,
    /** callback function which reverse the sorting of events by date */
    reverseEventsSortingByCreationDate: PropTypes.func.isRequired,
    /** Callback function which reloads the events based on search criteria*/
    searchEvents: PropTypes.func,
    /** selection filter for mongo request */
    selectionFilter: PropTypes.object,
    /* the sessionId*/
    sessionId: PropTypes.string.isRequired,
    /** Callback function triggered when the user clicks on the new event button */
    setNewEventVisibility: PropTypes.func,
    /** the callback function executed when the user clicks the view buttons */
    setView: PropTypes.func,
    /** the filter used to sort event */
    sortingFilter: PropTypes.object.isRequired
};

export default EventActionBar;
</textarea>
  </div>
</div>

<footer class="footer">
  <div class="container">
    <p>.</p>
  </div>
</footer>

<script type="text/html" id="complexity-popover-template">
  <div class="complexity-notice">
    Complexity : {{ complexity.cyclomatic }} <br>
    Length : {{ complexity.halstead.length }} <br>
    Difficulty : {{ complexity.halstead.difficulty.toFixed(2) }} <br>
    Est # bugs : {{ complexity.halstead.bugs.toFixed(2) }}<br>
  </div>
</script>

<script type="text/javascript" src="../../assets/scripts/bundles/core-bundle.js"></script>
<script type="text/javascript" src="../../assets/scripts/bundles/codemirror.js"></script>
<script type="text/javascript" src="../../assets/scripts/codemirror.markpopovertext.js"></script>
<script type="text/javascript" src="report.js"></script>
<script type="text/javascript" src="report.history.js"></script>
<script type="text/javascript" src="../../assets/scripts/plato-file.js"></script>
</body>
</html>
