semi functional
This commit is contained in:
Matt Batchelder
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -131,6 +131,123 @@
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent Chart.js errors when chart elements are missing
|
||||
*/
|
||||
function initChartSafeguard() {
|
||||
if (!window.Chart) return;
|
||||
|
||||
if (typeof window.Chart.acquireContext === 'function') {
|
||||
window.Chart.acquireContext = function(item) {
|
||||
if (!item) return null;
|
||||
|
||||
const candidate = item.length ? item[0] : item;
|
||||
if (candidate && typeof candidate.getContext === 'function') {
|
||||
return candidate.getContext('2d');
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
return;
|
||||
}
|
||||
|
||||
if (window.Chart.prototype && typeof window.Chart.prototype.acquireContext === 'function') {
|
||||
window.Chart.prototype.acquireContext = function(item) {
|
||||
if (!item) return null;
|
||||
|
||||
const candidate = item.length ? item[0] : item;
|
||||
if (candidate && typeof candidate.getContext === 'function') {
|
||||
return candidate.getContext('2d');
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Enhance tables: wrap in card, add per-table search box, client-side filtering
|
||||
* Non-destructive: skips tables already enhanced
|
||||
*/
|
||||
function enhanceTables() {
|
||||
const selector = '.ots-content table, .content table, .container table, .card table, table';
|
||||
const tables = Array.from(document.querySelectorAll(selector));
|
||||
let counter = 0;
|
||||
|
||||
tables.forEach(table => {
|
||||
// only enhance tables that have a thead and tbody
|
||||
if (!table || table.classList.contains('modern-table')) return;
|
||||
if (!table.querySelector('thead') || !table.querySelector('tbody')) return;
|
||||
|
||||
counter += 1;
|
||||
table.classList.add('modern-table');
|
||||
|
||||
// Build wrapper structure
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.className = 'modern-table-card';
|
||||
|
||||
const controls = document.createElement('div');
|
||||
controls.className = 'table-controls';
|
||||
|
||||
const input = document.createElement('input');
|
||||
input.type = 'search';
|
||||
input.placeholder = 'Search…';
|
||||
input.className = 'table-search-input';
|
||||
input.setAttribute('aria-label', 'Table search');
|
||||
input.style.minWidth = '180px';
|
||||
|
||||
controls.appendChild(input);
|
||||
|
||||
const tableWrapper = document.createElement('div');
|
||||
tableWrapper.className = 'table-wrapper';
|
||||
tableWrapper.style.overflow = 'auto';
|
||||
|
||||
// Insert wrapper into DOM in place of the table
|
||||
const parent = table.parentNode;
|
||||
parent.replaceChild(wrapper, table);
|
||||
wrapper.appendChild(controls);
|
||||
wrapper.appendChild(tableWrapper);
|
||||
tableWrapper.appendChild(table);
|
||||
|
||||
// Simple, light-weight search filtering for this table only
|
||||
input.addEventListener('input', function (e) {
|
||||
const term = (e.target.value || '').toLowerCase();
|
||||
table.querySelectorAll('tbody tr').forEach(tr => {
|
||||
const text = tr.textContent.toLowerCase();
|
||||
tr.style.display = term === '' || text.includes(term) ? '' : 'none';
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize DataTables for enhanced behavior when available.
|
||||
* Falls back gracefully if DataTables or jQuery are not present.
|
||||
*/
|
||||
function initDataTables() {
|
||||
if (!window.jQuery) return;
|
||||
const $ = window.jQuery;
|
||||
if (!$.fn || !$.fn.dataTable) return;
|
||||
|
||||
$('.modern-table, table').each(function () {
|
||||
try {
|
||||
if (!$.fn.dataTable.isDataTable(this)) {
|
||||
$(this).DataTable({
|
||||
responsive: true,
|
||||
lengthChange: false,
|
||||
pageLength: 10,
|
||||
autoWidth: false,
|
||||
dom: '<"table-controls"f>rt<"table-meta"ip>',
|
||||
language: { search: '' }
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
// If initialization fails, ignore and allow fallback enhancer
|
||||
console.warn('DataTables init failed for table', this, err);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize all features when DOM is ready
|
||||
*/
|
||||
@@ -139,35 +256,13 @@
|
||||
initDropdowns();
|
||||
initSearch();
|
||||
initPageInteractions();
|
||||
initDataTables();
|
||||
enhanceTables();
|
||||
makeResponsive();
|
||||
initChartSafeguard();
|
||||
}
|
||||
|
||||
// Wait for DOM to be ready
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
})();
|
||||
|
||||
themeBtn.addEventListener('click', function() {
|
||||
const currentTheme = html.getAttribute('data-theme') || 'light';
|
||||
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
||||
|
||||
html.setAttribute('data-theme', newTheme);
|
||||
localStorage.setItem(STORAGE_KEYS.themeMode, newTheme);
|
||||
themeBtn.setAttribute('aria-pressed', newTheme === 'dark');
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize page on DOM ready
|
||||
*/
|
||||
function init() {
|
||||
initSidebarToggle();
|
||||
initThemeToggle();
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
} else {
|
||||
|
||||
@@ -1,116 +1,356 @@
|
||||
{#
|
||||
OTS Signage Modern Theme - Sidebar Override
|
||||
Modern left navigation sidebar with collapsible state and icons
|
||||
#}
|
||||
<nav class="ots-sidebar" aria-label="Main navigation">
|
||||
<div class="sidebar-header">
|
||||
<a href="{{ baseUrl }}/" class="brand-link">
|
||||
<span class="brand-icon">🎯</span>
|
||||
<span class="brand-text">OTS Signs</span>
|
||||
</a>
|
||||
<button class="sidebar-close-btn" aria-label="Close sidebar">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div id="sidebar-wrapper" class="ots-sidebar-wrapper">
|
||||
<ul class="sidebar ots-sidebar">
|
||||
<li class="sidebar-main">
|
||||
<a href="{{ url_for("home") }}">
|
||||
<span class="ots-nav-icon fa fa-home" aria-hidden="true"></span>
|
||||
<span class="ots-nav-text">{% trans "Dashboard" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<div class="sidebar-content">
|
||||
<ul class="sidebar-nav">
|
||||
<li>
|
||||
<a href="{{ baseUrl }}" class="nav-item {% if pageTitle == 'Dashboard' %}active{% endif %}">
|
||||
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>
|
||||
</svg>
|
||||
<span class="nav-text">Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
{% if currentUser.featureEnabled("schedule.view") %}
|
||||
<li class="sidebar-list">
|
||||
<a href="{{ url_for("schedule.view") }}">
|
||||
<span class="ots-nav-icon fa fa-calendar" aria-hidden="true"></span>
|
||||
<span class="ots-nav-text">{% trans "Schedule" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
<li class="nav-section-divider">
|
||||
<span class="nav-label">Content</span>
|
||||
</li>
|
||||
<li><a href="{{ baseUrl }}/library" class="nav-item">
|
||||
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
|
||||
</svg>
|
||||
<span class="nav-text">Media Library</span>
|
||||
</a></li>
|
||||
<li><a href="{{ baseUrl }}/layout" class="nav-item">
|
||||
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="9" y1="3" x2="9" y2="21"/><line x1="15" y1="3" x2="15" y2="21"/>
|
||||
</svg>
|
||||
<span class="nav-text">Layouts</span>
|
||||
</a></li>
|
||||
<li><a href="{{ baseUrl }}/playlist" class="nav-item">
|
||||
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
|
||||
</svg>
|
||||
<span class="nav-text">Playlists</span>
|
||||
</a></li>
|
||||
{% if currentUser.featureEnabled("daypart.view") %}
|
||||
<li class="sidebar-list">
|
||||
<a href="{{ url_for("daypart.view") }}">
|
||||
<span class="ots-nav-icon fa fa-clock" aria-hidden="true"></span>
|
||||
<span class="ots-nav-text">{% trans "Dayparting" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
<li class="nav-section-divider">
|
||||
<span class="nav-label">Displays</span>
|
||||
</li>
|
||||
<li><a href="{{ baseUrl }}/display" class="nav-item">
|
||||
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><path d="M12 17v4"/><path d="M8 21h8"/>
|
||||
</svg>
|
||||
<span class="nav-text">Displays</span>
|
||||
</a></li>
|
||||
<li><a href="{{ baseUrl }}/display-group" class="nav-item">
|
||||
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="2" y="2" width="8" height="8" rx="1" ry="1"/><rect x="14" y="2" width="8" height="8" rx="1" ry="1"/><rect x="2" y="14" width="8" height="8" rx="1" ry="1"/><rect x="14" y="14" width="8" height="8" rx="1" ry="1"/>
|
||||
</svg>
|
||||
<span class="nav-text">Display Groups</span>
|
||||
</a></li>
|
||||
{% set countViewable = currentUser.featureEnabledCount(["campaign.view", "layout.view", "template.view", "resolution.view"]) %}
|
||||
{% if countViewable > 0 %}
|
||||
<li class="sidebar-title"><a>{% trans "Design" %}</a></li>
|
||||
{% if currentUser.featureEnabled("campaign.view") %}
|
||||
<li class="sidebar-list">
|
||||
<a href="{{ url_for("campaign.view") }}">
|
||||
<span class="ots-nav-icon fa fa-bullhorn" aria-hidden="true"></span>
|
||||
<span class="ots-nav-text">{% trans "Campaigns" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
<li class="nav-section-divider">
|
||||
<span class="nav-label">Scheduling</span>
|
||||
</li>
|
||||
<li><a href="{{ baseUrl }}/schedule" class="nav-item">
|
||||
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><path d="M16 2v4"/><path d="M8 2v4"/><line x1="3" y1="10" x2="21" y2="10"/>
|
||||
</svg>
|
||||
<span class="nav-text">Schedules</span>
|
||||
</a></li>
|
||||
<li><a href="{{ baseUrl }}/dayparting" class="nav-item">
|
||||
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="9"/><polyline points="12 6 12 12 16 14"/>
|
||||
</svg>
|
||||
<span class="nav-text">Day Parting</span>
|
||||
</a></li>
|
||||
{% if currentUser.featureEnabled("layout.view") %}
|
||||
<li class="sidebar-list">
|
||||
<a href="{{ url_for("layout.view") }}">
|
||||
<span class="ots-nav-icon fa fa-columns" aria-hidden="true"></span>
|
||||
<span class="ots-nav-text">{% trans "Layouts" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
<li class="nav-section-divider">
|
||||
<span class="nav-label">Administration</span>
|
||||
</li>
|
||||
<li><a href="{{ baseUrl }}/user" class="nav-item">
|
||||
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
|
||||
</svg>
|
||||
<span class="nav-text">Users</span>
|
||||
</a></li>
|
||||
<li><a href="{{ baseUrl }}/user-group" class="nav-item">
|
||||
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
||||
</svg>
|
||||
<span class="nav-text">User Groups</span>
|
||||
</a></li>
|
||||
<li><a href="{{ baseUrl }}/settings" class="nav-item">
|
||||
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="3"/><path d="M12 1v6m0 6v6M4.22 4.22l4.24 4.24m2.12 2.12l4.24 4.24M1 12h6m6 0h6m-16.78 7.78l4.24-4.24m2.12-2.12l4.24-4.24"/>
|
||||
</svg>
|
||||
<span class="nav-text">Settings</span>
|
||||
</a></li>
|
||||
{% if currentUser.featureEnabled("template.view") %}
|
||||
<li class="sidebar-list">
|
||||
<a href="{{ url_for("template.view") }}">
|
||||
<span class="ots-nav-icon fa fa-clone" aria-hidden="true"></span>
|
||||
<span class="ots-nav-text">{% trans "Templates" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("resolution.view") %}
|
||||
<li class="sidebar-list">
|
||||
<a href="{{ url_for("resolution.view") }}">
|
||||
<span class="ots-nav-icon fa fa-expand" aria-hidden="true"></span>
|
||||
<span class="ots-nav-text">{% trans "Resolutions" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% set countViewable = currentUser.featureEnabledCount(["library.view", "playlist.view", "dataset.view", "menuBoard.view"]) %}
|
||||
{% if countViewable > 0 %}
|
||||
<li class="sidebar-title"><a>{% trans "Library" %}</a></li>
|
||||
{% if currentUser.featureEnabled("playlist.view") %}
|
||||
<li class="sidebar-list">
|
||||
<a href="{{ url_for("playlist.view") }}">
|
||||
<span class="ots-nav-icon fa fa-list" aria-hidden="true"></span>
|
||||
<span class="ots-nav-text">{% trans "Playlists" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("library.view") %}
|
||||
<li class="sidebar-list">
|
||||
<a href="{{ url_for("library.view") }}">
|
||||
<span class="ots-nav-icon fa fa-photo" aria-hidden="true"></span>
|
||||
<span class="ots-nav-text">{% trans "Media" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("dataset.view") %}
|
||||
<li class="sidebar-list">
|
||||
<a href="{{ url_for("dataset.view") }}">
|
||||
<span class="ots-nav-icon fa fa-database" aria-hidden="true"></span>
|
||||
<span class="ots-nav-text">{% trans "DataSets" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("menuBoard.view") %}
|
||||
<li class="sidebar-list">
|
||||
<a href="{{ url_for("menuBoard.view") }}">
|
||||
<span class="ots-nav-icon fa fa-th-large" aria-hidden="true"></span>
|
||||
<span class="ots-nav-text">{% trans "Menu Boards" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% set countViewable = currentUser.featureEnabledCount(["displays.view", "displaygroup.view", "displayprofile.view", "playersoftware.view", "command.view"]) %}
|
||||
{% if countViewable > 0 %}
|
||||
<li class="sidebar-title"><a>{% trans "Displays" %}</a></li>
|
||||
{% if currentUser.featureEnabled("displays.view") %}
|
||||
<li class="sidebar-list">
|
||||
<a href="{{ url_for("display.view") }}">
|
||||
<span class="ots-nav-icon fa fa-desktop" aria-hidden="true"></span>
|
||||
<span class="ots-nav-text">{% trans "Displays" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("displaygroup.view") %}
|
||||
<li class="sidebar-list">
|
||||
<a href="{{ url_for("displaygroup.view") }}">
|
||||
<span class="ots-nav-icon fa fa-object-group" aria-hidden="true"></span>
|
||||
<span class="ots-nav-text">{% trans "Display Groups" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("display.syncView") %}
|
||||
<li class="sidebar-list">
|
||||
<a href="{{ url_for("syncgroup.view") }}">
|
||||
<span class="ots-nav-icon fa fa-link" aria-hidden="true"></span>
|
||||
<span class="ots-nav-text">{% trans "Sync Groups" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("displayprofile.view") %}
|
||||
<li class="sidebar-list">
|
||||
<a href="{{ url_for("displayprofile.view") }}">
|
||||
<span class="ots-nav-icon fa fa-sliders" aria-hidden="true"></span>
|
||||
<span class="ots-nav-text">{% trans "Display Settings" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("playersoftware.view") %}
|
||||
<li class="sidebar-list">
|
||||
<a href="{{ url_for("playersoftware.view") }}">
|
||||
<span class="ots-nav-icon fa fa-download" aria-hidden="true"></span>
|
||||
<span class="ots-nav-text">{% trans "Player Versions" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("command.view") %}
|
||||
<li class="sidebar-list">
|
||||
<a href="{{ url_for("command.view") }}">
|
||||
<span class="ots-nav-icon fa fa-terminal" aria-hidden="true"></span>
|
||||
<span class="ots-nav-text">{% trans "Commands" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("users.view") and (currentUser.isGroupAdmin() or currentUser.isSuperAdmin()) %}
|
||||
{% set userMenuViewable = true %}
|
||||
{% else %}
|
||||
{% set userMenuViewable = false %}
|
||||
{% endif %}
|
||||
|
||||
{% set countViewable = currentUser.featureEnabledCount(["usergroup.view", "module.view", "transition.view", "task.view"]) %}
|
||||
{% if countViewable > 0 or userMenuViewable %}
|
||||
<li class="sidebar-title"><a>{% trans "Administration" %}</a></li>
|
||||
|
||||
{% if userMenuViewable %}
|
||||
<li class="sidebar-list">
|
||||
<a href="{{ url_for("user.view") }}">
|
||||
<span class="ots-nav-icon fa fa-users" aria-hidden="true"></span>
|
||||
<span class="ots-nav-text">{% trans "Users" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("usergroup.view") %}
|
||||
<li class="sidebar-list">
|
||||
<a href="{{ url_for("group.view") }}">
|
||||
<span class="ots-nav-icon fa fa-users-cog" aria-hidden="true"></span>
|
||||
<span class="ots-nav-text">{% trans "User Groups" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.isSuperAdmin() %}
|
||||
<li class="sidebar-list">
|
||||
<a href="{{ url_for("admin.view") }}">
|
||||
<span class="ots-nav-icon fa fa-wrench" aria-hidden="true"></span>
|
||||
<span class="ots-nav-text">{% trans "Settings" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.isSuperAdmin() %}
|
||||
<li class="sidebar-list">
|
||||
<a href="{{ url_for("application.view") }}">
|
||||
<span class="ots-nav-icon fa fa-th" aria-hidden="true"></span>
|
||||
<span class="ots-nav-text">{% trans "Applications" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("module.view") %}
|
||||
<li class="sidebar-list">
|
||||
<a href="{{ url_for("module.view") }}">
|
||||
<span class="ots-nav-icon fa fa-puzzle-piece" aria-hidden="true"></span>
|
||||
<span class="ots-nav-text">{% trans "Modules" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("transition.view") %}
|
||||
<li class="sidebar-list">
|
||||
<a href="{{ url_for("transition.view") }}">
|
||||
<span class="ots-nav-icon fa fa-exchange" aria-hidden="true"></span>
|
||||
<span class="ots-nav-text">{% trans "Transitions" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("task.view") %}
|
||||
<li class="sidebar-list">
|
||||
<a href="{{ url_for("task.view") }}">
|
||||
<span class="ots-nav-icon fa fa-tasks" aria-hidden="true"></span>
|
||||
<span class="ots-nav-text">{% trans "Tasks" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("tag.view") %}
|
||||
<li class="sidebar-list">
|
||||
<a href="{{ url_for("tag.view") }}">
|
||||
<span class="ots-nav-icon fa fa-tags" aria-hidden="true"></span>
|
||||
<span class="ots-nav-text">{% trans "Tags" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.isSuperAdmin() %}
|
||||
<li class="sidebar-list">
|
||||
<a href="{{ url_for("folders.view") }}">
|
||||
<span class="ots-nav-icon fa fa-folder" aria-hidden="true"></span>
|
||||
<span class="ots-nav-text">{% trans "Folders" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("font.view") %}
|
||||
<li class="sidebar-list">
|
||||
<a href="{{ url_for("font.view") }}">
|
||||
<span class="ots-nav-icon fa fa-font" aria-hidden="true"></span>
|
||||
<span class="ots-nav-text">{% trans "Fonts" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% set countViewable = currentUser.featureEnabledCount(["report.view", "report.scheduling", "report.saving"]) %}
|
||||
{% if countViewable > 0 %}
|
||||
<li class="sidebar-title"><a>{% trans "Reporting" %}</a></li>
|
||||
|
||||
{% if currentUser.featureEnabled("report.view") %}
|
||||
<li class="sidebar-list">
|
||||
<a href="{{ url_for("report.view") }}">
|
||||
<span class="ots-nav-icon fa fa-file-alt" aria-hidden="true"></span>
|
||||
<span class="ots-nav-text">{% trans "All Reports" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("report.scheduling") %}
|
||||
<li class="sidebar-list">
|
||||
<a href="{{ url_for("reportschedule.view") }}">
|
||||
<span class="ots-nav-icon fa fa-calendar-alt" aria-hidden="true"></span>
|
||||
<span class="ots-nav-text">{% trans "Report Schedules" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("report.saving") %}
|
||||
<li class="sidebar-list">
|
||||
<a href="{{ url_for("savedreport.view") }}">
|
||||
<span class="ots-nav-icon fa fa-save" aria-hidden="true"></span>
|
||||
<span class="ots-nav-text">{% trans "Saved Reports" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% endif %}
|
||||
|
||||
{% set countViewable = currentUser.featureEnabledCount(["log.view", "sessions.view", "auditlog.view", "fault.view"]) %}
|
||||
{% if countViewable > 0 %}
|
||||
<li class="sidebar-title"><a>{% trans "Advanced" %}</a></li>
|
||||
|
||||
{% if currentUser.featureEnabled("log.view") %}
|
||||
<li class="sidebar-list">
|
||||
<a href="{{ url_for("log.view") }}">
|
||||
<span class="ots-nav-icon fa fa-list-alt" aria-hidden="true"></span>
|
||||
<span class="ots-nav-text">{% trans "Log" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("sessions.view") %}
|
||||
<li class="sidebar-list">
|
||||
<a href="{{ url_for("sessions.view") }}">
|
||||
<span class="ots-nav-icon fa fa-history" aria-hidden="true"></span>
|
||||
<span class="ots-nav-text">{% trans "Sessions" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("auditlog.view") %}
|
||||
<li class="sidebar-list">
|
||||
<a href="{{ url_for("auditlog.view") }}">
|
||||
<span class="ots-nav-icon fa fa-clipboard-list" aria-hidden="true"></span>
|
||||
<span class="ots-nav-text">{% trans "Audit Trail" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("fault.view") %}
|
||||
<li class="sidebar-list">
|
||||
<a href="{{ url_for("fault.view") }}">
|
||||
<span class="ots-nav-icon fa fa-exclamation-triangle" aria-hidden="true"></span>
|
||||
<span class="ots-nav-text">{% trans "Report Fault" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% set countViewable = currentUser.featureEnabledCount(["developer.edit"]) %}
|
||||
{% if countViewable > 0 %}
|
||||
<li class="sidebar-title"><a>{% trans "Developer" %}</a></li>
|
||||
|
||||
{% if currentUser.featureEnabled("developer.edit") %}
|
||||
<li class="sidebar-list">
|
||||
<a href="{{ url_for("developer.templates.view") }}">
|
||||
<span class="ots-nav-icon fa fa-code" aria-hidden="true"></span>
|
||||
<span class="ots-nav-text">{% trans "Module Templates" %}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-footer">
|
||||
<div class="sidebar-user">
|
||||
<div class="user-avatar user-avatar-lg">{{ user.username|first|upper }}</div>
|
||||
<div class="user-details">
|
||||
<div class="user-name">{{ user.username }}</div>
|
||||
<div class="user-role text-xs">Administrator</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
8
custom/otssignange/views/authed-theme-topbar.twig
Normal file
8
custom/otssignange/views/authed-theme-topbar.twig
Normal file
@@ -0,0 +1,8 @@
|
||||
{#
|
||||
OTS Signage Theme override
|
||||
Optional include rendered in authed.twig (top right navbar)
|
||||
Minimal, low-risk addition for verification
|
||||
#}
|
||||
<li class="nav-item ots-theme-badge">
|
||||
<span class="nav-link">OTS Theme</span>
|
||||
</li>
|
||||
472
custom/otssignange/views/authed-topbar.twig
Normal file
472
custom/otssignange/views/authed-topbar.twig
Normal file
@@ -0,0 +1,472 @@
|
||||
{#
|
||||
/**
|
||||
* Copyright (C) 2023 Xibo Signage Ltd
|
||||
*
|
||||
* Xibo - Digital Signage - https://xibosignage.com
|
||||
*
|
||||
* This file is part of Xibo.
|
||||
*
|
||||
* Xibo is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* any later version.
|
||||
*
|
||||
* Xibo is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with Xibo. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
#}
|
||||
<ul class="nav navbar-nav ots-topbar">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ url_for("home") }}">
|
||||
<span class="ots-topbar-icon fa fa-home" aria-hidden="true"></span>
|
||||
{% trans "Dashboard" %}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
{% set countViewable = currentUser.featureEnabledCount(["schedule.view", "daypart.view"]) %}
|
||||
{% set groupElementClass = (countViewable > 1) ? 'dropdown-item' : 'nav-link' %}
|
||||
{% if countViewable > 0 %}
|
||||
{% if countViewable > 1 %}
|
||||
<li class="nav-item dropdown">
|
||||
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="ots-topbar-icon fa fa-calendar" aria-hidden="true"></span>
|
||||
{% trans "Schedule" %} <span class="caret"></span>
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
{% else %}
|
||||
<li class="nav-item">
|
||||
{% endif %}
|
||||
{% if currentUser.featureEnabled("schedule.view") %}
|
||||
<a class="{{ groupElementClass }}" href="{{ url_for("schedule.view") }}">
|
||||
<span class="ots-topbar-icon fa fa-calendar" aria-hidden="true"></span>
|
||||
{% trans "Schedule" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if currentUser.featureEnabled("daypart.view") %}
|
||||
<a class="{{ groupElementClass }}" href="{{ url_for("daypart.view") }}">
|
||||
<span class="ots-topbar-icon fa fa-clock" aria-hidden="true"></span>
|
||||
{% trans "Dayparting" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if countViewable > 1 %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% set countViewable = currentUser.featureEnabledCount(["campaign.view", "layout.view", "template.view", "resolution.view"]) %}
|
||||
{% set groupElementClass = (countViewable > 1) ? 'dropdown-item' : 'nav-link' %}
|
||||
{% if countViewable > 0 %}
|
||||
{% if countViewable > 1 %}
|
||||
<li class="nav-item dropdown">
|
||||
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="ots-topbar-icon fa fa-paint-brush" aria-hidden="true"></span>
|
||||
{% trans "Design" %} <span class="caret"></span>
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
{% else %}
|
||||
<li class="nav-item">
|
||||
{% endif %}
|
||||
{% if currentUser.featureEnabled("campaign.view") %}
|
||||
<a class="{{ groupElementClass }}" href="{{ url_for("campaign.view") }}">
|
||||
<span class="ots-topbar-icon fa fa-bullhorn" aria-hidden="true"></span>
|
||||
{% trans "Campaigns" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("layout.view") %}
|
||||
<a class="{{ groupElementClass }}" href="{{ url_for("layout.view") }}">
|
||||
<span class="ots-topbar-icon fa fa-columns" aria-hidden="true"></span>
|
||||
{% trans "Layouts" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("template.view") %}
|
||||
<a class="{{ groupElementClass }}" href="{{ url_for("template.view") }}">
|
||||
<span class="ots-topbar-icon fa fa-clone" aria-hidden="true"></span>
|
||||
{% trans "Templates" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("resolution.view") %}
|
||||
<a class="{{ groupElementClass }}" href="{{ url_for("resolution.view") }}">
|
||||
<span class="ots-topbar-icon fa fa-expand" aria-hidden="true"></span>
|
||||
{% trans "Resolutions" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if countViewable > 1 %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% set countViewable = currentUser.featureEnabledCount(["library.view", "playlist.view", "dataset.view", "menuBoard.view"]) %}
|
||||
{% set groupElementClass = (countViewable > 1) ? 'dropdown-item' : 'nav-link' %}
|
||||
{% if countViewable > 0 %}
|
||||
{% if countViewable > 1 %}
|
||||
<li class="nav-item dropdown">
|
||||
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="ots-topbar-icon fa fa-folder-open" aria-hidden="true"></span>
|
||||
{% trans "Library" %} <span class="caret"></span>
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
{% else %}
|
||||
<li class="nav-item">
|
||||
{% endif %}
|
||||
{% if currentUser.featureEnabled("playlist.view") %}
|
||||
<a class="{{ groupElementClass }}" href="{{ url_for("playlist.view") }}">
|
||||
<span class="ots-topbar-icon fa fa-list" aria-hidden="true"></span>
|
||||
{% trans "Playlists" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("library.view") %}
|
||||
<a class="{{ groupElementClass }}" href="{{ url_for("library.view") }}">
|
||||
<span class="ots-topbar-icon fa fa-photo" aria-hidden="true"></span>
|
||||
{% trans "Media" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("dataset.view") %}
|
||||
<a class="{{ groupElementClass }}" href="{{ url_for("dataset.view") }}">
|
||||
<span class="ots-topbar-icon fa fa-database" aria-hidden="true"></span>
|
||||
{% trans "DataSets" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("menuBoard.view") %}
|
||||
<a class="{{ groupElementClass }}" href="{{ url_for("menuBoard.view") }}">
|
||||
<span class="ots-topbar-icon fa fa-th-large" aria-hidden="true"></span>
|
||||
{% trans "Menu Boards" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if countViewable > 1 %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% set countViewable = currentUser.featureEnabledCount(["displays.view", "displaygroup.view", "displayprofile.view", "playersoftware.view", "command.view"]) %}
|
||||
{% set groupElementClass = (countViewable > 1) ? 'dropdown-item' : 'nav-link' %}
|
||||
{% if countViewable > 0 %}
|
||||
{% if countViewable > 1 %}
|
||||
<li class="nav-item dropdown">
|
||||
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="ots-topbar-icon fa fa-desktop" aria-hidden="true"></span>
|
||||
{% trans "Displays" %} <span class="caret"></span>
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
{% else %}
|
||||
<li class="nav-item">
|
||||
{% endif %}
|
||||
{% if currentUser.featureEnabled("displays.view") %}
|
||||
<a class="{{ groupElementClass }}" href="{{ url_for("display.view") }}">
|
||||
<span class="ots-topbar-icon fa fa-desktop" aria-hidden="true"></span>
|
||||
{% trans "Displays" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("displaygroup.view") %}
|
||||
<a class="{{ groupElementClass }}" href="{{ url_for("displaygroup.view") }}">
|
||||
<span class="ots-topbar-icon fa fa-object-group" aria-hidden="true"></span>
|
||||
{% trans "Display Groups" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("display.syncView") %}
|
||||
<a class="{{ groupElementClass }}" href="{{ url_for("syncgroup.view") }}">
|
||||
<span class="ots-topbar-icon fa fa-link" aria-hidden="true"></span>
|
||||
{% trans "Sync Groups" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("displayprofile.view") %}
|
||||
<a class="{{ groupElementClass }}" href="{{ url_for("displayprofile.view") }}">
|
||||
<span class="ots-topbar-icon fa fa-sliders" aria-hidden="true"></span>
|
||||
{% trans "Display Settings" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("playersoftware.view") %}
|
||||
<a class="{{ groupElementClass }}" href="{{ url_for("playersoftware.view") }}">
|
||||
<span class="ots-topbar-icon fa fa-download" aria-hidden="true"></span>
|
||||
{% trans "Player Versions" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("command.view") %}
|
||||
<a class="{{ groupElementClass }}" href="{{ url_for("command.view") }}">
|
||||
<span class="ots-topbar-icon fa fa-terminal" aria-hidden="true"></span>
|
||||
{% trans "Commands" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if countViewable > 1 %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("users.view") and (currentUser.isGroupAdmin() or currentUser.isSuperAdmin()) %}
|
||||
{% set userMenuViewable = true %}
|
||||
{% else %}
|
||||
{% set userMenuViewable = false %}
|
||||
{% endif %}
|
||||
|
||||
{% set countViewable = currentUser.featureEnabledCount(["usergroup.view", "module.view", "transition.view", "task.view"]) %}
|
||||
{% set groupElementClass = (countViewable > 1 or (countViewable == 1 and userMenuViewable)) ? 'dropdown-item' : 'nav-link' %}
|
||||
{% if countViewable > 0 or userMenuViewable %}
|
||||
{% if countViewable > 1 or (countViewable == 1 and userMenuViewable) %}
|
||||
<li class="nav-item dropdown">
|
||||
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="ots-topbar-icon fa fa-cog" aria-hidden="true"></span>
|
||||
{% trans "Administration" %} <span class="caret"></span>
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
{% endif %}
|
||||
{% if userMenuViewable %}
|
||||
{% if countViewable == 0 %}
|
||||
<li class="nav-item">
|
||||
{% endif %}
|
||||
<a class="{{ groupElementClass }}" href="{{ url_for("user.view") }}">
|
||||
<span class="ots-topbar-icon fa fa-users" aria-hidden="true"></span>
|
||||
{% trans "Users" %}
|
||||
</a>
|
||||
{% if countViewable == 0 %}
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("usergroup.view") %}
|
||||
{% if countViewable == 0 %}
|
||||
<li class="nav-item">
|
||||
{% endif %}
|
||||
<a class="{{ groupElementClass }}" href="{{ url_for("group.view") }}">
|
||||
<span class="ots-topbar-icon fa fa-users-cog" aria-hidden="true"></span>
|
||||
{% trans "User Groups" %}
|
||||
</a>
|
||||
{% if countViewable == 0 %}
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.isSuperAdmin() %}
|
||||
{% if countViewable == 0 %}
|
||||
<li class="nav-item">
|
||||
{% endif %}
|
||||
<a class="{{ groupElementClass }}" href="{{ url_for("admin.view") }}">
|
||||
<span class="ots-topbar-icon fa fa-wrench" aria-hidden="true"></span>
|
||||
{% trans "Settings" %}
|
||||
</a>
|
||||
{% if countViewable == 0 %}
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.isSuperAdmin() %}
|
||||
{% if countViewable == 0 %}
|
||||
<li class="nav-item">
|
||||
{% endif %}
|
||||
<a class="{{ groupElementClass }}" href="{{ url_for("application.view") }}">
|
||||
<span class="ots-topbar-icon fa fa-th" aria-hidden="true"></span>
|
||||
{% trans "Applications" %}
|
||||
</a>
|
||||
{% if countViewable == 0 %}
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("module.view") %}
|
||||
{% if countViewable == 0 %}
|
||||
<li class="nav-item">
|
||||
{% endif %}
|
||||
<a class="{{ groupElementClass }}" href="{{ url_for("module.view") }}">
|
||||
<span class="ots-topbar-icon fa fa-puzzle-piece" aria-hidden="true"></span>
|
||||
{% trans "Modules" %}
|
||||
</a>
|
||||
{% if countViewable == 0 %}
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("transition.view") %}
|
||||
{% if countViewable == 0 %}
|
||||
<li class="nav-item">
|
||||
{% endif %}
|
||||
<a class="{{ groupElementClass }}" href="{{ url_for("transition.view") }}">
|
||||
<span class="ots-topbar-icon fa fa-exchange" aria-hidden="true"></span>
|
||||
{% trans "Transitions" %}
|
||||
</a>
|
||||
{% if countViewable == 0 %}
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("task.view") %}
|
||||
{% if countViewable == 0 %}
|
||||
<li class="nav-item">
|
||||
{% endif %}
|
||||
<a class="{{ groupElementClass }}" href="{{ url_for("task.view") }}">
|
||||
<span class="ots-topbar-icon fa fa-tasks" aria-hidden="true"></span>
|
||||
{% trans "Tasks" %}
|
||||
</a>
|
||||
{% if countViewable == 0 %}
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("tag.view") %}
|
||||
{% if countViewable == 0 %}
|
||||
<li class="nav-item">
|
||||
{% endif %}
|
||||
<a class="{{ groupElementClass }}" href="{{ url_for("tag.view") }}">
|
||||
<span class="ots-topbar-icon fa fa-tags" aria-hidden="true"></span>
|
||||
{% trans "Tags" %}
|
||||
</a>
|
||||
{% if countViewable == 0 %}
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.isSuperAdmin() %}
|
||||
{% if countViewable == 0 %}
|
||||
<li class="nav-item">
|
||||
{% endif %}
|
||||
<a class="{{ groupElementClass }}" href="{{ url_for("folders.view") }}">
|
||||
<span class="ots-topbar-icon fa fa-folder" aria-hidden="true"></span>
|
||||
{% trans "Folders" %}
|
||||
</a>
|
||||
{% if countViewable == 0 %}
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("font.view") %}
|
||||
{% if countViewable == 0 %}
|
||||
<li class="nav-item">
|
||||
{% endif %}
|
||||
<a class="{{ groupElementClass }}" href="{{ url_for("font.view") }}">
|
||||
<span class="ots-topbar-icon fa fa-font" aria-hidden="true"></span>
|
||||
{% trans "Fonts" %}
|
||||
</a>
|
||||
{% if countViewable == 0 %}
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% if countViewable > 1 or (countViewable == 1 and userMenuViewable) %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if countViewable > 1 or (countViewable == 1 and userMenuViewable) %}
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% set countViewable = currentUser.featureEnabledCount(["report.view", "report.scheduling", "report.saving"]) %}
|
||||
{% set groupElementClass = (countViewable > 1) ? 'dropdown-item' : 'nav-link' %}
|
||||
{% if countViewable > 0 %}
|
||||
{% if countViewable > 1 %}
|
||||
<li class="nav-item dropdown">
|
||||
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="ots-topbar-icon fa fa-chart-bar" aria-hidden="true"></span>
|
||||
{% trans "Reporting" %} <span class="caret"></span>
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
{% else %}
|
||||
<li class="nav-item">
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("report.view") %}
|
||||
<a class="{{ groupElementClass }}" href="{{ url_for("report.view") }}">
|
||||
<span class="ots-topbar-icon fa fa-file-alt" aria-hidden="true"></span>
|
||||
{% trans "All Reports" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("report.scheduling") %}
|
||||
<a class="{{ groupElementClass }}" href="{{ url_for("reportschedule.view") }}">
|
||||
<span class="ots-topbar-icon fa fa-calendar-alt" aria-hidden="true"></span>
|
||||
{% trans "Report Schedules" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("report.saving") %}
|
||||
<a class="{{ groupElementClass }}" href="{{ url_for("savedreport.view") }}">
|
||||
<span class="ots-topbar-icon fa fa-save" aria-hidden="true"></span>
|
||||
{% trans "Saved Reports" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% if countViewable > 1 %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% set countViewable = currentUser.featureEnabledCount(["log.view", "sessions.view", "auditlog.view", "fault.view"]) %}
|
||||
{% set groupElementClass = (countViewable > 1) ? 'dropdown-item' : 'nav-link' %}
|
||||
{% if countViewable > 0 %}
|
||||
{% if countViewable > 1 %}
|
||||
<li class="nav-item dropdown">
|
||||
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="ots-topbar-icon fa fa-shield-alt" aria-hidden="true"></span>
|
||||
{% trans "Advanced" %} <span class="caret"></span>
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
{% else %}
|
||||
<li class="nav-item">
|
||||
{% endif %}
|
||||
{% if currentUser.featureEnabled("log.view") %}
|
||||
<a class="{{ groupElementClass }}" href="{{ url_for("log.view") }}">
|
||||
<span class="ots-topbar-icon fa fa-list-alt" aria-hidden="true"></span>
|
||||
{% trans "Log" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("sessions.view") %}
|
||||
<a class="{{ groupElementClass }}" href="{{ url_for("sessions.view") }}">
|
||||
<span class="ots-topbar-icon fa fa-history" aria-hidden="true"></span>
|
||||
{% trans "Sessions" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("auditlog.view") %}
|
||||
<a class="{{ groupElementClass }}" href="{{ url_for("auditlog.view") }}">
|
||||
<span class="ots-topbar-icon fa fa-clipboard-list" aria-hidden="true"></span>
|
||||
{% trans "Audit Trail" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("fault.view") %}
|
||||
<a class="{{ groupElementClass }}" href="{{ url_for("fault.view") }}">
|
||||
<span class="ots-topbar-icon fa fa-exclamation-triangle" aria-hidden="true"></span>
|
||||
{% trans "Report Fault" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if countViewable > 1 %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% set countViewable = currentUser.featureEnabledCount(["developer.edit"]) %}
|
||||
{% if countViewable > 0 %}
|
||||
<li class="nav-item dropdown">
|
||||
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="ots-topbar-icon fa fa-code" aria-hidden="true"></span>
|
||||
{% trans "Developer" %} <span class="caret"></span>
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
{% if currentUser.featureEnabled("developer.edit") %}
|
||||
<a class="dropdown-item" href="{{ url_for("developer.templates.view") }}">
|
||||
<span class="ots-topbar-icon fa fa-code-branch" aria-hidden="true"></span>
|
||||
{% trans "Module Templates" %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
33
custom/otssignange/views/authed-user-menu.twig
Normal file
33
custom/otssignange/views/authed-user-menu.twig
Normal file
@@ -0,0 +1,33 @@
|
||||
{#
|
||||
OTS Signage Theme override
|
||||
Based on Xibo CMS default authed-user-menu.twig (master branch)
|
||||
Minimal change: add ots-user-menu class for easy verification
|
||||
#}
|
||||
<li class="dropdown nav-item item">
|
||||
<a href="#" class="nav-link" data-toggle="dropdown" id="navbarUserMenu">
|
||||
<img class="nav-avatar" src="{{ theme.uri("img/avatar.jpg") }}" />
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right ots-user-menu" aria-labelledby="navbarUserMenu">
|
||||
<h6 class="dropdown-header">{{ currentUser.userName }}<br/>
|
||||
<div id="XiboClock">{{ clock }}</div>
|
||||
</h6>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item XiboFormButton" href="{{ url_for("user.preferences.form") }}" title="{% trans "Preferences" %}">{% trans "Preferences" %}</a>
|
||||
|
||||
{% if currentUser.featureEnabled("user.profile") %}
|
||||
<a class="dropdown-item XiboFormButton" href="{{ url_for("user.edit.profile.form") }}" title="{% trans "Edit Profile" %}">{% trans "Edit Profile" %}</a>
|
||||
{% endif %}
|
||||
|
||||
<a class="dropdown-item XiboFormButton" href="{{ url_for("user.applications") }}" title="{% trans "View my authenticated applications" %}">{% trans "My Applications" %}</a>
|
||||
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" id="reshowWelcomeMenuItem" href="{{ url_for("welcome.view") }}">{% trans "Reshow welcome" %}</a>
|
||||
|
||||
<a class="dropdown-item XiboFormButton" href="{{ url_for("about") }}" title="{% trans "About the CMS" %}">{% trans "About" %}</a>
|
||||
|
||||
{% if not hideLogout %}
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" title="{% trans "Logout" %}" href="{{ logoutUrl }}">{% trans "Logout" %}</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</li>
|
||||
@@ -1,83 +0,0 @@
|
||||
{#
|
||||
OTS Signage Modern Theme - Authenticated Shell Override
|
||||
Replaces the header and shell structure with a modern topbar + sidebar layout
|
||||
#}
|
||||
{% extends "base.twig" %}
|
||||
|
||||
{% block head %}
|
||||
{{ parent() }}
|
||||
<link rel="stylesheet" href="{{ baseUrl }}/theme/custom/otssignange/css/override.css" />
|
||||
<link rel="stylesheet" href="{{ baseUrl }}/theme/custom/otssignange/css/client.css" />
|
||||
{% endblock %}
|
||||
|
||||
{% block htmlTag %}
|
||||
<html lang="en" data-ots-theme="v1" data-mode="dark">
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<body class="ots-theme ots-dark-mode">
|
||||
<div class="ots-shell">
|
||||
{% include "authed-sidebar.twig" %}
|
||||
|
||||
<div class="ots-main">
|
||||
{% block header %}
|
||||
<header class="ots-topbar">
|
||||
<div class="topbar-left">
|
||||
<button class="btn-ghost topbar-toggle" data-action="toggle-sidebar" aria-label="Toggle sidebar" title="Toggle sidebar">
|
||||
<svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="topbar-title">
|
||||
<h1 class="page-title">{{ pageTitle|default('Dashboard') }}</h1>
|
||||
{% if pageSubtitle is defined %}<p class="page-subtitle">{{ pageSubtitle }}</p>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="topbar-right">
|
||||
<form action="{{ baseUrl }}/search" class="topbar-search" method="get" role="search">
|
||||
<svg class="search-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
|
||||
</svg>
|
||||
<input type="text" name="q" placeholder="Search…" aria-label="Search" class="search-input" />
|
||||
</form>
|
||||
<div class="topbar-actions">
|
||||
<button class="topbar-btn" aria-label="Notifications" title="Notifications">
|
||||
<svg class="icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="dropdown user-menu">
|
||||
<button class="topbar-btn user-btn" aria-label="User menu" aria-expanded="false">
|
||||
<span class="avatar avatar-sm">{{ user.username|first|upper }}</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-right" role="menu">
|
||||
<li><a href="{{ baseUrl }}/profile" role="menuitem">Profile</a></li>
|
||||
<li><a href="{{ baseUrl }}/logout" role="menuitem">Sign out</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
{% endblock %}
|
||||
|
||||
<main class="ots-content">
|
||||
{% block content %}
|
||||
<!-- Content inserted here by page templates -->
|
||||
{% endblock %}
|
||||
</main>
|
||||
|
||||
{% block footer %}
|
||||
<footer class="ots-footer">
|
||||
<p class="text-muted text-xs">© {{ currentDate|date('Y') }} {{ app_name }}. Powered by <a href="https://xibosignage.com">Xibo</a>.</p>
|
||||
</footer>
|
||||
{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% block scripts %}
|
||||
{{ parent() }}
|
||||
<script src="{{ baseUrl }}/theme/custom/otssignange/js/theme.js"></script>
|
||||
{% endblock %}
|
||||
</body>
|
||||
{% endblock %}
|
||||
1005
custom/otssignange/views/dashboard-status-page.twig
Normal file
1005
custom/otssignange/views/dashboard-status-page.twig
Normal file
File diff suppressed because it is too large
Load Diff
@@ -1,131 +0,0 @@
|
||||
{#
|
||||
OTS Signage Modern Theme - Dashboard Page Override
|
||||
Modern dashboard with KPI cards, status panels, and quick actions
|
||||
#}
|
||||
{% extends "authed.twig" %}
|
||||
|
||||
{% block pageTitle %}Dashboard{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="ots-theme dashboard-page">
|
||||
{# KPI Cards Row #}
|
||||
<section class="kpi-section">
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-header">
|
||||
<h3 class="kpi-label">Displays</h3>
|
||||
<span class="kpi-icon-box">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><path d="M12 17v4"/><path d="M8 21h8"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="kpi-body">
|
||||
<div class="kpi-number">1</div>
|
||||
<div class="kpi-meta">100% Displays Online</div>
|
||||
</div>
|
||||
<div class="kpi-footer">
|
||||
<span class="badge badge-success">1</span>
|
||||
<span class="text-xs text-muted">Online</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-header">
|
||||
<h3 class="kpi-label">Schedules</h3>
|
||||
<span class="kpi-icon-box">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><path d="M16 2v4"/><path d="M8 2v4"/><line x1="3" y1="10" x2="21" y2="10"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="kpi-body">
|
||||
<div class="kpi-number">0</div>
|
||||
<div class="kpi-meta">Scheduled events</div>
|
||||
</div>
|
||||
<div class="kpi-footer">
|
||||
<span class="badge badge-secondary">0</span>
|
||||
<span class="text-xs text-muted">Upcoming</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-header">
|
||||
<h3 class="kpi-label">Users</h3>
|
||||
<span class="kpi-icon-box">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="kpi-body">
|
||||
<div class="kpi-number">2</div>
|
||||
<div class="kpi-meta">OTS Signs users</div>
|
||||
</div>
|
||||
<div class="kpi-footer">
|
||||
<span class="badge badge-info">2</span>
|
||||
<span class="text-xs text-muted">Active</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{# Main Panels Row #}
|
||||
<section class="dashboard-panels">
|
||||
<article class="panel panel-full">
|
||||
<div class="panel-header">
|
||||
<h3>Display Status</h3>
|
||||
<a href="{{ baseUrl }}/display" class="link-secondary">View all →</a>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="empty-state-compact">
|
||||
<p class="text-muted">You have 1 display configured. Last check-in: just now</p>
|
||||
<a href="{{ baseUrl }}/display" class="btn btn-outline btn-sm">Manage Displays</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="panel panel-full">
|
||||
<div class="panel-header">
|
||||
<h3>Upcoming Schedules</h3>
|
||||
<a href="{{ baseUrl }}/schedule" class="link-secondary">View all →</a>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="empty-state-compact">
|
||||
<p class="text-muted">No schedules found. Create a schedule to get started.</p>
|
||||
<a href="{{ baseUrl }}/schedule/add" class="btn btn-outline btn-sm">Create Schedule</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
{# Quick Actions Section #}
|
||||
<section class="quick-actions-grid">
|
||||
<h3 class="section-title">Quick Actions</h3>
|
||||
<div class="action-cards">
|
||||
<a href="{{ baseUrl }}/schedule/add" class="action-card">
|
||||
<div class="action-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><path d="M16 2v4"/><path d="M8 2v4"/><line x1="3" y1="10" x2="21" y2="10"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="action-label">Create Schedule</span>
|
||||
</a>
|
||||
<a href="{{ baseUrl }}/display" class="action-card">
|
||||
<div class="action-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><path d="M12 17v4"/><path d="M8 21h8"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="action-label">Manage Displays</span>
|
||||
</a>
|
||||
<a href="{{ baseUrl }}/user/add" class="action-card">
|
||||
<div class="action-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="action-label">Add User</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{% endblock %}
|
||||
66
custom/otssignange/views/datatable-contrast.twig
Normal file
66
custom/otssignange/views/datatable-contrast.twig
Normal file
@@ -0,0 +1,66 @@
|
||||
/* High-specificity DataTables contrast overrides
|
||||
Ensures table body text is readable against dark theme backgrounds.
|
||||
Light text on dark backgrounds.
|
||||
*/
|
||||
|
||||
#datatable-container table.dataTable tbody td,
|
||||
#datatable-container .dataTables_wrapper table.dataTable tbody td,
|
||||
.ots-table-card table.dataTable tbody td,
|
||||
.ots-table-card table.dataTable tbody td * {
|
||||
color: #f5f5f5 !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
#datatable-container table.dataTable thead th,
|
||||
.ots-table-card table.dataTable thead th,
|
||||
#datatable-container table.dataTable thead th * {
|
||||
color: #ffffff !important;
|
||||
opacity: 1 !important;
|
||||
background-color: rgba(0,0,0,0.3) !important;
|
||||
}
|
||||
|
||||
#datatable-container table.dataTable tbody tr.table-success td,
|
||||
#datatable-container table.dataTable tbody tr.success td,
|
||||
#datatable-container table.dataTable tbody tr.selected td,
|
||||
#datatable-container table.dataTable tbody tr.highlight td {
|
||||
background-color: rgba(255,255,255,0.08) !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
#datatable-container table.dataTable tbody td .btn,
|
||||
#datatable-container table.dataTable tbody td .badge,
|
||||
#datatable-container table.dataTable tbody td .dropdown-toggle {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
#datatable-container table.dataTable tbody tr {
|
||||
background-color: rgba(0,0,0,0.1) !important;
|
||||
}
|
||||
|
||||
#datatable-container table.dataTable tbody tr:hover {
|
||||
background-color: rgba(255,255,255,0.05) !important;
|
||||
}
|
||||
|
||||
.dataTables_wrapper .dataTables_filter input,
|
||||
.dataTables_wrapper .dataTables_length select,
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button {
|
||||
color: #f5f5f5 !important;
|
||||
background: rgba(0,0,0,0.2) !important;
|
||||
border-color: rgba(255,255,255,0.1) !important;
|
||||
}
|
||||
|
||||
#datatable-container table.dataTable tbody td img,
|
||||
#datatable-container table.dataTable tbody td svg {
|
||||
filter: none !important;
|
||||
}
|
||||
|
||||
#datatable-container table.dataTable thead th.sorting:after,
|
||||
#datatable-container table.dataTable thead th.sorting_asc:after,
|
||||
#datatable-container table.dataTable thead th.sorting_desc:after {
|
||||
color: rgba(255,255,255,0.7) !important;
|
||||
}
|
||||
|
||||
.ots-table-card table.dataTable tbody tr td,
|
||||
.ots-table-card table.dataTable tbody tr td * {
|
||||
-webkit-text-fill-color: #f5f5f5 !important;
|
||||
}
|
||||
384
custom/otssignange/views/display-page.twig
Normal file
384
custom/otssignange/views/display-page.twig
Normal file
@@ -0,0 +1,384 @@
|
||||
{#
|
||||
/**
|
||||
* Copyright (C) 2023 Xibo Signage Ltd
|
||||
*
|
||||
* Xibo - Digital Signage - http://www.xibo.org.uk
|
||||
*
|
||||
* This file is part of Xibo.
|
||||
*
|
||||
* Xibo is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* any later version.
|
||||
*
|
||||
* Xibo is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with Xibo. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
#}
|
||||
{% extends "authed.twig" %}
|
||||
{% import "inline.twig" as inline %}
|
||||
|
||||
{% block title %}{{ "Displays"|trans }} | {% endblock %}
|
||||
|
||||
{% block actionMenu %}
|
||||
<div class="widget-action-menu pull-right">
|
||||
{% if currentUser.featureEnabled("displays.add") %}
|
||||
<button class="btn btn-success XiboFormButton" title="{% trans "Add a Display via user_code displayed on the Player screen" %}" href="{{ url_for("display.addViaCode.form") }}"> <i class="fa fa-plus-circle" aria-hidden="true"></i> {% trans "Add Display (Code)" %}</button>
|
||||
{% endif %}
|
||||
<button class="btn btn-primary" id="refreshGrid" title="{% trans "Refresh the Table" %}" href="#"><i class="fa fa-refresh" aria-hidden="true"></i></button>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block headContent %}
|
||||
{# Add page source code bundle ( CSS ) #}
|
||||
<link rel="stylesheet" href="{{ theme.rootUri() }}dist/pages/display-page.bundle.min.css?v={{ version }}&rev={{revision }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block pageContent %}
|
||||
<div class="ots-displays-page">
|
||||
<div class="page-header ots-page-header">
|
||||
<h1>{% trans "Displays" %}</h1>
|
||||
<p class="text-muted">{% trans "Manage your player fleet and status." %}</p>
|
||||
</div>
|
||||
|
||||
<div class="widget dashboard-card ots-displays-card">
|
||||
<div class="widget-title ots-displays-title">{% trans "Displays" %}</div>
|
||||
<div class="widget-body ots-displays-body">
|
||||
<div class="XiboGrid" id="{{ random() }}" data-grid-name="displayView">
|
||||
<div class="XiboFilter card mb-3 bg-light dashboard-card ots-filter-card">
|
||||
<div class="ots-filter-header">
|
||||
<h3 class="ots-filter-title">{% trans "Filter Displays" %}</h3>
|
||||
<button type="button" class="ots-filter-toggle" id="ots-filter-collapse-btn" title="{% trans 'Toggle filter panel' %}">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="ots-filter-content" id="ots-filter-content">
|
||||
<div class="FilterDiv card-body" id="Filter">
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<li class="nav-item"><a class="nav-link active" href="#filter-general" role="tab" data-toggle="tab">{% trans "General" %}</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#filter-advanced" role="tab" data-toggle="tab">{% trans "Advanced" %}</a></li>
|
||||
</ul>
|
||||
<form class="form-inline">
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="filter-general">
|
||||
{% set title %}{% trans "ID" %}{% endset %}
|
||||
{{ inline.number("displayId", title) }}
|
||||
|
||||
{% set title %}{% trans "Name" %}{% endset %}
|
||||
{{ inline.inputNameGrid('display', title) }}
|
||||
|
||||
{% set title %}{% trans "Status" %}{% endset %}
|
||||
{% set check %}{% trans "Up to date" %}{% endset %}
|
||||
{% set cross %}{% trans "Downloading" %}{% endset %}
|
||||
{% set cloud %}{% trans "Out of date" %}{% endset %}
|
||||
{% set options = [
|
||||
{ optionid: "", option: "" },
|
||||
{ optionid: "1", option: check},
|
||||
{ optionid: "2", option: cross},
|
||||
{ optionid: "3", option: cloud}
|
||||
] %}
|
||||
{{ inline.dropdown("mediaInventoryStatus", "single", title, "", options, "optionid", "option") }}
|
||||
|
||||
{% set title %}{% trans "Logged In?" %}{% endset %}
|
||||
{% set yesOption %}{% trans "Yes" %}{% endset %}
|
||||
{% set noOption %}{% trans "No" %}{% endset %}
|
||||
{% set options = [
|
||||
{ optionid: "", option: "" },
|
||||
{ optionid: "1", option: yesOption},
|
||||
{ optionid: "0", option: noOption}
|
||||
] %}
|
||||
{{ inline.dropdown("loggedIn", "single", title, "", options, "optionid", "option") }}
|
||||
|
||||
{% set title %}{% trans "Authorised?" %}{% endset %}
|
||||
{% set yesOption %}{% trans "Yes" %}{% endset %}
|
||||
{% set noOption %}{% trans "No" %}{% endset %}
|
||||
{% set options = [
|
||||
{ optionid: "", option: "" },
|
||||
{ optionid: "1", option: yesOption },
|
||||
{ optionid: "0", option: noOption},
|
||||
] %}
|
||||
{{ inline.dropdown("authorised", "single", title, "", options, "optionid", "option") }}
|
||||
|
||||
{% set title %}{% trans "XMR Registered?" %}{% endset %}
|
||||
{% set yesOption %}{% trans "Yes" %}{% endset %}
|
||||
{% set noOption %}{% trans "No" %}{% endset %}
|
||||
{% set options = [
|
||||
{ optionid: "", option: "" },
|
||||
{ optionid: 1, option: yesOption},
|
||||
{ optionid: 0, option: noOption},
|
||||
] %}
|
||||
{{ inline.dropdown("xmrRegistered", "single", title, "", options, "optionid", "option") }}
|
||||
|
||||
{% if currentUser.featureEnabled("tag.tagging") %}
|
||||
{% set title %}{% trans "Tags" %}{% endset %}
|
||||
{% set exactTagTitle %}{% trans "Exact match?" %}{% endset %}
|
||||
{% set logicalOperatorTitle %}{% trans "When filtering by multiple Tags, which logical operator should be used?" %}{% endset %}
|
||||
{% set helpText %}{% trans "A comma separated list of tags to filter by. Enter a tag|tag value to filter tags with values. Enter --no-tag to filter all items without tags. Enter - before a tag or tag value to exclude from results." %}{% endset %}
|
||||
{{ inline.inputWithTags("tags", title, null, helpText, null, null, null, "exactTags", exactTagTitle, logicalOperatorTitle) }}
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("displaygroup.view") %}
|
||||
{% set title %}{% trans "Display Group" %}{% endset %}
|
||||
{% set attributes = [
|
||||
{ name: "data-width", value: "200px" },
|
||||
{ name: "data-allow-clear", value: "true" },
|
||||
{ name: "data-placeholder--id", value: null },
|
||||
{ name: "data-placeholder--value", value: "" },
|
||||
{ name: "data-search-url", value: url_for("displayGroup.search") },
|
||||
{ name: "data-filter-options", value: '{"isDisplaySpecific":0}' },
|
||||
{ name: "data-search-term", value: "displayGroup" },
|
||||
{ name: "data-id-property", value: "displayGroupId" },
|
||||
{ name: "data-text-property", value: "displayGroup" },
|
||||
{ name: "data-initial-key", value: "displayGroupId" },
|
||||
] %}
|
||||
{{ inline.dropdown("displayGroupId", "single", title, "", null, "displayGroupId", "displayGroup", helpText, "pagedSelect", "", "", "", attributes) }}
|
||||
{% endif %}
|
||||
|
||||
{% if currentUser.featureEnabled("displayprofile.view") %}
|
||||
{% set title %}{% trans "Display Profile" %}{% endset %}
|
||||
{{ inline.dropdown("displayProfileId", "single", title, "", [{displayProfileId:null, name:""}]|merge(displayProfiles), "displayProfileId", "name") }}
|
||||
{% endif %}
|
||||
|
||||
{{ inline.hidden("folderId") }}
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="filter-advanced">
|
||||
{% set title %}{% trans "Last Accessed" %}{% endset %}
|
||||
{{ inline.date("lastAccessed", title) }}
|
||||
|
||||
{% set title %}{% trans "Player Type" %}{% endset %}
|
||||
{% set android %}{% trans "Android" %}{% endset %}
|
||||
{% set chromeos %}{% trans "ChromeOS" %}{% endset %}
|
||||
{% set windows %}{% trans "Windows" %}{% endset %}
|
||||
{% set webos %}{% trans "webOS" %}{% endset %}
|
||||
{% set sssp %}{% trans "Tizen" %}{% endset %}
|
||||
{% set linux %}{% trans "Linux" %}{% endset %}
|
||||
{% set options = [
|
||||
{ optionid: "", option: "" },
|
||||
{ optionid: "android", option: android},
|
||||
{ optionid: "chromeos", option: chromeos},
|
||||
{ optionid: "windows", option: windows},
|
||||
{ optionid: "lg", option: webos},
|
||||
{ optionid: "sssp", option: sssp},
|
||||
{ optionid: "linux", option: linux},
|
||||
] %}
|
||||
{{ inline.dropdown("clientType", "single", title, "", options, "optionid", "option") }}
|
||||
|
||||
{% set title %}{% trans "Player Code" %}{% endset %}
|
||||
{{ inline.input("clientCode", title) }}
|
||||
|
||||
{% set title %}{% trans "Custom ID" %}{% endset %}
|
||||
{{ inline.input("customId", title) }}
|
||||
|
||||
{% set title %}{% trans "Mac Address" %}{% endset %}
|
||||
{{ inline.input("macAddress", title) }}
|
||||
|
||||
{% set title %}{% trans "IP Address" %}{% endset %}
|
||||
{{ inline.input("clientAddress", title) }}
|
||||
|
||||
{% set title %}{% trans "Orientation" %}{% endset %}
|
||||
{% set landscape %}{% trans "Landscape" %}{% endset %}
|
||||
{% set portrait %}{% trans "Portrait" %}{% endset %}
|
||||
{% set options = [
|
||||
{ optionid: "", option: "" },
|
||||
{ optionid: "landscape", option: landscape},
|
||||
{ optionid: "portrait", option: portrait}
|
||||
] %}
|
||||
{{ inline.dropdown("orientation", "single", title, "", options, "optionid", "option") }}
|
||||
|
||||
{% set title %}{% trans "Commercial Licence" %}{% endset %}
|
||||
{% set licensed %}{% trans "Licensed fully" %}{% endset %}
|
||||
{% set trial %}{% trans "Trial" %}{% endset %}
|
||||
{% set notLinceced %}{% trans "Not licenced" %}{% endset %}
|
||||
{% set notApplicable %}{% trans "Not applicable" %}{% endset %}
|
||||
{% set options = [
|
||||
{ optionid: "", option: "" },
|
||||
{ optionid: "1", option: licensed},
|
||||
{ optionid: "2", option: trial},
|
||||
{ optionid: "0", option: notLinceced},
|
||||
{ optionid: "3", option: notApplicable}
|
||||
] %}
|
||||
{{ inline.dropdown("commercialLicence", "single", title, "", options, "optionid", "option") }}
|
||||
|
||||
{% set title %}{% trans "Player supported?" %}{% endset %}
|
||||
{% set yesOption %}{% trans "Yes" %}{% endset %}
|
||||
{% set noOption %}{% trans "No" %}{% endset %}
|
||||
{% set options = [
|
||||
{ optionid: "", option: "" },
|
||||
{ optionid: 1, option: yesOption},
|
||||
{ optionid: 0, option: noOption},
|
||||
] %}
|
||||
{{ inline.dropdown("isPlayerSupported", "single", title, "", options, "optionid", "option") }}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid-with-folders-container ots-grid-with-folders">
|
||||
<div class="grid-folder-tree-container p-3 dashboard-card ots-folder-tree" id="grid-folder-filter">
|
||||
<input id="jstree-search" class="form-control" type="text" placeholder="{% trans "Search" %}">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" id="folder-tree-clear-selection-button">
|
||||
<label class="form-check-label" for="folder-tree-clear-selection-button" title="{% trans "Search in all folders" %}">{% trans "All Folders" %}</label>
|
||||
</div>
|
||||
<div class="folder-search-no-results d-none">
|
||||
<p>{% trans 'No Folders matching the search term' %}</p>
|
||||
</div>
|
||||
<div id="container-folder-tree"></div>
|
||||
</div>
|
||||
<div class="folder-controller d-none ots-grid-controller">
|
||||
<button type="button" id="folder-tree-select-folder-button" class="btn btn-outline-secondary" title="{{ "Open / Close Folder Search options"|trans }}"><i class="fas fa-folder fa-1x"></i></button>
|
||||
<div id="breadcrumbs" class="mt-2 pl-2"></div>
|
||||
</div>
|
||||
<div class="map-controller d-none pl-1 ots-grid-controller">
|
||||
<button type="button" id="map_button" class="btn btn-primary" title="{{ "Map"|trans }}"><i class="fa fa-map"></i></button>
|
||||
</div>
|
||||
<div class="list-controller d-none pl-1 ots-grid-controller">
|
||||
<button type="button" id="list_button" class="btn btn-primary" title="{{ "List"|trans }}"><i class="fa fa-list"></i></button>
|
||||
</div>
|
||||
|
||||
<div id="datatable-container">
|
||||
<div class="XiboData card py-3 dashboard-card ots-table-card">
|
||||
<table id="displays" class="table table-striped" data-content-type="display" data-content-id-name="displayId" data-state-preference-name="displayGrid" style="width: 100%;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{% trans "ID" %}</th>
|
||||
<th>{% trans "Display" %}</th>
|
||||
<th>{% trans "Display Type" %}</th>
|
||||
<th>{% trans "Address" %}</th>
|
||||
<th>{% trans "Status" %}</th>
|
||||
<th>{% trans "Authorised?" %}</th>
|
||||
<th>{% trans "Current Layout" %}</th>
|
||||
<th>{% trans "Storage Available" %}</th>
|
||||
<th>{% trans "Storage Total" %}</th>
|
||||
<th>{% trans "Storage Free %" %}</th>
|
||||
<th>{% trans "Description" %}</th>
|
||||
<th>{% trans "Orientation" %}</th>
|
||||
<th>{% trans "Resolution" %}</th>
|
||||
{% if currentUser.featureEnabled("tag.tagging") %}<th>{% trans "Tags" %}</th>{% endif %}
|
||||
<th>{% trans "Default Layout" %}</th>
|
||||
<th>{% trans "Interleave Default" %}</th>
|
||||
<th>{% trans "Email Alert" %}</th>
|
||||
<th>{% trans "Logged In" %}</th>
|
||||
<th>{% trans "Last Accessed" %}</th>
|
||||
<th>{% trans "Display Profile" %}</th>
|
||||
<th>{% trans "Version" %}</th>
|
||||
<th>{% trans "Supported?" %}</th>
|
||||
<th>{% trans "Device Name" %}</th>
|
||||
<th>{% trans "IP Address" %}</th>
|
||||
<th>{% trans "Mac Address" %}</th>
|
||||
<th>{% trans "Timezone" %}</th>
|
||||
<th>{% trans "Languages" %}</th>
|
||||
<th>{% trans "Latitude" %}</th>
|
||||
<th>{% trans "Longitude" %}</th>
|
||||
<th>{% trans "Screen shot?" %}</th>
|
||||
<th>{% trans "Thumbnail" %}</th>
|
||||
<th>{% trans "CMS Transfer?" %}</th>
|
||||
<th>{% trans "Bandwidth Limit" %}</th>
|
||||
<th>{% trans "Last Command" %}</th>
|
||||
<th>{% trans "XMR Registered" %}</th>
|
||||
<th>{% trans "Commercial Licence" %}</th>
|
||||
<th>{% trans "Remote" %}</th>
|
||||
<th>{% trans "Sharing" %}</th>
|
||||
<th>{% trans "Screen Size" %}</th>
|
||||
<th>{% trans "Is Mobile?" %}</th>
|
||||
<th>{% trans "Outdoor?" %}</th>
|
||||
<th>{% trans "Reference 1" %}</th>
|
||||
<th>{% trans "Reference 2" %}</th>
|
||||
<th>{% trans "Reference 3" %}</th>
|
||||
<th>{% trans "Reference 4" %}</th>
|
||||
<th>{% trans "Reference 5" %}</th>
|
||||
<th>{% trans "Custom ID" %}</th>
|
||||
<th>{% trans "Cost Per Play" %}</th>
|
||||
<th>{% trans "Impressions Per Play" %}</th>
|
||||
<th>{% trans "Created Date" %}</th>
|
||||
<th>{% trans "Modified Date" %}</th>
|
||||
<th>{% trans "Faults?" %}</th>
|
||||
<th>{% trans "OS Version" %}</th>
|
||||
<th>{% trans "OS SDK" %}</th>
|
||||
<th>{% trans "Manufacturer" %}</th>
|
||||
<th>{% trans "Brand" %}</th>
|
||||
<th>{% trans "Model" %}</th>
|
||||
<th class="rowMenu"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Map -->
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="map-legend" style="display:none; position: absolute; z-index: 500; right: 20px; top: 10px;">
|
||||
<div class="display-map-legend" style="font-size: 12px;">
|
||||
<div>Logged in</div>
|
||||
<div><img style="width: 15%" src='{{ theme.rootUri() }}dist/assets/map-marker-green-check.png'/> - Up to date</div>
|
||||
<div><img style="width: 15%" src='{{ theme.rootUri() }}dist/assets/map-marker-yellow-check.png'/> - Out of date</div>
|
||||
<div><img style="width: 15%" src='{{ theme.rootUri() }}dist/assets/map-marker-red-check.png'/> - Downloading/Unknown</div>
|
||||
</br>
|
||||
<div>Logged out</div>
|
||||
<div><img style="width: 15%" src='{{ theme.rootUri() }}dist/assets/map-marker-green-cross.png'/> - Up to date</div>
|
||||
<div><img style="width: 15%" src='{{ theme.rootUri() }}dist/assets/map-marker-yellow-cross.png'/> - Out of date</div>
|
||||
<div><img style="width: 15%" src='{{ theme.rootUri() }}dist/assets/map-marker-red-cross.png'/> - Downloading/Unknown</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="display-map" class="dashboard-card ots-map-card" data-displays-url="{{ url_for("display.map") }}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block javaScript %}
|
||||
{# Initialise JS variables and translations #}
|
||||
<script type="text/javascript" nonce="{{ cspNonce }}" defer>
|
||||
{# JS variables #}
|
||||
var publicPath = "{{ theme.rootUri() }}";
|
||||
var displaySearchURL = "{{ url_for('display.search') }}";
|
||||
var layoutSearchURL = "{{ url_for('layout.search') }}";
|
||||
var mapConfig = {{ mapConfig| json_encode | raw }};
|
||||
var playerVersionSupport = "{{playerVersion}}";
|
||||
var folderViewEnabled = "{{ currentUser.featureEnabled('folder.view') }}";
|
||||
var taggingEnabled = "{{ currentUser.featureEnabled('tag.tagging') }}";
|
||||
var showThumbnailColumn = "{{ currentUser.getOptionValue('showThumbnailColumn', 1) }}";
|
||||
var SHOW_DISPLAY_AS_VNCLINK = "{{ settings.SHOW_DISPLAY_AS_VNCLINK }}";
|
||||
var SHOW_DISPLAY_AS_VNC_TGT = "{{ settings.SHOW_DISPLAY_AS_VNC_TGT }}";
|
||||
|
||||
{# Custom translations #}
|
||||
var displayPageTrans = {
|
||||
back: "{% trans "Back" %}",
|
||||
yes: "{% trans "Yes" %}",
|
||||
no: "{% trans "No" %}",
|
||||
daysOfTheWeek: {
|
||||
monday: "{% trans "Monday" %}",
|
||||
tuesday: "{% trans "Tuesday" %}",
|
||||
wednesday: "{% trans "Wednesday" %}",
|
||||
thursday: "{% trans "Thursday" %}",
|
||||
friday: "{% trans "Friday" %}",
|
||||
saturday: "{% trans "Saturday" %}",
|
||||
sunday: "{% trans "Sunday" %}",
|
||||
},
|
||||
playerStatusWindow: "{% trans "Player Status Window" %}",
|
||||
VNCtoThisDisplay: "{% trans "VNC to this Display" %}",
|
||||
TeamViewertoThisDisplay: "{% trans "TeamViewer to this Display" %}",
|
||||
WebkeytoThisDisplay: "{% trans "Webkey to this Display" %}",
|
||||
};
|
||||
</script>
|
||||
|
||||
{# Add page source code bundle ( JS ) #}
|
||||
<script src="{{ theme.rootUri() }}dist/leaflet.bundle.min.js?v={{ version }}&rev={{revision}}" nonce="{{ cspNonce }}"></script>
|
||||
<script src="{{ theme.rootUri() }}dist/pages/display-page.bundle.min.js?v={{ version }}&rev={{revision}}" nonce="{{ cspNonce }}"></script>
|
||||
{% endblock %}
|
||||
@@ -1,124 +0,0 @@
|
||||
{#
|
||||
OTS Signage Modern Theme - Displays Page Override
|
||||
Two-column layout with folder panel on left, modern display table
|
||||
#}
|
||||
{% extends "authed.twig" %}
|
||||
|
||||
{% block pageTitle %}Displays{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="ots-theme two-column-layout">
|
||||
<aside class="left-panel displays-sidebar">
|
||||
<div class="panel-header">
|
||||
<h3>Folders</h3>
|
||||
<button class="btn-icon-sm" aria-label="Expand/collapse">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="12 3 20 9 12 15 4 9 12 3"/><polyline points="4 15 12 21 20 15"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="folder-tree">
|
||||
<div class="folder-item active">
|
||||
<svg class="folder-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
|
||||
</svg>
|
||||
<span class="folder-name">All Items</span>
|
||||
</div>
|
||||
<div class="folder-item">
|
||||
<svg class="folder-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
|
||||
</svg>
|
||||
<span class="folder-name">Root Folder</span>
|
||||
</div>
|
||||
<div class="folder-item">
|
||||
<svg class="folder-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
|
||||
</svg>
|
||||
<span class="folder-name">TEMPLATE_DemoHolder</span>
|
||||
</div>
|
||||
<div class="folder-item" style="margin-left: 16px;">
|
||||
<svg class="folder-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
|
||||
</svg>
|
||||
<span class="folder-name">Hospitality</span>
|
||||
</div>
|
||||
<div class="folder-item" style="margin-left: 16px;">
|
||||
<svg class="folder-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
|
||||
</svg>
|
||||
<span class="folder-name">Retail</span>
|
||||
</div>
|
||||
<div class="folder-item">
|
||||
<svg class="folder-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
|
||||
</svg>
|
||||
<span class="folder-name">OTS Signs Internal</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="content-panel">
|
||||
<div class="page-header">
|
||||
<h1>Displays</h1>
|
||||
<p class="text-muted">Manage and monitor your digital signage displays</p>
|
||||
</div>
|
||||
|
||||
<div class="content-toolbar">
|
||||
<div class="search-wrapper">
|
||||
<svg class="search-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
|
||||
</svg>
|
||||
<input type="search" placeholder="Search displays…" class="form-control search-field" />
|
||||
</div>
|
||||
<div class="toolbar-actions">
|
||||
<button class="btn btn-outline btn-sm">Columns</button>
|
||||
<a href="{{ baseUrl }}/display/add" class="btn btn-primary btn-sm">Add Display</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-row">
|
||||
<div class="stat-box">
|
||||
<div class="stat-label">Total</div>
|
||||
<div class="stat-value">1</div>
|
||||
</div>
|
||||
<div class="stat-box">
|
||||
<div class="stat-label">Online</div>
|
||||
<div class="stat-value text-success">1</div>
|
||||
</div>
|
||||
<div class="stat-box">
|
||||
<div class="stat-label">Offline</div>
|
||||
<div class="stat-value text-danger">0</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-wrapper">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 25%;">Display</th>
|
||||
<th style="width: 15%;">Status</th>
|
||||
<th style="width: 20%;">Folder</th>
|
||||
<th style="width: 15%;">Group</th>
|
||||
<th style="width: 15%;">Last Check-in</th>
|
||||
<th style="width: 10%;">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Test1</strong></td>
|
||||
<td><span class="badge badge-success">Online</span></td>
|
||||
<td>TEMPLATE_DemoHolder</td>
|
||||
<td>Test Screens</td>
|
||||
<td><span class="text-xs">just now</span></td>
|
||||
<td>
|
||||
<button class="btn-icon-sm" aria-label="Actions">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -1,129 +0,0 @@
|
||||
{#
|
||||
OTS Signage Modern Theme - Media Library Page Override
|
||||
Two-column layout with folder panel on left, media grid on right
|
||||
#}
|
||||
{% extends "authed.twig" %}
|
||||
|
||||
{% block pageTitle %}Media Library{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="ots-theme two-column-layout">
|
||||
<aside class="left-panel media-sidebar">
|
||||
<div class="panel-header">
|
||||
<h3>Folders</h3>
|
||||
<button class="btn-icon-sm" aria-label="New folder">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="folder-tree">
|
||||
<div class="folder-item active">
|
||||
<svg class="folder-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
|
||||
</svg>
|
||||
<span class="folder-name">All Files</span>
|
||||
</div>
|
||||
<div class="folder-item">
|
||||
<svg class="folder-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
|
||||
</svg>
|
||||
<span class="folder-name">Root Folder</span>
|
||||
</div>
|
||||
<div class="folder-item">
|
||||
<svg class="folder-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>
|
||||
</svg>
|
||||
<span class="folder-name">Images</span>
|
||||
</div>
|
||||
<div class="folder-item">
|
||||
<svg class="folder-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
|
||||
</svg>
|
||||
<span class="folder-name">Videos</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="content-panel">
|
||||
<div class="page-header">
|
||||
<h1>Media Library</h1>
|
||||
<p class="text-muted">Upload and manage your images and videos for digital signage</p>
|
||||
</div>
|
||||
|
||||
<div class="content-toolbar">
|
||||
<div class="search-wrapper">
|
||||
<svg class="search-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
|
||||
</svg>
|
||||
<input type="search" placeholder="Search media…" class="form-control search-field" />
|
||||
</div>
|
||||
<div class="toolbar-actions">
|
||||
<button class="btn btn-outline btn-sm">All Media</button>
|
||||
<a href="{{ baseUrl }}/library/add" class="btn btn-primary btn-sm">Upload Media</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-row">
|
||||
<div class="stat-box">
|
||||
<div class="stat-label">Total Files</div>
|
||||
<div class="stat-value">4</div>
|
||||
</div>
|
||||
<div class="stat-box">
|
||||
<div class="stat-label">Storage Used</div>
|
||||
<div class="stat-value">12.3 MB</div>
|
||||
</div>
|
||||
<div class="stat-box">
|
||||
<div class="stat-label">Storage Limit</div>
|
||||
<div class="stat-value">5 GB</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="media-grid">
|
||||
<div class="media-item">
|
||||
<div class="media-thumbnail">
|
||||
<img src="https://images.unsplash.com/photo-1444080748397-f442aa95c3e5?w=400&h=300&fit=crop" alt="Galaxy space" />
|
||||
<span class="media-type-badge">Image</span>
|
||||
</div>
|
||||
<div class="media-info">
|
||||
<p class="media-name">2000x1158</p>
|
||||
<p class="media-size text-xs text-muted">3.3 MB • 1920x1112</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="media-item">
|
||||
<div class="media-thumbnail">
|
||||
<img src="https://images.unsplash.com/photo-1478098711619-69891b0ec21a?w=400&h=300&fit=crop" alt="Cat portrait" />
|
||||
<span class="media-type-badge">Image</span>
|
||||
</div>
|
||||
<div class="media-info">
|
||||
<p class="media-name">Images.jpg</p>
|
||||
<p class="media-size text-xs text-muted">5.2 KB • 194x260</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="media-item">
|
||||
<div class="media-thumbnail">
|
||||
<img src="https://images.unsplash.com/photo-1577720643272-265b434c829c?w=400&h=300&fit=crop" alt="OTS Logo" />
|
||||
<span class="media-type-badge">Image</span>
|
||||
</div>
|
||||
<div class="media-info">
|
||||
<p class="media-name">OTS Logo</p>
|
||||
<p class="media-size text-xs text-muted">2.9 KB • 360x350</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="media-item">
|
||||
<div class="media-thumbnail">
|
||||
<img src="https://images.unsplash.com/photo-1590080876-8b7f22b5d5fa?w=400&h=300&fit=crop" alt="Sunrise Hotel" />
|
||||
<span class="media-type-badge">Image</span>
|
||||
</div>
|
||||
<div class="media-info">
|
||||
<p class="media-name">suncrest hotel l...</p>
|
||||
<p class="media-size text-xs text-muted">4.1 KB • 5824x3401</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
{% endblock %}
|
||||
3117
custom/otssignange/views/override-styles.twig
Normal file
3117
custom/otssignange/views/override-styles.twig
Normal file
File diff suppressed because it is too large
Load Diff
8
custom/otssignange/views/theme-dashboard-message.twig
Normal file
8
custom/otssignange/views/theme-dashboard-message.twig
Normal file
@@ -0,0 +1,8 @@
|
||||
{#
|
||||
OTS Signage Theme override
|
||||
Optional dashboard message block included with ignore missing
|
||||
#}
|
||||
<div class="ots-dashboard-message">
|
||||
<div class="ots-dashboard-message__title">OTS Theme Active</div>
|
||||
<div class="ots-dashboard-message__body">This is a low-risk override for troubleshooting. Remove or restyle at any time.</div>
|
||||
</div>
|
||||
22
custom/otssignange/views/theme-javascript.twig
Normal file
22
custom/otssignange/views/theme-javascript.twig
Normal file
@@ -0,0 +1,22 @@
|
||||
{#
|
||||
OTS Signage Theme - JavaScript and CSS injection
|
||||
This file is auto-included by Xibo's base.twig at the end of the document
|
||||
|
||||
NOTE: CSS and JS are INLINED to bypass web server MIME type issues with /custom/ paths
|
||||
This ensures all styles and scripts load regardless of web server routing configuration
|
||||
#}
|
||||
|
||||
<!-- Theme CSS overrides - INLINED to bypass MIME type issues -->
|
||||
<style nonce="{{ cspNonce }}">
|
||||
{% include "override-styles.twig" %}
|
||||
</style>
|
||||
|
||||
<!-- DataTables contrast fixes - INLINED to override core DataTables defaults -->
|
||||
<style nonce="{{ cspNonce }}">
|
||||
{% include "datatable-contrast.twig" %}
|
||||
</style>
|
||||
|
||||
<!-- Theme JavaScript - INLINED to bypass MIME type issues -->
|
||||
<script nonce="{{ cspNonce }}">
|
||||
{% include "theme-scripts.twig" %}
|
||||
</script>
|
||||
368
custom/otssignange/views/theme-scripts.twig
Normal file
368
custom/otssignange/views/theme-scripts.twig
Normal file
@@ -0,0 +1,368 @@
|
||||
/**
|
||||
* OTS Signage Modern Theme - Client-Side Utilities
|
||||
* Sidebar toggle, dropdown menus, and UI interactions
|
||||
*/
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
const STORAGE_KEYS = {
|
||||
sidebarCollapsed: 'otsTheme:sidebarCollapsed'
|
||||
};
|
||||
|
||||
/**
|
||||
* Initialize sidebar toggle functionality
|
||||
*/
|
||||
function initSidebarToggle() {
|
||||
const toggleBtn = document.querySelector('[data-action="toggle-sidebar"]');
|
||||
const sidebar = document.querySelector('.ots-sidebar');
|
||||
|
||||
if (!toggleBtn || !sidebar) return;
|
||||
|
||||
toggleBtn.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
sidebar.classList.toggle('active');
|
||||
});
|
||||
|
||||
// Close sidebar when clicking outside on mobile
|
||||
document.addEventListener('click', function(e) {
|
||||
if (window.innerWidth <= 768) {
|
||||
const isClickInsideSidebar = sidebar.contains(e.target);
|
||||
const isClickOnToggle = toggleBtn.contains(e.target);
|
||||
|
||||
if (!isClickInsideSidebar && !isClickOnToggle && sidebar.classList.contains('active')) {
|
||||
sidebar.classList.remove('active');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize dropdown menus
|
||||
*/
|
||||
function initDropdowns() {
|
||||
const dropdowns = document.querySelectorAll('.dropdown');
|
||||
|
||||
dropdowns.forEach(dropdown => {
|
||||
const button = dropdown.querySelector('.dropdown-menu');
|
||||
|
||||
if (!button) return;
|
||||
|
||||
const menu = dropdown.querySelector('.dropdown-menu');
|
||||
|
||||
// Toggle menu on button click
|
||||
dropdown.addEventListener('click', function(e) {
|
||||
if (e.target.closest('.user-btn') || e.target.closest('[aria-label="User menu"]')) {
|
||||
e.preventDefault();
|
||||
dropdown.classList.toggle('active');
|
||||
}
|
||||
});
|
||||
|
||||
// Close menu when clicking outside
|
||||
document.addEventListener('click', function(e) {
|
||||
if (!dropdown.contains(e.target)) {
|
||||
dropdown.classList.remove('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize search functionality
|
||||
*/
|
||||
function initSearch() {
|
||||
const searchForm = document.querySelector('.topbar-search');
|
||||
if (!searchForm) return;
|
||||
|
||||
const input = searchForm.querySelector('.search-input');
|
||||
if (input) {
|
||||
input.addEventListener('focus', function() {
|
||||
searchForm.style.borderColor = 'var(--color-primary)';
|
||||
});
|
||||
input.addEventListener('blur', function() {
|
||||
searchForm.style.borderColor = 'var(--color-border)';
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize page specific interactions
|
||||
*/
|
||||
function initPageInteractions() {
|
||||
// Displays page - folder selection
|
||||
const folderItems = document.querySelectorAll('.folder-item');
|
||||
folderItems.forEach(item => {
|
||||
item.addEventListener('click', function() {
|
||||
folderItems.forEach(f => f.classList.remove('active'));
|
||||
this.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
// Filter collapse toggle
|
||||
const filterCollapseBtn = document.querySelector('#ots-filter-collapse-btn');
|
||||
const filterContent = document.querySelector('#ots-filter-content');
|
||||
|
||||
if (filterCollapseBtn && filterContent) {
|
||||
let isCollapsed = false;
|
||||
|
||||
filterCollapseBtn.addEventListener('click', function() {
|
||||
isCollapsed = !isCollapsed;
|
||||
filterContent.classList.toggle('collapsed', isCollapsed);
|
||||
|
||||
// Rotate icon
|
||||
const icon = filterCollapseBtn.querySelector('i');
|
||||
icon.classList.toggle('fa-chevron-up');
|
||||
icon.classList.toggle('fa-chevron-down');
|
||||
|
||||
// Save preference to localStorage
|
||||
localStorage.setItem('ots-filter-collapsed', isCollapsed);
|
||||
});
|
||||
|
||||
// Restore saved preference
|
||||
const savedState = localStorage.getItem('ots-filter-collapsed');
|
||||
if (savedState === 'true') {
|
||||
isCollapsed = true;
|
||||
filterContent.classList.add('collapsed');
|
||||
const icon = filterCollapseBtn.querySelector('i');
|
||||
icon.classList.remove('fa-chevron-up');
|
||||
icon.classList.add('fa-chevron-down');
|
||||
}
|
||||
}
|
||||
|
||||
// Displays page - folder tree toggle layout
|
||||
const folderToggleBtn = document.querySelector('#folder-tree-select-folder-button');
|
||||
const folderContainer = document.querySelector('.grid-with-folders-container');
|
||||
const folderTree = document.querySelector('#grid-folder-filter');
|
||||
|
||||
if (folderToggleBtn && folderContainer && folderTree) {
|
||||
let debounceTimeout;
|
||||
|
||||
const syncFolderLayout = () => {
|
||||
// Check actual visibility using computed styles
|
||||
const computedStyle = window.getComputedStyle(folderTree);
|
||||
const isHidden = computedStyle.display === 'none' ||
|
||||
computedStyle.visibility === 'hidden' ||
|
||||
folderTree.offsetHeight === 0;
|
||||
|
||||
console.log('Folder collapse sync:', {
|
||||
isHidden,
|
||||
display: computedStyle.display,
|
||||
visibility: computedStyle.visibility,
|
||||
offsetHeight: folderTree.offsetHeight
|
||||
});
|
||||
|
||||
folderContainer.classList.toggle('ots-folder-collapsed', !!isHidden);
|
||||
|
||||
// Log the result
|
||||
console.log('Container classes:', folderContainer.className);
|
||||
console.log('Grid template columns:', window.getComputedStyle(folderContainer).gridTemplateColumns);
|
||||
|
||||
// Force reflow
|
||||
folderContainer.offsetHeight;
|
||||
};
|
||||
|
||||
const debouncedSync = () => {
|
||||
clearTimeout(debounceTimeout);
|
||||
debounceTimeout = setTimeout(syncFolderLayout, 50);
|
||||
};
|
||||
|
||||
// Watch for style/class changes on folderTree (let Xibo's code run first)
|
||||
const treeObserver = new MutationObserver(() => {
|
||||
console.log('Folder tree mutation detected, debouncing sync...');
|
||||
debouncedSync();
|
||||
});
|
||||
treeObserver.observe(folderTree, {
|
||||
attributes: true,
|
||||
attributeFilter: ['style', 'class']
|
||||
});
|
||||
|
||||
// Initial sync
|
||||
syncFolderLayout();
|
||||
|
||||
// Monitor the folder tree's parent for display changes
|
||||
const parentObserver = new MutationObserver(debouncedSync);
|
||||
const treeParent = folderTree.parentElement;
|
||||
if (treeParent) {
|
||||
parentObserver.observe(treeParent, {
|
||||
childList: false,
|
||||
attributes: true,
|
||||
subtree: false
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Media page - item selection
|
||||
const mediaItems = document.querySelectorAll('.media-item');
|
||||
mediaItems.forEach(item => {
|
||||
item.addEventListener('click', function() {
|
||||
this.style.opacity = '0.7';
|
||||
setTimeout(() => this.style.opacity = '1', 200);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Make sidebar responsive
|
||||
*/
|
||||
function makeResponsive() {
|
||||
const sidebar = document.querySelector('.ots-sidebar');
|
||||
const main = document.querySelector('.ots-main');
|
||||
|
||||
if (!sidebar) return;
|
||||
|
||||
// Add toggle button for mobile
|
||||
if (window.innerWidth <= 768) {
|
||||
sidebar.classList.add('mobile');
|
||||
}
|
||||
|
||||
window.addEventListener('resize', function() {
|
||||
if (window.innerWidth > 768) {
|
||||
sidebar.classList.remove('mobile', 'active');
|
||||
} else {
|
||||
sidebar.classList.add('mobile');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent Chart.js errors when chart elements are missing
|
||||
*/
|
||||
function initChartSafeguard() {
|
||||
if (!window.Chart) return;
|
||||
|
||||
if (typeof window.Chart.acquireContext === 'function') {
|
||||
window.Chart.acquireContext = function(item) {
|
||||
if (!item) return null;
|
||||
|
||||
const candidate = item.length ? item[0] : item;
|
||||
if (candidate && typeof candidate.getContext === 'function') {
|
||||
return candidate.getContext('2d');
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
return;
|
||||
}
|
||||
|
||||
if (window.Chart.prototype && typeof window.Chart.prototype.acquireContext === 'function') {
|
||||
window.Chart.prototype.acquireContext = function(item) {
|
||||
if (!item) return null;
|
||||
|
||||
const candidate = item.length ? item[0] : item;
|
||||
if (candidate && typeof candidate.getContext === 'function') {
|
||||
return candidate.getContext('2d');
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Enhance tables: wrap in card, add per-table search box, client-side filtering
|
||||
* Non-destructive: skips tables already enhanced
|
||||
*/
|
||||
function enhanceTables() {
|
||||
const selector = '.ots-content table, .content table, .container table, .card table, table';
|
||||
const tables = Array.from(document.querySelectorAll(selector));
|
||||
let counter = 0;
|
||||
|
||||
tables.forEach(table => {
|
||||
// only enhance tables that have a thead and tbody
|
||||
if (!table || table.classList.contains('modern-table')) return;
|
||||
if (!table.querySelector('thead') || !table.querySelector('tbody')) return;
|
||||
|
||||
counter += 1;
|
||||
table.classList.add('modern-table');
|
||||
|
||||
// Build wrapper structure
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.className = 'modern-table-card';
|
||||
|
||||
const controls = document.createElement('div');
|
||||
controls.className = 'table-controls';
|
||||
|
||||
const input = document.createElement('input');
|
||||
input.type = 'search';
|
||||
input.placeholder = 'Search…';
|
||||
input.className = 'table-search-input';
|
||||
input.setAttribute('aria-label', 'Table search');
|
||||
input.style.minWidth = '180px';
|
||||
|
||||
controls.appendChild(input);
|
||||
|
||||
const tableWrapper = document.createElement('div');
|
||||
tableWrapper.className = 'table-wrapper';
|
||||
tableWrapper.style.overflow = 'auto';
|
||||
|
||||
// Insert wrapper into DOM in place of the table
|
||||
const parent = table.parentNode;
|
||||
parent.replaceChild(wrapper, table);
|
||||
wrapper.appendChild(controls);
|
||||
wrapper.appendChild(tableWrapper);
|
||||
tableWrapper.appendChild(table);
|
||||
|
||||
// Simple, light-weight search filtering for this table only
|
||||
input.addEventListener('input', function (e) {
|
||||
const term = (e.target.value || '').toLowerCase();
|
||||
table.querySelectorAll('tbody tr').forEach(tr => {
|
||||
const text = tr.textContent.toLowerCase();
|
||||
tr.style.display = term === '' || text.includes(term) ? '' : 'none';
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize DataTables for enhanced behavior when available.
|
||||
* Falls back gracefully if DataTables or jQuery are not present.
|
||||
*/
|
||||
function initDataTables() {
|
||||
if (!window.jQuery) return;
|
||||
const $ = window.jQuery;
|
||||
if (!$.fn || !$.fn.dataTable) return;
|
||||
|
||||
// Skip Xibo-managed grids to avoid double initialization
|
||||
if (document.querySelector('.XiboGrid')) return;
|
||||
|
||||
$('.modern-table, table').each(function () {
|
||||
try {
|
||||
if (this.closest('.XiboGrid')) return;
|
||||
if (!$.fn.dataTable.isDataTable(this)) {
|
||||
$(this).DataTable({
|
||||
responsive: true,
|
||||
lengthChange: false,
|
||||
pageLength: 10,
|
||||
autoWidth: false,
|
||||
dom: '<"table-controls"f>rt<"table-meta"ip>',
|
||||
language: { search: '' }
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
// If initialization fails, ignore and allow fallback enhancer
|
||||
console.warn('DataTables init failed for table', this, err);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize all features when DOM is ready
|
||||
*/
|
||||
function init() {
|
||||
initSidebarToggle();
|
||||
initDropdowns();
|
||||
initSearch();
|
||||
initPageInteractions();
|
||||
initDataTables();
|
||||
enhanceTables();
|
||||
makeResponsive();
|
||||
initChartSafeguard();
|
||||
}
|
||||
|
||||
// Wait for DOM to be ready
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
})();
|
||||
Reference in New Issue
Block a user