<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Plato - src/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">
  <link href="../../assets/css/vendor/bootstrap.css" rel="stylesheet">
  <link href="../../assets/css/vendor/font-awesome.css" rel="stylesheet">
  <link href="../../assets/css/vendor/codemirror.css" rel="stylesheet">
  <link href="../../assets/css/plato.css" rel="stylesheet">
  <link href="../../assets/css/plato-file.css" rel="stylesheet">

</head>

<body>

<div class="navbar navbar-fixed-top">
  <div class="container">
    <a class="navbar-brand" href="http://github.com/es-analysis/plato">Plato on Github</a>
    <ul class="nav navbar-nav">
      <li>
        <a href="../../index.html">Report Home</a>
      </li>
    </ul>
  </div>
</div>

<div class="jumbotron">
  <div class="container">
    <h1>src/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">73.10</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">230</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">29.56</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.30</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, Grid, Row, Col, ToggleButtonGroup, ToggleButton } from &#039;react-bootstrap&#039;
import NewButton from &#039;./NewButton&#039;
import { URL } from &#039;../../api/icat/icatPlus&#039;
import { ComboSearch } from &#039;react-combo-search&#039;
import PropTypes from &#039;prop-types&#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.onSearch = this.onSearch.bind(this);
        this.sortByDate = this.sortByDate.bind(this);
    }
     onTakePhoto (dataUri) {
        // Do stuff with the dataUri photo...
        console.log(&#039;takePhoto&#039;);
    }
    render() {
        const { investigationId,
            isNewEventVisible,
            numberOfMatchingEventsFound,
            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;Grid fluid={true} style={{ marginTop: &#039;20px&#039;, marginBottom: &#039;20px&#039; }}&gt;
                &lt;Row&gt;
                    &lt;Col xs={12} md={4}&gt;
                        &lt;ButtonToolbar&gt;
                            &lt;NewButton
                                isNewComponentVisible={isNewEventVisible}
                                onClick={setNewEventVisibility}
                            /&gt;
                             &lt;CameraButton investigationId={investigationId}/&gt;
                            &lt;PDFButton
                                investigationId={investigationId}
                                isNewEventVisible={isNewEventVisible}
                                numberOfMatchingEventsFound={numberOfMatchingEventsFound}
                                sessionId={sessionId}
                            /&gt;
                        &lt;/ButtonToolbar&gt;
                    &lt;/Col&gt;

                    &lt;Col xs={12} md={4}&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;/Col&gt;                  
                    
                     &lt;Col xs={12} md={3}&gt;
                        &lt;div style={{display: &#039;inline&#039;}}&gt;                                                                
                                &lt;ComboSearch
                                    onSearch={this.onSearch}
                                    selectData={[&#039;Everywhere&#039;, &#039;Content&#039;, &#039;Title&#039;, &#039;Type&#039;, &#039;Category&#039;, &#039;Author&#039;, &#039;Creation date&#039;]}
                                    datePickerCriteria=&#039;Creation date&#039;
                                /&gt;                              
                         &lt;/div&gt;  
                           
                        
                    &lt;/Col&gt;
                     &lt;Col xs={12} md={1}&gt;
                            &lt;div&gt;                               
                                &lt;Well style={{ padding: &#039;4px&#039;, marginBottom: &#039;0px&#039;, borderTopLeftRadius: &#039;0px&#039;, borderBottomLeftRadius: &#039;0px&#039; }}&gt; 
                                    &lt;b&gt; &amp;nbsp; {numberOfMatchingEventsFound} found &lt;/b&gt; 
                                &lt;/Well&gt;
                         &lt;/div&gt;                                                     
                    &lt;/Col&gt;
                &lt;/Row&gt;
            &lt;/Grid &gt;
        )
    }

    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;PDF&#039; button */
class CameraButton extends React.Component {
    render() {         
        const tooltip = (text) =&gt; (
            &lt;Tooltip id=&quot;tooltip&quot;&gt;
                {text}
            &lt;/Tooltip&gt;
        );
        var url = &quot;/investigation/&quot; + this.props.investigationId + &quot;/camera&quot;;
        return (&lt;OverlayTrigger placement=&quot;bottom&quot; overlay={tooltip(&quot;Take a photo&quot;)} &gt;
            &lt;Button bsSize=&quot;small&quot; bsStyle=&quot;primary&quot; href={url} target=&quot;_blank&quot; disabled={false}&gt;
                &lt;Glyphicon glyph=&quot;camera&quot; style={{ marginRight: &quot;3px&quot; }} /&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 } = this.props;

        if (isNewEventVisible === undefined || isNewEventVisible === true || numberOfMatchingEventsFound === 0) {
            return (&lt;Button bsSize=&quot;small&quot; bsStyle=&quot;primary&quot; disabled &gt;
                &lt;Glyphicon glyph=&quot;download&quot; style={{ marginRight: &quot;3px&quot; }} /&gt;
                PDF
                    &lt;/Button&gt;)
        }

        //default behavior
        const tooltip = (text) =&gt; (
            &lt;Tooltip id=&quot;tooltip&quot;&gt;
                {text}
            &lt;/Tooltip&gt;
        );

        // this selectionFilter is used to query all events from a given logbook. It is currently not flexible, to be changed.
        let selectionFilter = {
            find: {
                $and: [{
                    $or: [
                        { type: &quot;annotation&quot; },
                        { type: &quot;notification&quot; }
                    ]
                }]
            },
            sort: { createdAt: -1 }
        }

        return (&lt;OverlayTrigger placement=&quot;bottom&quot; overlay={tooltip(&quot;Download the logbook as PDF&quot;)} &gt;
            &lt;Button bsSize=&quot;small&quot; bsStyle=&quot;primary&quot; href={URL.getPDF(sessionId, investigationId, selectionFilter)} target=&quot;_blank&quot; disabled={false}&gt;
                &lt;Glyphicon glyph=&quot;download&quot; style={{ marginRight: &quot;3px&quot; }} /&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,
    /* 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 : {{ cyclomatic }} <br>
    Length : {{ halstead.length }} <br>
    Difficulty : {{ halstead.difficulty.toFixed(2) }} <br>
    Est # bugs : {{ 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>
