p05617423
/
bench4q
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

finish one device editor display

This commit is contained in:
fanfuxiaoran 2014-05-09 10:34:00 +08:00
parent c33737587c
commit 11e61c546c
5 changed files with 127 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
Bench4Q-Web/src/main/webapp/css/script-editor.css
View File

@ -13,9 +13,9 @@ button {
border: 1px solid #d5d5d5;
color: #212121;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
box-shadow:3px 3px 3px #888888;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.containerBox .header {
@ -36,15 +36,21 @@ button {
padding-right: 30px;
padding-top: 10px;
padding-bottom: 10px;
}
.editor div {
tr,thead {
width: 100%;
}
th,td {
padding: 10px;
}
td input {
text-align: center;
width: 100%;
}
.editor td input {
width: 100%;
}
@ -54,6 +60,7 @@ td input {
margin-top: 10px;
background: #e6f1f6;
}
.editor button {
margin-top: 10px;
}

18
Bench4Q-Web/src/main/webapp/device.jsp
View File

@ -9,6 +9,15 @@
<link href="lib/chrisma/css/charisma-app.css" rel="stylesheet">
<link href="css/script-editor.css" rel="stylesheet">
<link rel="shortcut icon" href="images/bench4q.png">
<style type="text/css">
body {
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
</style>
</head>
<body>
@ -16,9 +25,12 @@
<div class="container-fluid">
<div class="row-fluid">
<jsp:include page="publiccontrol/leftmenubar.jsp"></jsp:include>
<div id="content" class="span10" id="devices">
<button type="button" class="btn btn-primary " id="add-device">add</button>
<button type="button" class="btn btn-primary " id="del-device">remove</button>
<div class="span10">
<div id="devices"></div>
<div class="center">
<button type="button" class="btn btn-primary " id="add-device">add</button>
<button type="button" class="btn btn-primary " id="del-device">remove</button>
</div>
</div>
</div>
</div>

2
Bench4Q-Web/src/main/webapp/lib/chrisma/css/bootstrap-cerulean.css vendored
View File

@ -1260,7 +1260,7 @@ legend + .control-group {
padding-left: 160px;
}
table {
max-width: 100%;
width: 100%;
background-color: transparent;
border-collapse: collapse;
border-spacing: 0;

72
Bench4Q-Web/src/main/webapp/script/device/EditorFactory.js
View File

@ -1,6 +1,6 @@
var EditorFactory=function(){};
EditorFactory.prototype.createBaseEditor=function(label, id) {
var EditorFactory = function() {
};
EditorFactory.prototype.createBaseEditor = function(label, id) {
if (label == null) {
label = "";
}
@ -19,21 +19,26 @@ EditorFactory.prototype.createBaseEditor=function(label, id) {
return containerBox;
}
EditorFactory.prototype.createField=function(label, name, size, id) {
EditorFactory.prototype.createField = function(label, name, size, id) {
var div = this.createBaseEditor(label, id);
$(div).children(".editor").append(this.createFieldLine(size, name));
return div;
}
EditorFactory.prototype.createMultiField=function(label, name, size, id) {
var div =this. createField(label, name, size, id);
var editorFactory=this;
EditorFactory.prototype.createMultiField = function(label, name, size, id) {
var div = this.createField(label, name, size, id);
var editorFactory = this;
var addFieldButton = document.createElement("button");
$(addFieldButton).html("add")
$(addFieldButton).attr("type", "submit");
$(addFieldButton).click({editorFactory:editorFactory},function(event) {
event.preventDefault()
$(event.data.editorFactory.createFieldLine(size, name)).insertBefore($(this));
});
$(addFieldButton).click(
{
editorFactory : editorFactory
},
function(event) {
event.preventDefault()
$(event.data.editorFactory.createFieldLine(size, name))
.insertBefore($(this));
});
var removeFieldButton = document.createElement("button");
$(removeFieldButton).html("remove")
$(removeFieldButton).attr("type", "submit");
@ -46,8 +51,7 @@ EditorFactory.prototype.createMultiField=function(label, name, size, id) {
return div;
}
EditorFactory.prototype.createFieldLine=function(size, name) {
EditorFactory.prototype.createFieldLine = function(size, name) {
if (size == null || size <= 0) {
size = 150;
}
@ -61,7 +65,7 @@ EditorFactory.prototype.createFieldLine=function(size, name) {
$(fieldDiv).append(fieldName.outerHTML + field.outerHTML);
return fieldDiv;
}
EditorFactory.prototype.createFile=function(label, name, size, id) {
EditorFactory.prototype.createFile = function(label, name, size, id) {
if (size == null || size <= 0) {
size = 150;
}
@ -81,7 +85,7 @@ EditorFactory.prototype.createFile=function(label, name, size, id) {
}
EditorFactory.prototype.createTable=function(label, name, cols, id) {
EditorFactory.prototype.createTable = function(label, name, cols, id) {
var div = this.createBaseEditor(label, id);
var headers = getHeaders(cols);
$(div).children(".editor").append(createTable(cols, name, headers));
@ -89,12 +93,13 @@ EditorFactory.prototype.createTable=function(label, name, cols, id) {
$(addButton).html("add");
$(addButton).click(
{
headers : headers
headers : headers,
fieldName : name
},
function(event) {
event.preventDefault();
$(this).parent().children("table").children("tbody").append(
createTr(event.data.headers));
createTr(event.data.headers, event.data.fieldName));
});
var deleteButton = document.createElement("button");
$(deleteButton).html("remove");
@ -136,19 +141,23 @@ EditorFactory.prototype.createTable=function(label, name, cols, id) {
for ( var i = 0; i < headers.length; i++) {
var th = document.createElement("th");
$(th).append(document.createTextNode(headers[i]));
$(th).attr("style", "width:" + 100 / headers.length + "%")
$(tr).append(th);
}
return tr;
}
function createTr(headers, name) {
var tr = document.createElement("tr");
var td = document.createElement("td");
$(td).attr("style", "width:" + 100 / headers.length + "%")
$(td).html(name + ":");
$(tr).append(td);
for ( var i = 1; i < headers.length; i++) {
var input = document.createElement("input");
$(input).attr("type", "text");
var td = document.createElement("td");
$(td).attr("style", "width:" + 100 / headers.length + "%")
$(td).append(input);
$(tr).append(td);
}
@ -157,15 +166,15 @@ EditorFactory.prototype.createTable=function(label, name, cols, id) {
}
}
EditorFactory.prototype.createSelect=function(label, name, size, options, id) {
EditorFactory.prototype.createSelect = function(label, name, size, options, id) {
if (size == null || size <= 0) {
size = 150;
}
if(options==null||options.length<=0){
alert("no options in:"+name);
}
if (options == null || options.length <= 0) {
alert("no options in:" + name);
}
var div = this.createBaseEditor(label, id);
var nameLabel = document.createElement("label");
$(nameLabel).html(name + ":");
@ -181,7 +190,7 @@ EditorFactory.prototype.createSelect=function(label, name, size, options, id) {
$(div).children(".editor").append(select);
return div;
}
EditorFactory.prototype.createDate=function(label, name, size, id) {
EditorFactory.prototype.createDate = function(label, name, size, id) {
if (size == null || size < 0) {
size = 150
@ -198,19 +207,22 @@ EditorFactory.prototype.createDate=function(label, name, size, id) {
}
function createContainer(id, name) {
var edtiorFactory=new EditorFactory();
var edtiorFactory = new EditorFactory();
var div = document.createElement("div");
$(div).attr("id", id);
$(div).append(edtiorFactory.createMultiField("test", "name", 150, "test"));
$(div).append(edtiorFactory.createFile("file", "file name", 150, "file"));
$(div).append(edtiorFactory.createField("field", "field name", 150, "field"));
$(div).append(edtiorFactory.createTable("table", "input", "td1;td1;td3", "id"));
$(div).append(edtiorFactory.createSelect("select", "select", 150, [ 1, 2, 3 ], "oo"));
$(div).append(
edtiorFactory.createField("field", "field name", 150, "field"));
$(div).append(
edtiorFactory.createTable("table", "input", "td1;td1;td3", "id"));
$(div).append(
edtiorFactory.createSelect("select", "select", 150, [ 1, 2, 3 ],
"oo"));
$(div).append(edtiorFactory.createDate("date", "date", 150, "dateid"));
return div;
}
$(function() {
$(function() {
$('#test').append(createContainer("test", "test"));
$('#test').append(createContainer("test", "test"));
});

102
Bench4Q-Web/src/main/webapp/script/device/device.js
View File

@ -1,73 +1,76 @@
var Device = function(editorUnit) {
this.deviceTypes = [ "1", "2", "3" ];
}
};
Device.prototype.createDeviceEditor = function(header, id, editorUnit) {
var deviceContainer = this.createEditorContainer(header, id, editorUnit);
return deviceContainer;
}
};
Device.prototype.createEditorContainer = function(header, id, containerInfo) {
var container = document.createElement("div");
$(container).addClass("containerBox");
if (id != null) {
$(container).attr("id", id);
}
var header = document.createElement("p");
$(header).html(header);
$(container).append(header);
if (containerInfo.paramInfoModels = null) {
this.appendEdtiors($(container), containerInfo.paramTypeModel);
} else {
for ( var i = 0; i < containerInfo.length; i++) {
var containerHeader = document.createElement("p");
$(containerHeader).addClass("header");
$(containerHeader).html(header);
$(container).append(containerHeader);
$(container).append(containerInfo[i].name, null, containerInfo[i]);
for ( var i = 0; i < containerInfo.length; i++) {
if (containerInfo[i].children == null) {
this.appendEdtiors(container, containerInfo[i].label,
containerInfo[i].name, containerInfo[i].paramTypeModel);
}
else {
$(container).append(
this.createEditorContainer(containerInfo[i].name, null,
containerInfo[i].children));
}
}
return container;
}
Device.prototype.appendEdtiors = function(container, editorUnit) {
};
Device.prototype.appendEdtiors = function(container, label, name, editorInfo) {
var editorFactory = new EditorFactory();
for ( var key in editorUnit) {
var editorInfo = editorUnit[key];
if (editorInfo.type.toLowerCase() == "field") {
$(container).append(
editorFactory.createField(editorInfo.label,
editorInfo.name, editorInfo.size, editorInfo.name));
if (editorInfo.type.toLowerCase() == "field") {
$(container).append(
editorFactory.createField(label, name, editorInfo.size, name));
} else if (editorInfo.type.toLowerCase() == "nfield") {
$(container).append(
editorFactory.createMultiField(editorInfo.label,
editorInfo.name, editorInfo.size, editorInfo.name));
} else if (editorInfo.type.toLowerCase() == "table") {
$(container).append(
editorFactory.createTable(editorInfo.label,
editorInfo.name, edtiorInfo.cols, editorInfo.name));
} else if (editorInfo.type.toLowerCase() == "nfield") {
$(container).append(
editorFactory.createMultiField(label, name, editorInfo.size,
name));
} else if (editorInfo.type.toLowerCase() == "table") {
$(container).append(
editorFactory.createTable(label, name, editorInfo.cols, name));
} else if (editorInfo.type.toLowerCase() == "file") {
$(container).append(
editorFactory.createFile(editorInfo.lable, editorInfo.name,
editorInfo.size, editorInfo.name));
} else if (editorInfo.type.toLowerCase() == "date") {
$(container).append(
editorFactory.createDate(editorInfo.label, editorInfo.name,
editorInfo.size, editorInfo.name));
} else if (editorInfo.type.toLowerCase() == "select") {
$(container).append(
editorFactory.createSelect(editorInfo.label,
editorInfo.name, ediorInfo.size,
editorInfo.options, editorInfo.name));
} else {
alert("no such editor type:" + editorInfo.type);
}
} else if (editorInfo.type.toLowerCase() == "file") {
$(container).append(
editorFactory.createFile(lable, name, editorInfo.size, name));
} else if (editorInfo.type.toLowerCase() == "date") {
$(container).append(
editorFactory.createDate(label, name, editorInfo.size, name));
} else if (editorInfo.type.toLowerCase() == "select") {
$(container).append(
editorFactory.createSelect(label, name, editorInfo.size,
editorInfo.options, name));
} else {
alert("no such editor type:" + editorInfo.type);
}
}
};
Device.prototype.addChildDevice = function() {
}
};
function dataTransfer(serverData) {
var editorInfos = new Array();
@ -82,18 +85,23 @@ function dataTransfer(serverData) {
if (serverData.groupModels != null) {
for ( var i = 0; i < groupInfos.length; i++) {
editorInfos.push(dataTransfer(groupInfos[i]));
var container = new Container(groupInfos[i].name,
dataTransfer(groupInfos[i]));
editorInfos.push(container);
}
}
return editorInfos;
}
var Container = function(name, children) {
this.name = name;
this.children = children;
};
$(function() {
var pluginName = "hbase";
var plugin;
var url = "/getPlugin/" + pluginName;
$.get(url, {}, function(data) {