bdcontract-web-ide/OnlineIDE_en.html

706 lines
34 KiB
HTML
Raw Normal View History

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Cache-Control" content="no-cache"/>
<title>BDWare-DOA Online IDE</title>
<script src="./jqueryui1.12/jquery-2.1.4.js"></script>
<link href="./jqueryui1.12/jquery-ui.css" rel="stylesheet">
<script src="./jqueryui1.12/jquery-ui.js"></script>
<script src="./jqueryui1.12/jquery.ui.position.js"></script>
<script src="./js/createWS.js"></script>
<script src="./js/cryptico.js"></script>
<script src="./js/commonutil.js"></script>
<script src="./js/popper.min.js"></script>
<script src="js/codemirror/lib/codemirror.js"></script>
<link rel="stylesheet" href="js/codemirror/lib/codemirror.css">
<link rel="stylesheet" href="js/codemirror/lib/ayu-mirage.css">
<script src="js/codemirror/addon/edit/matchbrackets.js"></script>
<script src="js/codemirror/addon/comment/continuecomment.js"></script>
<script src="js/codemirror/addon/comment/comment.js"></script>
<link rel="stylesheet" href="js/codemirror/addon/hint/show-hint.css">
<script src="js/codemirror/addon/hint/show-hint.js"></script>
<script src="js/codemirror/mode/clike/clike.js"></script>
<script src="js/codemirror/mode/javascript/javascript.js"></script>
<script src="js/codemirror/mode/css/css.js"></script>
<script src="js/codemirror/mode/xml/xml.js"></script>
<script src="js/codemirror/lib/format.js"></script>
<script src="js/onlineide/staticAnalysis.js"></script>
<link href="./css/staticAnalysis.css" rel="stylesheet">
<script src="./js/bootstrap.min.js"></script>
<script src="./js/echarts.min.js"></script>
<script src="./js/echartsTheme.js"></script>
<script src="./js/echarts-gl.min.js"></script>
<script src="./js/sm2.js"></script>
<script src="./jqueryui1.12/jquery.contextMenu.js"></script>
<link href="./jqueryui1.12/jquery.contextMenu.min.css" rel="stylesheet">
<script src="./js/OnlineIDE.js"></script>
<script src="./js/onlineide/leftmenu_en.js"></script>
<script src="./js/onlineide/rightmenu_en.js"></script>
<script src="./js/onlineide/projectman.js"></script>
<script src="./js/vue.js"></script>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/loading.css">
<link rel="stylesheet" href="./css/common.css">
<style>
.projectButton {
width: 100%;
}
.projectButton.ui-state-active {
background: #2E324C;
color: white;
}
.projectTreeDiv {
width: 100%;
}
.outputNav {
overflow-yyyy: scroll;
}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
color: white;
background-color: #2E324C;
border-color: #2E324C;
}
.ui-tabs {
padding: 0;
}
.ui-accordion .ui-accordion-content {
padding: 0;
}
.ui-tabs .ui-tabs-panel {
padding: 0;
}
.ui-menu-item.ui-state-active:hover {
background: #2E324C;
color: white;
border: 1px solid #999;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active,
a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
background: #2E324C;
color: white;
border: 1px solid #999;
}
.context-menu-root {
z-index: 10;
}
.fileLine {
user-select: none;
}
.fileLine:hover {
background: #2E324C;
color: white;
cursor: pointer;
}
#expand:hover {
cursor: pointer;
}
</style>
</head>
<body>
<header
class="headerFooter navbar navbar-default navbar-fixed-top navColor ">
<div class="col-4">
<a class="navbar-brand" href="#"> <img alt="Brand"
src="./images/logo-1.png" style="height: 30px">
</a> <span>BDWare-DOA Online IDE</span><input id="uploadFileInput" type="file"
name="file" multiple onchange="uploadFile()"
style="display: none;">
</div>
<div class="nav navbar-right userName" data-toggle="modal"
data-target="#pubkeyDialog">Welcome, {{shortName}}
</div>
</header>
<div class="container-fluid" id="main">
<div class="row h-100">
<div class="col-2 h-100" id="horiNav">
<div class="container-fluid d-flex flex-column h-100">
<div class="row">
<div class="col-12" style="padding: 0">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item"><a class="nav-link active"
id="publicprojecttab" data-toggle="tab" role="tab"
aria-controls="publicproject" aria-selected="true"
href="#publicproject" onclick="updateGlobalProject()">Public</a>
</li>
<li class="nav-item"><a class="nav-link"
id="privateprojecttab" data-toggle="tab" role="tab"
aria-selected="false" aria-controls="privateproject"
href="#privateproject" onclick="updateGlobalProject()">Private</a>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="input-group mt-1 mb-3">
<button class="btn btn-block btn-outline-primary" type="button"
id="button-addon2" onclick="createProject()">New Project +
</button>
</div>
</div>
<div class="row"
style="flex: 1 1 auto; overflow-y: auto; overflow-x: hidden;">
<div class="col-sm-12 h-100 "
style="overflow-y: scroll; overflow-x: hidden">
<div class="row">
<div class="col-12" style="padding: 0; overflow-x: visible">
<div class="tab-content">
<div class="tab-pane fade show active" role="tabpanel"
class="row" aria-labelledby="publicprojecttab"
id="publicproject">
<div id="publicprojectAccordion" class="accordion"></div>
</div>
<div class="tab-pane fade" id="privateproject" role="tabpanel"
class="row" aria-labelledby="privateprojecttab" style="">
<div id="privateprojectAccordion" class="accordion"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-8 h-100" style="padding: 0;" id="mainBox">
<div class="container-fluid d-flex flex-column h-100">
<div class="row mt-1">
<div class="col-sm-12">
<div class="btn-toolbar" role="toolbar"
aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group"
aria-label="First group">
<button type="button" class=" btn btn-outline-primary"
data-toggle="tooltip" title="Save" onclick="saveFile()">
<img alt="Brand" src="./images/onlineide/save.png"
class="buttonimg">
</button>
<button type="button" class=" btn btn-outline-primary"
data-toggle="tooltip" title="Format"
onclick="formatScriptEditor()">
<img alt="Brand" src="./images/onlineide/formatter.png"
class="buttonimg">
</button>
<button type="button" class=" btn btn-outline-primary"
data-toggle="tooltip" title="Static Analyze" onclick="staticVerify()"
onclick22="showAnalysis()">
<img alt="Brand" src="./images/onlineide/find.png"
class="buttonimg">
</button>
</div>
<div class="btn-group mr-2" role="group"
aria-label="First group">
<!-- <button type="button" class=" btn btn-outline-primary"
data-toggle="tooltip" title="gasPrice" onclick="saveFile()">
<img alt="Brand" src="./images/onlineide/price.png"
class="buttonimg">
</button>
<button type="button" class=" btn btn-outline-primary"
data-toggle="tooltip" title="gasLimit">
<img alt="Brand" src="./images/onlineide/price.png"
class="buttonimg">
</button> -->
</div>
</div>
</div>
</div>
<div class="row mt-1">
<div class="col-sm-12">
<ul class="nav nav-tabs .bg-primary" id="myFileTab"
role="tablist">
<li class="nav-item" v-for="(item,index) in openedFiles"><a
class="nav-link" data-toggle="tab" t role="tab"
onclick="clickTab(this)" :path='item.path'><span
data-toggle="tooltip">{{item.name}}</span><img alt="Brand"
class="closeimg ml-2"
src="./images/onlineide/close.png"
onclick="closeTab(this)"
:path='item.path'/></a></li>
</ul>
</div>
</div>
<div id="box" style="overflow:auto; height:100%">
<div id="contractCode" class="row flex-grow-1 h-100">
<div id="textareaDiv" class="col-sm-12" style="width: 100%; height: 100%">
<textarea id="scriptEditor" style="width: 100%; height: 100%"
class="form-control "></textarea>
</div>
</div>
<div id="resize"
style="height: 5px; display: none; background-color: lightgrey; cursor: s-resize"></div>
<div id="analysis" class="col-sm-12" style="display: none; height: 50%">
<div class="input-group mt-1 mb-1">
<select class="custom-select " id="selectContract"
aria-label="Example select with button addon"
style="appearance: none" onchange="selectContract()">
<option selected>Select Instance</option>
<option v-for="(item,index) in contracts" :key="index"
:value='index'>{{item.name}}
</option>
</select>
</div>
<div class="input-group mb-1">
<select class="custom-select" style="appearance: none"
id="selectFunction">
<option selected>Select Function</option>
<option v-for="(item,index) in contractFunctions" :key="index"
:value='index'>{{item.functionName}}
</option>
</select>
</div>
<div>
<form id="form" method="post">
数据使用约束类型</br>
<input name="open" type="checkbox" value="open"/>数据直接开放
<input name="byValue" type="checkbox" value="byValue"/>数据值传递依赖开放
<input name="control" type="checkbox" value="control"/>数据控制依赖开放
<input name="close" type="checkbox" value="close"/>数据不开放
</br>
数据源</br>
<input name="originalData" type="checkbox" value="originalData"/>原始数据
<input name="contractCall" type="checkbox" value="contractCall"/>调用
</br>
<input class="btn btn-outline-primary" type="image" onclick="staticAnalysis()"
title="执行静态分析" src="./images/onlineide/execute.png" width="50px"
height="40px">
<button class="btn btn-outline-primary" type="button" onclick="downloadAnalysis()"
title="下载分析报告">
<img src="./images/onlineide/download.png" class="buttonimg"/>
</button>
</form>
</div>
<div class="row">
<div class="col-sm-12">
控制流图:<span id="svg-control-name"> </span>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<textarea id="svg-control" class="form-control"
style="width: 100%; height: 200px;"></textarea>
</div>
</div>
<div class="row">
<div class="col-sm-12 mt-3">
分析结果:
<textarea id="ret" class="form-control"
style="width: 100%; height: 200px;"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-2 h-100"
style="transient: width 2s, height 2s, background-color 2s, transform 2s;"
id="outputNav">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item"><span id="expand" class="mr-3"
onclick="expandOrCollapse()">Expand</span></li>
<li class="nav-item"><a class="nav-link active"
id="deploy-tab" data-toggle="tab" href="#deploy" role="tab"
aria-controls="deploy" aria-selected="true">Deploy</a></li>
<li class="nav-item"><a class="nav-link" id="execute-tab"
data-toggle="tab" href="#execute" role="tab"
aria-controls="execute" aria-selected="false"
onclick="initResponseAndOutputArea()">Execute</a></li>
</ul>
<div class="tab-content outputNav" id="myTabContent">
<div class="tab-pane fade show active" id="deploy" role="tabpanel"
aria-labelledby="deploy-tab">
<div class="input-group mt-1 mb-1">
<select class="custom-select" style="appearance: none"
v-model="pubDialogVue.selectedSM2Key">
<option v-for="(item,index) in pubDialogVue.sm2KeyList"
:key="index" :value='item.id'>{{item.title}}
</option>
</select>
</div>
<div class="input-group mb-1">
<select class="custom-select " id="selectedProject"
aria-label="Example select with button addon"
style="appearance: none">
<option v-for="(item,index) in projects" :key="index"
:value='index'>{{item}}
</option>
</select>
</div>
<div class="input-group mt-1">
<button class="btn btn-block btn-outline-primary"
onclick="startContract()" type="button" id="button-addon2"
title="Start" data-toggle="tooltip">
<img alt="Brand" src="./images/onlineide/start.png"
class="buttonimg">
</button>
</div>
<div class="input-group mt-1 mb-3">
<span id="startResult"> </span>
</div>
<div class="input-group mb-1">
<select class="custom-select " id="selectedContract"
aria-label="Example select with button addon"
style="appearance: none">
<option v-for="(item,index) in contracts" :key="index"
:value='index'>{{item.name}}
</option>
</select>
<div class="input-group-append">
<button type="button" class="btn btn-outline-primary"
title="Preview" data-toggle="tooltip" onclick="openInClient()">
<img alt="Brand" src="./images/onlineide/preview.png"
class="buttonimg">
</button>
<button type="button" class="btn btn-outline-primary"
title="Stop Current Instance" data-toggle="tooltip" onclick="stopContract()">
<img alt="Brand" src="./images/onlineide/kill.png"
class="buttonimg">
</button>
</div>
</div>
<div class="input-group mb-1">
<div class="btn-group btn-block" role="group">
<button class="btn btn-outline-primary" type="button"
id="button-addon2" title="Refresh Instance List" onclick="listContracts()"
data-toggle="tooltip">
<img src="./images/onlineide/refresh.png" class="buttonimg"/>
</button>
<button type="button" class="btn btn-outline-primary"
data-toggle="tooltip" onclick="stopAllContract()"
title="Stop All Instances">
<img alt="Brand" src="./images/onlineide/stop.png"
class="buttonimg">
</button>
<button type="button" class="btn btn-outline-primary"
title="Query DOI of Current Instance" data-toggle="tooltip"
onclick="queryContractInstanceDOI()">DOI
</button>
</div>
</div>
<div class="input-group mt-1 mb-3">
<span id="stopResult"> </span>
</div>
<div class="input-group mb-1"></div>
<div class="input-group mb-3">
<input type="text" class="form-control"
id="contractInstanceDOIInput" placeholder="Instance DOI"></input>
<div class="input-group-append">
<button class="btn btn-outline-primary"
onclick="queryContractInstanceInfoByDOI()" type="button" data-toggle="tooltip"
title="Query Instance Infomation" id="button-addon2">Query
</button>
</div>
<div class="input-group-append">
<button class="btn btn-outline-primary"
onclick="importContractInstanceCodeByDOI()" type="button" data-toggle="tooltip"
title="Import Instance Code" id="button-addon2">Import
</button>
</div>
</div>
<div class="row">
<div class="col-sm-12">
Result<span id="contractInstanceInfoTitle"> </span>
</div>
</div>
<div class="row">
<div class="col-sm-12" id="contractInstanceInfoAreaDiv">
<textarea id="contractInstanceInfoArea" class="form-control"
style="width: 100%; height: 150px;"></textarea>
</div>
</div>
</div>
<div class="tab-pane fade" id="execute" role="tabpanel"
aria-labelledby="execute-tab">
<div class="input-group mt-1 mb-1">
<select class="custom-select " id="selectedContractAtExecute"
aria-label="Example select with button addon"
style="appearance: none" onchange="selectContractToExecute()">
<option selected>Select Instance</option>
<option v-for="(item,index) in contracts" :key="index"
:value='index'>{{item.name}}
</option>
</select>
</div>
<div class="input-group mb-1">
<select class="custom-select" style="appearance: none"
id="selectedFunction">
<option selected>Select Function</option>
<option v-for="(item,index) in contractFunctions" :key="index"
:value='index'>{{item.functionName}}
</option>
</select>
</div>
<div class="input-group mb-3">
<input type="text" class="form-control"
id="executeContractArgInput" placeholder="Fill in Parameters"></input>
<div class="input-group-append">
<button class="btn btn-outline-primary"
onclick="executeContract()" type="button" data-toggle="tooltip"
title="Invoke" id="button-addon2">
<img src="./images/onlineide/execute.png" class="buttonimg"/>
</button>
</div>
<div class="input-group-append">
<button class="btn btn-outline-primary"
onclick="executeContractWithDynamicResult()" type="button"
data-toggle="tooltip" title="Dynamic Analyze" id="button-addon2">
<img src="./images/onlineide/analysis.png" class="buttonimg"/>
</button>
</div>
<div class="input-group-append">
<button class="btn btn-outline-primary"
onclick="testEvaluates()" type="button"
data-toggle="tooltip" title="Estimate Gas" id="button-addon2">
<img src="./images/onlineide/budget.png" class="buttonimg"/>
</button>
</div>
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" id="gasLimit" placeholder="Please input gas limit."
aria-label="maximum gas to be used" aria-describedby="button-addon2">
<!-- <div cldialogBodyDivass="input-group-append">-->
<!-- <button class="btn btn-outline-primary"-->
<!-- onclick="getGasValue()" type="button"-->
<!-- data-toggle="tooltip" title="提交gas值" id="button-addon2">确定-->
<!-- </button>-->
<!-- </div>-->
</div>
<div class="row">
<div class="col-sm-12">
Result<span id="executeResultTitle"> </span>
</div>
</div>
<div class="row">
<div class="col-sm-12" id="responseAreaDiv">
<textarea id="responseArea" class="form-control"
style="width: 100%; height: 200px;"></textarea>
</div>
</div>
<div class="row">
<div class="col-sm-12 mt-3" id="outputStreamAreaDiv">
Console Output
<textarea id="outputStreamArea" class="form-control"
style="width: 100%; height: 200px;"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 用于配置sm2密钥的对话框 -->
<div class="modal fade" id="pubkeyDialog" tabindex="-1" role="dialog"
aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">User Infomation</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="row" style="padding-left: 16px; padding-right: 16px">
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="localKeyList">Local Public Key</label>
</div>
<select class="custom-select"
aria-label="Example select with button addon"
style="appearance: none" v-model="selectedSM2Key"
@change="changeSM2Key($event)">
<option v-for="(item,index) in sm2KeyList" :key="index"
:value='item.id'>{{item.title}}
</option>
</select>
<div class="input-group-append">
<button class="btn btn-outline-primary" for="localKeyList"
v-on:click="exportPubkey">Export Public Key
</button>
</div>
<div class="input-group-append">
<button class="btn btn-outline-danger" for="localKeyList"
v-on:click="deletePubkey">Delete Public Key
</button>
</div>
</div>
</div>
<div class="row" style="padding-left: 16px; padding-right: 16px">
<div class="input-group mb-1">
<div class="input-group-prepend">
<label class="input-group-text" for="localKeyList">Current SM2 Keypair</label>
</div>
<input type="text" class="form-control" placeholder="(Please copy and keep it properly)"
disabled="disabled" aria-label=""
aria-describedby="basic-addon1">
<div class="input-group-append">
<button type="button" class="btn btn-outline-primary"
id="generatePubkeyBtn" v-on:click="generatePubkey">Generate New Public Key
</button>
<button type="button" class="btn btn-outline-primary"
data-dismiss="modal" id="importPubkeyBtn"
v-on:click="importPubkey">Import Public Key
</button>
</div>
</div>
</div>
<textarea class="form-control mb-3" title="Copy the Keys (Please keep it properly.)"
id="sm2KeyTextarea" v-model="sm2KeyStr"
style="width: 100%; min-height: 150px" rows="" cols="">
</textarea>
<div class="row" style="padding-left: 16px; padding-right: 16px;">
</div>
<div class="row" style="padding-left: 16px; padding-right: 16px">
<span>My Roles{{myRole}}</span>
</div>
<div class="input-group">
<select id="inputGroupSelect04" v-model="test"
class="custom-select" style="appearance: none"
@change="changeProduct($event)">
<option v-for="(item,index) in productList" :key="index"
:value='item.id'>{{item.title}}
</option>
</select>
<div class="input-group-append">
<button class="btn btn-outline-primary" type="button"
v-on:click="applyRole">Apply Role
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true"
class="d-flex justify-content-center align-items-center"
style="dispaly: none; min-height: 200px; position: absolute; top: 30%; left: 40%;"
aria-hidden="true">
<!-- Then put toasts within -->
<div id="alertDiv" class="toast" role="alert" data-delay="3000"
aria-live="assertive" aria-atomic="true" style="min-width: 200px">
<div class="toast-header">
<strong class="mr-auto">{{toastTitle}}</strong>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast"
aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="toast-body">{{toastMessage}}</div>
</div>
</div>
<div class="modal fade" id="dialog" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="dialogTitleH5">Modal title</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body" id="dialogBodyDiv">...</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary"
id="dialogCloseBtn" data-dismiss="modal">Close
</button>
<button type="button" id="dialogConfimBtn"
class="btn btn-outline-primary" data-dismiss="modal">Confirm
</button>
</div>
</div>
</div>
</div>
<footer class="headerFooter" footermt-autopy-3>
<div class="row">
<div style="padding-left: -10px;" class="col-2">©2018-2020</div>
<div style="" class="col-6" id="hashDisplayDiv"></div>
<div style="" class="col-4">
Icons made by <a href="https://www.flaticon.com/authors/monkik"
title="monkik" style="color: white;">monkik</a> and <a
href="https://www.flaticon.com/authors/those-icons"
title="Those Icons" style="color: white;">Those Icons</a> from <a
href="https://www.flaticon.com/" title="Flaticon"
style="color: white;">www.flaticon.com</a>
</div>
</div>
</footer>
<script>
2021-06-16 16:33:32 +00:00
const isBaaS = false
var h = document.body.clientHeight
- $("header").css("height").replace("px", "")
- $("footer").css("height").replace("px", "");
$("#main").css("height", h + "px");
init();
//initWSocket();
</script>
</body>
</html>