174 lines
7.5 KiB
HTML
174 lines
7.5 KiB
HTML
{#
|
||
settings.html — v3.0 Production
|
||
從原 1651 行精簡到 ~180 行 markup
|
||
變更：
|
||
1. 獨立 <html><head><body> → extends "ewoooc_base.html"
|
||
2. 移除 _navbar.html include
|
||
3. 1031 行 inline style → static/css/page-settings.css
|
||
4. JS 邏輯抽到 static/js/page-settings.js
|
||
5. active_page='settings'（system 群組 → 石墨灰 accent）
|
||
#}
|
||
{% extends "ewoooc_base.html" %}
|
||
|
||
{% block title %}爬蟲管理 · EwoooC{% endblock %}
|
||
|
||
{% set active_page = 'settings' %}
|
||
|
||
{% block extra_css %}
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='css/page-settings.css') }}">
|
||
{% endblock %}
|
||
|
||
{% block ewooo_content %}
|
||
<header class="page-header">
|
||
<div>
|
||
<h1><i class="fas fa-robot me-2"></i>爬蟲管理中心</h1>
|
||
<p class="text-muted mb-0">管理爬蟲開關、執行頻率與分類網址</p>
|
||
</div>
|
||
<button class="refresh-btn" onclick="refreshData()">
|
||
<i class="fas fa-sync-alt me-2"></i>刷新狀態
|
||
</button>
|
||
</header>
|
||
|
||
{# 統計 #}
|
||
<div class="stats-grid">
|
||
<div class="stat-card active">
|
||
<div class="stat-icon"><i class="fas fa-play-circle"></i></div>
|
||
<div class="stat-number" id="enabled-count">0</div>
|
||
<div class="stat-label">啟用中</div>
|
||
</div>
|
||
<div class="stat-card paused">
|
||
<div class="stat-icon"><i class="fas fa-pause-circle"></i></div>
|
||
<div class="stat-number" id="paused-count">0</div>
|
||
<div class="stat-label">已暫停</div>
|
||
</div>
|
||
<div class="stat-card total">
|
||
<div class="stat-icon"><i class="fas fa-layer-group"></i></div>
|
||
<div class="stat-number" id="total-count">0</div>
|
||
<div class="stat-label">爬蟲總數</div>
|
||
</div>
|
||
</div>
|
||
|
||
{# 爬蟲卡片 (JS 動態插入) #}
|
||
<div id="crawlers-container"></div>
|
||
|
||
{# 使用說明 #}
|
||
<div class="info-section">
|
||
<h5><i class="fas fa-info-circle"></i>使用說明</h5>
|
||
<ul>
|
||
<li>使用右側切換開關可以快速啟用或停用爬蟲</li>
|
||
<li>停用的爬蟲程式碼和資料會完整保留，可隨時重新啟用</li>
|
||
<li>點擊「修改頻率」按鈕可調整爬蟲的執行間隔時間</li>
|
||
<li>變更執行頻率後，需要重啟排程器服務才會生效：<code>sudo systemctl restart momo-scheduler</code></li>
|
||
<li>點擊右上角「刷新狀態」按鈕可即時更新所有爬蟲狀態</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<hr class="section-divider">
|
||
|
||
{# 分類設定 #}
|
||
<div class="section-header">
|
||
<h5><i class="fas fa-list-alt me-2"></i>爬蟲網址設定</h5>
|
||
<button class="btn btn-primary" onclick="prepareAddModal()">
|
||
<i class="fas fa-plus me-2"></i>新增分類
|
||
</button>
|
||
</div>
|
||
|
||
<div class="category-search-container" id="search-container" style="display: none;">
|
||
<div class="search-box" id="search-box">
|
||
<i class="fas fa-search search-icon"></i>
|
||
<input type="text" id="category-search" placeholder="搜尋分類名稱或 URL..." oninput="filterCategories()">
|
||
<i class="fas fa-times clear-icon" onclick="clearSearch()"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="categories-container">
|
||
{% if categories %}
|
||
<div class="categories-grid" id="categories-grid">
|
||
{% for category in categories %}
|
||
<div class="category-card" data-category-name="{{ category.name|lower }}" data-category-url="{{ category.url|lower }}">
|
||
<div class="category-card-header">
|
||
<div class="category-name"><i class="fas fa-tag"></i>{{ category.name }}</div>
|
||
</div>
|
||
<div class="category-url">
|
||
<i class="fas fa-link"></i>
|
||
<a href="{{ category.url }}" target="_blank" title="{{ category.url }}">{{ category.url }}</a>
|
||
</div>
|
||
<div class="category-actions">
|
||
<button class="category-btn test" data-url="{{ category.url }}" onclick="testUrl(this.dataset.url, this)" title="測試連結有效性">
|
||
<i class="fas fa-stethoscope"></i><span>測試</span>
|
||
</button>
|
||
<button class="category-btn edit" data-id="{{ category.id }}" data-name="{{ category.name }}" data-url="{{ category.url }}"
|
||
onclick="prepareEditModal(this.dataset.id, this.dataset.name, this.dataset.url)" title="編輯分類">
|
||
<i class="fas fa-edit"></i><span>編輯</span>
|
||
</button>
|
||
<button class="category-btn delete" data-id="{{ category.id }}" onclick="deleteCategory(this.dataset.id)" title="刪除分類">
|
||
<i class="fas fa-trash"></i><span>刪除</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
<div class="no-results" id="no-results" style="display: none;">
|
||
<i class="fas fa-search"></i>
|
||
<p>找不到符合的分類</p>
|
||
</div>
|
||
{% else %}
|
||
<div class="empty-state">
|
||
<div class="empty-state-icon"><i class="fas fa-folder-open"></i></div>
|
||
<h5>尚未建立任何分類</h5>
|
||
<p>開始建立您的第一個爬蟲分類，追蹤 MOMO 商城的商品變化</p>
|
||
<button class="empty-state-btn" onclick="prepareAddModal()">
|
||
<i class="fas fa-plus-circle"></i>立即新增分類
|
||
</button>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<div class="alert alert-info mb-5">
|
||
<i class="fas fa-lightbulb me-2"></i>
|
||
<strong>提示：</strong> 分類設定採用動態讀取機制，新增或修改後<strong>無需重啟系統</strong>，下一次爬蟲任務執行時將自動載入最新設定。
|
||
</div>
|
||
|
||
{# Toast / Loading / Modal #}
|
||
<div class="toast-container" id="toast-container"></div>
|
||
<div class="loading-overlay" id="loading-overlay">
|
||
<div class="loading-spinner">
|
||
<i class="fas fa-spinner"></i>
|
||
<div class="loading-text">處理中，請稍候...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal fade" id="categoryModal" tabindex="-1">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title" id="modalTitle">新增分類</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="categoryForm" onsubmit="saveCategory(); return false;">
|
||
<input type="hidden" id="categoryId" name="id">
|
||
<div class="mb-3">
|
||
<label for="categoryName" class="form-label"><i class="fas fa-tag me-2"></i>分類名稱</label>
|
||
<input type="text" class="form-control" id="categoryName" name="name" required placeholder="例如：3C家電">
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="categoryUrl" class="form-label"><i class="fas fa-link me-2"></i>分類 URL</label>
|
||
<input type="url" class="form-control" id="categoryUrl" name="url" required placeholder="https://www.momoshop.com.tw/...">
|
||
<div class="form-text">請輸入完整的 MOMO 商城分類網址</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><i class="fas fa-times me-2"></i>取消</button>
|
||
<button type="submit" form="categoryForm" class="btn btn-primary"><i class="fas fa-save me-2"></i>儲存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block extra_js %}
|
||
<script src="{{ url_for('static', filename='js/page-settings.js') }}"></script>
|
||
{% endblock %}
|