Shinobi/web/pages/blocks/easyRemoteAccess.ejs

<%
    const p2pServerList = config.p2pServerList || {}
    const selectedServers = config.p2pHostMultiSelected
    const multipleSelected = selectedServers instanceof Array && selectedServers.length > 0;
 %>
 <style>
     .epic-text-filter {
         text-transform: none;
        letter-spacing: 0.5pt;
        font-size: 9pt;
     }
     blockquote {
         background: #073c3e;
        height: 100%;
        border-radius: 15px;
        color: #fff;
        padding: 10px;
        font-style: italic;
        box-shadow: 0 0 5px #19ce11;
     }
 </style>
 <script>
     window.p2pServerList = <%- JSON.stringify(p2pServerList) %>
     window.multipleSelected = <%- multipleSelected %>
     window.selectedServers = <%- JSON.stringify(selectedServers) %>
     window.useBetterP2P = <%- !!config.useBetterP2P %>
 </script>
<link rel="stylesheet" href="<%-window.libURL%>assets/css/super.easyRemoteAccess.css">
<form>
    <div class="row" style="display:flex">
        <div class="col-md-6">
            <div class="card bg-dark text-white mb-4">
                <div class="card-header">
                    <%- lang['Easy Remote Access (P2P)'] %>
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <select class="form-control py-0 btn btn-dark text-left text-white" type="email" name="p2pEnabled">
                            <option <% if(config.p2pEnabled === true){ %>selected<% } %> value="1"><%- lang.On %></option>
                            <option <% if(config.p2pEnabled !== true){ %>selected<% } %> value="0"><%- lang.Off %></option>
                        </select>
                    </div>
                    <div class="form-group p2p-toggle-affected">
                        <input placeholder="<%-lang['P2P API Key']%>" class="form-control btn btn-dark text-left text-white" type="text" name="p2pApiKey" value="<%- config.p2pApiKey %>">
                    </div>
                    <div class="btn-group d-flex flex-row">
                        <a href="#" class="submit flex-grow-1 btn btn-success"><i class="fa fa-check"></i> <%- lang.Save %></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card bg-dark text-white  mb-4">
                <div class="card-header">
                    <%- lang['How to Connect'] %>
                </div>
                <div class="card-body">
                    <p><%- lang['HowToConnectDes1'] %></p>
                    <p><%- lang['HowToConnectDes2'] %></p>
                    <p class="mb-0"><a class="btn btn-sm btn-info" href="https://hub.shinobi.video/articles/view/3Yhivc6djTtuBPE" target="_blank"><%- lang['How to Connect'] %></a></p>
                </div>
            </div>
        </div>
    </div>
    <div class="row p2p-toggle-affected" id="p2pServerList">
        <% Object.keys(p2pServerList).forEach((key) => {
            const details = p2pServerList[key]
            if(config.useBetterP2P && !details.v2)return;
            if(!config.useBetterP2P && details.v2)return;
        %>
            <div class="col-md-4">
                <div class="card bg-dark cursor-pointer text-white mb-4 <% if((!multipleSelected && config.p2pHostSelected === key) || multipleSelected && selectedServers.indexOf(key) > -1){ %>active<% } %>" drawn-id="<%- key %>">
                    <div class="card-header" style="min-height:auto">
                        <span class="badge badge-sm badge-danger pull-right selected-badge"><%- lang.Selected %></span>
                        <span class="badge badge-sm badge-info name-badge"><%- details.name.toUpperCase() %></span>
                    </div>
                    <div style="min-height:auto">
                        <div title="Host Address" class="d-flex flex-row text-center">
                            <div class="flex-grow-1"><span class="info-badge badge badge-sm badge-default"><%- details.host %></span></div>
                        </div>
                        <div class="d-flex flex-row align-items-center">
                            <div><i class="fa fa-download"></i></div>
                            <div class="flex-grow-1 text-left epic-text epic-text-filter"><%- lang['Download Bandwidth'] %></div>
                            <div class="text-right">
                                <span class="info-badge badge badge-sm badge-default"><span class="networkUseDown"><i class="fa fa-spinner fa-pulse"></i></span> / <%- details.maxNetworkSpeed.down %></span>
                            </div>
                        </div>
                        <div class="d-flex flex-row align-items-center">
                            <div><i class="fa fa-upload"></i></div>
                            <div class="flex-grow-1 text-left epic-text epic-text-filter"><%- lang['Upload Bandwidth'] %></div>
                            <div class="text-right">
                                <span class="info-badge badge badge-sm badge-default"><span class="networkUseUp"><i class="fa fa-spinner fa-pulse"></i></span> / <%- details.maxNetworkSpeed.up %></span>
                            </div>
                        </div>
                        <div title="CPU Usage" class="d-flex flex-row align-items-center">
                            <div><i class="fa fa-cubes"></i></div>
                            <div class="flex-grow-1 align-items-center text-left epic-text epic-text-filter"><span class="cpuCores"></span> <%- lang.Threads %></div>
                            <div class="text-right"><span class="info-badge badge badge-sm badge-default"><span class="cpuUsage"><i class="fa fa-spinner fa-pulse"></i></span>%</span></div>
                        </div>
                        <div title="RAM Usage" class="d-flex flex-row align-items-center">
                            <div><i class="fa fa-tasks"></i></div>
                            <div class="flex-grow-1 text-left epic-text epic-text-filter"><span class="ramTotal"><i class="fa fa-spinner fa-pulse"></i></span> <%- lang.RAM %></div>
                            <div class="text-right"><span class="info-badge badge badge-sm badge-default"><span class="ramPercent"><i class="fa fa-spinner fa-pulse"></i></span>%, <span class="ramUsed"><i class="fa fa-spinner fa-pulse"></i></span> MB</span></div>
                        </div>
                    </div>
                    <div class="card-footer" style="min-height:auto">
                        <div>
                            <a target="_blank" href="#" class="d-block btn btn-default activate-remote-selection"><i class="fa fa-check"></i> <%- lang['Activate'] %></a>
                            <a target="_blank" href="#" class="d-block btn btn-default remote-dashboard-link-copy"><i class="fa fa-copy"></i> <%- lang['Copy Remote Link'] %></a>
                            <a target="_blank" href="#" class="d-block btn btn-info remote-dashboard-link" target="_blank"><i class="fa fa-external-link"></i> <%- lang['Open Remote Dashboard'] %></a>
                        </div>
                    </div>
                </div>
            </div>
        <% }) %>
    </div>
    <div class="form-group p2p-toggle-affected">
        <div class="btn-group d-flex flex-row">
            <a href="#" class="submit flex-grow-1 btn btn-success"><i class="fa fa-check"></i> <%- lang.Save %></a>
        </div>
    </div>
</form>
<script src="<%-window.libURL%>assets/js/super.easyRemoteAccess.js" type="text/javascript"></script>