reworked ui
This commit is contained in:
parent
82062eb734
commit
04db47913e
|
@ -43,8 +43,9 @@ def get_servers():
|
|||
pass
|
||||
return [{ "name": "Creative fun", "desc": "A creative vanilla server for tests.", "version": "0.14.20", "status": "online", "port": "34197" },
|
||||
{ "name": "Vanilla on the rocks", "desc": "Vanilla map with some mods.", "version": "0.14.19", "status": "offline", "port": "34198" },
|
||||
{ "name": "Mad enemies", "desc": "Hazardous map. A lot of enemies.", "version": "0.14.19", "status": "online", "port": "34199" },
|
||||
{ "name": "Mad enemies2", "desc": "Just a copy of Mad enemies.", "version": "0.14.20", "status": "offline", "port": "34200" }]
|
||||
{ "name": "Mad enemies", "desc": "Hazardous map. A lot of enemies.", "version": "0.14.19", "status": "offline", "port": "34199" },
|
||||
{ "name": "Online Map", "desc": "A modded map for friends.", "version": "0.14.19", "status": "online", "port": "34200" },
|
||||
{ "name": "Mad enemies2", "desc": "Just a copy of Mad enemies.", "version": "0.14.20", "status": "offline", "port": "34201" }]
|
||||
|
||||
|
||||
# routing
|
||||
|
|
|
@ -8,6 +8,12 @@ body {
|
|||
/* Margin bottom by footer height */
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
a.nounderline {
|
||||
text-decoration: none;
|
||||
color: dimgrey;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-8">
|
||||
<h1>Servers</h1>
|
||||
<h1>Server overview</h1>
|
||||
</div>
|
||||
<div class="col-sm-4 text-xs-right">
|
||||
<div class="btn-group">
|
||||
|
@ -12,9 +12,8 @@
|
|||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="/">Server overview</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Create server</a>
|
||||
<a class="dropdown-item" href="#">Create server from .zip</a>
|
||||
<a class="dropdown-item" href="#">About</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/logout">Logout</a>
|
||||
</div>
|
||||
|
@ -23,7 +22,7 @@
|
|||
</div>
|
||||
<p class="lead">Control your <a href="http://factorio.com">Factorio</a> game servers from here.</p>
|
||||
|
||||
<table class="table table-hover">
|
||||
<!-- <table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
@ -62,5 +61,53 @@
|
|||
%end
|
||||
</tbody>
|
||||
</table>
|
||||
-->
|
||||
|
||||
<div id="accordion" role="tablist" aria-multiselectable="true">
|
||||
|
||||
%for server in servers:
|
||||
<div class="card">
|
||||
<a class="collapsed nounderline" data-toggle="collapse" data-parent="#accordion" href="#collapse{{server['port']}}" aria-expanded="false" aria-controls="collapse{{server['port']}}">
|
||||
<div class="card-header" role="tab" id="heading{{server['port']}}">
|
||||
<h5 class="mb-0">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
{{ server['name'] }}
|
||||
</div>
|
||||
<div class="col-sm-6 text-xs-right">
|
||||
%if server['status'] == "online":
|
||||
<span class="tag tag-success">{{server['status']}}</span>
|
||||
%else:
|
||||
<span class="tag tag-danger">{{server['status']}}</span>
|
||||
%end
|
||||
</div>
|
||||
</h5>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div id="collapse{{server['port']}}" class="collapse" role="tabpanel" aria-labelledby="heading{{server['port']}}">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">{{ server['desc'] }}</h4>
|
||||
<table class="table">
|
||||
<tr><th>Address</th><td>factorio.bla.com:{{ server['port'] }}</td></tr>
|
||||
<tr><th>Version</th><td>{{ server['version'] }}</td></tr>
|
||||
<tr><th>Admins</th><td><span class="tag tag-default">0bsidian0rder</span></td></tr>
|
||||
</table>
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
</div>
|
||||
<div class="col-sm-8 text-xs-right">
|
||||
<a href="#" class="btn btn-outline-success">Start</a>
|
||||
<a href="#" class="btn btn-outline-danger">Stop</a>
|
||||
<a href="/server/{{server['port']}}" class="btn btn-outline-primary">Edit</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
%end
|
||||
</div>
|
||||
|
||||
|
||||
</div> <!-- Page content -->
|
||||
%include('footer.tpl', username=username)
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="text-muted">
|
||||
factoriocp v0.1
|
||||
<a href="https://socialg.it/david/factoriocp">{{ app_name }}</a> v0.1
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
@ -19,7 +19,17 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Begin alert message -->
|
||||
<div class="container">
|
||||
<p>
|
||||
%if message:
|
||||
<div class="alert alert-{{ message['alert'] }} alert-dismissible" role="alert">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
{{ message['message'] }}.
|
||||
</div>
|
||||
%end
|
||||
</p>
|
||||
</div> <!-- alert message -->
|
||||
<!-- Begin page content -->
|
||||
<div class="container">
|
||||
<form class="form-signin" action="/login" method="post">
|
||||
|
|
141
views/server.tpl
141
views/server.tpl
|
@ -2,87 +2,104 @@
|
|||
<!-- Begin page content -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-9">
|
||||
%if server['status'] == "online":
|
||||
<h1>{{ server['name'] }}<sup><span class="tag tag-success tag-sm">Online</span></sup></h1>
|
||||
%else:
|
||||
<h1>{{ server['name'] }}<sup><span class="tag tag-danger tag-sm">Offline</span></sup></h1>
|
||||
%end
|
||||
<div class="col-sm-8">
|
||||
<h1>Edit Server</h1>
|
||||
</div>
|
||||
<div class="col-sm-3 text-xs-right">
|
||||
<div class="col-sm-4 text-xs-right">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-outline-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
{{ username }}
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="/">Server overview</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Create server</a>
|
||||
<a class="dropdown-item" href="#">Create server from .zip</a>
|
||||
<a class="dropdown-item" href="#">About</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/logout">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="lead">{{ server['desc'] }}</p>
|
||||
<p class="lead">Control your <a href="http://factorio.com">Factorio</a> game server from here.</p>
|
||||
|
||||
<table class="table">
|
||||
<tr>
|
||||
<th>Address</th>
|
||||
<th>Version</th>
|
||||
<th class="text-xs-right">Actions</th>
|
||||
</tr>
|
||||
%if server['status'] == "online":
|
||||
<tr>
|
||||
<td><code>{{ fqdn }}:{{ server['port'] }}</code></td>
|
||||
<td><code>{{ server['version'] }}</code></td>
|
||||
<td class="text-xs-right">
|
||||
<a href="/stop/{{ server['port'] }}" type="button" class="btn btn-outline-danger btn-sm">Stop</a>
|
||||
</td>
|
||||
</tr>
|
||||
%else:
|
||||
<tr>
|
||||
<td><code>{{ fqdn }}:{{ server['port'] }}</code></td>
|
||||
<td><code>{{ server['version'] }}</code></td>
|
||||
<td class="text-xs-right">
|
||||
<a href="/start/{{ server['port'] }}" type="button" class="btn btn-outline-success btn-sm">Start</a>
|
||||
<a href="/delete/{{ server['port'] }}" type="button" class="btn btn-outline-danger btn-sm">Delete</a>
|
||||
</td>
|
||||
</tr>
|
||||
%end
|
||||
</table>
|
||||
<div id="accordion" role="tablist" aria-multiselectable="true">
|
||||
<div class="card">
|
||||
<a class="collapsed nounderline" data-toggle="collapse" data-parent="#accordion" href="#collapseOverview" aria-expanded="false" aria-controls="collapseOverview">
|
||||
<div class="card-header" role="tab" id="headingOverview">
|
||||
<h5 class="mb-0">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
{{ server['name'] }}
|
||||
</div>
|
||||
<div class="col-sm-6 text-xs-right">
|
||||
%if server['status'] == "online":
|
||||
<span class="tag tag-success">{{server['status']}}</span>
|
||||
%else:
|
||||
<span class="tag tag-danger">{{server['status']}}</span>
|
||||
%end
|
||||
</div>
|
||||
</h5>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<p>
|
||||
<h4>Settings</h4>
|
||||
<hr>
|
||||
blabla
|
||||
</p>
|
||||
<div id="collapseOverview" class="collapse in" role="tabpanel" aria-labelledby="headingOverview">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">{{ server['desc'] }}</h4>
|
||||
<table class="table">
|
||||
<tr><th>Address</th><td>{{ fqdn }}:{{ server['port'] }}</td></tr>
|
||||
<tr><th>Version</th><td>{{ server['version'] }}</td></tr>
|
||||
<tr><th>Status</th><td><span class="tag tag-success">{{ server['status'] }}</span></td></tr>
|
||||
</table>
|
||||
<div class="row">
|
||||
<div class="col-sm-8">
|
||||
</div>
|
||||
<div class="col-sm-4 text-xs-right">
|
||||
<a href="#" class="btn btn-outline-success">Start</a> <a href="#" class="btn btn-outline-danger">Stop</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<a class="collapsed nounderline" data-toggle="collapse" data-parent="#accordion" href="#collapseSettings" aria-expanded="false" aria-controls="collapseSettings">
|
||||
<div class="card-header" role="tab" id="headingSettings">
|
||||
<h5 class="mb-0">Settings</h5>
|
||||
</div>
|
||||
</a>
|
||||
<div id="collapseSettings" class="collapse" role="tabpanel" aria-labelledby="headingSettings">
|
||||
<div class="card-block">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
|
||||
<p>
|
||||
<h4>Backups</h4>
|
||||
<hr>
|
||||
blabla
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<a class="collapsed nounderline" data-toggle="collapse" data-parent="#accordion" href="#collapseMods" aria-expanded="false" aria-controls="collapseMods">
|
||||
<div class="card-header" role="tab" id="headingMods">
|
||||
<h5 class="mb-0">Mods</h5>
|
||||
</div>
|
||||
</a>
|
||||
<div id="collapseMods" class="collapse" role="tabpanel" aria-labelledby="headingMods">
|
||||
<div class="card-block">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
|
||||
<p>
|
||||
<h4>Mods</h4>
|
||||
<hr>
|
||||
blabla
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<h4>Screenshots</h4>
|
||||
<hr>
|
||||
blabla
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<h4>Console</h4>
|
||||
<hr>
|
||||
blabla
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<a class="collapsed nounderline" data-toggle="collapse" data-parent="#accordion" href="#collapseBackups" aria-expanded="false" aria-controls="collapseBackups">
|
||||
<div class="card-header" role="tab" id="headingBackups">
|
||||
<h5 class="mb-0">Backups</h5>
|
||||
</div>
|
||||
</a>
|
||||
<div id="collapseBackups" class="collapse" role="tabpanel" aria-labelledby="headingBackups">
|
||||
<div class="card-block">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> <!-- Page content -->
|
||||
%include('footer.tpl', username=username)
|
||||
|
|
Reference in New Issue