index.html•9.16 kB
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="{{ url_for('static', path='/styles.css') }}" rel="stylesheet">
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
<meta name="description" content="index">
<meta name="author" content="lcy">
<!-- <link rel="icon" href="../../../../favicon.ico"> -->
<title>Upload & Publish</title>
</head>
<body>
<div class="container">
<h2>设置发布源开关</h2>
<div id="toggleContainer">
<span id="csdn-status" class="status-dot"></span>
<span class="shifted-text">CSDN</span>
<label class="switch">
<input type="checkbox" id="csdn" class="toggleButton">
<span class="slider"></span>
</label>
<span id="juejin-status" class="status-dot"></span>
<span class="shifted-text">掘金</span>
<label class="switch">
<input type="checkbox" id="juejin" class="toggleButton">
<span class="slider"></span>
</label>
<span id="cnblogs-status" class="status-dot"></span>
<span class="shifted-text">博客园</span>
<label class="switch">
<input type="checkbox" id="cnblogs" class="toggleButton">
<span class="slider"></span>
</label>
<span id="wechat-status" class="status-dot"></span>
<span class="shifted-text">微信公众号</span>
<label class="switch">
<input type="checkbox" id="wechat" class="toggleButton">
<span class="slider"></span>
</label>
<span id="zhihu-status" class="status-dot"></span>
<span class="shifted-text">知乎</span>
<label class="switch">
<input type="checkbox" id="zhihu" class="toggleButton">
<span class="slider"></span>
</label>
<span id="halo-status" class="status-dot"></span>
<span class="shifted-text">Halo博客</span>
<label class="switch">
<input type="checkbox" id="halo" class="toggleButton">
<span class="slider"></span>
</label>
</div>
<hr>
<h2>发布浏览器操作</h2>
<div style="display: flex; gap: 40px;">
<button id="openBrowserButton">点击打开浏览器</button>
<button id="refreshBtn">刷新浏览器登录状态</button>
</div>
<div id="response">{{ refresh }}</div>
<hr>
<h1>上传发布文章文件</h1>
<form action="/uploader/mdfile" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label for="file">选择一个Markdown文件 (.md):</label><br>
<input type="file" id="file" name="file" accept=".md" required>
</div>
<div class="form-group">
<button type="submit">上传</button>
</div>
</form>
<hr>
<!-- 显示上传结果的区域 -->
<h2>发布结果</h2>
<table>
<tr>
<th>发布平台</th>
<th>发布结果</th>
</tr>
<tr>
<td>CSDN</td>
<td class="result">{{ data.result_dict.csdn.result }}</td>
</tr>
<tr>
<td>掘金</td>
<td class="result">{{ data.result_dict.juejin.result }}</td>
</tr>
<tr>
<td>博客园</td>
<td class="result">{{ data.result_dict.cnblogs.result }}</td>
</tr>
<tr>
<td>微信公众号</td>
<td class="result">{{ data.result_dict.wechat.result }}</td>
</tr>
<tr>
<td>知乎</td>
<td class="result">{{ data.result_dict.zhihu.result }}</td>
</tr>
<tr>
<td>Halo博客</td>
<td class="result">{{ data.result_dict.halo.result }}</td>
</tr>
</table>
</div>
<script>
const t_data = {{ data | tojson }};
if (t_data.show_confirm) {
alert("重启发布浏览器。点击“确认”将立即重启发布浏览器。\n");
fetch('/browser/handle_confirm')
.then(response => {
if (!response.ok) {
throw new Error('IsConfirmed response was not ok');
}
})
.then(data => {
console.log(data.message);
})
.catch(error => {
console.error('Error:', error);
});
}
const toggleContainer = document.getElementById('toggleContainer');
// 根据 JSON 数据设置开关状态的函数
function setToggleStates(data) {
const toggles = toggleContainer.querySelectorAll('input[type="checkbox"]');
toggles.forEach((toggle, index) => {
for (const [key, value] of Object.entries(data)) {
if (toggle.id === key) {
toggle.checked = value;
}
}
})
const statuses = toggleContainer.querySelectorAll('span[class^="status-dot"]');
statuses.forEach((status, index) => {
for (const [key, value] of Object.entries(data)) {
if (status.id.replace(/-status$/, "") === key) {
document.getElementById(status.id).className = value ? 'status-dot logged-in' : 'status-dot logged-out';
}
}
})
}
// 添加点击事件监听器
toggleContainer.addEventListener('change', async (event) => {
// 检查事件目标是否是带有特定类名的元素
if (event.target.classList.contains('toggleButton')) {
const toggleButton = event.target;
const newState = toggleButton.checked;
try {
await fetch('/state/toggle', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({type: toggleButton.id, new_state: newState})
});
console.log('Button state updated.');
} catch (error) {
console.error('Error updating button state:', error);
}
}
});
document.getElementById('openBrowserButton').addEventListener('click', function() {
fetch('/browser/open')
.then(response => {
if (response.ok) {
document.getElementById('response').innerText = "成功打开发布浏览器!";
} else {
document.getElementById('response').innerText = "打开发布浏览器失败!";
}
})
.catch(error => {
console.error('Error:', error);
document.getElementById('response').innerText = '打开发布浏览器失败!';
});
});
document.getElementById("refreshBtn").addEventListener('click', function() {
this.disabled = true; // 禁用按钮防止重复点击
// 调用 /state 接口
fetch('/state')
.then(response => {
if (response.ok) {
document.getElementById('response').innerText = "成功刷新浏览器登录状态!";
} else {
document.getElementById('response').innerText = "刷新浏览器登录状态失败!";
}
return response.json();
})
.then(data => {
setToggleStates(data);
})
.catch(error => console.error('Error:', error));
});
{#document.getElementById('requestButton').addEventListener('click', function() {#}
{# fetch('/state')#}
{# .then(response => {#}
{# setToggleStates(response.json());#}
{# if (response.ok) {#}
{# document.getElementById('response').innerText = "成功刷新浏览器cookies!";#}
{# } else {#}
{# document.getElementById('response').innerText = "刷新浏览器cookies失败!";#}
{# }#}
{# })#}
{# .catch(error => {#}
{# console.error('Error:', error);#}
{# document.getElementById('response').innerText = '刷新浏览器cookies失败!';#}
{# });#}
{# });#}
</script>
</body>
</html>