706 lines
34 KiB
HTML
706 lines
34 KiB
HTML
<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">×</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">×</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">×</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>
|
||
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> |