${line\n .map((part) => (typeof part === 'string' ? part : renderHelpLink(part)))\n .join('')}
`\n : `${typeof line === 'string' ? line : renderHelpLink(line)}
`\n )\n .join('')\n : entry;\n\n let isToggling = false;\n toggle.addEventListener('click', () => {\n if (isToggling) return;\n isToggling = true;\n const isOpen = content.classList.toggle('show');\n if (isOpen) {\n content.style.maxHeight = content.scrollHeight + 'px';\n\n content.addEventListener('transitionend', function handler(e) {\n if (e.propertyName === 'max-height' && content.classList.contains('show')) {\n content.style.maxHeight = 'none'; // \"auto\" sizing from now on\n content.removeEventListener('transitionend', handler);\n isToggling = false;\n }\n });\n } else {\n content.style.maxHeight = content.scrollHeight + 'px'; // (in case it was 'none')\n\n void content.offsetHeight;\n content.style.maxHeight = '0px';\n content.addEventListener('transitionend', function handler(e) {\n if (e.propertyName === 'max-height' && !content.classList.contains('show')) {\n isToggling = false;\n content.removeEventListener('transitionend', handler);\n }\n });\n }\n });\n\n wrapper.appendChild(toggle);\n wrapper.appendChild(content);\n return wrapper;\n}\n\nfunction renderHelpLink(item) {\n if (item && item.type === 'link' && item.url) {\n return `${\n item.text || item.url\n }`;\n }\n return '';\n}\n\nexport async function fetchConfig() {\n try {\n const res = await fetch('/api/config');\n if (!res.ok) throw new Error('Failed to fetch config');\n return await res.json();\n } catch (err) {\n console.error('Error loading config:', err);\n return {};\n }\n}\nexport async function fetchStats(location) {\n if (!location)\n return {\n error: true,\n file_count: 0,\n size_bytes: 0,\n files: [],\n };\n try {\n const res = await fetch('/api/poster-search-stats', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\n location,\n }),\n });\n if (!res.ok) {\n return {\n error: true,\n file_count: 0,\n size_bytes: 0,\n files: [],\n };\n }\n return await res.json();\n } catch (err) {\n return {\n error: true,\n file_count: 0,\n size_bytes: 0,\n files: [],\n };\n }\n}\n"
},
{
"path": "web/static/js/index.js",
"content": "import { fetchConfig } from './helper.js';\n\nfunction parseVersionString(ver) {\n if (!ver) return {};\n const parts = ver.trim().split('.');\n if (parts.length < 4) return {};\n const version = parts.slice(0, 3).join('.');\n const branchAndBuild = parts[3];\n\n const m = branchAndBuild.match(/^([a-zA-Z]+)(\\d+)$/);\n let branch, build;\n if (m) {\n branch = m[1];\n build = parseInt(m[2], 10);\n } else {\n branch = branchAndBuild.replace(/(\\d+)$/, '');\n const buildMatch = branchAndBuild.match(/(\\d+)$/);\n build = buildMatch ? parseInt(buildMatch[1], 10) : null;\n }\n return {\n version,\n branch,\n build,\n full: ver.trim(),\n };\n}\n\nasync function getRemoteBuildCount(owner, repo, branch) {\n const apiUrl = `https://api.github.com/repos/${owner}/${repo}/commits?sha=${branch}&per_page=1`;\n try {\n const response = await fetch(apiUrl);\n if (!response.ok) return null;\n const link = response.headers.get('Link');\n if (!link) return 1; // If only one commit\n const match = link.match(/&page=(\\d+)>; rel=\"last\"/);\n if (match) return parseInt(match[1], 10);\n return 1;\n } catch {\n return null;\n }\n}\n\nasync function mainVersionCheck() {\n const localVerStr = await fetch('/api/version')\n .then((r) => r.text())\n .catch(() => null);\n const local = parseVersionString(localVerStr);\n if (!local.version || !local.branch || local.build === null) {\n document.getElementById('version').textContent = 'Version: ' + (localVerStr || 'unknown');\n return;\n }\n\n const remoteVersion = await fetch(\n `https://raw.githubusercontent.com/Drazzilb08/daps/${local.branch}/VERSION`\n )\n .then((r) => (r.ok ? r.text() : null))\n .catch(() => null);\n\n const remoteBuild = await getRemoteBuildCount('Drazzilb08', 'daps', local.branch);\n let remoteFull = '';\n let updateAvailable = false;\n if (remoteVersion && remoteBuild !== null) {\n remoteFull = `${remoteVersion.trim()}.${local.branch}${remoteBuild}`;\n if (remoteVersion.trim() === local.version && remoteBuild > local.build) {\n updateAvailable = true;\n } else if (remoteVersion.trim() !== local.version) {\n updateAvailable = true;\n }\n }\n document.getElementById('version').textContent = 'Version: ' + local.full;\n const badge = document.getElementById('update-badge');\n if (updateAvailable) {\n badge.style.display = '';\n badge.title = ''; // Use custom tooltip\n badge.onclick = () => window.open('https://github.com/Drazzilb08/daps/releases', '_blank');\n document.getElementById('tooltip-current-version').innerText = local.full;\n document.getElementById('tooltip-latest-version').innerText = remoteFull;\n } else {\n badge.style.display = 'none';\n }\n}\n\nexport function setTheme() {\n fetchConfig()\n .then((config) => {\n let theme =\n config && config.main && typeof config.main.theme === 'string'\n ? config.main.theme.toLowerCase()\n : 'light';\n\n function applySystemTheme() {\n const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');\n try {\n localStorage.setItem('theme', isDark ? 'dark' : 'light');\n } catch {}\n }\n\n if (window._themeMediaListener) {\n window\n .matchMedia('(prefers-color-scheme: dark)')\n .removeEventListener('change', window._themeMediaListener);\n window._themeMediaListener = null;\n }\n\n if (theme === 'auto') {\n applySystemTheme();\n window._themeMediaListener = applySystemTheme;\n window\n .matchMedia('(prefers-color-scheme: dark)')\n .addEventListener('change', window._themeMediaListener);\n } else {\n document.documentElement.setAttribute(\n 'data-theme',\n theme === 'dark' ? 'dark' : 'light'\n );\n try {\n localStorage.setItem('theme', theme);\n } catch {}\n }\n })\n .catch((err) => {\n console.error('Failed to fetch config:', err);\n document.documentElement.setAttribute('data-theme', 'light');\n try {\n localStorage.setItem('theme', 'light');\n } catch {}\n });\n}\n\nfunction showSplashScreen() {\n const viewFrame = document.getElementById('viewFrame');\n if (!viewFrame) return;\n viewFrame.innerHTML = `\n \n \n
\n `;\n viewFrame.classList.add('splash-mask', 'fade-in');\n\n const canvas = document.getElementById('splash-particles');\n if (canvas) animateSplashParticles(canvas);\n\n const title = document.querySelector('.splash-title');\n if (title) {\n const text = title.textContent;\n title.textContent = '';\n let idx = 0;\n const typer = setInterval(() => {\n title.textContent += text[idx++];\n if (idx === text.length) {\n clearInterval(typer);\n title.classList.add('splash-typing');\n }\n }, 75);\n }\n\n const icon = document.querySelector('.splash-icon');\n if (icon) {\n icon.classList.add('pulse');\n }\n}\n\nfunction animateSplashParticles(canvas) {\n canvas.style.display = 'block';\n const ctx = canvas.getContext('2d');\n function resizeCanvas() {\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n }\n resizeCanvas();\n window.addEventListener('resize', resizeCanvas);\n\n const particles = Array.from({ length: 60 }, () => ({\n x: Math.random() * canvas.width,\n y: Math.random() * canvas.height,\n r: Math.random() * 2 + 1,\n dx: (Math.random() - 0.5) * 0.5,\n dy: (Math.random() - 0.5) * 0.5,\n }));\n\n function animateParticlesFrame() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.fillStyle = getComputedStyle(document.documentElement)\n .getPropertyValue('--splash-particle-color')\n .trim();\n particles.forEach((p) => {\n ctx.beginPath();\n ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);\n ctx.fill();\n p.x += p.dx;\n p.y += p.dy;\n if (p.x < 0 || p.x > canvas.width) p.dx *= -1;\n if (p.y < 0 || p.y > canvas.height) p.dy *= -1;\n });\n requestAnimationFrame(animateParticlesFrame);\n }\n animateParticlesFrame();\n}\n\nsetTheme();\nmainVersionCheck();\nshowSplashScreen();\n"
},
{
"path": "web/static/js/instances.js",
"content": "import { fetchConfig } from './helper.js';\nimport { buildInstancesPayload } from './payload.js';\n\nimport { DAPS } from './common.js';\nconst { bindSaveButton, showToast, humanize, markDirty } = DAPS;\n\nexport async function loadInstances() {\n const config = await fetchConfig();\n const instances = config.instances || {};\n const form = document.getElementById('instancesForm');\n if (!form) return;\n form.innerHTML = '';\n for (const [service, items] of Object.entries(instances)) {\n const section = document.createElement('div');\n section.className = 'category';\n const h2 = document.createElement('h2');\n h2.textContent = humanize(service);\n section.appendChild(h2);\n const listDiv = document.createElement('div');\n for (const [name, settings] of Object.entries(items)) {\n const entry = createEntry(service, name, settings);\n listDiv.appendChild(entry);\n }\n const addBtn = document.createElement('button');\n addBtn.type = 'button';\n addBtn.className = 'instance-btn btn';\n addBtn.textContent = `+ Add ${humanize(service)}`;\n addBtn.addEventListener('click', () => {\n const newEntry = createEntry(\n service,\n '',\n {\n url: '',\n api: '',\n },\n true\n );\n listDiv.appendChild(newEntry);\n setTimeout(() => newEntry.classList.add('show-card'), 10);\n });\n section.appendChild(listDiv);\n section.appendChild(addBtn);\n form.appendChild(section);\n }\n\n document.querySelectorAll('.card').forEach((el, i) => {\n setTimeout(() => el.classList.add('show-card'), i * 80);\n });\n\n const saveBtn = document.getElementById('saveBtn');\n bindSaveButton(saveBtn, buildInstancesPayload, 'instances');\n}\n\n/**\n * Creates a DOM element representing an instance entry for a given service.\n *\n * @param {string} service - The service name.\n * @param {string} name - The instance name.\n * @param {Object} settings - The instance settings containing url and api key.\n * @param {boolean} [isNew=false] - Whether the entry is a newly added one.\n * @returns {HTMLElement} The DOM element representing the instance entry.\n */\nfunction createEntry(service, name, settings, isNew = false) {\n const card = document.createElement('div');\n card.className = 'card';\n\n const field = document.createElement('div');\n field.className = 'field';\n\n const nameLabel = document.createElement('label');\n nameLabel.textContent = 'Name';\n const urlLabel = document.createElement('label');\n urlLabel.textContent = 'URL';\n const apiLabel = document.createElement('label');\n apiLabel.textContent = 'API Key';\n\n field.appendChild(nameLabel); // col 1\n field.appendChild(urlLabel); // col 2\n field.appendChild(apiLabel); // col 3\n field.appendChild(document.createElement('div')); // col 4 (empty)\n\n const nameInput = document.createElement('input');\n nameInput.type = 'text';\n nameInput.name = `${service}__name`;\n nameInput.value = name;\n nameInput.required = true;\n nameInput.placeholder = 'Instance Name';\n nameInput.className = 'input';\n field.appendChild(nameInput);\n\n const urlInput = document.createElement('input');\n urlInput.type = 'text';\n urlInput.name = `${service}__url`;\n urlInput.value = settings.url || '';\n urlInput.placeholder = 'Instance URL';\n urlInput.className = 'input';\n field.appendChild(urlInput);\n\n const apiWrap = document.createElement('div');\n apiWrap.className = 'password-wrapper';\n const apiInput = document.createElement('input');\n apiInput.type = 'text';\n apiInput.name = `${service}__api`;\n apiInput.value = settings.api || '';\n apiInput.className = 'input masked-input';\n apiInput.autocomplete = 'off';\n apiInput.placeholder = 'Paste API Key here';\n const toggle = document.createElement('span');\n toggle.className = 'toggle-password';\n toggle.textContent = 'đïž';\n toggle.addEventListener('click', () => {\n const masked = apiInput.classList.toggle('masked-input');\n toggle.textContent = masked ? 'đïž' : 'đ';\n });\n apiWrap.appendChild(apiInput);\n apiWrap.appendChild(toggle);\n field.appendChild(apiWrap);\n\n const btnContainer = document.createElement('div');\n btnContainer.className = 'btn-container';\n\n const testBtn = document.createElement('button');\n testBtn.type = 'button';\n testBtn.textContent = 'Test';\n testBtn.className = 'btn run-btn';\n testBtn.addEventListener('click', async () => {\n testBtn.classList.remove('btn--success', 'btn--cancel', 'error');\n testBtn.textContent = 'Testing...';\n testBtn.classList.add('running');\n testBtn.disabled = true;\n const res = await fetch('/api/test-instance', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n service,\n name: nameInput.value.trim(),\n url: urlInput.value.trim(),\n api: apiInput.value.trim(),\n }),\n });\n if (res.ok) {\n showToast(`â
${nameInput.value.trim()} connection successful`, 'success');\n testBtn.textContent = 'Success';\n testBtn.classList.remove('running');\n testBtn.classList.add('btn--success');\n } else {\n const err = await res.json();\n showToast(\n `â ${nameInput.value.trim()} test failed: ${err.error || res.statusText}`,\n 'error'\n );\n testBtn.textContent = 'Fail';\n testBtn.classList.remove('running');\n testBtn.classList.add('btn--cancel', 'error');\n }\n setTimeout(() => {\n testBtn.textContent = 'Test';\n testBtn.classList.remove('btn--success', 'btn--cancel', 'error', 'running');\n testBtn.disabled = false;\n }, 2500);\n });\n btnContainer.appendChild(testBtn);\n\n const removeBtn = document.createElement('button');\n removeBtn.type = 'button';\n removeBtn.textContent = 'â';\n removeBtn.className = 'btn btn--cancel remove-instance';\n removeBtn.addEventListener('click', () => {\n const instanceName = nameInput.value || '\n \n
\n Welcome to DAPS
\nSelect one of the options above to get started.
\n\n
\n `;\n container.insertBefore(loader, container.firstChild);\n }\n loader.style.display = 'flex';\n } else if (loader) {\n const elapsed = Date.now() - loaderStartTime;\n const delay = Math.max(0, 4000 - elapsed); // 4s min for 1 cycle\n setTimeout(() => {\n loader.style.display = 'none';\n }, delay);\n }\n}\n\nfunction formatBytes(bytes) {\n if (bytes < 1024) return bytes + ' B';\n let kb = bytes / 1024;\n if (kb < 1024) return kb.toFixed(1) + ' KB';\n let mb = kb / 1024;\n if (mb < 1024) return mb.toFixed(1) + ' MB';\n return (mb / 1024).toFixed(2) + ' GB';\n}\n\nfunction renderStatsTable(statsArr, totals, title) {\n if (!statsArr.length) return '';\n const columns = [\n { key: 'name', label: 'Folder', isNumeric: false },\n { key: 'file_count', label: 'Files', isNumeric: true },\n { key: 'size_bytes', label: 'Size', isNumeric: true },\n { key: 'percent', label: '% of Total', isNumeric: true },\n ];\n\n let arr = statsArr.map((s) => ({\n ...s,\n percent: totals.files ? (s.file_count / totals.files) * 100 : 0,\n }));\n let header = columns.map((col) => `\n
\n Status
\n \n \n \n \n
\n Loading Posters...
\n ${title}
\n \n \n \n
\n \n ${renderStatsTable([...gdriveStatsData], gdriveTotals, 'GDrive Locations')}\n
\n \n ${renderStatsTable(assetsStatsData, assetsTotals, 'Assets Directory')}\n
\n `;\n\n const select = document.getElementById('gdrive-sort-select');\n if (select) {\n select.value = gdriveSortMode;\n select.onchange = function () {\n gdriveSortMode = this.value;\n let arr = gdriveStatsData.map((s) => ({ ...s }));\n sortGdriveStats(arr, gdriveSortMode, priorityMap);\n document.getElementById('gdrive-stats-table').innerHTML = renderStatsTable(\n arr,\n gdriveTotals,\n 'GDrive Locations'\n );\n };\n }\n}\n\nfunction setupStatsToggle() {\n const btn = getById('toggle-stats-btn');\n const card = getById('poster-stats-card');\n btn.textContent = 'đ Show Statistics';\n card.style.display = 'none';\n card.dataset.expanded = ''; // Not expanded\n btn.onclick = function () {\n const expanded = card.style.display !== '' && card.style.display !== 'block';\n if (expanded) {\n card.style.display = '';\n card.dataset.expanded = '1';\n btn.textContent = 'đ Hide Statistics';\n } else {\n card.style.display = 'none';\n card.dataset.expanded = '';\n btn.textContent = 'đ Show Statistics';\n }\n };\n}\n\nfunction getById(id) {\n return document.getElementById(id);\n}\nfunction highlight(str, term) {\n if (!term) return str;\n const regex = new RegExp(`(${term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&')})`, 'gi');\n return str.replace(regex, `$1`);\n}\nfunction showSpinner(show) {\n const spinner = getById(IDS.statsSpinner);\n if (spinner) spinner.style.display = show ? '' : 'none';\n}\nfunction materialIcon(name, style = '') {\n return ``;\n}\n\nfunction showImageModal(imgSrc, caption) {\n closeImageModal();\n const modal = document.createElement('div');\n modal.id = 'img-preview-modal';\n modal.className = 'show';\n modal.innerHTML = `\n \n \n \n ![\"Preview\"](\"${imgSrc}\")
\n
\n `;\n document.body.appendChild(modal);\n modal.querySelector('.img-modal-bg').onclick = closeImageModal;\n modal.querySelector('.img-modal-close').onclick = closeImageModal;\n}\nfunction closeImageModal() {\n const old = document.getElementById('img-preview-modal');\n if (old) old.remove();\n}\n\nlet hoverPreviewImg = null;\nfunction setupHoverPreview() {\n hoverPreviewImg = document.querySelector('.hover-preview');\n if (!hoverPreviewImg) {\n hoverPreviewImg = document.createElement('img');\n hoverPreviewImg.className = 'hover-preview';\n hoverPreviewImg.style.display = 'none';\n hoverPreviewImg.style.position = 'absolute';\n hoverPreviewImg.style.pointerEvents = 'none';\n hoverPreviewImg.style.maxWidth = '200px';\n hoverPreviewImg.style.maxHeight = '200px';\n hoverPreviewImg.style.zIndex = '10002';\n document.body.appendChild(hoverPreviewImg);\n }\n}\nsetupHoverPreview();\n\nasync function fetchAllFileLists() {\n showSpinner(true);\n config = await fetchConfig();\n\n gdriveLocations = (config.sync_gdrive?.gdrive_list || []).map((g) => ({\n name: g.name,\n location: g.location,\n }));\n const gdriveLocSet = new Set(gdriveLocations.map((g) => g.location));\n const sourceDirs = config.poster_renamerr?.source_dirs || [];\n customLocations = sourceDirs.filter((dir) => !gdriveLocSet.has(dir));\n assetsDir = config.poster_renamerr?.destination_dir || '';\n\n gdriveFiles = [];\n for (const { name, location } of gdriveLocations) {\n try {\n const res = await fetch('/api/poster-search-stats', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ location }),\n });\n const stats = await res.json();\n if (Array.isArray(stats.files)) {\n stats.files.forEach((f) => gdriveFiles.push({ file: f, name, location }));\n }\n } catch {}\n }\n\n customFiles = [];\n for (const dir of customLocations) {\n try {\n const res = await fetch('/api/poster-search-stats', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ location: dir }),\n });\n const stats = await res.json();\n if (Array.isArray(stats.files)) {\n stats.files.forEach((f) =>\n customFiles.push({\n file: f,\n name: dir.split('/').pop() + ' (Custom)',\n location: dir,\n })\n );\n }\n } catch {}\n }\n\n assetsFiles = [];\n if (assetsDir) {\n try {\n const res = await fetch('/api/poster-search-stats', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ location: assetsDir }),\n });\n const stats = await res.json();\n if (Array.isArray(stats.files)) {\n assetsFiles = stats.files;\n }\n } catch {\n assetsFiles = [];\n }\n }\n showSpinner(false);\n}\n\nfunction renderResults(term) {\n const resultsDiv = getById(IDS.searchResults);\n let html = '';\n let useAssets = getById(IDS.scopeToggle).checked;\n\n if (!useAssets) {\n const groups = {};\n [...gdriveFiles, ...customFiles].forEach(({ file, name, location }) => {\n if (!term || file.toLowerCase().includes(term)) {\n const key = name + '||' + location;\n if (!groups[key]) groups[key] = { name, location, files: [] };\n groups[key].files.push(file);\n }\n });\n Object.values(groups).forEach((group) => {\n const locate = encodeURIComponent(group.location);\n html += `${caption || ''}
\n \n
`;\n });\n }\n if (useAssets && assetsFiles.length) {\n const matches = assetsFiles.filter((file) => {\n if (file.startsWith('tmp/')) return false;\n if (file === '.DS_Store') return false;\n if (!term) return true;\n const lower = file.toLowerCase();\n const fname = file.split('/').pop().toLowerCase();\n return lower.includes(term) || fname.includes(term);\n });\n if (matches.length) {\n const locate = encodeURIComponent(assetsDir);\n html += `${\n group.name\n }
\n - ${group.files\n .map(\n (f) =>\n `
- \n ${highlight(f, term)}\n \n `\n )\n .join('')}
\n
`;\n }\n }\n resultsDiv.innerHTML =\n html ||\n `Assets Dir
\n - ${matches\n .map(\n (f) =>\n `
- \n ${highlight(f, term)}\n \n `\n )\n .join('')}
No results found. Try another search or check your filters.
`;\n}\n\nfunction copyToClipboard(btn, text) {\n navigator.clipboard\n .writeText(text)\n .then(() => {\n const def = btn.querySelector('.copy-btn-default');\n const copied = btn.querySelector('.copy-btn-copied');\n if (def && copied) {\n def.style.display = 'none';\n copied.style.display = 'inline';\n setTimeout(() => {\n def.style.display = '';\n copied.style.display = 'none';\n }, 1400);\n }\n })\n .catch(() => {\n showToast && showToast('Could not copy to clipboard.', 'error');\n });\n}\n\nfunction setupEventListeners() {\n const toggle = getById(IDS.scopeToggle);\n const label = getById(IDS.scopeLabel);\n toggle.checked = false;\n label.textContent = 'GDrive Locations';\n toggle.onchange = () => {\n label.textContent = toggle.checked ? 'Assets Directory' : 'GDrive Locations';\n getById(IDS.searchInput).value = '';\n getById(IDS.searchResults).innerHTML = '';\n };\n\n document.addEventListener('keydown', (e) => {\n const input = getById(IDS.searchInput);\n const modal = document.getElementById('img-preview-modal');\n if ((e.key === '/' && !e.ctrlKey) || (e.key === 'f' && e.ctrlKey)) {\n e.preventDefault();\n input && input.focus();\n } else if (e.key === 'Escape') {\n if (modal) closeImageModal();\n else input && (input.value = '');\n } else if (e.key === 'Enter' && document.activeElement === input) {\n e.preventDefault();\n renderResults(input.value.trim().toLowerCase());\n }\n });\n\n getById(IDS.searchInput).onkeypress = (e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n renderResults(e.target.value.trim().toLowerCase());\n }\n };\n\n getById(IDS.searchResults).addEventListener('click', (e) => {\n const copyBtn = e.target.closest('.copy-btn');\n if (copyBtn) {\n e.stopPropagation();\n let file = copyBtn.getAttribute('aria-label') || '';\n file = file\n .replace(/^Copy filename\\s*/i, '')\n .replace(/^Copied\\s*/i, '')\n .trim();\n if (!file) {\n const span = copyBtn.closest('li')?.querySelector('.poster-file-label');\n if (span) file = span.textContent;\n }\n copyToClipboard(copyBtn, file);\n return false;\n }\n\n const label = e.target.closest('.poster-file-label');\n if (label) {\n let location = decodeURIComponent(label.getAttribute('data-location') || '');\n let path = decodeURIComponent(label.getAttribute('data-file') || '');\n let caption = label.textContent;\n if (location && path) {\n const url = `/api/preview-poster?location=${encodeURIComponent(\n location\n )}&path=${encodeURIComponent(path)}`;\n showImageModal(url, caption);\n }\n return false;\n }\n });\n\n getById(IDS.searchResults).addEventListener('mouseover', (e) => {\n const label = e.target.closest('.poster-file-label');\n if (label) {\n let location = decodeURIComponent(label.getAttribute('data-location') || '');\n let path = decodeURIComponent(label.getAttribute('data-file') || '');\n if (location && path) {\n const url = `/api/preview-poster?location=${encodeURIComponent(\n location\n )}&path=${encodeURIComponent(path)}&thumb=1`;\n hoverPreviewImg.src = url;\n hoverPreviewImg.style.display = 'block';\n }\n }\n });\n getById(IDS.searchResults).addEventListener('mousemove', (e) => {\n if (hoverPreviewImg && hoverPreviewImg.style.display === 'block') {\n const imgWidth = hoverPreviewImg.naturalWidth\n ? Math.min(hoverPreviewImg.naturalWidth, 200)\n : 200;\n const imgHeight = hoverPreviewImg.naturalHeight\n ? Math.min(hoverPreviewImg.naturalHeight, 200)\n : 200;\n const vpWidth = window.innerWidth;\n const vpHeight = window.innerHeight;\n let left = e.pageX + 14;\n let top = e.pageY + 14;\n if (left + imgWidth > vpWidth - 10) left = Math.max(10, vpWidth - imgWidth - 10);\n if (top + imgHeight > vpHeight - 10) top = Math.max(10, vpHeight - imgHeight - 10);\n hoverPreviewImg.style.left = left + 'px';\n hoverPreviewImg.style.top = top + 'px';\n }\n });\n getById(IDS.searchResults).addEventListener('mouseout', (e) => {\n if (e.target.closest('.poster-file-label')) {\n hoverPreviewImg.style.display = 'none';\n }\n });\n}\n\nexport async function initPosterSearch() {\n showLoaderModal(true);\n getById(IDS.searchResults).innerHTML = '';\n getById(IDS.searchInput).value = '';\n await fetchAllFileLists();\n setupEventListeners();\n showLoaderModal(false);\n setupStatsToggle();\n await fetchAndRenderStats();\n}\n"
},
{
"path": "web/static/js/schedule.js",
"content": "import { fetchConfig, renderHelp, moduleOrder } from './helper.js';\nimport { buildSchedulePayload } from './payload.js';\nimport { navigateTo } from './navigation.js';\nimport { DAPS } from './common.js';\nconst { bindSaveButton, showToast, humanize } = DAPS;\n\nexport async function loadSchedule() {\n const config = await fetchConfig();\n const schedule = config.schedule || {};\n const form = document.getElementById('scheduleForm');\n if (!form) return;\n form.innerHTML = '';\n const help = renderHelp('schedule');\n if (help) form.before(help);\n\n const orderedModules = (moduleOrder || Object.keys(schedule)).filter((m) =>\n schedule.hasOwnProperty(m)\n );\n for (const [i, module] of orderedModules.entries()) {\n const time = schedule[module];\n const label = document.createElement('label');\n label.textContent = humanize(module);\n const input = document.createElement('input');\n input.type = 'text';\n input.name = module;\n input.value = time || '';\n input.className = 'input';\n input.placeholder = 'e.g. hourly(01), daily(12:00|18:00), weekly(Mon@12:00|Tue@18:00)';\n const field = document.createElement('div');\n field.className = 'field';\n field.appendChild(label);\n field.appendChild(input);\n\n input.addEventListener('input', () => {\n if (!input.value.trim() || isValidSchedule(input.value.trim())) {\n input.classList.remove('input-invalid');\n } else {\n input.classList.add('input-invalid');\n }\n });\n\n const runBtn = document.createElement('button');\n runBtn.type = 'button';\n runBtn.textContent = 'Run Now';\n runBtn.className = 'run-btn btn';\n runBtn.addEventListener('mouseenter', () => {\n if (runBtn.classList.contains('running')) {\n runBtn.textContent = 'Cancel';\n runBtn.classList.add('cancel-hover');\n }\n });\n runBtn.addEventListener('mouseleave', () => {\n if (runBtn.classList.contains('running')) {\n runBtn.textContent = 'Running';\n runBtn.classList.remove('cancel-hover');\n }\n });\n\n runBtn.addEventListener('click', async () => {\n if (runBtn.classList.contains('running')) {\n runBtn.textContent = 'Canceling';\n await fetch('/api/cancel', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ module }),\n });\n runBtn.classList.remove('running');\n runBtn.textContent = 'Run Now';\n showToast(`đ ${humanize(module)} cancelled successfully.`, 'info');\n return;\n }\n runBtn.textContent = 'Running';\n runBtn.classList.add('running');\n if (!btnContainer.querySelector('.run-btn + .run-btn')) {\n const viewLogsBtn = document.createElement('button');\n viewLogsBtn.type = 'button';\n viewLogsBtn.textContent = 'View Logs';\n viewLogsBtn.className = 'run-btn btn';\n viewLogsBtn.addEventListener('click', () => {\n window._preselectedLogModule = module;\n window.skipDirtyCheck = true;\n const link = document.createElement('a');\n link.href = '/pages/logs';\n navigateTo(link);\n });\n btnContainer.appendChild(viewLogsBtn);\n }\n const res = await fetch('/api/run', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ module }),\n });\n if (!res.ok) {\n const err = await res.json();\n runBtn.classList.remove('running');\n runBtn.textContent = 'Run Now';\n showToast(\n `â Failed to start ${humanize(module)}: ${err.error || res.statusText}`,\n 'error'\n );\n return;\n }\n showToast(`â¶ïž ${humanize(module)} started successfully!`, 'success');\n const interval = setInterval(async () => {\n const resStatus = await fetch(`/api/status?module=${module}`);\n const { running } = await resStatus.json();\n if (!running) {\n runBtn.classList.remove('running');\n runBtn.textContent = 'Run Now';\n clearInterval(interval);\n }\n }, 2000);\n });\n\n const btnContainer = document.createElement('div');\n btnContainer.className = 'btn-container';\n btnContainer.appendChild(runBtn);\n field.appendChild(btnContainer);\n\n (async () => {\n const resStatus = await fetch(`/api/status?module=${module}`);\n const { running } = await resStatus.json();\n if (running) {\n runBtn.textContent = 'Running';\n runBtn.classList.add('running');\n const viewLogsBtn = document.createElement('button');\n viewLogsBtn.type = 'button';\n viewLogsBtn.textContent = 'View Logs';\n viewLogsBtn.className = 'run-btn btn ';\n viewLogsBtn.addEventListener('click', () => {\n window._preselectedLogModule = module;\n window.skipDirtyCheck = true;\n const link = document.createElement('a');\n link.href = '/fragments/logs';\n window.DAPS.navigateTo(link);\n });\n btnContainer.appendChild(viewLogsBtn);\n }\n })();\n\n const card = document.createElement('div');\n card.className = 'card';\n card.appendChild(field);\n form.appendChild(card);\n setTimeout(() => card.classList.add('show-card'), 40 * i);\n }\n\n if (window._scheduleRunInterval) {\n clearInterval(window._scheduleRunInterval);\n window._scheduleRunInterval = null;\n }\n window._scheduleRunInterval = setInterval(() => {\n document.querySelectorAll('.field').forEach((field) => {\n const inp = field.querySelector('input');\n const runBtn = field.querySelector('button.run-btn');\n if (!inp || !runBtn) return;\n const module = inp.name;\n fetch(`/api/status?module=${module}`)\n .then((res) => res.json())\n .then(({ running }) => {\n if (running && !runBtn.classList.contains('running')) {\n runBtn.textContent = 'Running';\n runBtn.classList.add('running');\n const btnContainer = runBtn.parentElement;\n const viewExists = btnContainer.querySelector('.run-btn + .run-btn');\n if (!viewExists) {\n const viewLogsBtn = document.createElement('button');\n viewLogsBtn.type = 'button';\n viewLogsBtn.textContent = 'View Logs';\n viewLogsBtn.className = 'run-btn';\n viewLogsBtn.addEventListener('click', () => {\n window._preselectedLogModule = module;\n const link = document.createElement('a');\n link.href = '/fragments/logs';\n window.DAPS.navigateTo(link);\n });\n btnContainer.appendChild(viewLogsBtn);\n }\n } else if (!running && runBtn.classList.contains('running')) {\n runBtn.classList.remove('running');\n runBtn.textContent = 'Run Now';\n const btnContainer = runBtn.parentElement;\n const viewLogsBtn = btnContainer.querySelector('.run-btn + .run-btn');\n if (viewLogsBtn) btnContainer.removeChild(viewLogsBtn);\n }\n });\n });\n }, 3000);\n\n const saveBtn = document.getElementById('saveBtn');\n bindSaveButton(saveBtn, buildSchedulePayload, 'schedule');\n\n const searchInput = document.getElementById('schedule-search');\n if (searchInput) {\n searchInput.addEventListener('input', (e) => {\n DAPS.skipDirtyCheck = true;\n searchInput.defaultValue = searchInput.value;\n const query = e.target.value.toLowerCase();\n document.querySelectorAll('.card').forEach((card) => {\n const text = card.textContent.toLowerCase();\n card.style.display = text.includes(query) ? 'flex' : 'none';\n });\n });\n }\n}\n\nfunction isValidSchedule(val) {\n if (!val) return true;\n if (/^hourly\\(\\d{2}\\)$/i.test(val)) return true;\n if (/^daily\\(\\d{2}:\\d{2}(?:\\|\\d{2}:\\d{2})*\\)$/i.test(val)) return true;\n if (/^weekly\\([a-z]+@\\d{2}:\\d{2}(?:\\|[a-z]+@\\d{2}:\\d{2})*\\)$/i.test(val)) return true;\n if (/^monthly\\(\\d{1,2}@\\d{2}:\\d{2}(?:\\|\\d{1,2}@\\d{2}:\\d{2})*\\)$/i.test(val)) return true;\n if (/^cron\\([^\\)]+\\)$/i.test(val)) return true;\n return false;\n}\n"
},
{
"path": "web/static/js/settings/constants.js",
"content": "export const BOOL_FIELDS = [\n 'dry_run',\n 'skip',\n 'sync_posters',\n 'run_border_replacerr',\n 'print_files',\n 'rename_folders',\n 'unattended',\n 'enable_batching',\n 'asset_folders',\n 'print_only_renames',\n 'incremental_border_replacerr',\n 'silent',\n 'disable_batching',\n 'replace_border',\n 'update_notifications',\n];\n\nexport const TEXT_FIELDS = [\n 'tag_name',\n 'ignore_tag',\n 'custom_format',\n 'title',\n 'alt_title',\n 'poster_path',\n];\n\nexport const TEXTAREA_FIELDS = [\n 'exclude_profiles',\n 'exclude_movies',\n 'exclude_series',\n 'exclusion_list',\n 'exclude',\n 'token',\n 'ignore_collections',\n 'ignore_root_folders',\n 'ignore_media',\n];\n\nexport const INT_FIELDS = [\n 'count',\n 'radarr_count',\n 'sonarr_count',\n 'season_monitored_threshold',\n 'border_width',\n 'searches',\n];\n\nexport const JSON_FIELDS = ['token'];\n\nexport const DROP_DOWN_FIELDS = ['log_level', 'action_type', 'app_type', 'app_instance', 'theme'];\n\n// Add to constants.js\n\nexport const DROP_DOWN_OPTIONS = {\n mode: ['resolve', 'symlink', 'hardlink'],\n log_level: ['info', 'debug'],\n action_type: ['copy', 'move', 'hardlink', 'symlink'],\n theme: ['light', 'dark', 'auto'],\n month: [\n { value: '01', label: 'Jan', days: 31 },\n { value: '02', label: 'Feb', days: 28 },\n { value: '03', label: 'Mar', days: 31 },\n { value: '04', label: 'Apr', days: 30 },\n { value: '05', label: 'May', days: 31 },\n { value: '06', label: 'Jun', days: 30 },\n { value: '07', label: 'Jul', days: 31 },\n { value: '08', label: 'Aug', days: 31 },\n { value: '09', label: 'Sep', days: 30 },\n { value: '10', label: 'Oct', days: 31 },\n { value: '11', label: 'Nov', days: 30 },\n { value: '12', label: 'Dec', days: 31 },\n ],\n};\n\nexport const DIR_PICKER = ['source_dirs', 'destination_dir', 'data_dir'];\n\nexport const ARR_AND_PLEX_INSTANCES = [\n 'poster_renamerr',\n 'labelarr',\n 'border_replacerr',\n 'sync_gdrive',\n 'nohl',\n 'unmatched_assets',\n 'poster_cleanarr',\n 'health_checkarr',\n 'renameinatorr',\n];\nexport const SHOW_PLEX_IN_INSTANCE_FIELD = [\n 'poster_renamerr',\n 'unmatched_assets',\n 'poster_cleanarr'\n];\n\nexport const DRAG_AND_DROP = {\n poster_renamerr: ['source_dirs'],\n};\n\nexport const LIST_FIELD = {\n unmatched_assets: ['source_dirs'],\n poster_cleanarr: ['source_dirs'],\n nohl: ['source_dirs'],\n};\n\nexport const PLACEHOLDER_TEXT = {\n sync_gdrive: {\n name: 'Unique name for your Gdrive',\n 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}',\n gdrive_sa_location: 'Click to pick your service account fileâŠ',\n location: 'Click to pick the destination directory',\n id: 'Paste the Gdrive ID to pull posters from',\n client_id: 'asdasds.apps.googleusercontent.com',\n client_secret: 'GOCSPX-asda123',\n },\n poster_renamerr: {\n source_dirs: 'Click to pick a source directory...',\n destination_dir: '/path/to/Kometa/assets_directory',\n },\n upgradinatorr: {\n data_dir: '/path/to/media_folder',\n instance: 'Select an instance',\n count: '0',\n tag_name: 'Enter the tag you wish to use',\n ignore_tag: 'The tag you wish to use to ignore an entry',\n },\n renameinatorr: {\n tag_name: 'Enter the tag you wish to use',\n },\n nohl: {\n source_dirs: 'Click to pick a source directory...',\n },\n border_replacerr: {\n holiday_name: 'Holiday name',\n },\n labelarr: {\n labels: 'Comma-separated list of labels',\n },\n};\n"
},
{
"path": "web/static/js/settings/modal_helpers.js",
"content": "import { DROP_DOWN_OPTIONS } from './constants.js';\nimport { holidayPresets } from './presets.js';\n\nexport function populateScheduleDropdowns() {\n const months = DROP_DOWN_OPTIONS.month; // Array of { value, label, days }\n ['from', 'to'].forEach((type) => {\n const monthSel = document.getElementById(`schedule-${type}-month`);\n const daySel = document.getElementById(`schedule-${type}-day`);\n if (!monthSel || !daySel) return;\n\n monthSel.innerHTML = months\n .map((m) => ``)\n .join('');\n\n function updateDays() {\n const mIdx = months.findIndex((m) => m.value === monthSel.value);\n const days = mIdx >= 0 ? months[mIdx].days : 31;\n let opts = '';\n for (let d = 1; d <= days; d++) {\n const dd = String(d).padStart(2, '0');\n opts += ``;\n }\n daySel.innerHTML = opts;\n }\n monthSel.addEventListener('change', updateDays);\n updateDays();\n });\n}\n\nexport function loadHolidayPresets() {\n const presetSelect = document.getElementById('holiday-preset');\n if (!presetSelect) return;\n presetSelect.innerHTML =\n '' +\n Object.keys(holidayPresets || {})\n .map((label) => ``)\n .join('');\n presetSelect.onchange = function () {\n const label = presetSelect.value;\n const modal = presetSelect.closest('.modal-content');\n if (!label || !holidayPresets[label]) return;\n const preset = holidayPresets[label];\n modal.querySelector('#holiday-name').value = label;\n if (\n preset.schedule &&\n preset.schedule.startsWith('range(') &&\n preset.schedule.endsWith(')')\n ) {\n const range = preset.schedule.slice(6, -1);\n const [from, to] = range.split('-');\n if (from) {\n const [fromMonth, fromDay] = from.split('/');\n modal.querySelector('#schedule-from-month').value = fromMonth || '';\n modal.querySelector('#schedule-from-day').value = fromDay || '';\n }\n if (to) {\n const [toMonth, toDay] = to.split('/');\n modal.querySelector('#schedule-to-month').value = toMonth || '';\n modal.querySelector('#schedule-to-day').value = toDay || '';\n }\n }\n const colorContainer = modal.querySelector('#border-colors-container');\n colorContainer.innerHTML = '';\n (preset.colors || []).forEach((color) => {\n const swatch = document.createElement('div');\n swatch.className = 'subfield';\n swatch.innerHTML = `\n \n \n `;\n swatch.querySelector('.remove-btn').onclick = () => swatch.remove();\n colorContainer.appendChild(swatch);\n });\n };\n}\n\nexport async function populateGDrivePresetsDropdown(gdriveSyncData, editingIdx = null) {\n const presetSelect = document.getElementById('gdrive-sync-preset');\n const presetDetail = document.getElementById('gdrive-preset-detail');\n const searchBox = document.getElementById('gdrive-preset-search');\n if (!presetSelect) return;\n\n const entries = await gdrivePresets();\n\n const idsInUse = gdriveSyncData\n .filter((entry, i) => i !== editingIdx)\n .map((entry) => String(entry.id));\n presetSelect.innerHTML =\n '' +\n entries\n .map(\n (drive) =>\n ``\n )\n .join('');\n\n setTimeout(function () {\n if ($('#gdrive-sync-preset').data('select2')) {\n $('#gdrive-sync-preset').select2('destroy');\n }\n $('#gdrive-sync-preset').select2({\n placeholder: 'Select a GDrive preset',\n allowClear: true,\n width: '100%',\n dropdownParent: $('#gdrive-sync-preset').closest('.modal-content'),\n language: {\n searching: () => 'Type to filter drivesâŠ',\n noResults: () => 'No matching presets',\n inputTooShort: () => 'Type to searchâŠ',\n },\n });\n $('#gdrive-sync-preset').on('select2:open', function () {\n setTimeout(() => {\n $('.select2-search__field').attr('placeholder', 'Type to search presetsâŠ');\n }, 0);\n });\n }, 0);\n\n function updatePresetDetail() {\n const id = presetSelect.value;\n const drive = entries.find((d) => String(d.id) === String(id));\n if (id && drive) {\n if (document.getElementById('gdrive-id'))\n document.getElementById('gdrive-id').value = drive.id ?? '';\n if (document.getElementById('gdrive-name'))\n document.getElementById('gdrive-name').value = drive.name ?? '';\n if (document.getElementById('gdrive-location'))\n document.getElementById('gdrive-location').value = drive.location ?? '';\n\n if (presetDetail) {\n let metaLines = '';\n\n if ('type' in drive) {\n metaLines += `Type: ${drive.type}
`;\n }\n\n if ('content' in drive && drive.content) {\n metaLines += `Content:
`;\n if (Array.isArray(drive.content)) {\n metaLines += `${drive.content\n .map((line) => `
`;\n } else {\n metaLines += `${line}
`)\n .join('')}${drive.content}
`;\n }\n }\n\n for (const key of Object.keys(drive)) {\n if (['name', 'id', 'type', 'content'].includes(key)) continue;\n metaLines += `${\n key.charAt(0).toUpperCase() + key.slice(1)\n }: ${drive[key]}
`;\n }\n presetDetail.innerHTML = `${\n metaLines || 'No extra metadata'\n }
`;\n }\n } else if (presetDetail) {\n presetDetail.innerHTML = '';\n }\n }\n presetSelect.onchange = updatePresetDetail;\n updatePresetDetail();\n\n if (searchBox) {\n searchBox.addEventListener('input', () => {\n const filter = searchBox.value.toLowerCase();\n Array.from(presetSelect.options).forEach((opt) => {\n if (!opt.value) return;\n opt.style.display = opt.text.toLowerCase().includes(filter) ? '' : 'none';\n });\n let firstVisible = Array.from(presetSelect.options).find(\n (opt) => opt.style.display !== 'none' && opt.value\n );\n if (firstVisible) {\n presetSelect.value = firstVisible.value;\n updatePresetDetail();\n } else {\n presetSelect.value = '';\n updatePresetDetail();\n }\n });\n }\n}\n\nasync function gdrivePresets() {\n if (window._gdrivePresetsCache) return window._gdrivePresetsCache; // use cache\n try {\n const response = await fetch(\n 'https://raw.githubusercontent.com/Drazzilb08/daps-gdrive-presets/main/presets.json'\n );\n if (!response.ok) throw new Error('Failed to fetch GDrive presets');\n const data = await response.json();\n\n window._gdrivePresetsCache = Array.isArray(data)\n ? data\n : Object.entries(data).map(([name, value]) =>\n typeof value === 'object'\n ? {\n name,\n ...value,\n }\n : {\n name,\n id: value,\n }\n );\n } catch (err) {\n console.error('Error loading GDrive presets:', err);\n window._gdrivePresetsCache = [];\n }\n return window._gdrivePresetsCache;\n}\n"
},
{
"path": "web/static/js/settings/modals.js",
"content": "import { PLACEHOLDER_TEXT } from './constants.js';\nimport {\n populateScheduleDropdowns,\n loadHolidayPresets,\n populateGDrivePresetsDropdown,\n} from './modal_helpers.js';\nimport { DAPS } from '../common.js';\nconst { markDirty, humanize } = DAPS;\n\nconst directoryCache = {};\n\nfunction modalFooterHtml(saveId, cancelId, saveLabel = 'Save') {\n return `\n \n `;\n}\n\nfunction attachModalSaveCancel(modal, saveSelector, cancelSelector, onSave) {\n const saveBtn = modal.querySelector(saveSelector);\n const cancelBtn = modal.querySelector(cancelSelector);\n if (saveBtn) saveBtn.onclick = onSave;\n if (cancelBtn) cancelBtn.onclick = () => modal.classList.remove('show');\n}\n\nexport function gdriveSyncModal(editIdx, gdriveSyncData, updateGdriveList) {\n const moduleName = 'sync_gdrive';\n const isEdit = typeof editIdx === 'number';\n let modal = document.getElementById('gdrive-sync-modal');\n if (!modal) {\n modal = document.createElement('div');\n modal.id = 'gdrive-sync-modal';\n modal.className = 'modal';\n modal.innerHTML = `\n \n `;\n document.body.appendChild(modal);\n modal\n .querySelector('#gdrive-location')\n .addEventListener('click', () =>\n directoryPickerModal(modal.querySelector('#gdrive-location'))\n );\n setTimeout(() => populateGDrivePresetsDropdown(gdriveSyncData, modal.editingIdx), 0);\n }\n modal.editingIdx = isEdit ? editIdx : null;\n const presetSelect = modal.querySelector('#gdrive-sync-preset');\n const presetDetail = modal.querySelector('#gdrive-preset-detail');\n if (presetSelect) {\n if ($(presetSelect).data('select2')) {\n $(presetSelect).val('').trigger('change');\n } else {\n presetSelect.value = '';\n }\n }\n if (presetDetail) presetDetail.innerHTML = '';\n const nameInput = modal.querySelector('#gdrive-name');\n const idInput = modal.querySelector('#gdrive-id');\n const locInput = modal.querySelector('#gdrive-location');\n if (isEdit) {\n const entry = gdriveSyncData[editIdx];\n nameInput.value = entry.name || '';\n idInput.value = entry.id || '';\n locInput.value = entry.location || '';\n } else {\n nameInput.value = '';\n idInput.value = '';\n locInput.value = '';\n }\n const heading = modal.querySelector('h2');\n if (heading) {\n heading.textContent = (isEdit ? 'Edit' : 'Add') + ' GDrive Sync';\n }\n\n function handleGDriveSave() {\n const name = modal.querySelector('#gdrive-name').value.trim();\n const id = modal.querySelector('#gdrive-id').value.trim();\n const loc = modal.querySelector('#gdrive-location').value.trim();\n if (!name || !id || !loc) {\n return alert('All fields must be filled.');\n }\n const entry = { id, location: loc, name };\n if (typeof editIdx === 'number') {\n gdriveSyncData[editIdx] = entry;\n } else {\n gdriveSyncData.push(entry);\n }\n if (typeof updateGdriveList === 'function') updateGdriveList();\n markDirty();\n populateGDrivePresetsDropdown(gdriveSyncData, modal.editingIdx);\n modal.classList.remove('show');\n }\n attachModalSaveCancel(modal, '#gdrive-save-btn', '#gdrive-cancel-btn', handleGDriveSave);\n modal.classList.add('show');\n}\n\nexport function borderReplacerrModal(editIdx, borderReplacerrData, onUpdate) {\n const moduleName = 'border_replacerr';\n const isEdit = typeof editIdx === 'number';\n let modal = document.getElementById('border-replacerr-modal');\n if (!modal) {\n modal = document.createElement('div');\n modal.id = 'border-replacerr-modal';\n modal.className = 'modal';\n modal.innerHTML = `\n \n `;\n document.body.appendChild(modal);\n }\n loadHolidayPresets();\n populateScheduleDropdowns();\n const heading = modal.querySelector('h2');\n if (heading) {\n heading.textContent = (isEdit ? 'Edit' : 'Add') + ' Holiday';\n }\n const saveBtn = modal.querySelector('#holiday-save-btn');\n if (saveBtn) {\n saveBtn.textContent = isEdit ? 'Save' : 'Add';\n }\n const colorContainer = modal.querySelector('#border-colors-container');\n const addColorBtn = modal.querySelector('#addBorderColor');\n\n function addBorderColor(color = '#ffffff') {\n const swatch = document.createElement('div');\n swatch.className = 'subfield';\n swatch.innerHTML = `\n \n \n `;\n swatch.querySelector('.remove-btn').onclick = () => swatch.remove();\n colorContainer.appendChild(swatch);\n }\n addColorBtn.onclick = () => addBorderColor();\n modal.querySelector('#holiday-cancel-btn').onclick = () => {\n modal.classList.remove('show');\n };\n modal.querySelector('#holiday-save-btn').onclick = () => {\n const name = modal.querySelector('#holiday-name').value.trim();\n const existing = borderReplacerrData || [];\n const duplicate = existing.some(\n (entry, i) => entry.holiday === name && (!isEdit || i !== editIdx)\n );\n if (duplicate) {\n alert('A holiday with this name already exists.');\n return;\n }\n const scheduleFrom = `${modal.querySelector('#schedule-from-month').value}/${\n modal.querySelector('#schedule-from-day').value\n }`;\n const scheduleTo = `${modal.querySelector('#schedule-to-month').value}/${\n modal.querySelector('#schedule-to-day').value\n }`;\n const colors = Array.from(\n modal.querySelectorAll('#border-colors-container input[type=\"color\"]')\n ).map((input) => input.value);\n if (!name || !scheduleFrom || !scheduleTo || !colors.length) {\n alert('All fields are required.');\n return;\n }\n const schedule = `range(${scheduleFrom}-${scheduleTo})`;\n const holidayEntry = {\n holiday: name,\n schedule,\n color: colors,\n };\n if (isEdit) {\n borderReplacerrData[editIdx] = holidayEntry;\n } else {\n borderReplacerrData.push(holidayEntry);\n }\n modal.classList.remove('show');\n if (typeof onUpdate === 'function') onUpdate();\n markDirty();\n };\n colorContainer.innerHTML = '';\n if (isEdit) {\n const entry = borderReplacerrData[editIdx];\n modal.querySelector('#holiday-name').value = entry.holiday || '';\n let from = '',\n to = '';\n if (entry.schedule && entry.schedule.startsWith('range(') && entry.schedule.endsWith(')')) {\n const range = entry.schedule.slice(6, -1);\n const [f, t] = range.split('-');\n from = f || '';\n to = t || '';\n }\n if (from) {\n const [fromMonth, fromDay] = from.split('/');\n modal.querySelector('#schedule-from-month').value = fromMonth || '';\n modal.querySelector('#schedule-from-day').value = fromDay || '';\n }\n if (to) {\n const [toMonth, toDay] = to.split('/');\n modal.querySelector('#schedule-to-month').value = toMonth || '';\n modal.querySelector('#schedule-to-day').value = toDay || '';\n }\n (entry.color || []).forEach(addBorderColor);\n } else {\n modal.querySelector('#holiday-name').value = '';\n modal.querySelector('#schedule-from-month').selectedIndex = 0;\n modal.querySelector('#schedule-from-day').selectedIndex = 0;\n modal.querySelector('#schedule-to-month').selectedIndex = 0;\n modal.querySelector('#schedule-to-day').selectedIndex = 0;\n addBorderColor();\n }\n modal.classList.add('show');\n}\n\nexport function labelarrModal(editIdx, labelarrData, rootConfig, updateLabelarrTable) {\n const moduleName = 'labelarr';\n const isEdit = typeof editIdx === 'number';\n let modal = document.getElementById('labelarr-modal');\n if (!modal) {\n modal = document.createElement('div');\n modal.id = 'labelarr-modal';\n modal.className = 'modal';\n modal.innerHTML = `\n \n `;\n document.body.appendChild(modal);\n\n const plexListDiv = modal.querySelector('#labelarr-plex-list');\n plexListDiv.innerHTML = '';\n const plexInstances = Object.keys(rootConfig.instances?.plex || {});\n if (plexInstances.length) {\n plexInstances.forEach((pi) => {\n const wrapper = document.createElement('div');\n wrapper.className = 'card plex-instance-card';\n wrapper.innerHTML = `\n \n
\n ${humanize(pi)}
\n\n
\n \n `;\n plexListDiv.appendChild(wrapper);\n\n const loadBtn = wrapper.querySelector('.load-libs-btn');\n const libsDiv = wrapper.querySelector(`#labelarr-plex-libs-${pi}`);\n loadBtn.addEventListener('click', async () => {\n loadBtn.disabled = true;\n try {\n const res = await fetch(\n `/api/plex/libraries?instance=${encodeURIComponent(pi)}`\n );\n if (!res.ok) throw new Error(await res.text());\n const fetchedLibs = await res.json();\n const checkedLibs = Array.from(\n libsDiv.querySelectorAll('input[type=\"checkbox\"]:checked')\n ).map((cb) => cb.value);\n libsDiv.innerHTML = fetchedLibs\n .map(\n (l) => `\n \n `\n )\n .join('');\n\n requestAnimationFrame(() => {\n libsDiv.classList.add('open');\n libsDiv.style.maxHeight = libsDiv.scrollHeight + 'px';\n });\n } catch (err) {\n } finally {\n loadBtn.disabled = false;\n }\n });\n\n wrapper.querySelector('.select-all-libs').addEventListener('click', () => {\n libsDiv\n .querySelectorAll('input[type=\"checkbox\"]')\n .forEach((cb) => (cb.checked = true));\n });\n wrapper.querySelector('.deselect-all-libs').addEventListener('click', () => {\n libsDiv\n .querySelectorAll('input[type=\"checkbox\"]')\n .forEach((cb) => (cb.checked = false));\n });\n });\n } else {\n plexListDiv.innerHTML = `\n \n \n
\n \n \n \n \n
`;\n }\n\n modal.querySelector('#labelarr-cancel-btn').onclick = () => {\n modal.classList.remove('show');\n };\n\n modal.querySelector('#labelarr-app-type').onchange = () => {\n const type = modal.querySelector('#labelarr-app-type').value;\n const instSel = modal.querySelector('#labelarr-app-instance');\n instSel.innerHTML = '';\n Object.keys(rootConfig.instances?.[type] || {}).forEach((inst) => {\n const o = document.createElement('option');\n o.value = inst;\n o.textContent = humanize(inst);\n instSel.appendChild(o);\n });\n };\n }\n\n modal = document.getElementById('labelarr-modal');\n delete modal.dataset.editing;\n const heading = modal.querySelector('#labelarr-modal-heading');\n if (heading) heading.textContent = (isEdit ? 'Edit' : 'Add') + ' Mapping';\n const saveBtn = modal.querySelector('#labelarr-save-btn');\n if (saveBtn) saveBtn.textContent = isEdit ? 'Save' : 'Add';\n\n if (saveBtn) {\n saveBtn.onclick = null;\n saveBtn.onclick = () => {\n console.log('Save button clicked!');\n const appType = modal.querySelector('#labelarr-app-type').value;\n const appInstance = modal.querySelector('#labelarr-app-instance').value;\n const labels = modal\n .querySelector('#labelarr-labels')\n .value.split(',')\n .map((s) => s.trim())\n .filter(Boolean);\n const plex_instances = [];\n const plexListDiv = modal.querySelector('#labelarr-plex-list');\n plexListDiv.querySelectorAll('.card.plex-instance-card').forEach((card) => {\n const inst = card.querySelector('.load-libs-btn').dataset.inst;\n const libs = Array.from(\n card.querySelectorAll('.plex-libraries input[type=\"checkbox\"]:checked')\n ).map((cb) => cb.value);\n if (libs.length) {\n plex_instances.push({ instance: inst, library_names: libs });\n }\n });\n if (!labels.length || (!appInstance && plex_instances.length === 0)) {\n alert('You must fill out labels and at least an App or Plex instance.');\n return;\n }\n const mapping = {\n app_type: appType,\n app_instance: appInstance,\n labels,\n plex_instances,\n };\n if (typeof modal.dataset.editing !== 'undefined') {\n labelarrData[modal.dataset.editing] = mapping;\n } else {\n labelarrData.push(mapping);\n }\n if (\n window.config &&\n Array.isArray(window.config.mappings) &&\n window.config.mappings !== labelarrData\n ) {\n window.config.mappings.length = 0;\n Array.prototype.push.apply(window.config.mappings, labelarrData);\n }\n console.log('labelarrData now:', JSON.stringify(labelarrData, null, 2));\n if (typeof updateLabelarrTable === 'function') updateLabelarrTable();\n markDirty();\n modal.classList.remove('show');\n };\n console.log('Save handler attached to', saveBtn);\n }\n\n if (isEdit) {\n const entry = labelarrData[editIdx];\n modal.dataset.editing = editIdx;\n modal.querySelector('#labelarr-app-type').value = entry.app_type;\n modal.querySelector('#labelarr-app-type').dispatchEvent(new Event('change'));\n modal.querySelector('#labelarr-app-instance').value = entry.app_instance;\n modal.querySelector('#labelarr-labels').value = (entry.labels || []).join(', ');\n\n const plexInstObj = {};\n (entry.plex_instances || []).forEach((inst) => {\n if (typeof inst === 'object' && inst.instance) {\n plexInstObj[inst.instance] = { library_names: inst.library_names || [] };\n }\n });\n modal.querySelectorAll('.card.plex-instance-card').forEach((card) => {\n const inst = card.querySelector('.load-libs-btn').dataset.inst;\n const libsDiv = card.querySelector(`.plex-libraries`);\n const loadBtn = card.querySelector('.load-libs-btn');\n if (plexInstObj[inst]) {\n loadBtn.disabled = true;\n fetch(`/api/plex/libraries?instance=${encodeURIComponent(inst)}`)\n .then((res) => res.json())\n .then((allLibs) => {\n libsDiv.innerHTML = allLibs\n .map(\n (l) => `\n \n `\n )\n .join('');\n requestAnimationFrame(() => {\n libsDiv.classList.add('open');\n libsDiv.style.maxHeight = libsDiv.scrollHeight + 'px';\n });\n })\n .finally(() => {\n loadBtn.disabled = false;\n });\n } else {\n libsDiv.classList.remove('open');\n libsDiv.innerHTML = '';\n libsDiv.style.maxHeight = null;\n }\n });\n } else {\n modal.querySelector('#labelarr-app-type').value = 'radarr';\n modal.querySelector('#labelarr-app-type').dispatchEvent(new Event('change'));\n modal.querySelector('#labelarr-labels').value = '';\n modal.querySelectorAll('.plex-libraries').forEach((div) => {\n div.innerHTML = '';\n div.classList.remove('open');\n div.style.maxHeight = null;\n });\n }\n modal.classList.add('show');\n}\n\nexport function upgradinatorrModal(editIdx, upgradinatorrData, rootConfig, updateTable) {\n const moduleName = 'upgradinatorr';\n const isEdit = typeof editIdx === 'number';\n let modal = document.getElementById('upgradinatorr-modal');\n if (!modal) {\n modal = document.createElement('div');\n modal.id = 'upgradinatorr-modal';\n modal.className = 'modal';\n modal.innerHTML = `\n \n `;\n document.body.appendChild(modal);\n const instSelect = modal.querySelector('#upgradinatorr-instance');\n const instList = [\n ...Object.keys(rootConfig.instances.radarr || {}),\n ...Object.keys(rootConfig.instances.sonarr || {}),\n ];\n instList.forEach((inst) => {\n const opt = document.createElement('option');\n opt.value = inst;\n opt.textContent = humanize(inst);\n instSelect.appendChild(opt);\n });\n modal.querySelector('#upgradinatorr-cancel-btn').onclick = () => {\n modal.classList.remove('show');\n };\n\n const thresholdField = modal.querySelector('#season-threshold-container');\n instSelect.addEventListener('change', () => {\n const selected = instSelect.value;\n const isSonarr = Object.keys(rootConfig.instances.sonarr || {}).includes(selected);\n thresholdField.style.display = isSonarr ? '' : 'none';\n });\n\n instSelect.dispatchEvent(new Event('change'));\n modal.querySelector('#upgradinatorr-save-btn').onclick = () => {\n const inst = modal.querySelector('#upgradinatorr-instance').value;\n const count = parseInt(modal.querySelector('#upgradinatorr-count').value, 10) || 0;\n const tag_name = modal.querySelector('#upgradinatorr-tag-name').value.trim();\n const ignore_tag = modal.querySelector('#upgradinatorr-ignore-tag').value.trim();\n const unattended = modal.querySelector('#upgradinatorr-unattended').value === 'true';\n const isSonarr = Object.keys(rootConfig.instances.sonarr || {}).includes(inst);\n const season_threshold = isSonarr\n ? parseInt(modal.querySelector('#upgradinatorr-season-threshold').value, 10) || 0\n : undefined;\n const entry = {\n instance: inst,\n count,\n tag_name,\n ignore_tag,\n unattended,\n };\n if (isSonarr) entry.season_monitored_threshold = season_threshold;\n\n const existingIdx = upgradinatorrData.findIndex((e) => e.instance === inst);\n if (existingIdx !== -1) {\n upgradinatorrData[existingIdx] = entry;\n } else {\n upgradinatorrData.push(entry);\n }\n if (typeof updateTable === 'function') updateTable();\n markDirty();\n modal.classList.remove('show');\n };\n }\n modal.querySelector('#upgradinatorr-instance').value = isEdit\n ? upgradinatorrData[editIdx].instance\n : '';\n modal.querySelector('#upgradinatorr-count').value = isEdit\n ? upgradinatorrData[editIdx].count\n : '';\n modal.querySelector('#upgradinatorr-tag-name').value = isEdit\n ? upgradinatorrData[editIdx].tag_name\n : '';\n modal.querySelector('#upgradinatorr-ignore-tag').value = isEdit\n ? upgradinatorrData[editIdx].ignore_tag\n : '';\n modal.querySelector('#upgradinatorr-unattended').value = isEdit\n ? String(upgradinatorrData[editIdx].unattended)\n : 'false';\n\n const seasonThresholdInput = modal.querySelector('#upgradinatorr-season-threshold');\n if (seasonThresholdInput) {\n seasonThresholdInput.value = isEdit\n ? typeof upgradinatorrData[editIdx].season_monitored_threshold !== 'undefined'\n ? upgradinatorrData[editIdx].season_monitored_threshold\n : ''\n : '99';\n }\n\n const instSelect = modal.querySelector('#upgradinatorr-instance');\n const thresholdField = modal.querySelector('#season-threshold-container');\n if (instSelect && thresholdField) {\n instSelect.dispatchEvent(new Event('change'));\n }\n const heading = modal.querySelector('h2');\n if (heading) {\n heading.textContent = (isEdit ? 'Edit' : 'Add') + ' Upgradinatorr Instance List';\n }\n const saveBtn = modal.querySelector('#upgradinatorr-save-btn');\n if (saveBtn) {\n saveBtn.textContent = isEdit ? 'Save' : 'Add';\n }\n modal.classList.add('show');\n}\n\nexport function directoryPickerModal(inputElement) {\n let suggestionTimeout;\n let modal = document.getElementById('dir-modal');\n if (!modal) {\n modal = document.createElement('div');\n modal.id = 'dir-modal';\n modal.className = 'modal';\n modal.classList.remove('show');\n modal.innerHTML = `\n`;\n document.body.appendChild(modal);\n const dirList = modal.querySelector('#dir-list');\n const pathInput = modal.querySelector('#dir-path-input');\n async function updateDirList() {\n const current = modal.currentPath;\n const list = directoryCache[current] || [];\n dirList.innerHTML = '';\n\n const up = document.createElement('li');\n up.textContent = '..';\n up.onclick = () => {\n if (current !== '/') {\n modal.currentPath = current.split('/').slice(0, -1).join('/') || '/';\n showPath(modal.currentPath);\n }\n };\n dirList.appendChild(up);\n\n (directoryCache[current] || []).sort().forEach((name) => {\n const li = document.createElement('li');\n li.textContent = name;\n li.onclick = () => {\n modal.currentPath = current.endsWith('/')\n ? current + name\n : current + '/' + name;\n showPath(modal.currentPath);\n };\n li.ondblclick = () => {\n inputElement.value = modal.currentPath;\n closeModal();\n };\n dirList.appendChild(li);\n });\n }\n\n function showPath(val) {\n modal.currentPath = val;\n pathInput.value = val;\n if (!directoryCache[val]) {\n fetch(`/api/list?path=${encodeURIComponent(val)}`)\n .then((res) => res.json())\n .then((d) => {\n directoryCache[val] = d.directories;\n updateDirList();\n })\n .catch((e) => {\n console.error('List error:', e);\n });\n } else {\n updateDirList();\n }\n }\n\n function closeModal() {\n modal.classList.remove('show');\n window.currentInput = null;\n }\n pathInput.addEventListener('input', () => {\n const val = pathInput.value.trim() || '/';\n modal.currentPath = val;\n clearTimeout(suggestionTimeout);\n suggestionTimeout = setTimeout(() => {\n const parent = val === '/' ? '/' : val.replace(/\\/?[^/]+$/, '') || '/';\n const partial = val.slice(parent.length).replace(/^\\/+/, '').toLowerCase();\n const entries = directoryCache[parent] || [];\n if (entries.length) {\n dirList.innerHTML = '';\n\n const up = document.createElement('li');\n up.textContent = '..';\n up.onclick = () => {\n if (parent !== '/') {\n modal.currentPath = parent.split('/').slice(0, -1).join('/') || '/';\n showPath(modal.currentPath);\n }\n };\n dirList.appendChild(up);\n\n entries\n .filter((name) => name.toLowerCase().startsWith(partial))\n .sort()\n .forEach((name) => {\n const li = document.createElement('li');\n li.textContent = name;\n li.onclick = () => {\n modal.currentPath = parent.endsWith('/')\n ? parent + name\n : parent + '/' + name;\n showPath(modal.currentPath);\n };\n li.ondblclick = () => {\n inputElement.value = modal.currentPath;\n closeModal();\n };\n dirList.appendChild(li);\n });\n }\n\n const entry = val.slice(parent.length).replace(/^\\/+/, '');\n if (directoryCache[parent]?.includes(entry)) {\n showPath(val);\n }\n }, 200);\n });\n pathInput.addEventListener('keydown', (e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n showPath(pathInput.value.trim() || '/');\n }\n });\n modal.querySelector('#dir-create').onclick = async () => {\n const name = prompt('New folder name:');\n if (!name) return;\n const newPath = modal.currentPath.endsWith('/')\n ? modal.currentPath + name\n : modal.currentPath + '/' + name;\n try {\n await fetch(`/api/create-folder?path=${encodeURIComponent(newPath)}`, {\n method: 'POST',\n });\n if (!directoryCache[modal.currentPath]) directoryCache[modal.currentPath] = [];\n directoryCache[modal.currentPath].push(name);\n showPath(newPath);\n } catch (e) {\n alert('Create failed: ' + e.message);\n }\n };\n modal.querySelector('#dir-cancel').onclick = closeModal;\n\n modal.updateDirList = updateDirList;\n modal.showPath = showPath;\n modal.closeModal = closeModal;\n }\n\n modal.currentInput = inputElement;\n\n const acceptBtn = modal.querySelector('#dir-accept');\n acceptBtn.onclick = () => {\n modal.currentInput.value = modal.currentPath;\n modal.closeModal();\n };\n modal.currentPath = inputElement.value.trim() || '/';\n const pathInput = modal.querySelector('#dir-path-input');\n pathInput.value = modal.currentPath;\n\n if (inputElement.placeholder) {\n pathInput.placeholder = inputElement.placeholder;\n }\n\n if (!directoryCache[modal.currentPath]) {\n fetch(`/api/list?path=${encodeURIComponent(modal.currentPath)}`)\n .then((res) => res.json())\n .then((d) => {\n directoryCache[modal.currentPath] = d.directories;\n modal.updateDirList();\n });\n } else {\n modal.updateDirList();\n }\n modal.classList.add('show');\n}\n"
},
{
"path": "web/static/js/settings/modules/border_replacerr.js",
"content": "import { renderHelp } from '../../helper.js';\nimport { renderTextareaArrayField } from '../settings_helpers.js';\nimport { borderReplacerrModal } from '../modals.js';\nimport { renderField, renderRemoveBordersBooleanField } from '../settings_helpers.js';\n\nlet borderReplacerrData = [];\n\nexport function renderReplacerrSettings(formFields, config, rootConfig) {\n const wrapper = document.createElement('div');\n wrapper.className = 'settings-wrapper';\n\n const help = renderHelp('border_replacerr');\n if (help) wrapper.appendChild(help);\n\n Object.entries(config).forEach(([key, value]) => {\n if (\n !['holidays', 'border_colors', 'remove_borders', 'exclusion_list', 'exclude'].includes(\n key\n )\n ) {\n renderField(wrapper, key, value);\n }\n });\n\n ['exclusion_list', 'exclude'].forEach((fieldKey) => {\n if (config[fieldKey]) {\n wrapper.appendChild(renderTextareaArrayField(fieldKey, config[fieldKey]));\n }\n });\n\n let removeBordersField = renderRemoveBordersBooleanField(config);\n wrapper.appendChild(removeBordersField);\n\n // Border Colors\n const borderColorField = document.createElement('div');\n borderColorField.className = 'field';\n borderColorField.innerHTML = `\n \n \n \n `;\n wrapper.appendChild(borderColorField);\n\n const borderColorsContainer = borderColorField.querySelector('#border-colors-container');\n function updateBorderColorsFromDOM() {\n config.border_colors = Array.from(\n borderColorsContainer.querySelectorAll('input[type=\"color\"]')\n ).map((input) => input.value);\n\n if (removeBordersField && removeBordersField.parentNode)\n removeBordersField.parentNode.removeChild(removeBordersField);\n removeBordersField = renderRemoveBordersBooleanField(config);\n\n let insertAfter = null;\n for (let i = wrapper.children.length - 1; i >= 0; i--) {\n const node = wrapper.children[i];\n const label = node.querySelector && node.querySelector('label');\n if (label && /exclusion list|exclude/i.test(label.textContent.trim())) {\n insertAfter = node;\n break;\n }\n }\n if (insertAfter && insertAfter.nextSibling)\n wrapper.insertBefore(removeBordersField, insertAfter.nextSibling);\n else if (insertAfter) wrapper.appendChild(removeBordersField);\n else wrapper.insertBefore(removeBordersField, borderColorField);\n }\n function addColorPicker(container, color = '#ffffff') {\n const subfield = document.createElement('div');\n subfield.className = 'subfield';\n subfield.innerHTML = `\n \n \n `;\n const colorInput = subfield.querySelector('input[type=\"color\"]');\n colorInput.addEventListener('input', updateBorderColorsFromDOM);\n subfield.querySelector('.remove-color').onclick = () => {\n subfield.remove();\n updateBorderColorsFromDOM();\n };\n container.appendChild(subfield);\n updateBorderColorsFromDOM();\n }\n (config.border_colors || []).forEach((color) => addColorPicker(borderColorsContainer, color));\n borderColorField.querySelector('#addBorderColor').onclick = () =>\n addColorPicker(borderColorsContainer, '#ffffff');\n\n if (rootConfig?.poster_renamerr?.run_border_replacerr === true) {\n ['source_dirs', 'destination_dir'].forEach((fieldKey) => {\n const fields = wrapper.querySelectorAll(`[name=\"${fieldKey}\"]`);\n fields.forEach((field) => {\n field.disabled = true;\n field.value = '';\n field.placeholder = \"đ Managed by Poster Renamerr with 'Run Border Replacerr'\";\n field.title = \"Managed by Poster Renamerr with 'Run Border Replacerr'\";\n if (fieldKey === 'source_dirs') {\n const fieldContainer = field.closest('.field');\n if (fieldContainer) {\n const addBtn = fieldContainer.querySelector('.add-control-btn');\n if (addBtn) addBtn.style.display = 'none';\n fieldContainer\n .querySelectorAll('.remove-item')\n .forEach((btn) => (btn.style.display = 'none'));\n }\n }\n });\n });\n }\n\n const holidaysField = document.createElement('div');\n holidaysField.className = 'field';\n holidaysField.innerHTML = `\n \n \n \n `;\n wrapper.appendChild(holidaysField);\n\n borderReplacerrData = Object.entries(config.holidays || {}).map(([holiday, details]) => ({\n holiday,\n schedule: details.schedule,\n color: details.color,\n }));\n\n const holidaysContainer = holidaysField.querySelector('#holidays-container');\n function updateBorderReplacerrUI() {\n holidaysContainer.innerHTML = '';\n if (borderReplacerrData.length === 0) {\n holidaysContainer.innerHTML = `Plex
đ« No Plex instances configured.
đ No holidays configured yet.
`;\n } else {\n borderReplacerrData.forEach((entry, i) => {\n const card = document.createElement('div');\n card.className = 'holiday-card card show-card';\n card.innerHTML = `\n\n ${entry.holiday}\n ${entry.schedule}\n
\n \n \n \n
\n ${entry.color\n .map((c) => ``)\n .join('')}
\n `;\n holidaysContainer.appendChild(card);\n });\n holidaysContainer.querySelectorAll('.edit-btn').forEach((btn) => {\n btn.onclick = () => {\n const idx = parseInt(btn.dataset.idx, 10);\n if (!isNaN(idx))\n borderReplacerrModal(idx, borderReplacerrData, updateBorderReplacerrUI);\n };\n });\n holidaysContainer.querySelectorAll('.remove-btn').forEach((btn) => {\n btn.onclick = () => {\n const confirmed = confirm('Are you sure you want to remove this holiday?');\n if (confirmed) {\n const idx = parseInt(btn.dataset.idx, 10);\n borderReplacerrData.splice(idx, 1);\n updateBorderReplacerrUI();\n }\n };\n });\n }\n }\n holidaysField.querySelector('#add-holiday-btn').onclick = () =>\n borderReplacerrModal(null, borderReplacerrData, updateBorderReplacerrUI);\n\n updateBorderReplacerrUI();\n\n formFields.appendChild(wrapper);\n}\n\nexport function getBorderReplacerrData() {\n return borderReplacerrData;\n}\n"
},
{
"path": "web/static/js/settings/modules/health_checkarr.js",
"content": "import { renderHelp } from '../../helper.js';\nimport { renderField, renderPlexSonarrRadarrInstancesField } from '../settings_helpers.js';\n\nexport function renderHealthCheckarrSettings(formFields, config, rootConfig) {\n const wrapper = document.createElement('div');\n const help = renderHelp('health_checkarr');\n if (help) wrapper.appendChild(help);\n wrapper.className = 'settings-wrapper';\n Object.entries(config).forEach(([key, value]) => {\n if (key === 'instances') {\n renderPlexSonarrRadarrInstancesField(wrapper, value, rootConfig, 'health_checkarr');\n } else {\n renderField(wrapper, key, value);\n }\n });\n formFields.appendChild(wrapper);\n}\n"
},
{
"path": "web/static/js/settings/modules/jduparr.js",
"content": "import { renderField } from '../settings_helpers.js';\nimport { renderHelp } from '../../helper.js';\n\nexport function renderJduparrSettings(formFields, config) {\n const wrapper = document.createElement('div');\n const help = renderHelp('jduparr');\n if (help) wrapper.appendChild(help);\n wrapper.className = 'settings-wrapper';\n Object.entries(config).forEach(([key, value]) => {\n renderField(wrapper, key, value);\n });\n formFields.appendChild(wrapper);\n}\n"
},
{
"path": "web/static/js/settings/modules/labelarr.js",
"content": "import { renderHelp } from '../../helper.js';\nimport { renderField } from '../settings_helpers.js';\nimport { labelarrModal } from '../modals.js';\nimport { humanize } from '../../common.js';\n\nlet labelarrData = [];\n\nexport function renderLabelarrSettings(formFields, config, rootConfig) {\n const wrapper = document.createElement('div');\n wrapper.className = 'settings-wrapper';\n\n const help = renderHelp('labelarr');\n if (help) wrapper.appendChild(help);\n\n Object.entries(config).forEach(([key, value]) => {\n if (key !== 'mappings') {\n renderField(wrapper, key, value);\n }\n });\n\n const mappingsField = document.createElement('div');\n mappingsField.className = 'field setting-field';\n mappingsField.innerHTML = `\n \n \n \n `;\n wrapper.appendChild(mappingsField);\n\n const mappingsContainer = mappingsField.querySelector('#labelarr-mappings-container');\n\n labelarrData = Array.isArray(config.mappings)\n ? JSON.parse(JSON.stringify(config.mappings))\n : [];\n\n function updateMappings() {\n mappingsContainer.innerHTML = '';\n if (labelarrData.length === 0) {\n mappingsContainer.innerHTML = `\n \n đ« No mappings yet.
\n Click \"Add Mapping\" to create your first sync mapping.\n
\n `;\n return;\n }\n labelarrData.forEach((entry, i) => {\n try {\n const card = document.createElement('div');\n card.className = 'labelarr-mapping-card card show-card';\n\n const left = document.createElement('div');\n left.className = 'labelarr-mapping-left';\n left.innerHTML = `\n \n Click \"Add Mapping\" to create your first sync mapping.\n
${humanize(entry.app_type)}
\n Instance ${humanize(\n entry.app_instance\n )}:
\n \n ${\n entry.labels && entry.labels.length\n ? entry.labels\n .map(\n (l) =>\n `${humanize(l)}`\n )\n .join('')\n : 'No label'\n }\n
\n `;\n\n const center = document.createElement('div');\n center.className = 'labelarr-mapping-center';\n center.innerHTML = `â`;\n\n const right = document.createElement('div');\n right.className = 'labelarr-mapping-right';\n\n let plexHtml = '';\n (entry.plex_instances || []).forEach((inst) => {\n const instance =\n inst.instance || Object.keys(inst).find((k) => k !== 'library_names');\n const libraries = Array.isArray(inst.library_names) ? inst.library_names : [];\n plexHtml += `\n \n ${humanize(instance)}:\n ${libraries\n .map(\n (lib) =>\n `${humanize(lib)}`\n )\n .join('')}\n
\n `;\n });\n right.innerHTML =\n plexHtml || `No Plex Target`;\n\n const actions = document.createElement('div');\n actions.className = 'labelarr-mapping-actions';\n actions.innerHTML = `\n \n \n `;\n\n card.appendChild(left);\n card.appendChild(center);\n card.appendChild(right);\n card.appendChild(actions);\n\n mappingsContainer.appendChild(card);\n } catch (err) {\n console.error('Error rendering mapping entry:', entry, err);\n }\n });\n\n mappingsContainer.querySelectorAll('.remove-btn').forEach((btn) => {\n btn.onclick = () => {\n const idx = parseInt(btn.dataset.idx, 10);\n if (!isNaN(idx)) {\n const confirmed = confirm('Are you sure you want to remove this mapping?');\n if (!confirmed) return;\n labelarrData.splice(idx, 1);\n updateMappings();\n }\n };\n });\n\n mappingsContainer.querySelectorAll('.edit-btn').forEach((btn) => {\n btn.onclick = () => {\n const idx = parseInt(btn.dataset.idx, 10);\n if (!isNaN(idx)) {\n labelarrModal(idx, labelarrData, rootConfig, updateMappings);\n }\n };\n });\n }\n\n mappingsField.querySelector('#add-mapping-btn').onclick = () =>\n labelarrModal(undefined, labelarrData, rootConfig, updateMappings);\n\n updateMappings();\n\n formFields.appendChild(wrapper);\n\n wrapper.flushLabelarrToConfig = () => {\n config.mappings = JSON.parse(JSON.stringify(labelarrData));\n };\n}\n\nexport function getLabelarrData() {\n return labelarrData;\n}\n"
},
{
"path": "web/static/js/settings/modules/main.js",
"content": "import { renderField } from '../settings_helpers.js';\nimport { renderHelp } from '../../helper.js';\n\nexport function renderMain(formFields, config) {\n const wrapper = document.createElement('div');\n const help = renderHelp('main');\n if (help) wrapper.appendChild(help);\n wrapper.className = 'settings-wrapper';\n Object.entries(config).forEach(([key, value]) => {\n renderField(wrapper, key, value);\n });\n formFields.appendChild(wrapper);\n}\n"
},
{
"path": "web/static/js/settings/modules/nohl.js",
"content": "import { renderField, renderPlexSonarrRadarrInstancesField } from '../settings_helpers.js';\nimport { renderHelp } from '../../helper.js';\n\nexport function renderNohlSettings(formFields, config, rootConfig) {\n const wrapper = document.createElement('div');\n const help = renderHelp('nohl');\n if (help) wrapper.appendChild(help);\n wrapper.className = 'settings-wrapper';\n Object.entries(config).forEach(([key, value]) => {\n if (key === 'source_dirs') {\n renderField(wrapper, key, value);\n } else if (key === 'instances') {\n renderPlexSonarrRadarrInstancesField(wrapper, value, rootConfig, 'nohl');\n } else {\n renderField(wrapper, key, value);\n }\n });\n formFields.appendChild(wrapper);\n}\n"
},
{
"path": "web/static/js/settings/modules/poster_cleanarr.js",
"content": "import { renderHelp } from '../../helper.js';\nimport { renderField, renderPlexSonarrRadarrInstancesField } from '../settings_helpers.js';\n\nexport function renderPosterCleanarrSettings(formFields, config, rootConfig) {\n const wrapper = document.createElement('div');\n const help = renderHelp('poster_cleanarr');\n if (help) wrapper.appendChild(help);\n wrapper.className = 'settings-wrapper';\n Object.entries(config).forEach(([key, value]) => {\n if (key === 'instances') {\n renderPlexSonarrRadarrInstancesField(wrapper, value, rootConfig, 'poster_cleanarr');\n } else {\n renderField(wrapper, key, value);\n }\n });\n formFields.appendChild(wrapper);\n}\n"
},
{
"path": "web/static/js/settings/modules/poster_renamerr.js",
"content": "import { renderField, renderPlexSonarrRadarrInstancesField } from '../settings_helpers.js';\nimport { renderHelp } from '../../helper.js';\n\nexport function renderPosterRenamerrSettings(formFields, config, rootConfig) {\n const wrapper = document.createElement('div');\n const help = renderHelp('poster_renamerr');\n if (help) wrapper.appendChild(help);\n wrapper.className = 'settings-wrapper';\n Object.entries(config).forEach(([key, value]) => {\n if (key === 'instances') {\n renderPlexSonarrRadarrInstancesField(wrapper, value, rootConfig, 'poster_renamerr');\n } else {\n renderField(wrapper, key, value);\n }\n });\n formFields.appendChild(wrapper);\n}\n"
},
{
"path": "web/static/js/settings/modules/renameinatorr.js",
"content": "import { renderHelp } from '../../helper.js';\nimport { renderField, renderPlexSonarrRadarrInstancesField } from '../settings_helpers.js';\n\nexport function renderRenameinatorrSettings(formFields, config, rootConfig) {\n const wrapper = document.createElement('div');\n const help = renderHelp('renameinatorr');\n if (help) wrapper.appendChild(help);\n wrapper.className = 'settings-wrapper';\n Object.entries(config).forEach(([key, value]) => {\n if (key === 'instances') {\n renderPlexSonarrRadarrInstancesField(wrapper, value, rootConfig, 'renameinatorr');\n } else {\n renderField(wrapper, key, value);\n }\n });\n formFields.appendChild(wrapper);\n}\n"
},
{
"path": "web/static/js/settings/modules/sync_gdrive.js",
"content": "import { gdriveSyncModal } from '../modals.js';\nimport { renderHelp } from '../../helper.js';\nimport { renderField, renderTextareaArrayField } from '../settings_helpers.js';\n\nlet gdriveSyncData = [];\n\nexport function renderGdriveSettings(formFields, config) {\n const wrapper = document.createElement('div');\n const help = renderHelp('gdrive_sync');\n if (help) wrapper.appendChild(help);\n wrapper.className = 'settings-wrapper';\n Object.entries(config).forEach(([key, value]) => {\n if (key === 'token') {\n wrapper.appendChild(renderTextareaArrayField(key, value));\n } else if (key === 'gdrive_list') {\n const field = document.createElement('div');\n field.className = 'field setting-field';\n field.innerHTML = `\n \n \n \n `;\n wrapper.appendChild(field);\n const syncList = field.querySelector('#gdrive-sync-list');\n gdriveSyncData = Array.isArray(value) ? [...value] : [];\n\n function updateList() {\n if (!Array.isArray(gdriveSyncData) || gdriveSyncData.length === 0) {\n syncList.innerHTML = `\n \n
\n `;\n } else {\n const validEntries = gdriveSyncData.filter((e) => e && e.id && e.location);\n if (validEntries.length === 0) {\n syncList.innerHTML = `\n đ« No drives to list.
\nClick \"Add gDrive\" to configure one.
\n\n
\n `;\n return;\n }\n syncList.innerHTML = validEntries\n .map(\n (entry, i) => `\n đ« No valid drives to list.
\nClick \"Add gDrive\" to configure one.
\n\n
\n `\n )\n .join('');\n }\n syncList.querySelectorAll('.remove-btn').forEach((btn) => {\n btn.onclick = () => {\n const confirmed = confirm('Are you sure you want to remove this sync?');\n if (confirmed) {\n gdriveSyncData.splice(parseInt(btn.dataset.idx), 1);\n updateList();\n }\n };\n });\n syncList.querySelectorAll('.edit-btn').forEach((btn) => {\n btn.onclick = () => {\n const idx = parseInt(btn.dataset.idx, 10);\n gdriveSyncModal(idx, gdriveSyncData, updateList);\n };\n });\n }\n field.querySelector('#add-gdrive-sync').onclick = () =>\n gdriveSyncModal(undefined, gdriveSyncData, updateList);\n updateList();\n } else {\n renderField(wrapper, key, value);\n }\n });\n formFields.appendChild(wrapper);\n}\n\nexport function getGdriveSyncData() {\n return gdriveSyncData;\n}\n"
},
{
"path": "web/static/js/settings/modules/unmatched_assets.js",
"content": "import { renderHelp } from '../../helper.js';\nimport { renderField, renderPlexSonarrRadarrInstancesField } from '../settings_helpers.js';\n\nexport function renderUnmatchedAssetsSettings(formFields, config, rootConfig) {\n const wrapper = document.createElement('div');\n const help = renderHelp('unmatched_assets');\n if (help) wrapper.appendChild(help);\n wrapper.className = 'settings-wrapper';\n Object.entries(config).forEach(([key, value]) => {\n if (key === 'instances') {\n renderPlexSonarrRadarrInstancesField(wrapper, value, rootConfig, 'unmatched_assets');\n } else {\n renderField(wrapper, key, value);\n }\n });\n formFields.appendChild(wrapper);\n}\n"
},
{
"path": "web/static/js/settings/modules/upgradinatorr.js",
"content": "import { renderField } from '../settings_helpers.js';\nimport { renderHelp } from '../../helper.js';\nimport { upgradinatorrModal } from '../modals.js';\nimport { humanize } from '../../common.js';\n\nlet upgradinatorrData = [];\n\nexport function renderUpgradinatorrSettings(formFields, config, rootConfig) {\n const wrapper = document.createElement('div');\n wrapper.className = 'settings-wrapper';\n\n const help = renderHelp('upgradinatorr');\n if (help) wrapper.appendChild(help);\n\n Object.entries(config).forEach(([key, value]) => {\n if (key !== 'instances_list') {\n if (typeof value === 'object' && !Array.isArray(value) && value !== null) {\n return;\n }\n renderField(wrapper, key, value);\n }\n });\n\n const instanceField = document.createElement('div');\n instanceField.className = 'field setting-field';\n instanceField.innerHTML = `\n \n \n \n ${entry.name || entry.id} â ${\n entry.location\n }\n
\n \n \n \n
\n \n \n \n
\n
\n `;\n wrapper.appendChild(instanceField);\n\n const tbody = instanceField.querySelector('tbody');\n upgradinatorrData = Object.entries(config.instances_list || {}).map(([inst, opts]) => {\n const entry = {\n instance: opts.instance,\n count: opts.count,\n tag_name: opts.tag_name,\n ignore_tag: opts.ignore_tag,\n unattended: opts.unattended,\n };\n if (typeof opts.season_monitored_threshold !== 'undefined') {\n entry.season_monitored_threshold = opts.season_monitored_threshold;\n }\n return entry;\n });\n\n function updateTable() {\n tbody.innerHTML = upgradinatorrData\n .map(\n (entry, i) => `\n | Instance | \nCount | \nTag Name | \nIgnore Tag | \nUnattended | \nThreshold | \nActions | \n
|---|
${html}
\n `;\n return div;\n}\n\nfunction boolDropdown(name, selected) {\n return ``;\n}\n\nexport function renderTextField(name, value) {\n /**\n * Render a list-of-directories field (no drag handles, no drag logic).\n * @param {string} name\n * @param {string[]} list\n */\n\n const label = humanize(name);\n const isDir = DIR_PICKER.includes(name);\n const readonly = isDir ? 'readonly' : '';\n\n const moduleName = window.currentModuleName;\n const placeholder =\n PLACEHOLDER_TEXT[moduleName]?.[name] ?? (isDir ? 'Click to pick a directory' : '');\n const field = createField(\n label,\n ``\n );\n if (isDir) {\n const input = field.querySelector(`input[name=\"${name}\"]`);\n input.addEventListener('click', () => directoryPickerModal(input));\n }\n return field;\n}\n\nexport function renderBooleanField(name, value) {\n const label = humanize(name);\n return createField(label, boolDropdown(name, value === true || value === 'true'));\n}\n\nexport function renderDropdownField(name, value, options) {\n const moduleName = window.currentModuleName;\n const placeholder = PLACEHOLDER_TEXT[moduleName]?.[name];\n\n let html = ``;\n return createField(humanize(name), html);\n}\n\n/**\n * Render a textarea for array or JSON input, auto-resizing to content.\n * @param {string} name - The field name (key).\n * @param {Array|Object|string} values - Array of lines or JSON object/string.\n * @returns {HTMLDivElement} The created field element.\n */\nexport function renderTextareaArrayField(name, values) {\n let content = '';\n let placeholder = '';\n if (name === 'token') {\n placeholder = PLACEHOLDER_TEXT?.[window.currentModuleName]?.token ?? '';\n content =\n values === null || values === 'null'\n ? ''\n : typeof values === 'object'\n ? JSON.stringify(values, null, 2)\n : values;\n } else {\n content = Array.isArray(values) ? values.join('\\n') : '';\n placeholder = 'Enter items, one per line';\n }\n const moduleName = window.currentModuleName;\n placeholder = PLACEHOLDER_TEXT?.[moduleName]?.[name] ?? placeholder;\n\n const textarea = document.createElement('textarea');\n textarea.name = name;\n textarea.rows = 6;\n textarea.className = 'textarea';\n textarea.value = content;\n textarea.placeholder = placeholder;\n const field = createField(humanize(name), '');\n field.querySelector('.field-control').appendChild(textarea);\n setTimeout(() => {\n if (textarea) {\n textarea.style.height = 'auto';\n textarea.style.height = textarea.scrollHeight + 'px';\n textarea.addEventListener('input', () => {\n textarea.style.height = 'auto';\n textarea.style.height = textarea.scrollHeight + 'px';\n });\n }\n }, 0);\n return field;\n}\n\n/**\n * Render a number input field.\n * @param {string} name - The field name.\n * @param {number} value - The current value.\n * @returns {HTMLDivElement} The created field element.\n */\nexport function renderNumberField(name, value) {\n const label = humanize(name);\n const html = ``;\n const div = createField(label, html);\n div.classList.add('show-field');\n return div;\n}\n\nexport function renderRemoveBordersBooleanField(config) {\n const name = 'remove_borders';\n const label = humanize(name);\n const borderColors = Array.isArray(config.border_colors)\n ? config.border_colors.filter(Boolean)\n : [];\n let forcedValue,\n disabled,\n warning = '';\n if (borderColors.length === 0) {\n forcedValue = true;\n disabled = true;\n warning =\n 'Borders will be removed because no border colors are set. Add a border color to disable this option.';\n } else {\n forcedValue = false;\n disabled = true;\n warning =\n 'Cannot remove borders while custom border colors are set. Remove all border colors to enable this option.';\n }\n let html = ``;\n html += `\n Note: This setting is automatically controlled:\n
`;\n const div = createField(label, html);\n div.classList.add('show-field');\n return div;\n}\n\nexport function renderPlexSonarrRadarrInstancesField(\n formFields,\n instanceList,\n rootConfig,\n moduleName\n) {\n const allInstancesEmpty =\n !rootConfig.instances ||\n !Object.values(rootConfig.instances).some(\n (group) => group && typeof group === 'object' && Object.keys(group).length > 0\n );\n if (allInstancesEmpty) {\n const field = document.createElement('div');\n field.className = `field instances-field ${moduleName}`;\n field.innerHTML = ``;\n formFields.appendChild(field);\n\n const listDiv = field.querySelector('.instances-list');\n const noCard = document.createElement('div');\n noCard.className = 'card plex-instance-card';\n noCard.innerHTML = `\n - \n
- If any border colors are set, borders will not be removed. \n
- If no border colors are set, borders will always be removed. \n
\n
\n `;\n listDiv.appendChild(noCard);\n return;\n }\n const field = document.createElement('div');\n field.className = 'field instances-field poster-cleanarr';\n field.innerHTML = ``;\n formFields.appendChild(field);\n const listDiv = field.querySelector('.instances-list');\n const scalarInst = [];\n const plexData = {};\n (instanceList || []).forEach((item) => {\n if (typeof item === 'string') scalarInst.push(item);\n else if (typeof item === 'object') {\n const inst = Object.keys(item)[0];\n plexData[inst] = item[inst];\n }\n });\n\n function renderARRGroupCard(instType, instances) {\n const card = document.createElement('div');\n card.className = `card plex-instance-card`;\n card.innerHTML = `\n \n đ« No instances configured for ${humanize(moduleName)}.\n
\n\n
\n \n `;\n const groupDiv = card.querySelector('.plex-libraries.open');\n instances.forEach((instanceName) => {\n const label = document.createElement('label');\n label.className = 'library-pill';\n label.innerHTML = `\n \n ${humanize(instanceName)}\n `;\n groupDiv.appendChild(label);\n });\n return card;\n }\n\n const radarrInstances = Object.keys(rootConfig.instances.radarr || {});\n if (radarrInstances.length) {\n listDiv.appendChild(renderARRGroupCard('radarr', radarrInstances));\n } else {\n const noRadarrCard = document.createElement('div');\n noRadarrCard.className = 'card plex-instance-card';\n noRadarrCard.innerHTML = `\n ${humanize(instType)}
\n\n
\n ${humanize('radarr')}
\n\n
\n `;\n listDiv.appendChild(noRadarrCard);\n }\n const sonarrInstances = Object.keys(rootConfig.instances.sonarr || {});\n if (sonarrInstances.length) {\n listDiv.appendChild(renderARRGroupCard('sonarr', sonarrInstances));\n } else {\n const noSonarrCard = document.createElement('div');\n noSonarrCard.className = 'card plex-instance-card';\n noSonarrCard.innerHTML = `\n đ« No instances configured for ${humanize(\n 'radarr'\n )}.
\n\n
\n ${humanize('sonarr')}
\n\n
\n `;\n listDiv.appendChild(noSonarrCard);\n }\n\n // Only render Plex if SHOW_PLEX_IN_INSTANCE_FIELD includes this module\n if (SHOW_PLEX_IN_INSTANCE_FIELD.includes(moduleName)) {\n const plexInstances = Object.keys(rootConfig.instances.plex || {});\n if (plexInstances.length) {\n const plexWrapper = document.createElement('div');\n plexWrapper.className = 'card';\n plexWrapper.innerHTML = 'đ« No instances configured for ${humanize(\n 'sonarr'\n )}.
\nPlex
';\n listDiv.appendChild(plexWrapper);\n plexInstances.forEach((pi) => {\n const libs = plexData[pi]?.library_names || [];\n const wrapper = document.createElement('div');\n wrapper.innerHTML = `\n\n
\n ${humanize(pi)}
\n\n
\n \n `;\n plexWrapper.appendChild(wrapper);\n const loadBtn = wrapper.querySelector('.load-libs-btn');\n const libsDiv = wrapper.querySelector(`#plex-libs-${pi}`);\n loadBtn.addEventListener('click', async () => {\n try {\n const res = await fetch(\n `/api/plex/libraries?instance=${encodeURIComponent(pi)}`\n );\n if (!res.ok) throw new Error(await res.text());\n const fetchedLibs = await res.json();\n const existing = plexData[pi]?.library_names || [];\n libsDiv.innerHTML = fetchedLibs\n .map(\n (l) => `\n \n `\n )\n .join('');\n\n requestAnimationFrame(() => {\n libsDiv.classList.add('open');\n libsDiv.style.maxHeight = libsDiv.scrollHeight + 'px';\n });\n showToast?.(`â
Loaded libraries for ${humanize(pi)}`, 'success');\n } catch (err) {\n showToast?.(\n `â Failed to load libraries for ${humanize(pi)}: ${err.message}`,\n 'error'\n );\n }\n });\n wrapper.querySelector('.select-all-libs')?.addEventListener('click', () => {\n libsDiv\n .querySelectorAll('input[type=\"checkbox\"]')\n .forEach((cb) => (cb.checked = true));\n });\n wrapper.querySelector('.deselect-all-libs')?.addEventListener('click', () => {\n libsDiv\n .querySelectorAll('input[type=\"checkbox\"]')\n .forEach((cb) => (cb.checked = false));\n });\n\n if (libs.length) {\n libsDiv.innerHTML = libs\n .map(\n (l) => `\n \n `\n )\n .join('');\n\n requestAnimationFrame(() => {\n libsDiv.classList.add('open');\n libsDiv.style.maxHeight = libsDiv.scrollHeight + 'px';\n });\n }\n });\n } else {\n const noPlexCard = document.createElement('div');\n noPlexCard.className = 'card plex-instance-card';\n noPlexCard.innerHTML = `\n \n \n \n
\n \n \n
\n ${humanize('plex')}
\n\n
\n `;\n listDiv.appendChild(noPlexCard);\n }\n }\n}\n\nexport function createDragDropField(name, list) {\n const field = document.createElement('div');\n\n const moduleName = window.currentModuleName;\n const placeholder = PLACEHOLDER_TEXT[moduleName]?.[name] || '';\n field.className = 'field setting-field';\n field.innerHTML = `\n \n \n \n `;\n const container = field.querySelector('.subfield-list');\n (Array.isArray(list) ? list : [list]).forEach((dir, idx) => {\n const sub = document.createElement('div');\n sub.className = 'subfield';\n sub.innerHTML = `\n âźâź\n \n \n `;\n const txt = sub.querySelector('input[type=\"text\"]');\n txt.addEventListener('click', () => directoryPickerModal(txt));\n sub.querySelector('.remove-directory').onclick = () => {\n sub.remove();\n updateRemoveButtons();\n };\n container.appendChild(sub);\n });\n const updateRemoveButtons = () => {\n const subs = container.querySelectorAll('.subfield');\n subs.forEach((sub) => {\n const btn = sub.querySelector('.remove-directory');\n if (subs.length <= 1) {\n btn.disabled = true;\n btn.style.opacity = '0.5';\n btn.style.cursor = 'not-allowed';\n } else {\n btn.disabled = false;\n btn.style.opacity = '';\n btn.style.cursor = '';\n }\n });\n };\n updateRemoveButtons();\n const addBtn = field.querySelector('.add-control-btn');\n addBtn.onclick = () => {\n const sub = document.createElement('div');\n sub.className = 'subfield';\n sub.innerHTML = `\n âźâź\n \n \n `;\n const txt = sub.querySelector('input[type=\"text\"]');\n txt.addEventListener('click', () => directoryPickerModal(txt));\n sub.querySelector('.remove-directory').onclick = () => {\n sub.remove();\n updateRemoveButtons();\n };\n container.appendChild(sub);\n updateRemoveButtons();\n makeDraggable(container);\n };\n\n function makeDraggable(list) {\n let dragged;\n list.querySelectorAll('.subfield').forEach((item) => {\n item.setAttribute('draggable', true);\n item.classList.add('draggable');\n item.style.transition = 'transform 0.2s ease, opacity 0.2s ease';\n item.addEventListener('dragstart', (e) => {\n dragged = item;\n item.classList.add('dragging');\n item.style.opacity = '0.5';\n item.style.transform = 'scale(1.05)';\n e.dataTransfer.effectAllowed = 'move';\n });\n item.addEventListener('dragover', (e) => {\n e.preventDefault();\n const bounding = item.getBoundingClientRect();\n const offset = e.clientY - bounding.top + bounding.height / 2;\n if (offset > bounding.height) {\n list.insertBefore(dragged, item.nextSibling);\n } else {\n list.insertBefore(dragged, item);\n }\n });\n item.addEventListener('dragleave', () => {\n item.classList.remove('drag-over');\n });\n item.addEventListener('drop', (e) => {\n e.preventDefault();\n item.classList.remove('drag-over');\n });\n item.addEventListener('dragend', () => {\n dragged.classList.remove('dragging');\n dragged.style.opacity = '';\n dragged.style.transform = '';\n list.querySelectorAll('.subfield').forEach((sub) =>\n sub.classList.remove('drag-over')\n );\n });\n });\n }\n makeDraggable(container);\n return field;\n}\n\nexport function renderField(formFields, key, value) {\n const moduleName = window.currentModuleName;\n if (LIST_FIELD[moduleName] && LIST_FIELD[moduleName].includes(key)) {\n formFields.appendChild(createListField(key, value));\n return;\n } else if (DRAG_AND_DROP[moduleName] && DRAG_AND_DROP[moduleName].includes(key)) {\n formFields.appendChild(createDragDropField(key, value));\n return;\n } else if (DROP_DOWN_FIELDS.includes(key)) {\n const opts = DROP_DOWN_OPTIONS[key] || [];\n formFields.appendChild(renderDropdownField(key, value, opts));\n } else if (BOOL_FIELDS.includes(key)) {\n formFields.appendChild(renderBooleanField(key, value));\n } else if (INT_FIELDS.includes(key)) {\n formFields.appendChild(renderNumberField(key, value));\n } else if (TEXTAREA_FIELDS.includes(key)) {\n formFields.appendChild(renderTextareaArrayField(key, value));\n } else if (TEXT_FIELDS.includes(key)) {\n formFields.appendChild(renderTextField(key, value));\n } else if (DIR_PICKER.includes(key)) {\n formFields.appendChild(renderTextField(key, value));\n } else {\n formFields.appendChild(renderTextField(key, value));\n }\n}\n"
},
{
"path": "web/static/js/settings.js",
"content": "import { fetchConfig } from './helper.js';\nimport { renderPosterRenamerrSettings } from './settings/modules/poster_renamerr.js';\nimport { renderLabelarrSettings } from './settings/modules/labelarr.js';\nimport { renderReplacerrSettings } from './settings/modules/border_replacerr.js';\nimport { renderUpgradinatorrSettings } from './settings/modules/upgradinatorr.js';\nimport { renderGdriveSettings } from './settings/modules/sync_gdrive.js';\nimport { renderNohlSettings } from './settings/modules/nohl.js';\nimport { renderJduparrSettings } from './settings/modules/jduparr.js';\nimport { renderHealthCheckarrSettings } from './settings/modules/health_checkarr.js';\nimport { renderPosterCleanarrSettings } from './settings/modules/poster_cleanarr.js';\nimport { renderRenameinatorrSettings } from './settings/modules/renameinatorr.js';\nimport { renderUnmatchedAssetsSettings } from './settings/modules/unmatched_assets.js';\nimport { buildSettingsPayload } from './payload.js';\nimport { renderMain } from './settings/modules/main.js';\nimport { DAPS } from './common.js';\nimport { setTheme } from './index.js';\nconst { bindSaveButton, markDirty } = DAPS;\n\nconst MODULE_RENDERERS = {\n poster_renamerr: renderPosterRenamerrSettings,\n labelarr: renderLabelarrSettings,\n border_replacerr: renderReplacerrSettings,\n upgradinatorr: renderUpgradinatorrSettings,\n sync_gdrive: renderGdriveSettings,\n nohl: renderNohlSettings,\n jduparr: renderJduparrSettings,\n health_checkarr: renderHealthCheckarrSettings,\n poster_cleanarr: renderPosterCleanarrSettings,\n renameinatorr: renderRenameinatorrSettings,\n unmatched_assets: renderUnmatchedAssetsSettings,\n main: renderMain,\n};\n\nexport async function loadSettings(moduleName) {\n window.currentModuleName = moduleName;\n const formFields = document.getElementById('form-fields');\n formFields.innerHTML = '';\n const rootConfig = await fetchConfig();\n const moduleConfig = rootConfig[moduleName] || {};\n const renderer = MODULE_RENDERERS[moduleName];\n if (renderer) {\n renderer(formFields, moduleConfig, rootConfig);\n }\n DAPS.isDirty = false;\n const settingsForm = document.getElementById('settingsForm');\n if (settingsForm) {\n settingsForm.addEventListener('change', () => {\n markDirty();\n });\n\n settingsForm.addEventListener('click', (e) => {\n if (\n e.target.classList.contains('remove-btn') ||\n e.target.classList.contains('add-btn') ||\n e.target.classList.contains('edit-btn')\n ) {\n markDirty();\n }\n });\n }\n const saveBtn = document.getElementById('saveBtn');\n bindSaveButton(\n saveBtn,\n () => Promise.resolve(buildSettingsPayload(window.currentModuleName)),\n window.currentModuleName,\n\n () => {\n if (window.currentModuleName === 'main') setTheme();\n }\n );\n if (settingsForm) {\n const allCards = settingsForm.querySelectorAll('.card');\n allCards.forEach((card, i) => {\n card.classList.remove('show-card');\n setTimeout(() => {\n card.classList.add('show-card');\n\n const fields = card.querySelectorAll('.field');\n fields.forEach((field, j) => {\n field.classList.remove('show-field');\n setTimeout(() => field.classList.add('show-field'), 40 * j);\n });\n }, 40 * i);\n });\n\n const wrapperFields = settingsForm.querySelectorAll('.settings-wrapper > .field');\n wrapperFields.forEach((field, i) => {\n field.classList.remove('show-field');\n setTimeout(() => field.classList.add('show-field'), 40 * i);\n });\n }\n}\n"
},
{
"path": "web/templates/index.html",
"content": "\n\n\n\n\n \n \n đ« No instances configured for ${humanize(\n 'plex'\n )}.
\n\n \n\n DAPS\n Dashboard\n\n\n\n\n
\n \n
\n\n\n\n\n\n"
},
{
"path": "web/templates/pages/instances.html",
"content": "\n
\n"
},
{
"path": "web/templates/pages/logs.html",
"content": "\n \n \n \n
\n\n
\n"
},
{
"path": "web/templates/pages/notifications.html",
"content": "\n \n
\n\n
\n"
},
{
"path": "web/templates/pages/poster_search.html",
"content": "\n
\n\n
\n"
},
{
"path": "web/templates/pages/schedule.html",
"content": "\n
\n \n
\n \n
\n Status
\n \n \n \n \n
\n Loading Posters...
\n \n
\n\n \n
\n \n \n \n
\n \n Search in:\n \n GDrive Locations\n
\n \n
\n"
},
{
"path": "web/templates/pages/settings.html",
"content": "\n
\n\n
\n"
}
]\n \n
\n