114 lines
4.3 KiB
HTML
114 lines
4.3 KiB
HTML
{% extends "layout.html" %}
|
|
|
|
{% block content %}
|
|
<!-- todo: move this! -->
|
|
<style>
|
|
.server-row {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.modal-content, .nav-item {
|
|
background-color: #212529;
|
|
color: #fff;
|
|
}
|
|
|
|
.modal-header, .modal-footer {
|
|
border-color: #32383e !important;
|
|
}
|
|
|
|
.modal-dark button.close, a.nav-link {
|
|
color: #fff;
|
|
}
|
|
</style>
|
|
|
|
<div class="modal modal-dark" id="serverModalCenter" tabindex="-1" role="dialog" aria-labelledby="serverModalCenterTitle" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="serverModalTitle">Modal title</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="h5" id="server_socket"></div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button id="connect_button" type="button" class="btn btn-dark">Connect</button>
|
|
<button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<nav>
|
|
<div class="nav nav-tabs" id="server_game_tabs" role="tablist">
|
|
{% for game in games %}
|
|
<a class="nav-item nav-link {{'active' if loop.first else ''}}" id="{{game}}_servers_tab" data-toggle="tab" href="#{{game}}_servers" role="tab" aria-controls="{{game}}_servers" aria-selected="{{'true' if loop.first else 'false' }}">{{game}}</a>
|
|
{% endfor %}
|
|
</div>
|
|
</nav>
|
|
<div class="tab-content" id="server_game_tabs_content">
|
|
{% for game, servers in games.items() %}
|
|
|
|
<div class="tab-pane {{'show active' if loop.first else ''}}" id="{{game}}_servers" role="tabpanel" aria-labelledby="{{game}}_servers_tab">
|
|
|
|
<table class="table table-dark table-striped table-hover table-responsive-lg">
|
|
<thead>
|
|
<tr>
|
|
<th>Server Name</th>
|
|
<th>Map Name</th>
|
|
<th>Players</th>
|
|
<th>Mode</th>
|
|
<th class="text-center">Connect</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
{% for server in servers %}
|
|
|
|
<tr class="server-row" data-toggle="modal" data-target="#serverModalCenter"
|
|
data-ip="{{server.ip}}" data-port="{{server.port}}">
|
|
<td data-hostname="{{server.hostname}}" class="server-hostname">{{server.hostname}}</td>
|
|
<td data-map="{{server.map}} " class="server-map">{{server.map}}</td>
|
|
<td data-clientnum="{{server.clientnum}}" data-maxclientnum="{{server.maxclientnum}}"
|
|
class="server-clientnum">
|
|
{{server.clientnum}}/{{server.maxclientnum}}
|
|
</td>
|
|
<td data-gametype="{{server.gametype}}" class="server-gametype">{{server.gametype}}</td>
|
|
<td class="text-center"><span class="oi oi-play-circle"></span></td>
|
|
</tr>
|
|
|
|
{% endfor %}
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{% endfor %}
|
|
</div>
|
|
<div class="w-100 small text-right text-muted">
|
|
<span>Developed by RaidMax</span><br />
|
|
<span>PRERELEASE</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
$(document).ready(() => {
|
|
$('.server-row').off('click');
|
|
$('.server-row').on('click', function (e) {
|
|
$('#serverModalTitle').text($(this).find('.server-hostname').text());
|
|
$('#server_socket').text(`/connect ${$(this).data('ip')}:${$(this).data('port')}`);
|
|
});
|
|
|
|
$('#connect_button').off('click');
|
|
$('#connect_button').on('click', (e) => alert('soon...'));
|
|
});
|
|
</script>
|
|
{% endblock %}
|