{% extends ../base.html %} {% block meta %} <meta http-equiv="refresh" content="60"> {% end %} {% block title %}Crafty Controller - Dashboard{% end %} {% block content %} <div class="content-wrapper"> <!-- Page Title Header Starts--> <div class="row page-title-header"> <div class="col-12"> <div class="page-header"> <h4 class="page-title">Dashboard</h4> </div> </div> </div> <!-- Page Title Header Ends--> <div class="row"> <div class="col-md-12 grid-margin"> <div class="card"> <div class="card-body"> <div class="row"> <div class="col-lg-3 col-md-6"> <div class="d-flex"> <div class="wrapper"> <h5 class="mb-1 font-weight-medium text-primary"> Host</h5> <h3 class="mb-0 font-weight-semibold"> <i class="fas fa-chart-line"></i></h3> </div> <div class="wrapper my-auto ml-auto ml-lg-4"> <p class="mb-0 text-success" data-toggle="tooltip" data-placement="top" data-html="true" title="CPU Cores: {{ data.get('hosts_data').get('cpu_cores') }} <br /> CPU Cur Freq: {{ data.get('hosts_data').get('cpu_cur_freq') }} <br /> CPU Max Freq: {{ data.get('hosts_data').get('cpu_max_freq') }}" > {{ data.get('hosts_data').get('cpu_usage') }} {{ _('CPU Usage') }} </p> <p class="mb-0 text-danger" data-toggle="tooltip" data-placement="top" title="Memory Usage: {{ data.get('hosts_data').get('mem_usage') }}" > {{ data.get('hosts_data').get('mem_percent') }}% {{ _('Memory Usage') }} </p> </div> </div> </div> <div class="col-lg-3 col-md-6 mt-md-0 mt-4"> <div class="d-flex"> <div class="wrapper"> <h5 class="mb-1 font-weight-medium text-primary">Servers</h5> <h3 class="mb-0 font-weight-semibold">{{ data['server_stats']['total'] }}</h3> </div> <div class="wrapper my-auto ml-auto ml-lg-4"> <p class="mb-0 text-success">{{ data['server_stats']['running'] }} {{_('Online')}}</p> <p class="mb-0 text-warning"> {{ data['server_stats']['stopped'] }} {{_('Shutdown')}}</p> </div> </div> </div> <div class="col-lg-3 col-md-6 mt-md-0 mt-4"> <div class="d-flex"> <div class="wrapper"> <h5 class="mb-1 font-weight-medium text-primary">Players</h5> <h3 class="mb-0 font-weight-semibold">18</h3> </div> <div class="wrapper my-auto ml-auto ml-lg-4"> <p class="mb-0 text-success">35 Max</p> <p class="mb-0 text-warning">10 Avg</p> </div> </div> </div> <div class="col-lg-3 col-md-6 mt-md-0 mt-4"> <div class="d-flex"> <div class="wrapper"> <h5 class="mb-1 font-weight-medium text-primary">Backups</h5> <h3 class="mb-0 font-weight-semibold">7</h3> </div> <div class="wrapper my-auto ml-auto ml-lg-4"> <p class="mb-0 text-success">Last: 11-31-2020</p> <p class="mb-0 text-success">Next: 12-05-2020</p> </div> </div> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-12 col-lg-12 grid-margin stretch-card"> <div class="card"> <div class="card-header header-sm d-flex justify-content-between align-items-center"> <h4 class="card-title"><i class="fas fa-server"></i> All Servers</h4> <div class="d-md-none"> <small>Can't see everything on mobile?<br /> Try scrolling the table sideways.</small> </div> <div><a class="nav-link" href="/server/step1"><i class="fas fa-plus-circle"></i> Add New Server</a></div> </div> <div class="card-body"> <div class="table-responsive"> <table class="table"> <thead> <tr class="rounded"> <th>Server</th> <th>Actions</th> <th>CPU</th> <th>Memory</th> <th>World</th> <th>Players</th> <th>Status</th> </tr> </thead> <tbody> {% for server in data['servers'] %} <tr> <td> <i class="fas fa-server"></i> <a href="/panel/server_detail?id={{server['server_data']['server_id']}}"> {{ server['server_data']['server_name'] }} </a> </td> <td> {% if server['stats'][0]['running'] %} <a class="stop_button" data-id="{{server['server_data']['server_id']}}"> <i class="fas fa-stop"></i></a> <a class="restart_button" data-id="{{server['server_data']['server_id']}}"> <i class="fas fa-sync"></i></a> {% else %} <a data-id="{{server['server_data']['server_id']}}" class="play_button"><i class="fas fa-play"></i></a> {% end %} </td> <td> <div class="progress mb-1" data-toggle="tooltip" data-placement="top" title="{{server['stats'][0]['cpu']}}"> <div class="progress-bar {% if server['stats'][0]['cpu'] <= 33 %} bg-success {% elif 34 <= server['stats'][0]['cpu'] <= 66 %} bg-warning {% else %} bg-danger {% end %} " role="progressbar" style="width: {{server['stats'][0]['cpu']}}%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> </div> {{server['stats'][0]['cpu']}}% </td> <td> <div class="progress mb-1" data-toggle="tooltip" data-placement="top" title="{{server['stats'][0]['mem']}}"> <div class="progress-bar {% if server['stats'][0]['mem_percent'] <= 33 %} bg-success {% elif 34 <= server['stats'][0]['mem_percent'] <= 66 %} bg-warning {% else %} bg-danger {% end %} " role="progressbar" style="width: {{server['stats'][0]['mem_percent']}}%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> </div> {{server['stats'][0]['mem_percent']}}% - {% if server['stats'][0]['mem'] == 0 %} 0 MB {% else %} {{server['stats'][0]['mem']}} {% end %} </td> <td> {{ server['stats'][0]['world_name'] }} : {{ server['stats'][0]['world_size'] }} </td> <td> {% if server['stats'][0]['int_ping_results'] %} {{ server['stats'][0]['online'] }} / {{ server['stats'][0]['max'] }} Max<br /> {% if server['stats'][0]['desc'] != 'False' %} {{ server['stats'][0]['desc'] }} <br /> {% end %} {% if server['stats'][0]['version'] != 'False' %} {{ server['stats'][0]['version'] }} {% end %} {% end %} </td> <td> {% if server['stats'][0]['running'] %} <i class="fas fa-thumbs-up"></i> <span class="text-success">Online</span> {% else %} <i class="fas fa-thumbs-down"></i> <span class="text-danger">Offline</span> {% end %} </td> </tr> {% end %} </tbody> </table> </div> </div> </div> </div> </div> </div> <!-- content-wrapper ends --> {% end %} {% block js %} <script> function send_command (server_id, command){ <!-- this getCookie function is in base.html--> var token = getCookie("_xsrf"); $.ajax({ type: "POST", headers: {'X-XSRFToken': token}, url: '/server/command?command=' + command + '&id=' + server_id, success: function(data){ console.log("got response:"); console.log(data); setTimeout(function(){ location.reload(); }, 10000); } }); } $( document ).ready(function() { console.log('ready for JS!') $( ".play_button" ).click(function() { server_id = $(this).attr("data-id"); send_command(server_id, 'start_server'); bootbox.alert({ backdrop: true, title: "Sending your command", message: '<div align="center"><i class="fas fa-spin fa-spinner"></i> Please be patient while we start the server<br /> This screen will refresh in a moment </div>' }); }); $( ".stop_button" ).click(function() { console.log("stopping server"); server_id = $(this).attr("data-id"); send_command(server_id, 'stop_server'); bootbox.alert({ backdrop: true, title: "Sending your command", message: '<div align="center"><i class="fas fa-spin fa-spinner"></i> Please be patient while we stop the server<br /> This screen will refresh in a moment </div>' }); }); $( ".restart_button" ).click(function() { server_id = $(this).attr("data-id"); send_command(server_id, 'restart_server'); bootbox.alert({ backdrop: true, title: "Sending your command", message: '<div align="center"><i class="fas fa-spin fa-spinner"></i> Please be patient while we restart the server<br /> This screen will refresh in a moment </div>' }); }); }); </script> {% end %}