games/factorio-server-manager
games/factorio-server-manager
1
0
Fork 0
mirror of https://github.com/OpenFactorioServerManager/factorio-server-manager.git synced 2025-01-24 05:17:24 +02:00
Code Issues Releases Activity

fixed serverControl design

Browse Source
This commit is contained in:
knoxfighter 2018-08-09 03:11:00 +02:00
parent fcb272f128
commit eecc5ac84d
4 changed files with 53 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
ui/App/components/ServerCtl/ServerCtl.jsx
View File

@ -88,35 +88,40 @@ class ServerCtl extends React.Component {
} }
render() { render() {
return( return (
<div className="box"> <div id="serverCtl" className="box">
<div className="box-header"> <div className="box-header">
<h3 className="box-title">Server Control</h3> <h3 className="box-title">Server Control</h3>
</div> </div>
<div className="box-body"> <div className="box-body">
<form action="" onSubmit={this.startServer}> <form action="" onSubmit={this.startServer}>
<div className="form-group"> <div className="form-group">
<div className="row"> <div className="row">
<div className="col-md-4"> <div className="col-md-4">
<button className="btn btn-block btn-success" type="submit"><i className="fa fa-play fa-fw"></i>Start Factorio Server</button> <button className="btn btn-block btn-success" type="submit">
<i className="fa fa-play fa-fw"></i>Start Factorio Server
</button>
</div> </div>
<div className="col-md-4"> <div className="col-md-4">
<button className="btn btn-block btn-warning" type="button" onClick={this.stopServer}><i className="fa fa-stop fa-fw"></i>Stop &amp; Save Factorio Server</button> <button className="btn btn-block btn-warning" type="button" onClick={this.stopServer}>
<i className="fa fa-stop fa-fw"></i>Stop &amp; Save Factorio Server
</button>
</div> </div>
<div className="col-md-4"> <div className="col-md-4">
<button className="btn btn-block btn-danger" type="button" onClick={this.killServer}><i className="fa fa-close fa-fw"></i>Stop Factorio Server without Saving</button> <button className="btn btn-block btn-danger" type="button" onClick={this.killServer}>
<i className="fa fa-close fa-fw"></i>Stop Factorio Server without Saving
</button>
</div> </div>
</div> </div>
<hr /> <hr/>
<label>Select Save File</label> <label>Select Save File</label>
<select ref="savefile" className="form-control"> <select ref="savefile" className="form-control">
{this.props.saves.map( (save, i) => { {this.props.saves.map((save, i) => {
return( return (
<option key={save.name} value={save.name}>{save.name}</option> <option key={save.name} value={save.name}>{save.name}</option>
) )
@ -124,23 +129,29 @@ class ServerCtl extends React.Component {
</select> </select>
</div> </div>
<div className="box box-success collapsed-box"> <div className="box box-success advanced">
<button type="button" className="btn btn-box-tool" data-widget="collapse"> <button type="button"
<div className="box-header with-border"> className="btn btn-box-tool"
<i className="fa fa-plus fa-fw"></i> data-toggle="collapse"
<h4 className="box-title">Advanced</h4> data-target="#serverCtlAdvanced"
</div> aria-expanded="false"
</button> aria-controls="serverCtlAdvanced"
<div className="box-body" style={{display: "none"}}> >
<div className="box-header with-border">
<i className="fa fa-plus fa-fw"></i>
<div className="box-title">Advanced</div>
</div>
</button>
<div id="serverCtlAdvanced" className="box-body collapse">
<label htmlFor="port">Factorio Server IP</label> <label htmlFor="port">Factorio Server IP</label>
<div id="port" className="input-group"> <div id="port" className="input-group">
<input ref="gameBindIP" <input ref="gameBindIP"
name="gameBindIP" name="gameBindIP"
id="gameBindIP" id="gameBindIP"
type="text" type="text"
className="form-control" className="form-control"
defaultValue={this.state.gameBindIP} defaultValue={this.state.gameBindIP}
placeholder={this.state.gameBindIP} /> placeholder={this.state.gameBindIP}/>
</div> </div>
<label htmlFor="port">Factorio Server Port</label> <label htmlFor="port">Factorio Server Port</label>
<div id="port" className="input-group"> <div id="port" className="input-group">
@ -153,8 +164,12 @@ class ServerCtl extends React.Component {
placeholder={this.state.port} placeholder={this.state.port}
/> />
<div className="input-group-btn"> <div className="input-group-btn">
<button type="button" className="btn btn-primary" onClick={this.incrementPort}><i className="fa fa-arrow-up"></i></button> <button type="button" className="btn btn-primary" onClick={this.incrementPort}>
<button type="button" className="btn btn-primary" onClick={this.decrementPort}><i className="fa fa-arrow-down"></i></button> <i className="fa fa-arrow-up"></i>
</button>
<button type="button" className="btn btn-primary" onClick={this.decrementPort}>
<i className="fa fa-arrow-down"></i>
</button>
</div> </div>
</div> </div>
</div> </div>

4
ui/App/components/ServerCtl/ServerStatus.jsx
View File

@ -15,10 +15,10 @@ class ServerStatus extends React.Component {
var result = {}; var result = {};
if (serverStatus === "running") { if (serverStatus === "running") {
result = <span className="label label-success">Running</span>; result = <span className="badge badge-success">Running</span>;
return result; return result;
} else if (serverStatus == "stopped") { } else if (serverStatus == "stopped") {
result = <span className="label label-danger">Not Running</span>; result = <span className="badge badge-danger">Not Running</span>;
return result; return result;
} }

3
ui/index.scss
View File

@ -12,4 +12,5 @@
@import "scss/sidebar"; @import "scss/sidebar";
@import "scss/content"; @import "scss/content";
@import "scss/navigation"; @import "scss/navigation";
@import "scss/breadcrumbs"; @import "scss/breadcrumbs";
@import "scss/serverCtl";

9
ui/scss/serverCtl.scss Normal file
View File

@ -0,0 +1,9 @@
#serverCtl {
.advanced {
border: none;
> .btn {
padding: 0;
}
}
}