DRB-CnC/Server/views/node.ejs

<%- include('partials/htmlHead.ejs') %>
    <div class="container">
        <div class="card mb-4">
            <div class="card-header">
                <p>
                    <span class="fs-2 fw-semibold">
                        Node Details
                    </span>                                    
                </p>                
            </div>
            <div class="card-body">
                <form>                    
                    <div class="row gx-3 mb-3">
                        <div class="">
                            
                        </div>
                        <div class="col-md-6">
                            <label class="small mb-1" for="nodeId">Node ID (this is the assigned Node ID and cannot be
                                changed)</label>
                            <input class="form-control" id="nodeId" type="text" value="<%=node.id%>" disabled></input>
                        </div>                        
                        <div class="col-md-6">                            
                            <label class="small mb-1" for="nodeStatus">Online Status:</label>
                            <% if(node.online){%> <span class="badge badge-soft-success mb-0 align-middle fs-6" id="nodeStatus">Online</span>
                            <% } else {%> <span class="badge badge-soft-danger mb-0 align-middle fs-6">Offline</span>
                            <% } %>
                            <hr>
                            <!-- Join Server button-->
                            <a type="button" class="btn btn-info <% if(!node.online) { %>disabled<% } %>" data-bs-toggle="modal" data-bs-target="#joinModal" href="#">Join Server</a>
                            <!-- Leave Server button  -->
                            <a type="button" class="btn btn-danger <% if(!node.online) { %>disabled<% } %>" href="#" onclick="leaveServer()">Leave Server</a>
                            <!-- Checkin with client button  -->
                            <a type="button" class="btn btn-secondary" href="#" onclick="checkInByNodeId('<%=node.id%>')">Check-in with Node</a>
                        </div>
                    </div>

                    <div class="row gx-3 mb-3">
                        <div class="col-md-12">
                            <label class="small mb-1" for="inputNodeName">Node Name:</label>
                            <input class="form-control" id="inputNodeName" type="text" value="<%=node.name%>"></input>
                        </div>
                    </div>
                    <div class="row gx-3 mb-3">
                        <div class="col-md-4">
                            <label class="small mb-1" for="inputNodeIp">Node IP Address (that the server can
                                contact):</label>
                            <input class="form-control" id="inputNodeIp" type="text" value="<%=node.ip%>"></input>
                        </div>
                        <div class="col-md-2">
                            <label class="small mb-1" for="inputOrgName">Node Port (with the API):</label>
                            <input class="form-control" id="inputOrgName" type="number" value="<%=node.port%>"></input>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="small mb-1" for="inputNodeLocation">Node Location (physical location):</label>
                        <input class="form-control" id="inputNodeLocation" type="location" value="<%=node.location%>"></input>
                    </div>
                    <h4>
                        Nearby Systems
                    </h4>
                    <hr>
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="main-box no-header clearfix">
                                <div class="main-box-body clearfix">
                                    <div class="table-responsive">
                                        <table class="table user-list <% if(!node.online) { %>disabled<% } %>">
                                            <thead>
                                                <tr>
                                                    <th><span>System Name</span></th>
                                                    <th><span>Frequencies</span></th>
                                                    <th><span>Protocol</span></th>
                                                    <th>&nbsp;</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <% for(const system in node.nearbySystems){ %>
                                                    <tr>
                                                        <td>
                                                            <%= system %>
                                                        </td>
                                                        <td>
                                                            <% if(node.nearbySystems[system].frequencies.length> 1) { %>
                                                                <ul>
                                                                    <% for(const frequency of
                                                                        node.nearbySystems[system].frequencies) { %>
                                                                        <li>
                                                                            <%=frequency%> MHz
                                                                        </li>
                                                                        <% } %>
                                                                </ul>
                                                                <% } else { const
                                                                    frequency=node.nearbySystems[system].frequencies[0]
                                                                    %>
                                                                    <%=frequency%> MHz
                                                                        <% } %>
                                                        </td>
                                                        <td>
                                                            <span class="label label-default text-uppercase">
                                                                <%= node.nearbySystems[system].mode %>
                                                            </span>
                                                        </td>
                                                        <td>
                                                            <a href="#" class="table-link text-info label"
                                                                data-bs-toggle="modal"
                                                                data-bs-target="#updateSystemModal_<%=system.replaceAll(" ", "_")%>">
                                                                <i class="bi bi-pencil"></i>
                                                            </a>
                                                            <a href="#" class="table-link text-danger label">
                                                                <i class="bi bi-trash"></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                    <% // Update system modal %>        
                                                    <%- include("partials/modifySystemModal.ejs", {'system': system, 'frequencies': node.nearbySystems[system].frequencies}) %>
                                                    <% } %>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Save changes button-->
                    <button class="btn btn-primary <% if(!node.online) { %>disabled<% } %>" type="button">Save changes</button>
                    <!-- Button trigger modal -->
                    <button type="button" class="btn btn-primary float-right <% if(!node.online) { %>disabled<% } %>" data-bs-toggle="modal"
                        data-bs-target="#newSystemModal">Add New System</button>
                </form>
            </div>
        </div>
    </div>

    <% // new System Modal %>
    <div class="modal fade" id="newSystemModal" tabindex="-1" aria-labelledby="newSystemModal" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="newSystemModal">Add a New System</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
    <%- include('partials/joinModal.ejs', {'nearbySystems': node.nearbySystems}) %>    
<%- include('partials/bodyEnd.ejs') %>
<script src="/res/js/node.js"></script>
<%- include('partials/htmlFooter.ejs') %>