yeungalan
/
ArOZMinecraftServer


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
							<!DOCTYPE html>
<html>

<head>
    <!-- Standard Meta -->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

    <!-- Site Properties -->
    <title>Minecraft Server</title>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
    <!-- MC Skin-->
    <link rel="stylesheet" href="./css/minecraft-skinviewer.css">
</head>

<body>
    <div class="ui clearing basic segment">
        <h2 class="ui dividing header"><img src="img/minecraft.png" style="height:45px;width:auto;" alt="Minecraft icon" />Minecraft Server</h2>
    </div>
    <div class="ui clearing basic segment">
        <div class="left floated ui basic segment">
            <span id="status" style="font-size:18px;">Service started at 2020-01-01T00:00:00.</span>
        </div>
        <div class="right floated ui buttons">
            <button class="positive ui button" onclick="start()">Start</button>
            <button class="yellow ui button" onclick="stop()">Stop</button>
            <button class="orange ui button" onclick="kickall()">Kick All</button>
            <button class="negative ui button" onclick="kill()">Kill</button>
        </div>
        <br><br>
        <div class="ui divider"></div>
    </div>
    <div class="ui clearing basic segment">
        <div class="ui massive horizontal list">
            <div class="item">
                <img class="ui avatar image" style="border-radius: 0 !important" alt="cpu" src="/img/cpu.png">
                <div class="content">
                    <p class="header">CPU Usage</p>
                    <div class="description">
                        <div class="ui small progress">
                            <div class="bar"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item">
                <img class="ui avatar image" style="border-radius: 0 !important" alt="ram" src="/img/ram.png">
                <div class="content">
                    <p class="header">RAM Usage</p>
                    <div class="description">
                        <div class="ui small progress">
                            <div class="bar"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="ui divider"></div>

    </div>
    <div class="ui clearing basic segment">
        <div class="ui grid" id="userlist">
            <div class="sixteen wide column">
                <h3>Online player(s) (N/A)</h3>
            </div>
        </div>
    </div>

</body>
<script>
    function start() {
        $.get("start", function(data) {
            $("#status").text("Starting...");
        });
    }

    function stop() {
        $.get("stop", function(data) {
            $("#status").text("Stopping...");
        });
    }

    function kickall() {
        $.get("kickall");
    }

    function kill() {
        $.get("kill", function(data) {
            $("#status").text("Killing...");
        });
    }

    //Playerinfo
    var currentOnlineUser = [];
    setInterval(function() {
        updateInfo()
    }, 3000);

    function updateInfo() {
        $.get("serverinfo", function(data) {
            $("#userlist").html(`
            <div class="sixteen wide column">
                <h3>Online player(s) (` + data.online + `/` + data.max + `)</h3>
            </div>
            `)
            if (data.sample == null) {
                $("#userlist").html(`
                <div class="four wide column">
                    <div class="ui massive horizontal list">
                        <div class="item">
                            <div class="content">
                                <p>No one here :(</p>
                            </div>
                        </div>
                    </div>
                </div>
                `)
                return
            }
            if (data.sample.length == 0) {
                $("#userlist").html(`
                <div class="four wide column">
                    <div class="ui massive horizontal list">
                        <div class="item">
                            <div class="content">
                                <p>No one here :(</p>
                            </div>
                        </div>
                    </div>
                </div>
                `)
                return
            }
            if (data.sample == currentOnlineUser) {
                return
            }

            $.each(data.sample, function(i, item) {
                $("#userlist").append(`
            <div class="four wide column">
                <div class="ui massive horizontal list">
                    <div class="item">
                        <div class="ui avatar image">
                            <div class="mc-face-viewer-8x" style="background-image:url('/skin/` + item.uuid + `.png');width:64px"></div>
                        </div>
                        <div class="content">
                            <p>` + item.name + `</p>
                        </div>
                    </div>
                </div>
            </div>
            `)
            })
        });
    }
</script>

</html>