ENH: implement the themes switcher logic

This commit is contained in:
Sammy Ndabo 2024-12-21 20:33:19 +02:00
parent 749d01cd77
commit 295afbc82d

View File

@ -597,6 +597,7 @@
<a href=# onclick="return account_showDeleteAccount()">Delete account</a><br />
</span>
<span id="accountCreateLoginTokenSpan" style="display:none"><a href=# onclick="return account_createLoginToken()">Create login token</a><br /></span>
<a href=# onclick="return account_showThemesSwitcher()">Switch theme</a><br />
</p>
<br style=clear:both />
</div>
@ -14183,6 +14184,86 @@
}
}
function account_showThemesSwitcher() {
if (xxdialogMode) return false;
var themes = [
{ value: "default", label: "Default" },
{ value: "cerulean", label: "Cerulean" },
{ value: "cosmo", label: "Cosmo" },
{ value: "cyborg", label: "Cyborg" },
{ value: "darkly", label: "Darkly" },
{ value: "flatly", label: "Flatly" },
{ value: "journal", label: "Journal" },
{ value: "litera", label: "Litera" },
{ value: "lumen", label: "Lumen" },
{ value: "lux", label: "Lux" },
{ value: "materia", label: "Materia" },
{ value: "minty", label: "Minty" },
{ value: "morph", label: "Morph" },
{ value: "pulse", label: "Pulse" },
{ value: "sandstone", label: "Sandstone" },
{ value: "simplex", label: "Simplex" },
{ value: "sketchy", label: "Sketchy" },
{ value: "solar", label: "Solar" },
{ value: "spacelab", label: "Spacelab" },
{ value: "united", label: "United" },
{ value: "vapor", label: "Vapor" },
{ value: "yeti", label: "Yeti" },
{ value: "zephyr", label: "Zephyr" }
];
var currentTheme = getstore('theme') || 'default';
var lastThemes = JSON.parse(getstore('lastThemes') || '[]');
var x = '<div class="form-group"><label for="theme-switcher">Select a theme:</label>';
x += '<select id="theme-switcher" class="form-select" onchange="account_switchThemeEx()">';
// Add last 4 themes to the top of the select box
if (lastThemes.length > 0) {
x += '<optgroup label="Recent Themes">';
lastThemes.forEach(function (theme) {
var selected = theme === currentTheme ? ' selected' : '';
x += '<option value="' + theme + '"' + selected + '>' + theme.charAt(0).toUpperCase() + theme.slice(1) + '</option>';
});
x += '</optgroup>';
}
// Add all themes
x += '<optgroup label="All Themes">';
themes.forEach(function (theme) {
var selected = theme.value === currentTheme ? ' selected' : '';
x += '<option value="' + theme.value + '"' + selected + '>' + theme.label + '</option>';
});
x += '</optgroup>';
x += '</select></div>';
setModalContent('xxAddAgent', 'Switch Theme', x);
showModal('xxAddAgentModal', 'idx_dlgOkButton');
return false;
}
function account_switchThemeEx() {
var themeSwitcher = document.getElementById("theme-switcher");
const selectedTheme = themeSwitcher.value;
const safeTheme = encodeURIComponent(selectedTheme);
var themeStylesheet = document.getElementById("theme-stylesheet");
var newThemeStylesheet = `styles/themes/${safeTheme}/bootstrap.min.css`;
themeStylesheet.href = newThemeStylesheet;
// Save selected theme
putstore('theme', selectedTheme);
// Update last 4 themes selected
var lastThemes = JSON.parse(getstore('lastThemes') || '[]');
if (!lastThemes.includes(selectedTheme)) {
if (lastThemes.length >= 4) {
lastThemes.pop();
}
lastThemes.unshift(selectedTheme);
} else {
lastThemes = lastThemes.filter(theme => theme !== selectedTheme);
lastThemes.unshift(selectedTheme);
}
putstore('lastThemes', JSON.stringify(lastThemes));
}
function account_createMesh() {
// Check if we are disallowed from creating a device group
if ((userinfo.siteadmin != 0xFFFFFFFF) && ((userinfo.siteadmin & 64) != 0)) {