Files
mixio/js/projects.js
2024-08-22 15:43:01 +08:00

3864 lines
219 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
var globalVer = "MixIO ver 1.11.24"
var globalBLE = {}
function copy(obj) {
return JSON.parse(JSON.stringify(obj))
}
$(function() {
if ('_cordovaNative' in window) {
var scriptcordova = document.createElement('script');
scriptcordova.async = false;
scriptcordova.src = "https://injection/www/cordova.js";
document.head.appendChild(scriptcordova);
}
})
$(function() {
get_width();
activeExit = false;
currentPage = 0;
pageCount = 1;
get_projects(currentPage);
window.onbeforeunload = function() {
if (!activeExit)
if ((typeof globalProjectName) != "undefined") {
save_layout();
}
};
/*
if (Math.random() > 0.6) {
var d = dialog({
title: '限时推广',
content: '<div style="width:250px">尊敬的MixIO用户您好<br>现邀请您参与《MixIO平台技术接受度调查》共计10题预计用时5-8分钟。您的作答数据将被用于科学研究和平台改进设计感谢您的参与 <a href="https://wj.qq.com/s2/11118283/89a9/">点击此处进入调查</a></div>',
cancelValue: '我知道了',
cancel: function() {}
});
d.showModal();
}
*/
})
const DATA_MODE = 0;
const PROJ_MODE = 1;
const LOGIC_MODE = 2;
const SERVER_CONNECTED = 0;
const SERVER_CONNECTING = 1;
const SERVER_DISCONNECTED = 2;
var isCode = true;
var globalProjectType = DATA_MODE;
var globalTableProjectInfo = {
received: {},
toBeSent: "",
toBeSentJSON: "",
currentTp: '$',
currentTp2: ""
}
var globalXML = '';
var isRunning = false;
var connected_hardwares = [];
var connected = SERVER_CONNECTING;
var globalCode = ''
var dataManage = function() {
window.location.href = 'storage'
}
var hidePass = function() {
$("#prjpass").attr("hidden", "hidden");
$("#prjpass_hidden").removeAttr("hidden");
}
var showPass = function() {
$("#prjpass_hidden").attr("hidden", "hidden");
$("#prjpass").removeAttr("hidden");
}
function edit_project(prjName, prjType) {
var projectName = prjName
var content = $("<div class='nnt'/>")
content.append("<div style='margin-top:-63px;margin-left:82.5px;margin-bottom:15px;box-shadow: 1px 1px 20px #4e73df;background-color:white;width:75px;height:75px;padding:40px;border-radius:80px;border:solid #4e73df 3px;display:flex;align-items:center;justify-content:center'><img src='icons/modify.svg' style='width:45px;'></div>");
content.append($("<p style='text-align:center;font-size:1.5rem;margin-bottom:15px;max-width:250px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;'>" + JSLang[lang].modify + "'" + projectName + "'</p>"))
var form = $("<form method='post' style='margin:0;width:250px;display:flex;flex-direction:column;align-items:center;justify-content:center'>");
content.append(form)
var change_project_button = $('<a class="btn btn-primary btn-icon-split btn-lg" style="margin:10px"><span class="icon text-white-50"><i class="fa fa-pencil" style="margin-top:5px"></i></span><span class="text" style="width:8rem">' + JSLang[lang].rename + '</span></a>')
change_project_button.click(function() {
var content = $("<div class='nnt'/>")
content.append("<div style='margin-top:-63px;margin-left:82.5px;margin-bottom:15px;box-shadow: 1px 1px 20px #4e73df;background-color:white;width:75px;height:75px;padding:40px;border-radius:80px;border:solid #4e73df 3px;display:flex;align-items:center;justify-content:center'><img src='icons/create_prj.svg' style='width:45px;'></div>");
content.append($("<p style='text-align:center;font-size:1.5rem;margin-bottom:15px'>" + JSLang[lang].renamePrj + "</p>"))
var form = $("<form method='post' style='margin:0'>");
content.append(form)
var formDiv = $("<div class='col-xs-9'/>")
form.append(formDiv)
var formGrp = $("<div class='form-group'>")
formDiv.append(formGrp)
var prjName = $("<input type='text' class='form-control form-control-user' style='text-align:center' name='projectName' class='form-control' placeholder='" + JSLang[lang].newPrjName + "'/>");
prjName.val(projectName)
formGrp.append(prjName)
var btDiv = $("<div class='col-xs-3'/>")
var innerBtDiv = $("<div style='display:flex;width:100%;flex-direction:row;align-items:center;justify-content:space-around'/>")
form.append(btDiv)
btDiv.append(innerBtDiv)
var submitBt = $("<a class='btn btn-primary btn-circle' style='box-shadow:1px 1px 5px #4e73df;margin-left:40px'><i class='fa fa-check'></i></a>")
var cancelBt = $("<a class='btn btn-danger btn-circle' style='box-shadow:1px 1px 5px #e74a3b;margin-right:40px'><i class='fa fa-arrow-left'></i></a>")
innerBtDiv.append(submitBt)
innerBtDiv.append(cancelBt)
submitBt.click(function() {
if (prjName.val().length < 3 || prjName.val().length > 10) {
showtext(JSLang[lang].lengthRes)
} else {
submitBt.attr("disabled", "disabled")
$.getJSON('renameProject', {
'oldProjectName': projectName,
'newProjectName': prjName.val()
}, function(res) {
if (res == 1) {
window.location.href = "projects"
} else {
submitBt.removeAttr("disabled")
showtext(JSLang[lang].prjExist)
}
})
}
});
var d = dialog({
'content': content[0]
})
cancelBt.click(function() {
d.close().remove()
})
d.showModal();
})
var copy_project_button = $('<a class="btn btn-success btn-icon-split btn-lg" style="margin:10px"><span class="icon text-white-50"><i class="fa fa-copy" style="margin-top:5px"></i></span><span class="text" style="width:8rem">' + JSLang[lang].copy + '</span></a>')
copy_project_button.click(function() {
var content = $("<div class='nnt'/>")
content.append("<div style='margin-top:-63px;margin-left:82.5px;margin-bottom:15px;box-shadow: 1px 1px 20px #4e73df;background-color:white;width:75px;height:75px;padding:40px;border-radius:80px;border:solid #4e73df 3px;display:flex;align-items:center;justify-content:center'><img src='icons/create_prj.svg' style='width:45px;'></div>");
content.append($("<p style='text-align:center;font-size:1.5rem;margin-bottom:15px'>" + JSLang[lang].copyName + "</p>"))
var form = $("<form method='post' style='margin:0'>");
content.append(form)
var formDiv = $("<div class='col-xs-9'/>")
form.append(formDiv)
var formGrp = $("<div class='form-group'>")
formDiv.append(formGrp)
var prjName = $("<input type='text' class='form-control form-control-user' style='text-align:center' name='projectName' class='form-control' placeholder='" + JSLang[lang].newPrjName + "'/>");
prjName.val(projectName)
formGrp.append(prjName)
var btDiv = $("<div class='col-xs-3'/>")
var innerBtDiv = $("<div style='display:flex;width:100%;flex-direction:row;align-items:center;justify-content:space-around'/>")
form.append(btDiv)
btDiv.append(innerBtDiv)
var submitBt = $("<a class='btn btn-primary btn-circle' style='box-shadow:1px 1px 5px #4e73df;margin-left:40px'><i class='fa fa-check'></i></a>")
var cancelBt = $("<a class='btn btn-danger btn-circle' style='box-shadow:1px 1px 5px #e74a3b;margin-right:40px'><i class='fa fa-arrow-left'></i></a>")
innerBtDiv.append(submitBt)
innerBtDiv.append(cancelBt)
submitBt.click(function() {
if (prjName.val().length < 3 || prjName.val().length > 10) {
showtext(JSLang[lang].lengthRes)
} else {
submitBt.attr("disabled", "disabled")
$.getJSON('copyProject', {
'oldProjectName': projectName,
'newProjectName': prjName.val()
}, function(res) {
if (res == 1) {
window.location.href = "projects"
} else if (res == 2) {
submitBt.removeAttr("disabled")
showtext(JSLang[lang].prjExist)
} else {
submitBt.removeAttr("disabled")
showtext(JSLang[lang].prjOverflow)
}
})
}
});
var d = dialog({
'content': content[0]
})
cancelBt.click(function() {
d.close().remove()
})
d.showModal();
})
var share_project_button = $('<a class="btn btn-info btn-icon-split btn-lg" style="margin:10px"><span class="icon text-white-50"><i class="fa fa-share" style="margin-top:5px"></i></span><span class="text" style="width:8rem">' + JSLang[lang].share + '</span></a>')
share_project_button.click(function() {
var content = $("<div class='nnt'/>")
content.append("<div style='margin-top:-63px;margin-left:82.5px;margin-bottom:15px;box-shadow: 1px 1px 20px #4e73df;background-color:white;width:75px;height:75px;padding:40px;border-radius:80px;border:solid #4e73df 3px;display:flex;align-items:center;justify-content:center'><img src='icons/create_prj.svg' style='width:45px;'></div>");
var ttl = $("<p style='text-align:center;font-size:1.5rem;margin-bottom:15px'>" + JSLang[lang].share + "</p>")
content.append(ttl)
var submitBt = $("<a class='btn btn-primary btn-circle' style='box-shadow:1px 1px 5px #4e73df;margin-left:40px'><i class='fa fa-check'></i></a>")
var cancelBt = $("<a class='btn btn-danger btn-circle' style='box-shadow:1px 1px 5px #e74a3b;margin-right:40px'><i class='fa fa-arrow-left'></i></a>")
var ctt = $("<p style='text-align:center;width:250px'>" + JSLang[lang].shareConfirm + "</p>")
content.append(ctt)
var resDiv = $("<div style='display:flex;flex-direction:column;align-items:center;justify-content:center'/>")
content.append(resDiv)
var btDiv = $("<div class='col-xs-3'/>")
var innerBtDiv = $("<div style='display:flex;width:100%;flex-direction:row;align-items:center;justify-content:space-around'/>")
content.append(btDiv)
btDiv.append(innerBtDiv)
innerBtDiv.append(submitBt)
innerBtDiv.append(cancelBt)
submitBt.click(function() {
var modald = showmodaltext("<div style='text-align:center'><i class='fa fa-spin fa-cog' style='font-size:2rem;color:#4e73df'></i><p style='margin-top:6px;margin-bottom:0;color:#4e73df;font-size:1rem;font-weight:bold'>" + JSLang[lang].loading + "</p></div>")
$.get('share', {
'projectName': projectName
}, function(res) {
var link = window.location.href.split('/')
link.pop()
link.push("observe?sid=" + res)
link = link.join('/')
ttl.html(JSLang[lang].shareSuccess)
ctt.remove()
resDiv.append($("<span style='font-size:1.2rem;'>" + JSLang[lang].aucode + "</span>"))
resDiv.append($("<span style='margin-bottom:8px;font-size:2rem;color:#1cc88a;font-weight:bold'>" + res + "</span>"))
resDiv.append($("<span style='font-size:1.2rem;margin-bottom:2px'>" + JSLang[lang].guestURL + "</span>"))
resDiv.append($("<a href='" + link + "' style='margin-bottom:3px;word-wrap: break-word;word-break: break-all;white-space: pre-wrap !important;width:250px;text-align:center'>" + link + "</a>"))
var qrCode = $("<div style='width:100px;height:100px;margin-bottom:12px'></div>")
resDiv.append(qrCode)
new QRCode(qrCode[0], {
text: link,
width: 100,
height: 100,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.M
})
modald.close().remove()
submitBt.attr("hidden", "hidden")
cancelBt.css("margin-right", "0")
})
});
var d = dialog({
'content': content[0]
})
cancelBt.click(function() {
d.close().remove()
})
d.showModal();
})
var delete_project_button = $('<a class="btn btn-warning btn-icon-split btn-lg" style="margin:10px;margin-bottom:25px"><span class="icon text-white-50"><i class="fa fa-trash" style="margin-top:5px;width:20px"></i></span><span class="text" style="width:8rem">' + JSLang[lang].delete + '</span></a>')
delete_project_button.click(function() {
delete_project(projectName)
})
form.append(change_project_button)
form.append(copy_project_button)
form.append(share_project_button)
form.append(delete_project_button)
var btDiv = $("<div class='col-xs-3'/>")
var innerBtDiv = $("<div style='display:flex;width:100%;flex-direction:row;align-items:center;justify-content:space-around'/>")
form.append(btDiv)
btDiv.append(innerBtDiv)
var cancelBt = $("<a class='btn btn-danger btn-circle' style='box-shadow:1px 1px 5px #e74a3b;'><i class='fa fa-arrow-left'></i></a>")
innerBtDiv.append(cancelBt)
var d = dialog({
'content': content[0]
})
cancelBt.click(function() {
d.close().remove()
})
d.showModal();
}
function run_project() {
if ((typeof Notification) != "undefined")
Notification.requestPermission();
isRunning = true
try {
var logicFunction = Function(globalCode);
logicFunction()
} catch (e) {
MixIO.log(e)
showtext(JSLang[lang].logicError)
isRunning = false;
return false;
}
$("#grid").removeClass("gridbg")
$("#grid").children(".item").addClass("itemrun")
$("#grid").children(".item").draggable({
disabled: true
})
$("#grid").children(".item").resizable({
disabled: true
})
$("#grid").children(".item").removeClass("moveDiv")
$("#top_right_button_1").attr("hidden", "hidden")
$("#top_right_button_2_1").attr("hidden", "hidden")
$("#top_right_button_2_2").removeAttr("hidden")
}
function stop_project() {
isRunning = false
$("#grid").addClass("gridbg")
$("#grid").children(".item").removeClass("itemrun")
$("#grid").children(".item").draggable({
disabled: false
})
$("#grid").children(".item").resizable({
disabled: false
})
$("#grid").children(".item").addClass("moveDiv")
if (globalProjectType == PROJ_MODE)
$("#top_right_button_1").removeAttr("hidden")
$("#top_right_button_2_1").removeAttr("hidden")
$("#top_right_button_2_2").attr("hidden", "hidden")
MixIO.safe_pause()
}
function view_module() {
showtext(JSLang[lang].blocklyDev)
/*
isCode = false;
switch_mode()
*/
}
function view_code() {
isCode = true;
switch_mode()
}
function prev_page() {
if (currentPage >= 1) {
currentPage = currentPage - 1
get_projects(currentPage)
}
}
function next_page() {
if (currentPage <= pageCount - 2) {
currentPage = currentPage + 1
get_projects(currentPage)
}
}
function get_projects(page) {
var modald = showmodaltext("<div style='text-align:center'><i class='fa fa-spin fa-cog' style='font-size:2rem;color:#4e73df'></i><p style='margin-top:6px;margin-bottom:0;color:#4e73df;font-size:1rem;font-weight:bold'>" + JSLang[lang].loading + "</p></div>")
$("#prjmr").empty()
$.getJSON('getProjects', {
page: page
}, function(res) {
console.log(res)
if (res == -1)
window.location.href = '/logout'
var count = 0;
$("#prj_num").html(res['count'] + " / " + MAX_PROJECT_NUM_PER_USER)
$("#prj_num_bar").attr("aria-valuenow", res['count'])
$("#prj_num_bar").css("width", (res['count'] * 100 / MAX_PROJECT_NUM_PER_USER) + "%")
pageCount = Math.ceil(res['count'] / 8);
$("#page_count").html(currentPage + 1 + " / " + pageCount);
$("#prev_page").removeClass("disabled")
$("#prev_page").removeAttr("disabled")
$("#next_page").removeClass("disabled")
$("#next_page").removeAttr("disabled")
if (currentPage == 0) {
$("#prev_page").addClass("disabled")
$("#prev_page").attr("disabled", "disabled")
}
if (currentPage + 1 == pageCount) {
$("#next_page").addClass("disabled")
$("#next_page").attr("disabled", "disabled")
}
delete res['count']
res = res['rows']
for (item in res) {
if (res[item]['userName'][0] == '@') {
$("#top_right_button_0").attr("hidden", "hidden")
$("#top_right_button_-1").attr("hidden", "hidden")
$("#share_app").remove()
view_project('default', 0)
$("#sidebarToggleTop").remove()
$("#top_back_button").remove()
$("#title_phase1").parent().remove()
$("#title_phase2").html(JSLang[lang].prjManage)
$("#title_phase2").css("font-weight", 400)
$("#title_phase2").css("margin-left", "10px")
isMixly = true
$("#top_exit_button").removeAttr("hidden")
break
}
try {
add_prjblock(res[item]['projectName'], res[item]['projectLayout'], res[item]['timestamp'], res[item]['projectType'], res[item]['isTask'])
count = count + 1
} catch (e) {
console.log(res[item])
console.log(e)
}
}
modald.close().remove()
if (count == 0 && !isMixly)
add_project()
})
}
function sync_connect_status() {
var contentDiv = $("<div style='width:230px' class='nnt'/>")
var emqx_connection_div = $("<div style='font-size:1rem'/>")
if (connected == 0) {
var emqx_connection_icon = $("<i class='fa fa-link' style='color:#1cc88a'></i>")
var emqx_connection_descrp = $("<span style='margin-left:5px'>" + JSLang[lang].connected + "</span>")
$("#connect_span").css("color", "#1cc88a")
$("#connect_span").html("<i class='fa fa-check-circle-o' style='margin-right:3px'></i>" + connected_hardwares.length + JSLang[lang].connectCount)
} else if (connected == 1) {
var emqx_connection_icon = $("<i class='fa fa-spin fa-spinner' style='color:#4e73df'></i>")
var emqx_connection_descrp = $("<span style='margin-left:5px'>" + JSLang[lang].connecting + "</span>")
$("#connect_span").css("color", "#858796")
$("#connect_span").html("<i class='fa fa-spinner fa-spin' style='margin-right:3px'></i>" + JSLang[lang].connecting)
} else if (connected == 2) {
var emqx_connection_icon = $("<i class='fa fa-unlink' style='color:#e74a3b'></i>")
var emqx_connection_descrp = $("<span style='margin-left:5px'>" + JSLang[lang].disconnected + "</span>")
$("#connect_span").css("color", "#858796")
$("#connect_span").html("<i class='fa fa-unlink' style='margin-right:3px'></i>" + JSLang[lang].disconnected)
}
if (connected == 0) {
emqx_connection_div.append(emqx_connection_icon)
emqx_connection_div.append(emqx_connection_descrp)
var hardware_connection_div = $("<div style='font-size:1rem;margin-top:10px'/>")
var hardware_connection_icon = $("<i class='fa fa-podcast' style='color:#1cc88a;margin-left:1px;margin-right:1px'></i>")
var hardware_connection_descrp = $("<span style='margin-left:5px'>" + connected_hardwares.length + JSLang[lang].connectCount + "</span>")
hardware_connection_div.append(hardware_connection_icon)
hardware_connection_div.append(hardware_connection_descrp)
for (hardware in connected_hardwares) {
//Modified
var iconName = "microchip"
if(connected_hardwares[hardware].indexOf("wechat_")!=-1)
iconName = "wechat"
var hardName = $("<p style='margin:0;color:#1cc88a;font-size:0.8rem'>" + "<i class='fa fa-"+iconName+"' style='margin-right:3px'></i>" + connected_hardwares[hardware] + "</p>")
contentDiv.append(hardName)
}
contentDiv.append("<p style='font-weight:bold;margin-top:10px;margin-bottom:5px;font-size:1rem'>私有凭证 Private Key</p>")
contentDiv.append("<p style='margin:0;font-size:0.6rem'><i class='fa fa-user' style='margin-right:3px'></i>" + globalUserName + "</p>")
contentDiv.append("<p style='margin:0;font-size:0.6rem'><i class='fa fa-lock' style='margin-right:3px'></i>" + globalProjectPass + "</p>")
contentDiv.append("<div style='margin-top:5px;margin-bottom:0px;display:flex;flex-direction:row;align-items:center'><span style='font-weight:bold;font-size:1rem;margin-right:6px'>项目授权码 Share Key</span><a id='shareKey' onclick='shareKey()' class='btn btn-sm btn-secondary' style='padding:3px;padding-left:6px;padding-right:6px;font-size:0.8rem;border-radius:3px'>OFF</a><br></div>")
sharekey = $("<span style='color:#1cc88a;font-weight:bold;font-size:2rem'></span>")
contentDiv.append(sharekey)
contentDiv.append("<p style='font-weight:bold;margin-top:5px;margin-bottom:5px;font-size:1rem'>共享链接 Share Link</p>")
sharelink = $("<a style='font-size:1rem'></a>")
// hover sharelink, show QR code
sharelink.hover(function() {
var qrCode = $("<div style='width:50px;height:50px;margin-bottom:12px'></div>")
// let it show over the sharelink
qrCode.css("position", "absolute")
qrCode.css("left", "calc(50% - 25px)")
qrCode.css("top", "100%")
$(this).append(qrCode)
// set width and height to 0 to avoid the QR code being too large
new QRCode(qrCode[0], {
text: $(this).attr("href")
})
}, function() {
$(this).children("div").remove()
})
contentDiv.append(sharelink)
}
var cancelDiv = $("<div style='width:100%;text-align:center;margin-top:15px'/>")
var cancelBt = $("<a class='btn btn-success btn-circle' style='box-shadow:1px 1px 5px #1cc88a;margin-bottom:-48px'><i class='fa fa-check'></i></a>")
cancelBt.click(function() {
connectStatusDia.close()
})
cancelDiv.append(cancelBt)
contentDiv.append(cancelDiv)
connectStatusDia.content(contentDiv[0])
if (connectStatusDia.open)
check_share_key()
}
function check_share_key() {
if (typeof globalShareKey == 'undefined') {
$("#shareKey").addClass('btn-secondary')
$("#shareKey").removeClass('btn-success')
$("#shareKey").html("OFF")
sharekey.html("")
sharelink.html("项目未共享授权")
sharelink.removeAttr("href")
sharelink.css("color","#858796")
} else {
$("#shareKey").removeClass('btn-secondary')
$("#shareKey").addClass('btn-success')
$("#shareKey").html("ON")
sharekey.html(globalShareKey)
sharelink.html("http://"+window.location.host + "/observe?sid=" + globalShareKey)
sharelink.attr("href", "http://"+window.location.host + "/observe?sid=" + globalShareKey)
sharelink.css("color","#1cc88a")
}
}
function shareKey() {
if ($("#shareKey").html() == "OFF") {
var modald = showmodaltext("<div style='text-align:center' class='nnt'><i class='fa fa-spin fa-cog' style='font-size:2rem;color:#4e73df'></i><p style='margin-top:6px;margin-bottom:0;color:#4e73df;font-size:1rem;font-weight:bold'>" + JSLang[lang].loading + "</p></div>")
$.get('addShareKey', {
'projectName': globalProjectName,
'projectPass': globalProjectPass
}, function(res) {
if (res.length == 6) {
$("#shareKey").removeClass('btn-secondary')
$("#shareKey").addClass('btn-success')
$("#shareKey").html("ON")
sharekey.html(res)
globalShareKey = res
sharelink.html("http://"+window.location.host + "/observe?sid=" + globalShareKey)
sharelink.attr("href", "http://"+window.location.host + "/observe?sid=" + globalShareKey)
sharelink.css("color","#1cc88a")
} else
showtext(res)
modald.close().remove()
})
} else {
var modald = showmodaltext("<div style='text-align:center' class='nnt'><i class='fa fa-spin fa-cog' style='font-size:2rem;color:#4e73df'></i><p style='margin-top:6px;margin-bottom:0;color:#4e73df;font-size:1rem;font-weight:bold'>" + JSLang[lang].loading + "</p></div>")
$.get('removeShareKey', {
'projectName': globalProjectName,
'projectPass': globalProjectPass
}, function(res) {
if (res == 1) {
$("#shareKey").addClass('btn-secondary')
$("#shareKey").removeClass('btn-success')
$("#shareKey").html("OFF")
sharekey.html("")
globalShareKey = undefined
sharelink.html("项目未共享授权")
sharelink.removeAttr("href")
sharelink.css("color","#858796")
} else
showtext(res)
modald.close().remove()
})
}
}
function switch_mode() {
grid.on("contextmenu", function(e) {
e.preventDefault()
})
grid.removeAttr("hidden")
grid2.removeAttr("hidden")
grid3.removeAttr("hidden")
if (globalProjectType == DATA_MODE) {
$("#projMode").removeClass("btn-primary")
$("#projMode").addClass("btn-light")
$("#projMode").css("color", "#4e73df")
$("#logicMode").removeClass("btn-primary")
$("#logicMode").addClass("btn-light")
$("#logicMode").css("color", "#4e73df")
$("#dataMode").removeClass("btn-light")
$("#dataMode").addClass("btn-primary")
$("#dataMode").css("color", "#fff")
grid.css("height", 0)
grid2.css("height", "calc(100vh - 4.375rem)")
grid3.css("height", 0)
$("#top_right_button_1").attr("hidden", "hidden")
$("#top_right_button_2_1").attr("hidden", "hidden")
$("#top_right_button_2_2").attr("hidden", "hidden")
$("#top_right_button_1_" + (isCode ? 2 : 3)).attr("hidden", "hidden")
} else if (globalProjectType == PROJ_MODE) {
$("#dataMode").removeClass("btn-primary")
$("#dataMode").addClass("btn-light")
$("#dataMode").css("color", "#4e73df")
$("#logicMode").removeClass("btn-primary")
$("#logicMode").addClass("btn-light")
$("#logicMode").css("color", "#4e73df")
$("#projMode").removeClass("btn-light")
$("#projMode").addClass("btn-primary")
$("#projMode").css("color", "#fff")
grid2.css("height", 0)
grid.css("height", "calc(100vh - 4.375rem)")
grid3.css("height", 0)
if (!isRunning)
$("#top_right_button_1").removeAttr("hidden")
if (isRunning) {
$("#top_right_button_2_2").removeAttr("hidden")
$("#top_right_button_2_1").attr("hidden", "hidden")
} else {
$("#top_right_button_2_1").removeAttr("hidden")
$("#top_right_button_2_2").attr("hidden", "hidden")
}
$("#top_right_button_1_" + (isCode ? 2 : 3)).attr("hidden", "hidden")
} else if (globalProjectType == LOGIC_MODE) {
$("#dataMode").removeClass("btn-primary")
$("#dataMode").addClass("btn-light")
$("#dataMode").css("color", "#4e73df")
$("#projMode").removeClass("btn-primary")
$("#projMode").addClass("btn-light")
$("#projMode").css("color", "#4e73df")
$("#logicMode").removeClass("btn-light")
$("#logicMode").addClass("btn-primary")
$("#logicMode").css("color", "#fff")
grid2.css("height", 0)
grid3.css("height", "calc(100vh - 4.375rem)")
grid.css("height", 0)
$("#top_right_button_1").attr("hidden", "hidden")
if (isRunning) {
$("#top_right_button_2_2").removeAttr("hidden")
$("#top_right_button_2_1").attr("hidden", "hidden")
} else {
$("#top_right_button_2_1").removeAttr("hidden")
$("#top_right_button_2_2").attr("hidden", "hidden")
}
$("#top_right_button_1_" + (isCode ? 2 : 3)).removeAttr("hidden")
$("#top_right_button_1_" + (isCode ? 3 : 2)).attr("hidden", "hidden")
}
}
function workspaceToDom() {
globalXML = stringendecoder.encodeHtml(Blockly.Xml.domToText(Blockly.Xml.workspaceToDom(workspace)))
}
function view_project(projectName, projectType) {
var init_codemirror = function() {
if (!grid3.children()[0]) {
customTheme()
var mainDiv = $("<div style='width:100%;height:100%;overflow:hidden;white-space:nowrap'></div>")
grid3.append(mainDiv)
var leftDiv = $("<div id='block' style='height:100%;display:inline-block;border-right:3px dashed #4e73df'></div>")
leftDiv.css("width", mainDiv.width() / 7 * 4 + "px")
mainDiv.append(leftDiv)
workspace = Blockly.inject('block', {
toolbox: document.getElementById('toolbox'),
media: 'blockly/media/'
});
//Blockly.Variables.createVariable_(workspace,null,"topic")
//Blockly.Variables.createVariable_(workspace,null,"message")
var toJS = function() {
MixIO.triggersToPreCode()
MixIO.editor.setValue(MixIO.preCode + Blockly.JavaScript.workspaceToCode(workspace))
}
function ast(event) {
toJS()
workspaceToDom()
}
workspace.addChangeListener(ast);
var rightDiv = $("<div style='height:100%;display:inline-block'></div>")
rightDiv.css("width", mainDiv.width() / 7 * 3 + "px")
mainDiv.append(rightDiv)
leftDiv.resizable({
handles: "w,e",
onResize: function() {
MixIO.editor.setSize((mainDiv.width() - leftDiv.width()) + "px", '50%')
rightDiv.css("width", (mainDiv.width() - leftDiv.width()) + "px")
Blockly.svgResize(workspace);
},
onStopResize: function() {
MixIO.editor.setSize((mainDiv.width() - leftDiv.width()) + "px", '50%')
rightDiv.css("width", (mainDiv.width() - leftDiv.width()) + "px")
}
})
window.addEventListener('resize', function() {
MixIO.editor.setSize((mainDiv.width() - leftDiv.width()) + "px", '50%')
rightDiv.css("width", (mainDiv.width() - leftDiv.width()) + "px")
Blockly.svgResize(workspace);
})
var jTa = $("<textarea style='height:50%'></textarea>")
rightDiv.append(jTa)
if (globalXML != "") {
Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(stringendecoder.decodeHtml(globalXML).replaceAll("&", "&amp;")), workspace);
}
MixIO.editor = CodeMirror.fromTextArea(jTa[0], {
mode: "text/javascript",
lineNumbers: true,
matchBrackets: true,
hintOptions: {
completeSingle: false
}
});
MixIO.editor.on("inputRead", function(instance, changeObj) {
if (isRunning) {
showtext(JSLang[lang].pauseBeforeModify)
}
if (/^[a-zA-Z]/.test(changeObj.text[0])) {
var words = MixIO.editor.getValue() + "";
words = words.replace(/[a-z]+[\-|\']+[a-z]+/ig, '').match(/([a-z]+)/ig);
CodeMirror.ukeys = words;
MixIO.editor.showHint();
}
});
MixIO.editor.on('change', function() {
globalCode = MixIO.editor.getValue()
})
MixIO.editor.setSize('100%', '50%')
MixIO.editor.setValue(globalCode)
MixIO.editor.setCursor(MixIO.editor.lineCount(), 0);
var jTa2Div = $("<div style='font-family:monospace;height:50%;background-color:white'></div>")
jTa2Div.append($('<div style="height:2rem;display:flex;align-items:center;background-image: linear-gradient(to right, #4e73df, #b6c5f2);padding-left:5px;font-size:1rem;color:white"><p style="margin:0;">' + JSLang[lang].console + '</p><i class="fa fa-unlock" style="margin-left:10px;cursor:pointer" id="console_icon"></i></div>'))
var jTa2 = $("<div style='width:100%;overflow:auto;height:calc(100% - 2rem);padding:3px;color:black;border:none'></div>")
jTa2Div.append(jTa2)
rightDiv.append(jTa2Div)
$("#console_icon").click(function() {
if (typeof globalConsoleStyle == "undefined") {
$("#console_icon").removeClass("fa-unlock")
$("#console_icon").addClass("fa-lock")
globalConsoleStyle = jTa2Div.attr("style")
$("body").append(jTa2Div)
jTa2Div.css("z-index", 999)
jTa2Div.draggable({
disabled: false
})
jTa2Div.resizable({
disabled: false
})
jTa2Div.css("border", "solid black 1px")
jTa2Div.css("position", "absolute")
jTa2Div.css("left", "20px")
jTa2Div.css("top", "20px")
MixIO.editor.setSize((mainDiv.width() - leftDiv.width()) + "px", '100%')
} else {
jTa2Div.attr("style", globalConsoleStyle)
$("#console_icon").addClass("fa-unlock")
$("#console_icon").removeClass("fa-lock")
rightDiv.append(jTa2Div)
jTa2Div.draggable({
disabled: true
})
jTa2Div.resizable({
disabled: true
})
MixIO.editor.setSize((mainDiv.width() - leftDiv.width()) + "px", '50%')
globalConsoleStyle = undefined
}
})
MixIO.log = function(text) {
if(typeof text == "object")
text = JSON.stringify(text)
if (jTa2.html())
jTa2.html(jTa2.html() + '<br>' + '[' + timeStamp2String().substring(11) + '] ' + text)
else
jTa2.html(jTa2.html() + '[' + timeStamp2String().substring(11) + '] ' + text)
jTa2.scrollTop(jTa2[0].scrollHeight)
}
MixIO.log("Version: " + globalVer)
MixIO.log("入门指南:<a target='_blank' href='devAPI'>dev-api</a>")
}
}
var modald = showmodaltext("<div style='text-align:center'><i class='fa fa-spin fa-cog' style='font-size:2rem;color:#4e73df'></i><p style='margin-top:6px;margin-bottom:0;color:#4e73df;font-size:1rem;font-weight:bold'>" + JSLang[lang].downloading + "</p></div>")
$.post('getProject', { 'projectName': projectName }, function(res) {
console.log(JSON.parse(res))
modald.close().remove()
if (res == 0) {
showtext(JSLang[lang].prj404)
} else {
$("#title_phase1").parent().remove()
$("#accordionSidebar").remove()
$("#sidebarToggleTop").remove()
$("#connect_span").removeAttr("hidden")
init_layout()
$("#projMode").click(function() {
if (globalProjectType != PROJ_MODE) {
globalProjectType = PROJ_MODE
switch_mode()
}
$(".blocklyHtmlInput").attr("hidden", "hidden")
})
$("#dataMode").click(function() {
$(".blocklyHtmlInput").attr("hidden", "hidden")
if (globalProjectType != DATA_MODE) {
$("#data_icon").removeClass("fa-table")
$("#data_icon").addClass("fa-spin")
$("#data_icon").addClass("fa-spinner")
setTimeout(function() {
var time1 = new Date()
globalProjectType = DATA_MODE
switch_mode()
init_table()
chart.resize()
var time2 = new Date()
$("#data_icon").addClass("fa-table")
$("#data_icon").removeClass("fa-spin")
$("#data_icon").removeClass("fa-spinner")
if (time2 - time1 > 1000)
showtext(JSLang[lang].slow + "(" + (time2 - time1) + "ms)" + JSLang[lang].remindClear)
}, 50)
}
})
$("#logicMode").click(function() {
if (globalProjectType != LOGIC_MODE) {
globalProjectType = LOGIC_MODE
MixIO.triggersToPreCode()
MixIO.editor.setValue(MixIO.preCode + Blockly.JavaScript.workspaceToCode(workspace))
switch_mode()
init_codemirror()
}
$(".blocklySvg").attr("height", "100%")
$(".blocklyHtmlInput").removeAttr("hidden")
})
$("#bottom_2").removeAttr("hidden")
var prevLogic = JSON.parse(res)['logicStorage']
if (prevLogic) {
globalCode = stringendecoder.decodeHtml(JSON.parse(prevLogic)['code'])
globalXML = stringendecoder.decodeHtml(JSON.parse(prevLogic)['module'])
}
globalProjectType = LOGIC_MODE
globalProjectName = projectName
switch_mode()
init_codemirror()
globalProjectType = projectType
switch_mode()
connectStatusDia = dialog({
content: ''
});
$("#project_list").css("display", "none")
$("#project_list").remove()
$("#project_detail").css("display", "")
$("#top_right_button_0").attr("hidden", "hidden")
$("#top_right_button_-1").attr("hidden", "hidden")
$("#top_right_button_3").removeAttr("hidden")
$("#top_back_button").removeAttr("hidden")
$("#title_phase1").attr("class", "d-none d-sm-inline-block h3 mb-0 text-gray-800")
if (!isMixly)
$("#title_phase2").text(projectName)
var resJSON = JSON.parse(JSON.parse(res)['projectLayout'])
var userName = JSON.parse(res)['userName']
var history = JSON.parse(res).history
var hisDiv = $("<div style='width:270px' class='nnt'></div>")
var hisP = $("<p style='margin-bottom:5px'>" + JSLang[lang].duringOff + history.length + JSLang[lang].messageRem + "</p>")
hisDiv.append(hisP)
var hisD = $("<div style='max-height:400px;overflow-y:auto'></div>")
var hisT = $("<table class='cntb' style='width:auto'></table>")
hisD.append(hisT)
hisT.append($('<tr style="font-weight:bold"><td>' + JSLang[lang].topic + '</td><td>' + JSLang[lang].message + '</td><td>' + JSLang[lang].time + '</td></tr>'))
hisDiv.append(hisD)
for (hisItem in history) {
var topic = history[hisItem].topicName;
var msg = history[hisItem].msg;
var timeStamp = history[hisItem].timeStamp;
hisT.append($('<tr><td>' + topic + '</td><td style="word-break:break-all">' + msg + '</td><td>' + timeStamp + '</td></tr>'))
}
var hisButDiv = $('<div style="width:100%;text-align:center;margin-top:15px"></div>')
var hisBut = $('<a class="btn btn-success btn-circle btn-lg" style="box-shadow:1px 1px 5px #1cc88a;margin-bottom:-48px"><i class="fa fa-check"></i></a>')
hisButDiv.append(hisBut)
hisDiv.append(hisButDiv)
var d = dialog({
content: hisDiv[0]
})
hisBut.click(function() {
d.close().remove()
})
if (history.length > 0)
d.showModal()
globalUserName = userName
var projectPass = JSON.parse(res)['projectPass']
globalProjectPass = projectPass
randomClientID = (IsPC() ? 'MixIO_' : "mixio_") + Math.random().toString(16).substr(2, 8)
if (isMixly) {
keyName = userName.slice(1)
userName = 'MixIO_public'
}
client = mqtt.connect((location.protocol == 'https:' ? 'wss://' : 'ws://') + window.location.host.split(":")[0] + (location.protocol == 'https:' ? ':8084' : ':8083'), {
'clientId': randomClientID,
'username': userName,
'password': projectPass,
'will': {
'topic': globalUserName + '/' + globalProjectName + '/' + '9d634e1a156dc0c1611eb4c3cff57276',
'payload': randomClientID,
'qos': 0
}
})
client.on('connect', function() {
publish('b640a0ce465fa2a4150c36b305c1c11b', randomClientID, true)
connected = 0
var tempdevices = []
var tmpclients = []
if (!isMixly)
$.getJSON('getDevices', { 'userName': userName }, function(res) {
var devices = res
console.log(devices)
for (device in devices) {
if (devices[device].clientid.indexOf("mixio_") == -1 && devices[device].clientid.indexOf("MixIO_") == -1 && devices[device].clientid.indexOf('OBGuest_') == -1)
tempdevices.push(devices[device].clientid)
else if (devices[device].clientid.indexOf("mixio_") != -1 || devices[device].clientid.indexOf("MixIO_") != -1)
tmpclients.push(devices[device].clientid)
}
connected_hardwares = tempdevices
connected_devices = tmpclients
sync_connect_status()
//check_link()
})
else {
$("#title_phase2").css("margin-left", "0")
$("#connect_span").css("color", "#1cc88a")
$("#connect_span").html("<i class='fa fa-check-circle-o' style='margin-right:3px'></i>" + JSLang[lang].connected)
}
})
client.on('close', function() {
publish('9d634e1a156dc0c1611eb4c3cff57276', randomClientID, true)
})
setTimeout(function() {
if (connected != SERVER_CONNECTED) {
connected = SERVER_DISCONNECTED
$("#title_phase2").css("margin-left", "0")
$("#connect_span").css("color", "#e74a3b")
$("#connect_span").html("<i class='fa fa-unlink' style='margin-right:3px'></i>" + JSLang[lang].disconnected)
}
}, 20000)
client.on('message', function(topic1, message1) {
var convertedMessage = Uint8ArrayToString(message1)
if (topic1.split('/')[2] == 'b640a0ce465fa2a4150c36b305c1c11b' || (topic1.split('/').length == 4 && isMixly && topic1.split('/')[3] == 'b640a0ce465fa2a4150c36b305c1c11b')) {
console.log(convertedMessage)
if (convertedMessage.indexOf('MixIO_') == -1 && convertedMessage.indexOf('mixio_') == -1) {
if (connected_hardwares.indexOf(convertedMessage) == -1) {
connected_hardwares.push(convertedMessage)
}
sync_connect_status()
}
} else if (topic1.split('/')[2] == '9d634e1a156dc0c1611eb4c3cff57276' || (topic1.split('/').length == 4 && isMixly && topic1.split('/')[3] == '9d634e1a156dc0c1611eb4c3cff57276')) {
if (convertedMessage.indexOf('MixIO_') == -1 && convertedMessage.indexOf('mixio_') == -1) {
if (connected_hardwares.indexOf(convertedMessage) != -1) {
connected_hardwares.splice(connected_hardwares.indexOf(convertedMessage), 1)
}
sync_connect_status()
}
} else if (topic1.split('/').length == 3 && !isMixly) {
var tp = stringendecoder.encodeHtml(topic1.split('/')[2])
var ms = message1.toString()
if(ms.length>500)
ms = "[Too long to display]"
if(isJSON(ms))
{
var msJSON = JSON.parse(ms)
if(("clientid" in msJSON)&&("long" in msJSON)&&("lat" in msJSON)&&("message" in msJSON))
{
var newJSON = {}
var clientid = String(msJSON["clientid"]).split('b\'').pop().split('\'')[0]
newJSON["clientid"] = clientid
newJSON["long"] = msJSON["long"]
newJSON["lat"] = msJSON["lat"]
var msg = msJSON["message"]
if(typeof msg == "string")
msg = JSON.parse(msg)
for(item of msg)
{
newJSON[item["label"]] = item["value"]
}
ms = JSON.stringify(newJSON)
}
}
if (globalTableProjectInfo.received[tp]) {
globalTableProjectInfo.received[tp].unshift({
'时间': timeStamp2String(),
'值': stringendecoder.encodeHtml(ms)
})
} else {
for(topicSelect of topicSelects)
topicSelect.append($("<option value='" + tp + "'>" + tp + "</option>"))
globalTableProjectInfo.received[tp] = []
globalTableProjectInfo.received[tp].unshift({
'时间': timeStamp2String(),
'值': stringendecoder.encodeHtml(ms)
})
}
if (globalTableProjectInfo.currentTp == '$') {
globalTableProjectInfo.currentTp = tp
topicSelect.val(stringendecoder.decodeHtml(tp))
}
if (globalTableProjectInfo.currentTp == tp) {
fresh(true)
}
else
{
for(topic = 0; topic<= globalTableProjectInfo.currentTp.split(',,').length; topic = topic + 1) {
if(tp == globalTableProjectInfo.currentTp.split(',,')[topic])
{
fresh(true)
break
}
}
}
} else if (topic1.split('/').length == 4 && isMixly) {
var tp = stringendecoder.encodeHtml(topic1.split('/')[3])
var ms = message1.toString()
if(ms.length>500)
ms = "[Too long to display]"
if(isJSON(ms))
{
var msJSON = JSON.parse(ms)
if(("clientid" in msJSON)&&("long" in msJSON)&&("lat" in msJSON)&&("message" in msJSON))
{
var newJSON = {}
var clientid = msJSON["clientid"]
newJSON[clientid+"-"+"long"] = msJSON["long"]
newJSON[clientid+"-"+"lat"] = msJSON["lat"]
var msg = msJSON["message"]
if(typeof msg == "string")
msg = JSON.parse(msg)
for(item of msg)
{
newJSON[clientid+"-"+item["label"]] = item["value"]
}
ms = JSON.stringify(newJSON)
}
}
if (globalTableProjectInfo.received[tp]) {
globalTableProjectInfo.received[tp].unshift({
'时间': timeStamp2String(),
'值': stringendecoder.encodeHtml(ms)
})
} else {
for(topicSelect of topicSelects)
topicSelect.append($("<option value='" + tp + "'>" + tp + "</option>"))
globalTableProjectInfo.received[tp] = []
globalTableProjectInfo.received[tp].unshift({
'时间': timeStamp2String(),
'值': stringendecoder.encodeHtml(ms)
})
}
if (globalTableProjectInfo.currentTp == '$') {
globalTableProjectInfo.currentTp = tp
topicSelect.val(stringendecoder.decodeHtml(tp))
}
if (globalTableProjectInfo.currentTp == tp) {
fresh(true)
}
else
{
for(topic = 0; topic<= globalTableProjectInfo.currentTp.split(',,').length; topic = topic + 1) {
if(tp == globalTableProjectInfo.currentTp.split(',,')[topic])
{
fresh(true)
break
}
}
}
}
})
if (!isMixly) {
client.subscribe(globalUserName + '/' + globalProjectName + '/#')
} else {
client.subscribe('MixIO' + '/' + keyName + '/' + globalProjectName + '/#')
}
var prev_layout = stringendecoder.decodeHtml(resJSON.layout_info)
var units_array = $(prev_layout)
for (var ct = 0; ct <= units_array.length - 1; ct = ct + 1) {
var un = $(units_array[ct])
var titleHidden = un.attr('title-hidden')
// if no title-hidden attribute, set it to false
if (titleHidden == undefined)
titleHidden = false
if (titleHidden == "true")
titleHidden = true
if (titleHidden == "false")
titleHidden = false
toolkits = {
'input_button': add_button,
'input_slider': add_slider,
'input_keyboard': add_keyboard,
'input_controller': add_controller,
'input_rgb': add_rgb,
'output_bulb': add_bulb,
'output_text': add_text,
'output_chart': add_chart,
'output_bar': add_bar,
'output_dashboard': add_dashboard,
'output_map': add_map,
'input_weather': add_weather,
'trigger': add_trigger,
'magic': add_magic,
'pixel': add_pixel,
'table': add_table,
'decorate_text': add_decorate_text,
'decorate_pic': add_decorate_pic,
'timer': add_timer,
'ble': add_ble,
'camera': add_camera,
'face': add_face,
'input_mic': add_mic,
'tinydb': add_tinydb,
}
toolkits[un.attr('user-type')](un.attr('user-title'), un.attr('user-topic'), un.attr('user-content'), un.attr('style'), titleHidden)
}
var topicOuterDiv = $("<div style='width:100%;display:flex;align-items:center;'></div>")
var topicDiv = $("<div style='z-index:1000;margin:0;display:flex;flex-direction:row;align-items:center;justify-content:center;margin-bottom:20px;width:320px;background-color:white;border-radius:0 0 40px 0;padding-left:10px;padding-right:10px;padding-top:5px;padding-bottom:10px;box-shadow:0 .15rem 1.75rem 0 rgba(58,59,69,.15)!important;flex-wrap:wrap'></div>")
var topicSelect = $("<select class='form-control' style='width:150px;'></select>")
var topicSelects = []
topicSelects.push(topicSelect)
topicDiv.append($("<span style='font-weight:bold'>" + JSLang[lang].listener + "&nbsp;</span>"))
topicSelect.append($("<option value='$'>" + JSLang[lang].select + "</option>"))
fresh = function(clear){
if(!clear)
chart.clear()
var tmpArr = []
for(var i=0;i<topicSelects.length;i++)
{
tmpArr.push(topicSelects[i].val())
}
globalTableProjectInfo.currentTp = tmpArr.join(',,')
var toBeMerge = []
for(var i=0;i<topicSelects.length;i++)
{
if(topicSelects[i].val()!='$')
toBeMerge.push(copy(globalTableProjectInfo.received[topicSelects[i].val()]))
}
if(toBeMerge.length>1)
{
var allTime = []
for(var i=0;i<toBeMerge.length;i++)
{
for(var j=0;j<toBeMerge[i].length;j++)
{
var time = toBeMerge[i][j][JSLang[lang].time]
if(allTime.indexOf(time)==-1 && time!=undefined)
allTime.push(time)
}
}
// sort allTime from small to big
allTime.sort(function(a,b){
return new Date(b) - new Date(a)
})
console.log(allTime)
// merge all data
dataset = []
for(var i=0;i<allTime.length;i++)
{
var tmp = {}
tmp[JSLang[lang].time] = allTime[i]
tmp[JSLang[lang].value] = {}
for(var j=0;j<toBeMerge.length;j++)
{
for(var k=0;k<toBeMerge[j].length;k++)
{
if(toBeMerge[j][k][JSLang[lang].time]==allTime[i])
{
if(isJSON(stringendecoder.decodeHtml(toBeMerge[j][k][JSLang[lang].value])))
{
toBeMerge[j][k][JSLang[lang].value] = JSON.parse(stringendecoder.decodeHtml(toBeMerge[j][k][JSLang[lang].value]))
for(var key in toBeMerge[j][k][JSLang[lang].value])
{
tmp[JSLang[lang].value][topicSelects[j].val() + " - " + key] = toBeMerge[j][k][JSLang[lang].value][key]
}
}
else{
tmp[JSLang[lang].value][topicSelects[j].val()] = toBeMerge[j][k][JSLang[lang].value]
}
}
}
}
tmp[JSLang[lang].value] = stringendecoder.decodeHtml(JSON.stringify(tmp[JSLang[lang].value]))
dataset.push(tmp)
}
}
else if(toBeMerge.length==1)
{
dataset = toBeMerge[0]
}
else
{
dataset = []
}
init_table()
}
topicSelect.bind('change', function() {
fresh()
})
globalTableProjectInfo.currentTp = '$'
topicDiv.append(topicSelect)
var addTopicButton = $('<a class="btn btn-primary btn-circle btn-sm" style="margin-left:8px"><i class="fa fa-plus"></i></a>')
topicDiv.append(addTopicButton)
var addBind = function(){
var newtopicSelect = $("<select class='form-control' style='width:150px; margin-top:5px'></select>")
newtopicSelect.append($("<option value='$'>" + JSLang[lang].select + "</option>"))
for (var tp in globalTableProjectInfo.received) {
newtopicSelect.append($("<option value='" + tp + "'>" + tp + "</option>"))
}
topicSelects.push(newtopicSelect)
var tempTitle = $("<span style='font-weight:bold; color:white; margin-top:5px'>" + JSLang[lang].listener + "&nbsp;</span>")
var removeTopicButton = $('<a class="btn btn-primary btn-circle btn-sm" style="margin-left:8px; margin-top:5px"><i class="fa fa-minus"></i></a>')
addTopicButton.after(removeTopicButton)
addTopicButton.after(newtopicSelect)
addTopicButton.after(tempTitle)
removeTopicButton.bind('click',function(){
newtopicSelect.remove()
removeTopicButton.remove()
tempTitle.remove()
var index = topicSelects.indexOf(newtopicSelect)
topicSelects.splice(index,1)
fresh()
})
newtopicSelect.bind('change', function() {
fresh()
})
}
addTopicButton.bind('click', function() {
addBind()
})
topicOuterDiv.append(topicDiv)
grid2.append(topicOuterDiv)
var row = $("<div class='row' style='margin:0'></div>")
grid2.append(row)
var leftDiv = $("<div class='col-xl-6'></div>")
var rightDiv = $("<div class='col-xl-6'></div>")
row.append(leftDiv)
row.append(rightDiv)
var leftCard = $('<div class="card shadow mb-4">')
var rightCard = $('<div class="card shadow mb-4">')
leftDiv.append(leftCard)
rightDiv.append(rightCard)
var leftCardTitle = $('<div class="card-header py-3" style="display:flex;align-items:center">')
var rightCardTitle = $('<div class="card-header py-3">')
leftCard.append(leftCardTitle)
rightCard.append(rightCardTitle)
leftCardTitle.append($('<h6 class="m-0 font-weight-bold text-primary">' + JSLang[lang].monitor + '</h6>'))
var downloadButton = $('<a class="btn btn-primary btn-sm" download="data.csv" style="padding:0 5px 0 5px;margin-left:10px">' + JSLang[lang].download + '</a>')
var clearButton = $('<a class="btn btn-success btn-sm" style="padding:0 5px 0 5px;margin-left:8px">' + JSLang[lang].clear + '</a>')
var clearAllButton = $('<a class="btn btn-warning btn-sm" style="padding:0 5px 0 5px;margin-left:8px">' + JSLang[lang].clearAll + '</a>')
clearAllButton.click(function() {
if (globalTableProjectInfo.currentTp != "$") {
if (globalTableProjectInfo.currentTp.split(",,").length == 1)
delete globalTableProjectInfo.received[globalTableProjectInfo.currentTp]
else {
var temp = globalTableProjectInfo.currentTp.split(",,")
for (var i in temp) {
if(temp[i] != "$")
delete globalTableProjectInfo.received[temp[i]]
}
}
for(var i in topicSelects)
{
topicSelects[i].val('$')
if (globalTableProjectInfo.currentTp.split(",,").length == 1)
topicSelects[i].children("[value='" + globalTableProjectInfo.currentTp + "']").remove()
else {
var temp = globalTableProjectInfo.currentTp.split(",,")
for (var j in temp) {
if(temp[j] != "$")
topicSelects[i].children("[value='" + temp[j] + "']").remove()
}
}
}
globalTableProjectInfo.currentTp = '$'
dataset = []
init_table()
}
})
leftCardTitle.append(downloadButton)
leftCardTitle.append(clearButton)
leftCardTitle.append(clearAllButton)
clearButton.click(function() {
if (globalTableProjectInfo.currentTp.split(",,").length == 1)
globalTableProjectInfo.received[globalTableProjectInfo.currentTp] = []
else {
var temp = globalTableProjectInfo.currentTp.split(",,")
for (var i in temp) {
if(temp[i] != "$")
globalTableProjectInfo.received[temp[i]] = []
}
}
fresh()
})
var sync_export = function() {
var fields = globalTable.data().JSGrid.fields
var data = globalTable.data().JSGrid.data
var names = []
for (field in fields) {
names.push(fields[field].name)
}
var str = names.join(',') + "\n"
for (row in data) {
for (rname in names) {
if (data[row][names[rname]])
str = str + stringendecoder.decodeHtml(data[row][names[rname]]) + ","
else
str = str + ","
}
str = str + "\n"
}
downloadButton.attr("href", "data:text/csv;charset=utf-8,\ufeff" + encodeURIComponent(str))
}
rightCardTitle.append($('<h6 class="m-0 font-weight-bold text-primary">' + JSLang[lang].rtchart + '</h6>'))
var leftCardBody = $('<div class="card-body" style="height:400px;padding:0">')
var rightCardBody = $('<div class="card-body" style="height:400px">')
leftCard.append(leftCardBody)
rightCard.append(rightCardBody)
var leftCardBodyDiv = $('<div></div>')
leftCardBody.append(leftCardBodyDiv)
var rightCardBodyDiv = $('<div style="width:100%;height:100%"></div>')
rightCardBody.append(rightCardBodyDiv)
var topicOuterDiv2 = $("<div style='width:100%;display:flex;align-items:center;'></div>")
var topicDiv2 = $("<div style='margin:0;display:flex;flex-direction:row;align-items:center;justify-content:center;margin-bottom:20px;width:320px;background-color:white;border-radius:0 0 40px 0;padding-left:10px;padding-right:10px;padding-top:10px;padding-bottom:10px;box-shadow:0 .15rem 1.75rem 0 rgba(58,59,69,.15)!important'></div>")
var topicSelect2 = $("<input class='form-control' style='width:150px;min-width:150px'></input>")
topicDiv2.append($("<span style='font-weight:bold'>" + JSLang[lang].sender + "&nbsp;</span>"))
topicSelect2.bind('input', function() {
globalTableProjectInfo.currentTp2 = stringendecoder.encodeHtml(topicSelect2.val())
})
globalTableProjectInfo.currentTp2 = ''
topicDiv2.append(topicSelect2)
var removeTopicButton2 = $('<a class="btn btn-danger btn-circle btn-sm" style="margin-left:8px"><i class="fa fa-close"></i></a>')
topicDiv2.append(removeTopicButton2)
removeTopicButton2.click(function() {
topicSelect2.val("")
globalTableProjectInfo.currentTp2 = ""
})
topicOuterDiv2.append(topicDiv2)
grid2.append(topicOuterDiv2)
var dataset = []
chart = echarts.init(rightCardBodyDiv[0])
chart.setOption({
tooltip:{
trigger: "axis",
formatter: function(params){
let str = '';
params.forEach((item, idx) => {
str += "<div style='margin:0;display:flex;justify-content:space-between;align-items:center'><div>" + `${item.marker}${item.seriesName}:&nbsp;&nbsp;&nbsp;</div><b>${chart.getOption().series[item.seriesIndex].oriData[item.dataIndex]}</b>` + "</div>"
})
return str
}
}
})
init_table = function() {
var fields = ["时间"]
for (dataitem in dataset) {
if (isJSON(stringendecoder.decodeHtml(dataset[dataitem].))) {
var json_parsed = JSON.parse(stringendecoder.decodeHtml(dataset[dataitem].))
for (key in json_parsed) {
var alreadyHave = false
for (field in fields) {
if (fields[field] == key) {
alreadyHave = true
break
}
}
if (!alreadyHave)
fields.push(key)
}
} else {
var alreadyHave = false
for (field in fields) {
if (fields[field] == '值') {
alreadyHave = true
break
}
}
if (!alreadyHave)
fields.push("值")
}
}
var tableFields = []
for (field in fields) {
let cvtName = fields[field]
if (cvtName == "时间")
cvtName = JSLang[lang].time
else if (cvtName == "值")
cvtName = JSLang[lang].value
console.log(cvtName)
tableFields.push({
name: cvtName,
type: 'text',
align: 'center',
itemTemplate: function(value, item) {
return item[cvtName]
}
})
}
var parsedDataset = []
for (dataitem in dataset) {
if (lang == 'en') {
if (dataset[dataitem].时间) {
dataset[dataitem].time = dataset[dataitem].时间
delete dataset[dataitem].时间
dataset[dataitem].value = dataset[dataitem].
delete dataset[dataitem].
}
} else if (lang == 'tw') {
if (dataset[dataitem].时间) {
dataset[dataitem].時間 = dataset[dataitem].时间
delete dataset[dataitem].时间
}
}
}
for (dataitem in dataset) {
if (isJSON(stringendecoder.decodeHtml(dataset[dataitem][JSLang[lang].value]))) {
var json_parsed = JSON.parse(stringendecoder.decodeHtml(dataset[dataitem][JSLang[lang].value]))
json_parsed[JSLang[lang].time] = dataset[dataitem][JSLang[lang].time]
parsedDataset.push(json_parsed)
} else {
parsedDataset.push(dataset[dataitem])
}
}
globalTable = leftCardBodyDiv.jsGrid({
width: "100%",
height: "100%",
noDataContent: JSLang[lang].noData,
data: parsedDataset,
confirmDeleting: false,
fields: tableFields,
onItemDeleted: function() {
setContent()
},
onItemUpdated: function() {
setContent()
}
})
var xAxis = {
type: 'category',
data: []
}
var yAxis = {
type: 'value'
}
var series = []
for (tableField in tableFields) {
series.push({
type: 'line',
name: tableFields[tableField].name,
data: [],
oriData:[],
connectNulls: true
})
}
for (dataitem in dataset) {
xAxis.data.unshift(dataset[dataitem][JSLang[lang].time].slice(11))
if (isJSON(stringendecoder.decodeHtml(dataset[dataitem][JSLang[lang].value]))) {
var json_parsed = JSON.parse(stringendecoder.decodeHtml(dataset[dataitem][JSLang[lang].value]))
for (sery in series) {
var seryName = series[sery].name
if (seryName != JSLang[lang].time)
if (json_parsed[seryName] || json_parsed[seryName] === 0) {
series[sery].data.unshift(parseFloat(json_parsed[seryName]))
series[sery].oriData.unshift(json_parsed[seryName])
} else
{
series[sery].data.unshift(NaN)
series[sery].oriData.unshift("-")
}
}
} else {
for (sery in series) {
var seryName = series[sery].name
if (seryName != JSLang[lang].time)
if (seryName == JSLang[lang].value){
series[sery].data.unshift(parseFloat(dataset[dataitem][JSLang[lang].value]))
series[sery].oriData.unshift(dataset[dataitem][JSLang[lang].value])
}
else
{
series[sery].data.unshift(NaN)
series[sery].oriData.unshift("-")
}
}
}
}
chart.setOption({
dataZoom: [{
id: 'dataZoomX',
type: 'slider',
xAxisIndex: [0]
}],
xAxis: xAxis,
yAxis: yAxis,
series: series,
tooltip:{
trigger: "axis",
formatter: function(params){
let str = '';
params.forEach((item, idx) => {
str += "<div style='margin:0;display:flex;justify-content:space-between;align-items:center'><div>" + `${item.marker}${item.seriesName}:&nbsp;&nbsp;&nbsp;</div><b>${chart.getOption().series[item.seriesIndex].oriData[item.dataIndex]}</b>` + "</div>"
})
return str
}
}
})
sync_export()
}
var bottomDiv = $("<div class='col-xl-6'></div>")
var row2 = $("<div class='row' style='margin:0'></div>")
grid2.append(row2)
row2.append(bottomDiv)
var bottomCard = $('<div class="card shadow mb-4">')
bottomDiv.append(bottomCard)
var bottomCardTitle = $('<div class="card-header py-3" style="display:flex">')
bottomCard.append(bottomCardTitle)
bottomCardTitle.append($('<h6 class="m-0 font-weight-bold text-primary">' + JSLang[lang].sendString + '</h6>'))
bottomCardTitle.append($('<input type="checkbox" id="sendClear" style="min-width:0px!important;margin-left:20px;margin-right:3px"/><label style="margin:0;padding:0;font-size:small">发送后清空</label>'))
var bottomCardBody = $('<div class="card-body">')
bottomCard.append(bottomCardBody)
var bottomCardBodyDiv = $('<div style="display:flex;align-items:center"></div>')
bottomCardBody.append(bottomCardBodyDiv)
var messageInput = $('<textarea class="form-control"></textarea>')
messageInput.bind('input', function() {
globalTableProjectInfo['toBeSent'] = stringendecoder.encodeHtml(messageInput.val())
})
var messageSendButton = $('<a class="btn btn-primary btn-circle btn-lg" style="margin-left:10px"></a>')
var messageSendIcon = $('<i class="fa fa-paper-plane" style="margin-right:3px"></i>')
messageSendButton.append(messageSendIcon)
bottomCardBodyDiv.append(messageInput)
bottomCardBodyDiv.append(messageSendButton)
messageSendButton.click(function() {
if (globalTableProjectInfo.currentTp2 && globalTableProjectInfo.currentTp2 != '')
publish(stringendecoder.decodeHtml(globalTableProjectInfo.currentTp2), messageInput.val(), true)
else
showtext(JSLang[lang].topicUnset)
messageSendButton.removeClass("btn-primary")
messageSendButton.addClass("btn-success")
setTimeout(function(){
messageSendButton.addClass("btn-primary")
messageSendButton.removeClass("btn-success")
},200)
if($("#sendClear").prop("checked"))
messageInput.val("")
})
var bottomDiv2 = $("<div class='col-xl-6'></div>")
row2.append(bottomDiv2)
var bottomCard2 = $('<div class="card shadow mb-4">')
bottomDiv2.append(bottomCard2)
var bottomCardTitle2 = $('<div class="card-header py-3" style="display:flex">')
bottomCard2.append(bottomCardTitle2)
bottomCardTitle2.append($('<h6 class="m-0 font-weight-bold text-primary">' + JSLang[lang].sendJSON + '</h6>'))
var bottomCardBody2 = $('<div class="card-body">')
bottomCard2.append(bottomCardBody2)
var bottomCardBodyDiv2 = $('<div style="display:flex;align-items:center"></div>')
bottomCardBody2.append(bottomCardBodyDiv2)
var messageInput2Div = $('<div style="width:100%"></div>')
var valueDiv = $('<div style="display:flex;align-items:center;margin-bottom:10px"></div>')
valueDiv.append($('<span style="margin-right:8px">' + JSLang[lang].key + '</span>'))
var keyInput = $('<input class="form-control" style="min-width:0;width:120px"/>')
valueDiv.append(keyInput)
$(function() { keyInput.bind('input', syncGlobalJSONMemory) });
valueDiv.append($('<span style="margin-left:15px;margin-right:8px">' + JSLang[lang].value + '</span>'))
var valInput = $('<input style="min-width:0" class="form-control"/>')
valueDiv.append(valInput)
$(function() { valInput.bind('input', syncGlobalJSONMemory) });
var removeButton = $('<a class="btn btn-danger btn-circle btn-sm" style="height:1.2rem;width:1.2rem;font-size:.5rem;margin-right:6px"><i class="fa fa-minus"></i></a>')
removeButton.click(function() {
if (messageInput2Div.children().length > 2)
valueDiv.remove()
else
showtext(JSLang[lang].JSONempty)
syncGlobalJSONMemory()
})
valueDiv.prepend(removeButton)
messageInput2Div.append(valueDiv)
var addButton = $('<a class="btn btn-primary btn-block" style="display:inline-block"><i class="fa fa-plus" style="margin-right:10px;margin-top:5px"></i>' + JSLang[lang].addKey + '</a>')
addButton.click(function() {
var valueDiv = $('<div style="display:flex;align-items:center;margin-bottom:10px"></div>')
valueDiv.append($('<span style="margin-right:8px">' + JSLang[lang].key + '</span>'))
var keyInput = $('<input class="form-control" style="min-width:0;width:120px"/>')
valueDiv.append(keyInput)
keyInput.bind('input', syncGlobalJSONMemory)
valueDiv.append($('<span style="margin-left:15px;margin-right:8px">' + JSLang[lang].value + '</span>'))
var valInput = $('<input style="min-width:0" class="form-control"/>')
valueDiv.append(valInput)
valInput.bind('input', syncGlobalJSONMemory)
var removeButton = $('<a class="btn btn-danger btn-circle btn-sm" style="height:1.2rem;width:1.2rem;font-size:.5rem;margin-right:6px"><i class="fa fa-minus"></i></a>')
removeButton.click(function() {
if (messageInput2Div.children().length > 2)
valueDiv.remove()
else
showtext(JSLang[lang].JSONempty)
syncGlobalJSONMemory()
})
valueDiv.prepend(removeButton)
valueDiv.insertBefore(addButton)
})
var syncGlobalJSONMemory = function() {
var toBeSaved = {}
var inputDivs = messageInput2Div.children()
for (inputDiv = 0; inputDiv < inputDivs.length - 1; inputDiv = inputDiv + 1) {
if ($($(inputDivs[inputDiv]).children()[2]).val() != "") {
toBeSaved[$($(inputDivs[inputDiv]).children()[2]).val()] = $($(inputDivs[inputDiv]).children()[4]).val()
}
}
globalTableProjectInfo['toBeSentJSON'] = stringendecoder.encodeHtml(JSON.stringify(toBeSaved))
}
messageInput2Div.append(addButton)
var messageSendButton2 = $('<a class="btn btn-primary btn-circle btn-lg" style="margin-left:10px"><i class="fa fa-paper-plane" style="margin-right:3px"></i></a>')
bottomCardBodyDiv2.append(messageInput2Div)
bottomCardBodyDiv2.append(messageSendButton2)
messageSendButton2.click(function() {
if (globalTableProjectInfo.currentTp2 && globalTableProjectInfo.currentTp2 != '') {
if (isJSON(stringendecoder.decodeHtml(globalTableProjectInfo.toBeSentJSON)))
publish(stringendecoder.decodeHtml(globalTableProjectInfo.currentTp2), stringendecoder.decodeHtml(globalTableProjectInfo.toBeSentJSON), true)
else
showtext(JSLang[lang].invalidJSON)
} else
showtext(JSLang[lang].topicUnset)
})
init_table()
if (JSON.parse(JSON.parse(res)['projectLayout']).data_info || JSON.parse(res)['dataStorage']) {
var resJSON = JSON.parse(JSON.parse(res)['projectLayout']).data_info || JSON.parse(JSON.parse(res)['dataStorage'])
if (resJSON['currentTp']) {
for (tp in resJSON['received'])
topicSelect.append($("<option value='" + tp + "'>" + tp + "</option>"))
topicSelect.val(stringendecoder.decodeHtml(resJSON['currentTp']))
globalTableProjectInfo = resJSON
if (isJSON(stringendecoder.decodeHtml(globalTableProjectInfo['toBeSentJSON']))) {
var json_parsed = JSON.parse(stringendecoder.decodeHtml(globalTableProjectInfo['toBeSentJSON']))
for (key in json_parsed) {
let valueDiv = $('<div style="display:flex;align-items:center;margin-bottom:10px"></div>')
valueDiv.append($('<span style="margin-right:8px">' + JSLang[lang].key + '</span>'))
let keyInput = $('<input class="form-control" style="min-width:0;width:120px"/>')
keyInput.val(key)
valueDiv.append(keyInput)
$(function() { keyInput.bind('input', syncGlobalJSONMemory) });
valueDiv.append($('<span style="margin-left:15px;margin-right:8px">' + JSLang[lang].value + '</span>'))
let valInput = $('<input style="min-width:0" class="form-control"/>')
valueDiv.append(valInput)
valInput.val(json_parsed[key])
$(function() { valInput.bind('input', syncGlobalJSONMemory) });
let removeButton = $('<a class="btn btn-danger btn-circle btn-sm" style="height:1.2rem;width:1.2rem;font-size:.5rem;margin-right:6px"><i class="fa fa-minus"></i></a>')
removeButton.click(function() {
if (messageInput2Div.children().length > 2)
valueDiv.remove()
else
showtext(JSLang[lang].JSONempty)
syncGlobalJSONMemory()
})
valueDiv.prepend(removeButton)
messageInput2Div.prepend(valueDiv)
}
}
var history = JSON.parse(res).history
for (hisItem in history) {
var hisTopic = history[hisItem].topicName
var hisMessage = history[hisItem].msg
var hisTime = history[hisItem].timeStamp
if (globalTableProjectInfo['received'][hisTopic])
globalTableProjectInfo['received'][hisTopic].unshift({
'时间': hisTime,
'值': stringendecoder.encodeHtml(hisMessage)
})
else {
globalTableProjectInfo['received'][hisTopic] = []
topicSelect.append($("<option value='" + hisTopic + "'>" + hisTopic + "</option>"))
globalTableProjectInfo['received'][hisTopic].unshift({
'时间': hisTime,
'值': stringendecoder.encodeHtml(hisMessage)
})
}
}
if (globalTableProjectInfo['currentTp'] != '$') {
globalTableProjectInfo['currentTp'] = globalTableProjectInfo['currentTp'].split(',,')[0]
topicSelect.val(stringendecoder.decodeHtml(globalTableProjectInfo['currentTp']))
fresh()
}
messageInput.val(stringendecoder.decodeHtml(globalTableProjectInfo['toBeSent']))
if (globalTableProjectInfo['currentTp2'])
topicSelect2.val(stringendecoder.decodeHtml(globalTableProjectInfo['currentTp2']))
init_table()
}
}
var modaldd = showmodaltext("<div style='text-align:center' class='nnt'><i class='fa fa-spin fa-cog' style='font-size:2rem;color:#4e73df'></i><p style='margin-top:6px;margin-bottom:0;color:#4e73df;font-size:1rem;font-weight:bold'>" + JSLang[lang].loading + "</p></div>")
$.get('queryShareKey', {
'projectName': globalProjectName,
'projectPass': globalProjectPass
}, function(res) {
if (res != -1)
globalShareKey = JSON.parse(res)['share_key']
modaldd.close().remove()
})
}
window.addEventListener("resize", function() {
chart.resize();
});
if (projectType == LOGIC_MODE && isCode) {
init_codemirror()
}
})
}
function isJSON(str) {
if (typeof str == 'string') {
try {
var obj = JSON.parse(str);
if (typeof obj == 'object' && obj) {
return true;
} else {
return false;
}
} catch (e) {
return false;
}
}
}
function add_widget() {
var widget_list = $("<div class='widget_list nnt' style='display:flex;max-width:810px;align-items:center;justify-content:center;flex-direction:row;flex-wrap:wrap;padding:10px'/>")
var title = $("<div style='display:flex;align-items:center;justify-content:center;font-size:1.8rem!important;width:100%;text-align:center;margin-bottom:15px;margin-top:5px;color:#4e73df;font-size:1.3rem;font-weight:bold'><i class='fa fa-cube' style='margin-right:5px;font-size:2rem'></i><p style='margin:0'>" + JSLang[lang].widget + "</p><a class='btn btn-primary btn-block' style='width:90px;margin-left:8px;padding:2px' href='./documentation' target='_blank'>" + JSLang[lang].guide + "</a></div>")
widget_list.append(title)
widget_list.append($("<h5 style='width:100%;text-align:center;margin-bottom:5px;margin-top:5px;color:#4e73df;font-size:1.3rem;font-weight:bold'>" + JSLang[lang].control + "</h5>"))
var input_button_add = $("<div class='widget_div'><div><img src='icons/input_button.svg'><span>" + JSLang[lang].switch+"</span></div><a class='btn btn-success btn-block'><i class='fa fa-plus'></i></a></div>")
widget_list.append(input_button_add)
var input_button_add2 = $("<div class='widget_div'><div><img src='icons/input_button2.svg'><span>" + JSLang[lang].button + "</span></div><a class='btn btn-success btn-block'><i class='fa fa-plus'></i></a></div>")
widget_list.append(input_button_add2)
var input_slider_add = $("<div class='widget_div'><div><img src='icons/input_slider.svg'><span>" + JSLang[lang].slider + "</span></div><a class='btn btn-success btn-block'><i class='fa fa-plus'></i></a></div>")
widget_list.append(input_slider_add)
var input_controller_add = $("<div class='widget_div'><div><img src='icons/input_controller.svg'><span>" + JSLang[lang].joystick + "</span></div><a class='btn btn-success btn-block'><i class='fa fa-plus'></i></a></div>")
widget_list.append(input_controller_add)
var input_rgb_add = $("<div class='widget_div'><div><img src='icons/input_rgb.svg'><span>" + JSLang[lang].RGB + "</span></div><a class='btn btn-success btn-block'><i class='fa fa-plus'></i></a></div>")
widget_list.append(input_rgb_add)
var output_bulb_add = $("<div class='widget_div'><div><img src='icons/output_bulb.svg'><span>" + JSLang[lang].bulb + "</span></div><a class='btn btn-success btn-block'><i class='fa fa-plus'></i></a></div>")
widget_list.append(output_bulb_add)
var timer_add = $("<div class='widget_div'><div><img src='icons/timer.svg'><span>" + JSLang[lang].timer + "</span></div><a class='btn btn-success btn-block'><i class='fa fa-plus'></i></a></div>")
widget_list.append(timer_add)
var trigger_add = $("<div class='widget_div'><div><img src='icons/trigger.svg'><span>" + JSLang[lang].trigger + "</span></div><a class='btn btn-success btn-block'><i class='fa fa-plus'></i></a></div>")
widget_list.append(trigger_add)
var ble_add = $("<div class='widget_div'><div><img src='icons/ble.svg'><span>" + JSLang[lang].ble + "</span></div><a class='btn btn-success btn-block'><i class='fa fa-plus'></i></a></div>")
widget_list.append(ble_add)
widget_list.append($("<h5 style='width:100%;text-align:center;margin-bottom:5px;margin-top:10px;color:#4e73df;font-size:1.3rem;font-weight:bold'>" + JSLang[lang].data + "</h5>"))
var output_chart_add = $("<div class='widget_div'><div><img src='icons/output_chart.svg'><span>" + JSLang[lang].lineChart + "</span></div><a class='btn btn-success btn-block'><i class='fa fa-plus'></i></a></div>")
widget_list.append(output_chart_add)
var output_bar_add = $("<div class='widget_div'><div><img src='icons/output_bar.svg'><span>" + JSLang[lang].barChart + "</span></div><a class='btn btn-success btn-block'><i class='fa fa-plus'></i></a></div>")
widget_list.append(output_bar_add)
var table_add = $("<div class='widget_div'><div><img src='icons/table.svg'><span>" + JSLang[lang].dataTable + "</span></div><a class='btn btn-success btn-block'><i class='fa fa-plus'></i></a></div>")
widget_list.append(table_add)
var output_map_add = $("<div class='widget_div'><div><img src='icons/output_map.svg'><span>" + JSLang[lang].dataMap + "</span></div><a class='btn btn-" + (OFFLINE_MODE ? 'secondary' : 'success') + " btn-block'><i class='fa fa-" + (OFFLINE_MODE ? 'lock' : 'plus') + "'></i></a></div>")
widget_list.append(output_map_add)
var output_dashboard_add = $("<div class='widget_div'><div><img src='icons/output_dashboard.svg'><span>" + JSLang[lang].dashboard + "</span></div><a class='btn btn-success btn-block'><i class='fa fa-plus'></i></a></div>")
widget_list.append(output_dashboard_add)
var input_weather_add = $("<div class='widget_div'><div><img src='icons/input_weather.svg'><span>" + JSLang[lang].weather + "</span></div><a class='btn btn-" + (OFFLINE_MODE ? 'secondary' : 'success') + " btn-block'><i class='fa fa-" + (OFFLINE_MODE ? 'lock' : 'plus') + "'></i></a></div>")
widget_list.append(input_weather_add)
var input_camera_add = $("<div class='widget_div'><div><img src='icons/camera.svg'><span>" + JSLang[lang].camera + "</span></div><a class='btn btn-success btn-block'><i class='fa fa-plus'></i></a></div>")
widget_list.append(input_camera_add)
var input_mic_add = $("<div class='widget_div'><div><img src='icons/mic.svg'><span>" + JSLang[lang].mic + "</span></div><a class='btn btn-success btn-block'><i class='fa fa-plus'></i></a></div>")
widget_list.append(input_mic_add)
var input_tinydb_add = $("<div class='widget_div'><div><img src='icons/database.svg'><span>" + JSLang[lang].tinydb + "</span></div><a class='btn btn-success btn-block'><i class='fa fa-plus'></i></a></div>")
widget_list.append(input_tinydb_add)
widget_list.append($("<h5 style='width:100%;text-align:center;margin-bottom:5px;margin-top:10px;color:#4e73df;font-size:1.3rem;font-weight:bold'>" + JSLang[lang].text + "</h5>"))
var input_keyboard_add = $("<div class='widget_div'><div><img src='icons/input_keyboard.svg'><span>" + JSLang[lang].keyboard + "</span></div><a class='btn btn-success btn-block'><i class='fa fa-plus'></i></a></div>")
widget_list.append(input_keyboard_add)
var output_text_add = $("<div class='widget_div'><div><img src='icons/output_text.svg'><span>" + JSLang[lang].screen + "</span></div><a class='btn btn-success btn-block'><i class='fa fa-plus'></i></a></div>")
widget_list.append(output_text_add)
var output_pixel_add = $("<div class='widget_div'><div><img src='icons/output_pixel.svg'><span>" + JSLang[lang].pixel + "</span></div><a class='btn btn-success btn-block'><i class='fa fa-plus'></i></a></div>")
widget_list.append(output_pixel_add)
var decorate_text_add = $("<div class='widget_div'><div><img src='icons/decorate_text.svg'><span>" + JSLang[lang].label + "</span></div><a class='btn btn-success btn-block'><i class='fa fa-plus'></i></a></div>")
widget_list.append(decorate_text_add)
var decorate_pic_add = $("<div class='widget_div'><div><img src='icons/decorate_pic.svg'><span>" + JSLang[lang].picture + "</span></div><a class='btn btn-success btn-block'><i class='fa fa-plus'></i></a></div>")
widget_list.append(decorate_pic_add)
var magic_add = $("<div class='widget_div'><div><img src='icons/magic.svg'><span>" + JSLang[lang].magic + "</span></div><a class='btn btn-success btn-block'><i class='fa fa-plus'></i></a></div>")
widget_list.append(magic_add)
widget_list.append($("<h5 style='width:100%;text-align:center;margin-bottom:5px;margin-top:10px;color:#4e73df;font-size:1.3rem;font-weight:bold'>" + JSLang[lang].tensorAI + "</h5>"))
var blazeFace_add = $("<div class='widget_div'><div><img src='icons/blazeFace.svg'><span>" + JSLang[lang].blazeFace + "</span></div><a class='btn btn-success btn-block'><i class='fa fa-plus'></i></a></div>")
widget_list.append(blazeFace_add)
var mediaPipe_add = $("<div class='widget_div'><div><img src='icons/mediaPipe.svg'><span>" + JSLang[lang].mediaPipe + "</span></div><a class='btn btn-secondary btn-block'><i class='fa fa-plus'></i></a></div>")
widget_list.append(mediaPipe_add)
var bertQA_add = $("<div class='widget_div'><div><img src='icons/Bert.svg'><span>" + JSLang[lang].Bert + "</span></div><a class='btn btn-secondary btn-block'><i class='fa fa-plus'></i></a></div>")
widget_list.append(bertQA_add)
ble_add.children("a").click(function() {
d.close().remove()
var editForm = $('<div class="nnt"/>')
editForm.append($('<div style="margin-top:-63px;margin-left:82.5px;margin-bottom:15px;box-shadow: 1px 1px 20px #4e73df;background-color:white;width:75px;height:75px;padding:40px;border-radius:80px;border:solid #4e73df 3px;display:flex;align-items:center;justify-content:center"><img src="icons/ble.svg" style="width:45px;"></div>'))
editForm.append($('<h5 style="text-align:center">' + JSLang[lang].unitName + '</h5>'))
var title_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var title_input = $("<input class='form-control form-control-user' style='text-align:center' autofocus='autofocus'/>")
title_input_div.append(title_input)
editForm.append(title_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].readMessTopic + '</h5>'))
var topic_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var topic_input = $("<input class='form-control form-control-user' style='text-align:center'/>")
topic_input_div.append(topic_input)
topic_input.val("bleread")
editForm.append(topic_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].writeMessTopic + '</h5>'))
var topic_input_div_2 = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var topic_input_2 = $("<input class='form-control form-control-user' style='text-align:center'/>")
topic_input_div_2.append(topic_input_2)
topic_input_2.val("blewrite")
editForm.append(topic_input_div_2)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].bleTarget + '</h5>'))
var ble_target_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var ble_target = $("<input class='form-control form-control-user' style='text-align:center;cursor:pointer' readonly/>")
ble_target.val(JSLang[lang].select)
ble_target_div.append(ble_target)
ble_target.click(function() {
// use web bluetooth to select device, no filter
if (navigator.bluetooth) {
navigator.bluetooth.requestDevice({
acceptAllDevices: true,
// read and write to device characteristic (for example, to send data to a micro:bit)
optionalServices: [0xfff0]
}).then(function(device) {
var old_ble_target = ble_target.val()
if(old_ble_target != JSLang[lang].select)
{
globalBLE[old_ble_target].gatt.disconnect()
delete globalBLE[old_ble_target]
}
ble_target.val(device.name + ' (' + device.id + ')')
globalBLE[device.name + ' (' + device.id + ')'] = device
}).catch(function(error) {
// if user cancel the selection(NotFoundError)
if(error.name == "NotFoundError")
{
var old_ble_target = ble_target.val()
globalBLE[old_ble_target].gatt.disconnect()
delete globalBLE[old_ble_target]
ble_target.val(JSLang[lang].select)
title.parent().parent().attr('user-content', JSLang[lang].select)
}
else
showtext(error)
})
} else {
showtext(JSLang[lang].noWebBluetooth)
}
})
editForm.append(ble_target_div)
var bottomDiv = $('<div style="width:100%;margin-top:15px;display:flex;flex-direction:row;align-items:center;justify-content:space-around"/>')
var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df;"><i class="fa fa-check"></i></a>')
bottomDiv.append(confirmEdit)
confirmEdit.click(function() {
if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
var re = /^[a-z0-9]+$/i;
if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11 && getByteLen(topic_input_2.val()) > 0 && getByteLen(topic_input_2.val()) < 11)
if (true) {
if (countSubstr(grid.html(), 'user-title=\"' + title_input.val() + '\"', false) <= 0) {
add_ble(title_input.val(), topic_input.val()+","+topic_input_2.val(), ble_target.val())
modifyDia.close().remove()
} else
showtext(JSLang[lang].sameUnit)
} else
showtext("")
else
showtext(JSLang[lang].topicLenIllegal)
} else
showtext(JSLang[lang].nameLenIllegal)
})
var cancelEdit = $('<a class="btn btn-danger btn-circle"><i class="fa fa-arrow-left"></i></a>')
cancelEdit.click(function() {
modifyDia.close().remove()
add_widget()
})
bottomDiv.append(cancelEdit)
editForm.append(bottomDiv)
var modifyDia = dialog({
content: editForm[0],
cancel: false
})
modifyDia.showModal()
})
blazeFace_add.children("a").click(function() {
d.close().remove()
var editForm = $('<div class="nnt"/>')
editForm.append($('<div style="margin-top:-63px;margin-left:82.5px;margin-bottom:15px;box-shadow: 1px 1px 20px #4e73df;background-color:white;width:75px;height:75px;padding:40px;border-radius:80px;border:solid #4e73df 3px;display:flex;align-items:center;justify-content:center"><img src="icons/camera.svg" style="width:45px;"></div>'))
editForm.append($('<h5 style="text-align:center">' + JSLang[lang].unitName + '</h5>'))
var title_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var title_input = $("<input class='form-control form-control-user' style='text-align:center' autofocus='autofocus'/>")
title_input_div.append(title_input)
editForm.append(title_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].messTopic + '</h5>'))
var topic_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var topic_input = $("<input class='form-control form-control-user' style='text-align:center'/>")
topic_input_div.append(topic_input)
topic_input.val("face")
editForm.append(topic_input_div)
var bottomDiv = $('<div style="width:100%;margin-top:15px;display:flex;flex-direction:row;align-items:center;justify-content:space-around"/>')
var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df;"><i class="fa fa-check"></i></a>')
bottomDiv.append(confirmEdit)
confirmEdit.click(function() {
if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
var re = /^[a-z0-9]+$/i;
if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
if (true) {
if (countSubstr(grid.html(), 'user-title=\"' + title_input.val() + '\"', false) <= 0) {
add_face(title_input.val(), topic_input.val(), "")
modifyDia.close().remove()
} else
showtext(JSLang[lang].sameUnit)
} else
showtext("")
else
showtext(JSLang[lang].topicLenIllegal)
} else
showtext(JSLang[lang].nameLenIllegal)
})
var cancelEdit = $('<a class="btn btn-danger btn-circle"><i class="fa fa-arrow-left"></i></a>')
cancelEdit.click(function() {
modifyDia.close().remove()
add_widget()
})
bottomDiv.append(cancelEdit)
editForm.append(bottomDiv)
var modifyDia = dialog({
content: editForm[0],
cancel: false
})
modifyDia.showModal()
})
input_camera_add.children("a").click(function() {
d.close().remove()
var editForm = $('<div class="nnt"/>')
editForm.append($('<div style="margin-top:-63px;margin-left:82.5px;margin-bottom:15px;box-shadow: 1px 1px 20px #4e73df;background-color:white;width:75px;height:75px;padding:40px;border-radius:80px;border:solid #4e73df 3px;display:flex;align-items:center;justify-content:center"><img src="icons/camera.svg" style="width:45px;"></div>'))
editForm.append($('<h5 style="text-align:center">' + JSLang[lang].unitName + '</h5>'))
var title_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var title_input = $("<input class='form-control form-control-user' style='text-align:center' autofocus='autofocus'/>")
title_input_div.append(title_input)
editForm.append(title_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].messTopic + '</h5>'))
var topic_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var topic_input = $("<input class='form-control form-control-user' style='text-align:center'/>")
topic_input_div.append(topic_input)
topic_input.val("camera")
editForm.append(topic_input_div)
// resolution selection
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].resolution + '</h5>'))
var resolution_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var resolution_input = $("<select class='form-control form-control-user' style='text-align:center;cursor:pointer'/>")
resolution_input_div.append(resolution_input)
resolution_input.append($("<option value='160x120'>160x120</option>"))
resolution_input.append($("<option value='320x240'>320x240</option>"))
editForm.append(resolution_input_div)
// fps selection
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].fps + '</h5>'))
var fps_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var fps_input = $("<select class='form-control form-control-user' style='text-align:center;cursor:pointer'/>")
fps_input_div.append(fps_input)
fps_input.append($("<option value='1'>1</option>"))
fps_input.append($("<option value='2'>2</option>"))
editForm.append(fps_input_div)
var bottomDiv = $('<div style="width:100%;margin-top:15px;display:flex;flex-direction:row;align-items:center;justify-content:space-around"/>')
var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df;"><i class="fa fa-check"></i></a>')
bottomDiv.append(confirmEdit)
confirmEdit.click(function() {
if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
var re = /^[a-z0-9]+$/i;
if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
if (true) {
if (countSubstr(grid.html(), 'user-title=\"' + title_input.val() + '\"', false) <= 0) {
add_camera(title_input.val(), topic_input.val(), resolution_input.val() + "," + fps_input.val())
modifyDia.close().remove()
} else
showtext(JSLang[lang].sameUnit)
} else
showtext("")
else
showtext(JSLang[lang].topicLenIllegal)
} else
showtext(JSLang[lang].nameLenIllegal)
})
var cancelEdit = $('<a class="btn btn-danger btn-circle"><i class="fa fa-arrow-left"></i></a>')
cancelEdit.click(function() {
modifyDia.close().remove()
add_widget()
})
bottomDiv.append(cancelEdit)
editForm.append(bottomDiv)
var modifyDia = dialog({
content: editForm[0],
cancel: false
})
modifyDia.showModal()
})
output_pixel_add.children("a").click(function() {
d.close().remove()
var editForm = $('<div class="nnt"/>')
editForm.append($('<div style="margin-top:-63px;margin-left:82.5px;margin-bottom:15px;box-shadow: 1px 1px 20px #4e73df;background-color:white;width:75px;height:75px;padding:40px;border-radius:80px;border:solid #4e73df 3px;display:flex;align-items:center;justify-content:center"><img src="icons/output_pixel.svg" style="width:45px;"></div>'))
editForm.append($('<h5 style="text-align:center">' + JSLang[lang].unitName + '</h5>'))
var title_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var title_input = $("<input class='form-control form-control-user' style='text-align:center'/>")
title_input_div.append(title_input)
editForm.append(title_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].messTopic + '</h5>'))
var topic_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var topic_input = $("<input class='form-control form-control-user' style='text-align:center'/>")
topic_input_div.append(topic_input)
topic_input.val("pixel")
editForm.append(topic_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].xpixel + '</h5>'))
var xpixel_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var xpixel_input = $("<input class='form-control form-control-user' type='number' min='1' max='100' style='text-align:center'/>")
xpixel_input_div.append(xpixel_input)
editForm.append(xpixel_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].ypixel + '</h5>'))
var ypixel_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var ypixel_input = $("<input class='form-control form-control-user' type='number' min='1' max='100' style='text-align:center'/>")
ypixel_input_div.append(ypixel_input)
editForm.append(ypixel_input_div)
var bottomDiv = $('<div style="width:100%;margin-top:15px;display:flex;flex-direction:row;align-items:center;justify-content:space-around"/>')
var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df;"><i class="fa fa-check"></i></a>')
bottomDiv.append(confirmEdit)
xpixel_input.val(30)
ypixel_input.val(20)
confirmEdit.click(function() {
if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
var re = /^[a-z0-9]+$/i;
if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
if (xpixel_input.val() > 0 && xpixel_input.val() < 101 && ypixel_input.val() > 0 && ypixel_input.val() < 101) {
if (countSubstr(grid.html(), 'user-title=\"' + title_input.val() + '\"', false) <= 0) {
add_pixel(title_input.val(), topic_input.val(), xpixel_input.val() + "," + ypixel_input.val())
modifyDia.close().remove()
} else
showtext(JSLang[lang].sameUnit)
} else
showtext(JSLang[lang].invalidPixel)
else
showtext(JSLang[lang].topicLenIllegal)
} else
showtext(JSLang[lang].nameLenIllegal)
})
var cancelEdit = $('<a class="btn btn-danger btn-circle"><i class="fa fa-arrow-left"></i></a>')
cancelEdit.click(function() {
modifyDia.close().remove()
add_widget()
})
bottomDiv.append(cancelEdit)
editForm.append(bottomDiv)
var modifyDia = dialog({
content: editForm[0],
cancel: false
})
modifyDia.showModal()
})
input_button_add.children("a").click(function() {
d.close().remove()
var editForm = $('<div class="nnt"/>')
editForm.append($('<div style="margin-top:-63px;margin-left:82.5px;margin-bottom:15px;box-shadow: 1px 1px 20px #4e73df;background-color:white;width:75px;height:75px;padding:40px;border-radius:80px;border:solid #4e73df 3px;display:flex;align-items:center;justify-content:center"><img src="icons/input_button.svg" style="width:45px;"></div>'))
editForm.append($('<h5 style="text-align:center">' + JSLang[lang].unitName + '</h5>'))
var title_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var title_input = $("<input class='form-control form-control-user' style='text-align:center' autofocus='autofocus'/>")
title_input_div.append(title_input)
editForm.append(title_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].messTopic + '</h5>'))
var topic_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var topic_input = $("<input class='form-control form-control-user' style='text-align:center'/>")
topic_input_div.append(topic_input)
topic_input.val("button")
editForm.append(topic_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].feedbackMode + '</h5>'))
var modeButton = $("<label class='switch' style='margin-bottom:0'></label>")
var modeCheckbox = $("<input type='checkbox'>")
modeCheckbox.prop("checked", false)
modeCheckbox.click(function() {
if (modeCheckbox.prop("checked"))
editForm.find("img").attr("src", "icons/input_button2.svg")
else
editForm.find("img").attr("src", "icons/input_button.svg")
})
var modeCheckDiv = $("<div class='slider2 round'></div>")
modeButton.append(modeCheckbox)
modeButton.append(modeCheckDiv)
var modeDiv = $("<div style='display:flex;margin-top:10px;flex-direction:row;align-items:center;justify-content:center'/>")
modeDiv.append($("<span style='font-size:1rem;margin-right:10px;color:#4e73df;font-weight:bold'>" + JSLang[lang].switch+"</span>"))
modeDiv.append(modeButton)
modeDiv.append($("<span style='font-size:1rem;margin-left:10px;color:#e74a3b;font-weight:bold'>" + JSLang[lang].button + "</span>"))
editForm.append(modeDiv)
var bottomDiv = $('<div style="width:100%;margin-top:15px;display:flex;flex-direction:row;align-items:center;justify-content:space-around"/>')
var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df;"><i class="fa fa-check"></i></a>')
bottomDiv.append(confirmEdit)
confirmEdit.click(function() {
if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
var re = /^[a-z0-9]+$/i;
if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
if (true) {
if (countSubstr(grid.html(), 'user-title=\"' + title_input.val() + '\"', false) <= 0) {
add_button(title_input.val(), topic_input.val(), modeCheckbox.prop('checked') ? 2 : 0)
modifyDia.close().remove()
} else
showtext(JSLang[lang].sameUnit)
} else
showtext("")
else
showtext(JSLang[lang].topicLenIllegal)
} else
showtext(JSLang[lang].nameLenIllegal)
})
var cancelEdit = $('<a class="btn btn-danger btn-circle"><i class="fa fa-arrow-left"></i></a>')
cancelEdit.click(function() {
modifyDia.close().remove()
add_widget()
})
bottomDiv.append(cancelEdit)
editForm.append(bottomDiv)
var modifyDia = dialog({
content: editForm[0],
cancel: false
})
modifyDia.showModal()
})
input_button_add2.children("a").click(function() {
d.close().remove()
var editForm = $('<div class="nnt"/>')
editForm.append($('<div style="margin-top:-63px;margin-left:82.5px;margin-bottom:15px;box-shadow: 1px 1px 20px #4e73df;background-color:white;width:75px;height:75px;padding:40px;border-radius:80px;border:solid #4e73df 3px;display:flex;align-items:center;justify-content:center"><img src="icons/input_button2.svg" style="width:45px;"></div>'))
editForm.append($('<h5 style="text-align:center">' + JSLang[lang].unitName + '</h5>'))
var title_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var title_input = $("<input class='form-control form-control-user' style='text-align:center' autofocus='autofocus'/>")
title_input_div.append(title_input)
editForm.append(title_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].messTopic + '</h5>'))
var topic_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var topic_input = $("<input class='form-control form-control-user' style='text-align:center'/>")
topic_input_div.append(topic_input)
topic_input.val("button")
editForm.append(topic_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].feedbackMode + '</h5>'))
var modeButton = $("<label class='switch' style='margin-bottom:0'></label>")
var modeCheckbox = $("<input type='checkbox'>")
modeCheckbox.prop("checked", true)
modeCheckbox.click(function() {
if (modeCheckbox.prop("checked"))
editForm.find("img").attr("src", "icons/input_button2.svg")
else
editForm.find("img").attr("src", "icons/input_button.svg")
})
var modeCheckDiv = $("<div class='slider2 round'></div>")
modeButton.append(modeCheckbox)
modeButton.append(modeCheckDiv)
var modeDiv = $("<div style='display:flex;margin-top:10px;flex-direction:row;align-items:center;justify-content:center'/>")
modeDiv.append($("<span style='font-size:1rem;margin-right:10px;color:#4e73df;font-weight:bold'>" + JSLang[lang].switch+"</span>"))
modeDiv.append(modeButton)
modeDiv.append($("<span style='font-size:1rem;margin-left:10px;color:#e74a3b;font-weight:bold'>" + JSLang[lang].button + "</span>"))
editForm.append(modeDiv)
var bottomDiv = $('<div style="width:100%;margin-top:15px;display:flex;flex-direction:row;align-items:center;justify-content:space-around"/>')
var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df;"><i class="fa fa-check"></i></a>')
bottomDiv.append(confirmEdit)
confirmEdit.click(function() {
if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
var re = /^[a-z0-9]+$/i;
if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
if (true) {
if (countSubstr(grid.html(), 'user-title=\"' + title_input.val() + '\"', false) <= 0) {
add_button(title_input.val(), topic_input.val(), modeCheckbox.prop('checked') ? 2 : 0)
modifyDia.close().remove()
} else
showtext(JSLang[lang].sameUnit)
} else
showtext("")
else
showtext(JSLang[lang].topicLenIllegal)
} else
showtext(JSLang[lang].nameLenIllegal)
})
var cancelEdit = $('<a class="btn btn-danger btn-circle"><i class="fa fa-arrow-left"></i></a>')
cancelEdit.click(function() {
modifyDia.close().remove()
add_widget()
})
bottomDiv.append(cancelEdit)
editForm.append(bottomDiv)
var modifyDia = dialog({
content: editForm[0],
cancel: false
})
modifyDia.showModal()
})
input_slider_add.children("a").click(function() {
d.close().remove()
var editForm = $('<div class="nnt"/>')
editForm.append($('<div style="margin-top:-63px;margin-left:105px;margin-bottom:15px;box-shadow: 1px 1px 20px #4e73df;background-color:white;width:75px;height:75px;padding:40px;border-radius:80px;border:solid #4e73df 3px;display:flex;align-items:center;justify-content:center"><img src="icons/input_slider.svg" style="width:45px;"></div>'))
editForm.append($('<h5 style="text-align:center">' + JSLang[lang].unitName + '</h5>'))
var title_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var title_input = $("<input class='form-control form-control-user' style='text-align:center' autofocus='autofocus'/>")
title_input_div.append(title_input)
editForm.append(title_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].messTopic + '</h5>'))
var topic_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var topic_input = $("<input class='form-control form-control-user' style='text-align:center'/>")
topic_input.val("slider")
topic_input_div.append(topic_input)
editForm.append(topic_input_div)
var bottomDiv = $('<div style="width:100%;margin-top:15px;display:flex;flex-direction:row;align-items:center;justify-content:space-around"/>')
var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df"><i class="fa fa-check"></i></a>')
bottomDiv.append(confirmEdit)
confirmEdit.click(function() {
if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
var re = /^[a-z0-9]+$/i;
if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
if (true) {
if (countSubstr(grid.html(), 'user-title=\"' + title_input.val() + '\"', false) <= 0) {
if (!isNaN(parseFloat(minInput.val())) && !isNaN(parseFloat(maxInput.val())) && !isNaN(parseFloat(paceInput.val())) && (parseFloat(paceInput.val()) > 0) && (parseFloat(maxInput.val()) > parseFloat(minInput.val())) && ((parseFloat(maxInput.val()) - parseFloat(minInput.val())) > parseFloat(paceInput.val()))) {
add_slider(title_input.val(), topic_input.val(), minInput.val() + "," + maxInput.val() + "," + paceInput.val() + "," + minInput.val())
modifyDia.close().remove()
} else {
showtext(JSLang[lang].invalidSlideRange)
}
} else
showtext(JSLang[lang].sameUnit)
} else
showtext("")
else
showtext(JSLang[lang].topicLenIllegal)
} else
showtext(JSLang[lang].nameLenIllegal)
})
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].slideRange + '</h5>'))
var rangeDiv = $("<div style='display:flex;flex-direction:row;align-items:center;justify-content:center'/>")
var minInput = $("<input placeholder='" + JSLang[lang].min + "' class='form-control' style='min-width:70px;width:70px'/>")
rangeDiv.append(minInput)
rangeDiv.append("<span style='margin-left:10px;margin-right:10px'>-</span>")
var maxInput = $("<input placeholder='" + JSLang[lang].max + "' class='form-control' style='min-width:70px;width:70px'/>")
rangeDiv.append(maxInput)
rangeDiv.append($('<span style="margin-left:20px;margin-right:5px">' + JSLang[lang].step + '</span>'))
var paceInput = $("<input placeholder='' class='form-control' style='min-width:70px;width:70px'/>")
rangeDiv.append(paceInput)
editForm.append(rangeDiv)
var cancelEdit = $('<a class="btn btn-danger btn-circle" style="box-shadow:1px 1px 5px #e74a3b"><i class="fa fa-arrow-left"></i></a>')
minInput.val(0)
maxInput.val(10)
paceInput.val(1)
cancelEdit.click(function() {
modifyDia.close().remove()
add_widget()
})
bottomDiv.append(cancelEdit)
editForm.append(bottomDiv)
var modifyDia = dialog({
content: editForm[0],
cancel: false
})
modifyDia.showModal()
})
input_keyboard_add.children("a").click(function() {
d.close().remove()
var editForm = $('<div class="nnt"/>')
editForm.append($('<div style="margin-top:-63px;margin-left:82.5px;margin-bottom:15px;box-shadow: 1px 1px 20px #4e73df;background-color:white;width:75px;height:75px;padding:40px;border-radius:80px;border:solid #4e73df 3px;display:flex;align-items:center;justify-content:center"><img src="icons/input_keyboard.svg" style="width:45px;"></div>'))
editForm.append($('<h5 style="text-align:center">' + JSLang[lang].unitName + '</h5>'))
var title_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var title_input = $("<input class='form-control form-control-user' style='text-align:center' autofocus='autofocus'/>")
title_input_div.append(title_input)
editForm.append(title_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].messTopic + '</h5>'))
var topic_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var topic_input = $("<input class='form-control form-control-user' style='text-align:center'/>")
topic_input.val("keyboard")
topic_input_div.append(topic_input)
editForm.append(topic_input_div)
var bottomDiv = $('<div style="width:100%;margin-top:15px;display:flex;flex-direction:row;align-items:center;justify-content:space-around"/>')
var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df"><i class="fa fa-check"></i></a>')
bottomDiv.append(confirmEdit)
confirmEdit.click(function() {
if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
var re = /^[a-z0-9]+$/i;
if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
if (true) {
if (countSubstr(grid.html(), 'user-title=\"' + title_input.val() + '\"', false) <= 0) {
add_keyboard(title_input.val(), topic_input.val(), "")
modifyDia.close().remove()
} else
showtext(JSLang[lang].sameUnit)
} else
showtext("")
else
showtext(JSLang[lang].topicLenIllegal)
} else
showtext(JSLang[lang].nameLenIllegal)
})
var cancelEdit = $('<a class="btn btn-danger btn-circle" style="box-shadow:1px 1px 5px #e74a3b"><i class="fa fa-arrow-left"></i></a>')
cancelEdit.click(function() {
modifyDia.close().remove()
add_widget()
})
bottomDiv.append(cancelEdit)
editForm.append(bottomDiv)
var modifyDia = dialog({
content: editForm[0],
cancel: false
})
modifyDia.showModal()
})
input_tinydb_add.children("a").click(function() {
d.close().remove()
var editForm = $('<div class="nnt"/>')
editForm.append($('<div style="margin-top:-63px;margin-left:82.5px;margin-bottom:15px;box-shadow: 1px 1px 20px #4e73df;background-color:white;width:75px;height:75px;padding:40px;border-radius:80px;border:solid #4e73df 3px;display:flex;align-items:center;justify-content:center"><img src="icons/database.svg" style="width:45px;"></div>'))
editForm.append($('<h5 style="text-align:center">' + JSLang[lang].unitName + '</h5>'))
var title_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var title_input = $("<input class='form-control form-control-user' style='text-align:center' autofocus='autofocus'/>")
title_input_div.append(title_input)
editForm.append(title_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].messTopic + '</h5>'))
var topic_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var topic_input = $("<input class='form-control form-control-user' style='text-align:center'/>")
topic_input.val("select")
topic_input_div.append(topic_input)
editForm.append(topic_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].options + '</h5>'))
var options_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var options_input = $("<input class='form-control form-control-user' style='text-align:center'/>")
options_input_div.append(options_input)
editForm.append(options_input_div)
var bottomDiv = $('<div style="width:100%;margin-top:15px;display:flex;flex-direction:row;align-items:center;justify-content:space-around"/>')
var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df"><i class="fa fa-check"></i></a>')
bottomDiv.append(confirmEdit)
confirmEdit.click(function() {
if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
var re = /^[a-z0-9]+$/i;
if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
if (true) {
if (countSubstr(grid.html(), 'user-title=\"' + title_input.val() + '\"', false) <= 0) {
add_tinydb(title_input.val(), topic_input.val(), options_input.val())
modifyDia.close().remove()
} else
showtext(JSLang[lang].sameUnit)
} else
showtext("")
else
showtext(JSLang[lang].topicLenIllegal)
} else
showtext(JSLang[lang].nameLenIllegal)
})
var cancelEdit = $('<a class="btn btn-danger btn-circle" style="box-shadow:1px 1px 5px #e74a3b"><i class="fa fa-arrow-left"></i></a>')
cancelEdit.click(function() {
modifyDia.close().remove()
add_widget()
})
bottomDiv.append(cancelEdit)
editForm.append(bottomDiv)
var modifyDia = dialog({
content: editForm[0],
cancel: false
})
modifyDia.showModal()
})
input_mic_add.children("a").click(function() {
d.close().remove()
var editForm = $('<div class="nnt"/>')
editForm.append($('<div style="margin-top:-63px;margin-left:82.5px;margin-bottom:15px;box-shadow: 1px 1px 20px #4e73df;background-color:white;width:75px;height:75px;padding:40px;border-radius:80px;border:solid #4e73df 3px;display:flex;align-items:center;justify-content:center"><img src="icons/mic.svg" style="width:45px;"></div>'))
editForm.append($('<h5 style="text-align:center">' + JSLang[lang].unitName + '</h5>'))
var title_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var title_input = $("<input class='form-control form-control-user' style='text-align:center' autofocus='autofocus'/>")
title_input_div.append(title_input)
editForm.append(title_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].messTopic + '</h5>'))
var topic_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var topic_input = $("<input class='form-control form-control-user' style='text-align:center'/>")
topic_input.val("mic")
topic_input_div.append(topic_input)
editForm.append(topic_input_div)
var bottomDiv = $('<div style="width:100%;margin-top:15px;display:flex;flex-direction:row;align-items:center;justify-content:space-around"/>')
var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df"><i class="fa fa-check"></i></a>')
bottomDiv.append(confirmEdit)
confirmEdit.click(function() {
if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
var re = /^[a-z0-9]+$/i;
if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
if (true) {
if (countSubstr(grid.html(), 'user-title=\"' + title_input.val() + '\"', false) <= 0) {
add_mic(title_input.val(), topic_input.val(), "")
modifyDia.close().remove()
} else
showtext(JSLang[lang].sameUnit)
} else
showtext("")
else
showtext(JSLang[lang].topicLenIllegal)
} else
showtext(JSLang[lang].nameLenIllegal)
})
var cancelEdit = $('<a class="btn btn-danger btn-circle" style="box-shadow:1px 1px 5px #e74a3b"><i class="fa fa-arrow-left"></i></a>')
cancelEdit.click(function() {
modifyDia.close().remove()
add_widget()
})
bottomDiv.append(cancelEdit)
editForm.append(bottomDiv)
var modifyDia = dialog({
content: editForm[0],
cancel: false
})
modifyDia.showModal()
})
input_controller_add.children("a").click(function() {
d.close().remove()
var editForm = $('<div class="nnt"/>')
editForm.append($('<div style="margin-top:-63px;margin-left:82.5px;margin-bottom:15px;box-shadow: 1px 1px 20px #4e73df;background-color:white;width:75px;height:75px;padding:40px;border-radius:80px;border:solid #4e73df 3px;display:flex;align-items:center;justify-content:center"><img src="icons/input_controller.svg" style="width:45px;"></div>'))
editForm.append($('<h5 style="text-align:center">' + JSLang[lang].unitName + '</h5>'))
var title_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var title_input = $("<input class='form-control form-control-user' style='text-align:center' autofocus='autofocus'/>")
title_input_div.append(title_input)
editForm.append(title_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].messTopic + '</h5>'))
var topic_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var topic_input = $("<input class='form-control form-control-user' style='text-align:center'/>")
topic_input.val("controller")
topic_input_div.append(topic_input)
editForm.append(topic_input_div)
var bottomDiv = $('<div style="width:100%;margin-top:15px;display:flex;flex-direction:row;align-items:center;justify-content:space-around"/>')
var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df"><i class="fa fa-check"></i></a>')
bottomDiv.append(confirmEdit)
confirmEdit.click(function() {
if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
var re = /^[a-z0-9]+$/i;
if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
if (true) {
if (countSubstr(grid.html(), 'user-title=\"' + title_input.val() + '\"', false) <= 0) {
add_controller(title_input.val(), topic_input.val())
modifyDia.close().remove()
} else
showtext(JSLang[lang].sameUnit)
} else
showtext("")
else
showtext(JSLang[lang].topicLenIllegal)
} else
showtext(JSLang[lang].nameLenIllegal)
})
var cancelEdit = $('<a class="btn btn-danger btn-circle" style="box-shadow:1px 1px 5px #e74a3b"><i class="fa fa-arrow-left"></i></a>')
cancelEdit.click(function() {
modifyDia.close().remove()
add_widget()
})
bottomDiv.append(cancelEdit)
editForm.append(bottomDiv)
var modifyDia = dialog({
content: editForm[0],
cancel: false
})
modifyDia.showModal()
})
input_rgb_add.children("a").click(function() {
d.close().remove()
var editForm = $('<div class="nnt"/>')
editForm.append($('<div style="margin-top:-63px;margin-left:82.5px;margin-bottom:15px;box-shadow: 1px 1px 20px #4e73df;background-color:white;width:75px;height:75px;padding:40px;border-radius:80px;border:solid #4e73df 3px;display:flex;align-items:center;justify-content:center"><img src="icons/input_rgb.svg" style="width:45px;"></div>'))
editForm.append($('<h5 style="text-align:center">' + JSLang[lang].unitName + '</h5>'))
var title_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var title_input = $("<input class='form-control form-control-user' style='text-align:center' autofocus='autofocus'/>")
title_input_div.append(title_input)
editForm.append(title_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].messTopic + 'R</h5>'))
var Rtopic_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var Rtopic_input = $("<input class='form-control form-control-user' style='text-align:center'/>")
Rtopic_input.val("R")
Rtopic_input_div.append(Rtopic_input)
editForm.append(Rtopic_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].messTopic + 'G</h5>'))
var Gtopic_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var Gtopic_input = $("<input class='form-control form-control-user' style='text-align:center'/>")
Gtopic_input_div.append(Gtopic_input)
Gtopic_input.val("G")
editForm.append(Gtopic_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].messTopic + 'B</h5>'))
var Btopic_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var Btopic_input = $("<input class='form-control form-control-user' style='text-align:center'/>")
Btopic_input.val("B")
Btopic_input_div.append(Btopic_input)
editForm.append(Btopic_input_div)
var bottomDiv = $('<div style="width:100%;margin-top:15px;display:flex;flex-direction:row;align-items:center;justify-content:space-around"/>')
var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df"><i class="fa fa-check"></i></a>')
bottomDiv.append(confirmEdit)
confirmEdit.click(function() {
if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
var re = /^[a-z0-9]+$/i;
if (getByteLen(Rtopic_input.val()) > 0 && getByteLen(Rtopic_input.val()) < 11 && getByteLen(Gtopic_input.val()) > 0 && getByteLen(Gtopic_input.val()) < 11 && getByteLen(Btopic_input.val()) > 0 && getByteLen(Btopic_input.val()) < 11)
if (re.test(Rtopic_input.val()) && re.test(Gtopic_input.val()) && re.test(Btopic_input.val())) {
if (countSubstr(grid.html(), 'user-title=\"' + title_input.val() + '\"', false) <= 0) {
add_rgb(title_input.val(), Rtopic_input.val() + "/" + Gtopic_input.val() + "/" + Btopic_input.val(), '0,0,0')
modifyDia.close().remove()
} else
showtext(JSLang[lang].sameUnit)
} else
showtext("")
else
showtext(JSLang[lang].topicLenIllegal)
} else
showtext(JSLang[lang].nameLenIllegal)
})
var cancelEdit = $('<a class="btn btn-danger btn-circle" style="box-shadow:1px 1px 5px #e74a3b"><i class="fa fa-arrow-left"></i></a>')
cancelEdit.click(function() {
modifyDia.close().remove()
add_widget()
})
bottomDiv.append(cancelEdit)
editForm.append(bottomDiv)
var modifyDia = dialog({
content: editForm[0],
cancel: false
})
modifyDia.showModal()
})
if (!OFFLINE_MODE)
input_weather_add.children("a").click(function() {
d.close().remove()
var editForm = $('<div class="nnt"/>')
editForm.append($('<div style="margin-top:-63px;margin-left:82.5px;margin-bottom:15px;box-shadow: 1px 1px 20px #4e73df;background-color:white;width:75px;height:75px;padding:40px;border-radius:80px;border:solid #4e73df 3px;display:flex;align-items:center;justify-content:center"><img src="icons/input_weather.svg" style="width:45px;"></div>'))
editForm.append($('<h5 style="text-align:center">' + JSLang[lang].unitName + '</h5>'))
var title_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var title_input = $("<input class='form-control form-control-user' style='text-align:center' autofocus='autofocus'/>")
title_input_div.append(title_input)
editForm.append(title_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].messTopic + '</h5>'))
var topic_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var topic_input = $("<input class='form-control form-control-user' style='text-align:center'/>")
topic_input.val("weather")
topic_input_div.append(topic_input)
editForm.append(topic_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].syncInterval + '</h5>'))
var sync_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var sync_input = $("<select class='form-control form-control-user' style='text-align:center;text-align-last:center;appearance:none;'></select>")
sync_input.append($("<option value='0'>" + JSLang[lang].never + "</option>"))
sync_input.append($("<option value='15'>" + JSLang[lang].i15min + "</option>"))
sync_input.append($("<option value='30'>" + JSLang[lang].i30min + "</option>"))
sync_input.append($("<option value='60'>" + JSLang[lang].i60min + "</option>"))
sync_input_div.append(sync_input)
editForm.append(sync_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].sendInterval + '</h5>'))
var send_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var send_input = $("<select class='form-control form-control-user' style='text-align:center;text-align-last:center;appearance:none;'></select>")
send_input.append($("<option value='0'>" + JSLang[lang].never + "</option>"))
send_input.append($("<option value='1'>" + JSLang[lang].i1min + "</option>"))
send_input.append($("<option value='3'>" + JSLang[lang].i3min + "</option>"))
send_input.append($("<option value='5'>" + JSLang[lang].i5min + "</option>"))
send_input.append($("<option value='10'>" + JSLang[lang].i10min + "</option>"))
send_input_div.append(send_input)
editForm.append(send_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].location + '</h5>'))
var province_input = $("<select class='form-control form-control-user' style='text-align:center;text-align-last:center;appearance:none;'></select>")
province_input.append($("<option value='unselected'>" + JSLang[lang].province + "</option>"))
for (district in districts) {
province_input.append($("<option value='" + district + "'>" + districts[district].name + "</option>"))
}
editForm.append(province_input)
var city_input = $("<select class='form-control form-control-user' style='margin-top:5px;text-align:center;text-align-last:center;appearance:none;' disabled></select>")
city_input.append($("<option value='unselected'>" + JSLang[lang].city + "</option>"))
editForm.append(city_input)
province_input.change(function() {
city_input.empty()
city_input.append($("<option value='unselected'>" + JSLang[lang].city + "</option>"))
district_input.empty()
district_input.append($("<option value='unselected'>" + JSLang[lang].district + "</option>"))
district_input.attr('disabled', 'disabled')
if (province_input.val() != "unselected") {
console.log(province_input.val())
for (district in districts[province_input.val()].child) {
city_input.append($("<option value='" + district + "'>" + (districts[province_input.val()].child)[district].name + "</option>"))
}
city_input.removeAttr('disabled')
} else
city_input.attr('disabled', 'disabled')
})
var district_input = $("<select class='form-control form-control-user' style='margin-top:5px;text-align:center;text-align-last:center;appearance:none;' disabled></select>")
district_input.append($("<option value='unselected'>" + JSLang[lang].district + "</option>"))
editForm.append(district_input)
city_input.change(function() {
district_input.empty()
district_input.append($("<option value='unselected'>" + JSLang[lang].district + "</option>"))
if (city_input.val() != "unselected") {
console.log(province_input.val())
for (district in (districts[province_input.val()].child)[city_input.val()].child) {
district_input.append($("<option value='" + district + "'>" + ((districts[province_input.val()].child)[city_input.val()].child)[district] + "</option>"))
}
district_input.removeAttr('disabled')
} else
district_input.attr('disabled', 'disabled')
})
var bottomDiv = $('<div style="width:100%;margin-top:15px;display:flex;flex-direction:row;align-items:center;justify-content:space-around"/>')
var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df"><i class="fa fa-check"></i></a>')
bottomDiv.append(confirmEdit)
confirmEdit.click(function() {
var placecode = province_input.val() == "unselected" ? "unselected" : (city_input.val() == "unselected" ? province_input.val() : (district_input.val() == "unselected" ? city_input.val() : district_input.val()))
if (placecode == "unselected")
showtext(JSLang[lang].locationSet)
else {
if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
var re = /^[a-z0-9]+$/i;
if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
if (true) {
if (countSubstr(grid.html(), 'user-title=\"' + title_input.val() + '\"', false) <= 0) {
add_weather(title_input.val(), topic_input.val(), placecode + "w" + sync_input.val() + "w" + send_input.val())
modifyDia.close().remove()
} else
showtext(JSLang[lang].sameUnit)
} else
showtext("")
else
showtext(JSLang[lang].topicLenIllegal)
} else
showtext(JSLang[lang].nameLenIllegal)
}
})
var cancelEdit = $('<a class="btn btn-danger btn-circle" style="box-shadow:1px 1px 5px #e74a3b"><i class="fa fa-arrow-left"></i></a>')
cancelEdit.click(function() {
modifyDia.close().remove()
add_widget()
})
bottomDiv.append(cancelEdit)
editForm.append(bottomDiv)
var modifyDia = dialog({
content: editForm[0],
cancel: false
})
modifyDia.showModal()
})
output_bulb_add.children("a").click(function() {
d.close().remove()
var editForm = $('<div class="nnt"/>')
editForm.append($('<div style="margin-top:-63px;margin-left:82.5px;margin-bottom:15px;box-shadow: 1px 1px 20px #4e73df;background-color:white;width:75px;height:75px;padding:40px;border-radius:80px;border:solid #4e73df 3px;display:flex;align-items:center;justify-content:center"><img src="icons/output_bulb.svg" style="width:45px;"></div>'))
editForm.append($('<h5 style="text-align:center">' + JSLang[lang].unitName + '</h5>'))
var title_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var title_input = $("<input class='form-control form-control-user' style='text-align:center' autofocus='autofocus'/>")
title_input_div.append(title_input)
editForm.append(title_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].messTopic + '</h5>'))
var topic_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var topic_input = $("<input class='form-control form-control-user' style='text-align:center'/>")
topic_input_div.append(topic_input)
topic_input.val("bulb")
editForm.append(topic_input_div)
var bottomDiv = $('<div style="width:100%;margin-top:15px;display:flex;flex-direction:row;align-items:center;justify-content:space-around"/>')
var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df"><i class="fa fa-check"></i></a>')
bottomDiv.append(confirmEdit)
confirmEdit.click(function() {
if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
var re = /^[a-z0-9]+$/i;
if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
if (true) {
if (countSubstr(grid.html(), 'user-title=\"' + title_input.val() + '\"', false) <= 0) {
add_bulb(title_input.val(), topic_input.val(), 0)
modifyDia.close().remove()
} else
showtext(JSLang[lang].sameUnit)
} else
showtext("")
else
showtext(JSLang[lang].topicLenIllegal)
} else
showtext(JSLang[lang].nameLenIllegal)
})
var cancelEdit = $('<a class="btn btn-danger btn-circle" style="box-shadow:1px 1px 5px #e74a3b"><i class="fa fa-arrow-left"></i></a>')
cancelEdit.click(function() {
modifyDia.close().remove()
add_widget()
})
bottomDiv.append(cancelEdit)
editForm.append(bottomDiv)
var modifyDia = dialog({
content: editForm[0],
cancel: false
})
modifyDia.showModal()
})
timer_add.children("a").click(function() {
d.close().remove()
var editForm = $('<div class="nnt"/>')
editForm.append($('<div style="margin-top:-63px;margin-left:82.5px;margin-bottom:15px;box-shadow: 1px 1px 20px #4e73df;background-color:white;width:75px;height:75px;padding:40px;border-radius:80px;border:solid #4e73df 3px;display:flex;align-items:center;justify-content:center"><img src="icons/timer.svg" style="width:45px;"></div>'))
editForm.append($('<h5 style="text-align:center">' + JSLang[lang].unitName + '</h5>'))
var title_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var title_input = $("<input class='form-control form-control-user' style='text-align:center' autofocus='autofocus'/>")
title_input_div.append(title_input)
editForm.append(title_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].triggerTopic + '</h5>'))
var topic_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var topic_input = $("<input class='form-control form-control-user' style='text-align:center'/>")
topic_input_div.append(topic_input)
topic_input.val("timer")
editForm.append(topic_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].triggerMessage + '</h5>'))
var message_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var message_input = $("<input class='form-control form-control-user' style='text-align:center'/>")
message_input_div.append(message_input)
editForm.append(message_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].triggerInterval + '</h5>'))
var trigger_interval_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var trigger_interval = $("<input type='number' step='100' min='500' max='100000' required class='form-control form-control-user' style='text-align:center'/>")
trigger_interval.val(1000)
trigger_interval_div.append(trigger_interval)
editForm.append(trigger_interval_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].triggerTimes + '</h5>'))
var trigger_times_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var trigger_times = $("<input type='number' step='1' min='0' max='100000' class='form-control form-control-user' style='text-align:center'/>")
trigger_times.val(0)
trigger_times_div.append(trigger_times)
editForm.append(trigger_times_div)
var bottomDiv = $('<div style="width:100%;margin-top:15px;display:flex;flex-direction:row;align-items:center;justify-content:space-around"/>')
var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df"><i class="fa fa-check"></i></a>')
bottomDiv.append(confirmEdit)
confirmEdit.click(function() {
if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
var re = /^[a-z0-9]+$/i;
if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
if (getByteLen(message_input.val()) > 0) {
if (countSubstr(grid.html(), 'user-title=\"' + title_input.val() + '\"', false) <= 0) {
if (parseInt(trigger_interval.val()) && parseInt(trigger_interval.val()) >= 500) {
if (!isNaN(parseInt(trigger_times.val())) && parseInt(trigger_times.val()) >= 0) {
add_timer(title_input.val(), topic_input.val() + "$$$" + message_input.val(), trigger_interval.val() + "," + trigger_times.val())
modifyDia.close().remove()
} else
showtext(JSLang[lang].illegalTimes)
} else
showtext(JSLang[lang].illegalInterval)
} else
showtext(JSLang[lang].sameUnit)
} else
showtext(JSLang[lang].messageLenIllegal)
else
showtext(JSLang[lang].topicLenIllegal)
} else
showtext(JSLang[lang].nameLenIllegal)
})
var cancelEdit = $('<a class="btn btn-danger btn-circle" style="box-shadow:1px 1px 5px #e74a3b"><i class="fa fa-arrow-left"></i></a>')
cancelEdit.click(function() {
modifyDia.close().remove()
add_widget()
})
bottomDiv.append(cancelEdit)
editForm.append(bottomDiv)
var modifyDia = dialog({
content: editForm[0],
cancel: false
})
modifyDia.showModal()
})
trigger_add.children("a").click(function() {
d.close().remove()
var editForm = $('<div class="nnt"/>')
editForm.append($('<div style="margin-top:-63px;margin-left:82.5px;margin-bottom:15px;box-shadow: 1px 1px 20px #4e73df;background-color:white;width:75px;height:75px;padding:40px;border-radius:80px;border:solid #4e73df 3px;display:flex;align-items:center;justify-content:center"><img src="icons/trigger.svg" style="width:45px;"></div>'))
editForm.append($('<h5 style="text-align:center">' + JSLang[lang].unitName + '</h5>'))
var title_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var title_input = $("<input class='form-control form-control-user' style='text-align:center' autofocus='autofocus'/>")
title_input_div.append(title_input)
editForm.append(title_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].srcTopic + '</h5>'))
var topic_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var topic_input = $("<input class='form-control form-control-user' style='text-align:center'/>")
topic_input_div.append(topic_input)
editForm.append(topic_input_div)
topic_input.val("trigger")
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].condition + '1</h5>'))
var condition1_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var condition1_input1 = $("<select class='form-control form-control-user' style='text-align:center;width:120px!important;min-width:120px!important;margin-right:5px'/>")
condition1_input1.append($("<option value='\>'>\></option>"))
condition1_input1.append($("<option value='≥'>\≥</option>"))
condition1_input1.append($("<option value='\<'>\<</option>"))
condition1_input1.append($("<option value='≤'>\≤</option>"))
condition1_input1.append($("<option value='\='>\=</option>"))
condition1_input1.append($("<option value='≠'>≠</option>"))
var condition1_input2 = $("<input class='form-control form-control-user' style='text-align:center;width:120px!important;min-width:120px!important;margin-left:5px'/>")
condition1_input_div.append(condition1_input1)
condition1_input_div.append(condition1_input2)
editForm.append(condition1_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].condition + '2</h5>'))
var condition2_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var condition2_input1 = $("<select class='form-control form-control-user' style='text-align:center;width:120px!important;min-width:120px!important;margin-right:5px'/>")
condition2_input1.append($("<option value='--'>--</option>"))
condition2_input1.append($("<option value='\>'>\></option>"))
condition2_input1.append($("<option value='≥'>\≥</option>"))
condition2_input1.append($("<option value='\<'>\<</option>"))
condition2_input1.append($("<option value='≤'>\≤</option>"))
condition2_input1.append($("<option value='\='>\=</option>"))
condition2_input1.append($("<option value='≠'>≠</option>"))
var condition2_input2 = $("<input disabled class='form-control form-control-user' style='text-align:center;width:120px!important;min-width:120px!important;margin-left:5px'/>")
condition2_input_div.append(condition2_input1)
condition2_input_div.append(condition2_input2)
editForm.append(condition2_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].conditionRelation + '</h5>'))
var condition_relation_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var condition_relation = $("<select class='form-control form-control-user' style='text-align:center'/>")
condition_relation.append($("<option value='AND'>AND</option>"))
condition_relation.append($("<option value='OR'>OR</option>"))
condition_relation.append($("<option value='XOR'>XOR</option>"))
condition_relation_div.append(condition_relation)
editForm.append(condition_relation_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].dstTopic + '</h5>'))
var dstTopic_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var dstTopic_input = $("<input class='form-control form-control-user' style='text-align:center'/>")
dstTopic_input_div.append(dstTopic_input)
editForm.append(dstTopic_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].dstMessage + '</h5>'))
var dstMessage_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var dstMessage_input = $("<input class='form-control form-control-user' style='text-align:center'/>")
dstMessage_input_div.append(dstMessage_input)
editForm.append(dstMessage_input_div)
condition2_input1.bind("change", function() {
if (condition2_input1.val() == "--")
condition2_input2.attr("disabled", "disabled")
else
condition2_input2.removeAttr("disabled")
})
var bottomDiv = $('<div style="width:100%;margin-top:15px;display:flex;flex-direction:row;align-items:center;justify-content:space-around"/>')
var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df"><i class="fa fa-check"></i></a>')
bottomDiv.append(confirmEdit)
confirmEdit.click(function() {
if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
var re = /^[a-z0-9]+$/i;
if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
if (getByteLen(condition1_input2.val()) > 0 && (condition2_input1.val() == "--" || getByteLen(condition2_input2.val()) > 0)) {
if (countSubstr(grid.html(), 'user-title=\"' + title_input.val() + '\"', false) <= 0) {
if (getByteLen(dstTopic_input.val()) > 0) {
if (getByteLen(dstMessage_input.val()) > 0) {
var content = [condition1_input1.val(), condition1_input2.val(), condition2_input1.val(), condition2_input2.val(), condition_relation.val(), dstTopic_input.val(), dstMessage_input.val()].join("$$$")
add_trigger(title_input.val(), topic_input.val(), content)
modifyDia.close().remove()
} else
showtext(JSLang[lang].dstMessageLenIllegal)
} else
showtext(JSLang[lang].dstTopicLenIllegal)
} else
showtext(JSLang[lang].sameUnit)
} else
showtext(JSLang[lang].conditionLenIllegal)
else
showtext(JSLang[lang].topicLenIllegal)
} else
showtext(JSLang[lang].nameLenIllegal)
})
var cancelEdit = $('<a class="btn btn-danger btn-circle" style="box-shadow:1px 1px 5px #e74a3b"><i class="fa fa-arrow-left"></i></a>')
cancelEdit.click(function() {
modifyDia.close().remove()
add_widget()
})
bottomDiv.append(cancelEdit)
editForm.append(bottomDiv)
var modifyDia = dialog({
content: editForm[0],
cancel: false
})
modifyDia.showModal()
})
magic_add.children("a").click(function() {
d.close().remove()
var editForm = $('<div class="nnt"/>')
editForm.append($('<div style="margin-top:-63px;margin-left:82.5px;margin-bottom:15px;box-shadow: 1px 1px 20px #4e73df;background-color:white;width:75px;height:75px;padding:40px;border-radius:80px;border:solid #4e73df 3px;display:flex;align-items:center;justify-content:center"><img src="icons/magic.svg" style="width:45px;"></div>'))
editForm.append($('<h5 style="text-align:center">' + JSLang[lang].unitName + '</h5>'))
var title_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var title_input = $("<input class='form-control form-control-user' style='text-align:center' autofocus='autofocus'/>")
title_input_div.append(title_input)
editForm.append(title_input_div)
editForm.append($('<h5 style="text-align:center;margin-top:15px">' + JSLang[lang].color + '</h5>'))
var color_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var color_select = $('<select class="form-control form-control-user" style="text-align:center"/>')
color_select.append($('<option value="#4e73df">' + JSLang[lang].blue + '</option>'))
color_select.append($('<option value="#1cc88a">' + JSLang[lang].green + '</option>'))
color_select.append($('<option value="#36b9cc">' + JSLang[lang].cyan + '</option>'))
color_select.append($('<option value="#f6c23e">' + JSLang[lang].yellow + '</option>'))
color_select.append($('<option value="#e74a3b">' + JSLang[lang].red + '</option>'))
color_select.append($('<option value="#858796">' + JSLang[lang].gray + '</option>'))
color_input_div.append(color_select)
editForm.append(color_input_div)
var bottomDiv = $('<div style="width:100%;margin-top:15px;display:flex;flex-direction:row;align-items:center;justify-content:space-around"/>')
var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df;"><i class="fa fa-check"></i></a>')
bottomDiv.append(confirmEdit)
confirmEdit.click(function() {
if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
add_magic(title_input.val(), undefined, color_select.val())
modifyDia.close().remove()
}
else
showtext(JSLang[lang].nameLenIllegal)
})
var cancelEdit = $('<a class="btn btn-danger btn-circle"><i class="fa fa-arrow-left"></i></a>')
cancelEdit.click(function() {
modifyDia.close().remove()
add_widget()
})
bottomDiv.append(cancelEdit)
editForm.append(bottomDiv)
var modifyDia = dialog({
content: editForm[0],
cancel: false
})
modifyDia.showModal()
})
output_text_add.children("a").click(function() {
d.close().remove()
var editForm = $('<div class="nnt"/>')
editForm.append($('<div style="margin-top:-63px;margin-left:82.5px;margin-bottom:15px;box-shadow: 1px 1px 20px #4e73df;background-color:white;width:75px;height:75px;padding:40px;border-radius:80px;border:solid #4e73df 3px;display:flex;align-items:center;justify-content:center"><img src="icons/output_text.svg" style="width:45px;"></div>'))
editForm.append($('<h5 style="text-align:center">' + JSLang[lang].unitName + '</h5>'))
var title_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var title_input = $("<input class='form-control form-control-user' style='text-align:center' autofocus='autofocus'/>")
title_input_div.append(title_input)
editForm.append(title_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].messTopic + '</h5>'))
var topic_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var topic_input = $("<input class='form-control form-control-user' style='text-align:center'/>")
topic_input_div.append(topic_input)
topic_input.val("text")
editForm.append(topic_input_div)
var bottomDiv = $('<div style="width:100%;margin-top:15px;display:flex;flex-direction:row;align-items:center;justify-content:space-around"/>')
var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df"><i class="fa fa-check"></i></a>')
bottomDiv.append(confirmEdit)
confirmEdit.click(function() {
if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
var re = /^[a-z0-9]+$/i;
if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
if (true) {
if (countSubstr(grid.html(), 'user-title=\"' + title_input.val() + '\"', false) <= 0) {
add_text(title_input.val(), topic_input.val(), '')
modifyDia.close().remove()
} else
showtext(JSLang[lang].sameUnit)
} else
showtext("")
else
showtext(JSLang[lang].topicLenIllegal)
} else
showtext(JSLang[lang].nameLenIllegal)
})
var cancelEdit = $('<a class="btn btn-danger btn-circle" style="box-shadow:1px 1px 5px #e74a3b"><i class="fa fa-arrow-left"></i></a>')
cancelEdit.click(function() {
modifyDia.close().remove()
add_widget()
})
bottomDiv.append(cancelEdit)
editForm.append(bottomDiv)
var modifyDia = dialog({
content: editForm[0],
cancel: false
})
modifyDia.showModal()
})
table_add.children("a").click(function() {
d.close().remove()
var editForm = $('<div class="nnt"/>')
editForm.append($('<div style="margin-top:-63px;margin-left:82.5px;margin-bottom:15px;box-shadow: 1px 1px 20px #4e73df;background-color:white;width:75px;height:75px;padding:40px;border-radius:80px;border:solid #4e73df 3px;display:flex;align-items:center;justify-content:center"><img src="icons/table.svg" style="width:45px;"></div>'))
editForm.append($('<h5 style="text-align:center">' + JSLang[lang].unitName + '</h5>'))
var title_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var title_input = $("<input class='form-control form-control-user' style='text-align:center' autofocus='autofocus'/>")
title_input_div.append(title_input)
editForm.append(title_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].messTopic + '</h5>'))
var topic_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var topic_input = $("<input class='form-control form-control-user' style='text-align:center'/>")
topic_input_div.append(topic_input)
topic_input.val("table")
editForm.append(topic_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].columns + '</h5>'))
var count_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var count_input = $("<input class='form-control form-control-user' style='text-align:center'/>")
count_input_div.append(count_input)
editForm.append(count_input_div)
count_input.val(JSLang[lang].time + "," + JSLang[lang].value)
var bottomDiv = $('<div style="width:100%;margin-top:15px;display:flex;flex-direction:row;align-items:center;justify-content:space-around"/>')
var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df"><i class="fa fa-check"></i></a>')
bottomDiv.append(confirmEdit)
confirmEdit.click(function() {
if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
var re = /^[a-z0-9]+$/i;
if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
if (true) {
if (countSubstr(grid.html(), 'user-title=\"' + title_input.val() + '\"', false) <= 0) {
if (count_input.val() != "") {
var tmpstr = count_input.val().split(',').length + ',' + count_input.val()
add_table(title_input.val(), topic_input.val(), tmpstr)
modifyDia.close().remove()
} else
showtext(JSLang[lang].columnsSet)
} else
showtext(JSLang[lang].sameUnit)
} else
showtext("")
else
showtext(JSLang[lang].topicLenIllegal)
} else
showtext(JSLang[lang].nameLenIllegal)
})
var cancelEdit = $('<a class="btn btn-danger btn-circle" style="box-shadow:1px 1px 5px #e74a3b"><i class="fa fa-arrow-left"></i></a>')
cancelEdit.click(function() {
modifyDia.close().remove()
add_widget()
})
bottomDiv.append(cancelEdit)
editForm.append(bottomDiv)
var modifyDia = dialog({
content: editForm[0],
cancel: false
})
modifyDia.showModal()
})
output_chart_add.children("a").click(function() {
d.close().remove()
var editForm = $('<div class="nnt"/>')
editForm.append($('<div style="margin-top:-63px;margin-left:82.5px;margin-bottom:15px;box-shadow: 1px 1px 20px #4e73df;background-color:white;width:75px;height:75px;padding:40px;border-radius:80px;border:solid #4e73df 3px;display:flex;align-items:center;justify-content:center"><img src="icons/output_chart.svg" style="width:45px;"></div>'))
editForm.append($('<h5 style="text-align:center">' + JSLang[lang].unitName + '</h5>'))
var title_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var title_input = $("<input class='form-control form-control-user' style='text-align:center' autofocus='autofocus'/>")
title_input_div.append(title_input)
editForm.append(title_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].messTopic + '</h5>'))
var topic_input_div = $('<div style="display:flex;flex-direction:row;align-items:center;margin-bottom:5px"/>')
var topic_input = $("<input class='form-control form-control-user' style='text-align:center;min-width:250px;width:250px'/>")
topic_input.val("chart")
topic_input_div.append(topic_input)
editForm.append(topic_input_div)
var modeButton = $("<label class='switch' style='margin-bottom:0'></label>")
var modeCheckbox = $("<input type='checkbox'>")
var modeCheckDiv = $("<div class='slider2 round'></div>")
modeButton.append(modeCheckbox)
modeButton.append(modeCheckDiv)
var modeDiv = $("<div style='display:flex;margin-top:10px;flex-direction:row;align-items:center;justify-content:center' hidden/>")
modeDiv.append($("<span style='font-size:1rem;margin-right:10px;color:#4e73df;font-weight:bold'></span>"))
modeDiv.append(modeButton)
modeDiv.append($("<span style='font-size:1rem;margin-left:10px;color:#e74a3b;font-weight:bold'></span>"))
editForm.append(modeDiv)
var bottomDiv = $('<div style="width:100%;margin-top:15px;display:flex;flex-direction:row;align-items:center;justify-content:space-around"/>')
var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df;"><i class="fa fa-check"></i></a>')
bottomDiv.append(confirmEdit)
confirmEdit.click(function() {
if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
var re = /^[a-z0-9]+$/i;
if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
if (true) {
if (countSubstr(grid.html(), 'user-title=\"' + title_input.val() + '\"', false) <= 0) {
add_chart(title_input.val(), topic_input.val(), "0" + (modeCheckbox.prop("checked") ? "1" : "0"))
modifyDia.close().remove()
} else
showtext(JSLang[lang].sameUnit)
} else
showtext("")
else
showtext(JSLang[lang].topicLenIllegal)
} else
showtext(JSLang[lang].nameLenIllegal)
})
var cancelEdit = $('<a class="btn btn-danger btn-circle"><i class="fa fa-arrow-left"></i></a>')
cancelEdit.click(function() {
modifyDia.close().remove()
add_widget()
})
bottomDiv.append(cancelEdit)
editForm.append(bottomDiv)
var modifyDia = dialog({
content: editForm[0],
cancel: false
})
modifyDia.showModal()
})
output_bar_add.children("a").click(function() {
d.close().remove()
var editForm = $('<div class="nnt"/>')
editForm.append($('<div style="margin-top:-63px;margin-left:82.5px;margin-bottom:15px;box-shadow: 1px 1px 20px #4e73df;background-color:white;width:75px;height:75px;padding:40px;border-radius:80px;border:solid #4e73df 3px;display:flex;align-items:center;justify-content:center"><img src="icons/output_bar.svg" style="width:45px;"></div>'))
editForm.append($('<h5 style="text-align:center">' + JSLang[lang].unitName + '</h5>'))
var title_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var title_input = $("<input class='form-control form-control-user' style='text-align:center' autofocus='autofocus'/>")
title_input_div.append(title_input)
editForm.append(title_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].messTopic + '</h5>'))
var topic_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var topic_input = $("<input class='form-control form-control-user' style='text-align:center'/>")
topic_input.val("bar")
topic_input_div.append(topic_input)
editForm.append(topic_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].choicesList + '</h5>'))
var option_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var option_input = $("<input class='form-control form-control-user' style='text-align:center'/>")
option_input.val("A,B,C,D")
option_input_div.append(option_input)
editForm.append(option_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].recvMode + '</h5>'))
var modeButton = $("<label class='switch' style='margin-bottom:0'></label>")
var modeCheckbox = $("<input type='checkbox'>")
var modeCheckDiv = $("<div class='slider2 round'></div>")
modeButton.append(modeCheckbox)
modeButton.append(modeCheckDiv)
var modeDiv = $("<div style='display:flex;margin-top:10px;flex-direction:row;align-items:center;justify-content:center'/>")
modeDiv.append($("<span style='font-size:1rem;margin-right:10px;color:#4e73df;font-weight:bold'>" + JSLang[lang].single + "</span>"))
modeDiv.append(modeButton)
modeDiv.append($("<span style='font-size:1rem;margin-left:10px;color:#e74a3b;font-weight:bold'>" + JSLang[lang].multiple + "</span>"))
editForm.append(modeDiv)
var bottomDiv = $('<div style="width:100%;margin-top:15px;display:flex;flex-direction:row;align-items:center;justify-content:space-around"/>')
var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df;"><i class="fa fa-check"></i></a>')
bottomDiv.append(confirmEdit)
confirmEdit.click(function() {
if (option_input.val() != "") {
if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
var re = /^[a-z0-9]+$/i;
if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
if (true) {
if (countSubstr(grid.html(), 'user-title=\"' + title_input.val() + '\"', false) <= 0) {
var optionList = option_input.val().split(',')
var optionCount = optionList.length
for (var ct = 0; ct <= optionCount - 1; ct = ct + 1) {
optionList.push(0)
}
var optionStr = optionList.join(',')
add_bar(title_input.val(), topic_input.val(), "0" + (modeCheckbox.prop("checked") ? "1" : "0") + optionStr)
modifyDia.close().remove()
} else
showtext(JSLang[lang].sameUnit)
} else
showtext("")
else
showtext(JSLang[lang].topicLenIllegal)
} else
showtext(JSLang[lang].nameLenIllegal)
} else
showtext(JSLang[lang].listEmpty)
})
var cancelEdit = $('<a class="btn btn-danger btn-circle"><i class="fa fa-arrow-left"></i></a>')
cancelEdit.click(function() {
modifyDia.close().remove()
add_widget()
})
bottomDiv.append(cancelEdit)
editForm.append(bottomDiv)
var modifyDia = dialog({
content: editForm[0],
cancel: false
})
modifyDia.showModal()
})
output_dashboard_add.children("a").click(function() {
d.close().remove()
var editForm = $('<div class="nnt"/>')
editForm.append($('<div style="margin-top:-63px;margin-left:82.5px;margin-bottom:15px;box-shadow: 1px 1px 20px #4e73df;background-color:white;width:75px;height:75px;padding:40px;border-radius:80px;border:solid #4e73df 3px;display:flex;align-items:center;justify-content:center"><img src="icons/output_dashboard.svg" style="width:45px;"></div>'))
editForm.append($('<h5 style="text-align:center">' + JSLang[lang].unitName + '</h5>'))
var title_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var title_input = $("<input class='form-control form-control-user' style='text-align:center' autofocus='autofocus'/>")
title_input_div.append(title_input)
editForm.append(title_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].messTopic + '</h5>'))
var topic_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var topic_input = $("<input class='form-control form-control-user' style='text-align:center'/>")
topic_input_div.append(topic_input)
topic_input.val("dashboard")
editForm.append(topic_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].displayRange + '</h5>'))
var range_input_div = $('<div style="display:flex;flex-direction:row;align-items:center;justify-content:center"/>')
var min_input = $("<input class='form-control form-control-user' style='text-align:center;min-width:100px!important;width:100px;margin-right:10px'/>")
var max_input = $("<input class='form-control form-control-user' style='text-align:center;min-width:100px!important;width:100px;margin-left:10px'/>")
min_input.val(0)
max_input.val(100)
range_input_div.append(min_input)
range_input_div.append("-")
range_input_div.append(max_input)
editForm.append(range_input_div)
var bottomDiv = $('<div style="width:100%;margin-top:15px;display:flex;flex-direction:row;align-items:center;justify-content:space-around"/>')
var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df"><i class="fa fa-check"></i></a>')
bottomDiv.append(confirmEdit)
confirmEdit.click(function() {
if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
var re = /^[a-z0-9]+$/i;
if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
if (true) {
if (countSubstr(grid.html(), 'user-title=\"' + title_input.val() + '\"', false) <= 0) {
if (parseInt(max_input.val()) - parseInt(min_input.val()) >= 5 && (parseInt(max_input.val()) - parseInt(min_input.val())) % 5 == 0) {
add_dashboard(title_input.val(), topic_input.val(), parseInt(min_input.val()) + "," + parseInt(max_input.val()) + "," + parseInt(min_input.val()))
modifyDia.close().remove()
} else {
showtext(JSLang[lang].mod5)
}
} else
showtext(JSLang[lang].sameUnit)
} else
showtext("")
else
showtext(JSLang[lang].topicLenIllegal)
} else
showtext(JSLang[lang].nameLenIllegal)
})
var cancelEdit = $('<a class="btn btn-danger btn-circle" style="box-shadow:1px 1px 5px #e74a3b"><i class="fa fa-arrow-left"></i></a>')
cancelEdit.click(function() {
modifyDia.close().remove()
add_widget()
})
bottomDiv.append(cancelEdit)
editForm.append(bottomDiv)
var modifyDia = dialog({
content: editForm[0],
cancel: false
})
modifyDia.showModal()
})
if (!OFFLINE_MODE)
output_map_add.children("a").click(function() {
d.close().remove()
var editForm = $('<div class="nnt"/>')
editForm.append($('<div style="margin-top:-63px;margin-left:82.5px;margin-bottom:15px;box-shadow: 1px 1px 20px #4e73df;background-color:white;width:75px;height:75px;padding:40px;border-radius:80px;border:solid #4e73df 3px;display:flex;align-items:center;justify-content:center"><img src="icons/output_map.svg" style="width:45px;"></div>'))
editForm.append($('<h5 style="text-align:center">' + JSLang[lang].unitName + '</h5>'))
var title_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var title_input = $("<input class='form-control form-control-user' style='text-align:center' autofocus='autofocus'/>")
title_input_div.append(title_input)
editForm.append(title_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].messTopic + '</h5>'))
var topic_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var topic_input = $("<input class='form-control form-control-user' style='text-align:center'/>")
topic_input_div.append(topic_input)
topic_input.val("map")
editForm.append(topic_input_div)
var bottomDiv = $('<div style="width:100%;margin-top:15px;display:flex;flex-direction:row;align-items:center;justify-content:space-around"/>')
var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df"><i class="fa fa-check"></i></a>')
bottomDiv.append(confirmEdit)
confirmEdit.click(function() {
if (getByteLen(title_input.val()) > 0 && getByteLen(title_input.val()) < 21) {
var re = /^[a-z0-9]+$/i;
if (getByteLen(topic_input.val()) > 0 && getByteLen(topic_input.val()) < 11)
if (true) {
if (countSubstr(grid.html(), 'user-title=\"' + title_input.val() + '\"', false) <= 0) {
add_map(title_input.val(), topic_input.val(), "")
modifyDia.close().remove()
} else
showtext(JSLang[lang].sameUnit)
} else
showtext("")
else
showtext(JSLang[lang].topicLenIllegal)
} else
showtext(JSLang[lang].nameLenIllegal)
})
var cancelEdit = $('<a class="btn btn-danger btn-circle" style="box-shadow:1px 1px 5px #e74a3b"><i class="fa fa-arrow-left"></i></a>')
cancelEdit.click(function() {
modifyDia.close().remove()
add_widget()
})
bottomDiv.append(cancelEdit)
editForm.append(bottomDiv)
var modifyDia = dialog({
content: editForm[0],
cancel: false
})
modifyDia.showModal()
})
decorate_text_add.children("a").click(function() {
d.close().remove()
var editForm = $('<div class="nnt"/>')
editForm.append($('<div style="margin-top:-63px;margin-left:82.5px;margin-bottom:15px;box-shadow: 1px 1px 20px #4e73df;background-color:white;width:75px;height:75px;padding:40px;border-radius:80px;border:solid #4e73df 3px;display:flex;align-items:center;justify-content:center"><img src="icons/decorate_text.svg" style="width:45px;"></div>'))
editForm.append($('<h5 style="text-align:center">' + JSLang[lang].displayText + '</h5>'))
var text_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var text_input = $("<textarea class='form-control form-control-user' style='text-align:center;width:250px' autofocus='autofocus'/>")
text_input_div.append(text_input)
editForm.append(text_input_div)
var bottomDiv = $('<div style="width:100%;margin-top:15px;display:flex;flex-direction:row;align-items:center;justify-content:space-around"/>')
var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df;"><i class="fa fa-check"></i></a>')
bottomDiv.append(confirmEdit)
confirmEdit.click(function() {
add_decorate_text(undefined, undefined, text_input.val())
modifyDia.close().remove()
})
var cancelEdit = $('<a class="btn btn-danger btn-circle"><i class="fa fa-arrow-left"></i></a>')
cancelEdit.click(function() {
modifyDia.close().remove()
add_widget()
})
bottomDiv.append(cancelEdit)
editForm.append(bottomDiv)
var modifyDia = dialog({
content: editForm[0],
cancel: false
})
modifyDia.showModal()
})
decorate_pic_add.children("a").click(function() {
d.close().remove()
var editForm = $('<div class="nnt"/>')
editForm.append($('<div style="margin-top:-63px;margin-left:82.5px;margin-bottom:15px;box-shadow: 1px 1px 20px #4e73df;background-color:white;width:75px;height:75px;padding:40px;border-radius:80px;border:solid #4e73df 3px;display:flex;align-items:center;justify-content:center"><img src="icons/decorate_pic.svg" style="width:45px;"></div>'))
editForm.append($('<h5 style="text-align:center">' + JSLang[lang].imageURL + '</h5>'))
var text_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var text_input = $("<textarea class='form-control form-control-user' style='text-align:center;width:250px' autofocus='autofocus'/>")
text_input_div.append(text_input)
editForm.append(text_input_div)
editForm.append($('<h5 style="margin-top:15px;text-align:center">' + JSLang[lang].messTopic + '</h5>'))
var topic_input_div = $('<div style="display:flex;flex-direction:row;align-items:center"/>')
var topic_input = $("<input class='form-control form-control-user' style='text-align:center'/>")
topic_input.val("pic")
topic_input_div.append(topic_input)
editForm.append(topic_input_div)
var bottomDiv = $('<div style="width:100%;margin-top:15px;display:flex;flex-direction:row;align-items:center;justify-content:space-around"/>')
var confirmEdit = $('<a class="btn btn-primary btn-circle" style="margin-right:10px;box-shadow:1px 1px 5px #4e73df;"><i class="fa fa-check"></i></a>')
bottomDiv.append(confirmEdit)
confirmEdit.click(function() {
add_decorate_pic(undefined, topic_input.val(), text_input.val())
modifyDia.close().remove()
})
var cancelEdit = $('<a class="btn btn-danger btn-circle"><i class="fa fa-arrow-left"></i></a>')
cancelEdit.click(function() {
modifyDia.close().remove()
add_widget()
})
bottomDiv.append(cancelEdit)
editForm.append(bottomDiv)
var modifyDia = dialog({
content: editForm[0],
cancel: false
})
modifyDia.showModal()
})
var exitdiv = $('<div style="width:100%;text-align:center"></div>')
var exitbutton = $('<a class="btn btn-danger btn-circle btn-lg" style="box-shadow:1px 1px 5px #e74a3b;margin-bottom:-33px"><i class="fa fa-close"></i></a>')
exitdiv.append(exitbutton)
exitbutton.click(function() {
d.close().remove()
})
var content = $("<div/>")
content.append(widget_list)
content.append(exitdiv)
var d = dialog({
'content': content[0],
padding: '5px'
});
d.showModal();
}
function save_layout(exit) {
$("#top_right_icon_3").attr('class', 'fa fa-spin fa-spinner')
var layout_info = grid.html()
var layout_and_time_info = {
'update_time': timeStamp2String(),
'layout_info': stringendecoder.encodeHtml(layout_info)
}
var layout_JSON = JSON.stringify(layout_and_time_info)
var data_JSON = JSON.stringify(globalTableProjectInfo)
globalLogicInfo = {
module: globalXML,
code: stringendecoder.encodeHtml(globalCode)
}
var logic_JSON = JSON.stringify(globalLogicInfo)
$.post('saveProject', { 'layout': layout_JSON, 'dataStorage': data_JSON, 'logicStorage': logic_JSON, 'projectName': globalProjectName, 'projectType': globalProjectType }, function(res) {
if (res == 1) {
if(typeof globalShareKey != 'undefined')
{
$.post('updateShareContent', { 'shareid':globalShareKey, 'projectName': globalProjectName, 'projectLayout':layout_JSON, 'dataStorage': data_JSON, 'logicStorage': logic_JSON }, function(res) {
if(res == 1)
{
$("#top_right_icon_3").attr('class', 'fa fa-save')
showtext(JSLang[lang].saveSuccess)
if (exit)
window.location.href = 'logout'
}
else
{
$("#top_right_icon_3").attr('class', 'fa fa-save')
showtext(JSLang[lang].saveFail + res)
}
})
}
else
{
$("#top_right_icon_3").attr('class', 'fa fa-save')
showtext(JSLang[lang].saveSuccess)
if (exit)
window.location.href = 'logout'
}
} else {
$("#top_right_icon_3").attr('class', 'fa fa-save')
showtext(JSLang[lang].saveFail + res)
}
})
}
function check_link() {
if (!isMixly && connected == SERVER_CONNECTED) {
connectStatusDia.show($("#connect_span")[0]);
check_share_key()
}
}
function delete_project(prjName) {
var d = dialog({
title: JSLang[lang].info,
content: JSLang[lang].confirmDel + "'" + prjName + "'",
button: [{
value: JSLang[lang].confirm,
callback: function() {
var c = dialog({
title: JSLang[lang].info,
content: JSLang[lang].deleting
});
c.showModal();
$.post('deleteProject', { 'projectName': prjName }, function(res) {
if (res == 1) {
c.close().remove()
window.location.href = "projects"
} else {
c.close().remove()
var e = dialog({
title: JSLang[lang].error,
content: JSLang[lang].deleteFail
});
e.showModal();
}
})
}
}, {
value: JSLang[lang].cancel
}]
});
d.showModal();
}
function back_to_list() {
if (client)
client.end()
window.location.href = 'projects'
}
var isBottomBarHidden = false;
function init_layout() {
grid = $("#grid")
grid2 = $("#grid2")
grid3 = $("#grid3")
$("#hideOrShowSwitchBar").click(function() {
if (isBottomBarHidden) {
$("#bottom_2").css("right", "0")
$("#switchChevron").removeClass("fa-chevron-left")
$("#switchChevron").addClass("fa-chevron-right")
isBottomBarHidden = false
} else {
$("#bottom_2").css("right", "calc(-12rem - 30px)")
$("#switchChevron").removeClass("fa-chevron-right")
$("#switchChevron").addClass("fa-chevron-left")
isBottomBarHidden = true
}
})
}
var standardWidth = 100
function get_width() {
fullWidth = window.screen.width
if ((fullWidth - 84) / 3 < 100)
standardWidth = (fullWidth - 84) / 3
}
function listen_project(projectName) {
var modald = showmodaltext("<div style='text-align:center' class='nnt'><i class='fa fa-spin fa-cog' style='font-size:2rem;color:#4e73df'></i><p style='margin-top:6px;margin-bottom:0;color:#4e73df;font-size:1rem;font-weight:bold'>" + JSLang[lang].loading + "</p></div>")
$.get('/startHost', {
'projectName': projectName
}, function(res) {
console.log(res)
var code = JSON.parse(res)["code"]
console.log(code)
modald.close().remove()
if (code == 1) {
window.location.href = window.location.href
} else if (code == -1) {
showtext(JSLang[lang].codeException + ": " + JSON.stringify(JSON.parse(res)["exception"]))
} else if (code == -2)
showtext(JSLang[lang].prj404)
else if (code == -3)
showtext(JSLang[lang].illegalCycle)
})
}
function listenerr_project(projectName, projectType, reason) {
var editForm = $('<div class="nnt" style="width:294px"/>')
editForm.append($('<div style="margin-top:-63px;margin-left:105px;margin-bottom:15px;box-shadow: 1px 1px 20px #4e73df;background-color:white;width:75px;height:75px;padding:40px;border-radius:80px;border:solid #4e73df 3px;display:flex;align-items:center;justify-content:center"><img src="icons/crash.svg" style="width:45px;"></div>'))
editForm.append($('<h3 style="text-align:center;margin-bottom:5px">出错了</h3>'))
editForm.append($('<h6 style="text-align:center;margin-bottom:10px">项目于后台运行期间,发生了如下错误</h6>'))
var p = $("<p></p>")
p.html(reason)
editForm.append(p)
var bottomDiv = $('<div style="width:100%;margin-top:15px;display:flex;flex-direction:row;align-items:center;justify-content:space-around"/>')
var cancelEdit = $('<a class="btn btn-danger btn-circle" style="box-shadow:1px 1px 5px #e74a3b"><i class="fa fa-arrow-left"></i></a>')
cancelEdit.click(function() {
unlisten_project(projectName)
})
bottomDiv.append(cancelEdit)
editForm.append(bottomDiv)
var modifyDia = dialog({
content: editForm[0],
cancel: false
})
modifyDia.showModal()
}
function unlisten_project(projectName) {
var modald = showmodaltext("<div style='text-align:center' class='nnt'><i class='fa fa-spin fa-cog' style='font-size:2rem;color:#4e73df'></i><p style='margin-top:6px;margin-bottom:0;color:#4e73df;font-size:1rem;font-weight:bold'>" + JSLang[lang].loading + "</p></div>")
$.get('/endHost', {
'projectName': projectName
}, function(res) {
modald.close().remove()
if (res == 1) {
window.location.href = window.location.href
} else
showtext("unknown error")
})
}
function add_project() {
var content = $("<div class='nnt'/>")
content.append("<div style='margin-top:-63px;margin-left:82.5px;margin-bottom:15px;box-shadow: 1px 1px 20px #4e73df;background-color:white;width:75px;height:75px;padding:40px;border-radius:80px;border:solid #4e73df 3px;display:flex;align-items:center;justify-content:center'><img src='icons/create_prj.svg' style='width:45px;'></div>");
content.append($("<p style='text-align:center;font-size:1.5rem;margin-bottom:15px'>" + JSLang[lang].createPrj + "</p>"))
var form = $("<form method='post' style='margin:0'>");
content.append(form)
// replace enter key trigger of form
form.keypress(function(e) {
if (e.which == 13) {
e.preventDefault();
submitBt.click()
}
})
var formDiv = $("<div class='col-xs-9'/>")
form.append(formDiv)
var formGrp = $("<div class='form-group'>")
formDiv.append(formGrp)
var prjName = $("<input type='text' class='form-control form-control-user' style='text-align:center' name='projectName' class='form-control' placeholder='" + JSLang[lang].createPrjName + "'/>");
formGrp.append(prjName)
var btDiv = $("<div class='col-xs-3'/>")
var innerBtDiv = $("<div style='display:flex;width:100%;flex-direction:row;align-items:center;justify-content:space-around'/>")
form.append(btDiv)
btDiv.append(innerBtDiv)
var submitBt = $("<a class='btn btn-primary btn-circle' style='box-shadow:1px 1px 5px #4e73df;margin-left:40px'><i class='fa fa-check'></i></a>")
var cancelBt = $("<a class='btn btn-danger btn-circle' style='box-shadow:1px 1px 5px #e74a3b;margin-right:40px'><i class='fa fa-arrow-left'></i></a>")
innerBtDiv.append(submitBt)
innerBtDiv.append(cancelBt)
submitBt.click(function() {
if (prjName.val().length < 3 || prjName.val().length > 10) {
showtext(JSLang[lang].lengthRes)
} else {
submitBt.attr("disabled", "disabled")
$.getJSON('createProject', {
'projectName': prjName.val(),
'projectType': 1
}, function(res) {
if (res == 1) {
window.location.href = "/projects"
} else if (res == 2) {
submitBt.removeAttr("disabled")
showtext(JSLang[lang].prjExist)
} else {
submitBt.removeAttr("disabled")
showtext(JSLang[lang].prjOverflow)
}
})
}
});
var d = dialog({
'content': content[0]
})
cancelBt.click(function() {
d.close().remove()
})
d.showModal();
}
function import_project() {
var content = $("<div class='nnt'/>")
content.append("<div style='margin-top:-63px;margin-left:82.5px;margin-bottom:15px;box-shadow: 1px 1px 20px #4e73df;background-color:white;width:75px;height:75px;padding:40px;border-radius:80px;border:solid #4e73df 3px;display:flex;align-items:center;justify-content:center'><img src='icons/download.svg' style='width:45px;'></div>");
content.append($("<p style='text-align:center;font-size:1.5rem;margin-bottom:15px'>" + JSLang[lang].import+"</p>"))
var form = $("<form method='post' style='margin:0'>");
content.append(form)
var formDiv = $("<div class='col-xs-9'/>")
form.append(formDiv)
var formGrp = $("<div class='form-group'>")
formDiv.append(formGrp)
var prjName = $("<input type='text' class='form-control form-control-user' style='text-align:center' name='projectName' class='form-control' placeholder='" + JSLang[lang].inputAuCode + "'/>");
formGrp.append(prjName)
var btDiv = $("<div class='col-xs-3'/>")
var innerBtDiv = $("<div style='display:flex;width:100%;flex-direction:row;align-items:center;justify-content:space-around'/>")
form.append(btDiv)
btDiv.append(innerBtDiv)
var submitBt = $("<a class='btn btn-primary btn-circle' style='box-shadow:1px 1px 5px #4e73df;margin-left:40px'><i class='fa fa-check'></i></a>")
var cancelBt = $("<a class='btn btn-danger btn-circle' style='box-shadow:1px 1px 5px #e74a3b;margin-right:40px'><i class='fa fa-arrow-left'></i></a>")
innerBtDiv.append(submitBt)
innerBtDiv.append(cancelBt)
submitBt.click(function() {
if (prjName.val().length == 6) {
var modald = showmodaltext("<div style='text-align:center' class='nnt'><i class='fa fa-spin fa-cog' style='font-size:2rem;color:#4e73df'></i><p style='margin-top:6px;margin-bottom:0;color:#4e73df;font-size:1rem;font-weight:bold'>" + JSLang[lang].loading + "</p></div>")
$.get('getShare', {
shareid: prjName.val()
}, function(res) {
modald.close().remove()
if (res == 1) {
window.location.href = window.location.href
} else {
showtext(JSLang[lang].invalidAU)
}
})
} else {
showtext(JSLang[lang].incorrectAU)
}
});
var d = dialog({
'content': content[0]
})
cancelBt.click(function() {
d.close().remove()
})
d.showModal();
}
function add_prjblock(projectName, projectLay, timeStamp, projectType, isTask) {
var itemdiv2 = $("<div class='col-xl-3 col-md-6' style='margin-bottom:1rem'></div>");
var itemdiv = $("<div class='prj_blk'></div>");
var laydiv = $("<div class='laydiv'/>")
var laydiv2 = $("<div class='laydiv2'/>")
var laydiv3 = $("<div class='laydiv3'/>")
itemdiv.append(laydiv)
itemdiv.append(laydiv2)
itemdiv.append(laydiv3)
var modifytime = timeStamp.substr(0, 16)
if (JSON.parse(projectLay.replaceAll(/\\/, "")).update_time)
modifytime = JSON.parse(projectLay).update_time.substr(0, 16)
var bottomdiv = $("<div style='display:flex;flex-direction:row;z-index:3;align-items:center;justify-content:space-between;position:absolute;bottom:0;height:70px;background-color:rgba(78,115,223,0.8);width:100%;border-radius:0 0 0.5rem 0.5rem'/>")
bottomdiv.append('<div style="display:flex;flex-direction:column;margin-left:16px;max-width:calc(100% - 7.5rem - 45px);"><span style="color:white;font-weight:bold;display:block;overflow:hidden;font-size:1.2rem;white-space: nowrap;max-width:50vw;text-overflow: ellipsis;">' + projectName + '</span><span style="color:white;font-size:0.5rem;white-space: nowrap;text-overflow: ellipsis;max-width:50vw;overflow: hidden;"><i class="fa fa-edit" style="margin-right:3px"></i>' + modifytime.substr(0, 16) + '</span></div>')
var bottomButtonDiv = $("<div style='min-width:calc(7.5rem + 35px)'/>")
console.log(isTask)
if (isTask == 0)
bottomButtonDiv.append('<a title="' + JSLang[lang].backRun + '" onclick="listen_project(`' + projectName + '`,`' + projectType + '`)" class="btn btn-primary btn-circle" style="width:2.5rem;height:2.5rem;font-size:1rem;margin-right:10px;z-index:9"><i class="fa fa-cloud-upload"></i></a>')
else if (isTask == 1)
bottomButtonDiv.append('<a title="' + JSLang[lang].stopBackRun + '" onclick="unlisten_project(`' + projectName + '`,`' + projectType + '`)" class="btn btn-danger btn-circle" style="width:2.5rem;height:2.5rem;font-size:1rem;margin-right:10px;z-index:9"><i class="fa fa-stop"></i></a>')
else {
var reason = stringendecoder.encodeHtml(isTask)
bottomButtonDiv.append('<a title="' + JSLang[lang].backRunErr + '" onclick="listenerr_project(`' + projectName + '`,`' + projectType + '`,`' + reason + '`)" class="btn btn-danger btn-circle" style="width:2.5rem;height:2.5rem;font-size:1rem;margin-right:10px;z-index:9"><i class="fa fa-exclamation-triangle"></i></a>')
}
if (isTask == 0)
bottomButtonDiv.append('<a title="' + JSLang[lang].editProper + '" onclick="edit_project(`' + projectName + '`,`' + projectType + '`)" class="btn btn-info btn-circle" style="width:2.5rem;height:2.5rem;font-size:1rem;margin-right:10px;z-index:9"><i class="fa fa-pencil"></i></a>')
else
bottomButtonDiv.append('<a title="' + JSLang[lang].editProper + '" class="btn btn-info btn-circle disabled" style="width:2.5rem;height:2.5rem;font-size:1rem;margin-right:10px;z-index:9"><i class="fa fa-pencil"></i></a>')
if (isTask == 0)
bottomButtonDiv.append('<a title="' + JSLang[lang].viewProject + '" onclick="view_project(`' + projectName + '`,`' + projectType + '`)" class="btn btn-success btn-circle" style="width:2.5rem;height:2.5rem;font-size:1rem;margin-right:15px;z-index:9"><i class="fa fa-arrow-right"></i></a>')
else
bottomButtonDiv.append('<a title="' + JSLang[lang].viewProject + '" class="btn btn-success btn-circle disabled" style="width:2.5rem;height:2.5rem;font-size:1rem;margin-right:15px;z-index:9"><i class="fa fa-arrow-right"></i></a>')
bottomdiv.append(bottomButtonDiv)
itemdiv.append(bottomdiv)
itemdiv2.append(itemdiv)
$("#prjmr").append(itemdiv2)
var lay = $(stringendecoder.decodeHtml(JSON.parse(projectLay).layout_info))
laydiv.html(lay)
for (unit = 0; unit <= lay.length - 1; unit += 1) {
if ($(lay[unit]).attr('user-type') == "output_dashboard") {
var tid = $(lay[unit]).find("canvas").attr('id')
var gauge = new RadialGauge({ renderTo: tid, highlights: [] })
gauge.draw();
var ctt = $(lay[unit]).attr('user-content')
gauge.options.minValue = parseInt(ctt.split(',')[0])
gauge.options.maxValue = parseInt(ctt.split(',')[1])
gauge.value = ctt.split(',')[2]
var max = gauge.options.maxValue
var min = gauge.options.minValue
var step = (gauge.options.maxValue - gauge.options.minValue) / 5
gauge.options.majorTicks = [min, min + step, min + step * 2, min + step * 3, min + step * 4, max]
gauge.update()
}
}
}
var lastPublishTime = [new Date(0), new Date(0), new Date(0), new Date(0), new Date(0), new Date(0), new Date(0), new Date(0), new Date(0), new Date(0), new Date(0), new Date(0), new Date(0), new Date(0), new Date(0), new Date(0), new Date(0), new Date(0), new Date(0), new Date(0)]
var minPublishInterval = 500
function publish(topic, message, omit) {
if (isRunning || omit) {
var newPublishTime = new Date()
if (newPublishTime - lastPublishTime[0] >= minPublishInterval) {
if (!isMixly)
client.publish(globalUserName + '/' + globalProjectName + '/' + topic, message)
else
client.publish('MixIO' + '/' + globalUserName.slice(1) + '/' + globalProjectName + '/' + topic, message)
lastPublishTime.shift()
lastPublishTime.push(new Date())
} else {
showtext(JSLang[lang].speedLimit)
MixIO.log(JSLang[lang].speedLimit)
stop_project()
}
}
}
function propublish(project, topic, message){
var newPublishTime = new Date()
if (newPublishTime - lastPublishTime[0] >= minPublishInterval) {
if (!isMixly)
client.publish(globalUserName + '/' + project + '/' + topic, message)
else
client.publish('MixIO' + '/' + globalUserName.slice(1) + '/' + project + '/' + topic, message)
lastPublishTime.shift()
lastPublishTime.push(new Date())
} else {
showtext(JSLang[lang].speedLimit)
MixIO.log(JSLang[lang].speedLimit)
stop_project()
}
}
var exit = function() {
activeExit = true
save_layout(true)
}
class CustomCategory extends Blockly.ToolboxCategory {
// 自定义类别创造函数
// categoryDef: 类别定义的信息
// toolbox: 表示类别的父级toolbox
// opt_parent: 可选参数,表示其父类别
constructor(categoryDef, toolbox, opt_parent) {
super(categoryDef, toolbox, opt_parent);
}
addColourBorder_(colour) {
super.addColourBorder_(colour);
// this.rowDiv_.style.backgroundColor = 'unset';
this.iconDom_.style.color = colour;
}
setSelected(isSelected) {
super.setSelected(isSelected);
if (isSelected) {
// 设置icon的颜色和文本颜色相同
this.iconDom_.style.color = 'white'; // ====本次新增代码====
} else {
// 设置icon的颜色和文本颜色相同
this.iconDom_.style.color = this.colour_; // ====本次新增代码====
}
}
}
var customTheme = function() {
Blockly.registry.register(
Blockly.registry.Type.TOOLBOX_ITEM,
Blockly.ToolboxCategory.registrationName,
CustomCategory, true);
}
var uploadProjects = function() {
var editForm = $('<div class="nnt" style="width:294px"/>')
editForm.append($('<div style="margin-top:-63px;margin-left:105px;margin-bottom:15px;box-shadow: 1px 1px 20px #4e73df;background-color:white;width:75px;height:75px;padding:40px;border-radius:80px;border:solid #4e73df 3px;display:flex;align-items:center;justify-content:center"><img src="icons/transfer.svg" style="width:45px;"></div>'))
editForm.append($('<h3 style="text-align:center;margin-bottom:5px">' + JSLang[lang].importData + '</h3>'))
editForm.append($('<h6 style="text-align:center;margin-bottom:10px">' + JSLang[lang].importDataWarning + '</h6>'))
var bottomDiv = $('<div style="width:100%;margin-top:15px;display:flex;flex-direction:row;align-items:center;justify-content:space-around"/>')
var confirmEdit = $('<a class="btn btn-success btn-circle" style="box-shadow:1px 1px 5px #1cc88a"><i class="fa fa-check"></i></a>')
var cancelEdit = $('<a class="btn btn-danger btn-circle" style="box-shadow:1px 1px 5px #e74a3b"><i class="fa fa-arrow-left"></i></a>')
var fileInput = $('<input type="file" accept=".json" style="border:solid black 1px;min-width:0!important;width:294px"/>')
var fileContent = ""
editForm.append(fileInput)
fileInput.bind('change', function() {
if (fileInput[0].files.length == 1) {
var resultFile = fileInput[0].files[0]
var reader = new FileReader()
reader.readAsText(resultFile, 'UTF-8')
reader.onload = function(e) {
fileContent = e.target.result
}
}
})
confirmEdit.click(function() {
var dataJSON = JSON.parse(fileContent)
var mustKeys = ["userName", "projectName", "projectType", "projectLayout", "dataStorage", "logicStorage", "timestamp"]
var isLegal = true
for (i in dataJSON) {
for (j in mustKeys) {
if (!(mustKeys[j] in dataJSON[i]))
isLegal = false
}
}
if (!isLegal) {
showtext(JSLang[lang].invalidContent)
return
}
var modald = showmodaltext("<div style='text-align:center'><i class='fa fa-spin fa-cog' style='font-size:2rem;color:#4e73df'></i><p style='margin-top:6px;margin-bottom:0;color:#4e73df;font-size:1rem;font-weight:bold'>" + JSLang[lang].loading + "</p></div>")
var insertOne = function(index) {
$.post("importProjects", {
"projectName": dataJSON[index]["projectName"],
"projectType": dataJSON[index]["projectType"],
"projectLayout": dataJSON[index]["projectLayout"],
"dataStorage": dataJSON[index]["dataStorage"],
"logicStorage": dataJSON[index]["logicStorage"]
}, function(res) {
if (res == 3)
showtext(JSLang[lang].prjOverflow)
else if (res != 1)
showtext("Unknown error")
if (res != 1 || index == dataJSON.length - 1) {
modald.close().remove()
window.location.href = window.location.href
} else
insertOne(index + 1)
})
}
insertOne(0)
})
cancelEdit.click(function() {
modifyDia.close().remove()
})
bottomDiv.append(confirmEdit)
bottomDiv.append(cancelEdit)
editForm.append(bottomDiv)
var modifyDia = dialog({
content: editForm[0],
cancel: false
})
modifyDia.showModal()
return false;
}
var exportProjects = function() {
var modald = showmodaltext("<div style='text-align:center'><i class='fa fa-spin fa-cog' style='font-size:2rem;color:#4e73df'></i><p style='margin-top:6px;margin-bottom:0;color:#4e73df;font-size:1rem;font-weight:bold'>" + JSLang[lang].loading + "</p></div>")
$.getJSON('exportProjects', function(res) {
modald.close().remove()
if (res != -1) {
var exportRes = []
for (i in res) {
exportRes.push({
"dataStorage": res[i].dataStorage,
"logicStorage": res[i].logicStorage,
"projectLayout": res[i].projectLayout,
"projectName": res[i].projectName,
"projectType": res[i].projectType,
"userName": res[i].userName,
"timestamp": res[i].timestamp
})
}
// dialog, 允许用户选择导出哪些项目
var editForm = $('<div class="nnt" style="width:294px"/>')
editForm.append($('<div style="margin-top:-63px;margin-left:105px;margin-bottom:15px;box-shadow: 1px 1px 20px #4e73df;background-color:white;width:75px;height:75px;padding:40px;border-radius:80px;border:solid #4e73df 3px;display:flex;align-items:center;justify-content:center"><img src="icons/transfer.svg" style="width:45px;"></div>'))
editForm.append($('<h3 style="text-align:center;margin-bottom:5px">' + arrLang[lang].EXPORT + '</h3>'))
// 选择导出项目多选input选项为所有项目的projectName
var checkBoxes = $('<div style="display:flex;flex-direction:column;max-height:200px;overflow:auto"/>')
for (i in exportRes) {
var checkbox = $('<input type="checkbox" style="width:20px;height:20px;min-width:0!important;min-height:0!important;margin:10px" id="' + exportRes[i].projectName + '"/>')
var label = $('<label style="color:black;font-size:1rem;padding-top:2px" for="' + exportRes[i].projectName + '">' + exportRes[i].projectName + '</label>')
// 默认选中
checkbox.prop("checked", true)
checkBoxes.append($('<div style="display:flex;flex-direction:row;align-items:center;"/>').append(checkbox).append(label))
}
editForm.append(checkBoxes)
var bottomDiv = $('<div style="width:100%;margin-top:15px;display:flex;flex-direction:row;align-items:center;justify-content:space-around"/>')
var confirmEdit = $('<a class="btn btn-success btn-circle" style="box-shadow:1px 1px 5px #1cc88a"><i class="fa fa-check"></i></a>')
var cancelEdit = $('<a class="btn btn-danger btn-circle" style="box-shadow:1px 1px 5px #e74a3b"><i class="fa fa-arrow-left"></i></a>')
bottomDiv.append(confirmEdit)
bottomDiv.append(cancelEdit)
editForm.append(bottomDiv)
var modifyDia = dialog({
content: editForm[0],
cancel: false
})
modifyDia.showModal()
confirmEdit.click(function() {
var eleLink = document.createElement('a');
eleLink.download = "backup.json";
eleLink.style.display = 'none';
var selectedProjects = []
for (i in exportRes) {
if ($("#" + exportRes[i].projectName).prop("checked"))
selectedProjects.push(exportRes[i].projectName)
}
var selectedData = []
for (i in exportRes) {
if (selectedProjects.includes(exportRes[i].projectName))
selectedData.push(exportRes[i])
}
var blob = new Blob([JSON.stringify(selectedData, null, 4)]);
eleLink.href = URL.createObjectURL(blob);
document.body.appendChild(eleLink);
eleLink.click();
document.body.removeChild(eleLink);
modifyDia.close().remove()
})
cancelEdit.click(function() {
modifyDia.close().remove()
})
} else
showtext("Unknown Error")
})
}