172 lines
7.3 KiB
HTML
172 lines
7.3 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">守住比價資料新鮮度，支援 PChome 業績判斷。</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>優先確保 PChome / MOMO 比價來源保持啟用。</li>
|
||
<li>資料過舊時先調整頻率，再重啟排程器讓設定生效。</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>建立分類後，系統才能持續補齊比價資料。</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> 新增或修改分類後，下一次資料擷取會使用最新清單補齊 MOMO 參考來源。
|
||
</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 %}
|