small-packages/luci-app-ssr-plus/luasrc/view/shadowsocksr/subscribe_schedule_compact.htm

<style type="text/css">
.ssr-schedule-inline {
	display: flex;
	gap: 2%;
	align-items: flex-start;
	flex-wrap: nowrap;
}

.ssr-schedule-item {
	width: 30%;
	min-width: 0;
}

.ssr-schedule-item select {
	width: 100%;
}

.ssr-schedule-subtitle {
	font-size: 12px;
	color: #666;
	margin-bottom: 4px;
	line-height: 1.2;
}

.ssr-schedule-hidden {
	display: none !important;
}
</style>

<script type="text/javascript">
//<![CDATA[
function ssrCompactSubscribeSchedule() {
	function getSelectByName(suffix) {
		return document.querySelector('select[name$=".' + suffix + '"], input[name$=".' + suffix + '"]');
	}

	function shortLabel(row, fallback) {
		if (!row) return fallback;
		var label = row.querySelector('.cbi-value-title');
		if (!label) return fallback;
		var text = (label.textContent || '').trim();
		var matched = text.match(/\(([^)]+)\)/);
		return matched ? matched[1] : fallback;
	}

	function getRowByName(suffix) {
		var el = getSelectByName(suffix);
		return el ? el.closest('.cbi-value') : null;
	}

	function compactScheduleRow() {
		var modeRow = getRowByName('config_auto_update_mode');
		var weekRow = getRowByName('auto_update_week_time');
		var hourRow = getRowByName('auto_update_day_time');
		var minRow = getRowByName('auto_update_min_time');
		var intervalRow = getRowByName('config_update_interval');
		if (!weekRow || !hourRow || !minRow) return;

		var weekField = weekRow.querySelector('.cbi-value-field');
		var hourField = hourRow.querySelector('.cbi-value-field');
		var minField = minRow.querySelector('.cbi-value-field');
		if (!weekField || !hourField || !minField) return;

		if (weekField.querySelector('.ssr-schedule-inline')) {
			return;
		}

		var weekSelect = weekField.querySelector('select');
		var hourSelect = hourField.querySelector('select');
		var minSelect = minField.querySelector('select');
		if (!weekSelect || !hourSelect || !minSelect) return;

		var wrap = document.createElement('div');
		wrap.className = 'ssr-schedule-inline';

		function makeItem(title, select) {
			var item = document.createElement('div');
			item.className = 'ssr-schedule-item';
			var subtitle = document.createElement('div');
			subtitle.className = 'ssr-schedule-subtitle';
			subtitle.textContent = title;
			item.appendChild(subtitle);
			item.appendChild(select);
			return item;
		}

		wrap.appendChild(makeItem(shortLabel(weekRow, '<%:Day/Week%>'), weekSelect));
		wrap.appendChild(makeItem(shortLabel(hourRow, '<%:Hour%>'), hourSelect));
		wrap.appendChild(makeItem(shortLabel(minRow, '<%:Min%>'), minSelect));

		weekField.innerHTML = '';
		weekField.appendChild(wrap);

		hourRow.classList.add('ssr-schedule-hidden');
		minRow.classList.add('ssr-schedule-hidden');

		function applyModeVisibility() {
			var modeEl = getSelectByName('config_auto_update_mode');
			var loopMode = modeEl && modeEl.value === '1';

			if (weekRow) {
				weekRow.classList.toggle('ssr-schedule-hidden', loopMode);
			}
			if (hourRow) {
				hourRow.classList.add('ssr-schedule-hidden');
			}
			if (minRow) {
				minRow.classList.add('ssr-schedule-hidden');
			}
			if (intervalRow) {
				intervalRow.classList.toggle('ssr-schedule-hidden', !loopMode);
			}
		}

		if (modeRow) {
			var modeSelect = modeRow.querySelector('select');
			if (modeSelect && !modeSelect.dataset.ssrLoopBound) {
				modeSelect.dataset.ssrLoopBound = '1';
				modeSelect.addEventListener('change', applyModeVisibility);
			}
		}

		applyModeVisibility();
	}

	compactScheduleRow();
}

(function() {
	var retryCount = 0;
	var maxRetries = 30;
	var retryTimer = null;
	var observer = null;

	function hasCompactLayout() {
		return !!document.querySelector('.ssr-schedule-inline');
	}

	function tryCompactSchedule() {
		ssrCompactSubscribeSchedule();
		if (hasCompactLayout()) {
			if (retryTimer) {
				window.clearTimeout(retryTimer);
				retryTimer = null;
			}
			if (observer) {
				observer.disconnect();
				observer = null;
			}
			return;
		}

		if (retryCount >= maxRetries) {
			return;
		}

		retryCount = retryCount + 1;
		retryTimer = window.setTimeout(tryCompactSchedule, 200);
	}

	function startCompactWatcher() {
		tryCompactSchedule();

		if (window.MutationObserver) {
			observer = new MutationObserver(function() {
				if (!hasCompactLayout()) {
					tryCompactSchedule();
				}
			});
			observer.observe(document.body, { childList: true, subtree: true });
		}
	}

	if (document.readyState === 'loading') {
		document.addEventListener('DOMContentLoaded', startCompactWatcher);
		window.addEventListener('load', tryCompactSchedule);
	} else {
		startCompactWatcher();
	}
})();
//]]>
</script>