var React = require('react'); var ReactDOM = require('react-dom'); var ReactBootstrap = require('react-bootstrap'); var Col = ReactBootstrap.Col; var Form = ReactBootstrap.Form; var FormGroup = ReactBootstrap.FormGroup; var FormControl = ReactBootstrap.FormControl; var ControlLabel = ReactBootstrap.ControlLabel; var Button = ReactBootstrap.Button; var ButtonGroup = ReactBootstrap.ButtonGroup; var ButtonToolbar = ReactBootstrap.ButtonToolbar; var Glyphicon = ReactBootstrap.Glyphicon; var Panel = ReactBootstrap.Panel; var Modal = ReactBootstrap.Modal; var ProgressBar = ReactBootstrap.ProgressBar; var Combobox = require('react-widgets').Combobox; var CodeMirror = require('react-codemirror'); require('codemirror/mode/lua/lua'); var StackedBarChart = require('../components/StackedBarChart'); var PieChart = require('../components/PieChart'); var models = require('../models') var Report = models.Report; var Tabulation = models.Tabulation; class AddEditReportModal extends React.Component { getInitialState(props) { var s = { reportid: -1, name: "", lua: "" }; if (props && props.editReport != null) { s.reportid = props.editReport.ReportId; s.name = props.editReport.Name; s.lua = props.editReport.Lua; } return s; } constructor() { super(); this.state = this.getInitialState(); this.onCancel = this.handleCancel.bind(this); this.onNameChange = this.handleNameChange.bind(this); this.onLuaChange = this.handleLuaChange.bind(this); this.onSubmit = this.handleSubmit.bind(this); } componentWillReceiveProps(nextProps) { if (nextProps.show && !this.props.show) { this.setState(this.getInitialState(nextProps)); } } handleCancel() { if (this.props.onCancel != null) this.props.onCancel(); } handleNameChange() { this.setState({ name: ReactDOM.findDOMNode(this.refs.name).value, }); } handleLuaChange(lua) { this.setState({ lua: lua }); } handleSubmit() { var r = new Report(); if (this.props.editReport != null) r.ReportId = this.state.reportid; r.Name = this.state.name; r.Lua = this.state.lua; if (this.props.onSubmit != null) this.props.onSubmit(r); } render() { var headerText = (this.props.editReport != null) ? "Edit" : "Create New"; var buttonText = (this.props.editReport != null) ? "Save Changes" : "Create Report"; var codeMirrorOptions = { lineNumbers: true, mode: 'lua', }; return ( {headerText} Report
Name Lua Code
); } } class ReportsTab extends React.Component { constructor() { super(); this.state = { initialized: false, creatingNewReport: false, editingReport: false } this.onSelectSeries = this.handleSelectSeries.bind(this); this.onSelectReport = this.handleSelectReport.bind(this); this.onNewReport = this.handleNewReport.bind(this); this.onEditReport = this.handleEditReport.bind(this); this.onDeleteReport = this.handleDeleteReport.bind(this); this.onCreationCancel = this.handleCreationCancel.bind(this); this.onCreationSubmit = this.handleCreationSubmit.bind(this); this.onEditingCancel = this.handleEditingCancel.bind(this); this.onEditingSubmit = this.handleEditingSubmit.bind(this); } componentWillMount() { this.props.onFetchAllReports(); } componentWillReceiveProps(nextProps) { var selected = nextProps.reports.selected; if (!this.state.initialized) { if (selected == -1 && nextProps.reports.list.length > 0) { nextProps.onSelectReport(nextProps.reports.map[nextProps.reports.list[0]]); nextProps.onTabulateReport(nextProps.reports.map[nextProps.reports.list[0]]); this.setState({initialized: true}); } } else if (selected != -1 && nextProps.reports.tabulations.hasOwnProperty(selected) && nextProps.reports.selectedTabulation == null) { nextProps.onSelectSeries(nextProps.reports.tabulations[selected]); } } handleSelectSeries(series) { if (series == Tabulation.topLevelSeriesName()) return; var seriesTraversal = this.props.reports.seriesTraversal.slice(); seriesTraversal.push(series); var selectedTabulation = this.props.reports.tabulations[this.props.reports.selected]; this.props.onSelectSeries(selectedTabulation, seriesTraversal); } handleSelectReport(report) { this.props.onSelectReport(report); if (!this.props.reports.tabulations.hasOwnProperty(report.ReportId)) this.props.onTabulateReport(report); } handleNewReport() { this.setState({creatingNewReport: true}); } handleEditReport() { this.setState({editingReport: true}); } handleDeleteReport() { this.props.onDeleteReport(this.props.reports.map[this.props.reports.selected]); } handleCreationCancel() { this.setState({creatingNewReport: false}); } handleCreationSubmit(report) { this.setState({creatingNewReport: false}); this.props.onCreateReport(report); } handleEditingCancel() { this.setState({editingReport: false}); } handleEditingSubmit(report) { this.setState({editingReport: false}); this.props.onUpdateReport(report); } render() { var selectedTabulation = this.props.reports.selectedTabulation; var reportPanel = []; if (selectedTabulation) { var titleTracks = []; var seriesTraversal = []; for (var i = 0; i < this.props.reports.seriesTraversal.length; i++) { var name = this.props.reports.selectedTabulation.Title; if (i > 0) name = this.props.reports.seriesTraversal[i-1]; // Make a closure for going up the food chain var self = this; var navOnClick = function() { var onSelectSeries = self.props.onSelectSeries; var tabulation = self.props.reports.tabulations[self.props.reports.selected]; var mySeriesTraversal = seriesTraversal.slice(); return function() { onSelectSeries(tabulation, mySeriesTraversal); }; }(); titleTracks.push(( )); titleTracks.push((/)); seriesTraversal.push(this.props.reports.seriesTraversal[i]); } if (titleTracks.length == 0) { titleTracks.push(( )); } else { var i = this.props.reports.seriesTraversal.length-1; titleTracks.push(( )); } if (this.props.reports.selectedTabulation.Labels.length > 1) var report = ( ); else var report = ( ); reportPanel = ( {report} ); } else if (this.props.reports.selected != -1) { reportPanel = ( ); } var noReportSelected = this.props.reports.selected == -1; var selectedReport = -1; if (this.props.reports.map.hasOwnProperty(this.props.reports.selected)) selectedReport = this.props.reports.map[this.props.reports.selected]; return (
typeof item === 'string' ? item : item.Name} value={selectedReport} onChange={this.onSelectReport} suggest filter='contains' ref="report" /> {reportPanel}
); } } module.exports = ReportsTab;