111 lines
5.9 KiB
Handlebars
111 lines
5.9 KiB
Handlebars
<div class="page-header">
|
|
<div>
|
|
<h2>Connected clients</h2>
|
|
<p>Inspect live player connections and send commands to individual clients.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card card-outline card-primary" data-table-search-container>
|
|
<div class="card-header">
|
|
<h3 class="card-title">Active connections</h3>
|
|
<div class="card-tools d-flex flex-nowrap align-items-center gap-2">
|
|
<div class="input-group input-group-sm flex-shrink-1" style="width: min(14rem, 100%);">
|
|
<span class="input-group-text" aria-hidden="true"><i class="bi bi-search"></i></span>
|
|
<input type="search" class="form-control" placeholder="Search clients" aria-label="Search clients" data-table-search />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body table-responsive p-0">
|
|
<table id="dashboard-clients-table" class="table table-striped w-100 mb-0" data-has-actions-column="{{#if (hasPermission currentUser 'clients.allow')}}true{{else}}false{{/if}}" data-table-searchable>
|
|
<thead>
|
|
<tr>
|
|
<th>Client</th>
|
|
<th>Current Screen</th>
|
|
<th>Current Slide</th>
|
|
<th>IP</th>
|
|
<th>Viewport</th>
|
|
<th>Connected/Updated</th>
|
|
{{#if (hasPermission currentUser 'clients.allow')}}<th>Actions</th>{{/if}}
|
|
</tr>
|
|
</thead>
|
|
<tbody id="dashboard-clients-table-body">
|
|
{{#if clients.length}}
|
|
{{#each clients}}
|
|
<tr data-table-search-row data-client-key="{{id}}" data-client-id="{{clientId}}" data-client-device-id="{{deviceId}}" data-client-screen-slug="{{screen_slug}}">
|
|
<td data-label="Client" class="client-rename-cell" title="Double-click to rename">
|
|
<div>{{#if client_name}}{{client_name}}{{else}}Unknown{{/if}}</div>
|
|
</td>
|
|
<td data-label="Current Screen">
|
|
<div>{{#if screen_name}}{{screen_name}}{{else}}Unknown{{/if}}</div>
|
|
</td>
|
|
<td data-label="Current Slide">
|
|
{{#if currentSlideTitle}}
|
|
<div>{{currentSlideTitle}}</div>
|
|
{{else}}
|
|
<span class="empty">No slide currently showing</span>
|
|
{{/if}}
|
|
</td>
|
|
<td data-label="IP">{{#if clientIp}}{{clientIp}}{{else}}<span class="empty">Unknown</span>{{/if}}</td>
|
|
<td data-label="Viewport">
|
|
{{#if viewport}}
|
|
{{viewport.width}}x{{viewport.height}}
|
|
{{else}}
|
|
<span class="empty">Unknown</span>
|
|
{{/if}}
|
|
</td>
|
|
<td data-label="Connected/Updated">
|
|
{{#if connectedAt}}
|
|
<div>{{connectedAtLabel}}</div>
|
|
{{#if lastSeenAt}}
|
|
<div class="subtle connected-updated-secondary">{{lastSeenAtLabel}}</div>
|
|
{{/if}}
|
|
{{else}}
|
|
<span class="empty">Unknown</span>
|
|
{{/if}}
|
|
</td>
|
|
{{#if (hasPermission currentUser 'clients.allow')}}
|
|
<td data-label="Actions" class="text-end">
|
|
<div class="actions justify-content-end">
|
|
<form method="post" action="/clients/{{screen_slug}}/commands" class="inline-form" data-confirm-message="Reloading will restart the player page. Continue?" data-async-command>
|
|
<input type="hidden" name="command" value="reload" />
|
|
<input type="hidden" name="connectionId" value="{{id}}" />
|
|
<button type="submit" class="btn btn-sm btn-danger">Reload</button>
|
|
</form>
|
|
<form method="post" action="/clients/{{screen_slug}}/commands" class="inline-form" data-async-command>
|
|
<input type="hidden" name="command" value="previous" />
|
|
<input type="hidden" name="connectionId" value="{{id}}" />
|
|
<button type="submit" class="btn btn-sm btn-warning" aria-label="Previous slide">◀</button>
|
|
</form>
|
|
<form method="post" action="/clients/{{screen_slug}}/commands" class="inline-form" data-async-command>
|
|
<input type="hidden" name="command" value="next" />
|
|
<input type="hidden" name="connectionId" value="{{id}}" />
|
|
<button type="submit" class="btn btn-sm btn-warning" aria-label="Next slide">▶</button>
|
|
</form>
|
|
<form method="post" action="/clients/{{screen_slug}}/commands" class="inline-form" data-async-command>
|
|
<input type="hidden" name="command" value="pause" />
|
|
<input type="hidden" name="connectionId" value="{{id}}" />
|
|
<button type="submit" class="btn btn-sm btn-info">
|
|
<i class="bi bi-pause-fill me-1" aria-hidden="false"></i>Pause
|
|
</button>
|
|
</form>
|
|
<form method="post" action="/clients/{{screen_slug}}/commands" class="inline-form" data-async-command>
|
|
<input type="hidden" name="command" value="blackout" />
|
|
<input type="hidden" name="connectionId" value="{{id}}" />
|
|
<button type="submit" class="btn btn-sm {{#if blackout}}btn-success{{else}}btn-secondary{{/if}}">
|
|
<i class="bi bi-eye-slash me-1" aria-hidden="false"></i>Blackout
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</td>
|
|
{{/if}}
|
|
</tr>
|
|
{{/each}}
|
|
{{else}}
|
|
<tr data-table-search-empty-default><td colspan="{{#if (hasPermission currentUser 'clients.allow')}}7{{else}}6{{/if}}" class="empty">No connected clients yet.</td></tr>
|
|
{{/if}}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{{> table-pagination pagination=pagination basePath="/clients"}}
|
|
</div>
|