276 lines
8.9 KiB
JavaScript
Executable File
276 lines
8.9 KiB
JavaScript
Executable File
// let lang = "zh";
|
||
// let lang;
|
||
|
||
function setSelectedLanguage() {
|
||
// if (localStorage.getItem("selectedLanguage")) {
|
||
// lang = localStorage.getItem("selectedLanguage");
|
||
// } else {
|
||
// // 判断系统语言
|
||
// let language = navigator.language || navigator.userLanguage;
|
||
// language = language.toLowerCase();
|
||
// if (language.includes("jp")) {
|
||
// lang = "jp";
|
||
// } else if (language.includes("en")) {
|
||
// lang = "en";
|
||
// } else if (language.includes("ko")) {
|
||
// lang = "ko";
|
||
// } else {
|
||
// lang = "zh";
|
||
// }
|
||
// }
|
||
}
|
||
|
||
|
||
let weekdayList = {
|
||
"zh": ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
|
||
"en": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
|
||
"jp": ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"],
|
||
"ko": ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일"],
|
||
}
|
||
|
||
// setSelectedLanguage();
|
||
updateDateTime(true);
|
||
|
||
function updateDateTime(flag, language) {
|
||
const now = new Date();
|
||
if (language) {
|
||
lang = language
|
||
}
|
||
const weekday = weekdayList[lang][now.getDay()];
|
||
|
||
const date = now.toLocaleDateString("zh-CN");
|
||
const time = now.toLocaleTimeString("zh-CN", { hour12: false });
|
||
|
||
if (time === "00:00:00" || flag) {
|
||
// 如果是0点或者 flag 为 true，则更新日期和星期，否则只更新时间
|
||
document.querySelector(".weekday").textContent = weekday;
|
||
document.querySelector(".date").textContent = date;
|
||
}
|
||
|
||
document.querySelector(".time").textContent = time;
|
||
}
|
||
setInterval(updateDateTime, 1000);
|
||
|
||
// 连接到 Socket.IO
|
||
const socket = io();
|
||
let connectionInProgress = false; // 标记连接中状态
|
||
let connectionTimeout; // 定时器变量
|
||
|
||
// 网页加载时检查状态
|
||
document.addEventListener("DOMContentLoaded", function () {
|
||
checkStatus(); // 网页加载时检查状态
|
||
|
||
// 监听更新按摩状态的事件
|
||
socket.on("update_massage_status", function (massage_status) {
|
||
updateUI(massage_status.massage_service_started);
|
||
clearTimeout(connectionTimeout); // 清除定时器
|
||
if (massage_status.massage_service_started === true) {
|
||
connectionInProgress = false; // 连接完成，重置状态
|
||
} else {
|
||
setTimeout(() => {
|
||
connectionInProgress = false;
|
||
updateUI(false);
|
||
}, 5000); // 5 秒
|
||
}
|
||
});
|
||
});
|
||
|
||
function toggleConnection() {
|
||
if (connectionInProgress) return; // 如果正在连接，直接返回
|
||
|
||
var icon = document.getElementById("status-icon");
|
||
var text = document.getElementById("status-text");
|
||
|
||
fetch("/get_status") // 请求获取当前状态
|
||
.then((response) => response.json())
|
||
.then(async (data) => {
|
||
if (!data.massage_service_started) {
|
||
// 弹出确认提示，询问用户是否要启动服务
|
||
let safeText = await getPopupText("safeText");
|
||
showPopup(safeText).then(async (confirm) => {
|
||
if (confirm) {
|
||
// 如果用户确认，则继续连接操作
|
||
let noticeText = await getPopupText("noticeText");
|
||
showPopup(noticeText, {
|
||
confirm: true,
|
||
cancel: false,
|
||
});
|
||
icon.src = "static/images/common/connecting.svg"; // 显示连接中状态
|
||
// text.innerText = "连接中";
|
||
let key = "topbar.connecting";
|
||
updateTranslation("#status-text", lang, key);
|
||
connectionInProgress = true; // 设置连接中状态
|
||
|
||
// 设置超时定时器
|
||
connectionTimeout = setTimeout(async () => {
|
||
// 超过 20 秒后恢复为未连接
|
||
icon.src = "static/images/common/disconnected.svg";
|
||
// text.innerText = "未连接";
|
||
let key = "topbar.disconnected";
|
||
updateTranslation("#status-text", lang, key);
|
||
connectionInProgress = false; // 重置连接状态
|
||
let timeoutText = await getPopupText("timeoutText");
|
||
showPopup(timeoutText, {
|
||
confirm: true,
|
||
cancel: false,
|
||
}); // 弹出连接超时提示
|
||
}, 60000); // 60 秒
|
||
|
||
// 发送请求以启动按摩服务
|
||
sendMassageControl("start");
|
||
// }
|
||
// });
|
||
}
|
||
});
|
||
} else {
|
||
// 如果服务已经启动，提示用户是否断开连接
|
||
let disconnectText = await getPopupText("disconnectText");
|
||
showPopup(disconnectText, {
|
||
confirm: true,
|
||
cancel: true,
|
||
}).then((confirm) => {
|
||
if (confirm) {
|
||
// 如果用户确认，则断开连接
|
||
icon.src = "static/images/common/connecting.svg";
|
||
text.innerText = "处理中";
|
||
let key = "topbar.processing";
|
||
updateTranslation("#status-text", lang, key);
|
||
connectionInProgress = true; // 设置连接中状态
|
||
sendMassageControl("stop");
|
||
// setTimeout(() => {
|
||
// fetch("/get_status") // 请求获取当前状态
|
||
// .then((response) => response.json())
|
||
// .then((data) => {
|
||
// console.log(data, '断开获取状态');
|
||
// })
|
||
// .catch((error) => console.error("Error fetching status:", error));
|
||
// }, 2000);
|
||
}
|
||
});
|
||
}
|
||
})
|
||
.catch((error) => console.error("Error fetching status:", error));
|
||
}
|
||
|
||
async function shutdownSystem() {
|
||
let shutdownText = await getPopupText("shutdownText");
|
||
showPopup(shutdownText, { confirm: true, cancel: true }).then(
|
||
async (confirm) => {
|
||
if (confirm) {
|
||
let shutingDownText = await getPopupText("shutingDownText");
|
||
showPopup(shutingDownText, {
|
||
confirm: false,
|
||
cancel: false,
|
||
});
|
||
sendMassageControl("shutdown");
|
||
}
|
||
}
|
||
);
|
||
}
|
||
|
||
function sendMassageControl(action) {
|
||
fetch("/massage_control", {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/x-www-form-urlencoded",
|
||
},
|
||
body: new URLSearchParams({ action: action }),
|
||
})
|
||
.then((response) => response.json())
|
||
.then((data) => {
|
||
if (data.status === "success") {
|
||
console.log(`${action} service successfully.`);
|
||
} else {
|
||
console.error("Error:", data.message);
|
||
}
|
||
})
|
||
.catch((error) => console.error("Error sending control command:", error));
|
||
}
|
||
|
||
let massageServiceStarted = null;
|
||
|
||
function checkStatus() {
|
||
fetch("/get_status") // 请求获取当前状态
|
||
.then((response) => response.json())
|
||
.then((data) => {
|
||
massageServiceStarted = data.massage_service_started;
|
||
updateUI(data.massage_service_started);
|
||
})
|
||
.catch((error) => console.error("Error fetching status:", error));
|
||
}
|
||
|
||
function updateUI(massage_service_started) {
|
||
var icon = document.getElementById("status-icon");
|
||
var text = document.getElementById("status-text");
|
||
|
||
if (massage_service_started) {
|
||
icon.src = "static/images/common/connected.svg";
|
||
// text.innerText = "已连接";
|
||
let key = "topbar.connected";
|
||
updateTranslation("#status-text", lang, key);
|
||
} else {
|
||
icon.src = "static/images/common/disconnected.svg";
|
||
// text.innerText = "未连接";
|
||
let key = "topbar.disconnected";
|
||
updateTranslation("#status-text", lang, key);
|
||
}
|
||
}
|
||
|
||
// 监听来自服务器的 on_message 事件
|
||
socket.on("on_message", function (data) {
|
||
var message = data.message;
|
||
showPopup(message, { confirm: true, cancel: false });
|
||
});
|
||
|
||
// 弹窗显示的Promise，用户点击后resolve结果
|
||
let popupResolve;
|
||
|
||
function showPopup(message, buttons = { confirm: true, cancel: true }) {
|
||
// 设置弹窗的消息内容，使用 innerHTML 以支持换行
|
||
document.getElementById("popup-message").innerHTML = message;
|
||
|
||
// 控制按钮显示
|
||
document.getElementById("confirm-btn").style.display = buttons.confirm
|
||
? "inline-block"
|
||
: "none";
|
||
document.getElementById("cancel-btn").style.display = buttons.cancel
|
||
? "inline-block"
|
||
: "none";
|
||
|
||
// 显示弹窗
|
||
document.getElementById("popup-modal").style.display = "flex";
|
||
|
||
// 返回Promise，等待用户选择
|
||
return new Promise((resolve) => {
|
||
popupResolve = resolve; // 保存 resolve 函数
|
||
});
|
||
}
|
||
|
||
// 添加一个方法动态更新弹窗内容
|
||
function updatePopupMessage(newMessage, buttons = { confirm: true, cancel: true }) {
|
||
const messageEl = document.getElementById("popup-message");
|
||
if (messageEl) {
|
||
messageEl.innerHTML = newMessage;
|
||
}
|
||
// 控制按钮显示
|
||
document.getElementById("confirm-btn").style.display = buttons.confirm
|
||
? "inline-block"
|
||
: "none";
|
||
document.getElementById("cancel-btn").style.display = buttons.cancel
|
||
? "inline-block"
|
||
: "none";
|
||
}
|
||
|
||
function confirmAction() {
|
||
// 用户点击确认按钮，关闭弹窗并返回true
|
||
document.getElementById("popup-modal").style.display = "none";
|
||
popupResolve(true);
|
||
}
|
||
|
||
function cancelAction() {
|
||
// 用户点击取消按钮，关闭弹窗并返回false
|
||
document.getElementById("popup-modal").style.display = "none";
|
||
popupResolve(false);
|
||
}
|
||
|