mirror of
https://github.com/alibaba/anyproxy.git
synced 2025-04-22 23:31:25 +00:00
209 lines
6.4 KiB
HTML
209 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Anyproxy</title>
|
|
<link rel="stylesheet" href="/css/uikit.gradient.min.css" />
|
|
<link rel="stylesheet" href="/css/page.css" />
|
|
<link rel="icon" type="image/png" href="/favico.png" />
|
|
<script charset="utf-8" id="seajsnode"src="http://static.alipayobjects.com/seajs/??seajs/2.2.0/sea.js,seajs-combo/1.0.1/seajs-combo.js,seajs-style/1.0.2/seajs-style.js"></script>
|
|
|
|
</head>
|
|
<body>
|
|
<div class="topHead">
|
|
<h1>Anyproxy - Settings</h1>
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<h3>Current Rules</h3>
|
|
<hr>
|
|
<div class="list sectionWrapper">
|
|
<ul class="uk-list uk-list-line uk-list-space J_listWrapper">
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<h3>Add new rule</h3>
|
|
<hr>
|
|
<div class="content sectionWrapper">
|
|
<form class="uk-form uk-form-stacked J_infoForm">
|
|
<div class="uk-form-row">
|
|
<label class="uk-form-label" for="form-s-it">Name</label>
|
|
<div class="uk-form-controls">
|
|
<input type="text" name="name" required placeholder="rule name">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="uk-form-row">
|
|
<label class="uk-form-label" for="form-s-it">URL keywords</label>
|
|
<div class="uk-form-controls">
|
|
<input type="text" class="uk-form-width-large" name="urlKey" placeholder="api.sample.com/apiA">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="uk-form-row">
|
|
<label class="uk-form-label" for="form-s-ip">Body keywords</label>
|
|
<div class="uk-form-controls">
|
|
<input type="text" class="uk-form-width-large" name="reqBodyKey" placeholder="some keywords in request body">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="uk-form-row">
|
|
<label class="uk-form-label" for="form-s-t">using Response Body</label>
|
|
<div class="uk-form-controls">
|
|
<textarea cols="70" rows="8" name="localResponse" placeholder="replace response with data"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="uk-form-row">
|
|
<button class="uk-button J_addBtn" type="button">add</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<style type="text/css">
|
|
.removeBtn{
|
|
display: inline-block;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.sectionWrapper{
|
|
padding: 0px 20px 20px;
|
|
}
|
|
</style>
|
|
|
|
<script type="text/template" id="listItemTpl">
|
|
<li>
|
|
<strong>{{name}}</strong> <a href="#" class="J_remove removeBtn" ruleId="{{id}}">(remove)</a><br>
|
|
{{urlKey}} {{reqBodyKey}}
|
|
<br>{{localResponse}}
|
|
</li>
|
|
</script>
|
|
|
|
|
|
<script type="text/javascript">
|
|
seajs.config({
|
|
base: 'http://static.alipayobjects.com/',
|
|
alias: {
|
|
'$' : 'jquery/jquery/1.7.2/jquery',
|
|
'Backbone' : 'gallery/backbone/1.1.2/backbone.js',
|
|
'Underscore': 'gallery/underscore/1.6.0/underscore.js'
|
|
}
|
|
});
|
|
|
|
seajs.use(['$','Underscore' ,'Backbone'], function($, _ ,Backbone) {
|
|
|
|
|
|
function dataMgmt(){
|
|
var self = this,
|
|
currentID = 0,
|
|
SAVING_KEY = "anyproxy_local",
|
|
currentLSString = localStorage.getItem(SAVING_KEY),
|
|
currentData = currentLSString ? JSON.parse(currentLSString) : [];
|
|
|
|
//init currentID
|
|
currentData.map(function(item){
|
|
currentID = (item.id >= currentID ? item.id + 1 : currentID);
|
|
});
|
|
|
|
_.extend(self, Backbone.Events);
|
|
|
|
self.data = currentData;
|
|
|
|
self.add = function(data){
|
|
data.id = currentID;
|
|
++currentID;
|
|
currentData.push(data);
|
|
updateLS();
|
|
}
|
|
|
|
self.remove = function(targetId){
|
|
currentData.map(function(item,index){
|
|
if(parseInt(item.id) == parseInt(targetId)){
|
|
currentData.splice(index,1);
|
|
}
|
|
});
|
|
updateLS();
|
|
}
|
|
|
|
self.syncToServer = function(cb){
|
|
$.post("/update",JSON.stringify(currentData),cb);
|
|
}
|
|
|
|
function updateLS(){
|
|
localStorage.setItem(SAVING_KEY,JSON.stringify(currentData));
|
|
self.syncToServer(function(){
|
|
self.trigger("update");
|
|
});
|
|
}
|
|
}
|
|
|
|
//config.model
|
|
function ruleViewController(config){
|
|
var self = this,
|
|
wrapper = config.wrapper,
|
|
liTpl = config.liTpl,
|
|
model = config.model;
|
|
|
|
self.render = function(data){
|
|
return substitute(liTpl,data);
|
|
}
|
|
|
|
model.on("update",function(data){
|
|
window.location.reload();
|
|
});
|
|
|
|
//init
|
|
model.data.map(function(item){
|
|
wrapper.append(self.render(item));
|
|
console.log(item);
|
|
});
|
|
}
|
|
|
|
var dataMgmtInstance = new dataMgmt();
|
|
dataMgmtInstance.syncToServer();
|
|
|
|
var ruleView = new ruleViewController({
|
|
model : dataMgmtInstance,
|
|
wrapper : $(".J_listWrapper"),
|
|
liTpl : $("#listItemTpl").html()
|
|
});
|
|
|
|
$(".J_addBtn").on("click",function(e){
|
|
e.preventDefault();
|
|
var info = $(".J_infoForm").serializeArray();
|
|
var finalData = {};
|
|
info.map(function(item){
|
|
finalData[item.name] = item.value;
|
|
});
|
|
|
|
dataMgmtInstance.add(finalData);
|
|
});
|
|
|
|
$(".J_listWrapper").on("click",function(e){
|
|
var srcNode = $(e.srcElement);
|
|
if(srcNode.hasClass("J_remove")){
|
|
var id = srcNode.attr("ruleId");
|
|
dataMgmtInstance.remove(parseInt(id));
|
|
}
|
|
});
|
|
|
|
function substitute(str, object, regexp){
|
|
return String(str).replace(regexp || (/\{\{([^{}]+)\}\}/g), function(match, name){
|
|
if (match.charAt(0) == '\\') return match.slice(1);
|
|
return (object[name] != null) ? object[name] : '';
|
|
});
|
|
};
|
|
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html>
|
|
|