125 lines
5.6 KiB
HTML
125 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>电影下载管理系统</title>
|
|
<link rel="icon" href="https://yinzhou.oss-cn-shanghai.aliyuncs.com/image/chaiquan.png">
|
|
<style>
|
|
/* 保持原有CSS样式不变 */
|
|
body {font-family: Arial, sans-serif; max-width: 1000px; margin: 20px auto; padding: 20px; background-color: #f5f5f5;}
|
|
.container {background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
|
|
table {width: 100%; border-collapse: collapse; margin: 20px 0;}
|
|
th, td {padding: 12px; text-align: left; border-bottom: 1px solid #ddd;}
|
|
th {background-color: #f8f9fa;}
|
|
.status-0 {color: #dc3545;}
|
|
.status-1 {color: #28a745;}
|
|
button {padding: 8px 16px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;}
|
|
button:hover {background-color: #0056b3;}
|
|
.dialog {display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);}
|
|
.dialog input {display: block; margin: 10px 0; padding: 8px; width: 300px;}
|
|
.loading-mask {position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.8); display: none; justify-content: center; align-items: center;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>电影下载列表</h1>
|
|
<button onclick="showAddDialog()">新增记录</button>
|
|
<table id="movieTable">
|
|
<thead><tr><th>ID</th><th>电影名称</th><th>m3u8地址</th><th>下载状态</th><th>操作</th></tr></thead>
|
|
<tbody id="movieList"></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div id="addDialog" class="dialog">
|
|
<h3>添加新电影</h3>
|
|
<input type="text" id="movieName" placeholder="输入电影名称">
|
|
<input type="text" id="moviePath" placeholder="输入m3u8地址">
|
|
<div style="text-align: right; margin-top: 15px;">
|
|
<button onclick="addNewMovie()">确认添加</button>
|
|
<button onclick="hideAddDialog()" style="background-color: #6c757d; margin-left: 8px;">取消</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="loading-mask" id="loading">更新中...</div>
|
|
|
|
<script>
|
|
// 动态获取当前域名和协议
|
|
const API_BASE = `${window.location.protocol}//${window.location.hostname}:8778`;
|
|
|
|
// 页面加载时获取数据
|
|
window.onload = async () => {
|
|
try {
|
|
const response = await fetch(`${API_BASE}/movie_list?_=${Date.now()}`);
|
|
if (!response.ok) throw new Error('HTTP错误');
|
|
const movies = await response.json();
|
|
renderMovieList(movies);
|
|
} catch (error) {
|
|
console.error('数据加载失败:', error);
|
|
alert('无法加载电影列表，请检查服务器连接');
|
|
}
|
|
};
|
|
|
|
// 渲染电影列表
|
|
function renderMovieList(movies) {
|
|
const tbody = document.getElementById('movieList');
|
|
tbody.innerHTML = '';
|
|
movies.forEach(movie => {
|
|
const row = document.createElement('tr');
|
|
row.innerHTML = `
|
|
<td>${movie[0]}</td>
|
|
<td>${movie[1]}</td>
|
|
<td>${movie[2]}</td>
|
|
<td class="status-${movie[3]}">${movie[3] === 0 ? '未下载' : '已下载'}</td>
|
|
<td><button onclick="toggleDownloadStatus(${movie[0]})">${movie[3] === 0 ? '标记为已下载' : '标记为未下载'}</button></td>`;
|
|
tbody.appendChild(row);
|
|
});
|
|
}
|
|
|
|
// 对话框控制
|
|
function showAddDialog() { document.getElementById('addDialog').style.display = 'block'; }
|
|
function hideAddDialog() { document.getElementById('addDialog').style.display = 'none'; document.getElementById('movieName').value = ''; document.getElementById('moviePath').value = ''; }
|
|
|
|
// 新增电影
|
|
async function addNewMovie() {
|
|
const name = document.getElementById('movieName').value.trim();
|
|
const path = document.getElementById('moviePath').value.trim();
|
|
if (!name || !path) return alert('请填写完整信息');
|
|
|
|
try {
|
|
document.getElementById('loading').style.display = 'flex';
|
|
const response = await fetch(`${API_BASE}/add_movie`, {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({name, path})
|
|
});
|
|
if (!response.ok) throw new Error('添加失败');
|
|
|
|
const updated = await fetch(`${API_BASE}/movie_list?_=${Date.now()}`);
|
|
if (!updated.ok) throw new Error('刷新数据失败');
|
|
renderMovieList(await updated.json());
|
|
hideAddDialog();
|
|
} catch (error) { alert(error.message); }
|
|
finally { document.getElementById('loading').style.display = 'none'; }
|
|
}
|
|
|
|
// 切换下载状态
|
|
async function toggleDownloadStatus(id) {
|
|
try {
|
|
const statusRes = await fetch(`${API_BASE}/movie/${id}?_=${Date.now()}`);
|
|
const {status} = await statusRes.json();
|
|
|
|
const updateRes = await fetch(`${API_BASE}/movie/${id}`, {
|
|
method: 'PUT',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({is_download: status === 0 ? 1 : 0})
|
|
});
|
|
|
|
if (updateRes.ok) {
|
|
const updatedRes = await fetch(`${API_BASE}/movie_list?_=${Date.now()}`);
|
|
renderMovieList(await updatedRes.json());
|
|
}
|
|
} catch (error) { console.error('操作失败:', error); }
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |