js.index.jsx Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of DevCenter Show documentation
Prompto Development Center POM
There is a newer version: 0.0.13
class NewModuleTypeButton extends React.Component {

    render() {
        let style = { width: "90px", height: "130px", boxSizing: "content-box", textAlign: "center", marginBottom: "10px"};
        if(this.props.active)
            style = Object.assign(style, { borderStyle: "solid",  borderWidth: "med",  borderRadius: "10%", borderColor: "lightsteelblue"});
        return 
            
                
                    
                        
                    
                    {this.props.title}
                
            
        
    }
}

class LibraryParameters extends React.Component {

    render() {
        return null;
    }
}

class ScriptParameters extends React.Component {

    render() {
        return null;
    }
}

class OptionalInput extends React.Component {

    constructor(props) {
        super(props);
        this.state = { create: this.props.create, name: null };
        this.handleCreate = this.handleCreate.bind(this);
        this.handleName = this.handleName.bind(this);
    }

    handleCreate(e) {
        const create = e.currentTarget.id === this.props.id + "-create";
        this.setState( { create: create });
        this.props.handleCreate(create);
    }

    handleName(e) {
        const name = e.currentTarget.value;
        this.setState( { name: name });
        this.props.handleName(name);
    }


    render() {
        return 
                    {this.props.label}  
                    
                        
                            Create new
                        
                            Use existing
                    
                    
                
    }

}

class BatchParameters extends React.Component {

    constructor(props) {
        super(props);
        this.dialog = this.props.dialog;
        this.startMethodLabel = "Start method:";
        this.handleCreateStart = this.handleCreateStart.bind(this);
        this.handleStartMethod = this.handleStartMethod.bind(this);
    }

    handleCreateStart(create) {
        this.dialog.setState( { createStart: create } );
    }

    handleStartMethod(name) {
        this.dialog.setState( { startMethod: name } );
    }

    render() {
        return 
    }

}

class ServiceParameters extends BatchParameters {

    constructor(props) {
        super(props);
        this.startMethodLabel = "Server about to start method:";
    }

}

class WebSiteParameters extends ServiceParameters {

    constructor(props) {
        super(props);
        this.handleCreateHome = this.handleCreateHome.bind(this);
        this.handleHomePage = this.handleHomePage.bind(this);
    }

    handleCreateHome(create) {
        this.dialog.setState( { createHome: create } );
    }

    handleHomePage(name) {
        this.dialog.setState( { homePage: name } );
    }

    render() {
        return 
                
                
               ;
    }

}

const DroppedFileWidget = widgets.DroppedFileWidget.default;

const DroppedWidgetStyle = {
    display: 'inline-flex',
    border: '1px solid lightgray',
    height: '160px',
    width: '160px',
    padding: '20px',
    alignItems: 'center',
    justifyContent: 'center'
};

class NewProjectDialog extends React.Component {

    constructor(props) {
        super(props);
        this.handleModuleType = this.handleModuleType.bind(this);
        this.handleName = this.handleName.bind(this);
        this.handleDescription = this.handleDescription.bind(this);
        this.handleDropIcon = this.handleDropIcon.bind(this);
        this.createNewModule = this.createNewModule.bind(this);
        this.state = { type: "batch", name: null, description: null, iconFile: null, createStart: true, startMethod: null, createHome: true, homePage: null };
    }

    createNewModule() {
        const formData = new FormData();
        let image = null;
        if(this.state.iconFile) {
            image = { mimeType: this.state.iconFile.type, partName: "@" + this.state.iconFile.name };
            formData.append(image.partName, this.state.iconFile);
        }
        const params = [
            {name: "type", type: "Text", value: this.state.type},
            {name: "name", type: "Text", value: this.state.name},
            {name: "description", type: "Text", value: this.state.description},
            {name: "image", type: "Image", value: image},
            {name: "createStart", type: "Boolean", value: this.state.createStart},
            {name: "startMethod", type: "Text", value: this.state.startMethod},
            {name: "createHome", type: "Boolean", value: this.state.createHome},
            {name: "homePage", type: "Text", value: this.state.homePage}
        ];
        formData.append("params", JSON.stringify(params));
        $.ajax({
            url: "/ws/run/createModule",
            type: 'POST',
            data: formData,
            async: true,
            cache: false,
            contentType: false,
            processData: false,
            error: function (xhr, status, thrown) {
                alert(thrown);
            },
            success: function (returndata) {
                getAllModules(response => viewer.all.modulesReceived(response));
            }
        });
        $("#new-project-dialog").modal("hide");
    }


    handleModuleType(e) {
        const type = e.currentTarget.id;
        this.setState( { type: type } );
    }

    handleName(e) {
        const name = e.currentTarget.value;
        this.setState( { name: name } );
    }

    handleDescription(e) {
        const description = e.currentTarget.value;
        this.setState( { description: description } );
    }

    handleDropIcon(file) {
        this.setState( { iconFile: file } );
    }

    render() {
        const type = this.state.type;
        return 
                
                    
                        
                        New project
                    
                    
                        
                            
                                
                                    Type
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                            
                            
                                
                                    Name
                                    
                                
                                
                                    Description
                                    
                                
                                
                                    Icon

                                    
                                
                                { this.state.type==="script" &&  }
                                { this.state.type==="library" &&  }
                                { this.state.type==="batch" &&  }
                                { this.state.type==="service" &&  }
                                { this.state.type==="website" &&  }
                            
                        
                    
                    
                        
                        
                    
                
            ;
    }

}


class ProjectMenu extends React.Component {

    constructor(props) {
        super(props);
        this.deleteProject = this.deleteProject.bind(this);
        this.state = { active: false, left: null, top: null };
    }

    render() {
        const id = "project-menu-" + this.props.module.dbId.value.toString();
        const exportUrl = '/ws/run/exportModule?params=[{"name":"dbId", "value":"' + this.props.module.dbId.value.toString() + '"}]';
        return this.state.active && 
            
                Export
                Delete
            
        

    }

    deleteProject() {
        const deleteUrl = '/ws/run/deleteModule?params=[{"name":"dbId", "value":"' + this.props.module.dbId.value.toString() + '"}]';
        $.getJSON(deleteUrl, null, () => {
            getRecentModules(response => viewer.recent.modulesReceived(response));
            getAllModules(response => viewer.all.modulesReceived(response));
        });
    }

}

class Project extends React.Component {

    constructor(props) {
        super(props);
        this.handleContextMenu = this.handleContextMenu.bind(this);
        this.handleDocumentClick = this.handleDocumentClick.bind(this);
    }

    render() {
        const module = this.props.module;
        const id = module.dbId.value;
        const href = "../ide/index.html?dbId=" + module.dbId.value + "&name=" + module.name;
        const imageSrc = module.image || "/img/library.jpg";
        return 
                    
                        
                            
                        
                        {module.name}

                        {module.description}
                    
                     this.menu = m} />
                ;
    }

    handleContextMenu(e) {
        e.preventDefault();
        this.menu.setState( { active: true, left: "" + e.pageX + "px",  top: "" + e.pageY + "px" } );
        document.addEventListener("click", this.handleDocumentClick );
        document.addEventListener("contextmenu", this.handleDocumentClick );
    }

    handleDocumentClick(e) {
        const menu = $("#" + "project-menu-" + this.props.module.dbId.value.toString())[0];
        const inside = menu==e.target || $.contains(menu, e.target);
        if(!inside || e.target.href==="#")
            e.preventDefault();
        this.menu.setState( { active: false } );
        document.removeEventListener("contextmenu", this.handleDocumentClick );
        document.removeEventListener("click", this.handleDocumentClick );
    }
}


class ProjectsSection extends React.Component {

    constructor(props) {
        super(props);
        this.modulesReceived = this.modulesReceived.bind(this);
        this.props.getModules(this.modulesReceived);
        this.state = { modules: [] };
    }

    modulesReceived(response) {
        if(response.error)
            alert(response.error);
        else {
            const modules = response.data.value.map(item => item.value);
            this.setState( { modules: modules } );
        }
    }

    render() {
        const modules = this.state.modules;
        return 
            {this.props.title}
            
                {
                    modules.map( module => {
                        return ;
                    } )
                }
            
        ;
    }
}

function getRecentModules(callback) {
    $.getJSON('/ws/run/getRecentModules?params=[{"name":"count", "type":"Integer", "value":8}]', null, callback);
}

function getAllModules(callback) {
    $.getJSON('/ws/run/getAllModules', null, callback);
}

class ProjectsViewer extends React.Component {

    render() {
        return 
                    
                        this.recent=r} id="recent-projects" itemsId="recent-items" getModules={getRecentModules} title="Recent projects"/>
                        this.all=r} id="all-projects" itemsId="all-items" getModules={getAllModules} title="All projects"/>
                    
                ;
    }

}

function newProject() {
    ReactDOM.render(, document.getElementById('new-project-dialog'));
    $("#new-project-dialog").modal("show");
}


let viewer = null;

$(document).ready(function() {
    viewer = ReactDOM.render(, document.getElementById('projects-viewer'));
});