BuildEcho/web/index.html

304 lines
10 KiB
HTML
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.

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
body {
border-top: 1px solid #FFF2F2F2;
}
/*---滚动条默认显示样式--*/
.custom-scroll-bar::-webkit-scrollbar-thumb {
background-color: #018EE8;
height: 50px;
outline-offset: -2px;
outline: 2px solid #fff;
-webkit-border-radius: 4px;
border: 2px solid #fff;
}
/*---鼠标点击滚动条显示样式--*/
.custom-scroll-bar::-webkit-scrollbar-thumb:hover {
background-color: #FB4446;
height: 50px;
-webkit-border-radius: 4px;
}
/*---滚动条大小--*/
.custom-scroll-bar::-webkit-scrollbar {
width: 8px;
height: 8px;
}
/*---滚动框背景样式--*/
.custom-scroll-bar::-webkit-scrollbar-track-piece {
background-color: #fff;
-webkit-border-radius: 0;
}
.custom-scroll-bar::-webkit-scrollbar-thumb:active {
height: 50px;
background-color: #000;
-webkit-border-radius: 4px;
}
.wrap {
/* border: 1px solid #006DB7; */
overflow: hidden;
}
.wrap:hover {
overflow-y: auto;
}
.yu-alert {
margin: 0;
width: auto;
}
.yu-header {
background-color: antiquewhite;
}
.yu-sidebar {
background-color: #FFFFFFFF;
}
.yu-content {
background-color: #FFFFFFFF;
border-left: 1px solid #FFF2F2F2;
}
.web-container {}
#log_output_ctrl {
width: -webkit-calc(100% - 5px);
height: 100%;
}
</style>
<body>
<div class="yu-layout">
<div class="yu-layout-inline">
<div class="yu-sidebar custom-scroll-bar wrap">
<div class="yu-alert primary" style="width:200px"><i class="iconfont icon-tag"></i>项目名</div>
<div class="web-container">
<div id="menu" class="yu-menu light vertical">
<!--菜单、子菜单-->
</div>
</div>
</div>
<div class="yu-layout-block">
<div id="header-title" class="yu-alert primary">···</div>
<div class="yu-button-group">
<button id="new" class="yu-button primary plain" onclick="generateCompileCommand(this.id)">new</button>
<button id="app" class="yu-button primary plain" onclick="generateCompileCommand(this.id)">app</button>
<button id="simulator" class="yu-button primary plain" onclick="generateCompileCommand(this.id)">simulator</button>
<button id="resource" class="yu-button primary plain" onclick="generateCompileCommand(this.id)">resource</button>
<button id="sim-res" class="yu-button primary plain" onclick="generateCompileCommand(this.id)">simulator + resource</button>
</div>
<div class="yu-input">
<input id="build-input" value="ping baidu.com" type="text" class="append"
style="width:-webkit-calc(100% - 90px);" placeholder="编译命令">
<button class="yu-button append primary" style="width:90px" onclick="goBuild()">Build</button>
</div>
<div id="log_output_ctrl"></div>
<div class="yu-alert primary"><i class="iconfont icon-check-circle"></i>
Hello<p style="float:right; margin:0;">World</p>
</div>
</div>
</div>
</div>
</body>
<script src="./js/index.js"></script>
<script src="./js/ace/ace.js" type="text/javascript" charset="utf-8"></script>
<!-- log窗口初始化log回显 -->
<script type="text/javascript">
var logOutputCtrl = ace.edit("log_output_ctrl");
logOutputCtrl.setTheme("ace/theme/terminal"); // 设置主题
logOutputCtrl.getSession().setMode("ace/mode/log"); // 设置程序语言模式
logOutputCtrl.setReadOnly(false); // 设置只读
logOutputCtrl.renderer.setShowGutter(false); // 设置行号
logOutputCtrl.setShowPrintMargin(false); // 设置打印边距
logOutputCtrl.setHighlightActiveLine(false); // 设置选中高亮
logOutputCtrl.setOption("wrap", "free"); // 自动换行free:开off:关
document.getElementById('log_output_ctrl').style.fontSize='14px';
function insertAtTheEndOfEditor(string) {
var customPosition = {
row: logOutputCtrl.session.getLength(),
column: 0
};
logOutputCtrl.session.insert(customPosition, string);
logOutputCtrl.renderer.scrollToLine(Number.POSITIVE_INFINITY)
}
goBuild = async () => {
var sBuildCommandValue = document.getElementById("build-input").value;
if (null == sBuildCommandValue) {
return false;
}
console.log(sBuildCommandValue)
await cmdSpecial(sBuildCommandValue);
}
</script>
<!-- 菜单初始化 -->
<script type="text/javascript">
function generateCompileCommand(compileType) {
var str = document.getElementById("header-title").innerText;
if ("···" == str) {
return;
}
async function checkPlatform() {
return await isT117();
}
checkPlatform().then(result=>insertCommandStr(result))
function insertCommandStr(isT117) {
var sCommand;
var project = str.match("project_(.*?).mk")[1];
if ("new" == compileType) {
sCommand = "make p=" + project + " new job=8 -j4";
}
if ("app" == compileType) {
sCommand = "make p=" + project + " m=app image update job=8 -j4";
}
if ("simulator" == compileType) {
sCommand = "make p=" + project + " m=simulator job=8 -j4";
}
if ("resource" == compileType) {
sCommand = "make p=" + project + " m=resource job=8 -j4";
}
if ("sim-res" == compileType) {
sCommand = "make p=" + project + " m=simulator job=8 -j4 && ";
sCommand += "make p=" + project + " m=resource job=8 -j4";
}
if (isT117){
sCommand = sCommand.replace(/app/g,"app_main");
sCommand = sCommand.replace(/simulator/g,"simulator_main");
sCommand = sCommand.replace(/resource/g,"resource_main");
}
document.getElementById("build-input").value = sCommand;
}
}
function addEventListener2Menu(){
var menuActivedSub = -1;
var menuItemActivedSub = -1;
var menus = document.querySelectorAll('.vertical .menu-title');
var menuItems = document.querySelectorAll('.sub-menu .menu-item');
function menuShow(e) {
var menuHeight = e.currentTarget.nextElementSibling.getElementsByClassName("menu-item").length * 40;
e.currentTarget.classList.toggle('active', true);
e.currentTarget.nextElementSibling.style.height = menuHeight + 'px';
e.currentTarget.getElementsByClassName("iconfont")[0].classList.toggle('icon-f-text', false);
e.currentTarget.getElementsByClassName("iconfont")[0].classList.toggle('icon-eye', true);
}
function menuHide() {
menus[menuActivedSub].classList.toggle('active', false);
menus[menuActivedSub].nextElementSibling.style.height = '0';
menus[menuActivedSub].getElementsByClassName("iconfont")[0].classList.toggle('icon-f-text', true);
menus[menuActivedSub].getElementsByClassName("iconfont")[0].classList.toggle('icon-eye', false);
}
Array.from(menus).forEach((item) => {
item.addEventListener('click', function(e) {
if (-1 == menuActivedSub) {
//显示当前点击的菜单
menuShow(e);
} else if (-1 != menuActivedSub && e.currentTarget.classList.contains("active")) {
//隐藏之前显示的菜单
menuHide();
} else if (-1 != menuActivedSub) {
//隐藏之前显示的菜单
menuHide();
//显示当前点击的菜单
menuShow(e);
} else {
alert("菜单显示/隐藏逻辑错误!");
}
//记录当前为显示状态的菜单下标
for (var i = 0; i < menus.length; i++) {
if (item == menus[i]) {
menuActivedSub = i;
}
}
})
})
Array.from(menuItems).forEach((item) => {
item.addEventListener('click', function(e) {
//选中当前点击的菜单子项
e.currentTarget.classList.add('active');
//隐藏非当前点击的、上一次选中的菜单子项
if (-1 != menuItemActivedSub && e.currentTarget != menuItems[menuItemActivedSub]) {
menuItems[menuItemActivedSub].classList.remove("active");
}
document.getElementById("header-title").innerText = e.currentTarget.id;
//记录当前为选中状态的菜单子项下标
for (var i = 0; i < menuItems.length; i++) {
if (item == menuItems[i]) {
menuItemActivedSub = i;
return;
}
}
})
})
}
async function createMenus() {
var allPrjName = await getAllPrjName();
var para = document.getElementById("menu");
for(i in allPrjName){
var menu = ``;
var menu_item = ``;
var allMakefile = await getAllMakefile(allPrjName[i]);
for(j in allMakefile){
var makefilePath = await getMakefilePath(allMakefile[j]);
var marketName = await getMarketName(allMakefile[j]);
menu_item += `<div id="`+ makefilePath +`" class="menu-item" style="padding-left: 30px">`+ marketName +`</div>`;
}
menu += `
<div class="sub-menu">
<div class="menu-title"><i class="iconfont icon-f-text"></i>`+ allPrjName[i] +`
<i class="iconfont icon-angle-down"></i></div>
<div class="sub-menu" style="height: 0;overflow: hidden">
`;
menu += menu_item;
menu += `
</div>
</div>
`;
para.innerHTML += menu;
}
return "Create menus done."
}
createMenus().then(result=>addEventListener2Menu())
</script>
</html>