<!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>