<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Plato - components/Event/NewEvent.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/NewEvent.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">67.25</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">178</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">23.38</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.21</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">
//React components
import React from &#039;react&#039;
import PropTypes from &#039;prop-types&#039;;
import { Grid, Row, Col, FormControl, Panel, Collapse, Label, InputGroup } from &quot;react-bootstrap&quot;
import TagContainer from &#039;../../containers/TagContainer&#039;


import HTMLEditor from &#039;./HTMLEditor&#039;
import EventHeader from &#039;./EventHeader&#039;
import EventFooter from &#039;./EventFooter&#039;
import { NEW_EVENT_INVISIBLE, ANNOTATION, NEW_EVENT_CONTEXT, EVENT_CATEGORY_COMMENT } from &#039;../../constants/EventTypes&#039;;

/* the possible status of the component */
const IDLE_STATUS = &quot;idle&quot;;
//const UPLOADING_STATUS = &quot;uploading&quot;; // the data was successfully uploaded to the server
const UPLOADED_STATUS = &quot;uploaded&quot;;   // the data is being uploaded

/* The class represents a new event which is being created */
class NewEvent extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            hasText: false,
            status: IDLE_STATUS,
        }

        this.changeStateToUploaded = this.changeStateToUploaded.bind(this);
        this.createEvent = this.createEvent.bind(this);
        this.canEnableSaveButton = this.canEnableSaveButton.bind(this);
        this.onCancelNewEventClicked = this.onCancelNewEventClicked.bind(this);
        this.setTagContainer = this.setTagContainer.bind(this);
    }

    render() {
        const { investigationId, isVisible, user, onNewEventUploaded } = this.props;

        if (this.state.status === UPLOADED_STATUS) {
            this.setState({ status: IDLE_STATUS });
            onNewEventUploaded()
            return null;
        } else {
            return (
                &lt;Collapse in={isVisible}&gt;
                    &lt;Panel bsStyle=&#039;primary&#039; &gt;
                        &lt;EventHeader context={NEW_EVENT_CONTEXT} /&gt;

                        &lt; div id=&quot;newEventBox&quot; style={{ display: &#039;flex&#039; }} &gt;

                            {/* the left panel */}
                            &lt; div style={{ flexGrow: &#039;0&#039;, maxWidth: &#039;155px&#039; }}&gt;

                                &lt;div style={{ paddingLeft: &#039;5px&#039; }} &gt;
                                    &lt;div style={{ height: &#039;50px&#039; }} /&gt;

                                    &lt;a href={&quot;/investigation/&quot; + this.props.investigationId + &quot;/events/tagManager&quot;} target=&quot;_blank&quot; style={{ float: &#039;right&#039;, paddingRight: &#039;10px&#039; }}&gt; manage &lt;/a&gt;
                                    &lt;Label&gt; Tags &lt;/Label&gt;
                                    &lt;div style={{ paddingTop: &#039;5px&#039;, marginRight: &#039;10px&#039; }}&gt;
                                        &lt;TagContainer
                                            canEnableSaveButton={this.canEnableSaveButton}
                                            context={NEW_EVENT_CONTEXT}
                                            investigationId={this.props.investigationId}
                                            setTagContainer={this.setTagContainer}
                                        /&gt;
                                    &lt;/div&gt;

                                &lt;/div&gt;
                            &lt;/div &gt;
                            &lt;div
                                style={{ flexGrow: &#039;1&#039; }}&gt;

                                &lt;div&gt;

                                    &lt;HTMLEditor
                                        user={user}
                                        investigationId={investigationId}
                                        isEditionMode={true}
                                        canEnableSaveButton={this.canEnableSaveButton} /&gt;

                                    &lt;div style={{ paddingTop: &#039;8px&#039; }}&gt;
                                        &lt;InputGroup&gt;
                                            &lt;InputGroup.Addon style={{ backgroundColor: &#039;transparent&#039;, border: &#039;none&#039; }}&gt; &lt;Label&gt; Title &lt;/Label&gt; &lt;/InputGroup.Addon&gt;
                                            &lt;FormControl
                                                type=&quot;text&quot;
                                                value={this.state.inputTitleValue}
                                                onChange={this.onChangeInputValue}
                                                placeholder=&quot;Optional title here&quot;
                                                inputRef={(FormControl) =&gt; this.inputTitle = FormControl} /&gt;
                                        &lt;/InputGroup&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;

                                &lt;EventFooter
                                    isSaveButtonEnabled={this.state.hasText}
                                    onCancelButtonClicked={this.onCancelNewEventClicked}
                                    onSaveButtonClicked={this.createEvent} /&gt;
                            &lt;/div&gt;
                        &lt;/div &gt;
                    &lt;/Panel&gt;
                &lt;/Collapse&gt;
            )
        }
    }

    changeStateToUploaded() {
        this.setState({ status: UPLOADED_STATUS })
    }

    /** Fuction triggered when the user clicks the &#039;cancel&#039; button */
    onCancelNewEventClicked() {
        localStorage.removeItem(&#039;plainText&#039;);
        localStorage.removeItem(&#039;HTMLText&#039;);
        this.props.setNewEventVisibility(NEW_EVENT_INVISIBLE);
    }

    /**
     * Callback method called when the editor content changed from empty to not empty and vice versa.
     * @param {*} change the object representing the change
     */
    canEnableSaveButton(change) {
        if (change) {
            if (&quot;hasText&quot; in change) {
                this.setState({ hasText: change.hasText })
            }
        }
    }


    /**
     * Create the new event
     */
    createEvent() {
        let investigationId = this.props.investigationId;
        let currentTagIds = this.tagContainer.state.selectedTags.map((tag) =&gt; tag._id);

        let newEvent = {
            category: EVENT_CATEGORY_COMMENT,
            content: [
                {
                    format: &quot;plainText&quot;,
                    text: localStorage.getItem(&#039;plainText&#039;)
                },
                {
                    format: &quot;html&quot;,
                    text: localStorage.getItem(&#039;HTMLText&#039;)
                }
            ],
            creationDate: Date(),
            investigationId: investigationId,
            title: this.inputTitle.value,
            tag: currentTagIds,
            type: ANNOTATION,
            username: this.props.user.username,
        }

        this.props.createEvent(newEvent, this.props.user.sessionId, this.props.investigationId, this.changeStateToUploaded)
    }

    setTagContainer(element) {
        this.tagContainer = element
    }
}


NewEvent.propTypes = {
    /** the investigationId indicating what investigation the new event will belong to*/
    investigationId: PropTypes.string.isRequired,
    /** whether this component is visible (ie panel is expanded) or not */
    isVisible: PropTypes.bool.isRequired,
    /** Callback function to reload events from the server */
    reloadEvents: PropTypes.func,
    // /** the callback function to change the visibility of this component */
    setNewEventVisibility: PropTypes.func.isRequired,
    /** the user who is currently logged in */
    user: PropTypes.object.isRequired,
}

export default NewEvent;</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>
