Skip to content

Commit

Permalink
Merge pull request #40 from vkuznet/rishi-html
Browse files Browse the repository at this point in the history 
Add client html page
  • Loading branch information
@vkuznet
vkuznet authored Aug 15, 2017
2 parents fcde48c + 5c4d57a commit 9f3ff93
Show file tree
Hide file tree
Showing 2 changed files with 193 additions and 0 deletions.
84 changes: 84 additions & 0 deletions html/client.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
<html>
<header><title>Transfer portal</title></header>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<script src="client.js"></script>
<link rel="stylesheet" type="text/css" href="client.css">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="well well-sm">
<form class="form-horizontal" id="request-form" action="" method="post">
<fieldset>
<legend class="text-center">Register Request</legend>

<div class="form-group">
<label class="col-md-3 control-label" for="source">Source</label>
<div class="col-md-9">
<input id="source" name="source" type="text" placeholder="Source name: source-server.cern.ch:8000" class="form-control">
</div>
</div>

<div class="form-group">
<div class="col-md-12 text-right">
<button class="btn btn-danger" type="button" id="get-data">Get Data</button>
</div>
</div>

<div class="form-group">
<label class="col-md-3 control-label" for="destination">Destination</label>
<div class="col-md-9">
<input id="destination" name="destination" type="text" placeholder="Destination name" class="form-control">
</div>
</div>

<div class="form-group">
<label class="col-md-3 control-label" for="main-agent">Main Agent</label>
<div class="col-md-9">
<input id="main-agent" name="main-agent" type="text" placeholder="Main Agent name" class="form-control">
</div>
</div>

<div class="form-group">
<label class="col-md-3 control-label" for="dataset">Dataset</label>
<div class="col-md-9">
<select id="dataset">
<option value="select">select</option>
</select>
</div>
</div>

<div class="form-group">
<label class="col-md-3 control-label" for="block">Block</label>
<div class="col-md-9">
<select id="block">
<option value="select">select</option>
</select>
</div>
</div>

<div class="form-group">
<label class="col-md-3 control-label" for="file">File</label>
<div class="col-md-9">
<select id="file">
<option value="select">select</option>
</select>
</div>
</div>

<!-- Form actions -->
<div class="form-group">
<div class="col-md-12 text-right">
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</html>
109 changes: 109 additions & 0 deletions html/client.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
var HttpClient = function() {

this.get = function(aUrl, aCallback) {
var anHttpRequest = new XMLHttpRequest();
anHttpRequest.onreadystatechange = function() {
if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200)
aCallback(anHttpRequest.responseText);
}
anHttpRequest.open("GET", aUrl, true);
anHttpRequest.send(null);
}

this.post = function(aUrl, body, aCallback) {
var anHttpRequest = new XMLHttpRequest();
anHttpRequest.onreadystatechange = function() {
if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200)
aCallback(anHttpRequest.responseText);
}
anHttpRequest.open("POST", aUrl, true);
anHttpRequest.setRequestHeader("Content-Type", "application/json");
anHttpRequest.send(JSON.stringify(body));
}
}

var client = new HttpClient();
var dataset = {};
var block = {};

$(document).ready(function() {
$("#get-data").click(function() {
sname = $("#source").val();
client.get('http://' + sname + '/tfc', function(response) {
var catalog = JSON.parse(response);
dataset = {};
block = {};
$.each(catalog, function(index) {
dataset[catalog[index].dataset] = [];
})
$.each(catalog, function(index) {
dataset[catalog[index].dataset].push(catalog[index].block);
block[catalog[index].block] = [];
})
$.each(catalog, function(index) {
block[catalog[index].block].push(catalog[index].lfn);
})
var datasetKey = Object.keys(dataset)
$('#dataset').find('option').remove().end()
.append('<option value="select">select</option>')
.val('select');
$.each(datasetKey, function(index) {
var option = $('<option value="' + datasetKey[index] + '">' + datasetKey[index] + '</option>');
$('#dataset').append(option);
$('#dataset').trigger("chosen:updated");
})
})
});
$('#dataset').on('change', function(e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
var blockKeys = dataset[valueSelected]
$('#block').find('option').remove().end()
.append('<option value="select">select</option>')
.val('select');
$.each(blockKeys, function(index) {
var option = $('<option value="' + blockKeys[index] + '">' + blockKeys[index] + '</option>');
$('#block').append(option);
$('#block').trigger("chosen:updated");
})
});
$('#block').on('change', function(e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
var files = block[valueSelected]
$('#file').find('option').remove().end()
.append('<option value="select">select</option>')
.val('select');
$.each(files, function(index) {
var option = $('<option value="' + files[index] + '">' + files[index] + '</option>');
$('#file').append(option);
$('#file').trigger("chosen:updated");
})
});
$('#request-form').on('submit', function(e) {
var dataset = $('#dataset').val();
var block = $('#block').val();
var file = $('#file').val();

if(dataset=="select"){
dataset = "";
}
if(block=="select"){
block = "";
}
if(file=="select"){
file = "";
}
var reqArr = [];
reqArr.push({
SrcUrl: 'http://' + $("#source").val(),
DstUrl: 'http://' + $("#destination").val(),
File: file,
Block: block,
Dataset: dataset
});
client.post('http://'+$("#main-agent").val()+'/request', reqArr, function(response) {
console.log(response)
})
});
});

0 comments on commit 9f3ff93

Please sign in to comment.