${line
.map((part) => (typeof part === 'string' ? part : renderHelpLink(part)))
.join('')}
`
: `${typeof line === 'string' ? line : renderHelpLink(line)}
`
)
.join('')
: entry;
let isToggling = false;
toggle.addEventListener('click', () => {
if (isToggling) return;
isToggling = true;
const isOpen = content.classList.toggle('show');
if (isOpen) {
content.style.maxHeight = content.scrollHeight + 'px';
content.addEventListener('transitionend', function handler(e) {
if (e.propertyName === 'max-height' && content.classList.contains('show')) {
content.style.maxHeight = 'none'; // "auto" sizing from now on
content.removeEventListener('transitionend', handler);
isToggling = false;
}
});
} else {
content.style.maxHeight = content.scrollHeight + 'px'; // (in case it was 'none')
void content.offsetHeight;
content.style.maxHeight = '0px';
content.addEventListener('transitionend', function handler(e) {
if (e.propertyName === 'max-height' && !content.classList.contains('show')) {
isToggling = false;
content.removeEventListener('transitionend', handler);
}
});
}
});
wrapper.appendChild(toggle);
wrapper.appendChild(content);
return wrapper;
}
function renderHelpLink(item) {
if (item && item.type === 'link' && item.url) {
return `${
item.text || item.url
}`;
}
return '';
}
export async function fetchConfig() {
try {
const res = await fetch('/api/config');
if (!res.ok) throw new Error('Failed to fetch config');
return await res.json();
} catch (err) {
console.error('Error loading config:', err);
return {};
}
}
export async function fetchStats(location) {
if (!location)
return {
error: true,
file_count: 0,
size_bytes: 0,
files: [],
};
try {
const res = await fetch('/api/poster-search-stats', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
location,
}),
});
if (!res.ok) {
return {
error: true,
file_count: 0,
size_bytes: 0,
files: [],
};
}
return await res.json();
} catch (err) {
return {
error: true,
file_count: 0,
size_bytes: 0,
files: [],
};
}
}
================================================
FILE: web/static/js/index.js
================================================
import { fetchConfig } from './helper.js';
function parseVersionString(ver) {
if (!ver) return {};
const parts = ver.trim().split('.');
if (parts.length < 4) return {};
const version = parts.slice(0, 3).join('.');
const branchAndBuild = parts[3];
const m = branchAndBuild.match(/^([a-zA-Z]+)(\d+)$/);
let branch, build;
if (m) {
branch = m[1];
build = parseInt(m[2], 10);
} else {
branch = branchAndBuild.replace(/(\d+)$/, '');
const buildMatch = branchAndBuild.match(/(\d+)$/);
build = buildMatch ? parseInt(buildMatch[1], 10) : null;
}
return {
version,
branch,
build,
full: ver.trim(),
};
}
async function getRemoteBuildCount(owner, repo, branch) {
const apiUrl = `https://api.github.com/repos/${owner}/${repo}/commits?sha=${branch}&per_page=1`;
try {
const response = await fetch(apiUrl);
if (!response.ok) return null;
const link = response.headers.get('Link');
if (!link) return 1; // If only one commit
const match = link.match(/&page=(\d+)>; rel="last"/);
if (match) return parseInt(match[1], 10);
return 1;
} catch {
return null;
}
}
async function mainVersionCheck() {
const localVerStr = await fetch('/api/version')
.then((r) => r.text())
.catch(() => null);
const local = parseVersionString(localVerStr);
if (!local.version || !local.branch || local.build === null) {
document.getElementById('version').textContent = 'Version: ' + (localVerStr || 'unknown');
return;
}
const remoteVersion = await fetch(
`https://raw.githubusercontent.com/Drazzilb08/daps/${local.branch}/VERSION`
)
.then((r) => (r.ok ? r.text() : null))
.catch(() => null);
const remoteBuild = await getRemoteBuildCount('Drazzilb08', 'daps', local.branch);
let remoteFull = '';
let updateAvailable = false;
if (remoteVersion && remoteBuild !== null) {
remoteFull = `${remoteVersion.trim()}.${local.branch}${remoteBuild}`;
if (remoteVersion.trim() === local.version && remoteBuild > local.build) {
updateAvailable = true;
} else if (remoteVersion.trim() !== local.version) {
updateAvailable = true;
}
}
document.getElementById('version').textContent = 'Version: ' + local.full;
const badge = document.getElementById('update-badge');
if (updateAvailable) {
badge.style.display = '';
badge.title = ''; // Use custom tooltip
badge.onclick = () => window.open('https://github.com/Drazzilb08/daps/releases', '_blank');
document.getElementById('tooltip-current-version').innerText = local.full;
document.getElementById('tooltip-latest-version').innerText = remoteFull;
} else {
badge.style.display = 'none';
}
}
export function setTheme() {
fetchConfig()
.then((config) => {
let theme =
config && config.main && typeof config.main.theme === 'string'
? config.main.theme.toLowerCase()
: 'light';
function applySystemTheme() {
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
try {
localStorage.setItem('theme', isDark ? 'dark' : 'light');
} catch {}
}
if (window._themeMediaListener) {
window
.matchMedia('(prefers-color-scheme: dark)')
.removeEventListener('change', window._themeMediaListener);
window._themeMediaListener = null;
}
if (theme === 'auto') {
applySystemTheme();
window._themeMediaListener = applySystemTheme;
window
.matchMedia('(prefers-color-scheme: dark)')
.addEventListener('change', window._themeMediaListener);
} else {
document.documentElement.setAttribute(
'data-theme',
theme === 'dark' ? 'dark' : 'light'
);
try {
localStorage.setItem('theme', theme);
} catch {}
}
})
.catch((err) => {
console.error('Failed to fetch config:', err);
document.documentElement.setAttribute('data-theme', 'light');
try {
localStorage.setItem('theme', 'light');
} catch {}
});
}
function showSplashScreen() {
const viewFrame = document.getElementById('viewFrame');
if (!viewFrame) return;
viewFrame.innerHTML = `
Welcome to DAPS
Select one of the options above to get started.
Status
Loading Posters...
${title}
${renderStatsTable([...gdriveStatsData], gdriveTotals, 'GDrive Locations')}
${renderStatsTable(assetsStatsData, assetsTotals, 'Assets Directory')}
`;
const select = document.getElementById('gdrive-sort-select');
if (select) {
select.value = gdriveSortMode;
select.onchange = function () {
gdriveSortMode = this.value;
let arr = gdriveStatsData.map((s) => ({ ...s }));
sortGdriveStats(arr, gdriveSortMode, priorityMap);
document.getElementById('gdrive-stats-table').innerHTML = renderStatsTable(
arr,
gdriveTotals,
'GDrive Locations'
);
};
}
}
function setupStatsToggle() {
const btn = getById('toggle-stats-btn');
const card = getById('poster-stats-card');
btn.textContent = '📊 Show Statistics';
card.style.display = 'none';
card.dataset.expanded = ''; // Not expanded
btn.onclick = function () {
const expanded = card.style.display !== '' && card.style.display !== 'block';
if (expanded) {
card.style.display = '';
card.dataset.expanded = '1';
btn.textContent = '📊 Hide Statistics';
} else {
card.style.display = 'none';
card.dataset.expanded = '';
btn.textContent = '📊 Show Statistics';
}
};
}
function getById(id) {
return document.getElementById(id);
}
function highlight(str, term) {
if (!term) return str;
const regex = new RegExp(`(${term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
return str.replace(regex, `$1`);
}
function showSpinner(show) {
const spinner = getById(IDS.statsSpinner);
if (spinner) spinner.style.display = show ? '' : 'none';
}
function materialIcon(name, style = '') {
return ``;
}
function showImageModal(imgSrc, caption) {
closeImageModal();
const modal = document.createElement('div');
modal.id = 'img-preview-modal';
modal.className = 'show';
modal.innerHTML = `
${caption || ''}
${
group.name
}
- ${group.files
.map(
(f) =>
`
- ${highlight(f, term)} ` ) .join('')}
Assets Dir
- ${matches
.map(
(f) =>
`
- ${highlight(f, term)} ` ) .join('')}
No results found. Try another search or check your filters.
`;
}
function copyToClipboard(btn, text) {
navigator.clipboard
.writeText(text)
.then(() => {
const def = btn.querySelector('.copy-btn-default');
const copied = btn.querySelector('.copy-btn-copied');
if (def && copied) {
def.style.display = 'none';
copied.style.display = 'inline';
setTimeout(() => {
def.style.display = '';
copied.style.display = 'none';
}, 1400);
}
})
.catch(() => {
showToast && showToast('Could not copy to clipboard.', 'error');
});
}
function setupEventListeners() {
const toggle = getById(IDS.scopeToggle);
const label = getById(IDS.scopeLabel);
toggle.checked = false;
label.textContent = 'GDrive Locations';
toggle.onchange = () => {
label.textContent = toggle.checked ? 'Assets Directory' : 'GDrive Locations';
getById(IDS.searchInput).value = '';
getById(IDS.searchResults).innerHTML = '';
};
document.addEventListener('keydown', (e) => {
const input = getById(IDS.searchInput);
const modal = document.getElementById('img-preview-modal');
if ((e.key === '/' && !e.ctrlKey) || (e.key === 'f' && e.ctrlKey)) {
e.preventDefault();
input && input.focus();
} else if (e.key === 'Escape') {
if (modal) closeImageModal();
else input && (input.value = '');
} else if (e.key === 'Enter' && document.activeElement === input) {
e.preventDefault();
renderResults(input.value.trim().toLowerCase());
}
});
getById(IDS.searchInput).onkeypress = (e) => {
if (e.key === 'Enter') {
e.preventDefault();
renderResults(e.target.value.trim().toLowerCase());
}
};
getById(IDS.searchResults).addEventListener('click', (e) => {
const copyBtn = e.target.closest('.copy-btn');
if (copyBtn) {
e.stopPropagation();
let file = copyBtn.getAttribute('aria-label') || '';
file = file
.replace(/^Copy filename\s*/i, '')
.replace(/^Copied\s*/i, '')
.trim();
if (!file) {
const span = copyBtn.closest('li')?.querySelector('.poster-file-label');
if (span) file = span.textContent;
}
copyToClipboard(copyBtn, file);
return false;
}
const label = e.target.closest('.poster-file-label');
if (label) {
let location = decodeURIComponent(label.getAttribute('data-location') || '');
let path = decodeURIComponent(label.getAttribute('data-file') || '');
let caption = label.textContent;
if (location && path) {
const url = `/api/preview-poster?location=${encodeURIComponent(
location
)}&path=${encodeURIComponent(path)}`;
showImageModal(url, caption);
}
return false;
}
});
getById(IDS.searchResults).addEventListener('mouseover', (e) => {
const label = e.target.closest('.poster-file-label');
if (label) {
let location = decodeURIComponent(label.getAttribute('data-location') || '');
let path = decodeURIComponent(label.getAttribute('data-file') || '');
if (location && path) {
const url = `/api/preview-poster?location=${encodeURIComponent(
location
)}&path=${encodeURIComponent(path)}&thumb=1`;
hoverPreviewImg.src = url;
hoverPreviewImg.style.display = 'block';
}
}
});
getById(IDS.searchResults).addEventListener('mousemove', (e) => {
if (hoverPreviewImg && hoverPreviewImg.style.display === 'block') {
const imgWidth = hoverPreviewImg.naturalWidth
? Math.min(hoverPreviewImg.naturalWidth, 200)
: 200;
const imgHeight = hoverPreviewImg.naturalHeight
? Math.min(hoverPreviewImg.naturalHeight, 200)
: 200;
const vpWidth = window.innerWidth;
const vpHeight = window.innerHeight;
let left = e.pageX + 14;
let top = e.pageY + 14;
if (left + imgWidth > vpWidth - 10) left = Math.max(10, vpWidth - imgWidth - 10);
if (top + imgHeight > vpHeight - 10) top = Math.max(10, vpHeight - imgHeight - 10);
hoverPreviewImg.style.left = left + 'px';
hoverPreviewImg.style.top = top + 'px';
}
});
getById(IDS.searchResults).addEventListener('mouseout', (e) => {
if (e.target.closest('.poster-file-label')) {
hoverPreviewImg.style.display = 'none';
}
});
}
export async function initPosterSearch() {
showLoaderModal(true);
getById(IDS.searchResults).innerHTML = '';
getById(IDS.searchInput).value = '';
await fetchAllFileLists();
setupEventListeners();
showLoaderModal(false);
setupStatsToggle();
await fetchAndRenderStats();
}
================================================
FILE: web/static/js/schedule.js
================================================
import { fetchConfig, renderHelp, moduleOrder } from './helper.js';
import { buildSchedulePayload } from './payload.js';
import { navigateTo } from './navigation.js';
import { DAPS } from './common.js';
const { bindSaveButton, showToast, humanize } = DAPS;
export async function loadSchedule() {
const config = await fetchConfig();
const schedule = config.schedule || {};
const form = document.getElementById('scheduleForm');
if (!form) return;
form.innerHTML = '';
const help = renderHelp('schedule');
if (help) form.before(help);
const orderedModules = (moduleOrder || Object.keys(schedule)).filter((m) =>
schedule.hasOwnProperty(m)
);
for (const [i, module] of orderedModules.entries()) {
const time = schedule[module];
const label = document.createElement('label');
label.textContent = humanize(module);
const input = document.createElement('input');
input.type = 'text';
input.name = module;
input.value = time || '';
input.className = 'input';
input.placeholder = 'e.g. hourly(01), daily(12:00|18:00), weekly(Mon@12:00|Tue@18:00)';
const field = document.createElement('div');
field.className = 'field';
field.appendChild(label);
field.appendChild(input);
input.addEventListener('input', () => {
if (!input.value.trim() || isValidSchedule(input.value.trim())) {
input.classList.remove('input-invalid');
} else {
input.classList.add('input-invalid');
}
});
const runBtn = document.createElement('button');
runBtn.type = 'button';
runBtn.textContent = 'Run Now';
runBtn.className = 'run-btn btn';
runBtn.addEventListener('mouseenter', () => {
if (runBtn.classList.contains('running')) {
runBtn.textContent = 'Cancel';
runBtn.classList.add('cancel-hover');
}
});
runBtn.addEventListener('mouseleave', () => {
if (runBtn.classList.contains('running')) {
runBtn.textContent = 'Running';
runBtn.classList.remove('cancel-hover');
}
});
runBtn.addEventListener('click', async () => {
if (runBtn.classList.contains('running')) {
runBtn.textContent = 'Canceling';
await fetch('/api/cancel', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ module }),
});
runBtn.classList.remove('running');
runBtn.textContent = 'Run Now';
showToast(`🛑 ${humanize(module)} cancelled successfully.`, 'info');
return;
}
runBtn.textContent = 'Running';
runBtn.classList.add('running');
if (!btnContainer.querySelector('.run-btn + .run-btn')) {
const viewLogsBtn = document.createElement('button');
viewLogsBtn.type = 'button';
viewLogsBtn.textContent = 'View Logs';
viewLogsBtn.className = 'run-btn btn';
viewLogsBtn.addEventListener('click', () => {
window._preselectedLogModule = module;
window.skipDirtyCheck = true;
const link = document.createElement('a');
link.href = '/pages/logs';
navigateTo(link);
});
btnContainer.appendChild(viewLogsBtn);
}
const res = await fetch('/api/run', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ module }),
});
if (!res.ok) {
const err = await res.json();
runBtn.classList.remove('running');
runBtn.textContent = 'Run Now';
showToast(
`❌ Failed to start ${humanize(module)}: ${err.error || res.statusText}`,
'error'
);
return;
}
showToast(`▶️ ${humanize(module)} started successfully!`, 'success');
const interval = setInterval(async () => {
const resStatus = await fetch(`/api/status?module=${module}`);
const { running } = await resStatus.json();
if (!running) {
runBtn.classList.remove('running');
runBtn.textContent = 'Run Now';
clearInterval(interval);
}
}, 2000);
});
const btnContainer = document.createElement('div');
btnContainer.className = 'btn-container';
btnContainer.appendChild(runBtn);
field.appendChild(btnContainer);
(async () => {
const resStatus = await fetch(`/api/status?module=${module}`);
const { running } = await resStatus.json();
if (running) {
runBtn.textContent = 'Running';
runBtn.classList.add('running');
const viewLogsBtn = document.createElement('button');
viewLogsBtn.type = 'button';
viewLogsBtn.textContent = 'View Logs';
viewLogsBtn.className = 'run-btn btn ';
viewLogsBtn.addEventListener('click', () => {
window._preselectedLogModule = module;
window.skipDirtyCheck = true;
const link = document.createElement('a');
link.href = '/fragments/logs';
window.DAPS.navigateTo(link);
});
btnContainer.appendChild(viewLogsBtn);
}
})();
const card = document.createElement('div');
card.className = 'card';
card.appendChild(field);
form.appendChild(card);
setTimeout(() => card.classList.add('show-card'), 40 * i);
}
if (window._scheduleRunInterval) {
clearInterval(window._scheduleRunInterval);
window._scheduleRunInterval = null;
}
window._scheduleRunInterval = setInterval(() => {
document.querySelectorAll('.field').forEach((field) => {
const inp = field.querySelector('input');
const runBtn = field.querySelector('button.run-btn');
if (!inp || !runBtn) return;
const module = inp.name;
fetch(`/api/status?module=${module}`)
.then((res) => res.json())
.then(({ running }) => {
if (running && !runBtn.classList.contains('running')) {
runBtn.textContent = 'Running';
runBtn.classList.add('running');
const btnContainer = runBtn.parentElement;
const viewExists = btnContainer.querySelector('.run-btn + .run-btn');
if (!viewExists) {
const viewLogsBtn = document.createElement('button');
viewLogsBtn.type = 'button';
viewLogsBtn.textContent = 'View Logs';
viewLogsBtn.className = 'run-btn';
viewLogsBtn.addEventListener('click', () => {
window._preselectedLogModule = module;
const link = document.createElement('a');
link.href = '/fragments/logs';
window.DAPS.navigateTo(link);
});
btnContainer.appendChild(viewLogsBtn);
}
} else if (!running && runBtn.classList.contains('running')) {
runBtn.classList.remove('running');
runBtn.textContent = 'Run Now';
const btnContainer = runBtn.parentElement;
const viewLogsBtn = btnContainer.querySelector('.run-btn + .run-btn');
if (viewLogsBtn) btnContainer.removeChild(viewLogsBtn);
}
});
});
}, 3000);
const saveBtn = document.getElementById('saveBtn');
bindSaveButton(saveBtn, buildSchedulePayload, 'schedule');
const searchInput = document.getElementById('schedule-search');
if (searchInput) {
searchInput.addEventListener('input', (e) => {
DAPS.skipDirtyCheck = true;
searchInput.defaultValue = searchInput.value;
const query = e.target.value.toLowerCase();
document.querySelectorAll('.card').forEach((card) => {
const text = card.textContent.toLowerCase();
card.style.display = text.includes(query) ? 'flex' : 'none';
});
});
}
}
function isValidSchedule(val) {
if (!val) return true;
if (/^hourly\(\d{2}\)$/i.test(val)) return true;
if (/^daily\(\d{2}:\d{2}(?:\|\d{2}:\d{2})*\)$/i.test(val)) return true;
if (/^weekly\([a-z]+@\d{2}:\d{2}(?:\|[a-z]+@\d{2}:\d{2})*\)$/i.test(val)) return true;
if (/^monthly\(\d{1,2}@\d{2}:\d{2}(?:\|\d{1,2}@\d{2}:\d{2})*\)$/i.test(val)) return true;
if (/^cron\([^\)]+\)$/i.test(val)) return true;
return false;
}
================================================
FILE: web/static/js/settings/constants.js
================================================
export const BOOL_FIELDS = [
'dry_run',
'skip',
'sync_posters',
'run_border_replacerr',
'print_files',
'rename_folders',
'unattended',
'enable_batching',
'asset_folders',
'print_only_renames',
'incremental_border_replacerr',
'silent',
'disable_batching',
'replace_border',
'update_notifications',
];
export const TEXT_FIELDS = [
'tag_name',
'ignore_tag',
'custom_format',
'title',
'alt_title',
'poster_path',
];
export const TEXTAREA_FIELDS = [
'exclude_profiles',
'exclude_movies',
'exclude_series',
'exclusion_list',
'exclude',
'token',
'ignore_collections',
'ignore_root_folders',
'ignore_media',
];
export const INT_FIELDS = [
'count',
'radarr_count',
'sonarr_count',
'season_monitored_threshold',
'border_width',
'searches',
];
export const JSON_FIELDS = ['token'];
export const DROP_DOWN_FIELDS = ['log_level', 'action_type', 'app_type', 'app_instance', 'theme'];
// Add to constants.js
export const DROP_DOWN_OPTIONS = {
mode: ['resolve', 'symlink', 'hardlink'],
log_level: ['info', 'debug'],
action_type: ['copy', 'move', 'hardlink', 'symlink'],
theme: ['light', 'dark', 'auto'],
month: [
{ value: '01', label: 'Jan', days: 31 },
{ value: '02', label: 'Feb', days: 28 },
{ value: '03', label: 'Mar', days: 31 },
{ value: '04', label: 'Apr', days: 30 },
{ value: '05', label: 'May', days: 31 },
{ value: '06', label: 'Jun', days: 30 },
{ value: '07', label: 'Jul', days: 31 },
{ value: '08', label: 'Aug', days: 31 },
{ value: '09', label: 'Sep', days: 30 },
{ value: '10', label: 'Oct', days: 31 },
{ value: '11', label: 'Nov', days: 30 },
{ value: '12', label: 'Dec', days: 31 },
],
};
export const DIR_PICKER = ['source_dirs', 'destination_dir', 'data_dir'];
export const ARR_AND_PLEX_INSTANCES = [
'poster_renamerr',
'labelarr',
'border_replacerr',
'sync_gdrive',
'nohl',
'unmatched_assets',
'poster_cleanarr',
'health_checkarr',
'renameinatorr',
];
export const SHOW_PLEX_IN_INSTANCE_FIELD = [
'poster_renamerr',
'unmatched_assets',
'poster_cleanarr'
];
export const DRAG_AND_DROP = {
poster_renamerr: ['source_dirs'],
};
export const LIST_FIELD = {
unmatched_assets: ['source_dirs'],
poster_cleanarr: ['source_dirs'],
nohl: ['source_dirs'],
};
export const PLACEHOLDER_TEXT = {
sync_gdrive: {
name: 'Unique name for your Gdrive',
token: '{\n "access_token": "ya29.a0AfH6SMBEXAMPLEEXAMPLETOKEN",\n "refresh_token": "1",\n "scope": "https://www.googleapis.com/auth/drive",\n "token_type": "Bearer",\n "expiry_date": 1712345678901\n}',
gdrive_sa_location: 'Click to pick your service account file…',
location: 'Click to pick the destination directory',
id: 'Paste the Gdrive ID to pull posters from',
client_id: 'asdasds.apps.googleusercontent.com',
client_secret: 'GOCSPX-asda123',
},
poster_renamerr: {
source_dirs: 'Click to pick a source directory...',
destination_dir: '/path/to/Kometa/assets_directory',
},
upgradinatorr: {
data_dir: '/path/to/media_folder',
instance: 'Select an instance',
count: '0',
tag_name: 'Enter the tag you wish to use',
ignore_tag: 'The tag you wish to use to ignore an entry',
},
renameinatorr: {
tag_name: 'Enter the tag you wish to use',
},
nohl: {
source_dirs: 'Click to pick a source directory...',
},
border_replacerr: {
holiday_name: 'Holiday name',
},
labelarr: {
labels: 'Comma-separated list of labels',
},
};
================================================
FILE: web/static/js/settings/modal_helpers.js
================================================
import { DROP_DOWN_OPTIONS } from './constants.js';
import { holidayPresets } from './presets.js';
export function populateScheduleDropdowns() {
const months = DROP_DOWN_OPTIONS.month; // Array of { value, label, days }
['from', 'to'].forEach((type) => {
const monthSel = document.getElementById(`schedule-${type}-month`);
const daySel = document.getElementById(`schedule-${type}-day`);
if (!monthSel || !daySel) return;
monthSel.innerHTML = months
.map((m) => ``)
.join('');
function updateDays() {
const mIdx = months.findIndex((m) => m.value === monthSel.value);
const days = mIdx >= 0 ? months[mIdx].days : 31;
let opts = '';
for (let d = 1; d <= days; d++) {
const dd = String(d).padStart(2, '0');
opts += ``;
}
daySel.innerHTML = opts;
}
monthSel.addEventListener('change', updateDays);
updateDays();
});
}
export function loadHolidayPresets() {
const presetSelect = document.getElementById('holiday-preset');
if (!presetSelect) return;
presetSelect.innerHTML =
'' +
Object.keys(holidayPresets || {})
.map((label) => ``)
.join('');
presetSelect.onchange = function () {
const label = presetSelect.value;
const modal = presetSelect.closest('.modal-content');
if (!label || !holidayPresets[label]) return;
const preset = holidayPresets[label];
modal.querySelector('#holiday-name').value = label;
if (
preset.schedule &&
preset.schedule.startsWith('range(') &&
preset.schedule.endsWith(')')
) {
const range = preset.schedule.slice(6, -1);
const [from, to] = range.split('-');
if (from) {
const [fromMonth, fromDay] = from.split('/');
modal.querySelector('#schedule-from-month').value = fromMonth || '';
modal.querySelector('#schedule-from-day').value = fromDay || '';
}
if (to) {
const [toMonth, toDay] = to.split('/');
modal.querySelector('#schedule-to-month').value = toMonth || '';
modal.querySelector('#schedule-to-day').value = toDay || '';
}
}
const colorContainer = modal.querySelector('#border-colors-container');
colorContainer.innerHTML = '';
(preset.colors || []).forEach((color) => {
const swatch = document.createElement('div');
swatch.className = 'subfield';
swatch.innerHTML = `
`;
swatch.querySelector('.remove-btn').onclick = () => swatch.remove();
colorContainer.appendChild(swatch);
});
};
}
export async function populateGDrivePresetsDropdown(gdriveSyncData, editingIdx = null) {
const presetSelect = document.getElementById('gdrive-sync-preset');
const presetDetail = document.getElementById('gdrive-preset-detail');
const searchBox = document.getElementById('gdrive-preset-search');
if (!presetSelect) return;
const entries = await gdrivePresets();
const idsInUse = gdriveSyncData
.filter((entry, i) => i !== editingIdx)
.map((entry) => String(entry.id));
presetSelect.innerHTML =
'' +
entries
.map(
(drive) =>
``
)
.join('');
setTimeout(function () {
if ($('#gdrive-sync-preset').data('select2')) {
$('#gdrive-sync-preset').select2('destroy');
}
$('#gdrive-sync-preset').select2({
placeholder: 'Select a GDrive preset',
allowClear: true,
width: '100%',
dropdownParent: $('#gdrive-sync-preset').closest('.modal-content'),
language: {
searching: () => 'Type to filter drives…',
noResults: () => 'No matching presets',
inputTooShort: () => 'Type to search…',
},
});
$('#gdrive-sync-preset').on('select2:open', function () {
setTimeout(() => {
$('.select2-search__field').attr('placeholder', 'Type to search presets…');
}, 0);
});
}, 0);
function updatePresetDetail() {
const id = presetSelect.value;
const drive = entries.find((d) => String(d.id) === String(id));
if (id && drive) {
if (document.getElementById('gdrive-id'))
document.getElementById('gdrive-id').value = drive.id ?? '';
if (document.getElementById('gdrive-name'))
document.getElementById('gdrive-name').value = drive.name ?? '';
if (document.getElementById('gdrive-location'))
document.getElementById('gdrive-location').value = drive.location ?? '';
if (presetDetail) {
let metaLines = '';
if ('type' in drive) {
metaLines += `Type: ${drive.type}
`;
}
if ('content' in drive && drive.content) {
metaLines += `Content:
`;
if (Array.isArray(drive.content)) {
metaLines += `${drive.content
.map((line) => `
`;
} else {
metaLines += `${line}
`)
.join('')}${drive.content}
`;
}
}
for (const key of Object.keys(drive)) {
if (['name', 'id', 'type', 'content'].includes(key)) continue;
metaLines += `${
key.charAt(0).toUpperCase() + key.slice(1)
}: ${drive[key]}
`;
}
presetDetail.innerHTML = `${
metaLines || 'No extra metadata'
}
`;
}
} else if (presetDetail) {
presetDetail.innerHTML = '';
}
}
presetSelect.onchange = updatePresetDetail;
updatePresetDetail();
if (searchBox) {
searchBox.addEventListener('input', () => {
const filter = searchBox.value.toLowerCase();
Array.from(presetSelect.options).forEach((opt) => {
if (!opt.value) return;
opt.style.display = opt.text.toLowerCase().includes(filter) ? '' : 'none';
});
let firstVisible = Array.from(presetSelect.options).find(
(opt) => opt.style.display !== 'none' && opt.value
);
if (firstVisible) {
presetSelect.value = firstVisible.value;
updatePresetDetail();
} else {
presetSelect.value = '';
updatePresetDetail();
}
});
}
}
async function gdrivePresets() {
if (window._gdrivePresetsCache) return window._gdrivePresetsCache; // use cache
try {
const response = await fetch(
'https://raw.githubusercontent.com/Drazzilb08/daps-gdrive-presets/main/presets.json'
);
if (!response.ok) throw new Error('Failed to fetch GDrive presets');
const data = await response.json();
window._gdrivePresetsCache = Array.isArray(data)
? data
: Object.entries(data).map(([name, value]) =>
typeof value === 'object'
? {
name,
...value,
}
: {
name,
id: value,
}
);
} catch (err) {
console.error('Error loading GDrive presets:', err);
window._gdrivePresetsCache = [];
}
return window._gdrivePresetsCache;
}
================================================
FILE: web/static/js/settings/modals.js
================================================
import { PLACEHOLDER_TEXT } from './constants.js';
import {
populateScheduleDropdowns,
loadHolidayPresets,
populateGDrivePresetsDropdown,
} from './modal_helpers.js';
import { DAPS } from '../common.js';
const { markDirty, humanize } = DAPS;
const directoryCache = {};
function modalFooterHtml(saveId, cancelId, saveLabel = 'Save') {
return `
`;
}
function attachModalSaveCancel(modal, saveSelector, cancelSelector, onSave) {
const saveBtn = modal.querySelector(saveSelector);
const cancelBtn = modal.querySelector(cancelSelector);
if (saveBtn) saveBtn.onclick = onSave;
if (cancelBtn) cancelBtn.onclick = () => modal.classList.remove('show');
}
export function gdriveSyncModal(editIdx, gdriveSyncData, updateGdriveList) {
const moduleName = 'sync_gdrive';
const isEdit = typeof editIdx === 'number';
let modal = document.getElementById('gdrive-sync-modal');
if (!modal) {
modal = document.createElement('div');
modal.id = 'gdrive-sync-modal';
modal.className = 'modal';
modal.innerHTML = `
`;
document.body.appendChild(modal);
modal
.querySelector('#gdrive-location')
.addEventListener('click', () =>
directoryPickerModal(modal.querySelector('#gdrive-location'))
);
setTimeout(() => populateGDrivePresetsDropdown(gdriveSyncData, modal.editingIdx), 0);
}
modal.editingIdx = isEdit ? editIdx : null;
const presetSelect = modal.querySelector('#gdrive-sync-preset');
const presetDetail = modal.querySelector('#gdrive-preset-detail');
if (presetSelect) {
if ($(presetSelect).data('select2')) {
$(presetSelect).val('').trigger('change');
} else {
presetSelect.value = '';
}
}
if (presetDetail) presetDetail.innerHTML = '';
const nameInput = modal.querySelector('#gdrive-name');
const idInput = modal.querySelector('#gdrive-id');
const locInput = modal.querySelector('#gdrive-location');
if (isEdit) {
const entry = gdriveSyncData[editIdx];
nameInput.value = entry.name || '';
idInput.value = entry.id || '';
locInput.value = entry.location || '';
} else {
nameInput.value = '';
idInput.value = '';
locInput.value = '';
}
const heading = modal.querySelector('h2');
if (heading) {
heading.textContent = (isEdit ? 'Edit' : 'Add') + ' GDrive Sync';
}
function handleGDriveSave() {
const name = modal.querySelector('#gdrive-name').value.trim();
const id = modal.querySelector('#gdrive-id').value.trim();
const loc = modal.querySelector('#gdrive-location').value.trim();
if (!name || !id || !loc) {
return alert('All fields must be filled.');
}
const entry = { id, location: loc, name };
if (typeof editIdx === 'number') {
gdriveSyncData[editIdx] = entry;
} else {
gdriveSyncData.push(entry);
}
if (typeof updateGdriveList === 'function') updateGdriveList();
markDirty();
populateGDrivePresetsDropdown(gdriveSyncData, modal.editingIdx);
modal.classList.remove('show');
}
attachModalSaveCancel(modal, '#gdrive-save-btn', '#gdrive-cancel-btn', handleGDriveSave);
modal.classList.add('show');
}
export function borderReplacerrModal(editIdx, borderReplacerrData, onUpdate) {
const moduleName = 'border_replacerr';
const isEdit = typeof editIdx === 'number';
let modal = document.getElementById('border-replacerr-modal');
if (!modal) {
modal = document.createElement('div');
modal.id = 'border-replacerr-modal';
modal.className = 'modal';
modal.innerHTML = `
`;
document.body.appendChild(modal);
}
loadHolidayPresets();
populateScheduleDropdowns();
const heading = modal.querySelector('h2');
if (heading) {
heading.textContent = (isEdit ? 'Edit' : 'Add') + ' Holiday';
}
const saveBtn = modal.querySelector('#holiday-save-btn');
if (saveBtn) {
saveBtn.textContent = isEdit ? 'Save' : 'Add';
}
const colorContainer = modal.querySelector('#border-colors-container');
const addColorBtn = modal.querySelector('#addBorderColor');
function addBorderColor(color = '#ffffff') {
const swatch = document.createElement('div');
swatch.className = 'subfield';
swatch.innerHTML = `
`;
swatch.querySelector('.remove-btn').onclick = () => swatch.remove();
colorContainer.appendChild(swatch);
}
addColorBtn.onclick = () => addBorderColor();
modal.querySelector('#holiday-cancel-btn').onclick = () => {
modal.classList.remove('show');
};
modal.querySelector('#holiday-save-btn').onclick = () => {
const name = modal.querySelector('#holiday-name').value.trim();
const existing = borderReplacerrData || [];
const duplicate = existing.some(
(entry, i) => entry.holiday === name && (!isEdit || i !== editIdx)
);
if (duplicate) {
alert('A holiday with this name already exists.');
return;
}
const scheduleFrom = `${modal.querySelector('#schedule-from-month').value}/${
modal.querySelector('#schedule-from-day').value
}`;
const scheduleTo = `${modal.querySelector('#schedule-to-month').value}/${
modal.querySelector('#schedule-to-day').value
}`;
const colors = Array.from(
modal.querySelectorAll('#border-colors-container input[type="color"]')
).map((input) => input.value);
if (!name || !scheduleFrom || !scheduleTo || !colors.length) {
alert('All fields are required.');
return;
}
const schedule = `range(${scheduleFrom}-${scheduleTo})`;
const holidayEntry = {
holiday: name,
schedule,
color: colors,
};
if (isEdit) {
borderReplacerrData[editIdx] = holidayEntry;
} else {
borderReplacerrData.push(holidayEntry);
}
modal.classList.remove('show');
if (typeof onUpdate === 'function') onUpdate();
markDirty();
};
colorContainer.innerHTML = '';
if (isEdit) {
const entry = borderReplacerrData[editIdx];
modal.querySelector('#holiday-name').value = entry.holiday || '';
let from = '',
to = '';
if (entry.schedule && entry.schedule.startsWith('range(') && entry.schedule.endsWith(')')) {
const range = entry.schedule.slice(6, -1);
const [f, t] = range.split('-');
from = f || '';
to = t || '';
}
if (from) {
const [fromMonth, fromDay] = from.split('/');
modal.querySelector('#schedule-from-month').value = fromMonth || '';
modal.querySelector('#schedule-from-day').value = fromDay || '';
}
if (to) {
const [toMonth, toDay] = to.split('/');
modal.querySelector('#schedule-to-month').value = toMonth || '';
modal.querySelector('#schedule-to-day').value = toDay || '';
}
(entry.color || []).forEach(addBorderColor);
} else {
modal.querySelector('#holiday-name').value = '';
modal.querySelector('#schedule-from-month').selectedIndex = 0;
modal.querySelector('#schedule-from-day').selectedIndex = 0;
modal.querySelector('#schedule-to-month').selectedIndex = 0;
modal.querySelector('#schedule-to-day').selectedIndex = 0;
addBorderColor();
}
modal.classList.add('show');
}
export function labelarrModal(editIdx, labelarrData, rootConfig, updateLabelarrTable) {
const moduleName = 'labelarr';
const isEdit = typeof editIdx === 'number';
let modal = document.getElementById('labelarr-modal');
if (!modal) {
modal = document.createElement('div');
modal.id = 'labelarr-modal';
modal.className = 'modal';
modal.innerHTML = `
`;
document.body.appendChild(modal);
const plexListDiv = modal.querySelector('#labelarr-plex-list');
plexListDiv.innerHTML = '';
const plexInstances = Object.keys(rootConfig.instances?.plex || {});
if (plexInstances.length) {
plexInstances.forEach((pi) => {
const wrapper = document.createElement('div');
wrapper.className = 'card plex-instance-card';
wrapper.innerHTML = `
${humanize(pi)}
Plex
🚫 No Plex instances configured.
🎄 No holidays configured yet.
`; } else { borderReplacerrData.forEach((entry, i) => { const card = document.createElement('div'); card.className = 'holiday-card card show-card'; card.innerHTML = `
${entry.holiday}
${entry.schedule}
${entry.color
.map((c) => ``)
.join('')}
`;
holidaysContainer.appendChild(card);
});
holidaysContainer.querySelectorAll('.edit-btn').forEach((btn) => {
btn.onclick = () => {
const idx = parseInt(btn.dataset.idx, 10);
if (!isNaN(idx))
borderReplacerrModal(idx, borderReplacerrData, updateBorderReplacerrUI);
};
});
holidaysContainer.querySelectorAll('.remove-btn').forEach((btn) => {
btn.onclick = () => {
const confirmed = confirm('Are you sure you want to remove this holiday?');
if (confirmed) {
const idx = parseInt(btn.dataset.idx, 10);
borderReplacerrData.splice(idx, 1);
updateBorderReplacerrUI();
}
};
});
}
}
holidaysField.querySelector('#add-holiday-btn').onclick = () =>
borderReplacerrModal(null, borderReplacerrData, updateBorderReplacerrUI);
updateBorderReplacerrUI();
formFields.appendChild(wrapper);
}
export function getBorderReplacerrData() {
return borderReplacerrData;
}
================================================
FILE: web/static/js/settings/modules/health_checkarr.js
================================================
import { renderHelp } from '../../helper.js';
import { renderField, renderPlexSonarrRadarrInstancesField } from '../settings_helpers.js';
export function renderHealthCheckarrSettings(formFields, config, rootConfig) {
const wrapper = document.createElement('div');
const help = renderHelp('health_checkarr');
if (help) wrapper.appendChild(help);
wrapper.className = 'settings-wrapper';
Object.entries(config).forEach(([key, value]) => {
if (key === 'instances') {
renderPlexSonarrRadarrInstancesField(wrapper, value, rootConfig, 'health_checkarr');
} else {
renderField(wrapper, key, value);
}
});
formFields.appendChild(wrapper);
}
================================================
FILE: web/static/js/settings/modules/jduparr.js
================================================
import { renderField } from '../settings_helpers.js';
import { renderHelp } from '../../helper.js';
export function renderJduparrSettings(formFields, config) {
const wrapper = document.createElement('div');
const help = renderHelp('jduparr');
if (help) wrapper.appendChild(help);
wrapper.className = 'settings-wrapper';
Object.entries(config).forEach(([key, value]) => {
renderField(wrapper, key, value);
});
formFields.appendChild(wrapper);
}
================================================
FILE: web/static/js/settings/modules/labelarr.js
================================================
import { renderHelp } from '../../helper.js';
import { renderField } from '../settings_helpers.js';
import { labelarrModal } from '../modals.js';
import { humanize } from '../../common.js';
let labelarrData = [];
export function renderLabelarrSettings(formFields, config, rootConfig) {
const wrapper = document.createElement('div');
wrapper.className = 'settings-wrapper';
const help = renderHelp('labelarr');
if (help) wrapper.appendChild(help);
Object.entries(config).forEach(([key, value]) => {
if (key !== 'mappings') {
renderField(wrapper, key, value);
}
});
const mappingsField = document.createElement('div');
mappingsField.className = 'field setting-field';
mappingsField.innerHTML = `
`;
wrapper.appendChild(mappingsField);
const mappingsContainer = mappingsField.querySelector('#labelarr-mappings-container');
labelarrData = Array.isArray(config.mappings)
? JSON.parse(JSON.stringify(config.mappings))
: [];
function updateMappings() {
mappingsContainer.innerHTML = '';
if (labelarrData.length === 0) {
mappingsContainer.innerHTML = `
🚫 No mappings yet.
Click "Add Mapping" to create your first sync mapping.
`;
return;
}
labelarrData.forEach((entry, i) => {
try {
const card = document.createElement('div');
card.className = 'labelarr-mapping-card card show-card';
const left = document.createElement('div');
left.className = 'labelarr-mapping-left';
left.innerHTML = `
Click "Add Mapping" to create your first sync mapping.
${humanize(entry.app_type)}
Instance ${humanize(
entry.app_instance
)}:
${
entry.labels && entry.labels.length
? entry.labels
.map(
(l) =>
`${humanize(l)}`
)
.join('')
: 'No label'
}
`;
const center = document.createElement('div');
center.className = 'labelarr-mapping-center';
center.innerHTML = `→`;
const right = document.createElement('div');
right.className = 'labelarr-mapping-right';
let plexHtml = '';
(entry.plex_instances || []).forEach((inst) => {
const instance =
inst.instance || Object.keys(inst).find((k) => k !== 'library_names');
const libraries = Array.isArray(inst.library_names) ? inst.library_names : [];
plexHtml += `
${humanize(instance)}:
${libraries
.map(
(lib) =>
`${humanize(lib)}`
)
.join('')}
`;
});
right.innerHTML =
plexHtml || `No Plex Target`;
const actions = document.createElement('div');
actions.className = 'labelarr-mapping-actions';
actions.innerHTML = `
`;
card.appendChild(left);
card.appendChild(center);
card.appendChild(right);
card.appendChild(actions);
mappingsContainer.appendChild(card);
} catch (err) {
console.error('Error rendering mapping entry:', entry, err);
}
});
mappingsContainer.querySelectorAll('.remove-btn').forEach((btn) => {
btn.onclick = () => {
const idx = parseInt(btn.dataset.idx, 10);
if (!isNaN(idx)) {
const confirmed = confirm('Are you sure you want to remove this mapping?');
if (!confirmed) return;
labelarrData.splice(idx, 1);
updateMappings();
}
};
});
mappingsContainer.querySelectorAll('.edit-btn').forEach((btn) => {
btn.onclick = () => {
const idx = parseInt(btn.dataset.idx, 10);
if (!isNaN(idx)) {
labelarrModal(idx, labelarrData, rootConfig, updateMappings);
}
};
});
}
mappingsField.querySelector('#add-mapping-btn').onclick = () =>
labelarrModal(undefined, labelarrData, rootConfig, updateMappings);
updateMappings();
formFields.appendChild(wrapper);
wrapper.flushLabelarrToConfig = () => {
config.mappings = JSON.parse(JSON.stringify(labelarrData));
};
}
export function getLabelarrData() {
return labelarrData;
}
================================================
FILE: web/static/js/settings/modules/main.js
================================================
import { renderField } from '../settings_helpers.js';
import { renderHelp } from '../../helper.js';
export function renderMain(formFields, config) {
const wrapper = document.createElement('div');
const help = renderHelp('main');
if (help) wrapper.appendChild(help);
wrapper.className = 'settings-wrapper';
Object.entries(config).forEach(([key, value]) => {
renderField(wrapper, key, value);
});
formFields.appendChild(wrapper);
}
================================================
FILE: web/static/js/settings/modules/nohl.js
================================================
import { renderField, renderPlexSonarrRadarrInstancesField } from '../settings_helpers.js';
import { renderHelp } from '../../helper.js';
export function renderNohlSettings(formFields, config, rootConfig) {
const wrapper = document.createElement('div');
const help = renderHelp('nohl');
if (help) wrapper.appendChild(help);
wrapper.className = 'settings-wrapper';
Object.entries(config).forEach(([key, value]) => {
if (key === 'source_dirs') {
renderField(wrapper, key, value);
} else if (key === 'instances') {
renderPlexSonarrRadarrInstancesField(wrapper, value, rootConfig, 'nohl');
} else {
renderField(wrapper, key, value);
}
});
formFields.appendChild(wrapper);
}
================================================
FILE: web/static/js/settings/modules/poster_cleanarr.js
================================================
import { renderHelp } from '../../helper.js';
import { renderField, renderPlexSonarrRadarrInstancesField } from '../settings_helpers.js';
export function renderPosterCleanarrSettings(formFields, config, rootConfig) {
const wrapper = document.createElement('div');
const help = renderHelp('poster_cleanarr');
if (help) wrapper.appendChild(help);
wrapper.className = 'settings-wrapper';
Object.entries(config).forEach(([key, value]) => {
if (key === 'instances') {
renderPlexSonarrRadarrInstancesField(wrapper, value, rootConfig, 'poster_cleanarr');
} else {
renderField(wrapper, key, value);
}
});
formFields.appendChild(wrapper);
}
================================================
FILE: web/static/js/settings/modules/poster_renamerr.js
================================================
import { renderField, renderPlexSonarrRadarrInstancesField } from '../settings_helpers.js';
import { renderHelp } from '../../helper.js';
export function renderPosterRenamerrSettings(formFields, config, rootConfig) {
const wrapper = document.createElement('div');
const help = renderHelp('poster_renamerr');
if (help) wrapper.appendChild(help);
wrapper.className = 'settings-wrapper';
Object.entries(config).forEach(([key, value]) => {
if (key === 'instances') {
renderPlexSonarrRadarrInstancesField(wrapper, value, rootConfig, 'poster_renamerr');
} else {
renderField(wrapper, key, value);
}
});
formFields.appendChild(wrapper);
}
================================================
FILE: web/static/js/settings/modules/renameinatorr.js
================================================
import { renderHelp } from '../../helper.js';
import { renderField, renderPlexSonarrRadarrInstancesField } from '../settings_helpers.js';
export function renderRenameinatorrSettings(formFields, config, rootConfig) {
const wrapper = document.createElement('div');
const help = renderHelp('renameinatorr');
if (help) wrapper.appendChild(help);
wrapper.className = 'settings-wrapper';
Object.entries(config).forEach(([key, value]) => {
if (key === 'instances') {
renderPlexSonarrRadarrInstancesField(wrapper, value, rootConfig, 'renameinatorr');
} else {
renderField(wrapper, key, value);
}
});
formFields.appendChild(wrapper);
}
================================================
FILE: web/static/js/settings/modules/sync_gdrive.js
================================================
import { gdriveSyncModal } from '../modals.js';
import { renderHelp } from '../../helper.js';
import { renderField, renderTextareaArrayField } from '../settings_helpers.js';
let gdriveSyncData = [];
export function renderGdriveSettings(formFields, config) {
const wrapper = document.createElement('div');
const help = renderHelp('gdrive_sync');
if (help) wrapper.appendChild(help);
wrapper.className = 'settings-wrapper';
Object.entries(config).forEach(([key, value]) => {
if (key === 'token') {
wrapper.appendChild(renderTextareaArrayField(key, value));
} else if (key === 'gdrive_list') {
const field = document.createElement('div');
field.className = 'field setting-field';
field.innerHTML = `
`;
wrapper.appendChild(field);
const syncList = field.querySelector('#gdrive-sync-list');
gdriveSyncData = Array.isArray(value) ? [...value] : [];
function updateList() {
if (!Array.isArray(gdriveSyncData) || gdriveSyncData.length === 0) {
syncList.innerHTML = `
🚫 No drives to list.
Click "Add gDrive" to configure one.
🚫 No valid drives to list.
Click "Add gDrive" to configure one.
${entry.name || entry.id} → ${
entry.location
}
| Instance | Count | Tag Name | Ignore Tag | Unattended | Threshold | Actions |
|---|
${html}
`;
return div;
}
function boolDropdown(name, selected) {
return ``;
}
export function renderTextField(name, value) {
/**
* Render a list-of-directories field (no drag handles, no drag logic).
* @param {string} name
* @param {string[]} list
*/
const label = humanize(name);
const isDir = DIR_PICKER.includes(name);
const readonly = isDir ? 'readonly' : '';
const moduleName = window.currentModuleName;
const placeholder =
PLACEHOLDER_TEXT[moduleName]?.[name] ?? (isDir ? 'Click to pick a directory' : '');
const field = createField(
label,
``
);
if (isDir) {
const input = field.querySelector(`input[name="${name}"]`);
input.addEventListener('click', () => directoryPickerModal(input));
}
return field;
}
export function renderBooleanField(name, value) {
const label = humanize(name);
return createField(label, boolDropdown(name, value === true || value === 'true'));
}
export function renderDropdownField(name, value, options) {
const moduleName = window.currentModuleName;
const placeholder = PLACEHOLDER_TEXT[moduleName]?.[name];
let html = ``;
return createField(humanize(name), html);
}
/**
* Render a textarea for array or JSON input, auto-resizing to content.
* @param {string} name - The field name (key).
* @param {Array|Object|string} values - Array of lines or JSON object/string.
* @returns {HTMLDivElement} The created field element.
*/
export function renderTextareaArrayField(name, values) {
let content = '';
let placeholder = '';
if (name === 'token') {
placeholder = PLACEHOLDER_TEXT?.[window.currentModuleName]?.token ?? '';
content =
values === null || values === 'null'
? ''
: typeof values === 'object'
? JSON.stringify(values, null, 2)
: values;
} else {
content = Array.isArray(values) ? values.join('\n') : '';
placeholder = 'Enter items, one per line';
}
const moduleName = window.currentModuleName;
placeholder = PLACEHOLDER_TEXT?.[moduleName]?.[name] ?? placeholder;
const textarea = document.createElement('textarea');
textarea.name = name;
textarea.rows = 6;
textarea.className = 'textarea';
textarea.value = content;
textarea.placeholder = placeholder;
const field = createField(humanize(name), '');
field.querySelector('.field-control').appendChild(textarea);
setTimeout(() => {
if (textarea) {
textarea.style.height = 'auto';
textarea.style.height = textarea.scrollHeight + 'px';
textarea.addEventListener('input', () => {
textarea.style.height = 'auto';
textarea.style.height = textarea.scrollHeight + 'px';
});
}
}, 0);
return field;
}
/**
* Render a number input field.
* @param {string} name - The field name.
* @param {number} value - The current value.
* @returns {HTMLDivElement} The created field element.
*/
export function renderNumberField(name, value) {
const label = humanize(name);
const html = ``;
const div = createField(label, html);
div.classList.add('show-field');
return div;
}
export function renderRemoveBordersBooleanField(config) {
const name = 'remove_borders';
const label = humanize(name);
const borderColors = Array.isArray(config.border_colors)
? config.border_colors.filter(Boolean)
: [];
let forcedValue,
disabled,
warning = '';
if (borderColors.length === 0) {
forcedValue = true;
disabled = true;
warning =
'Borders will be removed because no border colors are set. Add a border color to disable this option.';
} else {
forcedValue = false;
disabled = true;
warning =
'Cannot remove borders while custom border colors are set. Remove all border colors to enable this option.';
}
let html = ``;
html += `
Note: This setting is automatically controlled:
`;
const div = createField(label, html);
div.classList.add('show-field');
return div;
}
export function renderPlexSonarrRadarrInstancesField(
formFields,
instanceList,
rootConfig,
moduleName
) {
const allInstancesEmpty =
!rootConfig.instances ||
!Object.values(rootConfig.instances).some(
(group) => group && typeof group === 'object' && Object.keys(group).length > 0
);
if (allInstancesEmpty) {
const field = document.createElement('div');
field.className = `field instances-field ${moduleName}`;
field.innerHTML = ``;
formFields.appendChild(field);
const listDiv = field.querySelector('.instances-list');
const noCard = document.createElement('div');
noCard.className = 'card plex-instance-card';
noCard.innerHTML = `
- If any border colors are set, borders will not be removed.
- If no border colors are set, borders will always be removed.
🚫 No instances configured for ${humanize(moduleName)}.
${humanize(instType)}
${humanize('radarr')}
🚫 No instances configured for ${humanize( 'radarr' )}.
${humanize('sonarr')}
🚫 No instances configured for ${humanize( 'sonarr' )}.
Plex
'; listDiv.appendChild(plexWrapper); plexInstances.forEach((pi) => { const libs = plexData[pi]?.library_names || []; const wrapper = document.createElement('div'); wrapper.innerHTML = `${humanize(pi)}
${humanize('plex')}
🚫 No instances configured for ${humanize( 'plex' )}.
DAPS
Dashboard
================================================
FILE: web/templates/pages/instances.html
================================================
================================================
FILE: web/templates/pages/logs.html
================================================
================================================
FILE: web/templates/pages/notifications.html
================================================
================================================
FILE: web/templates/pages/poster_search.html
================================================
================================================
FILE: web/templates/pages/schedule.html
================================================
================================================
FILE: web/templates/pages/settings.html
================================================
Search in:
GDrive Locations