217 lines
8.5 KiB
HTML
217 lines
8.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
|
|
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
|
|
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
|
|
<script>
|
|
//
|
|
// Created by Luis Cuenca on 8/24/18
|
|
// Copyright 2018 High Fidelity, Inc.
|
|
//
|
|
//
|
|
// Distributed under the Apache License, Version 2.0.
|
|
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
|
|
//
|
|
|
|
/* jslint bitwise: true */
|
|
|
|
/* global $, EventBridge
|
|
*/
|
|
$(function () {
|
|
var MSG_DOCUMENT_LOADED = 0;
|
|
var MSG_CREATE = 1;
|
|
var MSG_INIT = 2;
|
|
var MSG_STOP = 3;
|
|
|
|
var groupData, collisionData;
|
|
|
|
function createInput(kind, group, name, type, config) {
|
|
var input = $("<input>").attr("type", type).attr("data-name", name).attr("data-group", group).attr("data-kind", kind);
|
|
var inputId = kind + "-" + group + "-" + type + "-" + name;
|
|
input.attr("id", inputId).attr("name", inputId);
|
|
if (type === "range") {
|
|
input.attr("step", config.step).attr("value", config.value).attr("min", config.min).attr("max", config.max);
|
|
} else if (type === "checkbox" && config.checked) {
|
|
input.attr("checked", "checked");
|
|
} else {
|
|
input.css("width", "100%");
|
|
input.attr("value", config.value);
|
|
input.attr("type", "text");
|
|
}
|
|
return input;
|
|
}
|
|
|
|
function createElement(kind, group, name, type, config) {
|
|
var width = config.width != undefined ? config.width : "50%";
|
|
var element = $("<div>").addClass("unit-config").css("width", width).css("display", "inline-block");
|
|
var input = createInput(kind, group, name, type, config);
|
|
var label = $("<label>").text(name).attr("for", input.attr("id"));
|
|
element.append(label).append(input);
|
|
return element;
|
|
}
|
|
|
|
function createGroupContainer(name, type) {
|
|
var groupContainer = $("<div>").addClass("ui-corner-all custom-corners");
|
|
var bartype = type ? "ui-bar-" + type : "ui-bar-b";
|
|
var headContainer = $("<div>").addClass("ui-bar " + bartype);
|
|
var header = $("<h3>").addClass("header-text").text(name);
|
|
var contentContainer = $("<div>").addClass("group-content ui-body ui-body-a");
|
|
headContainer.append(header);
|
|
groupContainer.append(headContainer).append(contentContainer);
|
|
return groupContainer;
|
|
}
|
|
|
|
function createGroup(kind, name, elements, type) {
|
|
var group = createGroupContainer(name, type);
|
|
var content = group.find(".group-content");
|
|
for (var i = 0; i < elements.length; i++){
|
|
if (elements[i].type) {
|
|
content.append(createElement(kind, elements[i].name, elements[i].text, elements[i].type, elements[i].config));
|
|
} else {
|
|
content.append(elements[i]);
|
|
}
|
|
}
|
|
return group;
|
|
}
|
|
|
|
function getAllInputData() {
|
|
var inputs = $("input");
|
|
var output = {};
|
|
for (var i = 0; i < inputs.length; i++) {
|
|
var input = $(inputs[i]);
|
|
var group = input.data("group");
|
|
var value = inputs[i].value;
|
|
if (input.attr("type") == "checkbox") {
|
|
value = input.prop("checked") ? 1 : 0;
|
|
}
|
|
output[group] = value;
|
|
}
|
|
return output;
|
|
}
|
|
|
|
function configureInputs(selector) {
|
|
// $(selector).find("input").change(sendAllInputData);
|
|
}
|
|
|
|
EventBridge.scriptEventReceived.connect(function (msg) {
|
|
var message = JSON.parse(msg);
|
|
if (message.type === MSG_CREATE) {
|
|
$("#panel").empty();
|
|
|
|
var countControls = [
|
|
{text: "", name: "replicaCount", type: "range", config: {"step": 1, "value": message.data.replicaCount, "min":0, "max":100, width: "100%"}}
|
|
];
|
|
var groupElement = createGroup(0, "N replicas per other avatar", countControls);
|
|
$("#panel").append(groupElement);
|
|
|
|
var gotoControls = [
|
|
{text: "", name: "domainGoto", type: "input", config: {"value": message.data.domainGoto, width: "100%"}}
|
|
];
|
|
groupElement = createGroup(0, "Test domain", gotoControls);
|
|
$("#panel").append(groupElement);
|
|
|
|
var transControls = [
|
|
{text: "", name: "domainTrans", type: "input", config: {"value": message.data.domainTrans, "width": "100%"}}
|
|
];
|
|
groupElement = createGroup(0, "Initial domain", transControls);
|
|
$("#panel").append(groupElement);
|
|
|
|
configureInputs("#panel");
|
|
$("#panel").trigger('create');
|
|
}
|
|
});
|
|
$("#resetter").click(function() {
|
|
var data = getAllInputData();
|
|
if (data.replicaCount == 0 && !$(this).hasClass("btn-checked")) {
|
|
$("#errormsg").css("opacity", "1");
|
|
} else {
|
|
$("#errormsg").css("opacity", "0");
|
|
$(this).toggleClass("btn-checked");
|
|
if (!$(this).hasClass("btn-checked")) {
|
|
$(this).text("Start Test");
|
|
EventBridge.emitWebEvent(JSON.stringify({"type": MSG_STOP}));
|
|
} else {
|
|
$(this).text("Stop Test");
|
|
EventBridge.emitWebEvent(JSON.stringify({"type": MSG_INIT, "data": data}));
|
|
}
|
|
}
|
|
|
|
});
|
|
EventBridge.emitWebEvent(JSON.stringify({type: MSG_DOCUMENT_LOADED}));
|
|
|
|
});
|
|
</script>
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<style>
|
|
.container {
|
|
margin:10px;
|
|
}
|
|
.unit-config.third{
|
|
width: 33%;
|
|
display: inline-block;
|
|
}
|
|
.unit-config.half{
|
|
width: 49.5%;
|
|
display: inline-block;
|
|
}
|
|
.nav-bar{
|
|
width: 440px;
|
|
}
|
|
.nav-text > a {
|
|
font-size: 20px !important;
|
|
|
|
}
|
|
.ui-controlgroup-controls {
|
|
width:100% !important;
|
|
}
|
|
.ui-select {
|
|
width:80% !important;
|
|
}
|
|
.right {
|
|
float: right;
|
|
}
|
|
.thin {
|
|
margin: 0px !important;
|
|
padding: 0px !important;
|
|
}
|
|
.group-enabler {
|
|
margin-left: 390px !important;
|
|
margin-top: -25px !important;
|
|
}
|
|
.small-button {
|
|
width: 50px;
|
|
}
|
|
.btn-checked {
|
|
background-color: red !important;
|
|
}
|
|
#errormsg {
|
|
opacity: 0;
|
|
}
|
|
.main-title {
|
|
font-size: 30px !important;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
<body>
|
|
<p class="main-title">Replicator Control Panel</p>
|
|
<div id="panel" class="container">
|
|
<!-- /CONTROLS -->
|
|
</div>
|
|
<div id="nav-panel" style="margin:10px">
|
|
<div data-role="navbar" class="nav-bar">
|
|
<ul>
|
|
<li class="nav-text" data-idx=0 >
|
|
<div id="errormsg"><p>Number of replicas can't be zero</p></div>
|
|
<a href="#" id="resetter" data-role="button" class="ui-btn-active">
|
|
<span>Start Test</span>
|
|
</a>
|
|
|
|
</li>
|
|
</ul>
|
|
</div><!-- /navbar -->
|
|
</div>
|
|
</body>
|
|
</head>
|
|
</html>
|