344 lines
12 KiB
JavaScript
Executable File
344 lines
12 KiB
JavaScript
Executable File
function setHeaderLength() {
|
||
let headerBtn = document.querySelectorAll(".head-btn");
|
||
let headerLength = headerBtn.length;
|
||
localStorage.setItem("headerLength", headerLength);
|
||
}
|
||
setHeaderLength();
|
||
|
||
function updateUI(massage_service_started) {
|
||
var icon = document.getElementById("status-icon");
|
||
var text = document.getElementById("status-text");
|
||
|
||
let lang = localStorage.getItem("selectedLanguage");
|
||
// let lang = 'zh';
|
||
|
||
if (massage_service_started) {
|
||
icon.src = "static/images/common/connected.svg";
|
||
let key = "topbar.connected";
|
||
updateTranslation("#status-text", lang, key);
|
||
} else {
|
||
icon.src = "static/images/common/disconnected.svg";
|
||
let key = "topbar.disconnected";
|
||
updateTranslation("#status-text", lang, key);
|
||
}
|
||
}
|
||
|
||
async function switchMode(mode) {
|
||
const status = await getStatus();
|
||
if (status.is_massaging && status.is_massaging == true) {
|
||
let massagingText = await getPopupText("massagingText");
|
||
showPopup(massagingText);
|
||
return;
|
||
} else {
|
||
window.location.href = `/switch_mode/${mode}`;
|
||
}
|
||
}
|
||
|
||
socket.on("connect", function () {
|
||
console.log("Connected to server!");
|
||
});
|
||
|
||
// socket.on("message", function (msg) {
|
||
// const oldMessage = document.getElementById("messageBox");
|
||
// const newMessage = oldMessage.cloneNode(false); // Clone the current message box without child nodes
|
||
// newMessage.innerText = msg; // Set new text
|
||
// newMessage.classList.add("slide-in"); // Add sliding animation
|
||
// oldMessage.parentNode.replaceChild(newMessage, oldMessage); // Replace old message with new one
|
||
|
||
// // Optionally, remove the animation class after the animation ends
|
||
// newMessage.addEventListener("animationend", () => {
|
||
// newMessage.classList.remove("slide-in");
|
||
// });
|
||
|
||
// let key;
|
||
// switch (msg) {
|
||
// case "小悠师傅 开始按摩":
|
||
// key = "smart_mode.msg";
|
||
// break;
|
||
// case "小悠小悠 今天天气怎么样":
|
||
// key = "smart_mode.msg2";
|
||
// break;
|
||
// case "小悠小悠 今天有什么新闻":
|
||
// key = "smart_mode.msg3";
|
||
// break;
|
||
// case "使用“小悠师傅” 或 “小悠小悠”唤醒我...":
|
||
// key = "smart_mode.msg4";
|
||
// break;
|
||
// default:
|
||
// break;
|
||
// }
|
||
// updateTranslation("#messageBox", lang, key);
|
||
// });
|
||
|
||
const imgContent = document.getElementById("img-content-frame");
|
||
const iframeContainer = document.getElementById("iframe-container");
|
||
|
||
// 根据配置显示/隐藏按摩头
|
||
function updateVisibleHeads() {
|
||
fetch('/get_massage_heads')
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.status === 'success') {
|
||
const headButtons = document.querySelectorAll('.head-btn');
|
||
const headOrder = [
|
||
'thermotherapy', 'shockwave', 'ball',
|
||
'finger', 'roller', 'stone', 'ion', 'heat', 'spheres'
|
||
];
|
||
|
||
headButtons.forEach((button, index) => {
|
||
const headId = headOrder[index];
|
||
if (headId && data.data[headId] && data.data[headId].display) {
|
||
button.style.display = 'flex';
|
||
} else {
|
||
button.style.display = 'none';
|
||
}
|
||
});
|
||
|
||
getHeadSelectIndex();
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('获取按摩头配置失败:', error);
|
||
// 失败时显示所有按摩头
|
||
document.querySelectorAll('.head-btn').forEach(button => {
|
||
button.style.display = 'flex';
|
||
});
|
||
});
|
||
}
|
||
|
||
document.addEventListener("DOMContentLoaded", function () {
|
||
const options = document.querySelectorAll(".toggle-option");
|
||
const sliderToggle = document.querySelector(".slider-toggle");
|
||
const iframeWebContent = document.getElementById("web-content-frame");
|
||
|
||
let activeIndex = 0; // 默认激活状态
|
||
let contentList = [imgContent, iframeContainer, iframeWebContent];
|
||
// let contentList = [imgContent, iframeContainer];
|
||
|
||
options.forEach((option, index) => {
|
||
option.addEventListener("click", function () {
|
||
if (index !== activeIndex) {
|
||
sliderToggle.style.left = option.offsetLeft + "px";
|
||
setTimeout(() => {
|
||
sliderToggle.style.width = `${options[activeIndex].clientWidth}px`;
|
||
}, 100); // 等待浏览器渲染完成
|
||
|
||
// 隐藏当前显示的元素并显示新的元素
|
||
contentList[activeIndex].classList.remove("active");
|
||
contentList[activeIndex].classList.add("inactive");
|
||
|
||
contentList[index].classList.remove("inactive");
|
||
contentList[index].classList.add("active");
|
||
|
||
// 更新功能按钮的激活状态
|
||
options.forEach((opt) => opt.classList.remove("active"));
|
||
option.classList.add("active");
|
||
|
||
activeIndex = index;
|
||
}
|
||
});
|
||
});
|
||
|
||
updateVisibleHeads();
|
||
|
||
// 切换按摩头功能;
|
||
|
||
const headsBtn = document.querySelectorAll(".head-btn");
|
||
headsBtn.forEach((btn, index) => {
|
||
btn.addEventListener("click", function () {
|
||
let headChangeFlag = JSON.parse(localStorage.getItem("headChangeFlag"));
|
||
if (!headChangeFlag) {
|
||
showPopup(
|
||
"按摩进行中无法切换",
|
||
(buttons = { confirm: true, cancel: false })
|
||
);
|
||
return;
|
||
} else {
|
||
// 验证index的值
|
||
let headSelectIndex = localStorage.getItem("headSelectIndex") || 0;
|
||
if (index != headSelectIndex) {
|
||
btn.classList.add("active");
|
||
localStorage.setItem("headSelectIndex", index);
|
||
headsBtn[headSelectIndex].classList.remove("active");
|
||
btn.querySelector(".btn-text").style.display = "block";
|
||
headsBtn[headSelectIndex].querySelector(".btn-text").style.display =
|
||
"none";
|
||
}
|
||
}
|
||
});
|
||
});
|
||
|
||
});
|
||
|
||
function getBodyPart() {
|
||
return localStorage.getItem("bodyPart") || "back";
|
||
}
|
||
|
||
/**
|
||
* 检查指定按摩头是否可见
|
||
* @param {number} headIndex - 按摩头索引
|
||
* @returns {boolean}
|
||
*/
|
||
function isHeadVisible(headIndex) {
|
||
console.log("isHeadVisible", headIndex);
|
||
const headButtons = document.querySelectorAll('.head-btn');
|
||
return headIndex >= 0 &&
|
||
headIndex < headButtons.length &&
|
||
headButtons[headIndex].style.display !== 'none';
|
||
}
|
||
|
||
/**
|
||
* 获取第一个可见按摩头的索引
|
||
* @returns {number}
|
||
*/
|
||
function getFirstVisibleHeadIndex() {
|
||
const headButtons = document.querySelectorAll('.head-btn');
|
||
for (let i = 0; i < headButtons.length; i++) {
|
||
if (headButtons[i].style.display !== 'none') {
|
||
console.log(i, "getFirstVisibleHeadIndex")
|
||
return i;
|
||
}
|
||
}
|
||
return 0; // 默认返回0，即使所有都隐藏
|
||
}
|
||
|
||
/**
|
||
* 获取当前选中的按摩头索引（确保是可见的）
|
||
* @returns {number} 有效的按摩头索引
|
||
*/
|
||
// 检查当前选择的按摩头是否可见
|
||
function getHeadSelectIndex() {
|
||
let visibleIndex;
|
||
const headerLength = parseInt(localStorage.getItem("headerLength")) || 0;
|
||
let headSelectIndex = parseInt(localStorage.getItem("headSelectIndex")) || 0;
|
||
|
||
console.log(headSelectIndex, 'headSelectIndex');
|
||
console.log(!isHeadVisible(headSelectIndex), 'isHeadVisible');
|
||
console.log(headSelectIndex >= headerLength, 'headSelectIndex >= headerLength');
|
||
|
||
// 检查当前选择的按摩头是否可见
|
||
if (!isHeadVisible(headSelectIndex) || headSelectIndex >= headerLength) {
|
||
// 如果不可见，找到第一个可见的按摩头
|
||
visibleIndex = getFirstVisibleHeadIndex();
|
||
localStorage.setItem("headSelectIndex", visibleIndex);
|
||
// return visibleIndex;
|
||
} else {
|
||
visibleIndex = headSelectIndex;
|
||
}
|
||
|
||
const headsBtn = document.querySelectorAll(".head-btn");
|
||
headsBtn[visibleIndex].classList.add("active");
|
||
headsBtn[visibleIndex].querySelector(
|
||
".btn-text"
|
||
).style.display = "block";
|
||
localStorage.setItem("headSelectIndex", visibleIndex);
|
||
}
|
||
|
||
var is3D = false; // 默认是2D
|
||
var button = document.getElementById("toggle3D");
|
||
var toggleIcon = document.getElementById("toggle3D-icon");
|
||
// var iframeContainer = document.getElementById("iframe-container");
|
||
var threeDModel = document.getElementById("three-d-model");
|
||
var img2dImage = document.getElementById("img2d-image");
|
||
|
||
// 监听 'change_image' 事件并更新图片的 src
|
||
socket.on("change_image", function (data) {
|
||
let newPath;
|
||
if (data.path === "static/images/smart_mode/back.png") {
|
||
let partVal = getBodyPart();
|
||
newPath = (partVal === 'belly' || partVal === 'leg') ? `static/images/smart_mode/${partVal}.png` : `static/images/smart_mode/back.png`;
|
||
} else {
|
||
newPath = data.path;
|
||
}
|
||
imgContent.src = newPath;
|
||
getBodyPart() == "belly"
|
||
? (img2dImage.src = "static/images/smart_mode/穴位2.png")
|
||
: (img2dImage.src = "static/images/smart_mode/穴位.png");
|
||
});
|
||
|
||
button.onclick = function () {
|
||
if (is3D) {
|
||
// 切换回2D，移除iframe，显示静态图片，并将按钮图标换回2D
|
||
// var iframe = iframeContainer.querySelector("iframe");
|
||
// if (iframe) {
|
||
// iframeContainer.removeChild(iframe);
|
||
// }
|
||
img2dImage.style.display = "block";
|
||
threeDModel.style.display = "none";
|
||
toggleIcon.src = "static/images/smart_mode/2d.svg"; // 切换回2D图标
|
||
toggleIcon.alt = "2D";
|
||
is3D = false;
|
||
} else {
|
||
// 切换到3D，加载iframe，隐藏静态图片，并将按钮图标换成3D
|
||
img2dImage.style.display = "none";
|
||
threeDModel.style.display = "block";
|
||
toggleIcon.src = "static/images/smart_mode/3d.svg"; // 切换为3D图标
|
||
toggleIcon.alt = "3D";
|
||
is3D = true;
|
||
// var iframe = document.createElement("iframe");
|
||
// iframe.src = "/model";
|
||
// iframe.frameBorder = "0";
|
||
// iframe.loading = "lazy";
|
||
// 当 iframe 加载完成后，隐藏2D图像
|
||
// iframe.onload = function () {
|
||
// img2dImage.style.display = "none";
|
||
// };
|
||
|
||
// iframeContainer.appendChild(iframe); // 添加 iframe 到容器
|
||
}
|
||
};
|
||
|
||
window.addEventListener("storage", function (event) {
|
||
if (event.key === "bodyPart") {
|
||
// if (event.newValue !== "belly") {
|
||
// imgContent.src = event.newValue !== 'leg' ? "static/images/smart_mode/back.png" : `static/images/smart_mode/leg.png`; // 显示图片
|
||
// img2dImage.src = "static/images/smart_mode/穴位.png"; // 隐藏2D图像
|
||
// } else {
|
||
// imgContent.src = "static/images/smart_mode/belly.png"; // 显示图片
|
||
// img2dImage.src = "static/images/smart_mode/穴位2.png"; // 隐藏2D图像
|
||
// }
|
||
switch (event.newValue) {
|
||
case event.newValue === "belly":
|
||
imgContent.src = `static/images/smart_mode/${event.newValue}.png`; // 显示图片
|
||
img2dImage.src = "static/images/smart_mode/穴位2.png"
|
||
break;
|
||
case event.newValue === "leg":
|
||
imgContent.src = `static/images/smart_mode/${event.newValue}.png`; // 显示图片
|
||
img2dImage.src = "static/images/smart_mode/穴位.png"; // 隐藏2D图像
|
||
break;
|
||
default:
|
||
imgContent.src = "static/images/smart_mode/back.png"; // 显示图片
|
||
img2dImage.src = "static/images/smart_mode/穴位.png"; // 隐藏2D图像
|
||
}
|
||
}
|
||
if (event.key === "headSelectIndex") {
|
||
if (event.oldValue === event.newValue) {
|
||
return;
|
||
} else {
|
||
let oldValue = parseInt(event.oldValue);
|
||
let newValue = parseInt(event.newValue);
|
||
|
||
headsBtn[newValue].classList.add("active");
|
||
headsBtn[oldValue].classList.remove("active");
|
||
headsBtn[newValue].querySelector(".btn-text").style.display = "block";
|
||
headsBtn[oldValue].querySelector(".btn-text").style.display = "none";
|
||
}
|
||
}
|
||
});
|
||
|
||
async function getStatus() {
|
||
try {
|
||
const response = await fetch("/get_status");
|
||
if (!response.ok) {
|
||
throw new Error("Network response was not ok");
|
||
}
|
||
const data = await response.json();
|
||
console.log("Status data:", data);
|
||
return data; // 直接返回字典数据
|
||
} catch (error) {
|
||
console.error("There was a problem with the fetch operation:", error);
|
||
return null;
|
||
}
|
||
}
|
||
|