david/factoriocp
david
/
factoriocp
Archived
1
0
Fork 0

reworked ui

This commit is contained in:
david 2016-12-09 23:06:07 +01:00
parent 82062eb734
commit 04db47913e
6 changed files with 151 additions and 70 deletions

View File

@ -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

View File

@ -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;

View File

@ -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)

View File

@ -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>

View File

@ -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">&times;</span></button>
{{ message['message'] }}.
</div>
%end
</p>
</div> <!-- alert message -->
<!-- Begin page content -->
<div class="container">
<form class="form-signin" action="/login" method="post">

View File

@ -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)