mirror of
https://github.com/plexguide/Huntarr.io.git
synced 2026-04-19 21:26:53 -04:00
618 lines
23 KiB
HTML
618 lines
23 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<!-- CRITICAL FIX: Override all overflow settings to ensure scrolling works -->
|
|
<style>
|
|
/* Force scrolling on critical elements */
|
|
html, body {
|
|
overflow: auto !important;
|
|
height: 100% !important;
|
|
max-height: none !important;
|
|
position: static !important;
|
|
}
|
|
|
|
/* Fix app container */
|
|
.app-container {
|
|
overflow: auto !important;
|
|
height: 100vh !important;
|
|
max-height: none !important;
|
|
}
|
|
|
|
/* Fix main content area */
|
|
.main-content {
|
|
overflow-y: auto !important;
|
|
height: 100vh !important;
|
|
max-height: none !important;
|
|
}
|
|
|
|
/* Allow scheduling page to scroll */
|
|
#schedulingPage,
|
|
.content-section {
|
|
overflow-y: auto !important;
|
|
height: auto !important;
|
|
min-height: calc(100vh - 60px) !important;
|
|
padding-bottom: 300px !important;
|
|
}
|
|
|
|
/* Let container content flow properly */
|
|
.scheduler-container,
|
|
.scheduler-panel,
|
|
.panel-content,
|
|
#schedulesContainer,
|
|
.schedules-list {
|
|
overflow: visible !important;
|
|
height: auto !important;
|
|
max-height: none !important;
|
|
}
|
|
</style>
|
|
|
|
{% include 'components/head.html' %}
|
|
<title>Huntarr - Scheduling</title>
|
|
<link rel="stylesheet" href="./static/css/scheduler-history.css">
|
|
<link rel="stylesheet" href="./static/css/dropdown-overrides.css">
|
|
<!-- Scrolling fixes are handled inline below -->
|
|
|
|
<style>
|
|
/* Critical scrolling fixes applied directly to the page */
|
|
body, html {
|
|
overflow: auto !important;
|
|
height: 100% !important;
|
|
}
|
|
|
|
.app-container {
|
|
overflow: auto !important;
|
|
height: 100vh !important;
|
|
}
|
|
|
|
.main-content {
|
|
overflow-y: auto !important;
|
|
height: 100vh !important;
|
|
}
|
|
|
|
#schedulingPage,
|
|
.content-section.active {
|
|
overflow-y: auto !important;
|
|
height: auto !important;
|
|
min-height: calc(100vh - 60px) !important;
|
|
padding-bottom: 100px !important;
|
|
}
|
|
|
|
.scheduler-container {
|
|
overflow: visible !important;
|
|
height: auto !important;
|
|
}
|
|
|
|
.scheduler-panel,
|
|
.panel-content {
|
|
overflow: visible !important;
|
|
height: auto !important;
|
|
}
|
|
|
|
/* Mobile overrides handled in the 768px media query */
|
|
@media (max-width: 768px) {
|
|
/* Any mobile-specific overrides can go here */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="app-container mobile-optimized">
|
|
{% include 'components/sidebar.html' %}
|
|
|
|
<div class="main-content">
|
|
{% include 'components/topbar.html' %}
|
|
|
|
<!-- Scheduling Section -->
|
|
<section id="schedulingPage" class="content-section active">
|
|
<!-- Minimalistic header with gradient line -->
|
|
<div class="scheduling-minimalist-header">
|
|
<h2><i class="fas fa-calendar-alt"></i> Scheduling</h2>
|
|
<hr class="color-shift-divider">
|
|
</div>
|
|
|
|
<div class="scheduler-container">
|
|
<!-- Add Schedule Panel -->
|
|
<div class="scheduler-panel">
|
|
<div class="panel-header">
|
|
<h3>Add New Schedule</h3>
|
|
</div>
|
|
<div class="panel-content">
|
|
<!-- Time Selection -->
|
|
<div class="form-group">
|
|
<label for="scheduleHour">Time</label>
|
|
<div class="time-selection">
|
|
<select id="scheduleHour" class="form-control">
|
|
{% for h in range(0, 24) %}
|
|
<option value="{{ h }}">{{ '%02d' % h }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<span class="time-separator">:</span>
|
|
<select id="scheduleMinute" class="form-control">
|
|
{% for m in range(0, 60, 5) %}
|
|
<option value="{{ m }}">{{ '%02d' % m }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="color-shift-divider highlight-divider">
|
|
|
|
<!-- Frequency/Days -->
|
|
<div class="form-group">
|
|
<label>Days of the Week</label>
|
|
<div class="days-selection">
|
|
<div class="day-checkbox">
|
|
<input type="checkbox" id="day-monday" class="day-input">
|
|
<label for="day-monday">Monday</label>
|
|
</div>
|
|
<div class="day-checkbox">
|
|
<input type="checkbox" id="day-tuesday" class="day-input">
|
|
<label for="day-tuesday">Tuesday</label>
|
|
</div>
|
|
<div class="day-checkbox">
|
|
<input type="checkbox" id="day-wednesday" class="day-input">
|
|
<label for="day-wednesday">Wednesday</label>
|
|
</div>
|
|
<div class="day-checkbox">
|
|
<input type="checkbox" id="day-thursday" class="day-input">
|
|
<label for="day-thursday">Thursday</label>
|
|
</div>
|
|
<div class="day-checkbox">
|
|
<input type="checkbox" id="day-friday" class="day-input">
|
|
<label for="day-friday">Friday</label>
|
|
</div>
|
|
<div class="day-checkbox">
|
|
<input type="checkbox" id="day-saturday" class="day-input">
|
|
<label for="day-saturday">Saturday</label>
|
|
</div>
|
|
<div class="day-checkbox">
|
|
<input type="checkbox" id="day-sunday" class="day-input">
|
|
<label for="day-sunday">Sunday</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="color-shift-divider highlight-divider">
|
|
|
|
<!-- Action Selection -->
|
|
<div class="form-group">
|
|
<label for="scheduleAction">Action</label>
|
|
<select id="scheduleAction" class="form-control">
|
|
<optgroup label="Activity Control">
|
|
<option value="enable">Enable Activity</option>
|
|
<option value="disable">Disable Activity</option>
|
|
</optgroup>
|
|
<optgroup label="API Limits">
|
|
<option value="api-5">API Limits 5</option>
|
|
<option value="api-10">API Limits 10</option>
|
|
<option value="api-20">API Limits 20</option>
|
|
<option value="api-30">API Limits 30</option>
|
|
<option value="api-50">API Limits 50</option>
|
|
<option value="api-100">API Limits 100</option>
|
|
</optgroup>
|
|
</select>
|
|
</div>
|
|
|
|
<hr class="color-shift-divider">
|
|
|
|
<!-- Instance Selection (populated from API with detected instances) -->
|
|
<div class="form-group">
|
|
<label for="scheduleApp">Instance</label>
|
|
<select id="scheduleApp" class="form-control">
|
|
<option value="global">All Instances (Global)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Add Button -->
|
|
<div class="form-actions">
|
|
<button id="addScheduleButton" class="action-button" style="width: auto; display: inline-block;">
|
|
<i class="fas fa-plus"></i> Add Schedule
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Current Schedules Panel -->
|
|
<div class="scheduler-panel">
|
|
<div class="panel-header">
|
|
<h3>Current Schedules</h3>
|
|
</div>
|
|
<div class="panel-content">
|
|
<div id="schedulesContainer" class="schedules-list">
|
|
<!-- Example schedule items (will be dynamically populated) -->
|
|
<div class="schedule-item">
|
|
<div class="schedule-item-checkbox">
|
|
<input type="checkbox" id="schedule-1" checked>
|
|
<label for="schedule-1"></label>
|
|
</div>
|
|
<div class="schedule-item-time">10:00</div>
|
|
<div class="schedule-item-days">Mon, Wed, Fri</div>
|
|
<div class="schedule-item-action">Enable</div>
|
|
<div class="schedule-item-app">All Instances (Global)</div>
|
|
<div class="schedule-item-actions">
|
|
<button class="icon-button edit-schedule" data-id="1"><i class="fas fa-edit"></i></button>
|
|
<button class="icon-button delete-schedule" data-id="1"><i class="fas fa-trash"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="schedule-item">
|
|
<div class="schedule-item-checkbox">
|
|
<input type="checkbox" id="schedule-2" checked>
|
|
<label for="schedule-2"></label>
|
|
</div>
|
|
<div class="schedule-item-time">22:00</div>
|
|
<div class="schedule-item-days">Daily</div>
|
|
<div class="schedule-item-action">API Limit: 30</div>
|
|
<div class="schedule-item-app">Sonarr Instance 1</div>
|
|
<div class="schedule-item-actions">
|
|
<button class="icon-button edit-schedule" data-id="2"><i class="fas fa-edit"></i></button>
|
|
<button class="icon-button delete-schedule" data-id="2"><i class="fas fa-trash"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="noSchedulesMessage" class="no-schedules-message" style="display: none;">
|
|
<p>No schedules configured. Use the form above to add a schedule.</p>
|
|
</div>
|
|
|
|
<!-- Auto-save is now enabled, no save button needed -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
{% include 'components/footer.html' %}
|
|
|
|
<!-- Pass base URL configuration to JavaScript -->
|
|
<script>window.HUNTARR_BASE_URL = '{{ base_url|default("", true) }}';</script>
|
|
<!-- Pass global scripts -->
|
|
{% include 'components/scripts.html' %}
|
|
|
|
<!-- Load scheduling script -->
|
|
<script src="./static/js/modules/features/scheduling.js"></script>
|
|
|
|
<!-- Add scrolling fix script -->
|
|
<!-- <script src="./static/js/scheduling-fix.js"></script> Removed -->
|
|
|
|
<!-- Scrolling fixes applied inline -->
|
|
|
|
<style>
|
|
/* Scheduler Container */
|
|
.scheduler-container {
|
|
display: grid;
|
|
grid-template-columns: minmax(300px, 1fr) minmax(400px, 2fr);
|
|
gap: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.scheduler-container {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* Scheduler Panels */
|
|
.scheduler-panel {
|
|
background: var(--bg-secondary, #1e2738);
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.panel-header {
|
|
background: linear-gradient(to right, rgba(99, 102, 241, 0.1), rgba(155, 89, 182, 0.1));
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid var(--border-color, rgba(90, 109, 137, 0.2));
|
|
}
|
|
|
|
.panel-header h3 {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--text-primary, #fff);
|
|
}
|
|
|
|
.panel-content {
|
|
padding: 16px;
|
|
}
|
|
|
|
/* Form Elements */
|
|
.form-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-weight: 500;
|
|
color: var(--text-primary, #fff);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.form-control {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border-radius: 6px;
|
|
border: 1px solid var(--border-color, rgba(90, 109, 137, 0.3));
|
|
background-color: var(--bg-input, #131a27);
|
|
color: var(--text-primary, #fff);
|
|
font-size: 14px;
|
|
transition: border-color 0.3s, box-shadow 0.3s;
|
|
}
|
|
|
|
.form-control:focus {
|
|
border-color: var(--accent-color, #6366f1);
|
|
outline: none;
|
|
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
|
|
}
|
|
|
|
/* Time Selection */
|
|
.time-selection {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.time-selection .form-control {
|
|
width: 80px;
|
|
}
|
|
|
|
.time-separator {
|
|
font-weight: bold;
|
|
color: var(--text-primary, #fff);
|
|
}
|
|
|
|
/* Day Selection */
|
|
.days-selection {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.day-checkbox {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.day-checkbox label {
|
|
margin-left: 8px;
|
|
margin-bottom: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.day-input {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
/* Action Button */
|
|
.form-actions {
|
|
margin-top: 24px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.action-button {
|
|
background-color: var(--accent-color, #6366f1);
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 6px;
|
|
padding: 8px 16px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s ease;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.action-button:hover {
|
|
background-color: var(--accent-hover, #2563eb);
|
|
}
|
|
|
|
.action-button i {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
/* Current Schedules */
|
|
.schedules-list {
|
|
border: 1px solid var(--border-color, rgba(90, 109, 137, 0.2));
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.schedule-item {
|
|
display: grid;
|
|
grid-template-columns: auto 80px 1fr 1fr 1fr auto;
|
|
align-items: center;
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid var(--border-color, rgba(90, 109, 137, 0.1));
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.schedule-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.schedule-item:hover {
|
|
background-color: rgba(99, 102, 241, 0.05);
|
|
}
|
|
|
|
.schedule-item-checkbox {
|
|
/* Keep spacing but hide the checkbox */
|
|
width: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.schedule-item-time {
|
|
font-weight: 600;
|
|
color: var(--accent-color, #6366f1);
|
|
}
|
|
|
|
.schedule-item-days,
|
|
.schedule-item-action,
|
|
.schedule-item-app {
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.schedule-item-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.icon-button {
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-secondary, rgba(255, 255, 255, 0.7));
|
|
cursor: pointer;
|
|
padding: 4px;
|
|
border-radius: 4px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.icon-button:hover {
|
|
color: var(--text-primary, #fff);
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.edit-schedule:hover {
|
|
color: var(--warning-color, #f59e0b);
|
|
}
|
|
|
|
.delete-schedule:hover {
|
|
color: var(--error-color, #ef4444);
|
|
}
|
|
|
|
.no-schedules-message {
|
|
padding: 20px;
|
|
text-align: center;
|
|
color: var(--text-secondary, rgba(255, 255, 255, 0.7));
|
|
}
|
|
|
|
/* Save Schedules Button */
|
|
.save-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 8px 16px;
|
|
font-size: 14px;
|
|
color: #fff;
|
|
background-color: var(--accent-color, #6366f1);
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.save-button:hover {
|
|
background-color: var(--accent-hover, #2563eb);
|
|
}
|
|
|
|
.save-button i {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
/* Optgroup styling */
|
|
optgroup {
|
|
font-weight: 600;
|
|
color: var(--accent-color, #6366f1);
|
|
}
|
|
|
|
optgroup option {
|
|
color: var(--text-primary, #fff);
|
|
font-weight: normal;
|
|
padding-left: 8px;
|
|
}
|
|
|
|
/* Toggle switch — base definition is in style.css.
|
|
Only layout container kept here. */
|
|
.toggle-switch-container {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
</style>
|
|
|
|
<!-- Pass base URL configuration to JavaScript -->
|
|
<script>window.HUNTARR_BASE_URL = '{{ base_url|default("", true) }}';</script>
|
|
<!-- Pass global scripts -->
|
|
{% include 'components/scripts.html' %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Make sure the navigation link is active
|
|
const schedulingNav = document.getElementById('schedulingNav');
|
|
if (schedulingNav) schedulingNav.classList.add('active');
|
|
|
|
// Apply scrolling fixes immediately and after a delay
|
|
function applyScrollingFixes() {
|
|
// Fix body and main content scrolling
|
|
document.body.style.overflow = 'auto';
|
|
document.documentElement.style.overflow = 'auto';
|
|
|
|
const mainContent = document.querySelector('.main-content');
|
|
if (mainContent) {
|
|
mainContent.style.overflowY = 'auto';
|
|
mainContent.style.height = 'auto';
|
|
}
|
|
|
|
const schedulingPage = document.getElementById('schedulingPage');
|
|
if (schedulingPage) {
|
|
schedulingPage.style.overflowY = 'auto';
|
|
schedulingPage.style.height = 'auto';
|
|
schedulingPage.style.maxHeight = 'none';
|
|
}
|
|
|
|
// Fix all scheduler containers
|
|
const containers = document.querySelectorAll('.scheduler-container, .scheduler-panel, .panel-content, #schedulesContainer');
|
|
containers.forEach(container => {
|
|
container.style.overflow = 'visible';
|
|
container.style.height = 'auto';
|
|
container.style.maxHeight = 'none';
|
|
});
|
|
}
|
|
|
|
// Apply immediately and after a short delay
|
|
applyScrollingFixes();
|
|
setTimeout(applyScrollingFixes, 500);
|
|
setTimeout(applyScrollingFixes, 1000);
|
|
|
|
// Also apply on window resize
|
|
window.addEventListener('resize', applyScrollingFixes);
|
|
});
|
|
</script>
|
|
|
|
<!-- Last resort inline emergency scrolling fix -->
|
|
<style>
|
|
/* Force critical containers to be scrollable */
|
|
body, html, .app-container, .main-content, #schedulingPage, .scheduler-container {
|
|
overflow: auto !important;
|
|
height: auto !important;
|
|
}
|
|
|
|
/* Make main-content scrollable */
|
|
.main-content {
|
|
overflow-y: auto !important;
|
|
height: 100vh !important;
|
|
}
|
|
|
|
/* Make the most important element scrollable */
|
|
#schedulingPage {
|
|
overflow-y: auto !important;
|
|
overflow-x: hidden !important;
|
|
height: auto !important;
|
|
min-height: calc(100vh - 60px) !important;
|
|
padding-bottom: 200px !important;
|
|
}
|
|
|
|
/* Remove fixed heights */
|
|
.scheduler-container, .scheduler-panel, .panel-content, #schedulesContainer {
|
|
max-height: none !important;
|
|
height: auto !important;
|
|
overflow: visible !important;
|
|
}
|
|
</style>
|
|
|
|
<!-- Beautification styles applied inline -->
|
|
</body>
|
|
</html>
|